@atlaskit/editor-plugin-table 12.1.15 → 12.2.0

package/src/nodeviews/toDOM.ts

@@ -7,8 +7,17 @@ import type { DOMOutputSpec, NodeSpec, Node as PMNode } from '@atlaskit/editor-p
 import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
-import { generateColgroup, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
+import {
+	generateColgroup,
+	generateColgroupFromNode,
+	getResizerMinWidth,
+} from '../pm-plugins/table-resizing/utils/colgroup';
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
+import {
+	getTableResizerContainerMaxWidthInCSS,
+	getTableResizerContainerForFullPageWidthInCSS,
+	getTableResizerItemWidthInCSS,
+} from '../pm-plugins/table-resizing/utils/misc';
 
 import { getAlignmentStyle } from './table-container-styles';
 
@@ -17,6 +26,11 @@ type Config = {
 	tableResizingEnabled: boolean;
 	getEditorContainerWidth: GetEditorContainerWidth;
 	isNestingSupported?: boolean;
+	isTableScalingEnabled?: boolean;
+	shouldUseIncreasedScalingPercent?: boolean;
+	isCommentEditor?: boolean;
+	isChromelessEditor?: boolean;
+	isNested?: boolean;
 };
 export const tableNodeSpecWithFixedToDOM = (
 	config: Config,
@@ -40,6 +54,10 @@ export const tableNodeSpecWithFixedToDOM = (
 
 			const tableMinWidth = getResizerMinWidth(node);
 
+			const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
+
+			const isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
+
 			const attrs = {
 				'data-number-column': node.attrs.isNumberColumnEnabled,
 				'data-layout': node.attrs.layout,
@@ -48,12 +66,40 @@ export const tableNodeSpecWithFixedToDOM = (
 				'data-table-width': node.attrs.width,
 			};
 
+			// This would be used for table scaling in colgroup CSS
+			// cqw, or px is well supported
+			const resizableTableWidth = expValEquals(
+				'platform_editor_tables_scaling_css',
+				'isEnabled',
+				true,
+			)
+				? isFullPageEditor
+					? getTableResizerContainerForFullPageWidthInCSS(node, config.isTableScalingEnabled)
+					: `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`
+				: `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${node.attrs.width ?? '100%'})`;
+
 			let colgroup: DOMOutputSpec = '';
 
 			if (config.allowColumnResizing) {
-				colgroup = ['colgroup', {}, ...generateColgroup(node)];
+				if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+					colgroup = [
+						'colgroup',
+						{},
+						...generateColgroupFromNode(
+							node,
+							config.isCommentEditor,
+							config.isChromelessEditor,
+							config.isNested,
+							config.isTableScalingEnabled,
+							config.shouldUseIncreasedScalingPercent,
+						),
+					];
+				} else {
+					colgroup = ['colgroup', {}, ...generateColgroup(node)];
+				}
 			}
 
+			// For Chromeless editor, and nested tables in full page editor
 			const tableContainerDiv = [
 				'div',
 				{
@@ -113,7 +159,10 @@ export const tableNodeSpecWithFixedToDOM = (
 				],
 			];
 
-			if (!config.tableResizingEnabled) {
+			if (
+				!config.tableResizingEnabled ||
+				(expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true) && config.isNested)
+			) {
 				return [
 					'div',
 					{
@@ -124,8 +173,6 @@ export const tableNodeSpecWithFixedToDOM = (
 				];
 			}
 
-			const tableWidthAttribute = node.attrs.width ? `${node.attrs.width}px` : `100%`;
-
 			const tableResizingDiv = [
 				'div',
 				{
@@ -136,7 +183,15 @@ export const tableNodeSpecWithFixedToDOM = (
 					'div',
 					{
 						class: 'pm-table-resizer-container',
-						style: `width: min(calc(100cqw - ${gutterPadding()}), ${tableWidthAttribute});`,
+						style: convertToInlineCss({
+							'--ak-editor-table-gutter-padding': config.isTableScalingEnabled
+								? 'calc(var(--ak-editor--large-gutter-padding) * 2)'
+								: 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
+							'--ak-editor-table-width': resizableTableWidth,
+							width: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
+								? `var(--ak-editor-table-width)`
+								: `min(calc(100cqw - ${gutterPadding()}), ${tableWidthAttribute})`,
+						}),
 					},
 					[
 						'div',
@@ -146,12 +201,23 @@ export const tableNodeSpecWithFixedToDOM = (
 								position: 'relative',
 								userSelect: 'auto',
 								boxSizing: 'border-box',
-								'--ak-editor-table-gutter-padding': `${gutterPadding()}`,
 								'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
 								'--ak-editor-table-min-width': `${tableMinWidth}px`,
 								minWidth: 'var(--ak-editor-table-min-width)',
-								maxWidth: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
-								width: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${tableWidthAttribute})`,
+								maxWidth: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
+									? getTableResizerContainerMaxWidthInCSS(
+											config.isCommentEditor,
+											config.isChromelessEditor,
+											config.isTableScalingEnabled,
+										)
+									: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), var(--ak-editor-table-max-width))`,
+								width: expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)
+									? getTableResizerItemWidthInCSS(
+											node,
+											config.isCommentEditor,
+											config.isChromelessEditor,
+										)
+									: `min(calc(100cqw - var(--ak-editor-table-gutter-padding)), ${tableWidthAttribute})`,
 							}),
 						},
 						[

package/src/nodeviews/types.ts

@@ -14,6 +14,7 @@ export type TableOptions = {
 	isTableScalingEnabled?: boolean;
 	isCommentEditor?: boolean;
 	isChromelessEditor?: boolean;
+	shouldUseIncreasedScalingPercent?: boolean;
 };
 
 export interface Props {

package/src/pm-plugins/main.ts

@@ -26,6 +26,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 
 import {
 	tableCellView,
@@ -131,24 +132,46 @@ export const createPlugin = (
 		return editorView.state;
 	};
 
-	const nodeViews =
-		isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr')
-			? undefined
-			: {
-					table: tableView({
-						portalProviderAPI,
-						eventDispatcher,
-						getEditorContainerWidth,
-						getEditorFeatureFlags,
-						dispatchAnalyticsEvent,
-						pluginInjectionApi,
-						isCommentEditor,
-						isChromelessEditor,
-					}),
-					tableRow: tableRowView({ eventDispatcher, pluginInjectionApi }),
-					tableCell: tableCellView({ eventDispatcher, pluginInjectionApi }),
-					tableHeader: tableHeaderView({ eventDispatcher, pluginInjectionApi }),
-				};
+	const getNodeView = () => {
+		// Because the layout shift issues has been fixed under experiment platform_editor_tables_scaling_css, so still want to load nodeview on SSR if experiment is enabled
+		if (expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
+			return {
+				table: tableView({
+					portalProviderAPI,
+					eventDispatcher,
+					getEditorContainerWidth,
+					getEditorFeatureFlags,
+					dispatchAnalyticsEvent,
+					pluginInjectionApi,
+					isCommentEditor,
+					isChromelessEditor,
+				}),
+				tableRow: tableRowView({ eventDispatcher, pluginInjectionApi }),
+				tableCell: tableCellView({ eventDispatcher, pluginInjectionApi }),
+				tableHeader: tableHeaderView({ eventDispatcher, pluginInjectionApi }),
+			};
+		}
+		if (isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr')) {
+			return undefined;
+		}
+		return {
+			table: tableView({
+				portalProviderAPI,
+				eventDispatcher,
+				getEditorContainerWidth,
+				getEditorFeatureFlags,
+				dispatchAnalyticsEvent,
+				pluginInjectionApi,
+				isCommentEditor,
+				isChromelessEditor,
+			}),
+			tableRow: tableRowView({ eventDispatcher, pluginInjectionApi }),
+			tableCell: tableCellView({ eventDispatcher, pluginInjectionApi }),
+			tableHeader: tableHeaderView({ eventDispatcher, pluginInjectionApi }),
+		};
+	};
+
+	const nodeViews = getNodeView();
 	return new SafePlugin({
 		state: state,
 		key: pluginKey,

package/src/pm-plugins/table-resizing/utils/colgroup.ts

@@ -1,11 +1,20 @@
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
-import { getFragmentBackingArray } from '@atlaskit/editor-common/utils';
+import { calcTableColumnWidths, getFragmentBackingArray } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
+import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 
-import { COLUMN_MIN_WIDTH } from './consts';
-import { getScalingPercentForTableWithoutWidth, getTableScalingPercent } from './misc';
+import {
+	COLUMN_MIN_WIDTH,
+	MAX_SCALING_PERCENT,
+	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
+} from './consts';
+import {
+	getScalingPercentForTableWithoutWidth,
+	getTableContainerElementWidth,
+	getTableScalingPercent,
+} from './misc';
 
 type Col = Array<string | { [name: string]: string }>;
 
@@ -18,6 +27,131 @@ type Col = Array<string | { [name: string]: string }>;
 export const getColWidthFix = (colwidth: number, tableColumnCount: number) =>
 	colwidth - 1 / tableColumnCount;
 
+const generateColStyle = (
+	fixedColWidth: number,
+	tableWidth: number,
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+	isNested?: boolean,
+	shouldUseIncreasedScalingPercent?: boolean,
+	isNumberColumnEnabled?: boolean,
+	isTableHasWidth?: boolean,
+	hasTableBeenResized?: boolean,
+) => {
+	const maxScalingPercent = shouldUseIncreasedScalingPercent
+		? MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION
+		: MAX_SCALING_PERCENT;
+	const maxScaledRatio = 1 - maxScalingPercent;
+
+	const isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+	// for nested tables, or chromeless editor, which used non resizable table container
+	if (isNested || isChromelessEditor) {
+		if (hasTableBeenResized) {
+			return `width: max(${fixedColWidth}px, ${tableCellMinWidth}px)`;
+		}
+		return `width: ${tableCellMinWidth}px)`;
+	}
+	if (isFullPageEditor || (!isFullPageEditor && isTableHasWidth)) {
+		const scaledPercent = isNumberColumnEnabled
+			? `calc(calc(var(--ak-editor-table-width) - ${akEditorTableNumberColumnWidth}px - 1px)/${tableWidth})`
+			: `calc(calc(var(--ak-editor-table-width) - 1px)/${tableWidth})`;
+		return `width: max(calc(${fixedColWidth}px * ${maxScaledRatio}), calc(${fixedColWidth} * ${scaledPercent}), ${tableCellMinWidth}px)`;
+	}
+	// table resized to full-width in comment editor
+	// it doesn't have a width attribute, and cols has been resized
+	if (hasTableBeenResized) {
+		const scaledPercent = isNumberColumnEnabled
+			? `calc(calc(var(--ak-editor-table-width) - ${akEditorTableNumberColumnWidth}px - 1px)/${tableWidth})`
+			: `calc(calc(var(--ak-editor-table-width) - 1px)/${tableWidth})`;
+		return `width: max(calc(${fixedColWidth} * ${scaledPercent}), ${tableCellMinWidth}px)`;
+	}
+	return `width: ${tableCellMinWidth}px`;
+};
+
+export const generateColgroupFromNode = (
+	table: PmNode,
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+	isNested?: boolean,
+	isTableScalingEnabled?: boolean,
+	shouldUseIncreasedScalingPercent?: boolean,
+) => {
+	const cols: Col[] = [];
+	const map = TableMap.get(table);
+	const isTableHasWidth = !!table.attrs.width;
+	const isNumberColumnEnabled = table.attrs.isNumberColumnEnabled || false;
+	const isFullPageEditor = !isChromelessEditor && !isCommentEditor;
+
+	// Ignored via go/ees005
+	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+	table.content.firstChild!.content.forEach((cell) => {
+		const colspan = cell.attrs.colspan || 1;
+		// if the table has been resized
+		if (Array.isArray(cell.attrs.colwidth)) {
+			cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+				// existing logic for calculating the width of the column
+				const fixedColWidth = getColWidthFix(width, map.width);
+				const tableWidth =
+					isFullPageEditor || (!isFullPageEditor && isTableHasWidth)
+						? getTableContainerElementWidth(table)
+						: calcTableColumnWidths(table).reduce((sum, width) => sum + width, 0);
+				if (isTableScalingEnabled) {
+					cols.push([
+						'col',
+						{
+							style: generateColStyle(
+								fixedColWidth,
+								tableWidth,
+								isCommentEditor,
+								isChromelessEditor,
+								isNested,
+								shouldUseIncreasedScalingPercent,
+								isNumberColumnEnabled,
+								isTableHasWidth,
+								true,
+							),
+						},
+					]);
+				} else {
+					cols.push([
+						'col',
+						{
+							style: `width: max(${fixedColWidth}px, ${tableCellMinWidth}px)`,
+						},
+					]);
+				}
+			});
+		} else {
+			// columns has not been resized, so distribute the width evenly
+			cols.push(
+				...Array.from({ length: colspan }, (_) => {
+					const tableWidth = getTableContainerElementWidth(table);
+					const columnWidth = tableWidth / map.width || 0;
+					const fixedColWidth = getColWidthFix(columnWidth, map.width || 0);
+
+					return [
+						'col',
+						{
+							style: generateColStyle(
+								fixedColWidth,
+								tableWidth,
+								isCommentEditor,
+								isChromelessEditor,
+								isNested,
+								shouldUseIncreasedScalingPercent,
+								isNumberColumnEnabled,
+								isTableHasWidth,
+							),
+						},
+					];
+				}),
+			);
+		}
+	});
+	return cols;
+};
+
 export const generateColgroup = (
 	table: PmNode,
 	tableRef?: HTMLElement,
@@ -37,7 +171,6 @@ export const generateColgroup = (
 			if (tableRef) {
 				// if we have tableRef here, isTableScalingEnabled is true
 				let scalePercent = 1;
-
 				if (isCommentEditor && !table.attrs?.width) {
 					scalePercent = getScalingPercentForTableWithoutWidth(table, tableRef);
 				} else {
@@ -45,6 +178,7 @@ export const generateColgroup = (
 				}
 
 				cell.attrs.colwidth.slice(0, colspan).forEach((width) => {
+					// existing logic for calculating the width of the column
 					const fixedColWidth = getColWidthFix(width, map.width);
 					const scaledWidth = fixedColWidth * scalePercent;
 					const finalWidth = Math.max(scaledWidth, tableCellMinWidth);
@@ -80,7 +214,6 @@ export const generateColgroup = (
 			);
 		}
 	});
-
 	return cols;
 };
 
@@ -101,7 +234,7 @@ export const insertColgroupFromNode = (
 
 	colgroup = renderColgroupFromNode(
 		table,
-		isTableScalingEnabled ? tableRef ?? undefined : undefined,
+		isTableScalingEnabled ? (tableRef ?? undefined) : undefined,
 		shouldUseIncreasedScalingPercent,
 		isCommentEditor,
 	);

package/src/pm-plugins/table-resizing/utils/misc.ts

@@ -25,6 +25,7 @@ import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
 import {
 	MAX_SCALING_PERCENT,
 	MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION,
+	TABLE_MAX_WIDTH,
 } from './consts';
 
 // Translates named layouts in number values.
@@ -138,6 +139,92 @@ export const getTableContainerElementWidth = (table: PMNode) => {
 	return getTableContainerWidth(table);
 };
 
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the max width for table resizer container.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @returns The CSS max-width value
+ */
+export const getTableResizerContainerMaxWidthInCSS = (
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+	isTableScalingEnabled?: boolean,
+): string => {
+	const maxResizerWidthForNonCommentEditor = isTableScalingEnabled
+		? `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${TABLE_MAX_WIDTH}px)`
+		: `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${TABLE_MAX_WIDTH}px)`;
+	return isCommentEditor || isChromelessEditor ? '100%' : maxResizerWidthForNonCommentEditor;
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used in NodeView for TableResizer to set the max width for table resizer container
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS max-width value for the table resizer container.
+ */
+export const getTableResizerItemWidth = (
+	node: PMNode,
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+): number | undefined => {
+	const tableWidthAttribute = getTableContainerWidth(node);
+	if (!node.attrs.width && (isCommentEditor || isChromelessEditor)) {
+		// width undefined would make .resizer-item width to be `auto`
+		return undefined;
+	}
+	return tableWidthAttribute;
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the CSS width value for the table resizer-item.
+ * Because comment and chromeless editors don't have container-type: inline-size set,
+ * we need to calculate the width based on the table node width.
+ * If the table node width is not set, it will return 'auto'.
+ * This is used in table toDOM
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @returns The CSS width value for the table container.
+ */
+export const getTableResizerItemWidthInCSS = (
+	node: PMNode,
+	isCommentEditor?: boolean,
+	isChromelessEditor?: boolean,
+): string => {
+	const tableWidthAttribute = getTableResizerItemWidth(node, isCommentEditor, isChromelessEditor);
+	return tableWidthAttribute ? `${tableWidthAttribute}px` : 'auto';
+};
+
+// eslint-disable-next-line jsdoc/require-example
+/**
+ * This function is used to set the table width --ak-editor-table-width CSS property for full page editor.
+ * Which is applied to the table resizer container.
+ * For Full page appearance, we don't need to use containerWidth from JS, as we can use cqw value.
+ * So we set dynamic containerWidth from JS to CSS property.
+ * @param node The ProseMirror node representing the table.
+ * @param isCommentEditor Whether the editor is in comment mode.
+ * @param isChromelessEditor Whether the editor is chromeless.
+ * @param isTableScalingEnabled Whether table scaling is enabled.
+ * @param tableWidthFromJS The width of the container element. In toDOM it'd be undefined, but will have a value from nodeView.
+ * @returns The CSS width value for the table.
+ */
+export const getTableResizerContainerForFullPageWidthInCSS = (
+	node: PMNode,
+	isTableScalingEnabled?: boolean,
+): string => {
+	const tableWidth = getTableContainerElementWidth(node);
+	// for full page appearance
+	if (isTableScalingEnabled) {
+		return `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${tableWidth}px)`;
+	}
+	return `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${tableWidth}px)`;
+};
+
 export const getTableScalingPercent = (
 	table: PMNode,
 	tableRef: HTMLElement | null,

package/src/tablePlugin.tsx

@@ -309,6 +309,19 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 			// TODO: ED-25901 - We need to move this into a plugin config option so we don't accidentally enable nested nodes in Jira
 			const isNestingSupported = Boolean(options?.tableOptions?.allowNestedTables);
 
+			const isTableFixedColumnWidthsOptionEnabled =
+				options?.getEditorFeatureFlags?.().tableWithFixedColumnWidthsOption || false;
+
+			const shouldUseIncreasedScalingPercent =
+				options?.isTableScalingEnabled &&
+				(isTableFixedColumnWidthsOptionEnabled ||
+					// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
+					options?.isCommentEditor);
+
+			const isTableScalingEnabled = options?.isTableScalingEnabled;
+			const isCommentEditor = options?.isCommentEditor;
+			const isChromelessEditor = options?.isChromelessEditor;
+
 			return isNestingSupported
 				? [
 						{
@@ -318,6 +331,10 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 								tableResizingEnabled: Boolean(options?.tableOptions.allowTableResizing),
 								getEditorContainerWidth: defaultGetEditorContainerWidth,
 								isNestingSupported,
+								isTableScalingEnabled,
+								shouldUseIncreasedScalingPercent,
+								isCommentEditor,
+								isChromelessEditor,
 							}),
 						},
 						{ name: 'tableHeader', node: tableHeaderWithNestedTable },
@@ -332,6 +349,10 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
 								tableResizingEnabled: Boolean(options?.tableOptions.allowTableResizing),
 								getEditorContainerWidth: defaultGetEditorContainerWidth,
 								isNestingSupported,
+								isTableScalingEnabled,
+								shouldUseIncreasedScalingPercent,
+								isCommentEditor,
+								isChromelessEditor,
 							}),
 						},
 						{ name: 'tableHeader', node: tableHeader },

package/tsconfig.app.json

@@ -95,6 +95,9 @@
 		{
 			"path": "../../platform/feature-flags/tsconfig.app.json"
 		},
+		{
+			"path": "../../platform/feature-flags-react/tsconfig.app.json"
+		},
 		{
 			"path": "../../pragmatic-drag-and-drop/core/tsconfig.app.json"
 		},

package/types/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../dist/types/types/index.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../dist/types-ts4.5/types/index.d.ts"
       ]

package/ui/common-styles/package.json

@@ -8,7 +8,7 @@
   ],
   "types": "../../dist/types/ui/common-styles.d.ts",
   "typesVersions": {
-    ">=4.5 <5.4": {
+    ">=4.5 <5.9": {
       "*": [
         "../../dist/types-ts4.5/ui/common-styles.d.ts"
       ]