diff --git a/packages/core-components/api-report.md b/packages/core-components/api-report.md index f73eee1f13..0f8ea308c6 100644 --- a/packages/core-components/api-report.md +++ b/packages/core-components/api-report.md @@ -9,10 +9,8 @@ import { ApiRef } from '@backstage/core-plugin-api'; import { BackstageIdentityApi } from '@backstage/core-plugin-api'; import { Breadcrumbs as Breadcrumbs_2 } from '@material-ui/core'; import { ButtonProps } from '@material-ui/core'; -import { ButtonTypeMap } from '@material-ui/core'; import { CardHeaderProps } from '@material-ui/core'; import { Column } from '@material-table/core'; -import { CommonProps } from '@material-ui/core/OverridableComponent'; import { ComponentClass } from 'react'; import { ComponentProps } from 'react'; import { Context } from 'react'; @@ -50,7 +48,7 @@ import { WithStyles } from '@material-ui/core'; // Warning: (ae-missing-release-tag) "AlertDisplay" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const AlertDisplay: () => JSX.Element | null; +export function AlertDisplay(_props: {}): JSX.Element | null; // Warning: (ae-missing-release-tag) "Alignment" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -70,11 +68,7 @@ enum Alignment { // Warning: (ae-missing-release-tag) "Avatar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const Avatar: ({ - displayName, - picture, - customStyles, -}: AvatarProps) => JSX.Element; +export function Avatar(props: AvatarProps): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "Breadcrumbs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -88,316 +82,10 @@ export const Breadcrumbs: ({ children, ...props }: Props_24) => JSX.Element; export const BrokenImageIcon: IconComponent; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts -// Warning: (ae-missing-release-tag) "Button" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// Warning: (ae-missing-release-tag) "ButtonType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // -// @public -export const Button: React_2.ForwardRefExoticComponent< - Pick< - Props, - | 'replace' - | 'media' - | 'hidden' - | 'dir' - | 'form' - | 'slot' - | 'title' - | 'disabled' - | 'color' - | 'size' - | 'underline' - | 'display' - | 'translate' - | 'prefix' - | 'children' - | 'key' - | 'value' - | 'id' - | 'name' - | 'action' - | 'defaultChecked' - | 'defaultValue' - | 'suppressContentEditableWarning' - | 'suppressHydrationWarning' - | 'accessKey' - | 'contentEditable' - | 'contextMenu' - | 'draggable' - | 'lang' - | 'placeholder' - | 'spellCheck' - | 'tabIndex' - | 'radioGroup' - | 'role' - | 'about' - | 'datatype' - | 'inlist' - | 'property' - | 'resource' - | 'typeof' - | 'vocab' - | 'autoCapitalize' - | 'autoCorrect' - | 'autoSave' - | 'itemProp' - | 'itemScope' - | 'itemType' - | 'itemID' - | 'itemRef' - | 'results' - | 'security' - | 'unselectable' - | 'inputMode' - | 'is' - | 'aria-activedescendant' - | 'aria-atomic' - | 'aria-autocomplete' - | 'aria-busy' - | 'aria-checked' - | 'aria-colcount' - | 'aria-colindex' - | 'aria-colspan' - | 'aria-controls' - | 'aria-current' - | 'aria-describedby' - | 'aria-details' - | 'aria-disabled' - | 'aria-dropeffect' - | 'aria-errormessage' - | 'aria-expanded' - | 'aria-flowto' - | 'aria-grabbed' - | 'aria-haspopup' - | 'aria-hidden' - | 'aria-invalid' - | 'aria-keyshortcuts' - | 'aria-label' - | 'aria-labelledby' - | 'aria-level' - | 'aria-live' - | 'aria-modal' - | 'aria-multiline' - | 'aria-multiselectable' - | 'aria-orientation' - | 'aria-owns' - | 'aria-placeholder' - | 'aria-posinset' - | 'aria-pressed' - | 'aria-readonly' - | 'aria-relevant' - | 'aria-required' - | 'aria-roledescription' - | 'aria-rowcount' - | 'aria-rowindex' - | 'aria-rowspan' - | 'aria-selected' - | 'aria-setsize' - | 'aria-sort' - | 'aria-valuemax' - | 'aria-valuemin' - | 'aria-valuenow' - | 'aria-valuetext' - | 'dangerouslySetInnerHTML' - | 'onCopy' - | 'onCopyCapture' - | 'onCut' - | 'onCutCapture' - | 'onPaste' - | 'onPasteCapture' - | 'onCompositionEnd' - | 'onCompositionEndCapture' - | 'onCompositionStart' - | 'onCompositionStartCapture' - | 'onCompositionUpdate' - | 'onCompositionUpdateCapture' - | 'onFocus' - | 'onFocusCapture' - | 'onBlur' - | 'onBlurCapture' - | 'onChange' - | 'onChangeCapture' - | 'onBeforeInput' - | 'onBeforeInputCapture' - | 'onInput' - | 'onInputCapture' - | 'onReset' - | 'onResetCapture' - | 'onSubmit' - | 'onSubmitCapture' - | 'onInvalid' - | 'onInvalidCapture' - | 'onLoad' - | 'onLoadCapture' - | 'onError' - | 'onErrorCapture' - | 'onKeyDown' - | 'onKeyDownCapture' - | 'onKeyPress' - | 'onKeyPressCapture' - | 'onKeyUp' - | 'onKeyUpCapture' - | 'onAbort' - | 'onAbortCapture' - | 'onCanPlay' - | 'onCanPlayCapture' - | 'onCanPlayThrough' - | 'onCanPlayThroughCapture' - | 'onDurationChange' - | 'onDurationChangeCapture' - | 'onEmptied' - | 'onEmptiedCapture' - | 'onEncrypted' - | 'onEncryptedCapture' - | 'onEnded' - | 'onEndedCapture' - | 'onLoadedData' - | 'onLoadedDataCapture' - | 'onLoadedMetadata' - | 'onLoadedMetadataCapture' - | 'onLoadStart' - | 'onLoadStartCapture' - | 'onPause' - | 'onPauseCapture' - | 'onPlay' - | 'onPlayCapture' - | 'onPlaying' - | 'onPlayingCapture' - | 'onProgress' - | 'onProgressCapture' - | 'onRateChange' - | 'onRateChangeCapture' - | 'onSeeked' - | 'onSeekedCapture' - | 'onSeeking' - | 'onSeekingCapture' - | 'onStalled' - | 'onStalledCapture' - | 'onSuspend' - | 'onSuspendCapture' - | 'onTimeUpdate' - | 'onTimeUpdateCapture' - | 'onVolumeChange' - | 'onVolumeChangeCapture' - | 'onWaiting' - | 'onWaitingCapture' - | 'onAuxClick' - | 'onAuxClickCapture' - | 'onClick' - | 'onClickCapture' - | 'onContextMenu' - | 'onContextMenuCapture' - | 'onDoubleClick' - | 'onDoubleClickCapture' - | 'onDrag' - | 'onDragCapture' - | 'onDragEnd' - | 'onDragEndCapture' - | 'onDragEnter' - | 'onDragEnterCapture' - | 'onDragExit' - | 'onDragExitCapture' - | 'onDragLeave' - | 'onDragLeaveCapture' - | 'onDragOver' - | 'onDragOverCapture' - | 'onDragStart' - | 'onDragStartCapture' - | 'onDrop' - | 'onDropCapture' - | 'onMouseDown' - | 'onMouseDownCapture' - | 'onMouseEnter' - | 'onMouseLeave' - | 'onMouseMove' - | 'onMouseMoveCapture' - | 'onMouseOut' - | 'onMouseOutCapture' - | 'onMouseOver' - | 'onMouseOverCapture' - | 'onMouseUp' - | 'onMouseUpCapture' - | 'onSelect' - | 'onSelectCapture' - | 'onTouchCancel' - | 'onTouchCancelCapture' - | 'onTouchEnd' - | 'onTouchEndCapture' - | 'onTouchMove' - | 'onTouchMoveCapture' - | 'onTouchStart' - | 'onTouchStartCapture' - | 'onPointerDown' - | 'onPointerDownCapture' - | 'onPointerMove' - | 'onPointerMoveCapture' - | 'onPointerUp' - | 'onPointerUpCapture' - | 'onPointerCancel' - | 'onPointerCancelCapture' - | 'onPointerEnter' - | 'onPointerEnterCapture' - | 'onPointerLeave' - | 'onPointerLeaveCapture' - | 'onPointerOver' - | 'onPointerOverCapture' - | 'onPointerOut' - | 'onPointerOutCapture' - | 'onGotPointerCapture' - | 'onGotPointerCaptureCapture' - | 'onLostPointerCapture' - | 'onLostPointerCaptureCapture' - | 'onScroll' - | 'onScrollCapture' - | 'onWheel' - | 'onWheelCapture' - | 'onAnimationStart' - | 'onAnimationStartCapture' - | 'onAnimationEnd' - | 'onAnimationEndCapture' - | 'onAnimationIteration' - | 'onAnimationIterationCapture' - | 'onTransitionEnd' - | 'onTransitionEndCapture' - | 'component' - | 'variant' - | 'download' - | 'href' - | 'hrefLang' - | 'ping' - | 'rel' - | 'target' - | 'type' - | 'referrerPolicy' - | 'disableElevation' - | 'fullWidth' - | 'startIcon' - | 'endIcon' - | 'noWrap' - | 'gutterBottom' - | 'paragraph' - | 'autoFocus' - | 'formAction' - | 'formEncType' - | 'formMethod' - | 'formNoValidate' - | 'formTarget' - | 'disableFocusRipple' - | 'buttonRef' - | 'centerRipple' - | 'disableRipple' - | 'disableTouchRipple' - | 'focusRipple' - | 'focusVisibleClassName' - | 'onFocusVisible' - | 'TouchRippleProps' - | 'align' - | 'variantMapping' - | 'to' - | 'state' - | 'TypographyClasses' - | keyof CommonProps> - > & - React_2.RefAttributes ->; +// @public (undocumented) +export function Button(props: Props): JSX.Element; // Warning: (ae-forgotten-export) The symbol "CardTabProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "CardTab" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -422,14 +110,7 @@ export const ChatIcon: IconComponent; // Warning: (ae-missing-release-tag) "CodeSnippet" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const CodeSnippet: ({ - text, - language, - showLineNumbers, - showCopyCodeButton, - highlightedNumbers, - customStyle, -}: Props_2) => JSX.Element; +export const CodeSnippet: (props: Props_2) => JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "Content" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -455,26 +136,28 @@ export const ContentHeader: ({ textAlign, }: PropsWithChildren) => JSX.Element; +// Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts +// Warning: (ae-missing-release-tag) "CopyTextButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // Warning: (ae-missing-release-tag) "CopyTextButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const CopyTextButton: { - (props: Props_3): JSX.Element; - propTypes: { - text: PropTypes.Validator; - tooltipDelay: PropTypes.Requireable; - tooltipText: PropTypes.Requireable; - }; -}; +export function CopyTextButton(props: Props_3): JSX.Element; + +// @public (undocumented) +export namespace CopyTextButton { + var // (undocumented) + propTypes: { + text: PropTypes.Validator; + tooltipDelay: PropTypes.Requireable; + tooltipText: PropTypes.Requireable; + }; +} // Warning: (ae-forgotten-export) The symbol "CreateButtonProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "CreateButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const CreateButton: ({ - title, - to, -}: CreateButtonProps) => JSX.Element | null; +export function CreateButton(props: CreateButtonProps): JSX.Element | null; // Warning: (ae-missing-release-tag) "DashboardIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -495,27 +178,7 @@ type DependencyEdge = T & { // Warning: (ae-missing-release-tag) "DependencyGraph" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function DependencyGraph({ - edges, - nodes, - renderNode, - direction, - align, - nodeMargin, - edgeMargin, - rankMargin, - paddingX, - paddingY, - acyclicer, - ranker, - labelPosition, - labelOffset, - edgeRanks, - edgeWeight, - renderLabel, - defs, - ...svgProps -}: DependencyGraphProps): JSX.Element; +export function DependencyGraph(props: DependencyGraphProps): JSX.Element; declare namespace DependencyGraphTypes { export { @@ -561,12 +224,7 @@ enum Direction { // Warning: (ae-missing-release-tag) "DismissableBanner" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const DismissableBanner: ({ - variant, - message, - id, - fixed, -}: Props_4) => JSX.Element; +export const DismissableBanner: (props: Props_4) => JSX.Element; // Warning: (ae-missing-release-tag) "DocsIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -596,12 +254,7 @@ export const EmailIcon: IconComponent; // Warning: (ae-missing-release-tag) "EmptyState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const EmptyState: ({ - title, - description, - missing, - action, -}: Props_5) => JSX.Element; +export function EmptyState(props: Props_5): JSX.Element; // Warning: (ae-forgotten-export) The symbol "State" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "ErrorBoundary" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -630,12 +283,9 @@ export const ErrorPage: ({ // Warning: (ae-missing-release-tag) "ErrorPanel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export const ErrorPanel: ({ - title, - error, - defaultExpanded, - children, -}: PropsWithChildren) => JSX.Element; +export function ErrorPanel( + props: PropsWithChildren, +): JSX.Element; // Warning: (ae-missing-release-tag) "ErrorPanelProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -650,24 +300,21 @@ export type ErrorPanelProps = { // Warning: (ae-missing-release-tag) "FeatureCalloutCircular" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const FeatureCalloutCircular: ({ - featureId, - title, - description, - children, -}: PropsWithChildren) => JSX.Element; +export function FeatureCalloutCircular( + props: PropsWithChildren, +): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "Gauge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const Gauge: (props: Props_14) => JSX.Element; +export function Gauge(props: Props_14): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "GaugeCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const GaugeCard: (props: Props_13) => JSX.Element; +export function GaugeCard(props: Props_13): JSX.Element; // Warning: (ae-missing-release-tag) "GitHubIcon" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -710,7 +357,7 @@ export const Header: ({ // Warning: (ae-missing-release-tag) "HeaderIconLinkRow" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const HeaderIconLinkRow: ({ links }: Props_8) => JSX.Element; +export function HeaderIconLinkRow(props: Props_8): JSX.Element; // Warning: (ae-forgotten-export) The symbol "HeaderLabelProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "HeaderLabel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -746,9 +393,9 @@ export const HomepageTimer: () => JSX.Element | null; // Warning: (ae-missing-release-tag) "HorizontalScrollGrid" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const HorizontalScrollGrid: ( +export function HorizontalScrollGrid( props: PropsWithChildren, -) => JSX.Element; +): JSX.Element; // Warning: (ae-missing-release-tag) "IconLinkVerticalProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -872,302 +519,18 @@ enum LabelPosition { // Warning: (ae-missing-release-tag) "Lifecycle" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const Lifecycle: (props: Props_10) => JSX.Element; +export function Lifecycle(props: Props_10): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "LinearGauge" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const LinearGauge: ({ value }: Props_15) => JSX.Element | null; +export function LinearGauge(props: Props_15): JSX.Element | null; -// Warning: (ae-missing-release-tag) "Link" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) +// Warning: (ae-missing-release-tag) "LinkType" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // -// @public -export const Link: React_2.ForwardRefExoticComponent< - Pick< - LinkProps, - | 'replace' - | 'media' - | 'hidden' - | 'dir' - | 'slot' - | 'style' - | 'title' - | 'color' - | 'underline' - | 'display' - | 'translate' - | 'prefix' - | 'children' - | 'key' - | 'id' - | 'classes' - | 'defaultChecked' - | 'defaultValue' - | 'suppressContentEditableWarning' - | 'suppressHydrationWarning' - | 'accessKey' - | 'className' - | 'contentEditable' - | 'contextMenu' - | 'draggable' - | 'lang' - | 'placeholder' - | 'spellCheck' - | 'tabIndex' - | 'radioGroup' - | 'role' - | 'about' - | 'datatype' - | 'inlist' - | 'property' - | 'resource' - | 'typeof' - | 'vocab' - | 'autoCapitalize' - | 'autoCorrect' - | 'autoSave' - | 'itemProp' - | 'itemScope' - | 'itemType' - | 'itemID' - | 'itemRef' - | 'results' - | 'security' - | 'unselectable' - | 'inputMode' - | 'is' - | 'aria-activedescendant' - | 'aria-atomic' - | 'aria-autocomplete' - | 'aria-busy' - | 'aria-checked' - | 'aria-colcount' - | 'aria-colindex' - | 'aria-colspan' - | 'aria-controls' - | 'aria-current' - | 'aria-describedby' - | 'aria-details' - | 'aria-disabled' - | 'aria-dropeffect' - | 'aria-errormessage' - | 'aria-expanded' - | 'aria-flowto' - | 'aria-grabbed' - | 'aria-haspopup' - | 'aria-hidden' - | 'aria-invalid' - | 'aria-keyshortcuts' - | 'aria-label' - | 'aria-labelledby' - | 'aria-level' - | 'aria-live' - | 'aria-modal' - | 'aria-multiline' - | 'aria-multiselectable' - | 'aria-orientation' - | 'aria-owns' - | 'aria-placeholder' - | 'aria-posinset' - | 'aria-pressed' - | 'aria-readonly' - | 'aria-relevant' - | 'aria-required' - | 'aria-roledescription' - | 'aria-rowcount' - | 'aria-rowindex' - | 'aria-rowspan' - | 'aria-selected' - | 'aria-setsize' - | 'aria-sort' - | 'aria-valuemax' - | 'aria-valuemin' - | 'aria-valuenow' - | 'aria-valuetext' - | 'dangerouslySetInnerHTML' - | 'onCopy' - | 'onCopyCapture' - | 'onCut' - | 'onCutCapture' - | 'onPaste' - | 'onPasteCapture' - | 'onCompositionEnd' - | 'onCompositionEndCapture' - | 'onCompositionStart' - | 'onCompositionStartCapture' - | 'onCompositionUpdate' - | 'onCompositionUpdateCapture' - | 'onFocus' - | 'onFocusCapture' - | 'onBlur' - | 'onBlurCapture' - | 'onChange' - | 'onChangeCapture' - | 'onBeforeInput' - | 'onBeforeInputCapture' - | 'onInput' - | 'onInputCapture' - | 'onReset' - | 'onResetCapture' - | 'onSubmit' - | 'onSubmitCapture' - | 'onInvalid' - | 'onInvalidCapture' - | 'onLoad' - | 'onLoadCapture' - | 'onError' - | 'onErrorCapture' - | 'onKeyDown' - | 'onKeyDownCapture' - | 'onKeyPress' - | 'onKeyPressCapture' - | 'onKeyUp' - | 'onKeyUpCapture' - | 'onAbort' - | 'onAbortCapture' - | 'onCanPlay' - | 'onCanPlayCapture' - | 'onCanPlayThrough' - | 'onCanPlayThroughCapture' - | 'onDurationChange' - | 'onDurationChangeCapture' - | 'onEmptied' - | 'onEmptiedCapture' - | 'onEncrypted' - | 'onEncryptedCapture' - | 'onEnded' - | 'onEndedCapture' - | 'onLoadedData' - | 'onLoadedDataCapture' - | 'onLoadedMetadata' - | 'onLoadedMetadataCapture' - | 'onLoadStart' - | 'onLoadStartCapture' - | 'onPause' - | 'onPauseCapture' - | 'onPlay' - | 'onPlayCapture' - | 'onPlaying' - | 'onPlayingCapture' - | 'onProgress' - | 'onProgressCapture' - | 'onRateChange' - | 'onRateChangeCapture' - | 'onSeeked' - | 'onSeekedCapture' - | 'onSeeking' - | 'onSeekingCapture' - | 'onStalled' - | 'onStalledCapture' - | 'onSuspend' - | 'onSuspendCapture' - | 'onTimeUpdate' - | 'onTimeUpdateCapture' - | 'onVolumeChange' - | 'onVolumeChangeCapture' - | 'onWaiting' - | 'onWaitingCapture' - | 'onAuxClick' - | 'onAuxClickCapture' - | 'onClick' - | 'onClickCapture' - | 'onContextMenu' - | 'onContextMenuCapture' - | 'onDoubleClick' - | 'onDoubleClickCapture' - | 'onDrag' - | 'onDragCapture' - | 'onDragEnd' - | 'onDragEndCapture' - | 'onDragEnter' - | 'onDragEnterCapture' - | 'onDragExit' - | 'onDragExitCapture' - | 'onDragLeave' - | 'onDragLeaveCapture' - | 'onDragOver' - | 'onDragOverCapture' - | 'onDragStart' - | 'onDragStartCapture' - | 'onDrop' - | 'onDropCapture' - | 'onMouseDown' - | 'onMouseDownCapture' - | 'onMouseEnter' - | 'onMouseLeave' - | 'onMouseMove' - | 'onMouseMoveCapture' - | 'onMouseOut' - | 'onMouseOutCapture' - | 'onMouseOver' - | 'onMouseOverCapture' - | 'onMouseUp' - | 'onMouseUpCapture' - | 'onSelect' - | 'onSelectCapture' - | 'onTouchCancel' - | 'onTouchCancelCapture' - | 'onTouchEnd' - | 'onTouchEndCapture' - | 'onTouchMove' - | 'onTouchMoveCapture' - | 'onTouchStart' - | 'onTouchStartCapture' - | 'onPointerDown' - | 'onPointerDownCapture' - | 'onPointerMove' - | 'onPointerMoveCapture' - | 'onPointerUp' - | 'onPointerUpCapture' - | 'onPointerCancel' - | 'onPointerCancelCapture' - | 'onPointerEnter' - | 'onPointerEnterCapture' - | 'onPointerLeave' - | 'onPointerLeaveCapture' - | 'onPointerOver' - | 'onPointerOverCapture' - | 'onPointerOut' - | 'onPointerOutCapture' - | 'onGotPointerCapture' - | 'onGotPointerCaptureCapture' - | 'onLostPointerCapture' - | 'onLostPointerCaptureCapture' - | 'onScroll' - | 'onScrollCapture' - | 'onWheel' - | 'onWheelCapture' - | 'onAnimationStart' - | 'onAnimationStartCapture' - | 'onAnimationEnd' - | 'onAnimationEndCapture' - | 'onAnimationIteration' - | 'onAnimationIterationCapture' - | 'onTransitionEnd' - | 'onTransitionEndCapture' - | 'component' - | 'variant' - | 'innerRef' - | 'download' - | 'href' - | 'hrefLang' - | 'ping' - | 'rel' - | 'target' - | 'type' - | 'referrerPolicy' - | 'noWrap' - | 'gutterBottom' - | 'paragraph' - | 'align' - | 'variantMapping' - | 'to' - | 'state' - | 'TypographyClasses' - > & - React_2.RefAttributes ->; +// @public (undocumented) +export function Link(props: LinkProps): JSX.Element; // Warning: (ae-missing-release-tag) "LinkProps" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1181,26 +544,24 @@ export type LinkProps = LinkProps_2 & // Warning: (ae-missing-release-tag) "MarkdownContent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export const MarkdownContent: ({ content, dialect }: Props_11) => JSX.Element; +export function MarkdownContent(props: Props_11): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "MissingAnnotationEmptyState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const MissingAnnotationEmptyState: ({ - annotation, -}: Props_6) => JSX.Element; +export function MissingAnnotationEmptyState(props: Props_6): JSX.Element; // Warning: (ae-missing-release-tag) "OAuthRequestDialog" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const OAuthRequestDialog: () => JSX.Element; +export function OAuthRequestDialog(_props: {}): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "OverflowTooltip" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const OverflowTooltip: (props: Props_12) => JSX.Element; +export function OverflowTooltip(props: Props_12): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "Page" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -1224,9 +585,9 @@ export const PageWithHeader: ({ // Warning: (ae-missing-release-tag) "Progress" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const Progress: ( +export function Progress( props: PropsWithChildren, -) => JSX.Element; +): JSX.Element; // Warning: (ae-missing-release-tag) "Ranker" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -1267,30 +628,18 @@ type RenderNodeProps = { // Warning: (ae-missing-release-tag) "ResponseErrorPanel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export const ResponseErrorPanel: ({ - title, - error, - defaultExpanded, -}: ErrorPanelProps) => JSX.Element; +export function ResponseErrorPanel(props: ErrorPanelProps): JSX.Element; // Warning: (ae-missing-release-tag) "RoutedTabs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const RoutedTabs: ({ routes }: { routes: SubRoute_2[] }) => JSX.Element; +export function RoutedTabs(props: { routes: SubRoute_2[] }): JSX.Element; // Warning: (ae-forgotten-export) The symbol "SelectProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "SelectComponent" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const Select: ({ - multiple, - items, - label, - placeholder, - selected, - onChange, - triggerReset, -}: SelectProps) => JSX.Element; +export function Select(props: SelectProps): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "Sidebar" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -2473,82 +1822,65 @@ export type SignInProviderConfig = { // Warning: (ae-missing-release-tag) "SimpleStepper" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const SimpleStepper: ({ - children, - elevated, - onStepChange, - activeStep, -}: PropsWithChildren) => JSX.Element; +export function SimpleStepper( + props: PropsWithChildren, +): JSX.Element; // Warning: (ae-forgotten-export) The symbol "StepProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "SimpleStepperStep" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const SimpleStepperStep: ({ - title, - children, - end, - actions, - ...muiProps -}: PropsWithChildren) => JSX.Element; +export function SimpleStepperStep( + props: PropsWithChildren, +): JSX.Element; // Warning: (ae-missing-release-tag) "StatusAborted" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const StatusAborted: (props: PropsWithChildren<{}>) => JSX.Element; +export function StatusAborted(props: PropsWithChildren<{}>): JSX.Element; // Warning: (ae-missing-release-tag) "StatusError" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const StatusError: (props: PropsWithChildren<{}>) => JSX.Element; +export function StatusError(props: PropsWithChildren<{}>): JSX.Element; // Warning: (ae-missing-release-tag) "StatusOK" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const StatusOK: (props: PropsWithChildren<{}>) => JSX.Element; +export function StatusOK(props: PropsWithChildren<{}>): JSX.Element; // Warning: (ae-missing-release-tag) "StatusPending" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const StatusPending: (props: PropsWithChildren<{}>) => JSX.Element; +export function StatusPending(props: PropsWithChildren<{}>): JSX.Element; // Warning: (ae-missing-release-tag) "StatusRunning" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const StatusRunning: (props: PropsWithChildren<{}>) => JSX.Element; +export function StatusRunning(props: PropsWithChildren<{}>): JSX.Element; // Warning: (ae-missing-release-tag) "StatusWarning" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const StatusWarning: (props: PropsWithChildren<{}>) => JSX.Element; +export function StatusWarning(props: PropsWithChildren<{}>): JSX.Element; // Warning: (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "StructuredMetadataTable" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const StructuredMetadataTable: ({ - metadata, - dense, - options, -}: Props_16) => JSX.Element; +export function StructuredMetadataTable(props: Props_16): JSX.Element; // Warning: (ae-forgotten-export) The symbol "SubvalueCellProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "SubvalueCell" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const SubvalueCell: ({ - value, - subvalue, -}: SubvalueCellProps) => JSX.Element; +export function SubvalueCell(props: SubvalueCellProps): JSX.Element; // Warning: (ae-forgotten-export) The symbol "SupportButtonProps" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "SupportButton" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const SupportButton: ({ - title, - children, -}: SupportButtonProps) => JSX.Element; +export function SupportButton(props: SupportButtonProps): JSX.Element; // Warning: (ae-missing-release-tag) "SupportConfig" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -2603,28 +1935,24 @@ export const TabbedCard: ({ onChange, }: PropsWithChildren) => JSX.Element; +// Warning: (ae-missing-release-tag) "TabbedLayout" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // Warning: (ae-missing-release-tag) "TabbedLayout" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export const TabbedLayout: { - ({ children }: PropsWithChildren<{}>): JSX.Element; - Route: (props: SubRoute) => null; -}; +export function TabbedLayout(props: PropsWithChildren<{}>): JSX.Element; + +// @public (undocumented) +export namespace TabbedLayout { + var // Warning: (ae-forgotten-export) The symbol "SubRoute" needs to be exported by the entry point index.d.ts + // + // (undocumented) + Route: (props: SubRoute) => null; +} // Warning: (ae-missing-release-tag) "Table" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export function Table({ - columns, - options, - title, - subtitle, - filters, - initialState, - emptyContent, - onStateChange, - ...props -}: TableProps): JSX.Element; +export function Table(props: TableProps): JSX.Element; // Warning: (ae-missing-release-tag) "TableColumn" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // @@ -2676,17 +2004,17 @@ export type TableState = { // Warning: (ae-missing-release-tag) "Tabs" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const Tabs: ({ tabs }: TabsProps) => JSX.Element; +export function Tabs(props: TabsProps): JSX.Element; // Warning: (ae-missing-release-tag) "TrendLine" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public (undocumented) -export const TrendLine: ( +export function TrendLine( props: SparklinesProps & Pick & { title?: string; }, -) => JSX.Element | null; +): JSX.Element | null; // Warning: (ae-forgotten-export) The symbol "SetQueryParams" needs to be exported by the entry point index.d.ts // Warning: (ae-missing-release-tag) "useQueryParamState" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) @@ -2728,19 +2056,11 @@ export const WarningIcon: IconComponent; // Warning: (ae-missing-release-tag) "WarningPanel" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal) // // @public -export const WarningPanel: ({ - severity, - title, - message, - children, - defaultExpanded, -}: WarningProps) => JSX.Element; +export function WarningPanel(props: WarningProps): JSX.Element; // Warnings were encountered during analysis: // -// src/components/CopyTextButton/CopyTextButton.d.ts:24:5 - (ae-forgotten-export) The symbol "Props" needs to be exported by the entry point index.d.ts // src/components/TabbedLayout/RoutedTabs.d.ts:9:5 - (ae-forgotten-export) The symbol "SubRoute" needs to be exported by the entry point index.d.ts -// src/components/TabbedLayout/TabbedLayout.d.ts:29:5 - (ae-forgotten-export) The symbol "SubRoute" needs to be exported by the entry point index.d.ts // src/components/Table/Table.d.ts:15:5 - (ae-forgotten-export) The symbol "SelectedFilters" needs to be exported by the entry point index.d.ts // src/layout/ErrorBoundary/ErrorBoundary.d.ts:7:5 - (ae-forgotten-export) The symbol "SlackChannel" needs to be exported by the entry point index.d.ts diff --git a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx index 495e2ea14c..f3e102d9a0 100644 --- a/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx +++ b/packages/core-components/src/components/AlertDisplay/AlertDisplay.tsx @@ -22,7 +22,7 @@ import { AlertMessage, useApi, alertApiRef } from '@backstage/core-plugin-api'; import pluralize from 'pluralize'; // TODO: improve on this and promote to a shared component for use by all apps. -export const AlertDisplay = () => { +export function AlertDisplay(_props: {}) { const [messages, setMessages] = useState>([]); const alertApi = useApi(alertApiRef); @@ -73,4 +73,4 @@ export const AlertDisplay = () => { ); -}; +} diff --git a/packages/core-components/src/components/Avatar/Avatar.tsx b/packages/core-components/src/components/Avatar/Avatar.tsx index df3c46fba7..f694365233 100644 --- a/packages/core-components/src/components/Avatar/Avatar.tsx +++ b/packages/core-components/src/components/Avatar/Avatar.tsx @@ -41,7 +41,8 @@ export type AvatarProps = { customStyles?: CSSProperties; }; -export const Avatar = ({ displayName, picture, customStyles }: AvatarProps) => { +export function Avatar(props: AvatarProps) { + const { displayName, picture, customStyles } = props; const classes = useStyles(); return ( { {displayName && extractInitials(displayName)} ); -}; +} diff --git a/packages/core-components/src/components/Button/Button.tsx b/packages/core-components/src/components/Button/Button.tsx index 6dd593d776..e52285312b 100644 --- a/packages/core-components/src/components/Button/Button.tsx +++ b/packages/core-components/src/components/Button/Button.tsx @@ -23,10 +23,19 @@ import { Link, LinkProps } from '../Link'; type Props = MaterialButtonProps & Omit; +declare function ButtonType(props: Props): JSX.Element; + /** * Thin wrapper on top of material-ui's Button component * Makes the Button to utilise react-router */ -export const Button = React.forwardRef((props, ref) => ( +const ActualButton = React.forwardRef((props, ref) => ( -)); +)) as { (props: Props): JSX.Element }; + +// TODO(Rugvip): We use this as a workaround to make the exported type be a +// function, which makes our API reference docs much nicer. +// The first type to be exported gets priority, but it will +// be thrown away when compiling to JS. +// @ts-ignore +export { ButtonType as Button, ActualButton as Button }; diff --git a/packages/core-components/src/components/CheckboxTree/CheckboxTree.tsx b/packages/core-components/src/components/CheckboxTree/CheckboxTree.tsx index 7e7155143b..695da88192 100644 --- a/packages/core-components/src/components/CheckboxTree/CheckboxTree.tsx +++ b/packages/core-components/src/components/CheckboxTree/CheckboxTree.tsx @@ -225,13 +225,8 @@ const indexer = ( }; }, {}); -export const CheckboxTree = ({ - subCategories, - label, - selected, - onChange, - triggerReset, -}: CheckboxTreeProps) => { +export function CheckboxTree(props: CheckboxTreeProps) { + const { subCategories, label, selected, onChange, triggerReset } = props; const classes = useStyles(); const [state, dispatch] = useReducer(reducer, indexer(subCategories)); @@ -355,4 +350,4 @@ export const CheckboxTree = ({ ); -}; +} diff --git a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx index a3badaad07..6417151ff4 100644 --- a/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx +++ b/packages/core-components/src/components/CodeSnippet/CodeSnippet.tsx @@ -30,14 +30,15 @@ type Props = { customStyle?: any; }; -export const CodeSnippet = ({ - text, - language, - showLineNumbers = false, - showCopyCodeButton = false, - highlightedNumbers, - customStyle, -}: Props) => { +export const CodeSnippet = (props: Props) => { + const { + text, + language, + showLineNumbers = false, + showCopyCodeButton = false, + highlightedNumbers, + customStyle, + } = props; const theme = useTheme(); const mode = theme.palette.type === 'dark' ? dark : docco; const highlightColor = theme.palette.type === 'dark' ? '#256bf3' : '#e6ffed'; diff --git a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx index cc0ecaf76f..2d3afff1dc 100644 --- a/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx +++ b/packages/core-components/src/components/CopyTextButton/CopyTextButton.tsx @@ -47,7 +47,7 @@ const defaultProps = { tooltipText: 'Text copied to clipboard', }; -export const CopyTextButton = (props: Props) => { +export function CopyTextButton(props: Props) { const { text, tooltipDelay, tooltipText } = { ...defaultProps, ...props, @@ -84,7 +84,7 @@ export const CopyTextButton = (props: Props) => { ); -}; +} // Type check for the JS files using this core component CopyTextButton.propTypes = { diff --git a/packages/core-components/src/components/CreateButton/CreateButton.tsx b/packages/core-components/src/components/CreateButton/CreateButton.tsx index 021e1b002d..1ca4fdaa97 100644 --- a/packages/core-components/src/components/CreateButton/CreateButton.tsx +++ b/packages/core-components/src/components/CreateButton/CreateButton.tsx @@ -24,7 +24,8 @@ type CreateButtonProps = { title: string; } & Partial>; -export const CreateButton = ({ title, to }: CreateButtonProps) => { +export function CreateButton(props: CreateButtonProps) { + const { title, to } = props; const isXSScreen = useMediaQuery(theme => theme.breakpoints.down('xs'), ); @@ -48,4 +49,4 @@ export const CreateButton = ({ title, to }: CreateButtonProps) => { {title} ); -}; +} diff --git a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx index 436eda614c..0d74965e7e 100644 --- a/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx +++ b/packages/core-components/src/components/DependencyGraph/DependencyGraph.tsx @@ -60,27 +60,28 @@ export type DependencyGraphProps = React.SVGProps & { const WORKSPACE_ID = 'workspace'; -export function DependencyGraph({ - edges, - nodes, - renderNode, - direction = Direction.TOP_BOTTOM, - align, - nodeMargin = 50, - edgeMargin = 10, - rankMargin = 50, - paddingX = 0, - paddingY = 0, - acyclicer, - ranker = Ranker.NETWORK_SIMPLEX, - labelPosition = LabelPosition.RIGHT, - labelOffset = 10, - edgeRanks = 1, - edgeWeight = 1, - renderLabel, - defs, - ...svgProps -}: DependencyGraphProps) { +export function DependencyGraph(props: DependencyGraphProps) { + const { + edges, + nodes, + renderNode, + direction = Direction.TOP_BOTTOM, + align, + nodeMargin = 50, + edgeMargin = 10, + rankMargin = 50, + paddingX = 0, + paddingY = 0, + acyclicer, + ranker = Ranker.NETWORK_SIMPLEX, + labelPosition = LabelPosition.RIGHT, + labelOffset = 10, + edgeRanks = 1, + edgeWeight = 1, + renderLabel, + defs, + ...svgProps + } = props; const theme: BackstageTheme = useTheme(); const [containerWidth, setContainerWidth] = React.useState(100); const [containerHeight, setContainerHeight] = React.useState(100); diff --git a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx index 6c4e43811d..cc20a49ad6 100644 --- a/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx +++ b/packages/core-components/src/components/DismissableBanner/DismissableBanner.tsx @@ -70,12 +70,8 @@ type Props = { fixed?: boolean; }; -export const DismissableBanner = ({ - variant, - message, - id, - fixed = false, -}: Props) => { +export const DismissableBanner = (props: Props) => { + const { variant, message, id, fixed = false } = props; const classes = useStyles(); const storageApi = useApi(storageApiRef); const notificationsStore = storageApi.forBucket('notifications'); diff --git a/packages/core-components/src/components/EmptyState/EmptyState.tsx b/packages/core-components/src/components/EmptyState/EmptyState.tsx index d916ad9a61..b2f5eca65e 100644 --- a/packages/core-components/src/components/EmptyState/EmptyState.tsx +++ b/packages/core-components/src/components/EmptyState/EmptyState.tsx @@ -38,7 +38,8 @@ type Props = { action?: JSX.Element; }; -export const EmptyState = ({ title, description, missing, action }: Props) => { +export function EmptyState(props: Props) { + const { title, description, missing, action } = props; const classes = useStyles(); return ( { ); -}; +} diff --git a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx index d477494964..17061fa237 100644 --- a/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx +++ b/packages/core-components/src/components/EmptyState/MissingAnnotationEmptyState.tsx @@ -45,7 +45,8 @@ const useStyles = makeStyles(theme => ({ }, })); -export const MissingAnnotationEmptyState = ({ annotation }: Props) => { +export function MissingAnnotationEmptyState(props: Props) { + const { annotation } = props; const classes = useStyles(); const description = ( <> @@ -84,4 +85,4 @@ export const MissingAnnotationEmptyState = ({ annotation }: Props) => { } /> ); -}; +} diff --git a/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx b/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx index f9996b9b1f..309f2b447a 100644 --- a/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx +++ b/packages/core-components/src/components/ErrorPanel/ErrorPanel.tsx @@ -92,12 +92,8 @@ export type ErrorPanelProps = { /** * Renders a warning panel as the effect of an error. */ -export const ErrorPanel = ({ - title, - error, - defaultExpanded, - children, -}: PropsWithChildren) => { +export function ErrorPanel(props: PropsWithChildren) { + const { title, error, defaultExpanded, children } = props; return ( ); -}; +} diff --git a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx index 9af6c30c3b..9459c3cbe0 100644 --- a/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx +++ b/packages/core-components/src/components/FeatureDiscovery/FeatureCalloutCircular.tsx @@ -93,12 +93,8 @@ type Placement = { textWidth: number; }; -export const FeatureCalloutCircular = ({ - featureId, - title, - description, - children, -}: PropsWithChildren) => { +export function FeatureCalloutCircular(props: PropsWithChildren) { + const { featureId, title, description, children } = props; const { show, hide } = useShowCallout(featureId); const portalElement = usePortal('core.callout'); const wrapperRef = useRef(null); @@ -196,4 +192,4 @@ export const FeatureCalloutCircular = ({ )} ); -}; +} diff --git a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx index afceda165e..7e49537492 100644 --- a/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx +++ b/packages/core-components/src/components/HeaderIconLinkRow/HeaderIconLinkRow.tsx @@ -31,7 +31,8 @@ type Props = { links: IconLinkVerticalProps[]; }; -export const HeaderIconLinkRow = ({ links }: Props) => { +export function HeaderIconLinkRow(props: Props) { + const { links } = props; const classes = useStyles(); return ( ); -}; +} diff --git a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx index f5c45d3eb0..a3d16bc4ec 100644 --- a/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx +++ b/packages/core-components/src/components/HorizontalScrollGrid/HorizontalScrollGrid.tsx @@ -181,7 +181,7 @@ function useSmoothScroll( return setScrollTarget; } -export const HorizontalScrollGrid = (props: PropsWithChildren) => { +export function HorizontalScrollGrid(props: PropsWithChildren) { const { scrollStep = 100, scrollSpeed = 50, @@ -244,4 +244,4 @@ export const HorizontalScrollGrid = (props: PropsWithChildren) => { )} ); -}; +} diff --git a/packages/core-components/src/components/Lifecycle/Lifecycle.tsx b/packages/core-components/src/components/Lifecycle/Lifecycle.tsx index c72ea46f1b..ef451ac1b0 100644 --- a/packages/core-components/src/components/Lifecycle/Lifecycle.tsx +++ b/packages/core-components/src/components/Lifecycle/Lifecycle.tsx @@ -38,7 +38,7 @@ const useStyles = makeStyles({ }, }); -export const Lifecycle = (props: Props) => { +export function Lifecycle(props: Props) { const classes = useStyles(props); const { shorthand, alpha } = props; return shorthand ? ( @@ -53,4 +53,4 @@ export const Lifecycle = (props: Props) => { {alpha ? 'Alpha' : 'Beta'} ); -}; +} diff --git a/packages/core-components/src/components/Link/Link.tsx b/packages/core-components/src/components/Link/Link.tsx index 7853c4f52f..0d301dccf9 100644 --- a/packages/core-components/src/components/Link/Link.tsx +++ b/packages/core-components/src/components/Link/Link.tsx @@ -31,11 +31,13 @@ export type LinkProps = MaterialLinkProps & component?: ElementType; }; +declare function LinkType(props: LinkProps): JSX.Element; + /** * Thin wrapper on top of material-ui's Link component * Makes the Link to utilise react-router */ -export const Link = React.forwardRef((props, ref) => { +const ActualLink = React.forwardRef((props, ref) => { const to = String(props.to); const external = isExternalUri(to); const newWindow = external && !!/^https?:/.exec(to); @@ -52,3 +54,10 @@ export const Link = React.forwardRef((props, ref) => { ); }); + +// TODO(Rugvip): We use this as a workaround to make the exported type be a +// function, which makes our API reference docs much nicer. +// The first type to be exported gets priority, but it will +// be thrown away when compiling to JS. +// @ts-ignore +export { LinkType as Link, ActualLink as Link }; diff --git a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx index 296df22ecd..d2930cbf5d 100644 --- a/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx +++ b/packages/core-components/src/components/MarkdownContent/MarkdownContent.tsx @@ -76,7 +76,8 @@ const renderers = { * Renders markdown with the default dialect [gfm - GitHub flavored Markdown](https://github.github.com/gfm/) to backstage theme styled HTML. * If you just want to render to plain [CommonMark](https://commonmark.org/), set the dialect to `'common-mark'` */ -export const MarkdownContent = ({ content, dialect = 'gfm' }: Props) => { +export function MarkdownContent(props: Props) { + const { content, dialect = 'gfm' } = props; const classes = useStyles(); return ( { renderers={renderers} /> ); -}; +} diff --git a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx index 687e4211bf..669b9a02f5 100644 --- a/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx +++ b/packages/core-components/src/components/OAuthRequestDialog/OAuthRequestDialog.tsx @@ -41,7 +41,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export const OAuthRequestDialog = () => { +export function OAuthRequestDialog(_props: {}) { const classes = useStyles(); const [busy, setBusy] = useState(false); const oauthRequestApi = useApi(oauthRequestApiRef); @@ -83,4 +83,4 @@ export const OAuthRequestDialog = () => { ); -}; +} diff --git a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx index 1be7ebc7ed..fbb1537847 100644 --- a/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx +++ b/packages/core-components/src/components/OverflowTooltip/OverflowTooltip.tsx @@ -32,7 +32,7 @@ const useStyles = makeStyles({ }, }); -export const OverflowTooltip = (props: Props) => { +export function OverflowTooltip(props: Props) { const [hover, setHover] = useState(false); const classes = useStyles(); @@ -54,4 +54,4 @@ export const OverflowTooltip = (props: Props) => { /> ); -}; +} diff --git a/packages/core-components/src/components/Progress/Progress.tsx b/packages/core-components/src/components/Progress/Progress.tsx index 68dcb91785..00ad532b5e 100644 --- a/packages/core-components/src/components/Progress/Progress.tsx +++ b/packages/core-components/src/components/Progress/Progress.tsx @@ -17,7 +17,7 @@ import React, { useState, useEffect, PropsWithChildren } from 'react'; import { LinearProgress, LinearProgressProps } from '@material-ui/core'; -export const Progress = (props: PropsWithChildren) => { +export function Progress(props: PropsWithChildren) { const [isVisible, setIsVisible] = useState(false); useEffect(() => { @@ -30,4 +30,4 @@ export const Progress = (props: PropsWithChildren) => { ) : (
); -}; +} diff --git a/packages/core-components/src/components/ProgressBars/Gauge.tsx b/packages/core-components/src/components/ProgressBars/Gauge.tsx index 46948d4af6..3b31f64fe7 100644 --- a/packages/core-components/src/components/ProgressBars/Gauge.tsx +++ b/packages/core-components/src/components/ProgressBars/Gauge.tsx @@ -77,7 +77,7 @@ export function getProgressColor( return palette.status.ok; } -export const Gauge = (props: Props) => { +export function Gauge(props: Props) { const classes = useStyles(props); const theme = useTheme(); const { value, fractional, inverse, unit, max } = { @@ -103,4 +103,4 @@ export const Gauge = (props: Props) => {
); -}; +} diff --git a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx index 39248b1786..0a603ea991 100644 --- a/packages/core-components/src/components/ProgressBars/GaugeCard.tsx +++ b/packages/core-components/src/components/ProgressBars/GaugeCard.tsx @@ -37,7 +37,7 @@ const useStyles = makeStyles({ }, }); -export const GaugeCard = (props: Props) => { +export function GaugeCard(props: Props) { const classes = useStyles(props); const { title, subheader, progress, inverse, deepLink, variant } = props; @@ -53,4 +53,4 @@ export const GaugeCard = (props: Props) => { ); -}; +} diff --git a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx index d733cb2eae..cf8c022852 100644 --- a/packages/core-components/src/components/ProgressBars/LinearGauge.tsx +++ b/packages/core-components/src/components/ProgressBars/LinearGauge.tsx @@ -28,7 +28,8 @@ type Props = { value: number; }; -export const LinearGauge = ({ value }: Props) => { +export function LinearGauge(props: Props) { + const { value } = props; const theme = useTheme(); if (isNaN(value)) { return null; @@ -50,4 +51,4 @@ export const LinearGauge = ({ value }: Props) => { ); -}; +} diff --git a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx index ccfb706bf9..9f25e8290f 100644 --- a/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx +++ b/packages/core-components/src/components/ResponseErrorPanel/ResponseErrorPanel.tsx @@ -39,11 +39,8 @@ const useStyles = makeStyles(theme => ({ * Has special treatment for ResponseError errors, to display rich * server-provided information about what happened. */ -export const ResponseErrorPanel = ({ - title, - error, - defaultExpanded, -}: ErrorPanelProps) => { +export function ResponseErrorPanel(props: ErrorPanelProps) { + const { title, error, defaultExpanded } = props; const classes = useStyles(); if (error.name !== 'ResponseError') { @@ -93,4 +90,4 @@ export const ResponseErrorPanel = ({ ); -}; +} diff --git a/packages/core-components/src/components/Select/Select.tsx b/packages/core-components/src/components/Select/Select.tsx index b4512b3562..ae14545b29 100644 --- a/packages/core-components/src/components/Select/Select.tsx +++ b/packages/core-components/src/components/Select/Select.tsx @@ -106,15 +106,16 @@ export type SelectProps = { triggerReset?: boolean; }; -export const SelectComponent = ({ - multiple, - items, - label, - placeholder, - selected, - onChange, - triggerReset, -}: SelectProps) => { +export function SelectComponent(props: SelectProps) { + const { + multiple, + items, + label, + placeholder, + selected, + onChange, + triggerReset, + } = props; const classes = useStyles(); const [value, setValue] = useState( selected || (multiple ? [] : ''), @@ -228,4 +229,4 @@ export const SelectComponent = ({ ); -}; +} diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx index 46b2ce551a..9ffb63c085 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepper.tsx @@ -47,12 +47,8 @@ export interface StepperProps { activeStep?: number; } -export const SimpleStepper = ({ - children, - elevated, - onStepChange, - activeStep = 0, -}: PropsWithChildren) => { +export function SimpleStepper(props: PropsWithChildren) { + const { children, elevated, onStepChange, activeStep = 0 } = props; const [stepIndex, setStepIndex] = useState(activeStep); const [stepHistory, setStepHistory] = useState([0]); @@ -95,4 +91,4 @@ export const SimpleStepper = ({ {stepIndex >= Children.count(children) - 1 && endStep} ); -}; +} diff --git a/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx b/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx index 51fcee1f71..39383b934b 100644 --- a/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx +++ b/packages/core-components/src/components/SimpleStepper/SimpleStepperStep.tsx @@ -30,13 +30,8 @@ const useStyles = makeStyles(theme => ({ }, })); -export const SimpleStepperStep = ({ - title, - children, - end, - actions, - ...muiProps -}: PropsWithChildren) => { +export function SimpleStepperStep(props: PropsWithChildren) { + const { title, children, end, actions, ...muiProps } = props; const classes = useStyles(); // The end step is not a part of the stepper @@ -58,4 +53,4 @@ export const SimpleStepperStep = ({ ); -}; +} diff --git a/packages/core-components/src/components/Status/Status.tsx b/packages/core-components/src/components/Status/Status.tsx index 0b370a1397..2b2d40dee3 100644 --- a/packages/core-components/src/components/Status/Status.tsx +++ b/packages/core-components/src/components/Status/Status.tsx @@ -63,7 +63,7 @@ const useStyles = makeStyles(theme => ({ }, })); -export const StatusOK = (props: PropsWithChildren<{}>) => { +export function StatusOK(props: PropsWithChildren<{}>) { const classes = useStyles(props); return ( ) => { {...props} /> ); -}; +} -export const StatusWarning = (props: PropsWithChildren<{}>) => { +export function StatusWarning(props: PropsWithChildren<{}>) { const classes = useStyles(props); return ( ) => { {...props} /> ); -}; +} -export const StatusError = (props: PropsWithChildren<{}>) => { +export function StatusError(props: PropsWithChildren<{}>) { const classes = useStyles(props); return ( ) => { {...props} /> ); -}; +} -export const StatusPending = (props: PropsWithChildren<{}>) => { +export function StatusPending(props: PropsWithChildren<{}>) { const classes = useStyles(props); return ( ) => { {...props} /> ); -}; +} -export const StatusRunning = (props: PropsWithChildren<{}>) => { +export function StatusRunning(props: PropsWithChildren<{}>) { const classes = useStyles(props); return ( ) => { {...props} /> ); -}; +} -export const StatusAborted = (props: PropsWithChildren<{}>) => { +export function StatusAborted(props: PropsWithChildren<{}>) { const classes = useStyles(props); return ( ) => { {...props} /> ); -}; +} diff --git a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx index 9b08123d1b..22a1a43b69 100644 --- a/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx +++ b/packages/core-components/src/components/StructuredMetadataTable/StructuredMetadataTable.tsx @@ -153,11 +153,8 @@ type Props = { options?: any; }; -export const StructuredMetadataTable = ({ - metadata, - dense = true, - options, -}: Props) => { +export function StructuredMetadataTable(props: Props) { + const { metadata, dense = true, options } = props; const metadataItems = mapToItems(metadata, options || {}); return {metadataItems}; -}; +} diff --git a/packages/core-components/src/components/SupportButton/SupportButton.tsx b/packages/core-components/src/components/SupportButton/SupportButton.tsx index 22ec5cf47e..8076636654 100644 --- a/packages/core-components/src/components/SupportButton/SupportButton.tsx +++ b/packages/core-components/src/components/SupportButton/SupportButton.tsx @@ -80,7 +80,8 @@ const SupportListItem = ({ item }: { item: SupportItem }) => { ); }; -export const SupportButton = ({ title, children }: SupportButtonProps) => { +export function SupportButton(props: SupportButtonProps) { + const { title, children } = props; const { items } = useSupportConfig(); const [popoverOpen, setPopoverOpen] = useState(false); @@ -160,4 +161,4 @@ export const SupportButton = ({ title, children }: SupportButtonProps) => { ); -}; +} diff --git a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx index 52a2c29e2d..2a65c8ffc8 100644 --- a/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx +++ b/packages/core-components/src/components/TabbedLayout/RoutedTabs.tsx @@ -47,7 +47,8 @@ export function useSelectedSubRoute(subRoutes: SubRoute[]): { }; } -export const RoutedTabs = ({ routes }: { routes: SubRoute[] }) => { +export function RoutedTabs(props: { routes: SubRoute[] }) { + const { routes } = props; const navigate = useNavigate(); const { index, route, element } = useSelectedSubRoute(routes); const headerTabs = useMemo( @@ -80,4 +81,4 @@ export const RoutedTabs = ({ routes }: { routes: SubRoute[] }) => { ); -}; +} diff --git a/packages/core-components/src/components/TabbedLayout/TabbedLayout.tsx b/packages/core-components/src/components/TabbedLayout/TabbedLayout.tsx index f7671928f2..03f012b78f 100644 --- a/packages/core-components/src/components/TabbedLayout/TabbedLayout.tsx +++ b/packages/core-components/src/components/TabbedLayout/TabbedLayout.tsx @@ -82,10 +82,10 @@ export function createSubRoutesFromChildren( * * ``` */ -export const TabbedLayout = ({ children }: PropsWithChildren<{}>) => { - const routes = createSubRoutesFromChildren(children); +export function TabbedLayout(props: PropsWithChildren<{}>) { + const routes = createSubRoutesFromChildren(props.children); return ; -}; +} TabbedLayout.Route = Route; diff --git a/packages/core-components/src/components/Table/SubvalueCell.tsx b/packages/core-components/src/components/Table/SubvalueCell.tsx index 1dab2e1f49..fd7d3fd9fa 100644 --- a/packages/core-components/src/components/Table/SubvalueCell.tsx +++ b/packages/core-components/src/components/Table/SubvalueCell.tsx @@ -33,7 +33,8 @@ type SubvalueCellProps = { subvalue: React.ReactNode; }; -export const SubvalueCell = ({ value, subvalue }: SubvalueCellProps) => { +export function SubvalueCell(props: SubvalueCellProps) { + const { value, subvalue } = props; const classes = useSubvalueCellStyles(); return ( @@ -42,4 +43,4 @@ export const SubvalueCell = ({ value, subvalue }: SubvalueCellProps) => {
{subvalue}
); -}; +} diff --git a/packages/core-components/src/components/Table/Table.tsx b/packages/core-components/src/components/Table/Table.tsx index 22d8bff014..edc5fd33ce 100644 --- a/packages/core-components/src/components/Table/Table.tsx +++ b/packages/core-components/src/components/Table/Table.tsx @@ -263,21 +263,21 @@ export function TableToolbar(toolbarProps: { ); } -export function Table({ - columns, - options, - title, - subtitle, - filters, - initialState, - emptyContent, - onStateChange, - ...props -}: TableProps) { +export function Table(props: TableProps) { + const { + data, + columns, + options, + title, + subtitle, + filters, + initialState, + emptyContent, + onStateChange, + ...restProps + } = props; const tableClasses = useTableStyles(); - const { data, ...propsWithoutData } = props; - const theme = useTheme(); const calculatedInitialState = { ...defaultInitialState, ...initialState }; @@ -495,7 +495,7 @@ export function Table({ } data={typeof data === 'function' ? data : tableData} style={{ width: '100%' }} - {...propsWithoutData} + {...restProps} /> ); diff --git a/packages/core-components/src/components/Tabs/Tabs.tsx b/packages/core-components/src/components/Tabs/Tabs.tsx index ec9fecaca4..844f54a543 100644 --- a/packages/core-components/src/components/Tabs/Tabs.tsx +++ b/packages/core-components/src/components/Tabs/Tabs.tsx @@ -58,7 +58,8 @@ const useStyles = makeStyles(theme => ({ }, })); -export const Tabs = ({ tabs }: TabsProps) => { +export function Tabs(props: TabsProps) { + const { tabs } = props; const classes = useStyles(); const [value, setValue] = useState([0, 0]); // [selectedChunkedNavIndex, selectedIndex] const [navIndex, setNavIndex] = useState(0); @@ -160,4 +161,4 @@ export const Tabs = ({ tabs }: TabsProps) => { )} ); -}; +} diff --git a/packages/core-components/src/components/TrendLine/TrendLine.tsx b/packages/core-components/src/components/TrendLine/TrendLine.tsx index 0cbc2ca9d7..cb44d2b36b 100644 --- a/packages/core-components/src/components/TrendLine/TrendLine.tsx +++ b/packages/core-components/src/components/TrendLine/TrendLine.tsx @@ -32,10 +32,10 @@ function color(data: number[], theme: BackstageTheme): string | undefined { return theme.palette.status.error; } -export const TrendLine = ( +export function TrendLine( props: SparklinesProps & Pick & { title?: string }, -) => { +) { const theme = useTheme(); if (!props.data) return null; @@ -45,4 +45,4 @@ export const TrendLine = ( ); -}; +} diff --git a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx index e6188172b7..536ab066b3 100644 --- a/packages/core-components/src/components/WarningPanel/WarningPanel.tsx +++ b/packages/core-components/src/components/WarningPanel/WarningPanel.tsx @@ -137,13 +137,14 @@ const capitalize = (s: string) => { * @param {Object} [children] Objects to provide context, such as a stack trace or detailed error reporting. * Will be available inside an unfolded accordion. */ -export const WarningPanel = ({ - severity = 'warning', - title, - message, - children, - defaultExpanded, -}: WarningProps) => { +export function WarningPanel(props: WarningProps) { + const { + severity = 'warning', + title, + message, + children, + defaultExpanded, + } = props; const classes = useStyles({ severity }); // If no severity or title provided, the heading will read simply "Warning" @@ -184,4 +185,4 @@ export const WarningPanel = ({ )} ); -}; +}