npm - @dynatrace/strato-components - Versions diffs - 3.0.1 → 3.1.1 - Mend

@dynatrace/strato-components 3.0.1 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3072) hide show

package/esm/tables/DataTable/components/Toolbar/DataTableToolbar.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/Toolbar/DataTableToolbar.tsx"],
-  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\n\nimport type { DataTableColumnSettingsTriggerProps } from './ColumnSettings/column-settings-types.js';\nimport { DataTableColumnOrderSettings } from './ColumnSettings/DataTableColumnOrderSettings.js';\nimport { DataTableColumnPinningSettings } from './ColumnSettings/DataTableColumnPinningSettings.js';\nimport { DataTableColumnSettings } from './ColumnSettings/DataTableColumnSettings.js';\nimport { DataTableColumnSettingsTrigger } from './ColumnSettings/DataTableColumnSettingsTrigger.js';\nimport { DataTableColumnVisibilitySettings } from './ColumnSettings/DataTableColumnVisibilitySettings.js';\nimport { DataTableToolbarMenu } from './DataTableToolbarMenu.js';\nimport {\n  Intent,\n  type IntentProps,\n} from '../../../../core/slots/Intent/Intent.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { DataTablePinnedColumnState } from '../../features/ColumnPinning/column-pinning-types.js';\nimport type { DataTableColumnVisibilityState } from '../../features/ColumnVisibility/column-visibility-types.js';\nimport { DataTableDownload } from '../../features/Download/Download.js';\nimport {\n  DataTableGlobalLineWrapAction,\n  DataTableGlobalLineWrapToolbarAction,\n} from '../../features/LineWrap/LineWrap.js';\n\n/**\n * @public\n */\nexport type DataTableToolbarProps = WithChildren & StylingProps & DataTestId;\n\n/**\n * A helper function to check whether the child component is the TableActions component.\n * @internal\n */\nexport function _isDataTableToolbar(\n  child: ReactElement | null,\n): child is ReactElement<DataTableToolbarProps> {\n  return child?.type === DataTableToolbar;\n}\n\n/**\n * Allowed slots for the DataTableToolbar.\n * @internal\n */\nexport type DataTableToolbarSlots = {\n  visibilitySettings: boolean;\n  columnOrderSettings: boolean;\n  columnPinningSettings: boolean;\n  downloadData: boolean;\n  globalLineWrap: boolean;\n};\n\n/**\n * Props for the DataTableToolbar items.\n * @internal\n */\nexport type DataTableToolbarItemProps = {\n  /**\n   * Column visibility reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnVisibility?: DataTableColumnVisibilityState;\n  /**\n   * Column order reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnOrder?: string[];\n  /**\n   * Column pinning reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnPinning?: DataTablePinnedColumnState;\n  /**\n   * The remaining props for the ColumnSettingsTrigger.\n   */\n  customTriggerProps?: DataTableColumnSettingsTriggerProps;\n  /**\n   * Array of column IDs that can optionally be excluded from the download.\n   */\n  downloadExcludedColumns?: string[];\n  /**\n   * Array of intent props for the `Intent` slot, to render the intent actions in the menu.\n   */\n  intents: Array<IntentProps>;\n};\n\n/**\n * @internal\n */\nexport function getToolbarConfig(children: ReactNode) {\n  const slots: DataTableToolbarSlots = {\n    visibilitySettings: false,\n    columnOrderSettings: false,\n    columnPinningSettings: false,\n    downloadData: false,\n    globalLineWrap: false,\n  };\n  const toolbarItemProps: DataTableToolbarItemProps = { intents: [] };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, DataTableColumnVisibilitySettings)) {\n      slots.visibilitySettings = true;\n      toolbarItemProps.resetColumnVisibility =\n        child.props?.resetColumnVisibility;\n    } else if (isSlot(child, DataTableColumnOrderSettings)) {\n      slots.columnOrderSettings = true;\n      toolbarItemProps.resetColumnOrder = child.props?.resetColumnOrder;\n    } else if (isSlot(child, DataTableColumnPinningSettings)) {\n      slots.columnPinningSettings = true;\n      toolbarItemProps.resetColumnPinning = child.props?.resetColumnPinning;\n    } else if (isSlot(child, DataTableColumnSettingsTrigger)) {\n      toolbarItemProps.customTriggerProps = child.props;\n    } else if (isSlot(child, DataTableDownload)) {\n      slots.downloadData = true;\n      toolbarItemProps.downloadExcludedColumns = child.props?.excludeColumns;\n    } else if (isSlot(child, DataTableGlobalLineWrapAction)) {\n      slots.globalLineWrap = true;\n    } else if (isSlot(child, Intent)) {\n      toolbarItemProps.intents.push(child.props);\n    } else {\n      devLog('Invalid child of DataTableToolbar');\n    }\n  });\n\n  return { slots, toolbarItemProps };\n}\n\n/**\n * Toolbar slot component for general actions that affect the entire table. Positioned above the header.\n * @public\n */\nexport const DataTableToolbar = forwardRef(\n  (\n    props: DataTableToolbarProps,\n    forwardedRef: Ref<HTMLDivElement>,\n  ): ReactElement | null => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const { slots, toolbarItemProps } = getToolbarConfig(children);\n\n    if (Children.count(children) === 0) {\n      return null;\n    }\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-end\"\n        alignItems=\"flex-end\"\n        gap={4}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={{\n          gridArea: '1 / 2 / 2 / 2',\n          ...consumerStyle,\n        }}\n        {...remainingProps}\n      >\n        {(slots.visibilitySettings ||\n          slots.columnOrderSettings ||\n          slots.columnPinningSettings) && (\n          <DataTableColumnSettings\n            customTriggerProps={toolbarItemProps?.customTriggerProps}\n          />\n        )}\n        {slots.globalLineWrap && <DataTableGlobalLineWrapToolbarAction />}\n        {(slots.downloadData || toolbarItemProps.intents.length > 0) && (\n          <DataTableToolbarMenu\n            hasDownloadData={slots.downloadData}\n            downloadExcludedColumns={toolbarItemProps?.downloadExcludedColumns}\n            intents={toolbarItemProps.intents}\n          />\n        )}\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableToolbar as typeof DataTableToolbar & {\n    displayName: string;\n  }\n).displayName = 'DataTable.Toolbar';\n"],
-  "mappings": "AA6JM,SAgBI,KAhBJ;AA7JN;AAAA,EACE;AAAA,EACA;AAAA,OAIK;AAIP,SAAS,oCAAoC;AAC7C,SAAS,sCAAsC;AAC/C,SAAS,+BAA+B;AACxC,SAAS,sCAAsC;AAC/C,SAAS,yCAAyC;AAClD,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,OAEK;AAIP,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,YAAY;AAGrB,SAAS,yBAAyB;AAClC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAWA,SAAS,oBACd,OAC8C;AAC9C,SAAO,OAAO,SAAS;AACzB;AAgDO,SAAS,iBAAiB,UAAqB;AACpD,QAAM,QAA+B;AAAA,IACnC,oBAAoB;AAAA,IACpB,qBAAqB;AAAA,IACrB,uBAAuB;AAAA,IACvB,cAAc;AAAA,IACd,gBAAgB;AAAA,EAClB;AACA,QAAM,mBAA8C,EAAE,SAAS,CAAC,EAAE;AAElE,WAAS,QAAQ,UAAU,CAAC,UAAU;AACpC,QAAI,OAAO,OAAO,iCAAiC,GAAG;AACpD,YAAM,qBAAqB;AAC3B,uBAAiB,wBACf,MAAM,OAAO;AAAA,IACjB,WAAW,OAAO,OAAO,4BAA4B,GAAG;AACtD,YAAM,sBAAsB;AAC5B,uBAAiB,mBAAmB,MAAM,OAAO;AAAA,IACnD,WAAW,OAAO,OAAO,8BAA8B,GAAG;AACxD,YAAM,wBAAwB;AAC9B,uBAAiB,qBAAqB,MAAM,OAAO;AAAA,IACrD,WAAW,OAAO,OAAO,8BAA8B,GAAG;AACxD,uBAAiB,qBAAqB,MAAM;AAAA,IAC9C,WAAW,OAAO,OAAO,iBAAiB,GAAG;AAC3C,YAAM,eAAe;AACrB,uBAAiB,0BAA0B,MAAM,OAAO;AAAA,IAC1D,WAAW,OAAO,OAAO,6BAA6B,GAAG;AACvD,YAAM,iBAAiB;AAAA,IACzB,WAAW,OAAO,OAAO,MAAM,GAAG;AAChC,uBAAiB,QAAQ,KAAK,MAAM,KAAK;AAAA,IAC3C,OAAO;AACL,aAAO,mCAAmC;AAAA,IAC5C;AAAA,EACF,CAAC;AAED,SAAO,EAAE,OAAO,iBAAiB;AACnC;AAMO,MAAM,mBAAmB;AAAA,EAC9B,CACE,OACA,iBACwB;AACxB,UAAM;AAAA,MACJ;AAAA,MACA,eAAe;AAAA,MACf,WAAW;AAAA,MACX,OAAO;AAAA,MACP,GAAG;AAAA,IACL,IAAI;AAEJ,UAAM,EAAE,OAAO,iBAAiB,IAAI,iBAAiB,QAAQ;AAE7D,QAAI,SAAS,MAAM,QAAQ,MAAM,GAAG;AAClC,aAAO;AAAA,IACT;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,gBAAe;AAAA,QACf,YAAW;AAAA,QACX,KAAK;AAAA,QACL,eAAa;AAAA,QACb,WAAW;AAAA,QACX,OAAO;AAAA,UACL,UAAU;AAAA,UACV,GAAG;AAAA,QACL;AAAA,QACC,GAAG;AAAA,QAEF;AAAA,iBAAM,sBACN,MAAM,uBACN,MAAM,0BACN;AAAA,YAAC;AAAA;AAAA,cACC,oBAAoB,kBAAkB;AAAA;AAAA,UACxC;AAAA,UAED,MAAM,kBAAkB,oBAAC,wCAAqC;AAAA,WAC7D,MAAM,gBAAgB,iBAAiB,QAAQ,SAAS,MACxD;AAAA,YAAC;AAAA;AAAA,cACC,iBAAiB,MAAM;AAAA,cACvB,yBAAyB,kBAAkB;AAAA,cAC3C,SAAS,iBAAiB;AAAA;AAAA,UAC5B;AAAA;AAAA;AAAA,IAEJ;AAAA,EAEJ;AACF;AAGE,iBAGA,cAAc;",
+  "sourcesContent": ["import {\n  Children,\n  forwardRef,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n} from 'react';\n\nimport type { DataTableColumnSettingsTriggerProps } from './ColumnSettings/column-settings-types.js';\nimport { DataTableColumnOrderSettings } from './ColumnSettings/DataTableColumnOrderSettings.js';\nimport { DataTableColumnPinningSettings } from './ColumnSettings/DataTableColumnPinningSettings.js';\nimport { DataTableColumnSettings } from './ColumnSettings/DataTableColumnSettings.js';\nimport { DataTableColumnSettingsTrigger } from './ColumnSettings/DataTableColumnSettingsTrigger.js';\nimport { DataTableColumnVisibilitySettings } from './ColumnSettings/DataTableColumnVisibilitySettings.js';\nimport { DataTableToolbarMenu } from './DataTableToolbarMenu.js';\nimport { useBehavioralTrackingProps } from '../../../../core/hooks/useBehavioralTrackingProps.js';\nimport {\n  Intent,\n  type IntentProps,\n} from '../../../../core/slots/Intent/Intent.js';\nimport type { BehaviorTrackingProps } from '../../../../core/types/behavior-tracking-props.js';\nimport type { DataTestId } from '../../../../core/types/data-props.js';\nimport type { StylingProps } from '../../../../core/types/styling-props.js';\nimport type { WithChildren } from '../../../../core/types/with-children.js';\nimport { isSlot } from '../../../../core/utils/is-slot.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { Flex } from '../../../../layouts/flex/Flex.js';\nimport type { DataTablePinnedColumnState } from '../../features/ColumnPinning/column-pinning-types.js';\nimport type { DataTableColumnVisibilityState } from '../../features/ColumnVisibility/column-visibility-types.js';\nimport { DataTableDownload } from '../../features/Download/Download.js';\nimport {\n  DataTableGlobalLineWrapAction,\n  DataTableGlobalLineWrapToolbarAction,\n} from '../../features/LineWrap/LineWrap.js';\n\n/**\n * @public\n */\nexport type DataTableToolbarProps = WithChildren &\n  StylingProps &\n  DataTestId &\n  BehaviorTrackingProps;\n\n/**\n * A helper function to check whether the child component is the DataTableToolbar component.\n * @internal\n */\nexport function _isDataTableToolbar(\n  child: ReactElement | null,\n): child is ReactElement<DataTableToolbarProps> {\n  return child?.type === DataTableToolbar;\n}\n\n/**\n * Allowed slots for the DataTableToolbar.\n * @internal\n */\nexport type DataTableToolbarSlots = {\n  visibilitySettings: boolean;\n  columnOrderSettings: boolean;\n  columnPinningSettings: boolean;\n  downloadData: boolean;\n  globalLineWrap: boolean;\n};\n\n/**\n * Props for the DataTableToolbar items.\n * @internal\n */\nexport type DataTableToolbarItemProps = {\n  /**\n   * Column visibility reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnVisibility?: DataTableColumnVisibilityState;\n  /**\n   * Column order reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnOrder?: string[];\n  /**\n   * Column pinning reset state that will be used to reset and also to enable/disable 'Reset to default' in column settings modal.\n   */\n  resetColumnPinning?: DataTablePinnedColumnState;\n  /**\n   * The remaining props for the ColumnSettingsTrigger.\n   */\n  customTriggerProps?: DataTableColumnSettingsTriggerProps;\n  /**\n   * Array of column IDs that can optionally be excluded from the download.\n   */\n  downloadExcludedColumns?: string[];\n  /**\n   * Callback, that fires once data has been downloaded and indicates which subset of data was downloaded (all, page or selected) and which columns were excluded.\n   */\n  onDownloadData?: (\n    subset: 'all' | 'page' | 'selected',\n    excludedColumns?: string[],\n  ) => void;\n  /**\n   * Array of intent props for the `Intent` slot, to render the intent actions in the menu.\n   */\n  intents: Array<IntentProps>;\n};\n\n/**\n * @internal\n */\nexport function getToolbarConfig(children: ReactNode) {\n  const slots: DataTableToolbarSlots = {\n    visibilitySettings: false,\n    columnOrderSettings: false,\n    columnPinningSettings: false,\n    downloadData: false,\n    globalLineWrap: false,\n  };\n  const toolbarItemProps: DataTableToolbarItemProps = { intents: [] };\n\n  Children.forEach(children, (child) => {\n    if (isSlot(child, DataTableColumnVisibilitySettings)) {\n      slots.visibilitySettings = true;\n      toolbarItemProps.resetColumnVisibility =\n        child.props?.resetColumnVisibility;\n    } else if (isSlot(child, DataTableColumnOrderSettings)) {\n      slots.columnOrderSettings = true;\n      toolbarItemProps.resetColumnOrder = child.props?.resetColumnOrder;\n    } else if (isSlot(child, DataTableColumnPinningSettings)) {\n      slots.columnPinningSettings = true;\n      toolbarItemProps.resetColumnPinning = child.props?.resetColumnPinning;\n    } else if (isSlot(child, DataTableColumnSettingsTrigger)) {\n      toolbarItemProps.customTriggerProps = child.props;\n    } else if (isSlot(child, DataTableDownload)) {\n      slots.downloadData = true;\n      toolbarItemProps.downloadExcludedColumns = child.props?.excludeColumns;\n      toolbarItemProps.onDownloadData = child.props?.onDownloadData;\n    } else if (isSlot(child, DataTableGlobalLineWrapAction)) {\n      slots.globalLineWrap = true;\n    } else if (isSlot(child, Intent)) {\n      toolbarItemProps.intents.push(child.props);\n    } else {\n      devLog('Invalid child of DataTableToolbar');\n    }\n  });\n\n  return { slots, toolbarItemProps };\n}\n\n/**\n * Toolbar slot component for general actions that affect the entire table. Positioned above the header.\n * @public\n */\nexport const DataTableToolbar = forwardRef(\n  (\n    props: DataTableToolbarProps,\n    forwardedRef: Ref<HTMLDivElement>,\n  ): ReactElement | null => {\n    const {\n      children,\n      'data-testid': dataTestId,\n      className: consumerClassName,\n      style: consumerStyle,\n      ...remainingProps\n    } = props;\n\n    const [behavioralTrackingProps, restProps] =\n      useBehavioralTrackingProps(remainingProps);\n\n    const { slots, toolbarItemProps } = getToolbarConfig(children);\n\n    if (Children.count(children) === 0) {\n      return null;\n    }\n\n    return (\n      <Flex\n        ref={forwardedRef}\n        justifyContent=\"flex-end\"\n        alignItems=\"flex-end\"\n        gap={4}\n        data-testid={dataTestId}\n        className={consumerClassName}\n        style={{\n          gridArea: '1 / 2 / 2 / 2',\n          ...consumerStyle,\n        }}\n        {...behavioralTrackingProps}\n        {...restProps}\n      >\n        {(slots.visibilitySettings ||\n          slots.columnOrderSettings ||\n          slots.columnPinningSettings) && (\n          <DataTableColumnSettings\n            customTriggerProps={toolbarItemProps?.customTriggerProps}\n          />\n        )}\n        {slots.globalLineWrap && <DataTableGlobalLineWrapToolbarAction />}\n        {(slots.downloadData || toolbarItemProps.intents.length > 0) && (\n          <DataTableToolbarMenu\n            hasDownloadData={slots.downloadData}\n            downloadExcludedColumns={toolbarItemProps?.downloadExcludedColumns}\n            intents={toolbarItemProps.intents}\n          />\n        )}\n      </Flex>\n    );\n  },\n);\n\n(\n  DataTableToolbar as typeof DataTableToolbar & {\n    displayName: string;\n  }\n).displayName = 'DataTable.Toolbar';\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/constants.js CHANGED Viewed

@@ -98,16 +98,16 @@ const DATA_TABLE_BUILT_IN_COLUMN_IDS = /* @__PURE__ */ new Set([
   DATA_TABLE_ROW_ACTIONS_COLUMN_ID,
   DATA_TABLE_SPACER_COLUMN_ID
 ]);
-const DATA_TABLE_DETAILS_ROW_IDENTIFIER = Symbol(
+const DATA_TABLE_DETAILS_ROW_IDENTIFIER = /* @__PURE__ */ Symbol(
   "DETAILS_ROW_IDENTIFIER"
 );
 const DATA_TABLE_ROW_EXPANDED_ID_SUFFIX = "-expanded";
 const DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX = "-shadow-cell";
-const DATA_TABLE_DETAILS_ROW_PARITY = Symbol("DETAILS_ROW_PARITY");
-const DATA_TABLE_ACTION_FOR_ALL_COLUMNS = Symbol(
+const DATA_TABLE_DETAILS_ROW_PARITY = /* @__PURE__ */ Symbol("DETAILS_ROW_PARITY");
+const DATA_TABLE_ACTION_FOR_ALL_COLUMNS = /* @__PURE__ */ Symbol(
   "Action applies to all columns"
 );
-const DATA_TABLE__DOWNLOAD_CSV_FILE_NAME = "table-data.csv";
+const DATA_TABLE_DOWNLOAD_CSV_FILE_NAME = "table-data.csv";
 const DATA_TABLE_INDEX_COLUMN_HEADER = "index";
 const DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR = "--resizing-leftPosition";
 const DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR = "--resizing-rightPosition";
@@ -147,6 +147,7 @@ export {
   DATA_TABLE_DETAILS_ROW_PARITY,
   DATA_TABLE_DND_NON_TARGET_OPACITY,
   DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR,
+  DATA_TABLE_DOWNLOAD_CSV_FILE_NAME,
   DATA_TABLE_EMPTY_MIN_WIDTH,
   DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN,
   DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN,
@@ -177,7 +178,6 @@ export {
   DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN,
   DATA_TABLE_VISUAL_VARIANT_CONFIG_DEFAULT,
   DATA_TABLE_ZINDEX_CONFIG,
-  DATA_TABLE__DOWNLOAD_CSV_FILE_NAME,
   DEFAULT_DATATABLE_CONFIG
 };
 //# sourceMappingURL=constants.js.map

package/esm/tables/DataTable/constants.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/tables/DataTable/constants.ts"],
-  "sourcesContent": ["import type { ScrollToOptions } from '@tanstack/react-virtual';\n\nimport { DataTableAlignmentColumnDef } from './features/ColumnAlignment.js';\nimport type { DataTableConfig } from './public.api.js';\n\ntype RowDensity = 'default' | 'condensed' | 'comfortable';\n\n// DataTable config props\nexport const DEFAULT_DATATABLE_CONFIG: DataTableConfig = {\n  fullWidth: false,\n  fullHeight: false,\n  lineWrap: false,\n  selectableRows: undefined,\n  resizable: false,\n  sortable: false,\n  pagination: {},\n  variant: {\n    contained: true,\n    fontStyle: 'text',\n    headers: 'default',\n    rowDensity: 'default',\n    rowSeparation: 'horizontalDividers',\n    verticalDividers: false,\n  },\n  columnVisibility: {},\n  rowThresholds: [],\n};\n\n// Visual variant defaults\nexport const DATA_TABLE_VISUAL_VARIANT_CONFIG_DEFAULT = {\n  rowSeparation: 'horizontalDividers',\n  verticalDividers: false,\n  contained: true,\n  rowDensity: 'default',\n  fontStyle: 'text',\n  headers: 'default',\n  verticalAlignment: 'top',\n} as const;\n\n// Pagination\n// ----------\n/** Default page index if pagination is defined, but no page index is set. */\nexport const DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX = 0;\n/** Default page size options for pagination. */\nexport const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS = [\n  10, 20, 50, 100, 250, 500, 1000,\n] as const;\n/** Default page size option (100). */\nexport const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION =\n  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS[3];\n\n// Table sizing\n// -------------------------\n/** Minimum allowed width of a DataTable column (px). */\nexport const DATA_TABLE_MIN_WIDTH = 120;\n/** Minimum width for empty state (px). */\nexport const DATA_TABLE_EMPTY_MIN_WIDTH = 200;\n/** Border width for DataTable (px). */\nexport const DATA_TABLE_BORDER_WIDTH = 2;\n\n// Column sizing and resizing\n// -------------------------\n/** Default minimum width of a DataTable column (px). */\nexport const DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH = 30;\n/** Default width of a DataTable column (px). */\nexport const DATA_TABLE_DEFAULT_COLUMN_WIDTH = 150;\n/** Width of the column resize handle (px). */\nexport const DATA_TABLE_COLUMN_RESIZE_HANDLE_WIDTH = 3;\n/** Minimum width for built-in columns (px). */\nexport const DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH = 24;\n/** Spacer width for sub-rows (px). */\nexport const DATA_TABLE_SUB_ROW_SPACER = 16;\n/** Indentation per sub-row level (px). */\nexport const DATA_TABLE_SUB_ROW_INDENT_GRID = DATA_TABLE_SUB_ROW_SPACER;\n/** Pill size for threshold indicators (px). */\nexport const DATA_TABLE_THRESHOLD_PILL_SIZE = 4;\n/** Width of the cell and column action button (px). */\nexport const DATA_TABLE_ACTION_BUTTON_WIDTH = 24;\n/**\n * When hovering over a header cell, extra CSS padding is applied to make room for the action menu trigger.\n * However, if the column is too narrow, this extra padding causes layout issues.\n * To prevent this, we enforce a minimum width threshold:\n * if the column width is below this threshold, no extra padding is added.\n */\nexport const DATA_TABLE_NARROW_HEADER_THRESHOLDS: Record<RowDensity, number> = {\n  condensed: 28 + 6,\n  default: 34 + 12,\n  comfortable: 38 + 16,\n};\nexport const DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN = -20;\nexport const DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN = -22;\nexport const DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN =\n  DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN +\n  DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN;\n\n// Row sizing and padding\n// ---------------------\n/** Default row heights for different densities (px). */\nexport const DATA_TABLE_ROW_HEIGHT_MAP: Record<RowDensity, number> = {\n  condensed: 24,\n  default: 36,\n  comfortable: 44,\n};\n/** Default top/bottom padding values for different row densities (px). */\nexport const DATA_TABLE_CELL_VERTICAL_PADDING_MAP: Record<RowDensity, number> =\n  {\n    condensed: 2,\n    default: 8,\n    comfortable: 12,\n  };\n/** Paddings for the sub-row indicator column (px). */\nexport const DATA_TABLE_SUB_ROW_DENSITY_PADDING_MAP =\n  DATA_TABLE_CELL_VERTICAL_PADDING_MAP;\n/** Default left/right padding values for different row densities (px). */\nexport const DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP: Record<\n  RowDensity,\n  number\n> = {\n  condensed: 6,\n  default: 12,\n  comfortable: 16,\n};\n/** Border width for rows when row separation is set to 'horizontalDividers' (px). */\nexport const DATA_TABLE_ROW_BORDER = 1;\n/** Height of horizontal divider (px). */\nexport const DATA_TABLE_HORIZONTAL_DIVIDER_HEIGHT = 1;\n/** Default min row height (px). */\nexport const DATA_TABLE_DEFAULT_MIN_ROW_HEIGHT =\n  DATA_TABLE_ROW_HEIGHT_MAP.condensed;\n\n/** Width of the horizontal scroll shadow (px). */\nexport const DATA_TABLE_HORIZONTAL_SCROLL_SHADOW_WIDTH = 50;\n\n// Z-index and layering\n// --------------------\n/** Z-index values used for DataTable layering. */\nexport const DATA_TABLE_ZINDEX_CONFIG = {\n  DEFAULT: 1,\n  STICKY_LEFT: 2,\n  STICKY_RIGHT: 3, // must be higher than left pinned columns to ensure deterministic overlap\n  PINNED_RESIZE_HANDLE: 3,\n  OVERLAY: 4,\n  HEADER: 5,\n  STICKY_SCROLL_SHADOW: 6,\n} as const;\n\n// Built-in column IDs\n// -------------------\nexport const DATA_TABLE_ROW_DRAG_COLUMN_ID = 'DataTableRowDragColumn';\nexport const DATA_TABLE_ROW_SELECTION_COLUMN_ID = 'DataTableRowSelectionColumn';\nexport const DATA_TABLE_ROW_DETAILS_COLUMN_ID = 'DataTableRowDetailsColumn';\nexport const DATA_TABLE_ROW_ACTIONS_COLUMN_ID = 'DataTableRowActions';\nexport const DATA_TABLE_SPACER_COLUMN_ID = 'DataTableSpacerColumn';\nexport const DATA_TABLE_BUILT_IN_COLUMN_IDS = new Set([\n  DATA_TABLE_ROW_DRAG_COLUMN_ID,\n  DATA_TABLE_ROW_SELECTION_COLUMN_ID,\n  DATA_TABLE_ROW_DETAILS_COLUMN_ID,\n  DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  DATA_TABLE_SPACER_COLUMN_ID,\n]);\n\n// Row identifiers and suffixes\n// ---------------------------\n/** Symbol used to identify a row as a details row. */\nexport const DATA_TABLE_DETAILS_ROW_IDENTIFIER = Symbol(\n  'DETAILS_ROW_IDENTIFIER',\n);\n/** Appended to row id of cloned expanded row. */\nexport const DATA_TABLE_ROW_EXPANDED_ID_SUFFIX = '-expanded';\n/** Appended to row id of a pinning shadow cell. */\nexport const DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX = '-shadow-cell';\n/** Symbol used to identify a rows' parity. */\nexport const DATA_TABLE_DETAILS_ROW_PARITY = Symbol('DETAILS_ROW_PARITY');\n/** Symbol used to indicate that an action applies to all columns. */\nexport const DATA_TABLE_ACTION_FOR_ALL_COLUMNS = Symbol(\n  'Action applies to all columns',\n);\n\n// CSV/Download\n// ------------\n/** Default name of the downloaded CSV file. */\nexport const DATA_TABLE__DOWNLOAD_CSV_FILE_NAME = 'table-data.csv';\n/** Column header prepended to CSV file if table has sub-rows. */\nexport const DATA_TABLE_INDEX_COLUMN_HEADER = 'index';\n\n// CSS variables\n// ---------------------------------\n/** CSS variable for left position during column resizing. */\nexport const DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR =\n  '--resizing-leftPosition';\n/** CSS variable for right position during column resizing. */\nexport const DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR =\n  '--resizing-rightPosition';\n/** CSS variable for resizing size. */\nexport const DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR = '--strato-resizing-size';\n/** CSS variable for drag-and-drop placeholder divider top offset. */\nexport const DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR =\n  '--column-dnd-placeholder-divider-top';\n\n// CSS styles\n/** Opacity value for non-target elements during drag-and-drop. */\nexport const DATA_TABLE_DND_NON_TARGET_OPACITY = 0.2;\n\n// Virtualization\n// --------------\n/** Overscan row count for virtualizer. */\nexport const DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN = 20;\n/** Overscan column count for virtualizer. */\nexport const DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN = 5;\n/** Default scrollTo options for virtualizer. */\nexport const DATA_TABLE_DEFAULT_SCROLL_OPTIONS: ScrollToOptions = {\n  align: 'start',\n  behavior: 'auto',\n};\n\n// Miscellaneous\n// -------------\n/** Default icon size (px). */\nexport const DATA_TABLE_DEFAULT_ICON_SIZE = 20;\n/** Default icon padding (px). */\nexport const DATA_TABLE_DEFAULT_ICON_PADDING = 2;\n/** Icon size for sub-row expander (px). */\nexport const DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE =\n  DATA_TABLE_DEFAULT_ICON_SIZE;\n/** Default horizontal alignment for columns if not specified. */\nexport const DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT: Required<DataTableAlignmentColumnDef>['alignment'] =\n  'left';\n"],
-  "mappings": "AAQO,MAAM,2BAA4C;AAAA,EACvD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY,CAAC;AAAA,EACb,SAAS;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,kBAAkB;AAAA,EACpB;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,eAAe,CAAC;AAClB;AAGO,MAAM,2CAA2C;AAAA,EACtD,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,mBAAmB;AACrB;AAKO,MAAM,2CAA2C;AAEjD,MAAM,uCAAuC;AAAA,EAClD;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAC7B;AAEO,MAAM,sCACX,qCAAqC,CAAC;AAKjC,MAAM,uBAAuB;AAE7B,MAAM,6BAA6B;AAEnC,MAAM,0BAA0B;AAKhC,MAAM,sCAAsC;AAE5C,MAAM,kCAAkC;AAExC,MAAM,wCAAwC;AAE9C,MAAM,sCAAsC;AAE5C,MAAM,4BAA4B;AAElC,MAAM,iCAAiC;AAEvC,MAAM,iCAAiC;AAEvC,MAAM,iCAAiC;AAOvC,MAAM,sCAAkE;AAAA,EAC7E,WAAW,KAAK;AAAA,EAChB,SAAS,KAAK;AAAA,EACd,aAAa,KAAK;AACpB;AACO,MAAM,0CAA0C;AAChD,MAAM,0CAA0C;AAChD,MAAM,iDACX,0CACA;AAKK,MAAM,4BAAwD;AAAA,EACnE,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEO,MAAM,uCACX;AAAA,EACE,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEK,MAAM,yCACX;AAEK,MAAM,yCAGT;AAAA,EACF,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEO,MAAM,wBAAwB;AAE9B,MAAM,uCAAuC;AAE7C,MAAM,oCACX,0BAA0B;AAGrB,MAAM,4CAA4C;AAKlD,MAAM,2BAA2B;AAAA,EACtC,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA;AAAA,EACd,sBAAsB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,sBAAsB;AACxB;AAIO,MAAM,gCAAgC;AACtC,MAAM,qCAAqC;AAC3C,MAAM,mCAAmC;AACzC,MAAM,mCAAmC;AACzC,MAAM,8BAA8B;AACpC,MAAM,iCAAiC,oBAAI,IAAI;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAKM,MAAM,oCAAoC;AAAA,EAC/C;AACF;AAEO,MAAM,oCAAoC;AAE1C,MAAM,+CAA+C;AAErD,MAAM,gCAAgC,OAAO,oBAAoB;AAEjE,MAAM,oCAAoC;AAAA,EAC/C;AACF;AAKO,MAAM,qCAAqC;AAE3C,MAAM,iCAAiC;AAKvC,MAAM,4CACX;AAEK,MAAM,6CACX;AAEK,MAAM,0CAA0C;AAEhD,MAAM,6CACX;AAIK,MAAM,oCAAoC;AAK1C,MAAM,sCAAsC;AAE5C,MAAM,yCAAyC;AAE/C,MAAM,oCAAqD;AAAA,EAChE,OAAO;AAAA,EACP,UAAU;AACZ;AAKO,MAAM,+BAA+B;AAErC,MAAM,kCAAkC;AAExC,MAAM,wCACX;AAEK,MAAM,0CACX;",
+  "sourcesContent": ["import { DataTableAlignmentColumnDef } from './features/ColumnAlignment.js';\nimport type { DataTableConfig } from './public.api.js';\n\ntype RowDensity = 'default' | 'condensed' | 'comfortable';\n\n// DataTable config props\nexport const DEFAULT_DATATABLE_CONFIG: DataTableConfig = {\n  fullWidth: false,\n  fullHeight: false,\n  lineWrap: false,\n  selectableRows: undefined,\n  resizable: false,\n  sortable: false,\n  pagination: {},\n  variant: {\n    contained: true,\n    fontStyle: 'text',\n    headers: 'default',\n    rowDensity: 'default',\n    rowSeparation: 'horizontalDividers',\n    verticalDividers: false,\n  },\n  columnVisibility: {},\n  rowThresholds: [],\n};\n\n// Visual variant defaults\nexport const DATA_TABLE_VISUAL_VARIANT_CONFIG_DEFAULT = {\n  rowSeparation: 'horizontalDividers',\n  verticalDividers: false,\n  contained: true,\n  rowDensity: 'default',\n  fontStyle: 'text',\n  headers: 'default',\n  verticalAlignment: 'top',\n} as const;\n\n// Pagination\n// ----------\n/** Default page index if pagination is defined, but no page index is set. */\nexport const DATA_TABLE_DEFAULT_PAGINATION_PAGE_INDEX = 0;\n/** Default page size options for pagination. */\nexport const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS = [\n  10, 20, 50, 100, 250, 500, 1000,\n] as const;\n/** Default page size option (100). */\nexport const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION =\n  DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS[3];\n\n// Table sizing\n// -------------------------\n/** Minimum allowed width of a DataTable column (px). */\nexport const DATA_TABLE_MIN_WIDTH = 120;\n/** Minimum width for empty state (px). */\nexport const DATA_TABLE_EMPTY_MIN_WIDTH = 200;\n/** Border width for DataTable (px). */\nexport const DATA_TABLE_BORDER_WIDTH = 2;\n\n// Column sizing and resizing\n// -------------------------\n/** Default minimum width of a DataTable column (px). */\nexport const DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH = 30;\n/** Default width of a DataTable column (px). */\nexport const DATA_TABLE_DEFAULT_COLUMN_WIDTH = 150;\n/** Width of the column resize handle (px). */\nexport const DATA_TABLE_COLUMN_RESIZE_HANDLE_WIDTH = 3;\n/** Minimum width for built-in columns (px). */\nexport const DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH = 24;\n/** Spacer width for sub-rows (px). */\nexport const DATA_TABLE_SUB_ROW_SPACER = 16;\n/** Indentation per sub-row level (px). */\nexport const DATA_TABLE_SUB_ROW_INDENT_GRID = DATA_TABLE_SUB_ROW_SPACER;\n/** Pill size for threshold indicators (px). */\nexport const DATA_TABLE_THRESHOLD_PILL_SIZE = 4;\n/** Width of the cell and column action button (px). */\nexport const DATA_TABLE_ACTION_BUTTON_WIDTH = 24;\n/**\n * When hovering over a header cell, extra CSS padding is applied to make room for the action menu trigger.\n * However, if the column is too narrow, this extra padding causes layout issues.\n * To prevent this, we enforce a minimum width threshold:\n * if the column width is below this threshold, no extra padding is added.\n */\nexport const DATA_TABLE_NARROW_HEADER_THRESHOLDS: Record<RowDensity, number> = {\n  condensed: 28 + 6,\n  default: 34 + 12,\n  comfortable: 38 + 16,\n};\nexport const DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN = -20;\nexport const DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN = -22;\nexport const DATA_TABLE_HEADER_SORTED_ACTION_HOVERED_MARGIN =\n  DATA_TABLE_HEADER_SORTED_HOVERED_MARGIN +\n  DATA_TABLE_HEADER_ACTION_HOVERED_MARGIN;\n\n// Row sizing and padding\n// ---------------------\n/** Default row heights for different densities (px). */\nexport const DATA_TABLE_ROW_HEIGHT_MAP: Record<RowDensity, number> = {\n  condensed: 24,\n  default: 36,\n  comfortable: 44,\n};\n/** Default top/bottom padding values for different row densities (px). */\nexport const DATA_TABLE_CELL_VERTICAL_PADDING_MAP: Record<RowDensity, number> =\n  {\n    condensed: 2,\n    default: 8,\n    comfortable: 12,\n  };\n/** Paddings for the sub-row indicator column (px). */\nexport const DATA_TABLE_SUB_ROW_DENSITY_PADDING_MAP =\n  DATA_TABLE_CELL_VERTICAL_PADDING_MAP;\n/** Default left/right padding values for different row densities (px). */\nexport const DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP: Record<\n  RowDensity,\n  number\n> = {\n  condensed: 6,\n  default: 12,\n  comfortable: 16,\n};\n/** Border width for rows when row separation is set to 'horizontalDividers' (px). */\nexport const DATA_TABLE_ROW_BORDER = 1;\n/** Height of horizontal divider (px). */\nexport const DATA_TABLE_HORIZONTAL_DIVIDER_HEIGHT = 1;\n/** Default min row height (px). */\nexport const DATA_TABLE_DEFAULT_MIN_ROW_HEIGHT =\n  DATA_TABLE_ROW_HEIGHT_MAP.condensed;\n\n/** Width of the horizontal scroll shadow (px). */\nexport const DATA_TABLE_HORIZONTAL_SCROLL_SHADOW_WIDTH = 50;\n\n// Z-index and layering\n// --------------------\n/** Z-index values used for DataTable layering. */\nexport const DATA_TABLE_ZINDEX_CONFIG = {\n  DEFAULT: 1,\n  STICKY_LEFT: 2,\n  STICKY_RIGHT: 3, // must be higher than left pinned columns to ensure deterministic overlap\n  PINNED_RESIZE_HANDLE: 3,\n  OVERLAY: 4,\n  HEADER: 5,\n  STICKY_SCROLL_SHADOW: 6,\n} as const;\n\n// Built-in column IDs\n// -------------------\nexport const DATA_TABLE_ROW_DRAG_COLUMN_ID = 'DataTableRowDragColumn';\nexport const DATA_TABLE_ROW_SELECTION_COLUMN_ID = 'DataTableRowSelectionColumn';\nexport const DATA_TABLE_ROW_DETAILS_COLUMN_ID = 'DataTableRowDetailsColumn';\nexport const DATA_TABLE_ROW_ACTIONS_COLUMN_ID = 'DataTableRowActions';\nexport const DATA_TABLE_SPACER_COLUMN_ID = 'DataTableSpacerColumn';\nexport const DATA_TABLE_BUILT_IN_COLUMN_IDS = new Set([\n  DATA_TABLE_ROW_DRAG_COLUMN_ID,\n  DATA_TABLE_ROW_SELECTION_COLUMN_ID,\n  DATA_TABLE_ROW_DETAILS_COLUMN_ID,\n  DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  DATA_TABLE_SPACER_COLUMN_ID,\n]);\n\n// Row identifiers and suffixes\n// ---------------------------\n/** Symbol used to identify a row as a details row. */\nexport const DATA_TABLE_DETAILS_ROW_IDENTIFIER = Symbol(\n  'DETAILS_ROW_IDENTIFIER',\n);\n/** Appended to row id of cloned expanded row. */\nexport const DATA_TABLE_ROW_EXPANDED_ID_SUFFIX = '-expanded';\n/** Appended to row id of a pinning shadow cell. */\nexport const DATA_TABLE_PINNING_SHADOW_CELL_ROW_ID_SUFFIX = '-shadow-cell';\n/** Symbol used to identify a rows' parity. */\nexport const DATA_TABLE_DETAILS_ROW_PARITY = Symbol('DETAILS_ROW_PARITY');\n/** Symbol used to indicate that an action applies to all columns. */\nexport const DATA_TABLE_ACTION_FOR_ALL_COLUMNS = Symbol(\n  'Action applies to all columns',\n);\n\n// CSV/Download\n// ------------\n/** Default name of the downloaded CSV file. */\nexport const DATA_TABLE_DOWNLOAD_CSV_FILE_NAME = 'table-data.csv';\n/** Column header prepended to CSV file if table has sub-rows. */\nexport const DATA_TABLE_INDEX_COLUMN_HEADER = 'index';\n\n// CSS variables\n// ---------------------------------\n/** CSS variable for left position during column resizing. */\nexport const DATA_TABLE_RESIZING_LEFT_POSITION_CSS_VAR =\n  '--resizing-leftPosition';\n/** CSS variable for right position during column resizing. */\nexport const DATA_TABLE_RESIZING_RIGHT_POSITION_CSS_VAR =\n  '--resizing-rightPosition';\n/** CSS variable for resizing size. */\nexport const DATA_TABLE_STRATO_RESIZING_SIZE_CSS_VAR = '--strato-resizing-size';\n/** CSS variable for drag-and-drop placeholder divider top offset. */\nexport const DATA_TABLE_DND_PLACEHOLDER_DIVIDER_CSS_VAR =\n  '--column-dnd-placeholder-divider-top';\n\n// CSS styles\n/** Opacity value for non-target elements during drag-and-drop. */\nexport const DATA_TABLE_DND_NON_TARGET_OPACITY = 0.2;\n\n// Virtualization\n// --------------\n/** Overscan row count for virtualizer. */\nexport const DATA_TABLE_VIRTUALIZER_ROW_OVERSCAN = 20;\n/** Overscan column count for virtualizer. */\nexport const DATA_TABLE_VIRTUALIZER_COLUMN_OVERSCAN = 5;\n/** Default scrollTo options for virtualizer. */\nexport const DATA_TABLE_DEFAULT_SCROLL_OPTIONS: {\n  align: 'start' | 'center' | 'end';\n  behavior: 'auto' | 'smooth';\n} = {\n  align: 'start',\n  behavior: 'auto',\n};\n\n// Miscellaneous\n// -------------\n/** Default icon size (px). */\nexport const DATA_TABLE_DEFAULT_ICON_SIZE = 20;\n/** Default icon padding (px). */\nexport const DATA_TABLE_DEFAULT_ICON_PADDING = 2;\n/** Icon size for sub-row expander (px). */\nexport const DATA_TABLE_SUB_ROW_EXPANDER_ICON_SIZE =\n  DATA_TABLE_DEFAULT_ICON_SIZE;\n/** Default horizontal alignment for columns if not specified. */\nexport const DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT: Required<DataTableAlignmentColumnDef>['alignment'] =\n  'left';\n"],
+  "mappings": "AAMO,MAAM,2BAA4C;AAAA,EACvD,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,gBAAgB;AAAA,EAChB,WAAW;AAAA,EACX,UAAU;AAAA,EACV,YAAY,CAAC;AAAA,EACb,SAAS;AAAA,IACP,WAAW;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,eAAe;AAAA,IACf,kBAAkB;AAAA,EACpB;AAAA,EACA,kBAAkB,CAAC;AAAA,EACnB,eAAe,CAAC;AAClB;AAGO,MAAM,2CAA2C;AAAA,EACtD,eAAe;AAAA,EACf,kBAAkB;AAAA,EAClB,WAAW;AAAA,EACX,YAAY;AAAA,EACZ,WAAW;AAAA,EACX,SAAS;AAAA,EACT,mBAAmB;AACrB;AAKO,MAAM,2CAA2C;AAEjD,MAAM,uCAAuC;AAAA,EAClD;AAAA,EAAI;AAAA,EAAI;AAAA,EAAI;AAAA,EAAK;AAAA,EAAK;AAAA,EAAK;AAC7B;AAEO,MAAM,sCACX,qCAAqC,CAAC;AAKjC,MAAM,uBAAuB;AAE7B,MAAM,6BAA6B;AAEnC,MAAM,0BAA0B;AAKhC,MAAM,sCAAsC;AAE5C,MAAM,kCAAkC;AAExC,MAAM,wCAAwC;AAE9C,MAAM,sCAAsC;AAE5C,MAAM,4BAA4B;AAElC,MAAM,iCAAiC;AAEvC,MAAM,iCAAiC;AAEvC,MAAM,iCAAiC;AAOvC,MAAM,sCAAkE;AAAA,EAC7E,WAAW,KAAK;AAAA,EAChB,SAAS,KAAK;AAAA,EACd,aAAa,KAAK;AACpB;AACO,MAAM,0CAA0C;AAChD,MAAM,0CAA0C;AAChD,MAAM,iDACX,0CACA;AAKK,MAAM,4BAAwD;AAAA,EACnE,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEO,MAAM,uCACX;AAAA,EACE,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEK,MAAM,yCACX;AAEK,MAAM,yCAGT;AAAA,EACF,WAAW;AAAA,EACX,SAAS;AAAA,EACT,aAAa;AACf;AAEO,MAAM,wBAAwB;AAE9B,MAAM,uCAAuC;AAE7C,MAAM,oCACX,0BAA0B;AAGrB,MAAM,4CAA4C;AAKlD,MAAM,2BAA2B;AAAA,EACtC,SAAS;AAAA,EACT,aAAa;AAAA,EACb,cAAc;AAAA;AAAA,EACd,sBAAsB;AAAA,EACtB,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,sBAAsB;AACxB;AAIO,MAAM,gCAAgC;AACtC,MAAM,qCAAqC;AAC3C,MAAM,mCAAmC;AACzC,MAAM,mCAAmC;AACzC,MAAM,8BAA8B;AACpC,MAAM,iCAAiC,oBAAI,IAAI;AAAA,EACpD;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,CAAC;AAKM,MAAM,oCAAoC;AAAA,EAC/C;AACF;AAEO,MAAM,oCAAoC;AAE1C,MAAM,+CAA+C;AAErD,MAAM,gCAAgC,uBAAO,oBAAoB;AAEjE,MAAM,oCAAoC;AAAA,EAC/C;AACF;AAKO,MAAM,oCAAoC;AAE1C,MAAM,iCAAiC;AAKvC,MAAM,4CACX;AAEK,MAAM,6CACX;AAEK,MAAM,0CAA0C;AAEhD,MAAM,6CACX;AAIK,MAAM,oCAAoC;AAK1C,MAAM,sCAAsC;AAE5C,MAAM,yCAAyC;AAE/C,MAAM,oCAGT;AAAA,EACF,OAAO;AAAA,EACP,UAAU;AACZ;AAKO,MAAM,+BAA+B;AAErC,MAAM,kCAAkC;AAExC,MAAM,wCACX;AAEK,MAAM,0CACX;",
   "names": []
 }

package/esm/tables/DataTable/features/CellFormatter/CellFormatter.js CHANGED Viewed

@@ -4,20 +4,49 @@ import {
   adjustFractionDigits,
   format,
   formatCurrency,
-  formatDate,
+  formatDate as formatDatetime,
   formatLong,
   units
 } from "@dynatrace-sdk/units";
 import {
+  DATETIME_DEFAULT_FORMAT_OPTIONS,
   formatCurrencyDefault,
-  formatDateDefault
+  formatDatetimeDefault
 } from "../../../../core/utils/default-formatters.js";
 import { devLog } from "../../../../core/utils/logging.js";
 import { convertToNumberIfPureNumber } from "../../../../core/utils/string-utils.js";
-const ColumnCellDateFormatMemo = memo(
+const DATETIME_FORMAT_OPTIONS = {
+  // e.g. "12/21/2024" for US English locale
+  date: {
+    year: "numeric",
+    month: "numeric",
+    day: "numeric"
+  },
+  // e.g. "5:45:30 PM" for US English locale
+  time: {
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric"
+  },
+  // e.g. "12/21/2024, 5:45:30 PM" for US English locale
+  datetime: DATETIME_DEFAULT_FORMAT_OPTIONS
+};
+function isDatetimeShorthand(formatter) {
+  return formatter === "date" || formatter === "time" || formatter === "datetime";
+}
+function resolveDatetimeFormatter(formatter) {
+  if (!formatter) {
+    return void 0;
+  }
+  if (isDatetimeShorthand(formatter)) {
+    return DATETIME_FORMAT_OPTIONS[formatter];
+  }
+  return formatter;
+}
+const ColumnCellDatetimeFormatMemo = memo(
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   (props) => {
-    return props.value ? formatDate(Number(props.value), props.formatter) : "";
+    return props.value ? formatDatetime(Number(props.value), props.formatter) : "";
   }
 );
 const ColumnCellCurrencyFormatMemo = memo(
@@ -48,12 +77,13 @@ function formatColumnCell(columnDef) {
   if (columnDef.columnType === "sparkline" || columnDef.columnType === "meterbar" || columnDef.columnType === "gantt" || columnDef.columnType === "log-content" || columnDef.columnType === "markdown") {
     return;
   }
-  if (columnDef.columnType === "date") {
+  if (columnDef.columnType === "date" || columnDef.columnType === "datetime") {
+    const resolvedFormatter = resolveDatetimeFormatter(columnDef.formatter);
     return ({ getValue }) => /* @__PURE__ */ jsx(
-      ColumnCellDateFormatMemo,
+      ColumnCellDatetimeFormatMemo,
       {
         value: getValue(),
-        formatter: columnDef.formatter
+        formatter: resolvedFormatter
       }
     );
   }
@@ -103,7 +133,8 @@ function formatCellValue(value, column) {
     return "";
   }
   const cleanedValue = typeof value === "number" || value instanceof Date ? value : Number.isNaN(+value) ? null : convertToNumberIfPureNumber(value);
-  if (column.formatter && column.columnType !== "date" && column.columnType !== "currency" && typeof cleanedValue === "number") {
+  if (column.formatter && // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.
+  column.columnType !== "date" && column.columnType !== "datetime" && column.columnType !== "currency" && typeof cleanedValue === "number") {
     const formatOptions = column.formatter;
     return format(cleanedValue, formatOptions);
   }
@@ -121,12 +152,15 @@ function formatCellValue(value, column) {
   if (column.columnType === "long" && (typeof value === "string" || typeof value === "bigint" || typeof value === "number")) {
     return formatLong(value, column.formatter);
   }
-  if (column.columnType === "date" && (typeof cleanedValue === "number" || cleanedValue instanceof Date)) {
-    const formatOptions = column.formatter;
-    if (formatOptions) {
-      return formatDate(cleanedValue, formatOptions);
+  if (
+    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType
+    (column.columnType === "date" || column.columnType === "datetime") && (typeof cleanedValue === "number" || cleanedValue instanceof Date)
+  ) {
+    const resolvedFormatter = resolveDatetimeFormatter(column.formatter);
+    if (resolvedFormatter) {
+      return formatDatetime(cleanedValue, resolvedFormatter);
     } else {
-      return formatDateDefault(cleanedValue);
+      return formatDatetimeDefault(cleanedValue);
     }
   }
   if (column.columnType === "currency" && typeof cleanedValue === "number") {

package/esm/tables/DataTable/features/CellFormatter/CellFormatter.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/CellFormatter/CellFormatter.tsx"],
-  "sourcesContent": ["import { memo, type ReactNode } from 'react';\n\nimport {\n  adjustFractionDigits,\n  type ConvertibleUnit,\n  format,\n  formatCurrency,\n  formatDate,\n  type FormatDateOptions,\n  formatLong,\n  type FormatOptions,\n  type Unit,\n  units,\n} from '@dynatrace-sdk/units';\n\nimport type { FormatterCurrencyOptions } from './cell-formatter-types.js';\nimport {\n  formatCurrencyDefault,\n  formatDateDefault,\n} from '../../../../core/utils/default-formatters.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { convertToNumberIfPureNumber } from '../../../../core/utils/string-utils.js';\nimport type { CellContext, ColumnDefBase } from '../../hooks/useTable/types.js';\nimport type { DataTableDisplayColumnDef } from '../../public.api.js';\n\n/** Memoized renderer for date formats */\nconst ColumnCellDateFormatMemo = memo(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (props: { value: any; formatter?: FormatDateOptions }) => {\n    return props.value ? formatDate(Number(props.value), props.formatter) : '';\n  },\n);\n\n/** Memoized renderer for currency formats */\nconst ColumnCellCurrencyFormatMemo = memo(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (props: { value: any; formatter?: FormatterCurrencyOptions }) => {\n    if (\n      props.value === null ||\n      props.value === undefined ||\n      isNaN(props.value)\n    ) {\n      // value is not a valid number\n      return '';\n    }\n\n    const { currency, ...options } = props.formatter ?? {};\n    if (!currency) {\n      // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n      return formatCurrencyDefault(Number(props.value), options);\n    }\n\n    return formatCurrency(Number(props.value), currency, options);\n  },\n);\n\n/** Memoized renderer for fallback formats */\nconst ColumnCellFormatMemo = memo(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (props: { value: any; formatter?: FormatDateOptions }) => {\n    return format(Number(props.value), props.formatter);\n  },\n);\n\nconst ColumnCellFormatLongMemo = memo(\n  (props: {\n    value: string | number | bigint;\n    formatter?: Pick<\n      FormatOptions<Unit, ConvertibleUnit>,\n      | 'locale'\n      | 'maximumFractionDigits'\n      | 'maximumSignificantDigits'\n      | 'minimumFractionDigits'\n      | 'minimumSignificantDigits'\n      | 'useGrouping'\n    >;\n  }) => {\n    return formatLong(props.value, props.formatter);\n  },\n);\n\n/**\n * Function that formats the cell value based on the formatter specified in the column definition\n * @param columnDef - the table column definition\n *\n * @returns the formatted cell value\n */\nfunction formatColumnCell<TData, TValue>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n): ((props: CellContext<TData, TValue>) => ReactNode) | undefined {\n  if (\n    columnDef.columnType === 'sparkline' ||\n    columnDef.columnType === 'meterbar' ||\n    columnDef.columnType === 'gantt' ||\n    columnDef.columnType === 'log-content' ||\n    columnDef.columnType === 'markdown'\n  ) {\n    return;\n  }\n\n  if (columnDef.columnType === 'date') {\n    return ({ getValue }) => (\n      <ColumnCellDateFormatMemo\n        value={getValue()}\n        formatter={columnDef.formatter}\n      />\n    );\n  }\n\n  if (columnDef.columnType === 'currency') {\n    return ({ getValue }) => (\n      <ColumnCellCurrencyFormatMemo\n        value={getValue()}\n        formatter={columnDef.formatter}\n      />\n    );\n  }\n\n  if (columnDef.columnType === 'long') {\n    return ({ getValue }) => {\n      const value = getValue();\n      if (\n        typeof value === 'string' ||\n        typeof value === 'bigint' ||\n        typeof value === 'number'\n      ) {\n        return (\n          <ColumnCellFormatLongMemo\n            value={value}\n            formatter={columnDef.formatter}\n          />\n        );\n      }\n      return String(value);\n    };\n  }\n\n  return ({ getValue }) => (\n    <ColumnCellFormatMemo value={getValue()} formatter={columnDef.formatter} />\n  );\n}\n\n/**\n * Updates the cell renderer with the formatter from the column definition\n * @param columnDef - column definition prop\n *\n * @returns the column definition with the formatter applied\n * @internal\n */\nexport function applyColumnFormatters<TData, TValue>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n): { cell?: ColumnDefBase<TData, TValue>['cell'] } {\n  if (\n    columnDef.columnType === 'sparkline' ||\n    columnDef.columnType === 'meterbar' ||\n    columnDef.columnType === 'gantt' ||\n    columnDef.columnType === 'log-content' ||\n    columnDef.columnType === 'markdown'\n  ) {\n    return {};\n  }\n\n  if (columnDef.formatter) {\n    return {\n      cell: formatColumnCell(columnDef),\n    };\n  }\n\n  return {};\n}\n\n/**\n * Formats the given value based on formatter options from the column definition.\n * For 'sparkline', 'meterbar', 'gantt', and 'log-content', returns an empty string.\n * If there is no other formatter possible then returns a stringified value.\n * @param value - the cell value to format.\n * @param column - column definition prop where `columnType` and `formatter` are relevant.\n *\n * @returns the formatted cell value\n * @internal\n */\nexport function formatCellValue<TData, TValue>(\n  value: TValue,\n  column: DataTableDisplayColumnDef<TData, TValue>,\n): string {\n  if (\n    column.columnType === 'sparkline' ||\n    column.columnType === 'meterbar' ||\n    column.columnType === 'gantt' ||\n    column.columnType === 'log-content' ||\n    column.columnType === 'markdown'\n  ) {\n    return '';\n  }\n\n  if (value === null || value === undefined) {\n    devLog(`The value '${value}' can not be formatted!`);\n    return '';\n  }\n\n  const cleanedValue =\n    typeof value === 'number' || value instanceof Date\n      ? value\n      : Number.isNaN(+value)\n      ? null\n      : convertToNumberIfPureNumber(value as string);\n\n  if (\n    column.formatter &&\n    column.columnType !== 'date' &&\n    column.columnType !== 'currency' &&\n    typeof cleanedValue === 'number'\n  ) {\n    const formatOptions = column.formatter;\n    return format(cleanedValue, formatOptions);\n  }\n\n  if (column.columnType === 'bit' && typeof cleanedValue === 'number') {\n    const formatOptions = { input: units.data.bit };\n    return format(cleanedValue, formatOptions);\n  }\n\n  if (column.columnType === 'number' && typeof cleanedValue === 'number') {\n    const formatOptions = column.formatter;\n    if (formatOptions) {\n      return format(cleanedValue, formatOptions);\n    }\n    return adjustFractionDigits(cleanedValue);\n  }\n\n  if (\n    column.columnType === 'long' &&\n    (typeof value === 'string' ||\n      typeof value === 'bigint' ||\n      typeof value === 'number')\n  ) {\n    return formatLong(value, column.formatter);\n  }\n\n  if (\n    column.columnType === 'date' &&\n    (typeof cleanedValue === 'number' || cleanedValue instanceof Date)\n  ) {\n    const formatOptions = column.formatter;\n    if (formatOptions) {\n      return formatDate(cleanedValue, formatOptions);\n    } else {\n      return formatDateDefault(cleanedValue);\n    }\n  }\n\n  if (column.columnType === 'currency' && typeof cleanedValue === 'number') {\n    const formatOptions = column.formatter;\n    const { currency, ...remainingOptions } = formatOptions ?? {};\n    if (!currency) {\n      // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n      return formatCurrencyDefault(cleanedValue, remainingOptions);\n    }\n\n    return formatCurrency(cleanedValue, currency, remainingOptions);\n  }\n\n  devLog(`The value '${value}' can not be formatted!`);\n  return String(value);\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { memo, type ReactNode } from 'react';\n\nimport {\n  adjustFractionDigits,\n  type ConvertibleUnit,\n  format,\n  formatCurrency,\n  formatDate as formatDatetime,\n  type FormatDateOptions,\n  formatLong,\n  type FormatOptions,\n  type Unit,\n  units,\n} from '@dynatrace-sdk/units';\n\nimport type {\n  DataTableDatetimeDisplayMode,\n  FormatterCurrencyOptions,\n} from './cell-formatter-types.js';\nimport {\n  DATETIME_DEFAULT_FORMAT_OPTIONS,\n  formatCurrencyDefault,\n  formatDatetimeDefault,\n} from '../../../../core/utils/default-formatters.js';\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { convertToNumberIfPureNumber } from '../../../../core/utils/string-utils.js';\nimport type { CellContext, ColumnDefBase } from '../../hooks/useTable/types.js';\nimport type { DataTableDisplayColumnDef } from '../../public.api.js';\n\n/**\n * Format options for each `DataTableDatetimeDisplayMode` shorthand.\n * @internal\n */\nconst DATETIME_FORMAT_OPTIONS: Record<\n  DataTableDatetimeDisplayMode,\n  FormatDateOptions\n> = {\n  // e.g. \"12/21/2024\" for US English locale\n  date: {\n    year: 'numeric',\n    month: 'numeric',\n    day: 'numeric',\n  },\n  // e.g. \"5:45:30 PM\" for US English locale\n  time: {\n    hour: 'numeric',\n    minute: 'numeric',\n    second: 'numeric',\n  },\n  // e.g. \"12/21/2024, 5:45:30 PM\" for US English locale\n  datetime: DATETIME_DEFAULT_FORMAT_OPTIONS,\n};\n\n/**\n * Typeguard to check if a formatter value is a `DataTableDatetimeDisplayMode` shorthand string.\n * @internal\n */\nfunction isDatetimeShorthand(\n  formatter: unknown,\n): formatter is DataTableDatetimeDisplayMode {\n  return (\n    formatter === 'date' || formatter === 'time' || formatter === 'datetime'\n  );\n}\n\n/**\n * Resolves the effective `FormatDateOptions` for a datetime column.\n * Accepts either a `FormatDateOptions` object, a `DataTableDatetimeDisplayMode`\n * shorthand string, or `undefined`.\n * @internal\n */\nfunction resolveDatetimeFormatter(\n  formatter: FormatDateOptions | DataTableDatetimeDisplayMode | undefined,\n): FormatDateOptions | undefined {\n  if (!formatter) {\n    return undefined;\n  }\n  if (isDatetimeShorthand(formatter)) {\n    return DATETIME_FORMAT_OPTIONS[formatter];\n  }\n  return formatter;\n}\n\n/** Memoized renderer for datetime formats */\nconst ColumnCellDatetimeFormatMemo = memo(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (props: { value: any; formatter?: FormatDateOptions }) => {\n    return props.value\n      ? formatDatetime(Number(props.value), props.formatter)\n      : '';\n  },\n);\n\n/** Memoized renderer for currency formats */\nconst ColumnCellCurrencyFormatMemo = memo(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (props: { value: any; formatter?: FormatterCurrencyOptions }) => {\n    if (\n      props.value === null ||\n      props.value === undefined ||\n      isNaN(props.value)\n    ) {\n      // value is not a valid number\n      return '';\n    }\n\n    const { currency, ...options } = props.formatter ?? {};\n    if (!currency) {\n      // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n      return formatCurrencyDefault(Number(props.value), options);\n    }\n\n    return formatCurrency(Number(props.value), currency, options);\n  },\n);\n\n/** Memoized renderer for fallback formats */\nconst ColumnCellFormatMemo = memo(\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  (props: { value: any; formatter?: FormatDateOptions }) => {\n    return format(Number(props.value), props.formatter);\n  },\n);\n\nconst ColumnCellFormatLongMemo = memo(\n  (props: {\n    value: string | number | bigint;\n    formatter?: Pick<\n      FormatOptions<Unit, ConvertibleUnit>,\n      | 'locale'\n      | 'maximumFractionDigits'\n      | 'maximumSignificantDigits'\n      | 'minimumFractionDigits'\n      | 'minimumSignificantDigits'\n      | 'useGrouping'\n    >;\n  }) => {\n    return formatLong(props.value, props.formatter);\n  },\n);\n\n/**\n * Function that formats the cell value based on the formatter specified in the column definition\n * @param columnDef - the table column definition\n *\n * @returns the formatted cell value\n */\nfunction formatColumnCell<TData, TValue>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n): ((props: CellContext<TData, TValue>) => ReactNode) | undefined {\n  if (\n    columnDef.columnType === 'sparkline' ||\n    columnDef.columnType === 'meterbar' ||\n    columnDef.columnType === 'gantt' ||\n    columnDef.columnType === 'log-content' ||\n    columnDef.columnType === 'markdown'\n  ) {\n    return;\n  }\n\n  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n  if (columnDef.columnType === 'date' || columnDef.columnType === 'datetime') {\n    const resolvedFormatter = resolveDatetimeFormatter(columnDef.formatter);\n    return ({ getValue }) => (\n      <ColumnCellDatetimeFormatMemo\n        value={getValue()}\n        formatter={resolvedFormatter}\n      />\n    );\n  }\n\n  if (columnDef.columnType === 'currency') {\n    return ({ getValue }) => (\n      <ColumnCellCurrencyFormatMemo\n        value={getValue()}\n        formatter={columnDef.formatter}\n      />\n    );\n  }\n\n  if (columnDef.columnType === 'long') {\n    return ({ getValue }) => {\n      const value = getValue();\n      if (\n        typeof value === 'string' ||\n        typeof value === 'bigint' ||\n        typeof value === 'number'\n      ) {\n        return (\n          <ColumnCellFormatLongMemo\n            value={value}\n            formatter={columnDef.formatter}\n          />\n        );\n      }\n      return String(value);\n    };\n  }\n\n  return ({ getValue }) => (\n    <ColumnCellFormatMemo value={getValue()} formatter={columnDef.formatter} />\n  );\n}\n\n/**\n * Updates the cell renderer with the formatter from the column definition\n * @param columnDef - column definition prop\n *\n * @returns the column definition with the formatter applied\n * @internal\n */\nexport function applyColumnFormatters<TData, TValue>(\n  columnDef: DataTableDisplayColumnDef<TData, TValue>,\n): { cell?: ColumnDefBase<TData, TValue>['cell'] } {\n  if (\n    columnDef.columnType === 'sparkline' ||\n    columnDef.columnType === 'meterbar' ||\n    columnDef.columnType === 'gantt' ||\n    columnDef.columnType === 'log-content' ||\n    columnDef.columnType === 'markdown'\n  ) {\n    return {};\n  }\n\n  if (columnDef.formatter) {\n    return {\n      cell: formatColumnCell(columnDef),\n    };\n  }\n\n  return {};\n}\n\n/**\n * Formats the given value based on formatter options from the column definition.\n * For 'sparkline', 'meterbar', 'gantt', and 'log-content', returns an empty string.\n * If there is no other formatter possible then returns a stringified value.\n * @param value - the cell value to format.\n * @param column - column definition prop where `columnType` and `formatter` are relevant.\n *\n * @returns the formatted cell value\n * @internal\n */\nexport function formatCellValue<TData, TValue>(\n  value: TValue,\n  column: DataTableDisplayColumnDef<TData, TValue>,\n): string {\n  if (\n    column.columnType === 'sparkline' ||\n    column.columnType === 'meterbar' ||\n    column.columnType === 'gantt' ||\n    column.columnType === 'log-content' ||\n    column.columnType === 'markdown'\n  ) {\n    return '';\n  }\n\n  if (value === null || value === undefined) {\n    devLog(`The value '${value}' can not be formatted!`);\n    return '';\n  }\n\n  const cleanedValue =\n    typeof value === 'number' || value instanceof Date\n      ? value\n      : Number.isNaN(+value)\n      ? null\n      : convertToNumberIfPureNumber(value as string);\n\n  if (\n    column.formatter &&\n    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.\n    column.columnType !== 'date' &&\n    column.columnType !== 'datetime' &&\n    column.columnType !== 'currency' &&\n    typeof cleanedValue === 'number'\n  ) {\n    const formatOptions = column.formatter;\n    return format(cleanedValue, formatOptions);\n  }\n\n  if (column.columnType === 'bit' && typeof cleanedValue === 'number') {\n    const formatOptions = { input: units.data.bit };\n    return format(cleanedValue, formatOptions);\n  }\n\n  if (column.columnType === 'number' && typeof cleanedValue === 'number') {\n    const formatOptions = column.formatter;\n    if (formatOptions) {\n      return format(cleanedValue, formatOptions);\n    }\n    return adjustFractionDigits(cleanedValue);\n  }\n\n  if (\n    column.columnType === 'long' &&\n    (typeof value === 'string' ||\n      typeof value === 'bigint' ||\n      typeof value === 'number')\n  ) {\n    return formatLong(value, column.formatter);\n  }\n\n  if (\n    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType\n    (column.columnType === 'date' || column.columnType === 'datetime') &&\n    (typeof cleanedValue === 'number' || cleanedValue instanceof Date)\n  ) {\n    const resolvedFormatter = resolveDatetimeFormatter(column.formatter);\n    if (resolvedFormatter) {\n      return formatDatetime(cleanedValue, resolvedFormatter);\n    } else {\n      return formatDatetimeDefault(cleanedValue);\n    }\n  }\n\n  if (column.columnType === 'currency' && typeof cleanedValue === 'number') {\n    const formatOptions = column.formatter;\n    const { currency, ...remainingOptions } = formatOptions ?? {};\n    if (!currency) {\n      // no currency (e.g. 'EUR', 'USD') provided \u2192 default format without currency symbol\n      return formatCurrencyDefault(cleanedValue, remainingOptions);\n    }\n\n    return formatCurrency(cleanedValue, currency, remainingOptions);\n  }\n\n  devLog(`The value '${value}' can not be formatted!`);\n  return String(value);\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.css CHANGED Viewed

@@ -1,11 +1,11 @@
-._1ku1w3z0-3-0-1 {
+._1ku1w3z0-3-1-1 {
   cursor: grabbing;
   box-shadow: var(--dt-box-shadows-surface-flat-drag, 0px 0px 0px 1px #2d2e4e08, 0px 1px 2px #2d2e4e0d, 0px 7px 17px -2px #2d2e4e52);
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
   z-index: 4;
   overflow: hidden;
 }
-._1ku1w3z1-3-0-1::after {
+._1ku1w3z1-3-1-1::after {
   content: "";
   position: absolute;
   top: 0;
@@ -14,13 +14,13 @@
   width: 3px;
   background: var(--dt-colors-border-neutral-accent, #595a7d);
 }
-._1ku1w3z2-3-0-1::after {
+._1ku1w3z2-3-1-1::after {
   left: 0;
 }
-._1ku1w3z3-3-0-1::after {
+._1ku1w3z3-3-1-1::after {
   right: 0;
 }
-._1ku1w3z4-3-0-1::before {
+._1ku1w3z4-3-1-1::before {
   content: "";
   display: block;
   position: absolute;
@@ -29,12 +29,12 @@
   bottom: var(--dt-spacings-size-6, 6px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ku1w3z5-3-0-1 {
+._1ku1w3z5-3-1-1 {
   display: none;
 }
-._1ku1w3z6-3-0-1 {
+._1ku1w3z6-3-1-1 {
   cursor: grab;
 }
-._1ku1w3z7-3-0-1 {
+._1ku1w3z7-3-1-1 {
   pointer-events: none;
 }

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.sty.js CHANGED Viewed

@@ -1,9 +1,9 @@
 import "./ColumnOrder.css";
 import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
-var columnDndOverlay = "_1ku1w3z0-3-0-1";
-var headerDragAndDrop = { dragging: "_1ku1w3z5-3-0-1", enabled: "_1ku1w3z6-3-0-1", inactive: "_1ku1w3z7-3-0-1" };
-var insertPositionIndicator = _7a468({ defaultClassName: "_1ku1w3z1-3-0-1", variantClassNames: { left: { true: "_1ku1w3z2-3-0-1", false: "_1ku1w3z3-3-0-1" } }, defaultVariants: {}, compoundVariants: [] });
-var verticalDividers = "_1ku1w3z4-3-0-1";
+var columnDndOverlay = "_1ku1w3z0-3-1-1";
+var headerDragAndDrop = { dragging: "_1ku1w3z5-3-1-1", enabled: "_1ku1w3z6-3-1-1", inactive: "_1ku1w3z7-3-1-1" };
+var insertPositionIndicator = _7a468({ defaultClassName: "_1ku1w3z1-3-1-1", variantClassNames: { left: { true: "_1ku1w3z2-3-1-1", false: "_1ku1w3z3-3-1-1" } }, defaultVariants: {}, compoundVariants: [] });
+var verticalDividers = "_1ku1w3z4-3-1-1";
 export {
   columnDndOverlay,
   headerDragAndDrop,

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnOrder/ColumnOrder.css.ts"],
-  "sourcesContent": ["import './ColumnOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var columnDndOverlay = '_1ku1w3z0-3-0-1';\nexport var headerDragAndDrop = {dragging:'_1ku1w3z5-3-0-1',enabled:'_1ku1w3z6-3-0-1',inactive:'_1ku1w3z7-3-0-1'};\nexport var insertPositionIndicator = _7a468({defaultClassName:'_1ku1w3z1-3-0-1',variantClassNames:{left:{true:'_1ku1w3z2-3-0-1',false:'_1ku1w3z3-3-0-1'}},defaultVariants:{},compoundVariants:[]});\nexport var verticalDividers = '_1ku1w3z4-3-0-1';"],
+  "sourcesContent": ["import './ColumnOrder.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var columnDndOverlay = '_1ku1w3z0-3-1-1';\nexport var headerDragAndDrop = {dragging:'_1ku1w3z5-3-1-1',enabled:'_1ku1w3z6-3-1-1',inactive:'_1ku1w3z7-3-1-1'};\nexport var insertPositionIndicator = _7a468({defaultClassName:'_1ku1w3z1-3-1-1',variantClassNames:{left:{true:'_1ku1w3z2-3-1-1',false:'_1ku1w3z3-3-1-1'}},defaultVariants:{},compoundVariants:[]});\nexport var verticalDividers = '_1ku1w3z4-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,mBAAmB;AACvB,IAAI,oBAAoB,EAAC,UAAS,mBAAkB,SAAQ,mBAAkB,UAAS,kBAAiB;AACxG,IAAI,0BAA0B,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AAC1L,IAAI,mBAAmB;",
   "names": []
 }

package/esm/tables/DataTable/features/ColumnSizing/ColumnSizing.css CHANGED Viewed

@@ -1,9 +1,9 @@
-._17437gx0-3-0-1 {
+._17437gx0-3-1-1 {
   cursor: col-resize;
 }
-._17437gx0-3-0-1 > * {
+._17437gx0-3-1-1 > * {
   pointer-events: none;
 }
-._17437gx0-3-0-1 ._14sp6az0-3-0-1 * {
+._17437gx0-3-1-1 ._14sp6az0-3-1-1 * {
   pointer-events: none !important;
 }

package/esm/tables/DataTable/features/ColumnSizing/ColumnSizing.sty.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import "../../DataTable.css";
 import "./ColumnSizing.css";
-var tableColumnResizing = "_17437gx0-3-0-1";
+var tableColumnResizing = "_17437gx0-3-1-1";
 export {
   tableColumnResizing
 };

package/esm/tables/DataTable/features/ColumnSizing/ColumnSizing.sty.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnSizing/ColumnSizing.css.ts"],
-  "sourcesContent": ["import '../../DataTable.css';\nimport './ColumnSizing.css';\nexport var tableColumnResizing = '_17437gx0-3-0-1';"],
+  "sourcesContent": ["import '../../DataTable.css';\nimport './ColumnSizing.css';\nexport var tableColumnResizing = '_17437gx0-3-1-1';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,sBAAsB;",
   "names": []
 }

package/esm/tables/DataTable/features/ColumnTypes/ColumnTypes.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._19nyr521-3-0-1 {
+._19nyr521-3-1-1 {
   overflow: hidden;
   text-overflow: ellipsis;
 }

package/esm/tables/DataTable/features/ColumnTypes/ColumnTypes.js CHANGED Viewed

@@ -4,16 +4,17 @@ import Colors from "@dynatrace/strato-design-tokens/colors";
 import {
   adjustFractionDigits,
   format,
-  units,
-  formatLong
+  formatLong,
+  units
 } from "@dynatrace-sdk/units";
 import { logContentWrapper } from "./ColumnTypes.sty.js";
 import { Sparkline } from "../../../../charts/sparkline/Sparkline.js";
 import { Markdown } from "../../../../content/markdown/Markdown.js";
 import {
   formatCurrencyDefault,
-  formatDateDefault
+  formatDatetimeDefault
 } from "../../../../core/utils/default-formatters.js";
+import { devLog } from "../../../../core/utils/logging.js";
 import { convertToNumberIfPureNumber } from "../../../../core/utils/string-utils.js";
 import { LogContentHighlight } from "../../../utils/log-content-highlighting.js";
 import { replaceUrlsWithLinks } from "../../../utils/replace-urls-with-links.js";
@@ -35,6 +36,11 @@ function applyColumnTypes(columnDef, composedDef) {
   if (!columnType) {
     return {};
   }
+  if (columnType === "date") {
+    devLog(
+      "DataTable: columnType 'date' is deprecated and will be removed in a future release. Use 'datetime' instead."
+    );
+  }
   let enableUserActions = true;
   if (columnType === "sparkline") {
     columnDef.disableSorting = true;
@@ -78,6 +84,8 @@ function getAlignmentBasedOnType(columnType) {
     case "currency":
     case "bit":
     case "date":
+    // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.
+    case "datetime":
       return "right";
     default:
       return DATA_TABLE_DEFAULT_HORIZONTAL_ALIGNMENT;
@@ -87,7 +95,7 @@ function isDatatableGanttColumnConfig(config) {
   return config !== null && config !== void 0 && typeof config === "object" && "nameAccessor" in config;
 }
 function isDatatableSparklineColumnConfig(config) {
-  return config !== null && config !== void 0 && typeof config === "object" && ("color" in config || "variant" in config || "gapPolicy" in config || "curve" in config || "showContextValues" in config);
+  return config !== null && config !== void 0 && typeof config === "object" && ("color" in config || "variant" in config || "gapPolicy" in config || "curve" in config || "showContextValues" in config || "xAxis" in config);
 }
 function isDatatableMarkdownColumnConfig(config) {
   return config !== null && config !== void 0 && typeof config === "object" && "customComponentMappings" in config;
@@ -101,8 +109,8 @@ function isDatatableTextColumnConfig(config) {
 const SparklineMemo = memo(Sparkline);
 const MeterbarMemo = memo(MeterBarChartRenderer);
 const MarkdownMemo = memo(Markdown);
-const DateMemo = memo((props) => {
-  return /* @__PURE__ */ jsx(Fragment, { children: formatDateDefault(
+const DatetimeMemo = memo((props) => {
+  return /* @__PURE__ */ jsx(Fragment, { children: formatDatetimeDefault(
     new Date(convertToNumberIfPureNumber(props.value))
   ) });
 });
@@ -140,12 +148,20 @@ const CELL_TYPE_RENDERERS = {
       return typeof valueAsNumber === "number" ? format(valueAsNumber, { input: units.data.bit }) : "";
     }
   },
+  // DEPRECATION: [APPDEV-16044] BREAKING-CHANGE: Remove 'date' columnType.
   date: (props) => {
     const cellValue = props.getValue();
     if (cellValue === null) {
       return null;
     }
-    return /* @__PURE__ */ jsx(DateMemo, { value: cellValue });
+    return /* @__PURE__ */ jsx(DatetimeMemo, { value: cellValue });
+  },
+  datetime: (props) => {
+    const cellValue = props.getValue();
+    if (cellValue === null) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(DatetimeMemo, { value: cellValue });
   },
   text: (props) => {
     const cellValue = props.getValue();
@@ -174,7 +190,8 @@ const CELL_TYPE_RENDERERS = {
         curve: config.curve ?? "linear",
         showContextValues: !!config?.showContextValues,
         labelsAlignment: "right",
-        labelsFixedWidth: rowDensity === "condensed" ? 32 : 42
+        labelsFixedWidth: rowDensity === "condensed" ? 32 : 42,
+        children: config.xAxis && /* @__PURE__ */ jsx(Sparkline.XAxis, { ...config.xAxis })
       }
     );
   },