From f448b1b3debd72a3a372f4083d656a4e235cbfc9 Mon Sep 17 00:00:00 2001
From: Josh Black <joshblack@github.com>
Date: Tue, 24 Sep 2024 14:23:20 -0500
Subject: [PATCH] feat: add wildcard imports as exports (#4976)
* feat: add wildcard imports as exports
* feat: add VisuallyHidden to @primer/react
* chore: add test-helpers entry point
* chore: add changeset
* chore: update test-helpers entrypoint
* feat: add ActionListItemInput
* chore: add ForwardRefComponent to deprecated entrypoint
---------
Co-authored-by: Josh Black <joshblack@users.noreply.github.com>
---
.changeset/lucky-oranges-camp.md | 5 +++++
packages/react/package.json | 9 ++++++++-
packages/react/rollup.config.mjs | 15 ++++++++++++++-
packages/react/src/Banner/Banner.tsx | 2 +-
packages/react/src/Button/ButtonBase.tsx | 2 +-
packages/react/src/DataTable/Pagination.tsx | 2 +-
packages/react/src/FeatureFlags/index.ts | 1 +
...FilteredActionListWithDeprecatedActionList.tsx | 2 +-
.../FilteredActionListWithModernActionList.tsx | 2 +-
.../src/Spinner/Spinner.examples.stories.tsx | 2 +-
packages/react/src/Spinner/Spinner.tsx | 2 +-
packages/react/src/Token/index.ts | 2 ++
.../VisuallyHidden.tsx | 6 ++++--
packages/react/src/VisuallyHidden/index.ts | 2 ++
.../__tests__/__snapshots__/exports.test.ts.snap | 14 ++++++++++++++
packages/react/src/deprecated/ActionList/index.ts | 2 +-
packages/react/src/deprecated/index.ts | 9 ++++++++-
.../Skeleton/Skeleton.examples.stories.tsx | 2 +-
packages/react/src/experimental/index.ts | 2 +-
packages/react/src/index.ts | 11 ++++++++---
.../react/src/internal/components/LiveRegion.tsx | 2 +-
.../src/live-region/Announce.features.stories.tsx | 2 +-
.../live-region/AriaAlert.features.stories.tsx | 2 +-
.../live-region/AriaStatus.features.stories.tsx | 2 +-
24 files changed, 80 insertions(+), 22 deletions(-)
create mode 100644 .changeset/lucky-oranges-camp.md
rename packages/react/src/{internal/components => VisuallyHidden}/VisuallyHidden.tsx (83%)
create mode 100644 packages/react/src/VisuallyHidden/index.ts
diff --git a/.changeset/lucky-oranges-camp.md b/.changeset/lucky-oranges-camp.md
new file mode 100644
index 00000000000..3804dafa3c4
--- /dev/null
+++ b/.changeset/lucky-oranges-camp.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add certain wildcard exports to named entry points
diff --git a/packages/react/package.json b/packages/react/package.json
index 0fc08f94d44..f3833a16660 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -21,6 +21,10 @@
"import": "./lib-esm/next/index.js",
"require": "./lib/next/index.js"
},
+ "./test-helpers": {
+ "import": "./lib-esm/test-helpers.js",
+ "require": "./lib/test-helpers.js"
+ },
"./lib-esm/*": {
"import": [
"./lib-esm/*.js",
@@ -36,7 +40,10 @@
"typings": "lib/index.d.ts",
"sideEffects": [
"lib-esm/**/*.css",
- "lib/**/*.css"
+ "lib/**/*.css",
+ "src/**/test-helpers.tsx",
+ "lib-esm/**/test-helpers.js",
+ "lib/**/test-helpers.js"
],
"scripts": {
"build": "./script/build",
diff --git a/packages/react/rollup.config.mjs b/packages/react/rollup.config.mjs
index d473a96efa5..6b40253473f 100644
--- a/packages/react/rollup.config.mjs
+++ b/packages/react/rollup.config.mjs
@@ -63,6 +63,15 @@ const input = new Set([
),
])
+function getEntrypointsFromInput(input) {
+ return Object.fromEntries(
+ Array.from(input).map(value => {
+ const relativePath = path.relative('src', value)
+ return [path.join(path.dirname(relativePath), path.basename(relativePath, path.extname(relativePath))), value]
+ }),
+ )
+}
+
const extensions = ['.js', '.jsx', '.ts', '.tsx']
const ESM_ONLY = new Set([
'@github/combobox-nav',
@@ -88,7 +97,11 @@ const postcssModulesOptions = {
}
const baseConfig = {
- input: Array.from(input),
+ input: {
+ ...getEntrypointsFromInput(input),
+ // "./test-helpers"
+ 'test-helpers': 'src/utils/test-helpers.tsx',
+ },
plugins: [
babel({
extensions,
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index 5b664081dc2..2a93f410abc 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components'
import {AlertIcon, InfoIcon, StopIcon, CheckCircleIcon, XIcon} from '@primer/octicons-react'
import {Button, IconButton} from '../Button'
import {get} from '../constants'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
import {useMergedRefs} from '../internal/hooks/useMergedRefs'
import {useFeatureFlag} from '../FeatureFlags'
import classes from './Banner.module.css'
diff --git a/packages/react/src/Button/ButtonBase.tsx b/packages/react/src/Button/ButtonBase.tsx
index df56a272f0f..b6db0d9cbc0 100644
--- a/packages/react/src/Button/ButtonBase.tsx
+++ b/packages/react/src/Button/ButtonBase.tsx
@@ -10,7 +10,7 @@ import {StyledButton} from './types'
import {getVariantStyles, getButtonStyles, getAlignContentSize} from './styles'
import {useRefObjectAsForwardedRef} from '../hooks/useRefObjectAsForwardedRef'
import {defaultSxProp} from '../utils/defaultSxProp'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
import Spinner from '../Spinner'
import CounterLabel from '../CounterLabel'
import {useId} from '../hooks'
diff --git a/packages/react/src/DataTable/Pagination.tsx b/packages/react/src/DataTable/Pagination.tsx
index b3c3dea1b56..938cb4fb3d4 100644
--- a/packages/react/src/DataTable/Pagination.tsx
+++ b/packages/react/src/DataTable/Pagination.tsx
@@ -4,7 +4,7 @@ import styled from 'styled-components'
import {get} from '../constants'
import {Button} from '../internal/components/ButtonReset'
import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
import {warning} from '../utils/warning'
import type {ResponsiveValue} from '../hooks/useResponsiveValue'
import {viewportRanges} from '../hooks/useResponsiveValue'
diff --git a/packages/react/src/FeatureFlags/index.ts b/packages/react/src/FeatureFlags/index.ts
index 6e364de8102..5a04cce6524 100644
--- a/packages/react/src/FeatureFlags/index.ts
+++ b/packages/react/src/FeatureFlags/index.ts
@@ -1,3 +1,4 @@
export {FeatureFlags} from './FeatureFlags'
export type {FeatureFlagsProps} from './FeatureFlags'
export {useFeatureFlag} from './useFeatureFlag'
+export {DefaultFeatureFlags} from './DefaultFeatureFlags'
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
index 7bec423a15c..0152247f387 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListWithDeprecatedActionList.tsx
@@ -15,7 +15,7 @@ import {useId} from '../hooks/useId'
import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
import useScrollFlash from '../hooks/useScrollFlash'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
import type {SxProp} from '../sx'
const menuScrollMargins: ScrollIntoViewOptions = {startMargin: 0, endMargin: 8}
diff --git a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
index 3e2898e5804..a3699cece07 100644
--- a/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
+++ b/packages/react/src/FilteredActionList/FilteredActionListWithModernActionList.tsx
@@ -15,7 +15,7 @@ import {useId} from '../hooks/useId'
import {useProvidedRefOrCreate} from '../hooks/useProvidedRefOrCreate'
import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
import useScrollFlash from '../hooks/useScrollFlash'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
import type {SxProp} from '../sx'
import {isValidElementType} from 'react-is'
diff --git a/packages/react/src/Spinner/Spinner.examples.stories.tsx b/packages/react/src/Spinner/Spinner.examples.stories.tsx
index a79b8642783..d9da39b83e0 100644
--- a/packages/react/src/Spinner/Spinner.examples.stories.tsx
+++ b/packages/react/src/Spinner/Spinner.examples.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
import type {Meta} from '@storybook/react'
import Spinner from './Spinner'
import {Box, Button} from '..'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
import {AriaStatus} from '../live-region'
export default {
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index 0a2336d69a7..46e55968e50 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -1,7 +1,7 @@
import React from 'react'
import styled from 'styled-components'
import sx, {type SxProp} from '../sx'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
import type {HTMLDataAttributes} from '../internal/internal-types'
import Box from '../Box'
import {useId} from '../hooks'
diff --git a/packages/react/src/Token/index.ts b/packages/react/src/Token/index.ts
index 570bda99851..380c0100579 100644
--- a/packages/react/src/Token/index.ts
+++ b/packages/react/src/Token/index.ts
@@ -1,4 +1,6 @@
+export type {TokenSizeKeys} from './TokenBase'
export {default} from './Token'
export type {TokenProps} from './Token'
export {default as IssueLabelToken} from './IssueLabelToken'
+export type {IssueLabelTokenProps} from './IssueLabelToken'
export {default as AvatarToken} from './AvatarToken'
diff --git a/packages/react/src/internal/components/VisuallyHidden.tsx b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
similarity index 83%
rename from packages/react/src/internal/components/VisuallyHidden.tsx
rename to packages/react/src/VisuallyHidden/VisuallyHidden.tsx
index f6683aecc5b..546b6d2d812 100644
--- a/packages/react/src/internal/components/VisuallyHidden.tsx
+++ b/packages/react/src/VisuallyHidden/VisuallyHidden.tsx
@@ -1,6 +1,6 @@
import styled from 'styled-components'
-import type {SxProp} from '../../sx'
-import sx from '../../sx'
+import type {SxProp} from '../sx'
+import sx from '../sx'
/**
* Provides a component that implements the "visually hidden" technique. This is
@@ -24,3 +24,5 @@ export const VisuallyHidden = styled.span<SxProp>`
${sx}
`
+
+export type VisuallyHiddenProps = React.ComponentPropsWithoutRef<typeof VisuallyHidden>
diff --git a/packages/react/src/VisuallyHidden/index.ts b/packages/react/src/VisuallyHidden/index.ts
new file mode 100644
index 00000000000..9febdef85bf
--- /dev/null
+++ b/packages/react/src/VisuallyHidden/index.ts
@@ -0,0 +1,2 @@
+export {VisuallyHidden} from './VisuallyHidden'
+export type {VisuallyHiddenProps} from './VisuallyHidden'
diff --git a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
index 34c1b9f6533..b16676e83f8 100644
--- a/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/packages/react/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -32,6 +32,8 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
"AvatarToken",
"BaseStyles",
"type BaseStylesProps",
+ "type BetterCssProperties",
+ "type BetterSystemStyleObject",
"Box",
"type BoxProps",
"BranchName",
@@ -80,7 +82,9 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
"IconButton",
"type IconButtonProps",
"IssueLabelToken",
+ "type IssueLabelTokenProps",
"Label",
+ "type LabelColorOptions",
"LabelGroup",
"type LabelGroupProps",
"type LabelProps",
@@ -198,21 +202,29 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
"useFocusTrap",
"useFocusZone",
"useFormControlForwardedProps",
+ "useIsomorphicLayoutEffect",
"useOnEscapePress",
"useOnOutsideClick",
"useOpenAndCloseFocus",
"useOverlay",
+ "useProvidedRefOrCreate",
"useRefObjectAsForwardedRef",
"useResizeObserver",
"useResponsiveValue",
"useSafeTimeout",
"useTheme",
+ "VisuallyHidden",
+ "type VisuallyHiddenProps",
]
`;
exports[`@primer/react/deprecated should not update exports without a semver change 1`] = `
[
"ActionList",
+ "type ActionListGroupedListProps",
+ "type ActionListGroupProps",
+ "type ActionListItemInput",
+ "type ActionListItemProps",
"type ActionListProps",
"ActionMenu",
"type ActionMenuProps",
@@ -235,6 +247,7 @@ exports[`@primer/react/deprecated should not update exports without a semver cha
"type DialogProps",
"FilteredSearch",
"type FilteredSearchProps",
+ "type ForwardRefComponent",
"Octicon",
"type OcticonProps",
"Pagehead",
@@ -271,6 +284,7 @@ exports[`@primer/react/experimental should not update exports without a semver c
"type DataTableProps",
"default",
"default",
+ "DefaultFeatureFlags",
"Dialog",
"type DialogButtonProps",
"type DialogHeaderProps",
diff --git a/packages/react/src/deprecated/ActionList/index.ts b/packages/react/src/deprecated/ActionList/index.ts
index ae0bb410f65..416a195f8a1 100644
--- a/packages/react/src/deprecated/ActionList/index.ts
+++ b/packages/react/src/deprecated/ActionList/index.ts
@@ -2,7 +2,7 @@ import {List} from './List'
import {Group} from './Group'
import {Item} from './Item'
import {Divider} from './Divider'
-export type {ListProps as ActionListProps} from './List'
+export type {ListProps as ActionListProps, GroupedListProps, ItemInput} from './List'
export type {GroupProps} from './Group'
export type {ItemProps} from './Item'
diff --git a/packages/react/src/deprecated/index.ts b/packages/react/src/deprecated/index.ts
index 55f68741837..261a1cddc80 100644
--- a/packages/react/src/deprecated/index.ts
+++ b/packages/react/src/deprecated/index.ts
@@ -11,7 +11,13 @@
// Deprecated in v35.0.0 on March 9, 2022
// TODO: We can remove these 6 months after release: September 10, 2022
export {ActionList} from './ActionList'
-export type {ActionListProps} from './ActionList'
+export type {
+ ActionListProps,
+ ItemProps as ActionListItemProps,
+ GroupProps as ActionListGroupProps,
+ GroupedListProps as ActionListGroupedListProps,
+ ItemInput as ActionListItemInput,
+} from './ActionList'
export {ActionMenu} from './ActionMenu'
export type {ActionMenuProps} from './ActionMenu'
// (copied over from src/index) not exporting new DropdownMenu types yet due to conflict with Dropdown types above
@@ -53,4 +59,5 @@ export {default as TabNav} from '../TabNav'
export type {TabNavProps, TabNavLinkProps} from '../TabNav'
export {default as Tooltip} from '../Tooltip/Tooltip'
export type {TooltipProps} from '../Tooltip/Tooltip'
+export type {ForwardRefComponent} from '../utils/polymorphic'
// end of v37.0.0
diff --git a/packages/react/src/experimental/Skeleton/Skeleton.examples.stories.tsx b/packages/react/src/experimental/Skeleton/Skeleton.examples.stories.tsx
index 136a26b0a5e..1b2db00d72c 100644
--- a/packages/react/src/experimental/Skeleton/Skeleton.examples.stories.tsx
+++ b/packages/react/src/experimental/Skeleton/Skeleton.examples.stories.tsx
@@ -4,7 +4,7 @@ import type {ComponentProps} from '../../utils/types'
import {SkeletonText} from './SkeletonText'
import {Avatar, Box, Button, IconButton, Text} from '../../'
import {SkeletonAvatar} from './SkeletonAvatar'
-import {VisuallyHidden} from '../../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../../VisuallyHidden'
import {KebabHorizontalIcon} from '@primer/octicons-react'
export default {
diff --git a/packages/react/src/experimental/index.ts b/packages/react/src/experimental/index.ts
index 939d1cdcd0b..92c6c4c24c1 100644
--- a/packages/react/src/experimental/index.ts
+++ b/packages/react/src/experimental/index.ts
@@ -68,7 +68,7 @@ export {UnderlinePanels} from './UnderlinePanels'
export type {UnderlinePanelsProps, UnderlinePanelsTabProps, UnderlinePanelsPanelProps} from './UnderlinePanels'
export {SkeletonBox, SkeletonText, SkeletonAvatar} from './Skeleton'
-export {FeatureFlags} from '../FeatureFlags'
+export {FeatureFlags, DefaultFeatureFlags} from '../FeatureFlags'
export type {FeatureFlagsProps} from '../FeatureFlags'
export {FilteredActionList} from '../FilteredActionList'
diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts
index 24a4987c98a..c4d89da90d9 100644
--- a/packages/react/src/index.ts
+++ b/packages/react/src/index.ts
@@ -44,6 +44,8 @@ export type {FocusZoneHookSettings} from './hooks/useFocusZone'
export {useRefObjectAsForwardedRef} from './hooks/useRefObjectAsForwardedRef'
export {useResizeObserver} from './hooks/useResizeObserver'
export {useResponsiveValue} from './hooks/useResponsiveValue'
+export {default as useIsomorphicLayoutEffect} from './utils/useIsomorphicLayoutEffect'
+export {useProvidedRefOrCreate} from './hooks/useProvidedRefOrCreate'
// Utils
export {createComponent} from './utils/create-component'
@@ -104,7 +106,7 @@ export type {HeaderProps, HeaderItemProps, HeaderLinkProps} from './Header'
export {default as Heading} from './Heading'
export type {HeadingProps} from './Heading'
export {default as Label} from './Label'
-export type {LabelProps} from './Label'
+export type {LabelProps, LabelColorOptions} from './Label'
export {default as LabelGroup} from './LabelGroup'
export type {LabelGroupProps} from './LabelGroup'
export {default as Link} from './Link'
@@ -169,7 +171,7 @@ export type {
TimelineItemsProps,
} from './Timeline'
export {default as Token, IssueLabelToken, AvatarToken} from './Token'
-export type {TokenProps} from './Token'
+export type {TokenProps, IssueLabelTokenProps} from './Token'
export {default as Tooltip} from './Tooltip/Tooltip'
export type {TooltipProps} from './Tooltip/Tooltip'
export {default as Truncate} from './Truncate'
@@ -190,6 +192,9 @@ export type {
TreeViewErrorDialogProps,
} from './TreeView'
+export {VisuallyHidden} from './VisuallyHidden'
+export type {VisuallyHiddenProps} from './VisuallyHidden'
+
export {UnderlineNav} from './UnderlineNav'
export type {UnderlineNavProps, UnderlineNavItemProps} from './UnderlineNav'
@@ -203,4 +208,4 @@ export {PageHeader} from './PageHeader'
export type {PageHeaderProps} from './PageHeader'
export {default as sx, merge} from './sx'
-export type {SxProp} from './sx'
+export type {BetterCssProperties, BetterSystemStyleObject, SxProp} from './sx'
diff --git a/packages/react/src/internal/components/LiveRegion.tsx b/packages/react/src/internal/components/LiveRegion.tsx
index 1f3a0433ac2..0bf93a6a8fb 100644
--- a/packages/react/src/internal/components/LiveRegion.tsx
+++ b/packages/react/src/internal/components/LiveRegion.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import {VisuallyHidden} from './VisuallyHidden'
+import {VisuallyHidden} from '../../VisuallyHidden'
type LiveRegionContext = {
announce: (message: string) => void
diff --git a/packages/react/src/live-region/Announce.features.stories.tsx b/packages/react/src/live-region/Announce.features.stories.tsx
index ea8a9f8831a..153f6f7f05c 100644
--- a/packages/react/src/live-region/Announce.features.stories.tsx
+++ b/packages/react/src/live-region/Announce.features.stories.tsx
@@ -1,7 +1,7 @@
import type {StoryObj} from '@storybook/react'
import React, {useEffect, useState} from 'react'
import {Announce} from './Announce'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
export default {
title: 'Experimental/Components/Announce/Features',
diff --git a/packages/react/src/live-region/AriaAlert.features.stories.tsx b/packages/react/src/live-region/AriaAlert.features.stories.tsx
index 10a5108ba01..dbdb41526c9 100644
--- a/packages/react/src/live-region/AriaAlert.features.stories.tsx
+++ b/packages/react/src/live-region/AriaAlert.features.stories.tsx
@@ -1,7 +1,7 @@
import type {StoryObj} from '@storybook/react'
import React from 'react'
import {AriaAlert} from './AriaAlert'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
export default {
title: 'Experimental/Components/AriaAlert/Features',
diff --git a/packages/react/src/live-region/AriaStatus.features.stories.tsx b/packages/react/src/live-region/AriaStatus.features.stories.tsx
index e7938445422..21f0d0b65b7 100644
--- a/packages/react/src/live-region/AriaStatus.features.stories.tsx
+++ b/packages/react/src/live-region/AriaStatus.features.stories.tsx
@@ -1,7 +1,7 @@
import type {StoryObj} from '@storybook/react'
import React, {useEffect, useState} from 'react'
import {AriaStatus} from './AriaStatus'
-import {VisuallyHidden} from '../internal/components/VisuallyHidden'
+import {VisuallyHidden} from '../VisuallyHidden'
export default {
title: 'Experimental/Components/AriaStatus/Features',