@primer/components 29.1.0 → 29.1.1-rc.cea79543
Sign up to get free protection for your applications and to get access to all the features.
- package/.changeset/README.md +8 -0
- package/.changeset/config.json +10 -0
- package/.devcontainer/devcontainer.json +8 -0
- package/.eslintrc.json +106 -0
- package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
- package/.github/ISSUE_TEMPLATE/new_component_proposal_template.md +41 -0
- package/.github/dependabot.yml +18 -0
- package/.github/pull_request_template.md +18 -0
- package/.github/workflows/ci.yml +31 -0
- package/.github/workflows/deploy_preview.yml +47 -0
- package/.github/workflows/deploy_production.yml +70 -0
- package/.github/workflows/release.yml +35 -0
- package/.github/workflows/release_canary.yml +70 -0
- package/.github/workflows/release_candidate.yml +60 -0
- package/.github/workflows/size.yml +13 -0
- package/.github/workflows/stale.yml +26 -0
- package/.gitignore +10 -0
- package/.npmrc +4 -0
- package/.nvmrc +1 -0
- package/.storybook/main.js +11 -0
- package/.storybook/preview.js +69 -0
- package/.vscode/launch.json +21 -0
- package/.vscode/settings.json +13 -0
- package/@types/@styled-system/index.d.ts +0 -0
- package/@types/@styled-system/prop-types/index.d.ts +1 -0
- package/@types/@styled-system/props/index.d.ts +1 -0
- package/@types/jest-styled-components/index.d.ts +1 -0
- package/CHANGELOG.md +6 -0
- package/CODEOWNERS +2 -0
- package/babel-defines.js +13 -0
- package/babel.config.js +39 -0
- package/contributor-docs/CODE_OF_CONDUCT.md +76 -0
- package/contributor-docs/CONTRIBUTING.md +274 -0
- package/contributor-docs/adrs/adr-001-typescript.md +23 -0
- package/contributor-docs/adrs/adr-002-behavior-isolation.md +106 -0
- package/contributor-docs/behaviors.md +132 -0
- package/contributor-docs/component-contents-api-patterns.md +315 -0
- package/contributor-docs/principles.md +39 -0
- package/docs/.eslintrc +0 -0
- package/docs/.gitignore +91 -0
- package/docs/components/PropsList.js +5 -0
- package/docs/components/State.js +9 -0
- package/docs/components/constants.js +34 -0
- package/docs/components/index.js +2 -0
- package/docs/content/ActionList.mdx +72 -0
- package/docs/content/ActionMenu.mdx +80 -0
- package/docs/content/AnchoredOverlay.mdx +37 -0
- package/docs/content/Avatar.mdx +33 -0
- package/docs/content/AvatarStack.mdx +43 -0
- package/docs/content/BorderBox.md +46 -0
- package/docs/content/Box.md +74 -0
- package/docs/content/BranchName.md +18 -0
- package/docs/content/Breadcrumbs.md +52 -0
- package/docs/content/Buttons.md +54 -0
- package/docs/content/CircleBadge.md +45 -0
- package/docs/content/CircleOcticon.md +18 -0
- package/docs/content/CounterLabel.md +30 -0
- package/docs/content/Details.md +105 -0
- package/docs/content/Dialog.md +108 -0
- package/docs/content/Dialog2.mdx +179 -0
- package/docs/content/Dropdown.md +72 -0
- package/docs/content/DropdownMenu.mdx +49 -0
- package/docs/content/FilterList.md +44 -0
- package/docs/content/FilteredSearch.md +39 -0
- package/docs/content/Flash.md +42 -0
- package/docs/content/Flex.md +58 -0
- package/docs/content/FormGroup.md +44 -0
- package/docs/content/Grid.md +59 -0
- package/docs/content/Header.md +79 -0
- package/docs/content/Heading.md +22 -0
- package/docs/content/Label.md +40 -0
- package/docs/content/LabelGroup.md +31 -0
- package/docs/content/Link.md +37 -0
- package/docs/content/Overlay.mdx +94 -0
- package/docs/content/Pagehead.md +27 -0
- package/docs/content/Pagination.md +187 -0
- package/docs/content/PointerBox.md +81 -0
- package/docs/content/Popover.md +137 -0
- package/docs/content/Portal.mdx +73 -0
- package/docs/content/Position.md +97 -0
- package/docs/content/ProgressBar.mdx +29 -0
- package/docs/content/SelectMenu.md +433 -0
- package/docs/content/SelectPanel.mdx +67 -0
- package/docs/content/SideNav.md +179 -0
- package/docs/content/Spinner.mdx +32 -0
- package/docs/content/StateLabel.md +33 -0
- package/docs/content/StyledOcticon.md +34 -0
- package/docs/content/SubNav.md +102 -0
- package/docs/content/TabNav.md +50 -0
- package/docs/content/Text.md +29 -0
- package/docs/content/TextInput.md +32 -0
- package/docs/content/Timeline.md +138 -0
- package/docs/content/Tooltip.md +41 -0
- package/docs/content/Truncate.md +65 -0
- package/docs/content/UnderlineNav.md +53 -0
- package/docs/content/anchoredPosition.mdx +163 -0
- package/docs/content/core-concepts.md +70 -0
- package/docs/content/focusTrap.mdx +103 -0
- package/docs/content/focusZone.mdx +145 -0
- package/docs/content/getting-started.md +134 -0
- package/docs/content/index.md +33 -0
- package/docs/content/linting.md +35 -0
- package/docs/content/overriding-styles.mdx +79 -0
- package/docs/content/philosophy.md +23 -0
- package/docs/content/primer-theme.md +89 -0
- package/docs/content/ssr.mdx +43 -0
- package/docs/content/system-props.mdx +37 -0
- package/docs/content/theme-reference.md +16 -0
- package/docs/content/theming.md +249 -0
- package/docs/content/useOnEscapePress.mdx +56 -0
- package/docs/content/useOnOutsideClick.mdx +57 -0
- package/docs/content/useOpenAndCloseFocus.mdx +49 -0
- package/docs/content/useOverlay.mdx +62 -0
- package/docs/content/useSafeTimeout.mdx +32 -0
- package/docs/gatsby-config.js +30 -0
- package/docs/gatsby-node.js +101 -0
- package/docs/package-lock.json +20979 -0
- package/docs/package.json +35 -0
- package/docs/src/@primer/gatsby-theme-doctocat/components/hero.js +21 -0
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-code.js +84 -0
- package/docs/src/@primer/gatsby-theme-doctocat/components/live-preview-wrapper.js +39 -0
- package/docs/src/@primer/gatsby-theme-doctocat/components/nav-dropdown.js +48 -0
- package/docs/src/@primer/gatsby-theme-doctocat/components/wrap-page-element.js +25 -0
- package/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +54 -0
- package/docs/src/@primer/gatsby-theme-doctocat/nav.yml +127 -0
- package/docs/src/@primer/gatsby-theme-doctocat/primer-components-hero.svg +1411 -0
- package/docs/src/props.js +77 -0
- package/jest.config.js +13 -0
- package/lib/Button/Button.d.ts +0 -1
- package/lib/Button/ButtonClose.d.ts +1 -2
- package/lib/Button/ButtonDanger.d.ts +0 -1
- package/lib/Button/ButtonInvisible.d.ts +0 -1
- package/lib/Button/ButtonOutline.d.ts +0 -1
- package/lib/Button/ButtonPrimary.d.ts +0 -1
- package/lib/CircleOcticon.d.ts +0 -1
- package/lib/Dialog.d.ts +2 -3
- package/lib/Dropdown.d.ts +0 -4
- package/lib/DropdownMenu/DropdownButton.d.ts +1 -2
- package/lib/FilterList.d.ts +0 -1
- package/lib/Position.d.ts +4 -4
- package/lib/SelectMenu/SelectMenu.d.ts +4 -10
- package/lib/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib/Timeline.d.ts +0 -1
- package/lib/__tests__/ActionList.d.ts +1 -0
- package/lib/__tests__/ActionList.js +67 -0
- package/lib/__tests__/ActionMenu.d.ts +1 -0
- package/lib/__tests__/ActionMenu.js +154 -0
- package/lib/__tests__/AnchoredOverlay.d.ts +1 -0
- package/lib/__tests__/AnchoredOverlay.js +161 -0
- package/lib/__tests__/Avatar.d.ts +1 -0
- package/lib/__tests__/Avatar.js +70 -0
- package/lib/__tests__/AvatarStack.d.ts +1 -0
- package/lib/__tests__/AvatarStack.js +71 -0
- package/lib/__tests__/BorderBox.d.ts +1 -0
- package/lib/__tests__/BorderBox.js +61 -0
- package/lib/__tests__/Box.d.ts +1 -0
- package/lib/__tests__/Box.js +81 -0
- package/lib/__tests__/BranchName.d.ts +1 -0
- package/lib/__tests__/BranchName.js +39 -0
- package/lib/__tests__/Breadcrumb.d.ts +1 -0
- package/lib/__tests__/Breadcrumb.js +42 -0
- package/lib/__tests__/BreadcrumbItem.d.ts +1 -0
- package/lib/__tests__/BreadcrumbItem.js +52 -0
- package/lib/__tests__/Button.d.ts +1 -0
- package/lib/__tests__/Button.js +152 -0
- package/lib/__tests__/Caret.d.ts +1 -0
- package/lib/__tests__/Caret.js +52 -0
- package/lib/__tests__/CircleBadge.d.ts +1 -0
- package/lib/__tests__/CircleBadge.js +87 -0
- package/lib/__tests__/CircleOcticon.d.ts +1 -0
- package/lib/__tests__/CircleOcticon.js +74 -0
- package/lib/__tests__/CounterLabel.d.ts +1 -0
- package/lib/__tests__/CounterLabel.js +61 -0
- package/lib/__tests__/Details.d.ts +1 -0
- package/lib/__tests__/Details.js +120 -0
- package/lib/__tests__/Dialog.d.ts +1 -0
- package/lib/__tests__/Dialog.js +188 -0
- package/lib/__tests__/Dropdown.d.ts +1 -0
- package/lib/__tests__/Dropdown.js +70 -0
- package/lib/__tests__/DropdownMenu.d.ts +1 -0
- package/lib/__tests__/DropdownMenu.js +153 -0
- package/lib/__tests__/FilterList.d.ts +1 -0
- package/lib/__tests__/FilterList.js +39 -0
- package/lib/__tests__/FilterListItem.d.ts +1 -0
- package/lib/__tests__/FilterListItem.js +49 -0
- package/lib/__tests__/FilteredSearch.d.ts +1 -0
- package/lib/__tests__/FilteredSearch.js +39 -0
- package/lib/__tests__/Flash.d.ts +1 -0
- package/lib/__tests__/Flash.js +65 -0
- package/lib/__tests__/Flex.d.ts +1 -0
- package/lib/__tests__/Flex.js +77 -0
- package/lib/__tests__/FormGroup.d.ts +1 -0
- package/lib/__tests__/FormGroup.js +58 -0
- package/lib/__tests__/Grid.d.ts +1 -0
- package/lib/__tests__/Grid.js +107 -0
- package/lib/__tests__/Header.d.ts +1 -0
- package/lib/__tests__/Header.js +63 -0
- package/lib/__tests__/Heading.d.ts +1 -0
- package/lib/__tests__/Heading.js +112 -0
- package/lib/__tests__/Label.d.ts +1 -0
- package/lib/__tests__/Label.js +49 -0
- package/lib/__tests__/LabelGroup.d.ts +1 -0
- package/lib/__tests__/LabelGroup.js +41 -0
- package/lib/__tests__/Link.d.ts +1 -0
- package/lib/__tests__/Link.js +73 -0
- package/lib/__tests__/Overlay.d.ts +1 -0
- package/lib/__tests__/Overlay.js +145 -0
- package/lib/__tests__/Pagehead.d.ts +1 -0
- package/lib/__tests__/Pagehead.js +40 -0
- package/lib/__tests__/Pagination/Pagination.d.ts +1 -0
- package/lib/__tests__/Pagination/Pagination.js +50 -0
- package/lib/__tests__/Pagination/PaginationModel.d.ts +1 -0
- package/lib/__tests__/Pagination/PaginationModel.js +186 -0
- package/lib/__tests__/PointerBox.d.ts +1 -0
- package/lib/__tests__/PointerBox.js +49 -0
- package/lib/__tests__/Popover.d.ts +1 -0
- package/lib/__tests__/Popover.js +70 -0
- package/lib/__tests__/Portal.d.ts +1 -0
- package/lib/__tests__/Portal.js +124 -0
- package/lib/__tests__/Position.d.ts +1 -0
- package/lib/__tests__/Position.js +149 -0
- package/lib/__tests__/ProgressBar.d.ts +1 -0
- package/lib/__tests__/ProgressBar.js +71 -0
- package/lib/__tests__/SelectMenu.d.ts +1 -0
- package/lib/__tests__/SelectMenu.js +155 -0
- package/lib/__tests__/SelectPanel.d.ts +1 -0
- package/lib/__tests__/SelectPanel.js +83 -0
- package/lib/__tests__/SideNav.d.ts +1 -0
- package/lib/__tests__/SideNav.js +75 -0
- package/lib/__tests__/Spinner.d.ts +1 -0
- package/lib/__tests__/Spinner.js +56 -0
- package/lib/__tests__/StateLabel.d.ts +1 -0
- package/lib/__tests__/StateLabel.js +74 -0
- package/lib/__tests__/StyledOcticon.d.ts +1 -0
- package/lib/__tests__/StyledOcticon.js +43 -0
- package/lib/__tests__/SubNav.d.ts +1 -0
- package/lib/__tests__/SubNav.js +65 -0
- package/lib/__tests__/SubNavLink.d.ts +1 -0
- package/lib/__tests__/SubNavLink.js +52 -0
- package/lib/__tests__/TabNav.d.ts +1 -0
- package/lib/__tests__/TabNav.js +53 -0
- package/lib/__tests__/Text.d.ts +1 -0
- package/lib/__tests__/Text.js +108 -0
- package/lib/__tests__/TextInput.d.ts +1 -0
- package/lib/__tests__/TextInput.js +81 -0
- package/lib/__tests__/ThemeProvider.d.ts +1 -0
- package/lib/__tests__/ThemeProvider.js +444 -0
- package/lib/__tests__/Timeline.d.ts +1 -0
- package/lib/__tests__/Timeline.js +80 -0
- package/lib/__tests__/Tooltip.d.ts +1 -0
- package/lib/__tests__/Tooltip.js +72 -0
- package/lib/__tests__/Truncate.d.ts +1 -0
- package/lib/__tests__/Truncate.js +66 -0
- package/lib/__tests__/UnderlineNav.d.ts +1 -0
- package/lib/__tests__/UnderlineNav.js +75 -0
- package/lib/__tests__/UnderlineNavLink.d.ts +1 -0
- package/lib/__tests__/UnderlineNavLink.js +54 -0
- package/lib/__tests__/behaviors/anchoredPosition.d.ts +1 -0
- package/lib/__tests__/behaviors/anchoredPosition.js +390 -0
- package/lib/__tests__/behaviors/focusTrap.d.ts +1 -0
- package/lib/__tests__/behaviors/focusTrap.js +234 -0
- package/lib/__tests__/behaviors/focusZone.d.ts +1 -0
- package/lib/__tests__/behaviors/focusZone.js +570 -0
- package/lib/__tests__/behaviors/iterateFocusableElements.d.ts +1 -0
- package/lib/__tests__/behaviors/iterateFocusableElements.js +55 -0
- package/lib/__tests__/filterObject.d.ts +1 -0
- package/lib/__tests__/filterObject.js +30 -0
- package/lib/__tests__/hooks/useAnchoredPosition.d.ts +1 -0
- package/lib/__tests__/hooks/useAnchoredPosition.js +54 -0
- package/lib/__tests__/hooks/useOnEscapePress.d.ts +1 -0
- package/lib/__tests__/hooks/useOnEscapePress.js +32 -0
- package/lib/__tests__/hooks/useOnOutsideClick.d.ts +1 -0
- package/lib/__tests__/hooks/useOnOutsideClick.js +87 -0
- package/lib/__tests__/hooks/useOpenAndCloseFocus.d.ts +1 -0
- package/lib/__tests__/hooks/useOpenAndCloseFocus.js +60 -0
- package/lib/__tests__/hooks/useProvidedStateOrCreate.d.ts +1 -0
- package/lib/__tests__/hooks/useProvidedStateOrCreate.js +45 -0
- package/lib/__tests__/theme.d.ts +1 -0
- package/lib/__tests__/theme.js +36 -0
- package/lib/__tests__/themeGet.d.ts +1 -0
- package/lib/__tests__/themeGet.js +25 -0
- package/lib/__tests__/useSafeTimeout.d.ts +1 -0
- package/lib/__tests__/useSafeTimeout.js +45 -0
- package/lib/stories/ActionList.stories.js +382 -0
- package/lib/stories/ActionMenu.stories.js +338 -0
- package/lib/stories/AnchoredOverlay.stories.js +127 -0
- package/lib/stories/AvatarStack.stories.js +49 -0
- package/lib/stories/Button.stories.js +114 -0
- package/lib/stories/ConfirmationDialog.stories.js +111 -0
- package/lib/stories/Dialog.stories.js +265 -0
- package/lib/stories/DropdownMenu.stories.js +122 -0
- package/lib/stories/Overlay.stories.js +185 -0
- package/lib/stories/Portal.stories.js +104 -0
- package/lib/stories/SelectPanel.stories.js +342 -0
- package/lib/stories/ThemeProvider.stories.js +102 -0
- package/lib/stories/useAnchoredPosition.stories.js +351 -0
- package/lib/stories/useFocusTrap.stories.js +356 -0
- package/lib/stories/useFocusZone.stories.js +599 -0
- package/lib-esm/Button/Button.d.ts +0 -1
- package/lib-esm/Button/ButtonClose.d.ts +1 -2
- package/lib-esm/Button/ButtonDanger.d.ts +0 -1
- package/lib-esm/Button/ButtonInvisible.d.ts +0 -1
- package/lib-esm/Button/ButtonOutline.d.ts +0 -1
- package/lib-esm/Button/ButtonPrimary.d.ts +0 -1
- package/lib-esm/CircleOcticon.d.ts +0 -1
- package/lib-esm/Dialog.d.ts +2 -3
- package/lib-esm/Dropdown.d.ts +0 -4
- package/lib-esm/DropdownMenu/DropdownButton.d.ts +1 -2
- package/lib-esm/FilterList.d.ts +0 -1
- package/lib-esm/Position.d.ts +4 -4
- package/lib-esm/SelectMenu/SelectMenu.d.ts +4 -10
- package/lib-esm/SelectMenu/SelectMenuItem.d.ts +1 -1
- package/lib-esm/SelectMenu/SelectMenuModal.d.ts +1 -1
- package/lib-esm/Timeline.d.ts +0 -1
- package/lib-esm/__tests__/ActionList.d.ts +1 -0
- package/lib-esm/__tests__/ActionList.js +54 -0
- package/lib-esm/__tests__/ActionMenu.d.ts +1 -0
- package/lib-esm/__tests__/ActionMenu.js +141 -0
- package/lib-esm/__tests__/AnchoredOverlay.d.ts +1 -0
- package/lib-esm/__tests__/AnchoredOverlay.js +135 -0
- package/lib-esm/__tests__/Avatar.d.ts +1 -0
- package/lib-esm/__tests__/Avatar.js +58 -0
- package/lib-esm/__tests__/AvatarStack.d.ts +1 -0
- package/lib-esm/__tests__/AvatarStack.js +57 -0
- package/lib-esm/__tests__/BorderBox.d.ts +1 -0
- package/lib-esm/__tests__/BorderBox.js +49 -0
- package/lib-esm/__tests__/Box.d.ts +1 -0
- package/lib-esm/__tests__/Box.js +69 -0
- package/lib-esm/__tests__/BranchName.d.ts +1 -0
- package/lib-esm/__tests__/BranchName.js +28 -0
- package/lib-esm/__tests__/Breadcrumb.d.ts +1 -0
- package/lib-esm/__tests__/Breadcrumb.js +31 -0
- package/lib-esm/__tests__/BreadcrumbItem.d.ts +1 -0
- package/lib-esm/__tests__/BreadcrumbItem.js +41 -0
- package/lib-esm/__tests__/Button.d.ts +1 -0
- package/lib-esm/__tests__/Button.js +141 -0
- package/lib-esm/__tests__/Caret.d.ts +1 -0
- package/lib-esm/__tests__/Caret.js +42 -0
- package/lib-esm/__tests__/CircleBadge.d.ts +1 -0
- package/lib-esm/__tests__/CircleBadge.js +73 -0
- package/lib-esm/__tests__/CircleOcticon.d.ts +1 -0
- package/lib-esm/__tests__/CircleOcticon.js +61 -0
- package/lib-esm/__tests__/CounterLabel.d.ts +1 -0
- package/lib-esm/__tests__/CounterLabel.js +49 -0
- package/lib-esm/__tests__/Details.d.ts +1 -0
- package/lib-esm/__tests__/Details.js +109 -0
- package/lib-esm/__tests__/Dialog.d.ts +1 -0
- package/lib-esm/__tests__/Dialog.js +174 -0
- package/lib-esm/__tests__/Dropdown.d.ts +1 -0
- package/lib-esm/__tests__/Dropdown.js +59 -0
- package/lib-esm/__tests__/DropdownMenu.d.ts +1 -0
- package/lib-esm/__tests__/DropdownMenu.js +139 -0
- package/lib-esm/__tests__/FilterList.d.ts +1 -0
- package/lib-esm/__tests__/FilterList.js +28 -0
- package/lib-esm/__tests__/FilterListItem.d.ts +1 -0
- package/lib-esm/__tests__/FilterListItem.js +38 -0
- package/lib-esm/__tests__/FilteredSearch.d.ts +1 -0
- package/lib-esm/__tests__/FilteredSearch.js +28 -0
- package/lib-esm/__tests__/Flash.d.ts +1 -0
- package/lib-esm/__tests__/Flash.js +53 -0
- package/lib-esm/__tests__/Flex.d.ts +1 -0
- package/lib-esm/__tests__/Flex.js +66 -0
- package/lib-esm/__tests__/FormGroup.d.ts +1 -0
- package/lib-esm/__tests__/FormGroup.js +47 -0
- package/lib-esm/__tests__/Grid.d.ts +1 -0
- package/lib-esm/__tests__/Grid.js +96 -0
- package/lib-esm/__tests__/Header.d.ts +1 -0
- package/lib-esm/__tests__/Header.js +52 -0
- package/lib-esm/__tests__/Heading.d.ts +1 -0
- package/lib-esm/__tests__/Heading.js +101 -0
- package/lib-esm/__tests__/Label.d.ts +1 -0
- package/lib-esm/__tests__/Label.js +38 -0
- package/lib-esm/__tests__/LabelGroup.d.ts +1 -0
- package/lib-esm/__tests__/LabelGroup.js +28 -0
- package/lib-esm/__tests__/Link.d.ts +1 -0
- package/lib-esm/__tests__/Link.js +62 -0
- package/lib-esm/__tests__/Overlay.d.ts +1 -0
- package/lib-esm/__tests__/Overlay.js +123 -0
- package/lib-esm/__tests__/Pagehead.d.ts +1 -0
- package/lib-esm/__tests__/Pagehead.js +28 -0
- package/lib-esm/__tests__/Pagination/Pagination.d.ts +1 -0
- package/lib-esm/__tests__/Pagination/Pagination.js +37 -0
- package/lib-esm/__tests__/Pagination/PaginationModel.d.ts +1 -0
- package/lib-esm/__tests__/Pagination/PaginationModel.js +182 -0
- package/lib-esm/__tests__/PointerBox.d.ts +1 -0
- package/lib-esm/__tests__/PointerBox.js +38 -0
- package/lib-esm/__tests__/Popover.d.ts +1 -0
- package/lib-esm/__tests__/Popover.js +56 -0
- package/lib-esm/__tests__/Portal.d.ts +1 -0
- package/lib-esm/__tests__/Portal.js +104 -0
- package/lib-esm/__tests__/Position.d.ts +1 -0
- package/lib-esm/__tests__/Position.js +138 -0
- package/lib-esm/__tests__/ProgressBar.d.ts +1 -0
- package/lib-esm/__tests__/ProgressBar.js +60 -0
- package/lib-esm/__tests__/SelectMenu.d.ts +1 -0
- package/lib-esm/__tests__/SelectMenu.js +145 -0
- package/lib-esm/__tests__/SelectPanel.d.ts +1 -0
- package/lib-esm/__tests__/SelectPanel.js +67 -0
- package/lib-esm/__tests__/SideNav.d.ts +1 -0
- package/lib-esm/__tests__/SideNav.js +63 -0
- package/lib-esm/__tests__/Spinner.d.ts +1 -0
- package/lib-esm/__tests__/Spinner.js +45 -0
- package/lib-esm/__tests__/StateLabel.d.ts +1 -0
- package/lib-esm/__tests__/StateLabel.js +63 -0
- package/lib-esm/__tests__/StyledOcticon.d.ts +1 -0
- package/lib-esm/__tests__/StyledOcticon.js +31 -0
- package/lib-esm/__tests__/SubNav.d.ts +1 -0
- package/lib-esm/__tests__/SubNav.js +52 -0
- package/lib-esm/__tests__/SubNavLink.d.ts +1 -0
- package/lib-esm/__tests__/SubNavLink.js +41 -0
- package/lib-esm/__tests__/TabNav.d.ts +1 -0
- package/lib-esm/__tests__/TabNav.js +42 -0
- package/lib-esm/__tests__/Text.d.ts +1 -0
- package/lib-esm/__tests__/Text.js +95 -0
- package/lib-esm/__tests__/TextInput.d.ts +1 -0
- package/lib-esm/__tests__/TextInput.js +70 -0
- package/lib-esm/__tests__/ThemeProvider.d.ts +1 -0
- package/lib-esm/__tests__/ThemeProvider.js +408 -0
- package/lib-esm/__tests__/Timeline.d.ts +1 -0
- package/lib-esm/__tests__/Timeline.js +69 -0
- package/lib-esm/__tests__/Tooltip.d.ts +1 -0
- package/lib-esm/__tests__/Tooltip.js +61 -0
- package/lib-esm/__tests__/Truncate.d.ts +1 -0
- package/lib-esm/__tests__/Truncate.js +55 -0
- package/lib-esm/__tests__/UnderlineNav.d.ts +1 -0
- package/lib-esm/__tests__/UnderlineNav.js +62 -0
- package/lib-esm/__tests__/UnderlineNavLink.d.ts +1 -0
- package/lib-esm/__tests__/UnderlineNavLink.js +43 -0
- package/lib-esm/__tests__/behaviors/anchoredPosition.d.ts +1 -0
- package/lib-esm/__tests__/behaviors/anchoredPosition.js +388 -0
- package/lib-esm/__tests__/behaviors/focusTrap.d.ts +1 -0
- package/lib-esm/__tests__/behaviors/focusTrap.js +227 -0
- package/lib-esm/__tests__/behaviors/focusZone.d.ts +1 -0
- package/lib-esm/__tests__/behaviors/focusZone.js +487 -0
- package/lib-esm/__tests__/behaviors/iterateFocusableElements.d.ts +1 -0
- package/lib-esm/__tests__/behaviors/iterateFocusableElements.js +48 -0
- package/lib-esm/__tests__/filterObject.d.ts +1 -0
- package/lib-esm/__tests__/filterObject.js +27 -0
- package/lib-esm/__tests__/hooks/useAnchoredPosition.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useAnchoredPosition.js +46 -0
- package/lib-esm/__tests__/hooks/useOnEscapePress.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useOnEscapePress.js +23 -0
- package/lib-esm/__tests__/hooks/useOnOutsideClick.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useOnOutsideClick.js +68 -0
- package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useOpenAndCloseFocus.js +52 -0
- package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.d.ts +1 -0
- package/lib-esm/__tests__/hooks/useProvidedStateOrCreate.js +36 -0
- package/lib-esm/__tests__/theme.d.ts +1 -0
- package/lib-esm/__tests__/theme.js +33 -0
- package/lib-esm/__tests__/themeGet.d.ts +1 -0
- package/lib-esm/__tests__/themeGet.js +22 -0
- package/lib-esm/__tests__/useSafeTimeout.d.ts +1 -0
- package/lib-esm/__tests__/useSafeTimeout.js +39 -0
- package/lib-esm/stories/ActionList.stories.js +334 -0
- package/lib-esm/stories/ActionMenu.stories.js +293 -0
- package/lib-esm/stories/AnchoredOverlay.stories.js +101 -0
- package/lib-esm/stories/AvatarStack.stories.js +32 -0
- package/lib-esm/stories/Button.stories.js +78 -0
- package/lib-esm/stories/ConfirmationDialog.stories.js +86 -0
- package/lib-esm/stories/Dialog.stories.js +240 -0
- package/lib-esm/stories/DropdownMenu.stories.js +94 -0
- package/lib-esm/stories/Overlay.stories.js +154 -0
- package/lib-esm/stories/Portal.stories.js +68 -0
- package/lib-esm/stories/SelectPanel.stories.js +284 -0
- package/lib-esm/stories/ThemeProvider.stories.js +83 -0
- package/lib-esm/stories/useAnchoredPosition.stories.js +313 -0
- package/lib-esm/stories/useFocusTrap.stories.js +309 -0
- package/lib-esm/stories/useFocusZone.stories.js +554 -0
- package/migrating.md +250 -0
- package/now.json +17 -0
- package/package-lock.json +28661 -0
- package/package.json +2 -2
- package/rollup.config.js +36 -0
- package/script/build +19 -0
- package/script/setup +12 -0
- package/src/ActionList/Divider.tsx +25 -0
- package/src/ActionList/Group.tsx +45 -0
- package/src/ActionList/Header.tsx +74 -0
- package/src/ActionList/Item.tsx +460 -0
- package/src/ActionList/List.tsx +253 -0
- package/src/ActionList/index.ts +21 -0
- package/src/ActionMenu.tsx +106 -0
- package/src/AnchoredOverlay/AnchoredOverlay.tsx +180 -0
- package/src/AnchoredOverlay/index.ts +2 -0
- package/src/Avatar.tsx +46 -0
- package/src/AvatarPair.tsx +35 -0
- package/src/AvatarStack.tsx +161 -0
- package/src/BaseStyles.tsx +53 -0
- package/src/BorderBox.tsx +18 -0
- package/src/Box.tsx +54 -0
- package/src/BranchName.tsx +19 -0
- package/src/Breadcrumb.tsx +87 -0
- package/src/Button/Button.tsx +40 -0
- package/src/Button/ButtonBase.tsx +43 -0
- package/src/Button/ButtonClose.tsx +40 -0
- package/src/Button/ButtonDanger.tsx +43 -0
- package/src/Button/ButtonGroup.tsx +55 -0
- package/src/Button/ButtonInvisible.tsx +27 -0
- package/src/Button/ButtonOutline.tsx +43 -0
- package/src/Button/ButtonPrimary.tsx +41 -0
- package/src/Button/ButtonStyles.tsx +36 -0
- package/src/Button/ButtonTableList.tsx +58 -0
- package/src/Button/index.ts +16 -0
- package/src/Caret.tsx +133 -0
- package/src/CircleBadge.tsx +55 -0
- package/src/CircleOcticon.tsx +37 -0
- package/src/CounterLabel.tsx +52 -0
- package/src/Details.tsx +23 -0
- package/src/Dialog/ConfirmationDialog.tsx +184 -0
- package/src/Dialog/Dialog.tsx +419 -0
- package/src/Dialog.tsx +149 -0
- package/src/Dropdown.tsx +158 -0
- package/src/DropdownMenu/DropdownButton.tsx +15 -0
- package/src/DropdownMenu/DropdownMenu.tsx +115 -0
- package/src/DropdownMenu/index.ts +4 -0
- package/src/DropdownStyles.ts +128 -0
- package/src/FilterList.tsx +81 -0
- package/src/FilteredActionList/FilteredActionList.tsx +152 -0
- package/src/FilteredActionList/index.ts +2 -0
- package/src/FilteredSearch.tsx +28 -0
- package/src/Flash.tsx +77 -0
- package/src/Flex.tsx +15 -0
- package/src/FormGroup.tsx +27 -0
- package/src/Grid.tsx +15 -0
- package/src/Header.tsx +84 -0
- package/src/Heading.tsx +21 -0
- package/src/Label.tsx +75 -0
- package/src/LabelGroup.tsx +18 -0
- package/src/Link.tsx +46 -0
- package/src/Overlay.tsx +194 -0
- package/src/Pagehead.tsx +17 -0
- package/src/Pagination/Pagination.tsx +214 -0
- package/src/Pagination/index.ts +4 -0
- package/src/Pagination/model.tsx +187 -0
- package/src/PointerBox.tsx +31 -0
- package/src/Popover.tsx +236 -0
- package/src/Portal/Portal.tsx +96 -0
- package/src/Portal/index.ts +5 -0
- package/src/Position.tsx +63 -0
- package/src/ProgressBar.tsx +52 -0
- package/src/SelectMenu/SelectMenu.tsx +125 -0
- package/src/SelectMenu/SelectMenuContext.tsx +9 -0
- package/src/SelectMenu/SelectMenuDivider.tsx +25 -0
- package/src/SelectMenu/SelectMenuFilter.tsx +51 -0
- package/src/SelectMenu/SelectMenuFooter.tsx +28 -0
- package/src/SelectMenu/SelectMenuHeader.tsx +50 -0
- package/src/SelectMenu/SelectMenuItem.tsx +137 -0
- package/src/SelectMenu/SelectMenuList.tsx +42 -0
- package/src/SelectMenu/SelectMenuLoadingAnimation.tsx +24 -0
- package/src/SelectMenu/SelectMenuModal.tsx +121 -0
- package/src/SelectMenu/SelectMenuTab.tsx +88 -0
- package/src/SelectMenu/SelectMenuTabPanel.tsx +30 -0
- package/src/SelectMenu/SelectMenuTabs.tsx +44 -0
- package/src/SelectMenu/hooks/useKeyboardNav.js +90 -0
- package/src/SelectMenu/index.ts +15 -0
- package/src/SelectPanel/SelectPanel.tsx +173 -0
- package/src/SelectPanel/index.ts +2 -0
- package/src/SideNav.tsx +193 -0
- package/src/Spinner.tsx +59 -0
- package/src/StateLabel.tsx +110 -0
- package/src/StyledOcticon.tsx +24 -0
- package/src/SubNav.tsx +129 -0
- package/src/TabNav.tsx +77 -0
- package/src/Text.tsx +13 -0
- package/src/TextInput.tsx +183 -0
- package/src/ThemeProvider.tsx +176 -0
- package/src/Timeline.tsx +141 -0
- package/src/Tooltip.tsx +263 -0
- package/src/Truncate.tsx +36 -0
- package/src/UnderlineNav.tsx +110 -0
- package/src/__tests__/.eslintrc.json +11 -0
- package/src/__tests__/ActionList.tsx +49 -0
- package/src/__tests__/ActionMenu.tsx +138 -0
- package/src/__tests__/AnchoredOverlay.tsx +151 -0
- package/src/__tests__/Avatar.tsx +45 -0
- package/src/__tests__/AvatarStack.tsx +45 -0
- package/src/__tests__/BorderBox.tsx +44 -0
- package/src/__tests__/Box.tsx +43 -0
- package/src/__tests__/BranchName.tsx +27 -0
- package/src/__tests__/Breadcrumb.tsx +31 -0
- package/src/__tests__/BreadcrumbItem.tsx +32 -0
- package/src/__tests__/Button.tsx +129 -0
- package/src/__tests__/Caret.tsx +36 -0
- package/src/__tests__/CircleBadge.tsx +69 -0
- package/src/__tests__/CircleOcticon.tsx +52 -0
- package/src/__tests__/CounterLabel.tsx +51 -0
- package/src/__tests__/Details.tsx +116 -0
- package/src/__tests__/Dialog.tsx +157 -0
- package/src/__tests__/Dropdown.tsx +57 -0
- package/src/__tests__/DropdownMenu.tsx +138 -0
- package/src/__tests__/FilterList.tsx +27 -0
- package/src/__tests__/FilterListItem.tsx +32 -0
- package/src/__tests__/FilteredSearch.tsx +27 -0
- package/src/__tests__/Flash.tsx +46 -0
- package/src/__tests__/Flex.tsx +59 -0
- package/src/__tests__/FormGroup.tsx +39 -0
- package/src/__tests__/Grid.tsx +83 -0
- package/src/__tests__/Header.tsx +50 -0
- package/src/__tests__/Heading.tsx +92 -0
- package/src/__tests__/Label.tsx +35 -0
- package/src/__tests__/LabelGroup.tsx +31 -0
- package/src/__tests__/Link.tsx +48 -0
- package/src/__tests__/Overlay.tsx +103 -0
- package/src/__tests__/Pagehead.tsx +24 -0
- package/src/__tests__/Pagination/Pagination.tsx +31 -0
- package/src/__tests__/Pagination/PaginationModel.tsx +133 -0
- package/src/__tests__/Pagination/__snapshots__/Pagination.tsx.snap +184 -0
- package/src/__tests__/PointerBox.tsx +35 -0
- package/src/__tests__/Popover.tsx +69 -0
- package/src/__tests__/Portal.tsx +103 -0
- package/src/__tests__/Position.tsx +118 -0
- package/src/__tests__/ProgressBar.tsx +41 -0
- package/src/__tests__/SelectMenu.tsx +142 -0
- package/src/__tests__/SelectPanel.tsx +65 -0
- package/src/__tests__/SideNav.tsx +63 -0
- package/src/__tests__/Spinner.tsx +44 -0
- package/src/__tests__/StateLabel.tsx +50 -0
- package/src/__tests__/StyledOcticon.tsx +28 -0
- package/src/__tests__/SubNav.tsx +51 -0
- package/src/__tests__/SubNavLink.tsx +32 -0
- package/src/__tests__/TabNav.tsx +33 -0
- package/src/__tests__/Text.tsx +79 -0
- package/src/__tests__/TextInput.tsx +50 -0
- package/src/__tests__/ThemeProvider.tsx +441 -0
- package/src/__tests__/Timeline.tsx +59 -0
- package/src/__tests__/Tooltip.tsx +53 -0
- package/src/__tests__/Truncate.tsx +45 -0
- package/src/__tests__/UnderlineNav.tsx +59 -0
- package/src/__tests__/UnderlineNavLink.tsx +32 -0
- package/src/__tests__/__snapshots__/ActionList.tsx.snap +27 -0
- package/src/__tests__/__snapshots__/ActionMenu.tsx.snap +80 -0
- package/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap +332 -0
- package/src/__tests__/__snapshots__/Avatar.tsx.snap +19 -0
- package/src/__tests__/__snapshots__/AvatarStack.tsx.snap +377 -0
- package/src/__tests__/__snapshots__/BorderBox.tsx.snap +14 -0
- package/src/__tests__/__snapshots__/Box.tsx.snap +201 -0
- package/src/__tests__/__snapshots__/BranchName.tsx.snap +17 -0
- package/src/__tests__/__snapshots__/Breadcrumb.tsx.snap +29 -0
- package/src/__tests__/__snapshots__/BreadcrumbItem.tsx.snap +79 -0
- package/src/__tests__/__snapshots__/Button.tsx.snap +832 -0
- package/src/__tests__/__snapshots__/Caret.tsx.snap +373 -0
- package/src/__tests__/__snapshots__/CircleBadge.tsx.snap +141 -0
- package/src/__tests__/__snapshots__/CircleOcticon.tsx.snap +64 -0
- package/src/__tests__/__snapshots__/CounterLabel.tsx.snap +22 -0
- package/src/__tests__/__snapshots__/Details.tsx.snap +15 -0
- package/src/__tests__/__snapshots__/Dialog.tsx.snap +200 -0
- package/src/__tests__/__snapshots__/Dropdown.tsx.snap +249 -0
- package/src/__tests__/__snapshots__/DropdownMenu.tsx.snap +106 -0
- package/src/__tests__/__snapshots__/FilterList.tsx.snap +13 -0
- package/src/__tests__/__snapshots__/FilterListItem.tsx.snap +80 -0
- package/src/__tests__/__snapshots__/FilteredSearch.tsx.snap +32 -0
- package/src/__tests__/__snapshots__/Flash.tsx.snap +32 -0
- package/src/__tests__/__snapshots__/Flex.tsx.snap +130 -0
- package/src/__tests__/__snapshots__/FormGroup.tsx.snap +25 -0
- package/src/__tests__/__snapshots__/Grid.tsx.snap +178 -0
- package/src/__tests__/__snapshots__/Header.tsx.snap +79 -0
- package/src/__tests__/__snapshots__/Heading.tsx.snap +13 -0
- package/src/__tests__/__snapshots__/Label.tsx.snap +74 -0
- package/src/__tests__/__snapshots__/LabelGroup.tsx.snap +15 -0
- package/src/__tests__/__snapshots__/Link.tsx.snap +213 -0
- package/src/__tests__/__snapshots__/Pagehead.tsx.snap +15 -0
- package/src/__tests__/__snapshots__/PointerBox.tsx.snap +174 -0
- package/src/__tests__/__snapshots__/Popover.tsx.snap +4687 -0
- package/src/__tests__/__snapshots__/Position.tsx.snap +44 -0
- package/src/__tests__/__snapshots__/ProgressBar.tsx.snap +53 -0
- package/src/__tests__/__snapshots__/SelectMenu.tsx.snap +469 -0
- package/src/__tests__/__snapshots__/SelectPanel.tsx.snap +123 -0
- package/src/__tests__/__snapshots__/SideNav.tsx.snap +143 -0
- package/src/__tests__/__snapshots__/Spinner.tsx.snap +33 -0
- package/src/__tests__/__snapshots__/StateLabel.tsx.snap +409 -0
- package/src/__tests__/__snapshots__/StyledOcticon.tsx.snap +25 -0
- package/src/__tests__/__snapshots__/SubNav.tsx.snap +44 -0
- package/src/__tests__/__snapshots__/SubNavLink.tsx.snap +199 -0
- package/src/__tests__/__snapshots__/TabNav.tsx.snap +58 -0
- package/src/__tests__/__snapshots__/Text.tsx.snap +7 -0
- package/src/__tests__/__snapshots__/TextInput.tsx.snap +440 -0
- package/src/__tests__/__snapshots__/ThemeProvider.tsx.snap +15 -0
- package/src/__tests__/__snapshots__/Timeline.tsx.snap +159 -0
- package/src/__tests__/__snapshots__/Tooltip.tsx.snap +227 -0
- package/src/__tests__/__snapshots__/Truncate.tsx.snap +17 -0
- package/src/__tests__/__snapshots__/UnderlineNav.tsx.snap +59 -0
- package/src/__tests__/__snapshots__/UnderlineNavLink.tsx.snap +130 -0
- package/src/__tests__/behaviors/anchoredPosition.ts +295 -0
- package/src/__tests__/behaviors/focusTrap.tsx +236 -0
- package/src/__tests__/behaviors/focusZone.tsx +549 -0
- package/src/__tests__/behaviors/iterateFocusableElements.tsx +61 -0
- package/src/__tests__/filterObject.ts +54 -0
- package/src/__tests__/hooks/useAnchoredPosition.tsx +31 -0
- package/src/__tests__/hooks/useOnEscapePress.tsx +16 -0
- package/src/__tests__/hooks/useOnOutsideClick.tsx +48 -0
- package/src/__tests__/hooks/useOpenAndCloseFocus.tsx +48 -0
- package/src/__tests__/hooks/useProvidedStateOrCreate.tsx +39 -0
- package/src/__tests__/theme.ts +41 -0
- package/src/__tests__/themeGet.ts +15 -0
- package/src/__tests__/useSafeTimeout.tsx +36 -0
- package/src/behaviors/anchoredPosition.ts +442 -0
- package/src/behaviors/focusTrap.ts +184 -0
- package/src/behaviors/focusZone.ts +713 -0
- package/src/constants.ts +62 -0
- package/src/hooks/index.ts +11 -0
- package/src/hooks/useAnchoredPosition.ts +53 -0
- package/src/hooks/useCombinedRefs.ts +40 -0
- package/src/hooks/useDetails.tsx +54 -0
- package/src/hooks/useDialog.ts +121 -0
- package/src/hooks/useFocusTrap.ts +80 -0
- package/src/hooks/useFocusZone.ts +64 -0
- package/src/hooks/useOnEscapePress.ts +63 -0
- package/src/hooks/useOnOutsideClick.tsx +82 -0
- package/src/hooks/useOpenAndCloseFocus.ts +27 -0
- package/src/hooks/useOverlay.tsx +32 -0
- package/src/hooks/useProvidedRefOrCreate.ts +14 -0
- package/src/hooks/useProvidedStateOrCreate.ts +27 -0
- package/src/hooks/useRenderForcingRef.ts +22 -0
- package/src/hooks/useResizeObserver.ts +11 -0
- package/src/hooks/useSafeTimeout.ts +38 -0
- package/src/hooks/useScrollFlash.ts +21 -0
- package/src/index.ts +165 -0
- package/src/polyfills/eventListenerSignal.ts +66 -0
- package/src/stories/ActionList.stories.tsx +364 -0
- package/src/stories/ActionMenu.stories.tsx +322 -0
- package/src/stories/AnchoredOverlay.stories.tsx +117 -0
- package/src/stories/AvatarStack.stories.tsx +37 -0
- package/src/stories/Button.stories.tsx +88 -0
- package/src/stories/ConfirmationDialog.stories.tsx +105 -0
- package/src/stories/Dialog.stories.tsx +240 -0
- package/src/stories/DropdownMenu.stories.tsx +84 -0
- package/src/stories/Overlay.stories.tsx +186 -0
- package/src/stories/Portal.stories.tsx +109 -0
- package/src/stories/SelectPanel.stories.tsx +300 -0
- package/src/stories/ThemeProvider.stories.tsx +104 -0
- package/src/stories/useAnchoredPosition.stories.tsx +320 -0
- package/src/stories/useFocusTrap.stories.tsx +400 -0
- package/src/stories/useFocusZone.stories.tsx +663 -0
- package/src/sx.ts +9 -0
- package/src/theme-preval.js +136 -0
- package/src/theme.ts +3 -0
- package/src/utils/deprecate.tsx +73 -0
- package/src/utils/isNumeric.tsx +4 -0
- package/src/utils/iterateFocusableElements.ts +121 -0
- package/src/utils/ssr.tsx +1 -0
- package/src/utils/test-deprecations.tsx +19 -0
- package/src/utils/test-helpers.tsx +7 -0
- package/src/utils/test-matchers.tsx +109 -0
- package/src/utils/testing.tsx +243 -0
- package/src/utils/theme.js +64 -0
- package/src/utils/types.ts +90 -0
- package/src/utils/uniqueId.ts +6 -0
- package/src/utils/userAgent.ts +7 -0
- package/stats.html +3279 -0
- package/tsconfig.build.json +7 -0
- package/tsconfig.json +20 -0
@@ -0,0 +1,16 @@
|
|
1
|
+
import {useOnEscapePress} from '../../hooks/useOnEscapePress'
|
2
|
+
import {render, fireEvent} from '@testing-library/react'
|
3
|
+
import React from 'react'
|
4
|
+
|
5
|
+
it('should call function when user presses escape', () => {
|
6
|
+
const functionToCall = jest.fn()
|
7
|
+
const Component = () => {
|
8
|
+
useOnEscapePress(functionToCall)
|
9
|
+
return <div>content</div>
|
10
|
+
}
|
11
|
+
|
12
|
+
const {getByText} = render(<Component />)
|
13
|
+
const domNode = getByText('content')
|
14
|
+
fireEvent.keyDown(domNode, {key: 'Escape', code: 'Escape', keyCode: 27, charCode: 27})
|
15
|
+
expect(functionToCall).toHaveBeenCalledTimes(1)
|
16
|
+
})
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import {useOnOutsideClick} from '../../hooks/useOnOutsideClick'
|
2
|
+
import {render} from '@testing-library/react'
|
3
|
+
import React, {useRef} from 'react'
|
4
|
+
import userEvent from '@testing-library/user-event'
|
5
|
+
|
6
|
+
type ComponentProps = {
|
7
|
+
callback: () => void
|
8
|
+
}
|
9
|
+
const Component = ({callback}: ComponentProps) => {
|
10
|
+
const containerRef = useRef<HTMLDivElement>(null)
|
11
|
+
const outerButton = useRef<HTMLButtonElement>(null)
|
12
|
+
const secondButton = useRef<HTMLButtonElement>(null)
|
13
|
+
useOnOutsideClick({ignoreClickRefs: [secondButton], containerRef, onClickOutside: callback})
|
14
|
+
return (
|
15
|
+
<div>
|
16
|
+
<button ref={outerButton}>button</button>
|
17
|
+
<button ref={secondButton}>button two</button>
|
18
|
+
<div ref={containerRef}>content</div>
|
19
|
+
</div>
|
20
|
+
)
|
21
|
+
}
|
22
|
+
it('should call function when user clicks outside container', () => {
|
23
|
+
const mockFunction = jest.fn()
|
24
|
+
const {getByText} = render(<Component callback={mockFunction} />)
|
25
|
+
userEvent.click(getByText('button'))
|
26
|
+
expect(mockFunction).toHaveBeenCalledTimes(1)
|
27
|
+
})
|
28
|
+
|
29
|
+
it('should not call function when user right clicks', () => {
|
30
|
+
const mockFunction = jest.fn()
|
31
|
+
const {getByText} = render(<Component callback={mockFunction} />)
|
32
|
+
userEvent.click(getByText('button'), {button: 1})
|
33
|
+
expect(mockFunction).toHaveBeenCalledTimes(0)
|
34
|
+
})
|
35
|
+
|
36
|
+
it('should not call function when clicking on ignored refs', () => {
|
37
|
+
const mockFunction = jest.fn()
|
38
|
+
const {getByText} = render(<Component callback={mockFunction} />)
|
39
|
+
userEvent.click(getByText('button two'))
|
40
|
+
expect(mockFunction).toHaveBeenCalledTimes(0)
|
41
|
+
})
|
42
|
+
|
43
|
+
it('should not call function when clicking inside container', () => {
|
44
|
+
const mockFunction = jest.fn()
|
45
|
+
const {getByText} = render(<Component callback={mockFunction} />)
|
46
|
+
userEvent.click(getByText('content'))
|
47
|
+
expect(mockFunction).toHaveBeenCalledTimes(0)
|
48
|
+
})
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import React, {useRef} from 'react'
|
2
|
+
import {render, waitFor} from '@testing-library/react'
|
3
|
+
import {useOpenAndCloseFocus} from '../../hooks/useOpenAndCloseFocus'
|
4
|
+
|
5
|
+
const Component = () => {
|
6
|
+
const containerRef = useRef<HTMLDivElement>(null)
|
7
|
+
const returnFocusRef = useRef<HTMLButtonElement>(null)
|
8
|
+
const noButtonRef = useRef<HTMLButtonElement>(null)
|
9
|
+
useOpenAndCloseFocus({containerRef, initialFocusRef: noButtonRef, returnFocusRef})
|
10
|
+
return (
|
11
|
+
<>
|
12
|
+
<button ref={returnFocusRef}>trigger</button>
|
13
|
+
<div ref={containerRef}>
|
14
|
+
<button>yes</button>
|
15
|
+
<button ref={noButtonRef}>no</button>
|
16
|
+
</div>
|
17
|
+
</>
|
18
|
+
)
|
19
|
+
}
|
20
|
+
|
21
|
+
const ComponentTwo = () => {
|
22
|
+
const buttonRef = useRef<HTMLButtonElement>(null)
|
23
|
+
const containerRef = useRef<HTMLDivElement>(null)
|
24
|
+
useOpenAndCloseFocus({containerRef, returnFocusRef: buttonRef})
|
25
|
+
return (
|
26
|
+
<>
|
27
|
+
<button ref={buttonRef}>button trigger</button>
|
28
|
+
<div ref={containerRef}>
|
29
|
+
<button>yes</button>
|
30
|
+
<button>no</button>
|
31
|
+
</div>
|
32
|
+
</>
|
33
|
+
)
|
34
|
+
}
|
35
|
+
|
36
|
+
it('should focus element passed into function', async () => {
|
37
|
+
const {getByText} = render(<Component />)
|
38
|
+
await waitFor(() => getByText('no'))
|
39
|
+
const noButton = getByText('no')
|
40
|
+
expect(document.activeElement).toEqual(noButton)
|
41
|
+
})
|
42
|
+
|
43
|
+
it('should focus first element when nothing is passed', async () => {
|
44
|
+
const {getByText} = render(<ComponentTwo />)
|
45
|
+
await waitFor(() => getByText('yes'))
|
46
|
+
const yesButton = getByText('yes')
|
47
|
+
expect(document.activeElement).toEqual(yesButton)
|
48
|
+
})
|
@@ -0,0 +1,39 @@
|
|
1
|
+
import {useProvidedStateOrCreate} from '../../hooks/useProvidedStateOrCreate'
|
2
|
+
import {render} from '@testing-library/react'
|
3
|
+
import React, {useState} from 'react'
|
4
|
+
|
5
|
+
it('will use the provided state', () => {
|
6
|
+
const Component = () => {
|
7
|
+
const [state, setState] = useState('foo')
|
8
|
+
const [combinedState] = useProvidedStateOrCreate(state, setState, 'bar')
|
9
|
+
return <div>{combinedState}</div>
|
10
|
+
}
|
11
|
+
|
12
|
+
const doc = render(<Component />)
|
13
|
+
expect(doc.baseElement.textContent).toEqual('foo')
|
14
|
+
})
|
15
|
+
|
16
|
+
it('will set state correctly when provided a set state method', () => {
|
17
|
+
const Component = () => {
|
18
|
+
const [state, setState] = useState('foo')
|
19
|
+
const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, 'bar')
|
20
|
+
if (combinedState !== 'baz') setCombinedState('baz')
|
21
|
+
return <div>{combinedState}</div>
|
22
|
+
}
|
23
|
+
|
24
|
+
const doc = render(<Component />)
|
25
|
+
expect(doc.baseElement.textContent).toEqual('baz')
|
26
|
+
})
|
27
|
+
|
28
|
+
it('if not provided a state, will use an internal state', () => {
|
29
|
+
const Component = () => {
|
30
|
+
const state = undefined
|
31
|
+
const setState = undefined
|
32
|
+
const [combinedState, setCombinedState] = useProvidedStateOrCreate(state, setState, '')
|
33
|
+
if (combinedState !== 'bar') setCombinedState('bar')
|
34
|
+
return <div>{combinedState}</div>
|
35
|
+
}
|
36
|
+
|
37
|
+
const doc = render(<Component />)
|
38
|
+
expect(doc.baseElement.textContent).toEqual('bar')
|
39
|
+
})
|
@@ -0,0 +1,41 @@
|
|
1
|
+
import {isShadowValue} from '../utils/theme'
|
2
|
+
|
3
|
+
describe('isShadowValue', () => {
|
4
|
+
it('accepts transparent', () => {
|
5
|
+
expect(isShadowValue('0 0 0 transparent')).toBe(true)
|
6
|
+
})
|
7
|
+
|
8
|
+
it('accepts hex colors', () => {
|
9
|
+
expect(isShadowValue('0 0 0 #ff0000')).toBe(true)
|
10
|
+
expect(isShadowValue('0 0 0 #ff0')).toBe(true)
|
11
|
+
})
|
12
|
+
|
13
|
+
it('accepts rgba colors', () => {
|
14
|
+
expect(isShadowValue('0 0 0 rgb(255, 0, 0)')).toBe(true)
|
15
|
+
expect(isShadowValue('0 0 0 rgba(255,0,0,0.2)')).toBe(true)
|
16
|
+
})
|
17
|
+
|
18
|
+
it('accepts px values', () => {
|
19
|
+
expect(isShadowValue('12px 24px 0 #000')).toBe(true)
|
20
|
+
})
|
21
|
+
|
22
|
+
it('accepts em values', () => {
|
23
|
+
expect(isShadowValue('0.5em 1em 0 #000')).toBe(true)
|
24
|
+
})
|
25
|
+
|
26
|
+
it('accepts inset values', () => {
|
27
|
+
expect(isShadowValue('inset 12px 24px 0 #000')).toBe(true)
|
28
|
+
})
|
29
|
+
|
30
|
+
it('rejects individual colors', () => {
|
31
|
+
expect(isShadowValue('red')).toBe(false)
|
32
|
+
expect(isShadowValue('#f00')).toBe(false)
|
33
|
+
expect(isShadowValue('rgb(255, 0, 0)')).toBe(false)
|
34
|
+
})
|
35
|
+
|
36
|
+
it('rejects individual numeric values', () => {
|
37
|
+
expect(isShadowValue('0')).toBe(false)
|
38
|
+
expect(isShadowValue('12px')).toBe(false)
|
39
|
+
expect(isShadowValue('0.5em')).toBe(false)
|
40
|
+
})
|
41
|
+
})
|
@@ -0,0 +1,15 @@
|
|
1
|
+
import {themeGet} from '..'
|
2
|
+
|
3
|
+
describe('themeGet', () => {
|
4
|
+
it('acccepts theme prop', () => {
|
5
|
+
expect(themeGet('example')({theme: {example: 'test'}})).toBe('test')
|
6
|
+
})
|
7
|
+
|
8
|
+
it('allows theme prop to override primer theme', () => {
|
9
|
+
expect(themeGet('colors.gray.0')({theme: {colors: {gray: ['#f00']}}})).toBe('#f00')
|
10
|
+
})
|
11
|
+
|
12
|
+
it('uses primer theme as fallback', () => {
|
13
|
+
expect(themeGet('space.1')({})).toBe('4px')
|
14
|
+
})
|
15
|
+
})
|
@@ -0,0 +1,36 @@
|
|
1
|
+
import {renderHook} from '@testing-library/react-hooks'
|
2
|
+
import useSafeTimeout from '../hooks/useSafeTimeout'
|
3
|
+
|
4
|
+
afterEach(() => {
|
5
|
+
jest.useRealTimers()
|
6
|
+
})
|
7
|
+
|
8
|
+
test('should call callback after time', async () => {
|
9
|
+
const {result, waitFor} = renderHook(() => useSafeTimeout())
|
10
|
+
const mockFunction = jest.fn()
|
11
|
+
result.current.safeSetTimeout(mockFunction, 300)
|
12
|
+
await waitFor(() => expect(mockFunction).toHaveBeenCalled())
|
13
|
+
})
|
14
|
+
|
15
|
+
test('should clear timeouts when safeClearTimeout is called', () => {
|
16
|
+
jest.useFakeTimers()
|
17
|
+
jest.spyOn(global, 'clearTimeout')
|
18
|
+
const {result} = renderHook(() => useSafeTimeout())
|
19
|
+
const mockFunction = jest.fn()
|
20
|
+
const timeoutId = result.current.safeSetTimeout(mockFunction, 300)
|
21
|
+
result.current.safeClearTimeout(timeoutId)
|
22
|
+
expect(clearTimeout).toHaveBeenCalledTimes(1)
|
23
|
+
expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId)
|
24
|
+
})
|
25
|
+
|
26
|
+
test('should clear timeouts when the component is unmounted', () => {
|
27
|
+
jest.useFakeTimers()
|
28
|
+
jest.spyOn(global, 'clearTimeout')
|
29
|
+
const {result, unmount} = renderHook(() => useSafeTimeout())
|
30
|
+
const mockFunction = jest.fn()
|
31
|
+
const timeoutId = result.current.safeSetTimeout(mockFunction, 300)
|
32
|
+
|
33
|
+
unmount()
|
34
|
+
expect(clearTimeout).toHaveBeenCalledTimes(1)
|
35
|
+
expect(clearTimeout).toHaveBeenLastCalledWith(timeoutId)
|
36
|
+
})
|
@@ -0,0 +1,442 @@
|
|
1
|
+
export type AnchorAlignment = 'start' | 'center' | 'end'
|
2
|
+
|
3
|
+
// When prettier supports template literal types...
|
4
|
+
// export type AnchorSide = `${'inside' | 'outside'}-${'top' | 'bottom' | 'right' | 'left'}` | 'inside-center'
|
5
|
+
export type AnchorSide =
|
6
|
+
| 'inside-top'
|
7
|
+
| 'inside-bottom'
|
8
|
+
| 'inside-left'
|
9
|
+
| 'inside-right'
|
10
|
+
| 'inside-center'
|
11
|
+
| 'outside-top'
|
12
|
+
| 'outside-bottom'
|
13
|
+
| 'outside-left'
|
14
|
+
| 'outside-right'
|
15
|
+
|
16
|
+
/**
|
17
|
+
* Settings that customize how a floating element is positioned
|
18
|
+
* with respect to an anchor element.
|
19
|
+
*/
|
20
|
+
export interface PositionSettings {
|
21
|
+
/**
|
22
|
+
* Sets the side of the anchor element that the floating element should be
|
23
|
+
* pinned to. This side is given by a string starting with either "inside" or
|
24
|
+
* "outside", followed by a hyphen, followed by either "top", "right", "bottom",
|
25
|
+
* or "left". Additionally, "inside-center" is an allowed value.
|
26
|
+
*
|
27
|
+
* The first part of this string, "inside" or "outside", determines whether the
|
28
|
+
* floating element should be attempted to be placed "inside" the anchor element
|
29
|
+
* or "outside" of it. Using "inside" is useful for making it appear that the
|
30
|
+
* anchor _contains_ the floating element, and it can be used for implementing a
|
31
|
+
* dialog that is centered on the screen. The "outside" value is more common and
|
32
|
+
* can be used for tooltips, popovers, menus, etc.
|
33
|
+
*
|
34
|
+
* The second part of this string determines the _edge_ on the anchor element that
|
35
|
+
* the floating element will be anchored to. If side is "inside-center", then
|
36
|
+
* the floating element will be centered in the X-direction (while align is used
|
37
|
+
* to position it in the Y-direction).
|
38
|
+
* Note: "outside-center" is _not_ a valid value for this property.
|
39
|
+
*/
|
40
|
+
side: AnchorSide
|
41
|
+
|
42
|
+
/**
|
43
|
+
* Determines how the floating element should align with the anchor element. If
|
44
|
+
* set to "start", the floating element's first edge (top or left) will align
|
45
|
+
* with the anchor element's first edge. If set to "center", the floating
|
46
|
+
* element will be centered along the axis of the anchor edge. If set to "end",
|
47
|
+
* the floating element's last edge will align with the anchor element's last edge.
|
48
|
+
*/
|
49
|
+
align: AnchorAlignment
|
50
|
+
|
51
|
+
/**
|
52
|
+
* The number of pixels between the anchor edge and the floating element.
|
53
|
+
*
|
54
|
+
* Positive values move the floating element farther from the anchor element
|
55
|
+
* (for outside positioning) or further inside the anchor element (for inside
|
56
|
+
* positioning). Negative values have the opposite effect.
|
57
|
+
*/
|
58
|
+
anchorOffset: number
|
59
|
+
|
60
|
+
/**
|
61
|
+
* An additional offset, in pixels, to move the floating element from
|
62
|
+
* the aligning edge.
|
63
|
+
*
|
64
|
+
* Positive values move the floating element in the direction of center-
|
65
|
+
* alignment. Negative values move the floating element away from center-
|
66
|
+
* alignment. When align is "center", positive offsets move the floating
|
67
|
+
* element right (top or bottom anchor side) or down (left or right
|
68
|
+
* anchor side).
|
69
|
+
*/
|
70
|
+
alignmentOffset: number
|
71
|
+
|
72
|
+
/**
|
73
|
+
* If false, when the above settings result in rendering the floating element
|
74
|
+
* wholly or partially outside of the bounds of the containing element, attempt
|
75
|
+
* to adjust the settings to prevent this. Only applies to "outside" positioning.
|
76
|
+
*
|
77
|
+
* First, attempt to flip to the opposite edge of the anchor if the floating
|
78
|
+
* element is getting clipped in that direction. If flipping results in a
|
79
|
+
* similar clipping, try moving to the adjacent sides.
|
80
|
+
*
|
81
|
+
* Once we find a side that does not clip the overlay in its own dimension,
|
82
|
+
* check the rest of the sides to see if we need to adjust the alignment offset
|
83
|
+
* to fit in other dimensions.
|
84
|
+
*
|
85
|
+
* If we try all four sides and get clipped each time, settle for overflowing
|
86
|
+
* and use the "bottom" side, since the ability to scroll is most likely in
|
87
|
+
* this direction.
|
88
|
+
*/
|
89
|
+
allowOutOfBounds: boolean
|
90
|
+
}
|
91
|
+
|
92
|
+
// For each outside anchor position, list the order of alternate positions to try in
|
93
|
+
// the event that the original position overflows. See comment on `allowOutOfBounds`
|
94
|
+
// for a more detailed description.
|
95
|
+
const alternateOrders: Partial<Record<AnchorSide, [AnchorSide, AnchorSide, AnchorSide, AnchorSide]>> = {
|
96
|
+
'outside-top': ['outside-bottom', 'outside-right', 'outside-left', 'outside-bottom'],
|
97
|
+
'outside-bottom': ['outside-top', 'outside-right', 'outside-left', 'outside-bottom'],
|
98
|
+
'outside-left': ['outside-right', 'outside-bottom', 'outside-top', 'outside-bottom'],
|
99
|
+
'outside-right': ['outside-left', 'outside-bottom', 'outside-top', 'outside-bottom']
|
100
|
+
}
|
101
|
+
|
102
|
+
interface Size {
|
103
|
+
width: number
|
104
|
+
height: number
|
105
|
+
}
|
106
|
+
|
107
|
+
interface Position {
|
108
|
+
top: number
|
109
|
+
left: number
|
110
|
+
}
|
111
|
+
|
112
|
+
export interface AnchorPosition {
|
113
|
+
top: number
|
114
|
+
left: number
|
115
|
+
anchorSide: AnchorSide
|
116
|
+
}
|
117
|
+
|
118
|
+
interface BoxPosition extends Size, Position {}
|
119
|
+
|
120
|
+
/**
|
121
|
+
* Given a floating element and an anchor element, return coordinates for the top-left
|
122
|
+
* of the floating element in order to absolutely position it such that it appears
|
123
|
+
* near the anchor element.
|
124
|
+
*
|
125
|
+
* @param floatingElement Element intended to be positioned near or within an anchor
|
126
|
+
* @param anchorElement The element to serve as the position anchor
|
127
|
+
* @param settings Settings to determine the rules for positioning the floating element
|
128
|
+
* @returns {top: number, left: number} coordinates for the floating element
|
129
|
+
*/
|
130
|
+
export function getAnchoredPosition(
|
131
|
+
floatingElement: Element,
|
132
|
+
anchorElement: Element | DOMRect,
|
133
|
+
settings: Partial<PositionSettings> = {}
|
134
|
+
): AnchorPosition {
|
135
|
+
const parentElement = getPositionedParent(floatingElement)
|
136
|
+
const clippingRect = getClippingRect(parentElement)
|
137
|
+
|
138
|
+
const parentElementStyle = getComputedStyle(parentElement)
|
139
|
+
const parentElementRect = parentElement.getBoundingClientRect()
|
140
|
+
const [borderTop, borderLeft] = [parentElementStyle.borderTopWidth, parentElementStyle.borderLeftWidth].map(
|
141
|
+
v => parseInt(v, 10) || 0
|
142
|
+
)
|
143
|
+
const relativeRect = {
|
144
|
+
top: parentElementRect.top + borderTop,
|
145
|
+
left: parentElementRect.left + borderLeft
|
146
|
+
}
|
147
|
+
|
148
|
+
return pureCalculateAnchoredPosition(
|
149
|
+
clippingRect,
|
150
|
+
relativeRect,
|
151
|
+
floatingElement.getBoundingClientRect(),
|
152
|
+
anchorElement instanceof Element ? anchorElement.getBoundingClientRect() : anchorElement,
|
153
|
+
getDefaultSettings(settings)
|
154
|
+
)
|
155
|
+
}
|
156
|
+
|
157
|
+
/**
|
158
|
+
* Returns the nearest proper HTMLElement parent of `element` whose
|
159
|
+
* position is not "static", or document.body, whichever is closer
|
160
|
+
*/
|
161
|
+
function getPositionedParent(element: Element) {
|
162
|
+
let parentNode = element.parentNode
|
163
|
+
while (parentNode !== null) {
|
164
|
+
if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
|
165
|
+
return parentNode
|
166
|
+
}
|
167
|
+
parentNode = parentNode.parentNode
|
168
|
+
}
|
169
|
+
return document.body
|
170
|
+
}
|
171
|
+
|
172
|
+
/**
|
173
|
+
* Returns the rectangle (relative to the window) that will clip the given element
|
174
|
+
* if it is rendered outside of its bounds.
|
175
|
+
* @param element
|
176
|
+
* @returns
|
177
|
+
*/
|
178
|
+
function getClippingRect(element: Element): BoxPosition {
|
179
|
+
let parentNode: typeof element.parentNode = element
|
180
|
+
while (parentNode !== null) {
|
181
|
+
if (parentNode === document.body) {
|
182
|
+
break
|
183
|
+
}
|
184
|
+
const parentNodeStyle = getComputedStyle(parentNode as Element)
|
185
|
+
if (parentNodeStyle.overflow !== 'visible') {
|
186
|
+
break
|
187
|
+
}
|
188
|
+
parentNode = parentNode.parentNode
|
189
|
+
}
|
190
|
+
const clippingNode = parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode
|
191
|
+
|
192
|
+
const elemRect = clippingNode.getBoundingClientRect()
|
193
|
+
const elemStyle = getComputedStyle(clippingNode)
|
194
|
+
|
195
|
+
const [borderTop, borderLeft, borderRight, borderBottom] = [
|
196
|
+
elemStyle.borderTopWidth,
|
197
|
+
elemStyle.borderLeftWidth,
|
198
|
+
elemStyle.borderRightWidth,
|
199
|
+
elemStyle.borderBottomWidth
|
200
|
+
].map(v => parseInt(v, 10) || 0)
|
201
|
+
|
202
|
+
return {
|
203
|
+
top: elemRect.top + borderTop,
|
204
|
+
left: elemRect.left + borderLeft,
|
205
|
+
width: elemRect.width - borderRight - borderLeft,
|
206
|
+
|
207
|
+
// If the clipping node is document.body, it can expand to the full height of the window
|
208
|
+
height: Math.max(
|
209
|
+
elemRect.height - borderTop - borderBottom,
|
210
|
+
clippingNode === document.body ? window.innerHeight : -Infinity
|
211
|
+
)
|
212
|
+
}
|
213
|
+
}
|
214
|
+
|
215
|
+
// Default settings to position a floating element
|
216
|
+
const positionDefaults: PositionSettings = {
|
217
|
+
side: 'outside-bottom',
|
218
|
+
align: 'start',
|
219
|
+
|
220
|
+
// note: the following default is not applied if side === "inside-center"
|
221
|
+
anchorOffset: 4,
|
222
|
+
|
223
|
+
// note: the following default is only applied if side starts with "inside"
|
224
|
+
// and align is not center
|
225
|
+
alignmentOffset: 4,
|
226
|
+
|
227
|
+
allowOutOfBounds: false
|
228
|
+
}
|
229
|
+
|
230
|
+
/**
|
231
|
+
* Compute a full PositionSettings object from the given partial PositionSettings object
|
232
|
+
* by filling in with defaults where applicable.
|
233
|
+
* @param settings Partial settings - any omissions will be defaulted
|
234
|
+
*/
|
235
|
+
function getDefaultSettings(settings: Partial<PositionSettings> = {}): PositionSettings {
|
236
|
+
const side = settings.side ?? positionDefaults.side
|
237
|
+
const align = settings.align ?? positionDefaults.align
|
238
|
+
return {
|
239
|
+
side,
|
240
|
+
align,
|
241
|
+
// offsets always default to 0 if their respective side/alignment is centered
|
242
|
+
anchorOffset: settings.anchorOffset ?? (side === 'inside-center' ? 0 : positionDefaults.anchorOffset),
|
243
|
+
alignmentOffset:
|
244
|
+
settings.alignmentOffset ??
|
245
|
+
(align !== 'center' && side.startsWith('inside') ? positionDefaults.alignmentOffset : 0),
|
246
|
+
allowOutOfBounds: settings.allowOutOfBounds ?? positionDefaults.allowOutOfBounds
|
247
|
+
}
|
248
|
+
}
|
249
|
+
|
250
|
+
/**
|
251
|
+
* Note: This is a pure function with no dependency on DOM APIs.
|
252
|
+
* @see getAnchoredPosition
|
253
|
+
* @see getDefaultSettings
|
254
|
+
* @param viewportRect BoxPosition for the rectangle that will clip the floating element if it is
|
255
|
+
* rendered outside of the boundsof the rectangle.
|
256
|
+
* @param relativePosition Position for the closest positioned proper parent of the floating element
|
257
|
+
* @param floatingRect WidthAndHeight for the floating element
|
258
|
+
* @param anchorRect BoxPosition for the anchor element
|
259
|
+
* @param PositionSettings to customize the calculated position for the floating element.
|
260
|
+
*/
|
261
|
+
function pureCalculateAnchoredPosition(
|
262
|
+
viewportRect: BoxPosition,
|
263
|
+
relativePosition: Position,
|
264
|
+
floatingRect: Size,
|
265
|
+
anchorRect: BoxPosition,
|
266
|
+
{side, align, allowOutOfBounds, anchorOffset, alignmentOffset}: PositionSettings
|
267
|
+
): AnchorPosition {
|
268
|
+
// Compute the relative viewport rect, to bring it into the same coordinate space as `pos`
|
269
|
+
const relativeViewportRect: BoxPosition = {
|
270
|
+
top: viewportRect.top - relativePosition.top,
|
271
|
+
left: viewportRect.left - relativePosition.left,
|
272
|
+
width: viewportRect.width,
|
273
|
+
height: viewportRect.height
|
274
|
+
}
|
275
|
+
|
276
|
+
let pos = calculatePosition(floatingRect, anchorRect, side, align, anchorOffset, alignmentOffset)
|
277
|
+
let anchorSide = side
|
278
|
+
pos.top -= relativePosition.top
|
279
|
+
pos.left -= relativePosition.left
|
280
|
+
|
281
|
+
// Handle screen overflow
|
282
|
+
if (!allowOutOfBounds) {
|
283
|
+
const alternateOrder = alternateOrders[side]
|
284
|
+
let positionAttempt = 0
|
285
|
+
if (alternateOrder) {
|
286
|
+
let prevSide = side
|
287
|
+
|
288
|
+
// Try all the alternate sides until one does not overflow
|
289
|
+
while (
|
290
|
+
positionAttempt < alternateOrder.length &&
|
291
|
+
shouldRecalculatePosition(prevSide, pos, relativeViewportRect, floatingRect)
|
292
|
+
) {
|
293
|
+
const nextSide = alternateOrder[positionAttempt++]
|
294
|
+
prevSide = nextSide
|
295
|
+
|
296
|
+
// If we have cut off in the same dimension as the "side" option, try flipping to the opposite side.
|
297
|
+
pos = calculatePosition(floatingRect, anchorRect, nextSide, align, anchorOffset, alignmentOffset)
|
298
|
+
pos.top -= relativePosition.top
|
299
|
+
pos.left -= relativePosition.left
|
300
|
+
anchorSide = nextSide
|
301
|
+
}
|
302
|
+
}
|
303
|
+
// At this point we've flipped the position if applicable. Now just nudge until it's on-screen.
|
304
|
+
if (pos.top < relativeViewportRect.top) {
|
305
|
+
pos.top = relativeViewportRect.top
|
306
|
+
}
|
307
|
+
if (pos.left < relativeViewportRect.left) {
|
308
|
+
pos.left = relativeViewportRect.left
|
309
|
+
}
|
310
|
+
if (pos.left + floatingRect.width > viewportRect.width + relativeViewportRect.left) {
|
311
|
+
pos.left = viewportRect.width + relativeViewportRect.left - floatingRect.width
|
312
|
+
}
|
313
|
+
// If we have exhausted all possible positions and none of them worked, we
|
314
|
+
// say that overflowing the bottom of the screen is acceptable since it is
|
315
|
+
// likely to be able to scroll.
|
316
|
+
if (alternateOrder && positionAttempt < alternateOrder.length) {
|
317
|
+
if (pos.top + floatingRect.height > viewportRect.height + relativeViewportRect.top) {
|
318
|
+
pos.top = viewportRect.height + relativeViewportRect.top - floatingRect.height
|
319
|
+
}
|
320
|
+
}
|
321
|
+
}
|
322
|
+
|
323
|
+
return {...pos, anchorSide}
|
324
|
+
}
|
325
|
+
|
326
|
+
/**
|
327
|
+
* Given a floating element and an anchor element, return coordinates for the
|
328
|
+
* top-left of the floating element in order to absolutely position it such
|
329
|
+
* that it appears near the anchor element.
|
330
|
+
*
|
331
|
+
* @param elementDimensions Dimensions of the floating element
|
332
|
+
* @param anchorPosition Position of the anchor element
|
333
|
+
* @param side Side of the anchor to position the floating element
|
334
|
+
* @param align How to align the floating element with the anchor element
|
335
|
+
* @param anchorOffset Absolute pixel offset for anchor positioning
|
336
|
+
* @param alignmentOffset Absolute pixel offset for alignment
|
337
|
+
* @returns {top: number, left: number} coordinates for the floating element
|
338
|
+
*/
|
339
|
+
function calculatePosition(
|
340
|
+
elementDimensions: Size,
|
341
|
+
anchorPosition: BoxPosition,
|
342
|
+
side: AnchorSide,
|
343
|
+
align: AnchorAlignment,
|
344
|
+
anchorOffset: number,
|
345
|
+
alignmentOffset: number
|
346
|
+
) {
|
347
|
+
const anchorRight = anchorPosition.left + anchorPosition.width
|
348
|
+
const anchorBottom = anchorPosition.top + anchorPosition.height
|
349
|
+
let top = -1
|
350
|
+
let left = -1
|
351
|
+
if (side === 'outside-top') {
|
352
|
+
top = anchorPosition.top - anchorOffset - elementDimensions.height
|
353
|
+
} else if (side === 'outside-bottom') {
|
354
|
+
top = anchorBottom + anchorOffset
|
355
|
+
} else if (side === 'outside-left') {
|
356
|
+
left = anchorPosition.left - anchorOffset - elementDimensions.width
|
357
|
+
} else if (side === 'outside-right') {
|
358
|
+
left = anchorRight + anchorOffset
|
359
|
+
}
|
360
|
+
|
361
|
+
if (side === 'outside-top' || side === 'outside-bottom') {
|
362
|
+
if (align === 'start') {
|
363
|
+
left = anchorPosition.left + alignmentOffset
|
364
|
+
} else if (align === 'center') {
|
365
|
+
left = anchorPosition.left - (elementDimensions.width - anchorPosition.width) / 2 + alignmentOffset
|
366
|
+
} else {
|
367
|
+
// end
|
368
|
+
left = anchorRight - elementDimensions.width - alignmentOffset
|
369
|
+
}
|
370
|
+
}
|
371
|
+
|
372
|
+
if (side === 'outside-left' || side === 'outside-right') {
|
373
|
+
if (align === 'start') {
|
374
|
+
top = anchorPosition.top + alignmentOffset
|
375
|
+
} else if (align === 'center') {
|
376
|
+
top = anchorPosition.top - (elementDimensions.height - anchorPosition.height) / 2 + alignmentOffset
|
377
|
+
} else {
|
378
|
+
// end
|
379
|
+
top = anchorBottom - elementDimensions.height - alignmentOffset
|
380
|
+
}
|
381
|
+
}
|
382
|
+
|
383
|
+
if (side === 'inside-top') {
|
384
|
+
top = anchorPosition.top + anchorOffset
|
385
|
+
} else if (side === 'inside-bottom') {
|
386
|
+
top = anchorBottom - anchorOffset - elementDimensions.height
|
387
|
+
} else if (side === 'inside-left') {
|
388
|
+
left = anchorPosition.left + anchorOffset
|
389
|
+
} else if (side === 'inside-right') {
|
390
|
+
left = anchorRight - anchorOffset - elementDimensions.width
|
391
|
+
} else if (side === 'inside-center') {
|
392
|
+
left = (anchorRight + anchorPosition.left) / 2 - elementDimensions.width / 2 + anchorOffset
|
393
|
+
}
|
394
|
+
|
395
|
+
if (side === 'inside-top' || side === 'inside-bottom') {
|
396
|
+
if (align === 'start') {
|
397
|
+
left = anchorPosition.left + alignmentOffset
|
398
|
+
} else if (align === 'center') {
|
399
|
+
left = anchorPosition.left - (elementDimensions.width - anchorPosition.width) / 2 + alignmentOffset
|
400
|
+
} else {
|
401
|
+
// end
|
402
|
+
left = anchorRight - elementDimensions.width - alignmentOffset
|
403
|
+
}
|
404
|
+
} else if (side === 'inside-left' || side === 'inside-right' || side === 'inside-center') {
|
405
|
+
if (align === 'start') {
|
406
|
+
top = anchorPosition.top + alignmentOffset
|
407
|
+
} else if (align === 'center') {
|
408
|
+
top = anchorPosition.top - (elementDimensions.height - anchorPosition.height) / 2 + alignmentOffset
|
409
|
+
} else {
|
410
|
+
// end
|
411
|
+
top = anchorBottom - elementDimensions.height - alignmentOffset
|
412
|
+
}
|
413
|
+
}
|
414
|
+
|
415
|
+
return {top, left}
|
416
|
+
}
|
417
|
+
|
418
|
+
/**
|
419
|
+
* Determines if there is an overflow
|
420
|
+
* @param side
|
421
|
+
* @param currentPos
|
422
|
+
* @param containerDimensions
|
423
|
+
* @param elementDimensions
|
424
|
+
*/
|
425
|
+
function shouldRecalculatePosition(
|
426
|
+
side: AnchorSide,
|
427
|
+
currentPos: Position,
|
428
|
+
containerDimensions: BoxPosition,
|
429
|
+
elementDimensions: Size
|
430
|
+
) {
|
431
|
+
if (side === 'outside-top' || side === 'outside-bottom') {
|
432
|
+
return (
|
433
|
+
currentPos.top < containerDimensions.top ||
|
434
|
+
currentPos.top + elementDimensions.height > containerDimensions.height + containerDimensions.top
|
435
|
+
)
|
436
|
+
} else {
|
437
|
+
return (
|
438
|
+
currentPos.left < containerDimensions.left ||
|
439
|
+
currentPos.left + elementDimensions.width > containerDimensions.width + containerDimensions.left
|
440
|
+
)
|
441
|
+
}
|
442
|
+
}
|