{
selected={selectedA}
onSelectedChange={setSelectedA}
onFilterChange={setFilter}
+ showItemDividers={true}
overlayProps={{height: 'medium'}}
/>
With height:auto, maxheight:medium
@@ -286,6 +293,7 @@ export const SelectPanelHeightAndScroll = () => {
selected={selectedB}
onSelectedChange={setSelectedB}
onFilterChange={setFilter}
+ showItemDividers={true}
overlayProps={{
height: 'auto',
maxHeight: 'medium',
diff --git a/src/SelectPanel/SelectPanel.stories.tsx b/src/SelectPanel/SelectPanel.stories.tsx
index a755207e390..1ab7d29b47b 100644
--- a/src/SelectPanel/SelectPanel.stories.tsx
+++ b/src/SelectPanel/SelectPanel.stories.tsx
@@ -2,10 +2,10 @@ import {TriangleDownIcon} from '@primer/octicons-react'
import {ComponentMeta} from '@storybook/react'
import React, {useState} from 'react'
+import Box from '../Box'
import {Button} from '../Button'
import {SelectPanel} from '../SelectPanel'
-import Box from '../Box'
-import {ItemInput} from '../FilteredActionList'
+import {ItemInput} from '../deprecated/ActionList/List'
export default {
title: 'Components/SelectPanel',
@@ -13,30 +13,32 @@ export default {
} as ComponentMeta
function getColorCircle(color: string) {
- return (
-
- )
+ return function () {
+ return (
+
+ )
+ }
}
const items = [
- {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: '1'},
- {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: '2'},
- {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: '3'},
- {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: '4'},
- {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: '5'},
- {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: '6'},
- {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: '7'},
+ {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
+ {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
+ {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
+ {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
+ {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
+ {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
+ {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
]
export const Default = () => {
@@ -63,6 +65,7 @@ export const Default = () => {
selected={selected}
onSelectedChange={setSelected}
onFilterChange={setFilter}
+ showItemDividers={true}
overlayProps={{width: 'small', height: 'xsmall'}}
/>
diff --git a/src/SelectPanel/SelectPanel.test.tsx b/src/SelectPanel/SelectPanel.test.tsx
index 551d742aaa3..05332623326 100644
--- a/src/SelectPanel/SelectPanel.test.tsx
+++ b/src/SelectPanel/SelectPanel.test.tsx
@@ -5,7 +5,7 @@ import theme from '../theme'
import {SelectPanel} from '../SelectPanel'
import {behavesAsComponent, checkExports} from '../utils/testing'
import {BaseStyles, SSRProvider, ThemeProvider} from '..'
-import {ItemInput} from '../FilteredActionList'
+import {ItemInput} from '../deprecated/ActionList/List'
expect.extend(toHaveNoViolations)
diff --git a/src/SelectPanel/SelectPanel.tsx b/src/SelectPanel/SelectPanel.tsx
index 02fd71726d3..dfcac4cdd97 100644
--- a/src/SelectPanel/SelectPanel.tsx
+++ b/src/SelectPanel/SelectPanel.tsx
@@ -1,16 +1,17 @@
import {SearchIcon} from '@primer/octicons-react'
import React, {useCallback, useMemo} from 'react'
-import {FilteredActionList, FilteredActionListProps, ItemInput} from '../FilteredActionList'
-import {OverlayProps} from '../Overlay'
-import {FocusZoneHookSettings} from '../hooks/useFocusZone'
-import {DropdownButton} from '../deprecated/DropdownMenu'
-import {ActionListItemProps} from '../ActionList'
import {AnchoredOverlay, AnchoredOverlayProps} from '../AnchoredOverlay'
import {AnchoredOverlayWrapperAnchorProps} from '../AnchoredOverlay/AnchoredOverlay'
import Box from '../Box'
+import {FilteredActionList, FilteredActionListProps} from '../FilteredActionList'
import Heading from '../Heading'
+import {OverlayProps} from '../Overlay'
import {TextInputProps} from '../TextInput'
+import {ItemProps} from '../deprecated/ActionList'
+import {ItemInput} from '../deprecated/ActionList/List'
+import {DropdownButton} from '../deprecated/DropdownMenu'
import {useProvidedRefOrCreate} from '../hooks'
+import {FocusZoneHookSettings} from '../hooks/useFocusZone'
import {useId} from '../hooks/useId'
import {useProvidedStateOrCreate} from '../hooks/useProvidedStateOrCreate'
import {LiveRegion, LiveRegionOutlet, Message} from '../internal/components/LiveRegion'
@@ -42,8 +43,7 @@ export type SelectPanelProps = SelectPanelBaseProps &
Omit &
Pick &
AnchoredOverlayWrapperAnchorProps &
- // TODO: 23-05-23 - Remove showItemDividers after next-major release
- (SelectPanelSingleSelection | SelectPanelMultiSelection) & {showItemDividers?: boolean}
+ (SelectPanelSingleSelection | SelectPanelMultiSelection)
function isMultiSelectVariant(
selected: SelectPanelSingleSelection['selected'] | SelectPanelMultiSelection['selected'],
@@ -120,7 +120,9 @@ export function SelectPanel({
...item,
role: 'option',
selected: 'selected' in item && item.selected === undefined ? undefined : isItemSelected,
- onSelect: (event: React.MouseEvent | React.KeyboardEvent) => {
+ onAction: (itemFromAction, event) => {
+ item.onAction?.(itemFromAction, event)
+
if (event.defaultPrevented) {
return
}
@@ -139,7 +141,7 @@ export function SelectPanel({
singleSelectOnChange(item === selected ? undefined : item)
onClose('selection')
},
- } as ActionListItemProps
+ } as ItemProps
})
}, [onClose, onSelectedChange, items, selected])
@@ -189,10 +191,11 @@ export function SelectPanel({
>
diff --git a/src/Textarea/Textarea.tsx b/src/Textarea/Textarea.tsx
index 14629acfcd3..276e7eae1f6 100644
--- a/src/Textarea/Textarea.tsx
+++ b/src/Textarea/Textarea.tsx
@@ -1,6 +1,6 @@
import styled, {css} from 'styled-components'
import React, {TextareaHTMLAttributes, ReactElement} from 'react'
-import {TextInputBaseWrapper} from '../_TextInputWrapper'
+import {TextInputBaseWrapper} from '../internal/components/TextInputWrapper'
import {FormValidationStatus} from '../utils/types/FormValidationStatus'
import sx, {SxProp} from '../sx'
diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx
index e32dc57cedb..44bdf4c29d1 100644
--- a/src/UnderlineNav2/UnderlineNav.tsx
+++ b/src/UnderlineNav2/UnderlineNav.tsx
@@ -145,6 +145,7 @@ export const UnderlineNav = forwardRef(
variant = 'default',
loadingCounters = false,
children,
+ ...props
}: UnderlineNavProps,
forwardedRef,
) => {
@@ -369,6 +370,7 @@ export const UnderlineNav = forwardRef(
ref={containerRef}
id={disclosureWidgetId}
sx={merge({display: isWidgetOpen ? 'block' : 'none'}, menuStyles)}
+ {...props}
>
{actions.map((action, index) => {
const {children: actionElementChildren, ...actionElementProps} = action.props
diff --git a/src/UnderlineNav2/UnderlineNav2.features.stories.tsx b/src/UnderlineNav2/UnderlineNav2.features.stories.tsx
index 7c52532542a..d38796e3cdc 100644
--- a/src/UnderlineNav2/UnderlineNav2.features.stories.tsx
+++ b/src/UnderlineNav2/UnderlineNav2.features.stories.tsx
@@ -76,7 +76,11 @@ const items: {navigation: string; icon: React.FC; counter?: number |
export const OverflowTemplate = ({initialSelectedIndex = 1}: {initialSelectedIndex?: number}) => {
const [selectedIndex, setSelectedIndex] = React.useState(initialSelectedIndex)
return (
-
+
{items.map((item, index) => (
{
),
})
- checkExports('_CheckboxOrRadioGroup', {
+ checkExports('internal/components/CheckboxOrRadioGroup', {
default: CheckboxOrRadioGroup,
CheckboxOrRadioGroupContext,
})
diff --git a/src/__tests__/__snapshots__/Button.test.tsx.snap b/src/__tests__/__snapshots__/Button.test.tsx.snap
index 772130612d6..463dd0f2a73 100644
--- a/src/__tests__/__snapshots__/Button.test.tsx.snap
+++ b/src/__tests__/__snapshots__/Button.test.tsx.snap
@@ -1504,7 +1504,9 @@ exports[`Button styles invisible button appropriately 1`] = `
color: primer.fg.disabled;
}
-.c0:disabled [data-component=ButtonCounter] {
+.c0:disabled [data-component=ButtonCounter],
+.c0:disabled [data-component="leadingVisual"],
+.c0:disabled [data-component="trailingAction"] {
color: inherit;
}
diff --git a/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
index a02f8b8c3c2..12f447b6d76 100644
--- a/src/__tests__/__snapshots__/TextInput.test.tsx.snap
+++ b/src/__tests__/__snapshots__/TextInput.test.tsx.snap
@@ -1336,7 +1336,9 @@ exports[`TextInput renders trailingAction icon button 1`] = `
color: #8c959f;
}
-.c4:disabled [data-component=ButtonCounter] {
+.c4:disabled [data-component=ButtonCounter],
+.c4:disabled [data-component="leadingVisual"],
+.c4:disabled [data-component="trailingAction"] {
color: inherit;
}
@@ -1982,7 +1984,9 @@ exports[`TextInput renders trailingAction text button 1`] = `
color: #8c959f;
}
-.c3:disabled [data-component=ButtonCounter] {
+.c3:disabled [data-component=ButtonCounter],
+.c3:disabled [data-component="leadingVisual"],
+.c3:disabled [data-component="trailingAction"] {
color: inherit;
}
@@ -2383,7 +2387,9 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = `
color: #8c959f;
}
-.c4:disabled [data-component=ButtonCounter] {
+.c4:disabled [data-component=ButtonCounter],
+.c4:disabled [data-component="leadingVisual"],
+.c4:disabled [data-component="trailingAction"] {
color: inherit;
}
diff --git a/src/__tests__/__snapshots__/exports.test.ts.snap b/src/__tests__/__snapshots__/exports.test.ts.snap
index a0fbe241750..bae5cfd5a56 100644
--- a/src/__tests__/__snapshots__/exports.test.ts.snap
+++ b/src/__tests__/__snapshots__/exports.test.ts.snap
@@ -38,6 +38,7 @@ exports[`@primer/react should not update exports without a semver change 1`] = `
"LabelGroup",
"Link",
"LinkButton",
+ "MenuContext",
"NavList",
"Octicon",
"Overlay",
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx
index 469ca189640..d154115db38 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldset.tsx
@@ -2,8 +2,8 @@ import React from 'react'
import {Box, useSSRSafeId} from '../..'
import createSlots from '../utils/create-slots'
import {FormValidationStatus} from '../../utils/types/FormValidationStatus'
-import ValidationAnimationContainer from '../../_ValidationAnimationContainer'
-import InputValidation from '../../_InputValidation'
+import ValidationAnimationContainer from '../../internal/components/ValidationAnimationContainer'
+import InputValidation from '../../internal/components/InputValidation'
import ChoiceFieldsetListItem from './ChoiceFieldsetListItem'
import ChoiceFieldsetDescription from './ChoiceFieldsetDescription'
import ChoiceFieldsetLegend from './ChoiceFieldsetLegend'
diff --git a/src/deprecated/InputField/InputField.tsx b/src/deprecated/InputField/InputField.tsx
index 60f003a89a6..ff2c1d98f28 100644
--- a/src/deprecated/InputField/InputField.tsx
+++ b/src/deprecated/InputField/InputField.tsx
@@ -1,13 +1,13 @@
import React from 'react'
import {Autocomplete, Box, Select, TextInput, TextInputWithTokens, useSSRSafeId} from '../../'
-import InputValidation from '../../_InputValidation'
+import InputValidation from '../../internal/components/InputValidation'
import {ComponentProps} from '../../utils/types'
import {FormValidationStatus} from '../../utils/types/FormValidationStatus'
import InputFieldCaption from './_InputFieldCaption'
import InputFieldLabel from './_InputFieldLabel'
import InputFieldValidation from './_InputFieldValidation'
import {Slots} from './slots'
-import ValidationAnimationContainer from '../../_ValidationAnimationContainer'
+import ValidationAnimationContainer from '../../internal/components/ValidationAnimationContainer'
export interface Props> {
children?: React.ReactNode
/**
diff --git a/src/deprecated/InputField/_InputFieldCaption.tsx b/src/deprecated/InputField/_InputFieldCaption.tsx
index 2bdb9951d1b..ff96bc16530 100644
--- a/src/deprecated/InputField/_InputFieldCaption.tsx
+++ b/src/deprecated/InputField/_InputFieldCaption.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import InputCaption from '../../_InputCaption'
+import InputCaption from '../../internal/components/InputCaption'
import {InputFieldContext} from './InputField'
import {Slot} from './slots'
diff --git a/src/deprecated/InputField/_InputFieldLabel.tsx b/src/deprecated/InputField/_InputFieldLabel.tsx
index f63e71135c2..592cb3369ff 100644
--- a/src/deprecated/InputField/_InputFieldLabel.tsx
+++ b/src/deprecated/InputField/_InputFieldLabel.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import InputLabel from '../../_InputLabel'
+import InputLabel from '../../internal/components/InputLabel'
import {InputFieldContext} from './InputField'
import {Slot} from './slots'
diff --git a/src/drafts/Button2/Button.stories.tsx b/src/drafts/Button2/Button.stories.tsx
index 2af88b0b872..deed09867fb 100644
--- a/src/drafts/Button2/Button.stories.tsx
+++ b/src/drafts/Button2/Button.stories.tsx
@@ -21,14 +21,14 @@ export default {
variant: {
control: {
type: 'radio',
- options: ['default', 'primary', 'danger', 'invisible', 'outline'],
},
+ options: ['default', 'primary', 'danger', 'invisible', 'outline'],
},
alignContent: {
control: {
type: 'radio',
- options: ['center', 'start'],
},
+ options: ['center', 'start'],
},
block: {
control: {
diff --git a/src/drafts/MarkdownEditor/Label.tsx b/src/drafts/MarkdownEditor/Label.tsx
index bf55398b86e..0117cd7b49d 100644
--- a/src/drafts/MarkdownEditor/Label.tsx
+++ b/src/drafts/MarkdownEditor/Label.tsx
@@ -1,5 +1,5 @@
import React, {FC, useContext} from 'react'
-import InputLabel from '../../_InputLabel'
+import InputLabel from '../../internal/components/InputLabel'
import {SxProp} from '../../sx'
import {MarkdownEditorContext} from './_MarkdownEditorContext'
diff --git a/src/drafts/MarkdownEditor/_SavedReplies.tsx b/src/drafts/MarkdownEditor/_SavedReplies.tsx
index b1804c906a8..d10b4b4ee5f 100644
--- a/src/drafts/MarkdownEditor/_SavedReplies.tsx
+++ b/src/drafts/MarkdownEditor/_SavedReplies.tsx
@@ -10,7 +10,6 @@ import React, {
} from 'react'
import {SelectPanel, SelectPanelProps} from '../../SelectPanel'
import {ToolbarButton} from './Toolbar'
-import Truncate from '../../Truncate'
export type SavedReply = {
name: string
@@ -54,11 +53,7 @@ export const SavedRepliesButton = () => {
.map(
(reply, i): Item => ({
text: reply.name,
- description: (
-
- {reply.content}
-
- ),
+ description: reply.content,
descriptionVariant: 'block',
trailingVisual: i < 9 ? `Ctrl + ${i + 1}` : undefined,
sx: {
@@ -71,7 +66,6 @@ export const SavedRepliesButton = () => {
maxWidth: '100%',
},
},
- id: i.toString(),
}),
)
@@ -111,12 +105,6 @@ export const SavedRepliesButton = () => {
onSelectItem(Array.isArray(selection) ? selection[0] : selection)
}}
overlayProps={{width: 'small', maxHeight: 'small', anchorSide: 'outside-right', onKeyDown}}
- // @ts-ignore this is bad because SelectPanel does not accept selectionVariant in the public API
- // but it does pass it down to FilteredActionList underneath.
- // SavedReplies should not use SelectPanel and override it's semantics, it should instead
- // use the building blocks of SelectPanel to build a new component
- selectionVariant={undefined}
- aria-multiselectable={undefined}
/>
) : (
<>
diff --git a/src/global.d.ts b/src/global.d.ts
index 2bf24d9805e..ae66f9c8fc9 100644
--- a/src/global.d.ts
+++ b/src/global.d.ts
@@ -1,5 +1,10 @@
// eslint-disable-next-line no-var
declare var __DEV__: boolean
-// supress type warnings for css files
-declare module '*.module.css'
+// we have to declare this for tsc on the command line
+// because tsc doesn't support loading plugins yet
+// reference: https://github.com/mrmckeb/typescript-plugin-css-modules/issues/57#issuecomment-544832759
+declare module '*.module.css' {
+ const classes: {[key: string]: string}
+ export default classes
+}
diff --git a/src/index.ts b/src/index.ts
index 649faf74565..344fa49e60e 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -57,7 +57,7 @@ export type {
ActionListLeadingVisualProps,
ActionListTrailingVisualProps,
} from './ActionList'
-export {ActionMenu} from './ActionMenu'
+export {ActionMenu, MenuContext} from './ActionMenu'
export type {ActionMenuProps, ActionMenuAnchorProps, ActionMenuButtonProps} from './ActionMenu'
export {AnchoredOverlay} from './AnchoredOverlay'
export type {AnchoredOverlayProps} from './AnchoredOverlay'
diff --git a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
similarity index 88%
rename from src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
rename to src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index b63812e920a..fa8b9ab47ba 100644
--- a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -1,15 +1,15 @@
import React from 'react'
import styled from 'styled-components'
-import Box from '../Box'
-import ValidationAnimationContainer from '../_ValidationAnimationContainer'
-import {get} from '../constants'
-import {useSSRSafeId} from '../utils/ssr'
-import CheckboxOrRadioGroupCaption from './_CheckboxOrRadioGroupCaption'
-import CheckboxOrRadioGroupLabel from './_CheckboxOrRadioGroupLabel'
-import CheckboxOrRadioGroupValidation from './_CheckboxOrRadioGroupValidation'
-import VisuallyHidden from '../_VisuallyHidden'
-import {useSlots} from '../hooks/useSlots'
-import {SxProp} from '../sx'
+import Box from '../../../Box'
+import ValidationAnimationContainer from '../ValidationAnimationContainer'
+import {get} from '../../../constants'
+import {useSSRSafeId} from '../../../utils/ssr'
+import CheckboxOrRadioGroupCaption from './CheckboxOrRadioGroupCaption'
+import CheckboxOrRadioGroupLabel from './CheckboxOrRadioGroupLabel'
+import CheckboxOrRadioGroupValidation from './CheckboxOrRadioGroupValidation'
+import VisuallyHidden from '../../../_VisuallyHidden'
+import {useSlots} from '../../../hooks/useSlots'
+import {SxProp} from '../../../sx'
export type CheckboxOrRadioGroupProps = {
/**
@@ -153,7 +153,7 @@ const CheckboxOrRadioGroup: React.FC> = ({children, sx}) => {
diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx b/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
similarity index 89%
rename from src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx
rename to src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
index 40e54cec14e..6d2067a4385 100644
--- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx
+++ b/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupLabel.tsx
@@ -1,7 +1,7 @@
import React from 'react'
-import Box from '../Box'
-import VisuallyHidden from '../_VisuallyHidden'
-import {SxProp} from '../sx'
+import Box from '../../../Box'
+import VisuallyHidden from '../../../_VisuallyHidden'
+import {SxProp} from '../../../sx'
import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup'
export type CheckboxOrRadioGroupLabelProps = {
diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx b/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
similarity index 80%
rename from src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx
rename to src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
index f213e5c3c94..2a23adb47a9 100644
--- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx
+++ b/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroupValidation.tsx
@@ -1,7 +1,7 @@
import React from 'react'
-import InputValidation from '../_InputValidation'
-import {SxProp} from '../sx'
-import {FormValidationStatus} from '../utils/types/FormValidationStatus'
+import InputValidation from '../InputValidation'
+import {SxProp} from '../../../sx'
+import {FormValidationStatus} from '../../../utils/types/FormValidationStatus'
import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup'
export type CheckboxOrRadioGroupValidationProps = {
diff --git a/src/_CheckboxOrRadioGroup/index.ts b/src/internal/components/CheckboxOrRadioGroup/index.ts
similarity index 100%
rename from src/_CheckboxOrRadioGroup/index.ts
rename to src/internal/components/CheckboxOrRadioGroup/index.ts
diff --git a/src/_InputCaption.tsx b/src/internal/components/InputCaption.tsx
similarity index 88%
rename from src/_InputCaption.tsx
rename to src/internal/components/InputCaption.tsx
index 54fab427c9d..9eecc472772 100644
--- a/src/_InputCaption.tsx
+++ b/src/internal/components/InputCaption.tsx
@@ -1,6 +1,6 @@
import React from 'react'
-import Text from './Text'
-import {SxProp} from './sx'
+import Text from '../../Text'
+import {SxProp} from '../../sx'
type Props = {
/**
diff --git a/src/_InputLabel.tsx b/src/internal/components/InputLabel.tsx
similarity index 92%
rename from src/_InputLabel.tsx
rename to src/internal/components/InputLabel.tsx
index 779aee82a81..1117c0f79bf 100644
--- a/src/_InputLabel.tsx
+++ b/src/internal/components/InputLabel.tsx
@@ -1,7 +1,7 @@
import React from 'react'
-import Box from './Box'
-import {SxProp} from './sx'
-import VisuallyHidden from './_VisuallyHidden'
+import Box from '../../Box'
+import {SxProp} from '../../sx'
+import VisuallyHidden from '../../_VisuallyHidden'
type BaseProps = SxProp & {
disabled?: boolean
diff --git a/src/_InputValidation.tsx b/src/internal/components/InputValidation.tsx
similarity index 91%
rename from src/_InputValidation.tsx
rename to src/internal/components/InputValidation.tsx
index 2ef870688ad..50848204a87 100644
--- a/src/_InputValidation.tsx
+++ b/src/internal/components/InputValidation.tsx
@@ -1,9 +1,9 @@
import {AlertFillIcon, CheckCircleFillIcon, IconProps} from '@primer/octicons-react'
import React from 'react'
-import Box from './Box'
-import Text from './Text'
-import {SxProp} from './sx'
-import {FormValidationStatus} from './utils/types/FormValidationStatus'
+import Box from '../../Box'
+import Text from '../../Text'
+import {SxProp} from '../../sx'
+import {FormValidationStatus} from '../../utils/types/FormValidationStatus'
type Props = {
id: string
diff --git a/src/_TextInputWrapper.tsx b/src/internal/components/TextInputWrapper.tsx
similarity index 97%
rename from src/_TextInputWrapper.tsx
rename to src/internal/components/TextInputWrapper.tsx
index 5af6ff7d396..796a3614030 100644
--- a/src/_TextInputWrapper.tsx
+++ b/src/internal/components/TextInputWrapper.tsx
@@ -1,8 +1,8 @@
import styled, {css} from 'styled-components'
import {maxWidth, MaxWidthProps, minWidth, MinWidthProps, variant, width, WidthProps} from 'styled-system'
-import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {FormValidationStatus} from './utils/types/FormValidationStatus'
+import {get} from '../../constants'
+import sx, {SxProp} from '../../sx'
+import {FormValidationStatus} from '../../utils/types/FormValidationStatus'
export type TextInputSizes = 'small' | 'medium' | 'large'
diff --git a/src/_UnstyledTextInput.tsx b/src/internal/components/UnstyledTextInput.tsx
similarity index 92%
rename from src/_UnstyledTextInput.tsx
rename to src/internal/components/UnstyledTextInput.tsx
index f6819e44780..5e924e00a61 100644
--- a/src/_UnstyledTextInput.tsx
+++ b/src/internal/components/UnstyledTextInput.tsx
@@ -1,5 +1,5 @@
import styled from 'styled-components'
-import sx from './sx'
+import sx from '../../sx'
const UnstyledTextInput = styled.input`
border: 0;
diff --git a/src/_ValidationAnimationContainer.tsx b/src/internal/components/ValidationAnimationContainer.tsx
similarity index 97%
rename from src/_ValidationAnimationContainer.tsx
rename to src/internal/components/ValidationAnimationContainer.tsx
index c774600a57e..3e4e3773869 100644
--- a/src/_ValidationAnimationContainer.tsx
+++ b/src/internal/components/ValidationAnimationContainer.tsx
@@ -1,6 +1,6 @@
import React, {HTMLProps, useEffect, useState} from 'react'
import styled, {keyframes, css} from 'styled-components'
-import Box from './Box'
+import Box from '../../Box'
interface Props extends HTMLProps {
show?: boolean
diff --git a/tsconfig.json b/tsconfig.json
index 255f9b44232..3aabac162e4 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -14,7 +14,16 @@
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"resolveJsonModule": true,
- "typeRoots": ["./node_modules/@types", "./@types"]
+ "typeRoots": ["./node_modules/@types", "./@types"],
+ "plugins": [{"name": "typescript-plugin-css-modules"}]
},
- "include": ["@types/**/*.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.tsx", "script/**/*.ts", "e2e/**/*.ts", "playwright.config.ts"]
+ "include": [
+ "@types/**/*.ts",
+ "src/**/*.js",
+ "src/**/*.ts",
+ "src/**/*.tsx",
+ "script/**/*.ts",
+ "e2e/**/*.ts",
+ "playwright.config.ts"
+ ]
}