@atlaskit/forge-react-types 0.34.9 → 0.34.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/forge-react-types
 
+## 0.34.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.34.10
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.34.9
 
 ### Patch Changes

package/dist/cjs/components/__generated__/BoxProps.codegen.js

@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::56b2319e454532f63dda1391dca0f985>>
+ * @codegen <<SignedSource::5953057bca93305790983ebf1513e471>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::d7d66f07c0c79c170b02c923cdeb8551>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::1b547198cbfceadd8838222c33bbda26>>
  */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 
@@ -169,4 +169,8 @@ var xcssValidator = makeXCSSValidator({
   position: {
     supportedValues: ['relative', 'static']
   }
-});
+});
+
+/**
+ * A box is a generic container that provides managed access to design tokens.
+ */

package/dist/es2019/components/__generated__/BoxProps.codegen.js

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::56b2319e454532f63dda1391dca0f985>>
+ * @codegen <<SignedSource::5953057bca93305790983ebf1513e471>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::d7d66f07c0c79c170b02c923cdeb8551>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::1b547198cbfceadd8838222c33bbda26>>
  */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 
@@ -165,4 +165,8 @@ const xcssValidator = makeXCSSValidator({
     supportedValues: ['relative', 'static']
   }
 });
+
+/**
+ * A box is a generic container that provides managed access to design tokens.
+ */
 export {};

package/dist/esm/components/__generated__/BoxProps.codegen.js

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::56b2319e454532f63dda1391dca0f985>>
+ * @codegen <<SignedSource::5953057bca93305790983ebf1513e471>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::d7d66f07c0c79c170b02c923cdeb8551>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::1b547198cbfceadd8838222c33bbda26>>
  */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 
@@ -165,4 +165,8 @@ var xcssValidator = makeXCSSValidator({
     supportedValues: ['relative', 'static']
   }
 });
+
+/**
+ * A box is a generic container that provides managed access to design tokens.
+ */
 export {};

package/dist/types/components/__generated__/AdfRendererProps.codegen.d.ts

@@ -3,11 +3,37 @@
  *
  * Extract component prop types from UIKit 2 components - AdfRendererProps
  *
- * @codegen <<SignedSource::4df2177e43ce459eb2e5e90a45b6ae46>>
+ * @codegen <<SignedSource::5e5e266275ea97ba9ead9f2dca647d84>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/adfrenderer/index.tsx <<SignedSource::cdc7d14a5256e848ce024721e5383e71>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/adfrenderer/index.tsx <<SignedSource::12eb3f93e6fda477a20a6813ed9107ac>>
  */
 import { type RendererProps } from '@atlaskit/renderer';
+import type { DocNode } from '@atlaskit/adf-schema';
 export type AdfRendererProps = RendererProps & {
+    /**
+     * An ADF document to render
+     *
+     * @type [DocNode](https://developer.atlassian.com/cloud/jira/platform/apis/document/nodes/doc/)
+     */
+    document: DocNode;
     documentWithoutMedia?: RendererProps['document'];
+    /**
+     * A function to determine behaviour for handling unsupported nodes:
+     * - Return a new Node to replace the unsupported one
+     * - Return false to remove the node entirely
+     * - Return undefined to leave the node as-is (default behaviour)
+     *
+     * @type [Visitor](https://bitbucket.org/atlassian/atlassian-frontend-mirror/src/master/editor/adf-utils/src/types/index.ts)
+     */
+    replaceUnsupportedNode?: Function;
 };
+/**
+ * The AdfRenderer component provides a way to render a valid ADF document, using the same renderer that Atlassian uses internally to render ADF content in Confluence pages, Jira work items, and so on.
+ * It allows you to replace node types that are unsupported in the context of a Forge app with replacement content, or remove them entirely.
+ * See [Atlassian Document Format](https://developer.atlassian.com/cloud/jira/platform/apis/document/structure/) for information on valid nodes.
+ *
+ * This component uses [@atlaskit/renderer](https://www.npmjs.com/package/@atlaskit/renderer) under the hood.
+ *
+ * Visit [Renderer editor](https://atlaskit.atlassian.com/examples/editor/renderer/basic) for a comprehensive list of different ADF document examples
+ */
+export type TAdfRenderer<T> = (props: AdfRendererProps) => T;

package/dist/types/components/__generated__/BadgeProps.codegen.d.ts

@@ -3,12 +3,24 @@
  *
  * Extract component prop types from UIKit 2 components - BadgeProps
  *
- * @codegen <<SignedSource::673f5e6a8adc5b98f8bcb1a8de0644ef>>
+ * @codegen <<SignedSource::be50537eb7e4a631ef0c0e1018412e29>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::2713f460c0b17d55cf5200b4e629a006>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::d5b0fcebb6993614e6df8397ce50002d>>
  */
 import React from 'react';
 import PlatformBadge from '@atlaskit/badge';
-type PlatformBadgeProps = React.ComponentProps<typeof PlatformBadge>;
+type _PlatformBadgeProps = React.ComponentProps<typeof PlatformBadge>;
+export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
+    /**
+     * The value displayed within the badge. A badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
+     *
+     * @type string | number
+     */
+    children?: _PlatformBadgeProps['children'];
+};
 export type BadgeProps = Pick<PlatformBadgeProps, 'appearance' | 'children' | 'max' | 'testId'>;
+/**
+ * A badge is a visual indicator for numeric values such as tallies and scores.
+ */
+export type TBadge<T> = (props: BadgeProps) => T;
 export {};

package/dist/types/components/__generated__/BoxProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::56b2319e454532f63dda1391dca0f985>>
+ * @codegen <<SignedSource::5953057bca93305790983ebf1513e471>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::d7d66f07c0c79c170b02c923cdeb8551>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::1b547198cbfceadd8838222c33bbda26>>
  */
 import React from 'react';
 import { Box as PlatformBox } from '@atlaskit/primitives';
@@ -2132,6 +2132,76 @@ declare const xcssValidator: (styleObj: SafeCSSObject<keyof CSSProperties, keyof
 }>;
 type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
 type XCSSProp = ReturnType<typeof xcssValidator>;
-export type BoxProps = Pick<PlatformBoxProps, 'padding' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'backgroundColor' | 'children' | 'ref' | 'testId' | 'role'> & {
+export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
+    /**
+     * A shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    padding?: PlatformBoxProps['padding'];
+    /**
+     * The logical block start and end padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingBlock?: PlatformBoxProps['paddingBlock'];
+    /**
+     * The logical block start padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingBlockStart?: PlatformBoxProps['paddingBlockStart'];
+    /**
+     * The logical block end padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingBlockEnd?: PlatformBoxProps['paddingBlockEnd'];
+    /**
+     * The logical inline start and end padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingInline?: PlatformBoxProps['paddingInline'];
+    /**
+     * The logical inline end padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingInlineEnd?: PlatformBoxProps['paddingInlineEnd'];
+    /**
+     * The logical inline start padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingInlineStart?: PlatformBoxProps['paddingInlineStart'];
+    /**
+     * A token alias for background color. See: [Design tokens](https://atlassian.design/components/tokens/all-tokens)
+     * for a list of available colors.
+     *
+     * When the background color is set to a surface token, the current surface CSS variable
+     * will also be set to this value in the `Box` styles.
+     *
+     * @type [Background color tokens](https://atlassian.design/components/tokens/all-tokens#color-background)
+     */
+    backgroundColor?: PlatformBoxProps['backgroundColor'];
+    /**
+     * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
+     * For a list of supported style properties on this component, see [here](/platform/forge/ui-kit/components/xcss).
+     *
+     * @type XCSSProp
+     */
     xcss?: XCSSProp;
+    /**
+     * @type string
+     */
+    role?: PlatformBoxProps['role'];
+    /**
+     * @type ForgeComponent
+     */
+    children?: PlatformBoxProps['children'];
 };
+/**
+ * A box is a generic container that provides managed access to design tokens.
+ */
+export type TBox<T> = (props: BoxProps) => T;

package/dist/types/components/__generated__/index.d.ts

@@ -1,6 +1,6 @@
-export type { BadgeProps } from './BadgeProps.codegen';
+export type { BadgeProps, TBadge } from './BadgeProps.codegen';
 export type { BleedProps } from './BleedProps.codegen';
-export type { BoxProps } from './BoxProps.codegen';
+export type { BoxProps, TBox } from './BoxProps.codegen';
 export type { ButtonGroupProps } from './ButtonGroupProps.codegen';
 export type { ButtonProps } from './ButtonProps.codegen';
 export type { CheckboxProps } from './CheckboxProps.codegen';
@@ -58,4 +58,4 @@ export type { ToggleProps } from './ToggleProps.codegen';
 export type { TooltipProps } from './TooltipProps.codegen';
 export type { ValidMessageProps } from './ValidMessageProps.codegen';
 export type { PopupProps } from './PopupProps.codegen';
-export type { AdfRendererProps } from './AdfRendererProps.codegen';
+export type { AdfRendererProps, TAdfRenderer } from './AdfRendererProps.codegen';

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
-export type { AdfRendererProps, BadgeProps, BleedProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, } from './components/__generated__';
+export type { AdfRendererProps, BadgeProps, BleedProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, TBadge, TBox, TAdfRenderer, } from './components/__generated__';
 export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, LineChartProps, SingleValueChartProps, PieChartProps, } from './components/charts';
 export type { ChartColorTokens } from './types';

package/dist/types-ts4.5/components/__generated__/AdfRendererProps.codegen.d.ts

@@ -3,11 +3,37 @@
  *
  * Extract component prop types from UIKit 2 components - AdfRendererProps
  *
- * @codegen <<SignedSource::4df2177e43ce459eb2e5e90a45b6ae46>>
+ * @codegen <<SignedSource::5e5e266275ea97ba9ead9f2dca647d84>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/adfrenderer/index.tsx <<SignedSource::cdc7d14a5256e848ce024721e5383e71>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/adfrenderer/index.tsx <<SignedSource::12eb3f93e6fda477a20a6813ed9107ac>>
  */
 import { type RendererProps } from '@atlaskit/renderer';
+import type { DocNode } from '@atlaskit/adf-schema';
 export type AdfRendererProps = RendererProps & {
+    /**
+     * An ADF document to render
+     *
+     * @type [DocNode](https://developer.atlassian.com/cloud/jira/platform/apis/document/nodes/doc/)
+     */
+    document: DocNode;
     documentWithoutMedia?: RendererProps['document'];
+    /**
+     * A function to determine behaviour for handling unsupported nodes:
+     * - Return a new Node to replace the unsupported one
+     * - Return false to remove the node entirely
+     * - Return undefined to leave the node as-is (default behaviour)
+     *
+     * @type [Visitor](https://bitbucket.org/atlassian/atlassian-frontend-mirror/src/master/editor/adf-utils/src/types/index.ts)
+     */
+    replaceUnsupportedNode?: Function;
 };
+/**
+ * The AdfRenderer component provides a way to render a valid ADF document, using the same renderer that Atlassian uses internally to render ADF content in Confluence pages, Jira work items, and so on.
+ * It allows you to replace node types that are unsupported in the context of a Forge app with replacement content, or remove them entirely.
+ * See [Atlassian Document Format](https://developer.atlassian.com/cloud/jira/platform/apis/document/structure/) for information on valid nodes.
+ *
+ * This component uses [@atlaskit/renderer](https://www.npmjs.com/package/@atlaskit/renderer) under the hood.
+ *
+ * Visit [Renderer editor](https://atlaskit.atlassian.com/examples/editor/renderer/basic) for a comprehensive list of different ADF document examples
+ */
+export type TAdfRenderer<T> = (props: AdfRendererProps) => T;

package/dist/types-ts4.5/components/__generated__/BadgeProps.codegen.d.ts

@@ -3,12 +3,24 @@
  *
  * Extract component prop types from UIKit 2 components - BadgeProps
  *
- * @codegen <<SignedSource::673f5e6a8adc5b98f8bcb1a8de0644ef>>
+ * @codegen <<SignedSource::be50537eb7e4a631ef0c0e1018412e29>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::2713f460c0b17d55cf5200b4e629a006>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::d5b0fcebb6993614e6df8397ce50002d>>
  */
 import React from 'react';
 import PlatformBadge from '@atlaskit/badge';
-type PlatformBadgeProps = React.ComponentProps<typeof PlatformBadge>;
+type _PlatformBadgeProps = React.ComponentProps<typeof PlatformBadge>;
+export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
+    /**
+     * The value displayed within the badge. A badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
+     *
+     * @type string | number
+     */
+    children?: _PlatformBadgeProps['children'];
+};
 export type BadgeProps = Pick<PlatformBadgeProps, 'appearance' | 'children' | 'max' | 'testId'>;
+/**
+ * A badge is a visual indicator for numeric values such as tallies and scores.
+ */
+export type TBadge<T> = (props: BadgeProps) => T;
 export {};

package/dist/types-ts4.5/components/__generated__/BoxProps.codegen.d.ts

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::56b2319e454532f63dda1391dca0f985>>
+ * @codegen <<SignedSource::5953057bca93305790983ebf1513e471>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::d7d66f07c0c79c170b02c923cdeb8551>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::1b547198cbfceadd8838222c33bbda26>>
  */
 import React from 'react';
 import { Box as PlatformBox } from '@atlaskit/primitives';
@@ -2132,6 +2132,76 @@ declare const xcssValidator: (styleObj: SafeCSSObject<keyof CSSProperties, keyof
 }>;
 type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
 type XCSSProp = ReturnType<typeof xcssValidator>;
-export type BoxProps = Pick<PlatformBoxProps, 'padding' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'backgroundColor' | 'children' | 'ref' | 'testId' | 'role'> & {
+export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
+    /**
+     * A shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    padding?: PlatformBoxProps['padding'];
+    /**
+     * The logical block start and end padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingBlock?: PlatformBoxProps['paddingBlock'];
+    /**
+     * The logical block start padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingBlockStart?: PlatformBoxProps['paddingBlockStart'];
+    /**
+     * The logical block end padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingBlockEnd?: PlatformBoxProps['paddingBlockEnd'];
+    /**
+     * The logical inline start and end padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingInline?: PlatformBoxProps['paddingInline'];
+    /**
+     * The logical inline end padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingInlineEnd?: PlatformBoxProps['paddingInlineEnd'];
+    /**
+     * The logical inline start padding of an element.
+     *
+     * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+     */
+    paddingInlineStart?: PlatformBoxProps['paddingInlineStart'];
+    /**
+     * A token alias for background color. See: [Design tokens](https://atlassian.design/components/tokens/all-tokens)
+     * for a list of available colors.
+     *
+     * When the background color is set to a surface token, the current surface CSS variable
+     * will also be set to this value in the `Box` styles.
+     *
+     * @type [Background color tokens](https://atlassian.design/components/tokens/all-tokens#color-background)
+     */
+    backgroundColor?: PlatformBoxProps['backgroundColor'];
+    /**
+     * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
+     * For a list of supported style properties on this component, see [here](/platform/forge/ui-kit/components/xcss).
+     *
+     * @type XCSSProp
+     */
     xcss?: XCSSProp;
+    /**
+     * @type string
+     */
+    role?: PlatformBoxProps['role'];
+    /**
+     * @type ForgeComponent
+     */
+    children?: PlatformBoxProps['children'];
 };
+/**
+ * A box is a generic container that provides managed access to design tokens.
+ */
+export type TBox<T> = (props: BoxProps) => T;

package/dist/types-ts4.5/components/__generated__/index.d.ts

@@ -1,6 +1,6 @@
-export type { BadgeProps } from './BadgeProps.codegen';
+export type { BadgeProps, TBadge } from './BadgeProps.codegen';
 export type { BleedProps } from './BleedProps.codegen';
-export type { BoxProps } from './BoxProps.codegen';
+export type { BoxProps, TBox } from './BoxProps.codegen';
 export type { ButtonGroupProps } from './ButtonGroupProps.codegen';
 export type { ButtonProps } from './ButtonProps.codegen';
 export type { CheckboxProps } from './CheckboxProps.codegen';
@@ -58,4 +58,4 @@ export type { ToggleProps } from './ToggleProps.codegen';
 export type { TooltipProps } from './TooltipProps.codegen';
 export type { ValidMessageProps } from './ValidMessageProps.codegen';
 export type { PopupProps } from './PopupProps.codegen';
-export type { AdfRendererProps } from './AdfRendererProps.codegen';
+export type { AdfRendererProps, TAdfRenderer } from './AdfRendererProps.codegen';

package/dist/types-ts4.5/index.d.ts

@@ -1,3 +1,3 @@
-export type { AdfRendererProps, BadgeProps, BleedProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, } from './components/__generated__';
+export type { AdfRendererProps, BadgeProps, BleedProps, BoxProps, ButtonGroupProps, ButtonProps, CalendarProps, CheckboxProps, CheckboxGroupProps, CodeBlockProps, CodeProps, DatePickerProps, DynamicTableProps, EmptyStateProps, ErrorMessageProps, FlexProps, FormFooterProps, FormHeaderProps, FormProps, FormSectionProps, GridProps, HeadingProps, HelperMessageProps, IconProps, InlineProps, LabelProps, LinkButtonProps, ListProps, ListItemProps, LoadingButtonProps, LozengeProps, ModalBodyProps, ModalFooterProps, ModalHeaderProps, ModalProps, ModalTitleProps, ModalTransitionProps, ProgressBarProps, ProgressTrackerProps, RadioGroupProps, RadioProps, RangeProps, SectionMessageActionProps, SectionMessageProps, SelectProps, SpinnerProps, StackProps, TabListProps, TabPanelProps, TabProps, TabsProps, TagGroupProps, TagProps, TextAreaProps, TextfieldProps, ToggleProps, TooltipProps, TimePickerProps, ValidMessageProps, PopupProps, InlineEditProps, TBadge, TBox, TAdfRenderer, } from './components/__generated__';
 export type { BarChartProps, StackBarChartProps, HorizontalStackBarChartProps, HorizontalBarChartProps, LineChartProps, SingleValueChartProps, PieChartProps, } from './components/charts';
 export type { ChartColorTokens } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/forge-react-types",
-	"version": "0.34.9",
+	"version": "0.34.11",
 	"description": "Component types for Forge UI Kit React components",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -24,23 +24,23 @@
 		"team": "Forge UI"
 	},
 	"dependencies": {
-		"@atlaskit/badge": "^16.4.0",
+		"@atlaskit/badge": "^17.0.0",
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/calendar": "^16.1.0",
+		"@atlaskit/calendar": "^16.2.0",
 		"@atlaskit/checkbox": "^15.2.0",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/datetime-picker": "^15.10.0",
+		"@atlaskit/datetime-picker": "^15.11.0",
 		"@atlaskit/dynamic-table": "^17.0.0",
 		"@atlaskit/empty-state": "^8.1.0",
 		"@atlaskit/form": "^11.0.0",
 		"@atlaskit/heading": "^4.0.0",
-		"@atlaskit/inline-edit": "^14.0.0",
+		"@atlaskit/inline-edit": "^14.1.0",
 		"@atlaskit/lozenge": "^11.12.0",
 		"@atlaskit/modal-dialog": "^12.19.0",
 		"@atlaskit/popup": "^1.30.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/progress-bar": "3.0.2",
-		"@atlaskit/progress-tracker": "9.0.3",
+		"@atlaskit/progress-tracker": "9.1.0",
 		"@atlaskit/radio": "^7.0.0",
 		"@atlaskit/range": "^8.0.0",
 		"@atlaskit/renderer": "^112.8.0",
@@ -53,7 +53,7 @@
 		"@atlaskit/textarea": "^5.7.0",
 		"@atlaskit/textfield": "^6.7.0",
 		"@atlaskit/toggle": "^14.0.0",
-		"@atlaskit/tokens": "^3.0.0",
+		"@atlaskit/tokens": "^3.1.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@babel/runtime": "^7.0.0"
 	},

package/scripts/codegen/codeGenerator.ts

@@ -55,11 +55,15 @@ const getBaseComponentSymbol = (componentSymbol: Symbol, sourceFile: SourceFile)
 const getDependentTypeDeclarations = (baseComponentPropSymbol: Symbol, sourceFile: SourceFile) => {
 	return sourceFile.getTypeAliases().reduce((declarations, typeAlias) => {
 		const typeAliasName = typeAlias.getName();
-		if (
-			typeAliasName !== baseComponentPropSymbol.getName() &&
-			getDeclaration(baseComponentPropSymbol).getText().includes(typeAliasName)
-		) {
-			declarations.push(typeAlias);
+		if (typeAliasName !== baseComponentPropSymbol.getName()) {
+			const baseComponentPropSymbolDeclaration = getDeclaration(baseComponentPropSymbol).getText();
+			let targetTypeName = typeAliasName;
+			if (targetTypeName.startsWith('_Platform')) {
+				targetTypeName = targetTypeName.slice(1);
+			}
+			if (baseComponentPropSymbolDeclaration.includes(targetTypeName)) {
+				declarations.push(typeAlias);
+			}
 		}
 		return declarations;
 	}, [] as Array<TypeAliasDeclaration>);
@@ -295,12 +299,40 @@ const resolveExternalTypesCode = (
 	return !!declarationCode ? declarationCode : null;
 };
 
+const makeJSDocComment = (comment: string) => {
+	return `/**
+ * ${comment.split('\n').join('\n * ')}
+ */`;
+};
+
+const getComponentTypeCode = (componentPropSymbol: Symbol, sourceFile: SourceFile) => {
+	const propName = componentPropSymbol.getName();
+	const componentName = propName.replace('Props', '');
+	const targetComponent = sourceFile.getVariableDeclaration(componentName);
+
+	const statements = [];
+	if (targetComponent) {
+		const comment = targetComponent
+			.getVariableStatement()
+			?.getJsDocs()
+			.map((jsDoc) => jsDoc.getInnerText())
+			.join('\n');
+
+		if (comment && comment.length > 0) {
+			statements.push(updateDACUrlInJSDocComment(makeJSDocComment(comment)));
+		}
+	}
+	statements.push(`export type T${componentName}<T> = (props: ${propName}) => T;`);
+	return statements.join('\n');
+};
+
 type CodeConsolidator = (context: {
 	sourceFile: SourceFile;
 	importCode?: string | null;
 	externalTypesCode?: string | null;
 	dependentTypeCode?: string | null;
 	componentPropCode?: string | null;
+	componentTypeCode?: string | null;
 }) => string;
 
 const consolidateCodeSections: CodeConsolidator = ({
@@ -308,6 +340,7 @@ const consolidateCodeSections: CodeConsolidator = ({
 	externalTypesCode,
 	dependentTypeCode,
 	componentPropCode,
+	componentTypeCode,
 }) => {
 	return [
 		'/* eslint @repo/internal/codegen/signed-source-integrity: "warn" */',
@@ -315,11 +348,31 @@ const consolidateCodeSections: CodeConsolidator = ({
 		externalTypesCode,
 		dependentTypeCode,
 		componentPropCode,
+		componentTypeCode,
 	]
 		.filter((code) => !!code)
 		.join('\n\n');
 };
 
+const toAbsoluteDACUrl = (path: string) => `https://developer.atlassian.com${path}`;
+
+const updateDACUrlInJSDocComment = (code: string) => {
+	// regex to match markdown links in the JS doc comments
+	const markdownLinkRegex = /([ \t]+\*.+\[.+\])\(([^)]+)\)/g;
+	return code.replace(markdownLinkRegex, (match, p1, url) => {
+		if (url.startsWith('/')) {
+			return `${p1}(${toAbsoluteDACUrl(url)})`;
+		}
+		return match;
+	});
+};
+
+const getComponentPropsTypeCode = (componentPropSymbol: Symbol) => {
+	const sourceCode = getDeclaration(componentPropSymbol).getText(true);
+
+	return updateDACUrlInJSDocComment(sourceCode);
+};
+
 const baseGenerateComponentPropTypeSourceCode = (
 	componentPropSymbol: Symbol,
 	sourceFile: SourceFile,
@@ -353,7 +406,10 @@ const baseGenerateComponentPropTypeSourceCode = (
 	const dependentTypeCode = dependentTypeDeclarations
 		.map((typeAlias) => typeAlias.getText())
 		.join('\n');
-	const componentPropCode = getDeclaration(baseComponentPropSymbol).getText();
+	const componentPropCode = getComponentPropsTypeCode(baseComponentPropSymbol);
+
+	// 6) get component type code
+	const componentTypeCode = getComponentTypeCode(baseComponentPropSymbol, sourceFile);
 
 	return (customConsolidator ?? consolidateCodeSections)({
 		sourceFile,
@@ -361,6 +417,7 @@ const baseGenerateComponentPropTypeSourceCode = (
 		externalTypesCode,
 		dependentTypeCode,
 		componentPropCode,
+		componentTypeCode,
 	});
 };
 
@@ -370,6 +427,7 @@ const boxPropsCodeConsolidator: CodeConsolidator = ({
 	externalTypesCode,
 	dependentTypeCode,
 	componentPropCode,
+	componentTypeCode,
 }) => {
 	const xcssValidator = sourceFile.getVariableDeclarationOrThrow('xcssValidator').getText();
 
@@ -392,6 +450,7 @@ const boxPropsCodeConsolidator: CodeConsolidator = ({
 			externalTypesCode,
 			dependentTypeCode,
 			componentPropCode,
+			componentTypeCode,
 		]
 			.filter((code) => !!code)
 			.join('\n\n');

package/src/components/__generated__/AdfRendererProps.codegen.tsx

@@ -3,14 +3,42 @@
  *
  * Extract component prop types from UIKit 2 components - AdfRendererProps
  *
- * @codegen <<SignedSource::4df2177e43ce459eb2e5e90a45b6ae46>>
+ * @codegen <<SignedSource::5e5e266275ea97ba9ead9f2dca647d84>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/adfrenderer/index.tsx <<SignedSource::cdc7d14a5256e848ce024721e5383e71>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/adfrenderer/index.tsx <<SignedSource::12eb3f93e6fda477a20a6813ed9107ac>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
 import { type RendererProps } from '@atlaskit/renderer';
+import type { DocNode } from '@atlaskit/adf-schema';
 
 export type AdfRendererProps = RendererProps & {
+	/**
+	 * An ADF document to render
+	 *
+	 * @type [DocNode](https://developer.atlassian.com/cloud/jira/platform/apis/document/nodes/doc/)
+	 */
+	document: DocNode;
 	documentWithoutMedia?: RendererProps['document'];
-};
+
+	/**
+	 * A function to determine behaviour for handling unsupported nodes:
+	 * - Return a new Node to replace the unsupported one
+	 * - Return false to remove the node entirely
+	 * - Return undefined to leave the node as-is (default behaviour)
+	 *
+	 * @type [Visitor](https://bitbucket.org/atlassian/atlassian-frontend-mirror/src/master/editor/adf-utils/src/types/index.ts)
+	 */
+	replaceUnsupportedNode?: Function
+};
+
+/**
+ * The AdfRenderer component provides a way to render a valid ADF document, using the same renderer that Atlassian uses internally to render ADF content in Confluence pages, Jira work items, and so on.
+ * It allows you to replace node types that are unsupported in the context of a Forge app with replacement content, or remove them entirely.
+ * See [Atlassian Document Format](https://developer.atlassian.com/cloud/jira/platform/apis/document/structure/) for information on valid nodes.
+ * 
+ * This component uses [@atlaskit/renderer](https://www.npmjs.com/package/@atlaskit/renderer) under the hood.
+ * 
+ * Visit [Renderer editor](https://atlaskit.atlassian.com/examples/editor/renderer/basic) for a comprehensive list of different ADF document examples
+ */
+export type TAdfRenderer<T> = (props: AdfRendererProps) => T;

package/src/components/__generated__/BadgeProps.codegen.tsx

@@ -3,18 +3,31 @@
  *
  * Extract component prop types from UIKit 2 components - BadgeProps
  *
- * @codegen <<SignedSource::673f5e6a8adc5b98f8bcb1a8de0644ef>>
+ * @codegen <<SignedSource::be50537eb7e4a631ef0c0e1018412e29>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::2713f460c0b17d55cf5200b4e629a006>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/badge/__generated__/index.partial.tsx <<SignedSource::d5b0fcebb6993614e6df8397ce50002d>>
  */
 /* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
 
 import React from 'react';
 import PlatformBadge from '@atlaskit/badge';
 
-type PlatformBadgeProps = React.ComponentProps<typeof PlatformBadge>;
+type _PlatformBadgeProps = React.ComponentProps<typeof PlatformBadge>;
+export type PlatformBadgeProps = Omit<_PlatformBadgeProps, 'children'> & {
+/**
+ * The value displayed within the badge. A badge should only be used in cases where you want to represent a number. Use a lozenge for non-numeric information.
+ * 
+ * @type string | number
+ */
+	children?: _PlatformBadgeProps['children'];
+}
 
 export type BadgeProps = Pick<
   PlatformBadgeProps,
   'appearance' | 'children' | 'max' | 'testId'
->;
+>;
+
+/**
+ * A badge is a visual indicator for numeric values such as tallies and scores.
+ */
+export type TBadge<T> = (props: BadgeProps) => T;

package/src/components/__generated__/BoxProps.codegen.tsx

@@ -3,9 +3,9 @@
  *
  * Extract component prop types from UIKit 2 components - BoxProps
  *
- * @codegen <<SignedSource::56b2319e454532f63dda1391dca0f985>>
+ * @codegen <<SignedSource::5953057bca93305790983ebf1513e471>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::d7d66f07c0c79c170b02c923cdeb8551>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::1b547198cbfceadd8838222c33bbda26>>
  */
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 
@@ -181,18 +181,90 @@ type XCSSProp = ReturnType<typeof xcssValidator>;
 
 export type BoxProps = Pick<
 	PlatformBoxProps,
-	| 'padding'
-	| 'paddingBlock'
-	| 'paddingBlockStart'
-	| 'paddingBlockEnd'
-	| 'paddingInline'
-	| 'paddingInlineStart'
-	| 'paddingInlineEnd'
-	| 'backgroundColor'
 	| 'children'
 	| 'ref'
 	| 'testId'
-	| 'role'
 > & {
+	/**
+	 * A shorthand for `paddingBlock` and `paddingInline` together.
+	 *
+	 * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+	 */
+	padding?: PlatformBoxProps['padding'];
+
+	/**
+	 * The logical block start and end padding of an element.
+	 *
+	 * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+	 */
+	paddingBlock?: PlatformBoxProps['paddingBlock'];
+
+	/**
+	 * The logical block start padding of an element.
+	 *
+	 * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+	 */
+	paddingBlockStart?: PlatformBoxProps['paddingBlockStart'];
+
+	/**
+	 * The logical block end padding of an element.
+	 *
+	 * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+	 */
+	paddingBlockEnd?: PlatformBoxProps['paddingBlockEnd'];
+
+	/**
+	 * The logical inline start and end padding of an element.
+	 *
+	 * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+	 */
+	paddingInline?: PlatformBoxProps['paddingInline'];
+
+	/**
+	 * The logical inline end padding of an element.
+	 *
+	 * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+	 */
+	paddingInlineEnd?: PlatformBoxProps['paddingInlineEnd'];
+
+	/**
+	 * The logical inline start padding of an element.
+	 *
+	 * @type [Space tokens](https://atlassian.design/components/tokens/all-tokens#space)
+	 */
+	paddingInlineStart?: PlatformBoxProps['paddingInlineStart'];
+
+	/**
+	 * A token alias for background color. See: [Design tokens](https://atlassian.design/components/tokens/all-tokens)
+	 * for a list of available colors.
+	 *
+	 * When the background color is set to a surface token, the current surface CSS variable
+	 * will also be set to this value in the `Box` styles.
+	 *
+	 * @type [Background color tokens](https://atlassian.design/components/tokens/all-tokens#color-background)
+	 */
+	backgroundColor?: PlatformBoxProps['backgroundColor'];
+
+	/**
+	 * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
+	 * For a list of supported style properties on this component, see [here](/platform/forge/ui-kit/components/xcss).
+	 *
+	 * @type XCSSProp
+	 */
 	xcss?: XCSSProp;
-};
+
+	/**
+	 * @type string
+	 */
+	role?: PlatformBoxProps['role'];
+
+	/**
+	 * @type ForgeComponent
+	 */
+	children?: PlatformBoxProps['children'];
+};
+
+/**
+ * A box is a generic container that provides managed access to design tokens.
+ */
+export type TBox<T> = (props: BoxProps) => T;

package/src/components/__generated__/index.ts

@@ -1,6 +1,6 @@
-export type { BadgeProps } from './BadgeProps.codegen';
+export type { BadgeProps, TBadge } from './BadgeProps.codegen';
 export type { BleedProps } from './BleedProps.codegen';
-export type { BoxProps } from './BoxProps.codegen';
+export type { BoxProps, TBox } from './BoxProps.codegen';
 export type { ButtonGroupProps } from './ButtonGroupProps.codegen';
 export type { ButtonProps } from './ButtonProps.codegen';
 export type { CheckboxProps } from './CheckboxProps.codegen';
@@ -58,4 +58,4 @@ export type { ToggleProps } from './ToggleProps.codegen';
 export type { TooltipProps } from './TooltipProps.codegen';
 export type { ValidMessageProps } from './ValidMessageProps.codegen';
 export type { PopupProps } from './PopupProps.codegen';
-export type { AdfRendererProps } from './AdfRendererProps.codegen';
+export type { AdfRendererProps, TAdfRenderer } from './AdfRendererProps.codegen';

package/src/index.ts

@@ -60,6 +60,9 @@ export type {
 	ValidMessageProps,
 	PopupProps,
 	InlineEditProps,
+	TBadge,
+	TBox,
+	TAdfRenderer,
 } from './components/__generated__';
 
 export type {