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

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add certain wildcard exports to named entry points

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",

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,

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'

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'

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'

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'

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}

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'

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 {

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'

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'

packages/react/src/internal/components/VisuallyHidden.tsx → 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>

packages/react/src/VisuallyHidden/index.ts

@@ -0,0 +1,2 @@
+export {VisuallyHidden} from './VisuallyHidden'
+export type {VisuallyHiddenProps} from './VisuallyHidden'

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",

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'
 

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

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 {

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'

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'

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

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',

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',

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',