@atlaskit/forge-react-types 0.37.14 → 0.39.0

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

@@ -3,80 +3,255 @@
  *
  * Extract component prop types from UIKit 2 components - PressableProps
  *
- * @codegen <<SignedSource::7718a6c12cf7232dc9e82a226b7af971>>
+ * @codegen <<SignedSource::515984e69408f30f333241c0b51ceb31>>
  * @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
- * @codegenDependency ../../../../forge-ui/src/components/UIKit/pressable/__generated__/index.partial.tsx <<SignedSource::428e189d3e2a55cdd7cf86aef5a1eed7>>
+ * @codegenDependency ../../../../forge-ui/src/components/UIKit/pressable/__generated__/index.partial.tsx <<SignedSource::a7f457ec091071415e904b705d62f605>>
  */
-/* eslint @repo/internal/codegen/signed-source-integrity: "warn" */
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
 
 import React from 'react';
 import { Pressable as PlatformPressable } from '@atlaskit/primitives';
 
-type _PlatformPressableProps = React.ComponentProps<typeof PlatformPressable>;
-export type PlatformPressableProps = Omit<_PlatformPressableProps, 'backgroundColor' | 'isDisabled' | 'onClick' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'testId'> & {
+import type { CSSProperties } from '@emotion/serialize';
+import type * as CSS from 'csstype';
+import type { MediaQuery } from '@atlaskit/primitives';
+import { tokensMap } from '@atlaskit/primitives';
+type TokensMap = typeof tokensMap;
+type TokensMapPropKey = keyof TokensMap;
+type TokenizedProps = {
+    [K in TokensMapPropKey]?: keyof TokensMap[K];
+};
+type RawCSSValue = string & {};
+type RelaxedTokenizedProps = {
+    [K in TokensMapPropKey]?: keyof TokensMap[K] | RawCSSValue;
+};
+type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)';
+type StandardCSSProps = Omit<CSSProperties, TokensMapPropKey>;
+type RestrictedPropsSpec = RelaxedTokenizedProps & StandardCSSProps;
+type SafeCSSObject<SupportedPropKeys extends keyof CSSProperties = keyof CSSProperties, RawCSSPropKeys extends SupportedPropKeys = SupportedPropKeys, RestrictedProps extends RestrictedPropsSpec = RestrictedPropsSpec> = {
+    [MQ in AllMedia]?: Omit<SafeCSSObject<SupportedPropKeys, RawCSSPropKeys, RestrictedPropsSpec>, AllMedia>;
+} & {
+    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject<SupportedPropKeys, RawCSSPropKeys, RestrictedPropsSpec>, CSS.Pseudos | AllMedia>;
+} & Pick<TokenizedProps, Exclude<Extract<SupportedPropKeys, TokensMapPropKey>, RawCSSPropKeys | keyof RestrictedProps>> & Pick<StandardCSSProps, Exclude<Extract<SupportedPropKeys, keyof StandardCSSProps>, RawCSSPropKeys | keyof RestrictedProps>> & // force standard css prop values for allowCSS: true
+Pick<CSSProperties, Extract<RawCSSPropKeys, keyof CSSProperties>> & RestrictedProps;
+type XCSSValidatorParam = {
+    [key in keyof CSSProperties]: true | {
+        supportedValues: Array<RestrictedPropsSpec[key]>;
+    } | {
+        allowCSS: true;
+    };
+};
 /**
- * Token representing background color with a built-in fallback value.
- */
-	backgroundColor?: _PlatformPressableProps['backgroundColor'];
-/**
- * Whether the button is disabled.
- */
-	isDisabled?: _PlatformPressableProps['isDisabled'];
-/**
- * Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
- */
-	onClick?: _PlatformPressableProps['onClick'];
-/**
- * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
- * 
- * @see paddingBlock
- * @see paddingInline
- */
-	padding?: _PlatformPressableProps['padding'];
-/**
- * Tokens representing CSS shorthand `paddingBlock`.
- * 
- * @see paddingBlockStart
- * @see paddingBlockEnd
- */
-	paddingBlock?: _PlatformPressableProps['paddingBlock'];
-/**
- * Tokens representing CSS `paddingBlockEnd`.
- */
-	paddingBlockEnd?: _PlatformPressableProps['paddingBlockEnd'];
-/**
- * Tokens representing CSS `paddingBlockStart`.
- */
-	paddingBlockStart?: _PlatformPressableProps['paddingBlockStart'];
-/**
- * Tokens representing CSS shorthand `paddingInline`.
- * 
- * @see paddingInlineStart
- * @see paddingInlineEnd
- */
-	paddingInline?: _PlatformPressableProps['paddingInline'];
-/**
- * Tokens representing CSS `paddingInlineEnd`.
- */
-	paddingInlineEnd?: _PlatformPressableProps['paddingInlineEnd'];
-/**
- * Tokens representing CSS `paddingInlineStart`.
- */
-	paddingInlineStart?: _PlatformPressableProps['paddingInlineStart'];
-/**
- * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+ *
+ * @param supportedXCSSProps - the list of css props to be supported for the intended component.
+ *    If not provided, all the props will be supported. The props could be either standard css props
+ *    or design token based props. If the prop is a design token based prop, the value of the prop
+ *    will be validated against the design tokens map to ensure the value is a valid design token string.
+ * @returns a function that takes a style object and returns a style object with only the supported props
+ *    as specified in the supportedXCSSProps list. The props that are not supported will be removed from the
+ *    returned style object and a warning will be logged in the console.
  */
-	testId?: _PlatformPressableProps['testId'];
-}
+declare const makeXCSSValidator: <U extends XCSSValidatorParam>(supportedXCSSProps: U) => (styleObj: SafeCSSObject<keyof CSSProperties, keyof CSSProperties, RestrictedPropsSpec> | SafeCSSObject<Extract<keyof U, keyof CSSProperties>, Extract<{ [K in Extract<keyof U, keyof CSSProperties>]: U[K] extends {
+    allowCSS: true;
+} ? K : never; }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>, { [K_2 in Extract<{ [K_1 in Extract<keyof U, keyof CSSProperties>]: U[K_1] extends {
+    supportedValues: RestrictedPropsSpec[K_1][];
+} ? K_1 : never; }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>]?: (U[K_2] extends {
+    supportedValues: infer V;
+} ? Exclude<V[keyof V], number | Function> : never) | undefined; }>) => SafeCSSObject<Extract<keyof U, keyof CSSProperties>, Extract<{ [K in Extract<keyof U, keyof CSSProperties>]: U[K] extends {
+    allowCSS: true;
+} ? K : never; }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>, { [K_2 in Extract<{ [K_1 in Extract<keyof U, keyof CSSProperties>]: U[K_1] extends {
+    supportedValues: RestrictedPropsSpec[K_1][];
+} ? K_1 : never; }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>]?: (U[K_2] extends {
+    supportedValues: infer V;
+} ? Exclude<V[keyof V], number | Function> : never) | undefined; }>;
+export { makeXCSSValidator };
+export type { SafeCSSObject };
+
+const xcssValidator = makeXCSSValidator({
+	// color related props
+	color: true,
+	boxShadow: true,
+	opacity: true,
+	backgroundColor: true,
+	borderColor: true,
+	borderBlockColor: true,
+	borderBlockEndColor: true,
+	borderBlockStartColor: true,
+	borderBottomColor: true,
+	borderInlineColor: true,
+	borderInlineEndColor: true,
+	borderInlineStartColor: true,
+	borderLeftColor: true,
+	borderRightColor: true,
+	borderTopColor: true,
+
+	overflow: {
+		supportedValues: ['hidden', 'visible', 'scroll', 'auto'],
+	},
 
-export type PressableProps = Pick<
-  PlatformPressableProps,
-  'backgroundColor' | 'children' | 'isDisabled' | 'onClick' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'testId'
->;
+	overflowX: {
+		supportedValues: ['hidden', 'visible', 'scroll', 'auto'],
+	},
+	overflowY: {
+		supportedValues: ['hidden', 'visible', 'scroll', 'auto'],
+	},
+
+	// layout and space related props
+	display: {
+		supportedValues: ['block', 'inline-block', 'inline', 'none'],
+	},
+	flexGrow: {
+		allowCSS: true,
+	},
+	width: {
+		allowCSS: true,
+	},
+	height: {
+		allowCSS: true,
+	},
+	minWidth: {
+		allowCSS: true,
+	},
+	maxWidth: {
+		allowCSS: true,
+	},
+	minHeight: {
+		allowCSS: true,
+	},
+	maxHeight: {
+		allowCSS: true,
+	},
+	margin: true,
+	marginBlock: true,
+	marginBlockEnd: true,
+	marginBlockStart: true,
+	marginBottom: true,
+	marginInline: true,
+	marginInlineEnd: true,
+	marginInlineStart: true,
+	marginLeft: true,
+	marginRight: true,
+	marginTop: true,
+	padding: true,
+	paddingBlock: true,
+	paddingBlockEnd: true,
+	paddingBlockStart: true,
+	paddingBottom: true,
+	paddingInline: true,
+	paddingInlineEnd: true,
+	paddingInlineStart: true,
+	paddingLeft: true,
+	paddingRight: true,
+	paddingTop: true,
+
+	// other box related props
+	borderRadius: { supportedValues: ['border.radius'] },
+	borderBottomLeftRadius: { supportedValues: ['border.radius'] },
+	borderBottomRightRadius: { supportedValues: ['border.radius'] },
+	borderTopLeftRadius: { supportedValues: ['border.radius'] },
+	borderTopRightRadius: { supportedValues: ['border.radius'] },
+	borderEndEndRadius: { supportedValues: ['border.radius'] },
+	borderEndStartRadius: { supportedValues: ['border.radius'] },
+	borderStartEndRadius: { supportedValues: ['border.radius'] },
+	borderStartStartRadius: { supportedValues: ['border.radius'] },
+	borderWidth: { supportedValues: ['border.width'] },
+	borderBlockWidth: { supportedValues: ['border.width'] },
+	borderBlockEndWidth: { supportedValues: ['border.width'] },
+	borderBlockStartWidth: { supportedValues: ['border.width'] },
+	borderBottomWidth: { supportedValues: ['border.width'] },
+	borderInlineWidth: { supportedValues: ['border.width'] },
+	borderInlineEndWidth: { supportedValues: ['border.width'] },
+	borderInlineStartWidth: { supportedValues: ['border.width'] },
+	borderLeftWidth: { supportedValues: ['border.width'] },
+	borderRightWidth: { supportedValues: ['border.width'] },
+	borderTopWidth: { supportedValues: ['border.width'] },
+
+	// other props not in tokens based props
+	borderTopStyle: {
+		supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
+	},
+	borderBottomStyle: {
+		supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
+	},
+	borderRightStyle: {
+		supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
+	},
+	borderLeftStyle: {
+		supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
+	},
+	borderStyle: {
+		supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
+	},
+	position: {
+		supportedValues: ['relative', 'static'],
+	},
+});
+type XCSSProp = ReturnType<typeof xcssValidator>;
+
+type PlatformPressableProps = React.ComponentProps<typeof PlatformPressable>;
+
+export type PressableProps = Pick<PlatformPressableProps, 'children' | 'ref' | 'testId'> & {
+  /**
+   * Token representing background color with a built-in fallback value.
+   */
+  backgroundColor?: PlatformPressableProps['backgroundColor'],
+  /**
+   * Whether the button is disabled.
+   */
+  isDisabled?: PlatformPressableProps['isDisabled'],
+  /**
+   * Handler called on click.
+   */
+  onClick?: () => void,
+  /**
+   * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+   *
+   * @see paddingBlock
+   * @see paddingInline
+   */
+  padding?: PlatformPressableProps['padding'],
+  /**
+   * Tokens representing CSS shorthand `paddingBlock`.
+   *
+   * @see paddingBlockStart
+   * @see paddingBlockEnd
+   */
+  paddingBlock?: PlatformPressableProps['paddingBlock'],
+  /**
+   * Tokens representing CSS `paddingBlockEnd`.
+   */
+  paddingBlockEnd?: PlatformPressableProps['paddingBlockEnd'],
+  /**
+   * Tokens representing CSS `paddingBlockStart`.
+   */
+  paddingBlockStart?: PlatformPressableProps['paddingBlockStart'],
+  /**
+   * Tokens representing CSS shorthand `paddingInline`.
+   *
+   * @see paddingInlineStart
+   * @see paddingInlineEnd
+   */
+  paddingInline?: PlatformPressableProps['paddingInline'],
+  /**
+   * Tokens representing CSS `paddingInlineEnd`.
+   */
+  paddingInlineEnd?: PlatformPressableProps['paddingInlineEnd'],
+  /**
+   * Tokens representing CSS `paddingInlineStart`.
+   */
+  paddingInlineStart?: PlatformPressableProps['paddingInlineStart'],
+  /**
+   * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
+   * For a list of supported style properties on this component, see [here](https://developer.atlassian.com/platform/forge/ui-kit/components/xcss).
+   *
+   * @type XCSSProp
+   */
+  xcss?: XCSSProp;
+}
 
 /**
  * A pressable is a primitive for building custom buttons.
- * 
- * @codegenId #pressable
+ *
+ * @see [Pressable](https://developer.atlassian.com/platform/forge/ui-kit/components/pressable/) in UI Kit documentation for more information
  */
 export type TPressable<T> = (props: PressableProps) => T;

package/src/components/charts/BarChartProps.tsx

@@ -1,5 +1,3 @@
-import type { ChartColorTokens } from '../../types';
-
 export type BarChartProps = {
 	/**
 	 * The static width of the chart in pixels. If this is not specified, the width is responsive.
@@ -15,10 +13,6 @@ export type BarChartProps = {
 	 * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#2--array-of-objects).
 	 */
 	data: unknown[];
-	/**
-	 * Boolean to display the chart border. Defaults to `false`.
-	 */
-	showBorder?: boolean;
 	/**
 	 * Accessor to define the x-axis values. This can be a numerical or string index.
 	 * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/bar-chart/#data).
@@ -40,11 +34,6 @@ export type BarChartProps = {
 	 * A string value that represents the subtitle of the chart. This appears below the title.
 	 */
 	subtitle?: string;
-	/**
-	 * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
-	 * This is utilized to render each bar with the specified colors, based on the color grouping given by colorAccessor.
-	 */
-	colors?: ChartColorTokens[];
 };
 
 type StackChartProps = BarChartProps & {

package/src/components/charts/DonutChartProps.tsx

@@ -0,0 +1,17 @@
+import { type PieChartProps } from './PieChartProps';
+
+export type DonutChartProps = PieChartProps & {
+	/**
+	 * The radius of the inner circle of the donut chart in pixels. If this is not specified, the radius is responsive.
+	 */
+	innerRadius?: number;
+	/**
+	 * The radius of the outer circle of the donut chart in pixels. If this is not specified, the radius is responsive.
+	 */
+	outerRadius?: number;
+};
+
+/**
+ * A visual representation of data proportions in a donut format.
+ */
+export type TDonutChart<T> = (props: DonutChartProps) => T;

package/src/components/charts/LineChartProps.tsx

@@ -1,5 +1,3 @@
-import type { ChartColorTokens } from '../../types';
-
 export type LineChartProps = {
 	/**
 	 * The static width of the chart in pixels. If this is not specified, the width is responsive.
@@ -15,7 +13,6 @@ export type LineChartProps = {
 	 * 2. An [array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#2--array-of-objects).
 	 */
 	data: unknown[];
-	showBorder?: boolean;
 	/**
 	 * Accessor to define the x-axis values. This can be a numerical or string index.
 	 * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/line-chart/#data).
@@ -37,11 +34,6 @@ export type LineChartProps = {
 	 * A string value that represents the subtitle of the chart. This appears below the title.
 	 */
 	subtitle?: string;
-	/**
-	 * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
-	 * This is utilized to render each line with the specified colors, based on the color grouping given by colorAccessor.
-	 */
-	colors?: ChartColorTokens[];
 };
 
 /**

package/src/components/charts/PieChartProps.tsx

@@ -1,5 +1,3 @@
-import type { ChartColorTokens } from '../../types';
-
 export type PieChartProps = {
 	/**
 	 * The static width of the chart in pixels. If this is not specified, the width is responsive.
@@ -15,10 +13,6 @@ export type PieChartProps = {
 	 * 2. [Array of objects](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#2--array-of-objects).
 	 */
 	data: unknown[];
-	/**
-	 * Boolean to display the chart border. Defaults to `false`.
-	 */
-	showBorder?: boolean;
 	/**
 	 * Accessor to define the color grouping. This can be a numerical or string index.
 	 * For more information on all accessors, see [Data](https://developer.atlassian.com/platform/forge/ui-kit/components/pie-chart/#data).
@@ -40,19 +34,10 @@ export type PieChartProps = {
 	 * A string value that represents the subtitle of the chart. This appears below the title.
 	 */
 	subtitle?: string;
-	/**
-	 * Boolean to render the pie as the donut variation. Defaults to `false`.
-	 */
-	isDonut?: boolean;
 	/**
 	 * Boolean to display labels on top of each slice. Defaults to `false`.
 	 */
 	showMarkLabels?: boolean;
-	/**
-	 * An array of [chart color tokens](https://atlassian.design/components/tokens/all-tokens#color-chart).
-	 * This is utilized to render each slice with the specified colors, based on the color grouping given by colorAccessor.
-	 */
-	colors?: ChartColorTokens[];
 };
 
 /**

package/src/components/charts/index.ts

@@ -10,5 +10,5 @@ export type {
 } from './BarChartProps';
 
 export type { LineChartProps, TLineChart } from './LineChartProps';
-export type { SingleValueChartProps, TSingleValueChart } from './SingleValueChartProps';
 export type { PieChartProps, TPieChart } from './PieChartProps';
+export type { DonutChartProps, TDonutChart } from './DonutChartProps';

package/src/index.ts

@@ -131,14 +131,14 @@ export type {
 	HorizontalStackBarChartProps,
 	HorizontalBarChartProps,
 	LineChartProps,
-	SingleValueChartProps,
+	DonutChartProps,
 	PieChartProps,
 	TBarChart,
 	TStackBarChart,
 	THorizontalStackBarChart,
 	THorizontalBarChart,
 	TLineChart,
-	TSingleValueChart,
+	TDonutChart,
 	TPieChart,
 } from './components/charts';
 

package/dist/cjs/components/charts/SingleValueChartProps.js

@@ -1 +0,0 @@
-"use strict";

package/dist/types/components/charts/SingleValueChartProps.d.ts

@@ -1,33 +0,0 @@
-export type SingleValueChartProps = {
-    /**
-     * Data can be one of two formats:
-     * 1. A **number** - The value that is displayed, abbreviated at the thousand, millions, trillions and billions.
-     * 2. An **array of numbers**: The first number in the array is used as the display value, the second number in the array is used to calculate the increase/decrease percentage relative to the first number.
-     */
-    data: number | number[];
-    /**
-     * The static width of the chart in pixels. If this is not specified, the width is responsive.
-     */
-    width?: number;
-    /**
-     * The static height of the chart in pixels. Defaults to `120`.
-     */
-    height?: number;
-    /**
-     * Boolean to display the chart border. Defaults to `false`.
-     */
-    showBorder?: boolean;
-    /**
-     * A string value that represents the title of the chart.
-     */
-    title?: string;
-    /**
-     * A string value that represents the subtitle of the chart. This appears below the metric value.
-     */
-    subtitle?: string;
-};
-/**
- * A visualization representation of information with a single value as its metrics.
- * The metric can be displayed with a increase/decrease indicator to display trends or changes over time.
- */
-export type TSingleValueChart<T> = (props: SingleValueChartProps) => T;

package/dist/types-ts4.5/components/charts/SingleValueChartProps.d.ts

@@ -1,33 +0,0 @@
-export type SingleValueChartProps = {
-    /**
-     * Data can be one of two formats:
-     * 1. A **number** - The value that is displayed, abbreviated at the thousand, millions, trillions and billions.
-     * 2. An **array of numbers**: The first number in the array is used as the display value, the second number in the array is used to calculate the increase/decrease percentage relative to the first number.
-     */
-    data: number | number[];
-    /**
-     * The static width of the chart in pixels. If this is not specified, the width is responsive.
-     */
-    width?: number;
-    /**
-     * The static height of the chart in pixels. Defaults to `120`.
-     */
-    height?: number;
-    /**
-     * Boolean to display the chart border. Defaults to `false`.
-     */
-    showBorder?: boolean;
-    /**
-     * A string value that represents the title of the chart.
-     */
-    title?: string;
-    /**
-     * A string value that represents the subtitle of the chart. This appears below the metric value.
-     */
-    subtitle?: string;
-};
-/**
- * A visualization representation of information with a single value as its metrics.
- * The metric can be displayed with a increase/decrease indicator to display trends or changes over time.
- */
-export type TSingleValueChart<T> = (props: SingleValueChartProps) => T;

package/src/components/charts/SingleValueChartProps.tsx

@@ -1,34 +0,0 @@
-export type SingleValueChartProps = {
-	/**
-	 * Data can be one of two formats:
-	 * 1. A **number** - The value that is displayed, abbreviated at the thousand, millions, trillions and billions.
-	 * 2. An **array of numbers**: The first number in the array is used as the display value, the second number in the array is used to calculate the increase/decrease percentage relative to the first number.
-	 */
-	data: number | number[];
-	/**
-	 * The static width of the chart in pixels. If this is not specified, the width is responsive.
-	 */
-	width?: number;
-	/**
-	 * The static height of the chart in pixels. Defaults to `120`.
-	 */
-	height?: number;
-	/**
-	 * Boolean to display the chart border. Defaults to `false`.
-	 */
-	showBorder?: boolean;
-	/**
-	 * A string value that represents the title of the chart.
-	 */
-	title?: string;
-	/**
-	 * A string value that represents the subtitle of the chart. This appears below the metric value.
-	 */
-	subtitle?: string;
-};
-
-/**
- * A visualization representation of information with a single value as its metrics.
- * The metric can be displayed with a increase/decrease indicator to display trends or changes over time.
- */
-export type TSingleValueChart<T> = (props: SingleValueChartProps) => T;