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

@dynatrace/strato-components 3.1.1 → 3.2.0

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 (2959) hide show

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

@@ -1,4 +1,4 @@
-._duopj90-3-1-1 {
+._duopj90-3-2-0 {
   appearance: none;
   border: 0;
   padding: 0;
@@ -14,79 +14,79 @@
   width: 24px;
   z-index: var(--dt-elevations-default, 1);
 }
-._duopj90-3-1-1:hover {
+._duopj90-3-2-0:hover {
   cursor: pointer;
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._duopj90-3-1-1:focus {
+._duopj90-3-2-0:focus {
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
   outline: none;
 }
-._1ons7qub-3-1-1 ._duopj90-3-1-1, ._14k72814-3-1-1 ~ ._duopj90-3-1-1, ._11pvd3zp-3-1-1 ._duopj90-3-1-1 {
+._1ons7qub-3-2-0 ._duopj90-3-2-0, ._14k72814-3-2-0 ~ ._duopj90-3-2-0, ._11pvd3zp-3-2-0 ._duopj90-3-2-0 {
   right: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
 }
-._1ons7qua-3-1-1 ._duopj90-3-1-1, ._14k72813-3-1-1 ~ ._duopj90-3-1-1, ._11pvd3zo-3-1-1 ._duopj90-3-1-1 {
+._1ons7qua-3-2-0 ._duopj90-3-2-0, ._14k72813-3-2-0 ~ ._duopj90-3-2-0, ._11pvd3zo-3-2-0 ._duopj90-3-2-0 {
   right: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
 }
-._1ons7quc-3-1-1  ._duopj90-3-1-1, ._14k72815-3-1-1 ~ ._duopj90-3-1-1, ._11pvd3zq-3-1-1 ._duopj90-3-1-1 {
+._1ons7quc-3-2-0  ._duopj90-3-2-0, ._14k72815-3-2-0 ~ ._duopj90-3-2-0, ._11pvd3zq-3-2-0 ._duopj90-3-2-0 {
   right: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
 }
-._11pvd3zp-3-1-1._yj6voi0-3-1-1 ._duopj90-3-1-1, ._14k72814-3-1-1._yj6voi0-3-1-1 ~ ._duopj90-3-1-1, ._1ons7qub-3-1-1._yj6voi0-3-1-1 ._duopj90-3-1-1 {
+._11pvd3zp-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0, ._14k72814-3-2-0._yj6voi0-3-2-0 ~ ._duopj90-3-2-0, ._1ons7qub-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._11pvd3zo-3-1-1._yj6voi0-3-1-1 ._duopj90-3-1-1, ._14k72813-3-1-1._yj6voi0-3-1-1 ~ ._duopj90-3-1-1, ._1ons7qua-3-1-1._yj6voi0-3-1-1 ._duopj90-3-1-1 {
+._11pvd3zo-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0, ._14k72813-3-2-0._yj6voi0-3-2-0 ~ ._duopj90-3-2-0, ._1ons7qua-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._11pvd3zq-3-1-1._yj6voi0-3-1-1 ._duopj90-3-1-1, ._14k72815-3-1-1._yj6voi0-3-1-1 ~ ._duopj90-3-1-1, ._1ons7quc-3-1-1._yj6voi0-3-1-1 ._duopj90-3-1-1 {
+._11pvd3zq-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0, ._14k72815-3-2-0._yj6voi0-3-2-0 ~ ._duopj90-3-2-0, ._1ons7quc-3-2-0._yj6voi0-3-2-0 ._duopj90-3-2-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._1ons7qub-3-1-1 ._yj6voi0-3-1-1 ._duopj90-3-1-1 {
+._1ons7qub-3-2-0 ._yj6voi0-3-2-0 ._duopj90-3-2-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._1ons7qua-3-1-1 ._yj6voi0-3-1-1 ._duopj90-3-1-1 {
+._1ons7qua-3-2-0 ._yj6voi0-3-2-0 ._duopj90-3-2-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._1ons7quc-3-1-1 ._yj6voi0-3-1-1 ._duopj90-3-1-1 {
+._1ons7quc-3-2-0 ._yj6voi0-3-2-0 ._duopj90-3-2-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._14k72814-3-1-1 ._yj6voi0-3-1-1 ~ ._duopj90-3-1-1 {
+._14k72814-3-2-0 ._yj6voi0-3-2-0 ~ ._duopj90-3-2-0 {
   left: var(--dt-spacings-size-2, 2px);
   top: var(--dt-spacings-size-2, 2px);
   right: auto;
 }
-._14k72813-3-1-1 ._yj6voi0-3-1-1 ~ ._duopj90-3-1-1 {
+._14k72813-3-2-0 ._yj6voi0-3-2-0 ~ ._duopj90-3-2-0 {
   left: var(--dt-spacings-size-8, 8px);
   top: var(--dt-spacings-size-8, 8px);
   right: auto;
 }
-._14k72815-3-1-1 ._yj6voi0-3-1-1 ~ ._duopj90-3-1-1 {
+._14k72815-3-2-0 ._yj6voi0-3-2-0 ~ ._duopj90-3-2-0 {
   left: var(--dt-spacings-size-12, 12px);
   top: var(--dt-spacings-size-12, 12px);
   right: auto;
 }
-._duopj90-3-1-1[data-state="open"] {
+._duopj90-3-2-0[data-state="open"] {
   display: inline-block;
   background-color: var(--dt-colors-background-field-neutral-emphasized-hover, #dadbe4);
 }
-._1ons7qu2-3-1-1:hover > ._duopj90-3-1-1, ._11pvd3z4-3-1-1 > ._duopj90-3-1-1 {
+._1ons7qu2-3-2-0:hover > ._duopj90-3-2-0, ._11pvd3z4-3-2-0 > ._duopj90-3-2-0 {
   display: inline-block;
 }
-._duopj91-3-1-1 {
+._duopj91-3-2-0 {
   appearance: none;
   border: 0;
   position: fixed;

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

@@ -11,8 +11,8 @@ import "../ColumnOrder/ColumnOrder.css";
 import "../../components/DataTableHeaderCell.css";
 import "../../components/DataTableDefaultCell.css";
 import "./UserActions.css";
-var actionButton = "_duopj90-3-1-1";
-var floatingMenuButton = "_duopj91-3-1-1";
+var actionButton = "_duopj90-3-2-0";
+var floatingMenuButton = "_duopj91-3-2-0";
 export {
   actionButton,
   floatingMenuButton

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/UserActions.css.ts"],
-  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './UserActions.css';\nexport var actionButton = '_duopj90-3-1-1';\nexport var floatingMenuButton = '_duopj91-3-1-1';"],
+  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../Thresholds/Thresholds.css';\nimport '../../components/DataTableCell.css';\nimport '../ColumnOrder/ColumnOrder.css';\nimport '../../components/DataTableHeaderCell.css';\nimport '../../components/DataTableDefaultCell.css';\nimport './UserActions.css';\nexport var actionButton = '_duopj90-3-2-0';\nexport var floatingMenuButton = '_duopj91-3-2-0';"],
   "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACA,IAAI,eAAe;AACnB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/tables/DataTable/features/UserActions/UserActionsMenu.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { FormattedMessage, useIntl } from "react-intl";
+import { useIntl } from "react-intl";
 import {
   ArrowLeftIcon,
   ArrowRightIcon,
@@ -47,20 +47,24 @@ const CopyItem = ({ value }) => {
   );
 };
 function LineWrapAction() {
+  const intl = useIntl();
   const column = useDataTableColumn();
+  const isLineWrapped = column?.getIsLineWrapped();
+  const lineWrapDtName = isLineWrapped ? "ColumnActionDisableLineWrap" : "ColumnActionEnableLineWrap";
   return /* @__PURE__ */ jsxs(
     DataTableActionsMenu.Item,
     {
       onSelect: () => column.toggleLineWrap(),
-      "data-dt-name": "ColumnActionLineWrap",
+      "data-dt-name": lineWrapDtName,
       children: [
         /* @__PURE__ */ jsx(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ jsx(WrapTextIcon, {}) }),
-        column?.getIsLineWrapped() ? /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.disableLineWrapLabel }) : /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.enableLineWrapLabel })
+        isLineWrapped ? intl.formatMessage(dataTableMessages.disableLineWrapLabel) : intl.formatMessage(dataTableMessages.enableLineWrapLabel)
       ]
     }
   );
 }
 function HideColumnAction() {
+  const intl = useIntl();
   const table = useDataTable();
   const currentVisibility = table.getState().columnVisibility;
   const column = useDataTableColumn();
@@ -92,12 +96,13 @@ function HideColumnAction() {
       "data-dt-name": "ColumnActionHide",
       children: [
         /* @__PURE__ */ jsx(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ jsx(ViewOffIcon, {}) }),
-        /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.hideColumnLabel })
+        intl.formatMessage(dataTableMessages.hideColumnLabel)
       ]
     }
   );
 }
 function ColumnOrderAction() {
+  const intl = useIntl();
   const column = useDataTableColumn();
   const header = useDataTableHeader();
   const isPinnedColumn = !!column.getIsPinned();
@@ -114,7 +119,7 @@ function ColumnOrderAction() {
         "data-dt-name": "ColumnActionMoveLeft",
         children: [
           /* @__PURE__ */ jsx(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ jsx(ArrowLeftIcon, {}) }),
-          /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.moveColumnLeftLabel })
+          intl.formatMessage(dataTableMessages.moveColumnLeftLabel)
         ]
       }
     ),
@@ -126,7 +131,7 @@ function ColumnOrderAction() {
         "data-dt-name": "ColumnActionMoveRight",
         children: [
           /* @__PURE__ */ jsx(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ jsx(ArrowRightIcon, {}) }),
-          /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.moveColumnRightLabel })
+          intl.formatMessage(dataTableMessages.moveColumnRightLabel)
         ]
       }
     )
@@ -140,6 +145,7 @@ function ColumnOrderAction() {
   return orderActions();
 }
 function ColumnPinningAction() {
+  const intl = useIntl();
   const table = useDataTable();
   const header = useDataTableHeader();
   if (!table.options.enableColumnPinning) {
@@ -154,7 +160,7 @@ function ColumnPinningAction() {
         "data-dt-name": "ColumnActionPinLeft",
         children: [
           /* @__PURE__ */ jsx(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ jsx(PinIcon, {}) }),
-          /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.pinColumnLeftLabel })
+          intl.formatMessage(dataTableMessages.pinColumnLeftLabel)
         ]
       }
     ) : null,
@@ -165,7 +171,7 @@ function ColumnPinningAction() {
         "data-dt-name": "ColumnActionPinRight",
         children: [
           /* @__PURE__ */ jsx(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ jsx(PinIcon, {}) }),
-          /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.pinColumnRightLabel })
+          intl.formatMessage(dataTableMessages.pinColumnRightLabel)
         ]
       }
     ) : null,
@@ -176,17 +182,18 @@ function ColumnPinningAction() {
         "data-dt-name": "ColumnActionUnpin",
         children: [
           /* @__PURE__ */ jsx(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ jsx(PinOffIcon, {}) }),
-          /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.unpinColumnLabel })
+          intl.formatMessage(dataTableMessages.unpinColumnLabel)
         ]
       }
     ) : null
   ] });
 }
 function ColumnFontStyleAction() {
+  const intl = useIntl();
   const column = useDataTableColumn();
   return /* @__PURE__ */ jsxs(DataTableActionsMenu.Item, { onSelect: () => column.toggleFontStyle(), children: [
     /* @__PURE__ */ jsx(DataTableActionsMenu.Prefix, { children: /* @__PURE__ */ jsx(WrapTextIcon, {}) }),
-    column.getFontStyle() === "text" ? /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.fontStyleCodeLabel }) : /* @__PURE__ */ jsx(FormattedMessage, { ...dataTableMessages.fontStyleTextLabel })
+    column.getFontStyle() === "text" ? intl.formatMessage(dataTableMessages.fontStyleCodeLabel) : intl.formatMessage(dataTableMessages.fontStyleTextLabel)
   ] });
 }
 const DataTableActionsMenu = Object.assign(

package/esm/tables/DataTable/features/UserActions/UserActionsMenu.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/UserActionsMenu.tsx"],
-  "sourcesContent": ["import { type PropsWithChildren, type JSX, useContext } from 'react';\nimport { FormattedMessage, useIntl } from 'react-intl';\n\nimport {\n  ArrowLeftIcon,\n  ArrowRightIcon,\n  CopyIcon,\n  PinIcon,\n  PinOffIcon,\n  ViewOffIcon,\n  WrapTextIcon,\n} from '@dynatrace/strato-icons';\n\nimport { useCopyToClipboard } from '../../../../core/utils/useCopyToClipboard.js';\nimport { Group as MenuGroup } from '../../../../navigation/menu/Group.js';\nimport { Intent as MenuIntent } from '../../../../navigation/menu/Intent.js';\nimport { Item as MenuItem } from '../../../../navigation/menu/Item.js';\nimport { Label as MenuLabel } from '../../../../navigation/menu/Label.js';\nimport { Link as MenuLink } from '../../../../navigation/menu/Link.js';\nimport { Prefix as MenuPrefix } from '../../../../navigation/menu/Prefix.js';\nimport { Sub as MenuSub } from '../../../../navigation/menu/Sub.js';\nimport { SubContent as MenuSubContent } from '../../../../navigation/menu/SubContent.js';\nimport { SubTrigger as MenuSubTrigger } from '../../../../navigation/menu/SubTrigger.js';\nimport { Suffix as MenuSuffix } from '../../../../navigation/menu/Suffix.js';\nimport {\n  useDataTable,\n  useDataTableColumn,\n  useDataTableHeader,\n  DataTableHeaderContext,\n} from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * Defines the props on the `CopyItem` table actions menu for copying the cell content to clipboard.\n * @public\n */\nexport type DataTableActionsMenuCopyItemProps = {\n  /**\n   * The string representation of the cell value that gets copied to the clipboard when the user selects the action item.\n   */\n  value: string;\n};\n\n/**\n * Out of the box cell action for copying the cell content to clipboard.\n * This component can only be used as a child element of `<TableActionsMenu>`.\n * @public\n */\nconst CopyItem = ({ value }: DataTableActionsMenuCopyItemProps) => {\n  const intl = useIntl();\n  const [copyToClipboard] = useCopyToClipboard(value);\n  const header = useContext(DataTableHeaderContext);\n  const isColumnAction = header !== null;\n  const dataDtName = isColumnAction\n    ? 'ColumnActionCopyItem'\n    : 'CellActionCopyItem';\n\n  return (\n    <DataTableActionsMenu.Item\n      onSelect={copyToClipboard}\n      data-dt-name={dataDtName}\n    >\n      <DataTableActionsMenu.Prefix>\n        <CopyIcon />\n      </DataTableActionsMenu.Prefix>\n      {intl.formatMessage(dataTableMessages.copyValueCellAction)}\n    </DataTableActionsMenu.Item>\n  );\n};\n\n/**\n * Out of the box line wrap toggle for header actions.\n */\nfunction LineWrapAction(): JSX.Element {\n  const column = useDataTableColumn();\n\n  return (\n    <DataTableActionsMenu.Item\n      onSelect={() => column.toggleLineWrap()}\n      data-dt-name=\"ColumnActionLineWrap\"\n    >\n      <DataTableActionsMenu.Prefix>\n        <WrapTextIcon />\n      </DataTableActionsMenu.Prefix>\n      {column?.getIsLineWrapped() ? (\n        <FormattedMessage {...dataTableMessages.disableLineWrapLabel} />\n      ) : (\n        <FormattedMessage {...dataTableMessages.enableLineWrapLabel} />\n      )}\n    </DataTableActionsMenu.Item>\n  );\n}\n\n/**\n * Out of the box  wrap toggle for header and cell actions.\n * @internal\n */\nexport function HideColumnAction() {\n  const table = useDataTable();\n  const currentVisibility = table.getState().columnVisibility;\n  const column = useDataTableColumn();\n  const childColumns = column.columns;\n\n  const handleSelect = (): void => {\n    if (childColumns.length === 0) {\n      column.toggleVisibility();\n    } else {\n      const updatedChildrenVisibility = childColumns.reduce(\n        (updatedVisibility: Record<string, boolean>, childColumn) => {\n          return {\n            ...updatedVisibility,\n            [childColumn.id]: false,\n          };\n        },\n        {},\n      );\n      table.setColumnVisibility({\n        ...currentVisibility,\n        ...updatedChildrenVisibility,\n      });\n    }\n  };\n\n  return (\n    <DataTableActionsMenu.Item\n      onSelect={handleSelect}\n      disabled={!column.getCanHide()}\n      data-dt-name=\"ColumnActionHide\"\n    >\n      <DataTableActionsMenu.Prefix>\n        <ViewOffIcon />\n      </DataTableActionsMenu.Prefix>\n      <FormattedMessage {...dataTableMessages.hideColumnLabel} />\n    </DataTableActionsMenu.Item>\n  );\n}\n\n/**\n * Out of the box column action for column order.\n * @internal\n */\nexport function ColumnOrderAction() {\n  const column = useDataTableColumn();\n  const header = useDataTableHeader();\n  const isPinnedColumn = !!column.getIsPinned();\n  const table = useDataTable();\n\n  if (!table.options.enableColumnOrdering) {\n    return null;\n  }\n\n  const orderActions = () => (\n    <>\n      <DataTableActionsMenu.Item\n        onSelect={() => column.moveColumnLeft()}\n        disabled={!column.getCanMoveColumnLeft()}\n        data-dt-name=\"ColumnActionMoveLeft\"\n      >\n        <DataTableActionsMenu.Prefix>\n          <ArrowLeftIcon />\n        </DataTableActionsMenu.Prefix>\n        <FormattedMessage {...dataTableMessages.moveColumnLeftLabel} />\n      </DataTableActionsMenu.Item>\n      <DataTableActionsMenu.Item\n        onSelect={() => column.moveColumnRight()}\n        disabled={!column.getCanMoveColumnRight()}\n        data-dt-name=\"ColumnActionMoveRight\"\n      >\n        <DataTableActionsMenu.Prefix>\n          <ArrowRightIcon />\n        </DataTableActionsMenu.Prefix>\n        <FormattedMessage {...dataTableMessages.moveColumnRightLabel} />\n      </DataTableActionsMenu.Item>\n    </>\n  );\n\n  // if a parent has pinned children, show order actions based on the location of the header\n  if (isPinnedColumn) {\n    if (header.id.includes('center')) {\n      return orderActions();\n    }\n\n    return null;\n  }\n\n  return orderActions();\n}\n\n/**\n * Out of the box column action for column pinning.\n */\nfunction ColumnPinningAction(): JSX.Element | null {\n  const table = useDataTable();\n  const header = useDataTableHeader();\n  if (!table.options.enableColumnPinning) {\n    return null;\n  }\n\n  const pinnedState = header.getIsPinned();\n  return (\n    <>\n      {pinnedState !== 'left' ? (\n        <DataTableActionsMenu.Item\n          onSelect={() => header.pin('left')}\n          data-dt-name=\"ColumnActionPinLeft\"\n        >\n          <DataTableActionsMenu.Prefix>\n            <PinIcon />\n          </DataTableActionsMenu.Prefix>\n          <FormattedMessage {...dataTableMessages.pinColumnLeftLabel} />\n        </DataTableActionsMenu.Item>\n      ) : null}\n      {pinnedState !== 'right' ? (\n        <DataTableActionsMenu.Item\n          onSelect={() => header.pin('right')}\n          data-dt-name=\"ColumnActionPinRight\"\n        >\n          <DataTableActionsMenu.Prefix>\n            <PinIcon />\n          </DataTableActionsMenu.Prefix>\n          <FormattedMessage {...dataTableMessages.pinColumnRightLabel} />\n        </DataTableActionsMenu.Item>\n      ) : null}\n      {pinnedState !== false ? (\n        <DataTableActionsMenu.Item\n          onSelect={() => header.pin(false)}\n          data-dt-name=\"ColumnActionUnpin\"\n        >\n          <DataTableActionsMenu.Prefix>\n            <PinOffIcon />\n          </DataTableActionsMenu.Prefix>\n          <FormattedMessage {...dataTableMessages.unpinColumnLabel} />\n        </DataTableActionsMenu.Item>\n      ) : null}\n    </>\n  );\n}\n\n/**\n * Out of the box font style toggle for header and cell actions.\n */\nfunction ColumnFontStyleAction(): JSX.Element {\n  const column = useDataTableColumn();\n\n  return (\n    <DataTableActionsMenu.Item onSelect={() => column.toggleFontStyle()}>\n      <DataTableActionsMenu.Prefix>\n        <WrapTextIcon />\n      </DataTableActionsMenu.Prefix>\n      {column.getFontStyle() === 'text' ? (\n        <FormattedMessage {...dataTableMessages.fontStyleCodeLabel} />\n      ) : (\n        <FormattedMessage {...dataTableMessages.fontStyleTextLabel} />\n      )}\n    </DataTableActionsMenu.Item>\n  );\n}\n\n/**\n * Slot components that can be used to configure the user actions menu.\n * @public\n */\nexport const DataTableActionsMenu = Object.assign(\n  function DataTableActionsMenuInternal(props: PropsWithChildren) {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{props.children}</>;\n  },\n  {\n    Intent: MenuIntent,\n    Item: MenuItem,\n    // DEPRECATION: [APPDEV-15604] BREAKING-CHANGE: Remove TableActionsMenu.ItemIcon.\n    /** The DataTableActionsMenu.ItemIcon is deprecated, use DataTableActionsMenu.Prefix instead.\n     * @deprecated Use `TableActionsMenu.Prefix` instead. This slot will be removed in the future.\n     */\n    ItemIcon: MenuPrefix,\n    Prefix: MenuPrefix,\n    Suffix: MenuSuffix,\n    Group: MenuGroup,\n    Label: MenuLabel,\n    CopyItem: CopyItem,\n    SubMenu: MenuSub,\n    SubContent: MenuSubContent,\n    SubTrigger: MenuSubTrigger,\n    Link: MenuLink,\n    LineWrap: () => <LineWrapAction />,\n    HideColumn: () => <HideColumnAction />,\n    ColumnOrder: () => <ColumnOrderAction />,\n    ColumnPinning: () => <ColumnPinningAction />,\n    ColumnFontStyle: () => <ColumnFontStyleAction />,\n  },\n);\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { type PropsWithChildren, type JSX, useContext } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport {\n  ArrowLeftIcon,\n  ArrowRightIcon,\n  CopyIcon,\n  PinIcon,\n  PinOffIcon,\n  ViewOffIcon,\n  WrapTextIcon,\n} from '@dynatrace/strato-icons';\n\nimport { useCopyToClipboard } from '../../../../core/utils/useCopyToClipboard.js';\nimport { Group as MenuGroup } from '../../../../navigation/menu/Group.js';\nimport { Intent as MenuIntent } from '../../../../navigation/menu/Intent.js';\nimport { Item as MenuItem } from '../../../../navigation/menu/Item.js';\nimport { Label as MenuLabel } from '../../../../navigation/menu/Label.js';\nimport { Link as MenuLink } from '../../../../navigation/menu/Link.js';\nimport { Prefix as MenuPrefix } from '../../../../navigation/menu/Prefix.js';\nimport { Sub as MenuSub } from '../../../../navigation/menu/Sub.js';\nimport { SubContent as MenuSubContent } from '../../../../navigation/menu/SubContent.js';\nimport { SubTrigger as MenuSubTrigger } from '../../../../navigation/menu/SubTrigger.js';\nimport { Suffix as MenuSuffix } from '../../../../navigation/menu/Suffix.js';\nimport {\n  useDataTable,\n  useDataTableColumn,\n  useDataTableHeader,\n  DataTableHeaderContext,\n} from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\n\n/**\n * Defines the props on the `CopyItem` table actions menu for copying the cell content to clipboard.\n * @public\n */\nexport type DataTableActionsMenuCopyItemProps = {\n  /**\n   * The string representation of the cell value that gets copied to the clipboard when the user selects the action item.\n   */\n  value: string;\n};\n\n/**\n * Out of the box cell action for copying the cell content to clipboard.\n * This component can only be used as a child element of `<TableActionsMenu>`.\n * @public\n */\nconst CopyItem = ({ value }: DataTableActionsMenuCopyItemProps) => {\n  const intl = useIntl();\n  const [copyToClipboard] = useCopyToClipboard(value);\n  const header = useContext(DataTableHeaderContext);\n  const isColumnAction = header !== null;\n  const dataDtName = isColumnAction\n    ? 'ColumnActionCopyItem'\n    : 'CellActionCopyItem';\n\n  return (\n    <DataTableActionsMenu.Item\n      onSelect={copyToClipboard}\n      data-dt-name={dataDtName}\n    >\n      <DataTableActionsMenu.Prefix>\n        <CopyIcon />\n      </DataTableActionsMenu.Prefix>\n      {intl.formatMessage(dataTableMessages.copyValueCellAction)}\n    </DataTableActionsMenu.Item>\n  );\n};\n\n/**\n * Out of the box line wrap toggle for header actions.\n */\nfunction LineWrapAction(): JSX.Element {\n  const intl = useIntl();\n  const column = useDataTableColumn();\n  const isLineWrapped = column?.getIsLineWrapped();\n  const lineWrapDtName = isLineWrapped\n    ? 'ColumnActionDisableLineWrap'\n    : 'ColumnActionEnableLineWrap';\n\n  return (\n    <DataTableActionsMenu.Item\n      onSelect={() => column.toggleLineWrap()}\n      data-dt-name={lineWrapDtName}\n    >\n      <DataTableActionsMenu.Prefix>\n        <WrapTextIcon />\n      </DataTableActionsMenu.Prefix>\n      {isLineWrapped\n        ? intl.formatMessage(dataTableMessages.disableLineWrapLabel)\n        : intl.formatMessage(dataTableMessages.enableLineWrapLabel)}\n    </DataTableActionsMenu.Item>\n  );\n}\n\n/**\n * Out of the box  wrap toggle for header and cell actions.\n * @internal\n */\nexport function HideColumnAction() {\n  const intl = useIntl();\n  const table = useDataTable();\n  const currentVisibility = table.getState().columnVisibility;\n  const column = useDataTableColumn();\n  const childColumns = column.columns;\n\n  const handleSelect = (): void => {\n    if (childColumns.length === 0) {\n      column.toggleVisibility();\n    } else {\n      const updatedChildrenVisibility = childColumns.reduce(\n        (updatedVisibility: Record<string, boolean>, childColumn) => {\n          return {\n            ...updatedVisibility,\n            [childColumn.id]: false,\n          };\n        },\n        {},\n      );\n      table.setColumnVisibility({\n        ...currentVisibility,\n        ...updatedChildrenVisibility,\n      });\n    }\n  };\n\n  return (\n    <DataTableActionsMenu.Item\n      onSelect={handleSelect}\n      disabled={!column.getCanHide()}\n      data-dt-name=\"ColumnActionHide\"\n    >\n      <DataTableActionsMenu.Prefix>\n        <ViewOffIcon />\n      </DataTableActionsMenu.Prefix>\n      {intl.formatMessage(dataTableMessages.hideColumnLabel)}\n    </DataTableActionsMenu.Item>\n  );\n}\n\n/**\n * Out of the box column action for column order.\n * @internal\n */\nexport function ColumnOrderAction() {\n  const intl = useIntl();\n  const column = useDataTableColumn();\n  const header = useDataTableHeader();\n  const isPinnedColumn = !!column.getIsPinned();\n  const table = useDataTable();\n\n  if (!table.options.enableColumnOrdering) {\n    return null;\n  }\n\n  const orderActions = () => (\n    <>\n      <DataTableActionsMenu.Item\n        onSelect={() => column.moveColumnLeft()}\n        disabled={!column.getCanMoveColumnLeft()}\n        data-dt-name=\"ColumnActionMoveLeft\"\n      >\n        <DataTableActionsMenu.Prefix>\n          <ArrowLeftIcon />\n        </DataTableActionsMenu.Prefix>\n        {intl.formatMessage(dataTableMessages.moveColumnLeftLabel)}\n      </DataTableActionsMenu.Item>\n      <DataTableActionsMenu.Item\n        onSelect={() => column.moveColumnRight()}\n        disabled={!column.getCanMoveColumnRight()}\n        data-dt-name=\"ColumnActionMoveRight\"\n      >\n        <DataTableActionsMenu.Prefix>\n          <ArrowRightIcon />\n        </DataTableActionsMenu.Prefix>\n        {intl.formatMessage(dataTableMessages.moveColumnRightLabel)}\n      </DataTableActionsMenu.Item>\n    </>\n  );\n\n  // if a parent has pinned children, show order actions based on the location of the header\n  if (isPinnedColumn) {\n    if (header.id.includes('center')) {\n      return orderActions();\n    }\n\n    return null;\n  }\n\n  return orderActions();\n}\n\n/**\n * Out of the box column action for column pinning.\n */\nfunction ColumnPinningAction(): JSX.Element | null {\n  const intl = useIntl();\n  const table = useDataTable();\n  const header = useDataTableHeader();\n  if (!table.options.enableColumnPinning) {\n    return null;\n  }\n\n  const pinnedState = header.getIsPinned();\n  return (\n    <>\n      {pinnedState !== 'left' ? (\n        <DataTableActionsMenu.Item\n          onSelect={() => header.pin('left')}\n          data-dt-name=\"ColumnActionPinLeft\"\n        >\n          <DataTableActionsMenu.Prefix>\n            <PinIcon />\n          </DataTableActionsMenu.Prefix>\n          {intl.formatMessage(dataTableMessages.pinColumnLeftLabel)}\n        </DataTableActionsMenu.Item>\n      ) : null}\n      {pinnedState !== 'right' ? (\n        <DataTableActionsMenu.Item\n          onSelect={() => header.pin('right')}\n          data-dt-name=\"ColumnActionPinRight\"\n        >\n          <DataTableActionsMenu.Prefix>\n            <PinIcon />\n          </DataTableActionsMenu.Prefix>\n          {intl.formatMessage(dataTableMessages.pinColumnRightLabel)}\n        </DataTableActionsMenu.Item>\n      ) : null}\n      {pinnedState !== false ? (\n        <DataTableActionsMenu.Item\n          onSelect={() => header.pin(false)}\n          data-dt-name=\"ColumnActionUnpin\"\n        >\n          <DataTableActionsMenu.Prefix>\n            <PinOffIcon />\n          </DataTableActionsMenu.Prefix>\n          {intl.formatMessage(dataTableMessages.unpinColumnLabel)}\n        </DataTableActionsMenu.Item>\n      ) : null}\n    </>\n  );\n}\n\n/**\n * Out of the box font style toggle for header and cell actions.\n */\nfunction ColumnFontStyleAction(): JSX.Element {\n  const intl = useIntl();\n  const column = useDataTableColumn();\n\n  return (\n    <DataTableActionsMenu.Item onSelect={() => column.toggleFontStyle()}>\n      <DataTableActionsMenu.Prefix>\n        <WrapTextIcon />\n      </DataTableActionsMenu.Prefix>\n      {column.getFontStyle() === 'text'\n        ? intl.formatMessage(dataTableMessages.fontStyleCodeLabel)\n        : intl.formatMessage(dataTableMessages.fontStyleTextLabel)}\n    </DataTableActionsMenu.Item>\n  );\n}\n\n/**\n * Slot components that can be used to configure the user actions menu.\n * @public\n */\nexport const DataTableActionsMenu = Object.assign(\n  function DataTableActionsMenuInternal(props: PropsWithChildren) {\n    // eslint-disable-next-line react/jsx-no-useless-fragment\n    return <>{props.children}</>;\n  },\n  {\n    Intent: MenuIntent,\n    Item: MenuItem,\n    // DEPRECATION: [APPDEV-15604] BREAKING-CHANGE: Remove TableActionsMenu.ItemIcon.\n    /** The DataTableActionsMenu.ItemIcon is deprecated, use DataTableActionsMenu.Prefix instead.\n     * @deprecated Use `TableActionsMenu.Prefix` instead. This slot will be removed in the future.\n     */\n    ItemIcon: MenuPrefix,\n    Prefix: MenuPrefix,\n    Suffix: MenuSuffix,\n    Group: MenuGroup,\n    Label: MenuLabel,\n    CopyItem: CopyItem,\n    SubMenu: MenuSub,\n    SubContent: MenuSubContent,\n    SubTrigger: MenuSubTrigger,\n    Link: MenuLink,\n    LineWrap: () => <LineWrapAction />,\n    HideColumn: () => <HideColumnAction />,\n    ColumnOrder: () => <ColumnOrderAction />,\n    ColumnPinning: () => <ColumnPinningAction />,\n    ColumnFontStyle: () => <ColumnFontStyleAction />,\n  },\n);\n"],
+  "mappings": "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",
   "names": []
 }

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/VirtualScrolling/VirtualScrolling.tsx"],
-  "sourcesContent": ["import type { Virtualizer } from '@tanstack/react-virtual';\n\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { DATA_TABLE_DEFAULT_SCROLL_OPTIONS } from '../../constants.js';\nimport type { Table, TableFeature } from '../../hooks/useTable/types.js';\nimport { getMemoOptions } from '../../hooks/useTable/utils.js';\nimport type { DataTableRowData } from '../../public.api.js';\nimport { memo } from '../../tanstack-table-core-override/src/index.js';\n\n/**\n * Feature implementation for virtual scrolling.\n * @internal\n */\nexport const DataTableVirtualScrolling: TableFeature = {\n  createTable<TData extends DataTableRowData>(table: Table<TData>): void {\n    let _rowVirtualizer: Virtualizer<HTMLDivElement, Element> | undefined =\n      undefined;\n    let _columnVirtualizer: Virtualizer<HTMLDivElement, Element> | undefined =\n      undefined;\n    // Save all column widths that have already been measured outside the virtualizer's measurementsCache\n    // this ensures measured widths are available immediately and don't get lost when column visibility changes\n    const measuredColumnWidths = new Map<string, number>();\n\n    table.registerVirtualizers = (\n      rowVirtualizer: Virtualizer<HTMLDivElement, Element>,\n      columnVirtualizer: Virtualizer<HTMLDivElement, Element>,\n    ) => {\n      _rowVirtualizer = rowVirtualizer;\n      _columnVirtualizer = columnVirtualizer;\n    };\n\n    table.getRowVirtualizer = () => {\n      return _rowVirtualizer;\n    };\n\n    table.getColumnVirtualizer = () => {\n      return _columnVirtualizer;\n    };\n\n    table.getRowVirtualizationContainer = () => {\n      return _rowVirtualizer?.scrollElement ?? undefined;\n    };\n\n    table.getRowHeight = (rowId) => {\n      if (\n        !_rowVirtualizer ||\n        !rowId ||\n        _rowVirtualizer.measurementsCache.length === 0\n      ) {\n        return 0;\n      }\n\n      const virtualRowIndex = _rowVirtualizer\n        .getVirtualItems()\n        .find((item) => item.key === rowId)?.index;\n\n      if (virtualRowIndex === undefined) {\n        return 0;\n      }\n\n      return (\n        _rowVirtualizer.measurementsCache.find(\n          (r) => r.index === virtualRowIndex,\n        )?.size ?? 0\n      );\n    };\n\n    table.getRowScrollOffset = () => _rowVirtualizer?.scrollOffset;\n\n    table.scrollToRowOffset = (offset: number | undefined | null) => {\n      if (offset !== undefined && offset !== null) {\n        _rowVirtualizer?.scrollToOffset(\n          offset,\n          DATA_TABLE_DEFAULT_SCROLL_OPTIONS,\n        );\n      }\n    };\n\n    // Scroll to a given `rowId` using `rowVirtualizer.scrollToIndex`\n    table.scrollToRow = (\n      rowId: string,\n      align:\n        | 'start'\n        | 'center'\n        | 'end' = DATA_TABLE_DEFAULT_SCROLL_OPTIONS.align,\n    ) => {\n      if (!_rowVirtualizer) {\n        devLog('[Table - VirtualScrolling] No rowVirtualizer was registered');\n        return;\n      }\n\n      // This code works because `allRows` will contain (only!) expanded subRows on the top level\n      // When scrolling to a subRow the row has to be expanded beforehand.\n      const allRows = table.getRowModel().rows;\n      const rowIndex = allRows.findIndex((row) => row.id === rowId);\n\n      if (rowIndex === -1) {\n        devLog(`[Table - VirtualScrolling] Row with id: \"${rowId}\" not found`);\n        return;\n      }\n\n      _rowVirtualizer.scrollToIndex(rowIndex, {\n        behavior: DATA_TABLE_DEFAULT_SCROLL_OPTIONS.behavior,\n        align: align,\n      });\n    };\n\n    function measureRows(): void {\n      // Early exit if the rowVirtualizer or scrollElement are not present\n      if (!_rowVirtualizer?.scrollElement) {\n        return;\n      }\n\n      // Select the grid defining container.\n      const gridContainer = _rowVirtualizer.scrollElement.querySelector(\n        '[style*=\"grid-template-rows\"]',\n      );\n\n      // Early exit if gridContainer is not a HTMLElement\n      if (gridContainer === null || !(gridContainer instanceof HTMLElement)) {\n        return;\n      }\n\n      // Store the original grid row template so it can be applied afterwards.\n      const originalGridTemplate = gridContainer.style.gridTemplateRows;\n      try {\n        let templateRows = table.getHeaderGridTemplateRows();\n        const rowCount = _rowVirtualizer.getVirtualItems().length;\n\n        if (rowCount > 0) {\n          // Set the row template for body rows to min-content so all rows can be measured by their actual size.\n          const bodyRows = `repeat(${rowCount}, min-content)`;\n          // Spacer row height can be defaulted to 0 as it's not relevant for the measuring.\n          templateRows = `${templateRows} 0px ${bodyRows} [body-end]`;\n        }\n\n        gridContainer.style.gridTemplateRows = templateRows;\n\n        // Select all row elements with the data attribute 'data-row'\n        const measureRows =\n          _rowVirtualizer.scrollElement.querySelectorAll('[data-row]');\n\n        // Iterate over each row relevant for measuring\n        for (const measureRow of Array.from(measureRows)) {\n          // Ensure the element is an instance of HTMLElement\n          if (!(measureRow instanceof HTMLElement)) {\n            continue;\n          }\n          _rowVirtualizer.measureElement(measureRow);\n        }\n\n        const virtualItems = _rowVirtualizer.getVirtualItems();\n        const virtualItemsLength = virtualItems.length;\n\n        const firstMeasuredRow =\n          measureRows.item(0)?.getAttribute('data-row') ?? null;\n        const isDifferentRowsVisible =\n          firstMeasuredRow !== null &&\n          virtualItemsLength > 0 &&\n          Number(firstMeasuredRow) !== virtualItems[0].index;\n\n        // If different rows are measured than those that are currently visible or\n        // if fewer items are measured than would now fit into the scrollContainer\n        // we reset the measurements cache and allow it to remeasure all items again.\n        if (isDifferentRowsVisible || measureRows.length < virtualItemsLength) {\n          _rowVirtualizer.measure();\n        }\n      } finally {\n        // Restore the original grid template.\n        gridContainer.style.gridTemplateRows = originalGridTemplate;\n      }\n    }\n\n    table.remeasureRows = memo(\n      (containerWidth) => {\n        const state = table.getState();\n        const expandingState = table.options.enableExpanding\n          ? Object.keys(state.expanded).length !== 0 && state.expanded\n          : undefined;\n        const rowDetailsState = table.options.enableRowDetails\n          ? state.rowDetails\n          : undefined;\n        const sortingState = table.options.enableSorting\n          ? state.sorting\n          : undefined;\n        return [\n          containerWidth,\n          expandingState,\n          rowDetailsState,\n          sortingState,\n          state.columnLineWrap,\n          state.visualVariantConfig.rowDensity,\n          state.visualVariantConfig.rowSeparation,\n          state.columnSizing,\n          state.pagination.pageIndex,\n          state.pagination.pageSize,\n          state.columnVisibility,\n          state.rowOrder,\n          table.options.data,\n          table.options.columns,\n        ];\n      },\n      (containerWidth) => {\n        if (containerWidth === 0) {\n          return;\n        }\n\n        // Need to shift this into the next update cycle in order to make sure that\n        // all styles that could change are actually already updated on the table.\n        // Without the shift, lineWrap values might not be updated yet when measuring.\n        table._queue(measureRows);\n      },\n      getMemoOptions(table.options, 'debugTable', 'table.remeasureRow'),\n    );\n\n    function measureColumns(columnIdOrIds: string | string[]): void {\n      // Early exit if the columnVirtualizer or scrollElement are not present\n      if (!_columnVirtualizer?.scrollElement) {\n        return;\n      }\n\n      // Select the grid defining container.\n      const gridContainer = _columnVirtualizer.scrollElement.querySelector(\n        '[style*=\"grid-template-columns\"]',\n      );\n\n      // Early exit if gridContainer is not a HTMLElement\n      if (gridContainer === null || !(gridContainer instanceof HTMLElement)) {\n        return;\n      }\n\n      // Store the original grid row template so it can be applied afterwards.\n      const originalGridTemplate = gridContainer.style.gridTemplateColumns;\n      try {\n        const columnIds = Array.isArray(columnIdOrIds)\n          ? columnIdOrIds\n          : [columnIdOrIds];\n        const columnIdsSet = new Set(columnIds);\n\n        // Reset measurements for the specified columns to trigger a remeasure when regenerating the grid template\n        table.resetMeasuredColumnWidths(columnIds);\n        gridContainer.style.gridTemplateColumns =\n          table.getGridTemplateColumns();\n\n        // Select all cells in the first body row\n        const firstRowCells = _columnVirtualizer.scrollElement.querySelectorAll(\n          '[role=\"rowgroup\"]:nth-child(2) [data-row]:first-child [data-columnid]',\n        );\n\n        // Iterate over each cell relevant for measuring\n        for (const cell of Array.from(firstRowCells)) {\n          const columnId = cell instanceof HTMLElement && cell.dataset.columnid;\n          // Only measure if the element is an instance of HTMLElement\n          // and its columnId is in the list of columnIds to measure\n          if (columnId && columnIdsSet.has(columnId)) {\n            _columnVirtualizer.measureElement(cell);\n          }\n        }\n\n        // assign the updated grid template with the newly measured column widths\n        gridContainer.style.gridTemplateColumns =\n          table.getGridTemplateColumns();\n      } catch {\n        // Restore the original grid template if something fails.\n        gridContainer.style.gridTemplateColumns = originalGridTemplate;\n      }\n    }\n\n    table.remeasureColumn = (columnId?: string) => {\n      if (columnId === undefined || columnId.length === 0) {\n        return;\n      }\n\n      table._queue(() => measureColumns(columnId));\n    };\n\n    table.remeasureAllColumns = () => {\n      const columnIdsToRemeasure =\n        table.getVisibleVirtualColumnIdsWithoutBuiltin();\n\n      if (columnIdsToRemeasure.length === 0) {\n        return;\n      }\n\n      table._queue(() => measureColumns(columnIdsToRemeasure));\n    };\n\n    table.hasColumnCellsRendered = (columnId: string) => {\n      if (!_columnVirtualizer?.scrollElement) {\n        return false;\n      }\n\n      return (\n        _columnVirtualizer?.scrollElement.querySelector(\n          `[role=\"cell\"][data-columnid=\"${CSS.escape(columnId)}\"]`,\n        ) !== null\n      );\n    };\n\n    table.getMeasuredColumnWidths = () => {\n      return measuredColumnWidths;\n    };\n\n    table.getMeasuredColumnWidth = (id: string) => {\n      return measuredColumnWidths.get(id);\n    };\n\n    table.resetMeasuredColumnWidths = (ids?: string[]) => {\n      if (ids) {\n        for (const id of ids) {\n          measuredColumnWidths.delete(id);\n        }\n      } else {\n        measuredColumnWidths.clear();\n      }\n    };\n\n    table.setMeasuredColumnWidth = (id: string, width: number) => {\n      measuredColumnWidths.set(id, width);\n    };\n\n    table.getHasVirtualizedRows = memo(\n      () => [_rowVirtualizer?.getVirtualItems().length],\n      (virtualItemsLength) => {\n        if (virtualItemsLength === undefined || virtualItemsLength === 0) {\n          return false;\n        }\n\n        const rows = table.getRowModel().rows;\n\n        return rows.length > virtualItemsLength;\n      },\n      getMemoOptions(\n        table.options,\n        'debugTable',\n        'table.getHasRowVirtualization',\n      ),\n    );\n  },\n};\n"],
+  "sourcesContent": ["import type { Virtualizer } from '@tanstack/react-virtual';\n\nimport { devLog } from '../../../../core/utils/logging.js';\nimport { DATA_TABLE_DEFAULT_SCROLL_OPTIONS } from '../../constants.js';\nimport type { Table, TableFeature } from '../../hooks/useTable/types.js';\nimport { getMemoOptions } from '../../hooks/useTable/utils.js';\nimport type { DataTableRowData } from '../../public.api.js';\nimport { memo } from '../../tanstack-table-core-override/src/index.js';\n\n/**\n * Feature implementation for virtual scrolling.\n * @internal\n */\nexport const DataTableVirtualScrolling: TableFeature = {\n  createTable<TData extends DataTableRowData>(table: Table<TData>): void {\n    let _rowVirtualizer: Virtualizer<HTMLDivElement, Element> | undefined =\n      undefined;\n    let _columnVirtualizer: Virtualizer<HTMLDivElement, Element> | undefined =\n      undefined;\n    // Save all column widths that have already been measured outside the virtualizer's measurementsCache.\n    // This ensures measured widths are available immediately and don't get lost when column visibility changes.\n    const measuredColumnWidths = new Map<string, number>();\n\n    table.registerVirtualizers = (\n      rowVirtualizer: Virtualizer<HTMLDivElement, Element>,\n      columnVirtualizer: Virtualizer<HTMLDivElement, Element>,\n    ) => {\n      _rowVirtualizer = rowVirtualizer;\n      _columnVirtualizer = columnVirtualizer;\n    };\n\n    table.getRowVirtualizer = () => {\n      return _rowVirtualizer;\n    };\n\n    table.getColumnVirtualizer = () => {\n      return _columnVirtualizer;\n    };\n\n    table.getRowVirtualizationContainer = () => {\n      return _rowVirtualizer?.scrollElement ?? undefined;\n    };\n\n    table.getRowHeight = (rowId) => {\n      if (\n        !_rowVirtualizer ||\n        !rowId ||\n        _rowVirtualizer.measurementsCache.length === 0\n      ) {\n        return 0;\n      }\n\n      const virtualRowIndex = _rowVirtualizer\n        .getVirtualItems()\n        .find((item) => item.key === rowId)?.index;\n\n      if (virtualRowIndex === undefined) {\n        return 0;\n      }\n\n      return (\n        _rowVirtualizer.measurementsCache.find(\n          (r) => r.index === virtualRowIndex,\n        )?.size ?? 0\n      );\n    };\n\n    table.getRowScrollOffset = () => _rowVirtualizer?.scrollOffset;\n\n    table.scrollToRowOffset = (offset: number | undefined | null) => {\n      if (offset !== undefined && offset !== null) {\n        _rowVirtualizer?.scrollToOffset(\n          offset,\n          DATA_TABLE_DEFAULT_SCROLL_OPTIONS,\n        );\n      }\n    };\n\n    // Scroll to a given `rowId` using `rowVirtualizer.scrollToIndex`\n    table.scrollToRow = (\n      rowId: string,\n      align:\n        | 'start'\n        | 'center'\n        | 'end' = DATA_TABLE_DEFAULT_SCROLL_OPTIONS.align,\n    ) => {\n      if (!_rowVirtualizer) {\n        devLog('[Table - VirtualScrolling] No rowVirtualizer was registered');\n        return;\n      }\n\n      // This code works because `allRows` will contain (only!) expanded subRows on the top level\n      // When scrolling to a subRow the row has to be expanded beforehand.\n      const allRows = table.getRowModel().rows;\n      const rowIndex = allRows.findIndex((row) => row.id === rowId);\n\n      if (rowIndex === -1) {\n        devLog(`[Table - VirtualScrolling] Row with id: \"${rowId}\" not found`);\n        return;\n      }\n\n      _rowVirtualizer.scrollToIndex(rowIndex, {\n        behavior: DATA_TABLE_DEFAULT_SCROLL_OPTIONS.behavior,\n        align: align,\n      });\n    };\n\n    function measureRows(): void {\n      // Early exit if the rowVirtualizer or scrollElement are not present\n      if (!_rowVirtualizer?.scrollElement) {\n        return;\n      }\n\n      // Select the grid defining container.\n      const gridContainer = _rowVirtualizer.scrollElement.querySelector(\n        '[style*=\"grid-template-rows\"]',\n      );\n\n      // Early exit if gridContainer is not a HTMLElement\n      if (gridContainer === null || !(gridContainer instanceof HTMLElement)) {\n        return;\n      }\n\n      // Store the original grid row template so it can be applied afterwards.\n      const originalGridTemplate = gridContainer.style.gridTemplateRows;\n      try {\n        let templateRows = table.getHeaderGridTemplateRows();\n        const rowCount = _rowVirtualizer.getVirtualItems().length;\n\n        if (rowCount > 0) {\n          // Set the row template for body rows to min-content so all rows can be measured by their actual size.\n          const bodyRows = `repeat(${rowCount}, min-content)`;\n          // Spacer row height can be defaulted to 0 as it's not relevant for the measuring.\n          templateRows = `${templateRows} 0px ${bodyRows} [body-end]`;\n        }\n\n        gridContainer.style.gridTemplateRows = templateRows;\n\n        // Select all row elements with the data attribute 'data-row'\n        const measureRows =\n          _rowVirtualizer.scrollElement.querySelectorAll('[data-row]');\n\n        // Iterate over each row relevant for measuring\n        for (const measureRow of Array.from(measureRows)) {\n          // Ensure the element is an instance of HTMLElement\n          if (!(measureRow instanceof HTMLElement)) {\n            continue;\n          }\n          _rowVirtualizer.measureElement(measureRow);\n        }\n\n        const virtualItems = _rowVirtualizer.getVirtualItems();\n        const virtualItemsLength = virtualItems.length;\n\n        const firstMeasuredRow =\n          measureRows.item(0)?.getAttribute('data-row') ?? null;\n        const isDifferentRowsVisible =\n          firstMeasuredRow !== null &&\n          virtualItemsLength > 0 &&\n          Number(firstMeasuredRow) !== virtualItems[0].index;\n\n        // If different rows are measured than those that are currently visible or\n        // if fewer items are measured than would now fit into the scrollContainer\n        // we reset the measurements cache and allow it to remeasure all items again.\n        if (isDifferentRowsVisible || measureRows.length < virtualItemsLength) {\n          _rowVirtualizer.measure();\n        }\n      } finally {\n        // Restore the original grid template.\n        gridContainer.style.gridTemplateRows = originalGridTemplate;\n      }\n    }\n\n    table.remeasureRows = memo(\n      (containerWidth) => {\n        const state = table.getState();\n        const expandingState = table.options.enableExpanding\n          ? Object.keys(state.expanded).length !== 0 && state.expanded\n          : undefined;\n        const rowDetailsState = table.options.enableRowDetails\n          ? state.rowDetails\n          : undefined;\n        const sortingState = table.options.enableSorting\n          ? state.sorting\n          : undefined;\n        return [\n          containerWidth,\n          expandingState,\n          rowDetailsState,\n          sortingState,\n          state.columnLineWrap,\n          state.visualVariantConfig.rowDensity,\n          state.visualVariantConfig.rowSeparation,\n          state.columnSizing,\n          state.pagination.pageIndex,\n          state.pagination.pageSize,\n          state.columnVisibility,\n          state.rowOrder,\n          table.options.data,\n          table.options.columns,\n        ];\n      },\n      (containerWidth) => {\n        if (containerWidth === 0) {\n          return;\n        }\n\n        // Need to shift this into the next update cycle in order to make sure that\n        // all styles that could change are actually already updated on the table.\n        // Without the shift, lineWrap values might not be updated yet when measuring.\n        table._queue(measureRows);\n      },\n      getMemoOptions(table.options, 'debugTable', 'table.remeasureRow'),\n    );\n\n    function measureColumns(columnIdOrIds: string | string[]): void {\n      // Early exit if the columnVirtualizer or scrollElement are not present\n      if (!_columnVirtualizer?.scrollElement) {\n        return;\n      }\n\n      // Select the grid defining container.\n      const gridContainer = _columnVirtualizer.scrollElement.querySelector(\n        '[style*=\"grid-template-columns\"]',\n      );\n\n      // Early exit if gridContainer is not a HTMLElement\n      if (gridContainer === null || !(gridContainer instanceof HTMLElement)) {\n        return;\n      }\n\n      // Store the original grid row template so it can be applied afterwards.\n      const originalGridTemplate = gridContainer.style.gridTemplateColumns;\n      try {\n        const columnIds = Array.isArray(columnIdOrIds)\n          ? columnIdOrIds\n          : [columnIdOrIds];\n        const columnIdsSet = new Set(columnIds);\n\n        // Reset measurements for the specified columns to trigger a remeasure when regenerating the grid template\n        table.resetMeasuredColumnWidths(columnIds);\n        gridContainer.style.gridTemplateColumns =\n          table.getGridTemplateColumns();\n\n        // Select all cells in the first body row\n        const firstRowCells = _columnVirtualizer.scrollElement.querySelectorAll(\n          '[role=\"rowgroup\"]:nth-child(2) [data-row]:first-child [data-columnid]',\n        );\n\n        // Iterate over each cell relevant for measuring\n        for (const cell of Array.from(firstRowCells)) {\n          const columnId = cell instanceof HTMLElement && cell.dataset.columnid;\n          // Only measure if the element is an instance of HTMLElement\n          // and its columnId is in the list of columnIds to measure\n          if (columnId && columnIdsSet.has(columnId)) {\n            _columnVirtualizer.measureElement(cell);\n          }\n        }\n\n        // assign the updated grid template with the newly measured column widths\n        gridContainer.style.gridTemplateColumns =\n          table.getGridTemplateColumns();\n      } catch {\n        // Restore the original grid template if something fails.\n        gridContainer.style.gridTemplateColumns = originalGridTemplate;\n      }\n    }\n\n    table.remeasureColumn = (columnId?: string) => {\n      if (columnId === undefined || columnId.length === 0) {\n        return;\n      }\n\n      table._queue(() => measureColumns(columnId));\n    };\n\n    table.remeasureAllColumns = () => {\n      const columnIdsToRemeasure =\n        table.getVisibleVirtualColumnIdsWithoutBuiltin();\n\n      if (columnIdsToRemeasure.length === 0) {\n        return;\n      }\n\n      table._queue(() => measureColumns(columnIdsToRemeasure));\n    };\n\n    table.hasColumnCellsRendered = (columnId: string) => {\n      if (!_columnVirtualizer?.scrollElement) {\n        return false;\n      }\n\n      return (\n        _columnVirtualizer?.scrollElement.querySelector(\n          `[role=\"cell\"][data-columnid=\"${CSS.escape(columnId)}\"]`,\n        ) !== null\n      );\n    };\n\n    table.getMeasuredColumnWidths = () => {\n      return measuredColumnWidths;\n    };\n\n    table.getMeasuredColumnWidth = (id: string) => {\n      return measuredColumnWidths.get(id);\n    };\n\n    table.resetMeasuredColumnWidths = (ids?: string[]) => {\n      if (ids) {\n        for (const id of ids) {\n          measuredColumnWidths.delete(id);\n        }\n      } else {\n        measuredColumnWidths.clear();\n      }\n    };\n\n    table.setMeasuredColumnWidth = (id: string, width: number) => {\n      measuredColumnWidths.set(id, width);\n    };\n\n    table.getHasVirtualizedRows = memo(\n      () => [_rowVirtualizer?.getVirtualItems().length],\n      (virtualItemsLength) => {\n        if (virtualItemsLength === undefined || virtualItemsLength === 0) {\n          return false;\n        }\n\n        const rows = table.getRowModel().rows;\n\n        return rows.length > virtualItemsLength;\n      },\n      getMemoOptions(\n        table.options,\n        'debugTable',\n        'table.getHasRowVirtualization',\n      ),\n    );\n  },\n};\n"],
   "mappings": "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",
   "names": ["measureRows"]
 }

package/esm/tables/DataTable/hooks/useHeaderDragAndDrop.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/useHeaderDragAndDrop.ts"],
-  "sourcesContent": ["import type { DraggableAttributes } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { type DragEvent, type TouchEvent, useRef } from 'react';\n\nimport type { Column } from './useTable/types.js';\nimport { isDragMotion } from '../features/ColumnOrder/column-order-dnd-utils.js';\n\ninterface UseHeaderCellDragAndDropParams {\n  /**\n   * Unique identifier for the header cell.\n   */\n  headerId: string;\n  /**\n   * Column instanceassociated with the header cell.\n   */\n  column: Column<unknown, unknown>;\n  /**\n   * Index of the column based on the virtualization index.\n   */\n  columnIndex: number;\n  /**\n   * Mode for column drag-and-drop functionality.\n   */\n  columnDragAndDropMode: 'none' | 'enabled' | 'only';\n}\n\ninterface UseHeaderCellDragAndDropResult {\n  /**\n   * Ref to set on the draggable element.\n   */\n  setNodeRef: (node: HTMLElement | null) => void;\n\n  /**\n   * Whether the header is currently being dragged.\n   */\n  isDragging: boolean;\n\n  /**\n   * Ref for the portal container when dragging.\n   */\n  portalRef: React.RefObject<HTMLElement | null>;\n\n  /**\n   * Props to spread on the draggable element (undefined if drag-and-drop is disabled).\n   */\n  dragAndDropProps:\n    | ({\n        /**\n         * Indicates that the element is draggable.\n         */\n        draggable: boolean;\n        /**\n         * Event handler for the drag start event.\n         */\n        onDragStart: (event: DragEvent<HTMLElement>) => void;\n        /**\n         * Event handler for the touch start event.\n         */\n        onTouchStart: (event: TouchEvent<HTMLElement>) => void;\n        /**\n         * Event handler for the touch move event.\n         */\n        onTouchMove: (event: TouchEvent<HTMLElement>) => void;\n      } & DraggableAttributes)\n    | undefined;\n}\n\n/**\n * Hook that encapsulates drag-and-drop functionality for header cells.\n *\n * @param params - Configuration for drag-and-drop behavior\n * @returns Drag-and-drop state and props to spread on the header element\n * @internal\n */\nexport function useHeaderCellDragAndDrop({\n  headerId,\n  column,\n  columnIndex,\n  columnDragAndDropMode,\n}: UseHeaderCellDragAndDropParams): UseHeaderCellDragAndDropResult {\n  const touchStart = useRef<TouchEvent>();\n  const portalRef = useRef<HTMLElement>(null);\n\n  const { setNodeRef, isDragging, attributes, listeners } = useSortable({\n    id: headerId,\n    data: {\n      portalRef,\n      column,\n      columnIndex,\n    },\n  });\n\n  const dragAndDropProps =\n    columnDragAndDropMode === 'none'\n      ? undefined\n      : {\n          ...attributes,\n          draggable: true,\n          onDragStart: (event: DragEvent<HTMLElement>) =>\n            listeners?.onMouseDown(event),\n          onTouchStart: (event: TouchEvent<HTMLElement>) => {\n            touchStart.current = event;\n          },\n          onTouchMove: (event: TouchEvent<HTMLElement>) => {\n            if (isDragMotion(event, touchStart?.current)) {\n              listeners?.onTouchStart(event);\n            }\n          },\n        };\n\n  return {\n    setNodeRef,\n    isDragging,\n    portalRef,\n    dragAndDropProps,\n  };\n}\n"],
-  "mappings": "AACA,SAAS,mBAAmB;AAC5B,SAA0C,cAAc;AAGxD,SAAS,oBAAoB;AAqEtB,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmE;AACjE,QAAM,aAAa,OAAmB;AACtC,QAAM,YAAY,OAAoB,IAAI;AAE1C,QAAM,EAAE,YAAY,YAAY,YAAY,UAAU,IAAI,YAAY;AAAA,IACpE,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,mBACJ,0BAA0B,SACtB,SACA;AAAA,IACE,GAAG;AAAA,IACH,WAAW;AAAA,IACX,aAAa,CAAC,UACZ,WAAW,YAAY,KAAK;AAAA,IAC9B,cAAc,CAAC,UAAmC;AAChD,iBAAW,UAAU;AAAA,IACvB;AAAA,IACA,aAAa,CAAC,UAAmC;AAC/C,UAAI,aAAa,OAAO,YAAY,OAAO,GAAG;AAC5C,mBAAW,aAAa,KAAK;AAAA,MAC/B;AAAA,IACF;AAAA,EACF;AAEN,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import type { DraggableAttributes } from '@dnd-kit/core';\nimport { useSortable } from '@dnd-kit/sortable';\nimport { type DragEvent, type RefObject, type TouchEvent, useRef } from 'react';\n\nimport type { Column } from './useTable/types.js';\nimport { isDragMotion } from '../features/ColumnOrder/column-order-dnd-utils.js';\n\ninterface UseHeaderCellDragAndDropParams {\n  /**\n   * Unique identifier for the header cell.\n   */\n  headerId: string;\n  /**\n   * Column instanceassociated with the header cell.\n   */\n  column: Column<unknown, unknown>;\n  /**\n   * Index of the column based on the virtualization index.\n   */\n  columnIndex: number;\n  /**\n   * Mode for column drag-and-drop functionality.\n   */\n  columnDragAndDropMode: 'none' | 'enabled' | 'only';\n}\n\ninterface UseHeaderCellDragAndDropResult {\n  /**\n   * Ref to set on the draggable element.\n   */\n  setNodeRef: (node: HTMLElement | null) => void;\n\n  /**\n   * Whether the header is currently being dragged.\n   */\n  isDragging: boolean;\n\n  /**\n   * Ref for the portal container when dragging.\n   */\n  portalRef: RefObject<HTMLElement | null>;\n\n  /**\n   * Props to spread on the draggable element (undefined if drag-and-drop is disabled).\n   */\n  dragAndDropProps:\n    | ({\n        /**\n         * Indicates that the element is draggable.\n         */\n        draggable: boolean;\n        /**\n         * Event handler for the drag start event.\n         */\n        onDragStart: (event: DragEvent<HTMLElement>) => void;\n        /**\n         * Event handler for the touch start event.\n         */\n        onTouchStart: (event: TouchEvent<HTMLElement>) => void;\n        /**\n         * Event handler for the touch move event.\n         */\n        onTouchMove: (event: TouchEvent<HTMLElement>) => void;\n      } & DraggableAttributes)\n    | undefined;\n}\n\n/**\n * Hook that encapsulates drag-and-drop functionality for header cells.\n *\n * @param params - Configuration for drag-and-drop behavior\n * @returns Drag-and-drop state and props to spread on the header element\n * @internal\n */\nexport function useHeaderCellDragAndDrop({\n  headerId,\n  column,\n  columnIndex,\n  columnDragAndDropMode,\n}: UseHeaderCellDragAndDropParams): UseHeaderCellDragAndDropResult {\n  const touchStart = useRef<TouchEvent>();\n  const portalRef = useRef<HTMLElement>(null);\n\n  const { setNodeRef, isDragging, attributes, listeners } = useSortable({\n    id: headerId,\n    data: {\n      portalRef,\n      column,\n      columnIndex,\n    },\n  });\n\n  const dragAndDropProps =\n    columnDragAndDropMode === 'none'\n      ? undefined\n      : {\n          ...attributes,\n          draggable: true,\n          onDragStart: (event: DragEvent<HTMLElement>) =>\n            listeners?.onMouseDown(event),\n          onTouchStart: (event: TouchEvent<HTMLElement>) => {\n            touchStart.current = event;\n          },\n          onTouchMove: (event: TouchEvent<HTMLElement>) => {\n            if (isDragMotion(event, touchStart?.current)) {\n              listeners?.onTouchStart(event);\n            }\n          },\n        };\n\n  return {\n    setNodeRef,\n    isDragging,\n    portalRef,\n    dragAndDropProps,\n  };\n}\n"],
+  "mappings": "AACA,SAAS,mBAAmB;AAC5B,SAA0D,cAAc;AAGxE,SAAS,oBAAoB;AAqEtB,SAAS,yBAAyB;AAAA,EACvC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAmE;AACjE,QAAM,aAAa,OAAmB;AACtC,QAAM,YAAY,OAAoB,IAAI;AAE1C,QAAM,EAAE,YAAY,YAAY,YAAY,UAAU,IAAI,YAAY;AAAA,IACpE,IAAI;AAAA,IACJ,MAAM;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,IACF;AAAA,EACF,CAAC;AAED,QAAM,mBACJ,0BAA0B,SACtB,SACA;AAAA,IACE,GAAG;AAAA,IACH,WAAW;AAAA,IACX,aAAa,CAAC,UACZ,WAAW,YAAY,KAAK;AAAA,IAC9B,cAAc,CAAC,UAAmC;AAChD,iBAAW,UAAU;AAAA,IACvB;AAAA,IACA,aAAa,CAAC,UAAmC;AAC/C,UAAI,aAAa,OAAO,YAAY,OAAO,GAAG;AAC5C,mBAAW,aAAa,KAAK;AAAA,MAC/B;AAAA,IACF;AAAA,EACF;AAEN,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/tables/DataTable/hooks/usePaginationSlot.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/usePaginationSlot.ts"],
-  "sourcesContent": ["import { type ReactElement } from 'react';\n\nimport { extractDataAttributes } from '../../utils/extract-data-attributes.js';\nimport type { DataTablePaginationProps } from '../features/Pagination/pagination-types.js';\n\n/**\n * Processes the pagination slot.\n *\n * @param paginationSlot - Datatable pagination slot\n * @returns processed pagination slot data\n * @internal\n */\nexport function usePaginationSlot(\n  paginationSlot: ReactElement<DataTablePaginationProps> | null,\n): {\n  paginationConsumerId?: string;\n  paginationDataTestId?: string;\n  paginationConsumerStyle?: React.CSSProperties;\n  paginationConsumerClassName?: string;\n  paginationDataAttributes: Record<string, unknown>;\n} {\n  const {\n    id: paginationConsumerId,\n    'data-testid': paginationDataTestId,\n    style: paginationConsumerStyle,\n    className: paginationConsumerClassName,\n    ...remainingProps\n  } = paginationSlot?.props ?? {};\n\n  const paginationDataAttributes = extractDataAttributes(remainingProps);\n\n  return {\n    paginationConsumerId,\n    paginationDataTestId,\n    paginationConsumerStyle,\n    paginationConsumerClassName,\n    paginationDataAttributes,\n  };\n}\n"],
+  "sourcesContent": ["import { type CSSProperties, type ReactElement } from 'react';\n\nimport { extractDataAttributes } from '../../utils/extract-data-attributes.js';\nimport type { DataTablePaginationProps } from '../features/Pagination/pagination-types.js';\n\n/**\n * Processes the pagination slot.\n *\n * @param paginationSlot - Datatable pagination slot\n * @returns processed pagination slot data\n * @internal\n */\nexport function usePaginationSlot(\n  paginationSlot: ReactElement<DataTablePaginationProps> | null,\n): {\n  paginationConsumerId?: string;\n  paginationDataTestId?: string;\n  paginationConsumerStyle?: CSSProperties;\n  paginationConsumerClassName?: string;\n  paginationDataAttributes: Record<string, unknown>;\n} {\n  const {\n    id: paginationConsumerId,\n    'data-testid': paginationDataTestId,\n    style: paginationConsumerStyle,\n    className: paginationConsumerClassName,\n    ...remainingProps\n  } = paginationSlot?.props ?? {};\n\n  const paginationDataAttributes = extractDataAttributes(remainingProps);\n\n  return {\n    paginationConsumerId,\n    paginationDataTestId,\n    paginationConsumerStyle,\n    paginationConsumerClassName,\n    paginationDataAttributes,\n  };\n}\n"],
   "mappings": "AAEA,SAAS,6BAA6B;AAU/B,SAAS,kBACd,gBAOA;AACA,QAAM;AAAA,IACJ,IAAI;AAAA,IACJ,eAAe;AAAA,IACf,OAAO;AAAA,IACP,WAAW;AAAA,IACX,GAAG;AAAA,EACL,IAAI,gBAAgB,SAAS,CAAC;AAE9B,QAAM,2BAA2B,sBAAsB,cAAc;AAErE,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/tables/DataTable/hooks/useToolbarSlot.js CHANGED Viewed

@@ -1,4 +1,8 @@
-import { useCallback, useMemo, useRef } from "react";
+import {
+  useCallback,
+  useMemo,
+  useRef
+} from "react";
 import {
   getToolbarConfig
 } from "../components/Toolbar/DataTableToolbar.js";

package/esm/tables/DataTable/hooks/useToolbarSlot.js.map CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/useToolbarSlot.ts"],
-  "sourcesContent": ["import { useCallback, useMemo, useRef } from 'react';\n\nimport type { DataTableColumnSettingsModalRef } from '../components/Toolbar/ColumnSettings/column-settings-types.js';\nimport {\n  getToolbarConfig,\n  type DataTableToolbarItemProps,\n  type DataTableToolbarProps,\n  type DataTableToolbarSlots,\n} from '../components/Toolbar/DataTableToolbar.js';\nimport type { DataTableColumnSettingsConfig } from '../public.api.js';\n\n/**\n * Processes the toolbar slot.\n * @param toolbarProps - toolbar props extracted from datatable slots\n * @returns processed toolbar slot data\n * @internal\n */\nexport function useToolbarSlot(toolbarProps: DataTableToolbarProps | null): {\n  toolbarSlots: DataTableToolbarSlots;\n  toolbarContent: React.ReactNode;\n  toolbarItemProps: DataTableToolbarItemProps;\n  toolbarRemainingProps: Omit<DataTableToolbarProps, 'children'>;\n  openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => void;\n  columnSettingsModalRef: React.RefObject<DataTableColumnSettingsModalRef>;\n} {\n  const { children: toolbarContent, ...toolbarRemainingProps } =\n    toolbarProps ?? {};\n  const { slots: toolbarSlots, toolbarItemProps } = useMemo(\n    () => getToolbarConfig(toolbarContent),\n    [toolbarContent],\n  );\n\n  const columnSettingsModalRef = useRef<DataTableColumnSettingsModalRef>(null);\n\n  // Create a stable callback for opening the column settings modal\n  // that always uses the latest ref value\n  const openColumnSettings = useCallback(\n    (columnSettings?: DataTableColumnSettingsConfig) => {\n      columnSettingsModalRef.current?.openColumnSettings(columnSettings);\n    },\n    [],\n  );\n\n  return {\n    toolbarSlots,\n    toolbarContent,\n    toolbarItemProps,\n    toolbarRemainingProps,\n    openColumnSettings,\n    columnSettingsModalRef,\n  };\n}\n"],
-  "mappings": "AAAA,SAAS,aAAa,SAAS,cAAc;AAG7C;AAAA,EACE;AAAA,OAIK;AASA,SAAS,eAAe,cAO7B;AACA,QAAM,EAAE,UAAU,gBAAgB,GAAG,sBAAsB,IACzD,gBAAgB,CAAC;AACnB,QAAM,EAAE,OAAO,cAAc,iBAAiB,IAAI;AAAA,IAChD,MAAM,iBAAiB,cAAc;AAAA,IACrC,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,yBAAyB,OAAwC,IAAI;AAI3E,QAAM,qBAAqB;AAAA,IACzB,CAAC,mBAAmD;AAClD,6BAAuB,SAAS,mBAAmB,cAAc;AAAA,IACnE;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
+  "sourcesContent": ["import {\n  useCallback,\n  useMemo,\n  useRef,\n  type ReactNode,\n  type RefObject,\n} from 'react';\n\nimport type { DataTableColumnSettingsModalRef } from '../components/Toolbar/ColumnSettings/column-settings-types.js';\nimport {\n  getToolbarConfig,\n  type DataTableToolbarItemProps,\n  type DataTableToolbarProps,\n  type DataTableToolbarSlots,\n} from '../components/Toolbar/DataTableToolbar.js';\nimport type { DataTableColumnSettingsConfig } from '../public.api.js';\n\n/**\n * Processes the toolbar slot.\n * @param toolbarProps - toolbar props extracted from datatable slots\n * @returns processed toolbar slot data\n * @internal\n */\nexport function useToolbarSlot(toolbarProps: DataTableToolbarProps | null): {\n  toolbarSlots: DataTableToolbarSlots;\n  toolbarContent: ReactNode;\n  toolbarItemProps: DataTableToolbarItemProps;\n  toolbarRemainingProps: Omit<DataTableToolbarProps, 'children'>;\n  openColumnSettings: (columnSettings?: DataTableColumnSettingsConfig) => void;\n  columnSettingsModalRef: RefObject<DataTableColumnSettingsModalRef>;\n} {\n  const { children: toolbarContent, ...toolbarRemainingProps } =\n    toolbarProps ?? {};\n  const { slots: toolbarSlots, toolbarItemProps } = useMemo(\n    () => getToolbarConfig(toolbarContent),\n    [toolbarContent],\n  );\n\n  const columnSettingsModalRef = useRef<DataTableColumnSettingsModalRef>(null);\n\n  // Create a stable callback for opening the column settings modal\n  // that always uses the latest ref value\n  const openColumnSettings = useCallback(\n    (columnSettings?: DataTableColumnSettingsConfig) => {\n      columnSettingsModalRef.current?.openColumnSettings(columnSettings);\n    },\n    [],\n  );\n\n  return {\n    toolbarSlots,\n    toolbarContent,\n    toolbarItemProps,\n    toolbarRemainingProps,\n    openColumnSettings,\n    columnSettingsModalRef,\n  };\n}\n"],
+  "mappings": "AAAA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAGK;AAGP;AAAA,EACE;AAAA,OAIK;AASA,SAAS,eAAe,cAO7B;AACA,QAAM,EAAE,UAAU,gBAAgB,GAAG,sBAAsB,IACzD,gBAAgB,CAAC;AACnB,QAAM,EAAE,OAAO,cAAc,iBAAiB,IAAI;AAAA,IAChD,MAAM,iBAAiB,cAAc;AAAA,IACrC,CAAC,cAAc;AAAA,EACjB;AAEA,QAAM,yBAAyB,OAAwC,IAAI;AAI3E,QAAM,qBAAqB;AAAA,IACzB,CAAC,mBAAmD;AAClD,6BAAuB,SAAS,mBAAmB,cAAc;AAAA,IACnE;AAAA,IACA,CAAC;AAAA,EACH;AAEA,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AACF;",
   "names": []
 }

package/esm/tables/SimpleTable/SimpleTable.css CHANGED Viewed

@@ -1,4 +1,4 @@
-._1ymahou0-3-1-1 {
+._1ymahou0-3-2-0 {
   border-collapse: separate;
   border-spacing: 0;
   font-family: var(--dt-typography-text-base-default-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
@@ -8,13 +8,13 @@
   text-decoration: var(--dt-typography-text-base-default-text-decoration, none);
   text-transform: var(--dt-typography-text-base-default-text-transform, none);
 }
-._1ymahou0-3-1-1 .strato-table-header {
+._1ymahou0-3-2-0 .strato-table-header {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._1ymahou0-3-1-1 .strato-table-header:last-child .strato-table-header-cell {
+._1ymahou0-3-2-0 .strato-table-header:last-child .strato-table-header-cell {
   border-bottom: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ymahou0-3-1-1 .strato-table-header-cell {
+._1ymahou0-3-2-0 .strato-table-header-cell {
   font-family: var(--dt-typography-text-base-emphasized-family, DynatraceFlow,Roboto,Helvetica,sans-serif);
   font-size: var(--dt-typography-text-base-emphasized-size, 14px);
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
@@ -24,61 +24,61 @@
   color: var(--dt-colors-text-neutral-subdued, #595a7d);
   position: relative;
 }
-._1ymahou0-3-1-1 .strato-table-cell {
+._1ymahou0-3-2-0 .strato-table-cell {
   position: relative;
 }
-._1ymahou0-3-1-1 .strato-table-cell-alignment-left {
+._1ymahou0-3-2-0 .strato-table-cell-alignment-left {
   text-align: start;
   justify-content: flex-start;
 }
-._1ymahou0-3-1-1 .strato-table-cell-alignment-center {
+._1ymahou0-3-2-0 .strato-table-cell-alignment-center {
   text-align: center;
   justify-content: center;
 }
-._1ymahou0-3-1-1 .strato-table-cell-alignment-right {
+._1ymahou0-3-2-0 .strato-table-cell-alignment-right {
   text-align: end;
   justify-content: flex-end;
 }
-._1ymahou0-3-1-1 .strato-table-cell-alignment-top-left {
+._1ymahou0-3-2-0 .strato-table-cell-alignment-top-left {
   text-align: start;
   justify-content: flex-start;
   vertical-align: top;
 }
-._1ymahou0-3-1-1 .strato-table-cell-alignment-top-center {
+._1ymahou0-3-2-0 .strato-table-cell-alignment-top-center {
   text-align: center;
   justify-content: center;
   vertical-align: top;
 }
-._1ymahou0-3-1-1 .strato-table-cell-alignment-top-right {
+._1ymahou0-3-2-0 .strato-table-cell-alignment-top-right {
   text-align: end;
   justify-content: flex-end;
   vertical-align: top;
 }
-._1ymahou0-3-1-1 .strato-table-cell-alignment-bottom-left {
+._1ymahou0-3-2-0 .strato-table-cell-alignment-bottom-left {
   text-align: start;
   justify-content: flex-start;
   vertical-align: bottom;
 }
-._1ymahou0-3-1-1 .strato-table-cell-alignment-bottom-center {
+._1ymahou0-3-2-0 .strato-table-cell-alignment-bottom-center {
   text-align: center;
   justify-content: center;
   vertical-align: bottom;
 }
-._1ymahou0-3-1-1 .strato-table-cell-alignment-bottom-right {
+._1ymahou0-3-2-0 .strato-table-cell-alignment-bottom-right {
   text-align: end;
   justify-content: flex-end;
   vertical-align: bottom;
 }
-._1ymahou0-3-1-1.strato-table-contained {
+._1ymahou0-3-2-0.strato-table-contained {
   border: var(--dt-borders-width-emphasized, 2px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
   border-radius: var(--dt-borders-radius-field-default, 6px);
   overflow: hidden;
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1ymahou0-3-1-1 .strato-table-row:last-child .strato-table-cell {
+._1ymahou0-3-2-0 .strato-table-row:last-child .strato-table-cell {
   border-bottom: none;
 }
-._1ymahou0-3-1-1.strato-table-code-font {
+._1ymahou0-3-2-0.strato-table-code-font {
   font-family: var(--dt-typography-code-base-default-family, Roboto Mono,monospace);
   font-size: var(--dt-typography-code-base-default-size, 14px);
   font-weight: var(--dt-typography-code-base-default-weight, 400);
@@ -87,16 +87,16 @@
   text-transform: var(--dt-typography-code-base-default-text-transform, none);
   color: var(--strato-table-cell-highlight-color, var(--dt-colors-text-neutral-default, #2f2f4f));
 }
-._1ymahou0-3-1-1.strato-table-cell-density-default .strato-table-cell, ._1ymahou0-3-1-1.strato-table-cell-density-default .strato-table-header-cell {
+._1ymahou0-3-2-0.strato-table-cell-density-default .strato-table-cell, ._1ymahou0-3-2-0.strato-table-cell-density-default .strato-table-header-cell {
   padding: var(--dt-spacings-size-8, 8px) var(--dt-spacings-size-12, 12px);
 }
-._1ymahou0-3-1-1.strato-table-cell-density-comfortable .strato-table-cell, ._1ymahou0-3-1-1.strato-table-cell-density-comfortable .strato-table-header-cell {
+._1ymahou0-3-2-0.strato-table-cell-density-comfortable .strato-table-cell, ._1ymahou0-3-2-0.strato-table-cell-density-comfortable .strato-table-header-cell {
   padding: var(--dt-spacings-size-12, 12px) var(--dt-spacings-size-16, 16px);
 }
-._1ymahou0-3-1-1.strato-table-cell-density-condensed .strato-table-cell, ._1ymahou0-3-1-1.strato-table-cell-density-condensed .strato-table-header-cell {
+._1ymahou0-3-2-0.strato-table-cell-density-condensed .strato-table-cell, ._1ymahou0-3-2-0.strato-table-cell-density-condensed .strato-table-header-cell {
   padding: var(--dt-spacings-size-4, 4px) var(--dt-spacings-size-6, 6px);
 }
-._1ymahou0-3-1-1.strato-table-colsep-divider .strato-table-header-cell + .strato-table-header-cell::before, ._1ymahou0-3-1-1.strato-table-colsep-divider .strato-table-cell + .strato-table-cell::before {
+._1ymahou0-3-2-0.strato-table-colsep-divider .strato-table-header-cell + .strato-table-header-cell::before, ._1ymahou0-3-2-0.strato-table-colsep-divider .strato-table-cell + .strato-table-cell::before {
   content: "";
   display: block;
   position: absolute;
@@ -106,15 +106,15 @@
   bottom: var(--dt-spacings-size-4, 4px);
   background-color: var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ymahou0-3-1-1.strato-table-rowsep-divider .strato-table-cell {
+._1ymahou0-3-2-0.strato-table-rowsep-divider .strato-table-cell {
   border-bottom: var(--dt-borders-width-default, 1px) var(--dt-borders-style-default, solid) var(--dt-colors-border-neutral-default, #dadbe4);
 }
-._1ymahou0-3-1-1.strato-table-rowsep-zebra .strato-table-row {
+._1ymahou0-3-2-0.strato-table-rowsep-zebra .strato-table-row {
   background-color: var(--dt-colors-background-surface-default, #fff);
 }
-._1ymahou0-3-1-1.strato-table-rowsep-zebra .strato-table-header {
+._1ymahou0-3-2-0.strato-table-rowsep-zebra .strato-table-header {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }
-._1ymahou0-3-1-1.strato-table-rowsep-zebra .strato-table-row-even {
+._1ymahou0-3-2-0.strato-table-rowsep-zebra .strato-table-row-even {
   background-color: var(--dt-colors-background-container-neutral-subdued, #f9f9fa);
 }