@dynatrace/strato-components 3.7.1 → 3.9.0

package/esm/tables/DataTable/features/UserActions/RowActionsColumnDef.js

@@ -6,6 +6,7 @@ import {
   Children,
   isValidElement,
   memo,
+  useCallback,
   useMemo,
   useState,
   Fragment as Fragment2
@@ -14,6 +15,7 @@ import { useIntl } from "react-intl";
 import { isElement } from "react-is";
 import { DotMenuIcon } from "@dynatrace/strato-icons";
 import * as styles from "./RowActions.sty.js";
+import { useCloseMenuOnScroll } from "./useCloseMenuOnScroll.js";
 import { Button } from "../../../../buttons/button/Button.js";
 import { Menu } from "../../../../navigation/menu/Menu.js";
 import { isTrigger as isMenuTrigger } from "../../../../navigation/menu/Trigger.js";
@@ -43,10 +45,27 @@ const DataTableInternalRowActions = memo(
     const density = table.atoms.visualVariantConfig?.get().rowDensity === "condensed" ? "condensed" : "default";
     const ariaLabel = intl.formatMessage(dataTableMessages.rowActionsTrigger);
     const [open, setOpen] = useState(false);
-    const handleOpenChange = (nextOpen) => {
-      setOpen(nextOpen);
-      table.setOpenMenuRowId(nextOpen ? props.rowId : null);
-    };
+    const closeMenu = useCallback(() => {
+      setOpen(false);
+      table.setOpenMenuRowId(null);
+    }, [table]);
+    const handleOpenChange = useCallback(
+      (nextOpen) => {
+        if (!nextOpen) {
+          closeMenu();
+          return;
+        }
+        setOpen(true);
+        table.setOpenMenuRowId(props.rowId);
+      },
+      [closeMenu, props.rowId, table]
+    );
+    useCloseMenuOnScroll({
+      isMenuOpen: open && table.getOpenMenuRowId() === props.rowId,
+      closeMenu,
+      rowId: props.rowId,
+      columnId: DATA_TABLE_ROW_ACTIONS_COLUMN_ID
+    });
     const { menu, freeformSlot } = useMemo(() => {
       const slots = {
         menu: null,

package/esm/tables/DataTable/features/UserActions/RowActionsColumnDef.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/RowActionsColumnDef.tsx"],
-  "sourcesContent": ["import {\n  createColumnHelper,\n  type AccessorFnColumnDef,\n  type RowData,\n} from '@tanstack/react-table';\nimport {\n  Children,\n  isValidElement,\n  memo,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type JSX,\n  Fragment,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './RowActions.sty.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { Menu, type MenuProps } from '../../../../navigation/menu/Menu.js';\nimport { isTrigger as isMenuTrigger } from '../../../../navigation/menu/Trigger.js';\nimport { DataTableDefaultCell } from '../../components/DataTableDefaultCell.js';\nimport { DATA_TABLE_ROW_ACTIONS_COLUMN_ID } from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\nconst rowActionsColumnHelper = createColumnHelper<\n  TDataTableFeatures,\n  RowData\n>();\n\n/**\n * @returns the custom menu trigger if present, or a default menu trigger (dot menu icon button) otherwise.\n */\nfunction getMenuTrigger(\n  menu: ReactElement<MenuProps>,\n  size?: 'default' | 'condensed',\n  ariaLabel?: string,\n) {\n  const menuChildren = Children.toArray(menu.props.children) as ReactElement[];\n  const customMenuTrigger = menuChildren.find(isMenuTrigger);\n  if (customMenuTrigger) {\n    return customMenuTrigger.props.children;\n  }\n  return getDefaultMenuTrigger(size, ariaLabel);\n}\n\nfunction getDefaultMenuTrigger(\n  size?: 'default' | 'condensed',\n  ariaLabel?: string,\n): JSX.Element {\n  return (\n    <Button variant=\"default\" size={size} aria-label={ariaLabel}>\n      <Button.Prefix>\n        <DotMenuIcon />\n      </Button.Prefix>\n    </Button>\n  );\n}\n\nfunction isFragment(\n  child: ReactElement,\n): child is ReactElement<PropsWithChildren> {\n  return child.type === Fragment;\n}\n\n/**\n * Internal wrapper component for the row actions children.\n * @internal\n */\nconst DataTableInternalRowActions = memo(\n  (props: PropsWithChildren<{ rowId: string }>) => {\n    const table = useDataTable();\n    const intl = useIntl();\n    const density =\n      table.atoms.visualVariantConfig?.get().rowDensity === 'condensed'\n        ? 'condensed'\n        : 'default';\n    const ariaLabel = intl.formatMessage(dataTableMessages.rowActionsTrigger);\n\n    const [open, setOpen] = useState(false);\n\n    const handleOpenChange = (nextOpen: boolean) => {\n      setOpen(nextOpen);\n      table.setOpenMenuRowId(nextOpen ? props.rowId : null);\n    };\n\n    const { menu, freeformSlot } = useMemo(() => {\n      const slots: {\n        menu: ReactElement<MenuProps> | null;\n        freeformSlot: ReactNode[];\n      } = {\n        menu: null,\n        freeformSlot: [],\n      };\n\n      const childrenArray = Children.toArray(props.children);\n      for (const child of childrenArray) {\n        if (isValidElement<MenuProps>(child) && child.type === Menu) {\n          slots.menu = child;\n          continue;\n        }\n        slots.freeformSlot.push(child);\n      }\n      return slots;\n    }, [props.children]);\n\n    if (!menu) {\n      return freeformSlot;\n    }\n\n    // Avoid spawning the menu while it is closed to avoid react render\n    // performance issues.\n    if (open === false) {\n      return (\n        <>\n          {freeformSlot}\n          <span\n            onClick={() => handleOpenChange(true)}\n            style={{ display: 'contents' }}\n          >\n            {getMenuTrigger(menu, density, ariaLabel)}\n          </span>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {freeformSlot}\n        <Menu\n          open={open}\n          onOpenChange={handleOpenChange}\n          modal={false}\n          {...menu.props}\n        >\n          <Menu.Trigger>\n            <Button variant=\"default\" size={density} aria-label={ariaLabel}>\n              <Button.Prefix>\n                <DotMenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          {menu.props.children}\n        </Menu>\n      </>\n    );\n  },\n);\n\n/**\n * Column definition for the Action Column\n * @internal\n */\nexport const ROW_ACTIONS_COLUMN: AccessorFnColumnDef<\n  TDataTableFeatures,\n  RowData,\n  string\n> = rowActionsColumnHelper.accessor(() => '', {\n  id: DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  header: '',\n  width: 'content',\n  enableSorting: false,\n  enableUserActions: false,\n  enableHiding: false,\n  enableResizing: false,\n  meta: {\n    builtin: true,\n    builtinPlacement: 'suffix',\n    hasCustomCellRenderer: true,\n    hasCustomHeaderRenderer: true,\n  },\n  cell: ({ row, table }) => {\n    if (table.options.rowActions === undefined) {\n      return null;\n    }\n    const actions = table.options.rowActions(row.original, {\n      rowDensity: table.atoms.visualVariantConfig?.get().rowDensity,\n      rowIndex: row.index,\n      rowId: row.id,\n    });\n\n    if (isElement(actions)) {\n      return (\n        <DataTableDefaultCell className={styles.rowActions}>\n          <DataTableInternalRowActions rowId={row.id}>\n            {isFragment(actions) ? actions.props.children : actions}\n          </DataTableInternalRowActions>\n        </DataTableDefaultCell>\n      );\n    }\n  },\n});\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  createColumnHelper,\n  type AccessorFnColumnDef,\n  type RowData,\n} from '@tanstack/react-table';\nimport {\n  Children,\n  isValidElement,\n  memo,\n  useCallback,\n  useMemo,\n  useState,\n  type PropsWithChildren,\n  type ReactElement,\n  type ReactNode,\n  type JSX,\n  Fragment,\n} from 'react';\nimport { useIntl } from 'react-intl';\nimport { isElement } from 'react-is';\n\nimport { DotMenuIcon } from '@dynatrace/strato-icons';\n\nimport * as styles from './RowActions.sty.js';\nimport { useCloseMenuOnScroll } from './useCloseMenuOnScroll.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { Menu, type MenuProps } from '../../../../navigation/menu/Menu.js';\nimport { isTrigger as isMenuTrigger } from '../../../../navigation/menu/Trigger.js';\nimport { DataTableDefaultCell } from '../../components/DataTableDefaultCell.js';\nimport { DATA_TABLE_ROW_ACTIONS_COLUMN_ID } from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../messages.js';\nimport type { TDataTableFeatures } from '../types/features.types.js';\n\nconst rowActionsColumnHelper = createColumnHelper<\n  TDataTableFeatures,\n  RowData\n>();\n\n/**\n * Determines the trigger element for the row actions menu. If a custom trigger is provided as a child of the Menu component, it will be used as the trigger. Otherwise, a default trigger (dot menu icon button) will be returned.\n * @param menu - the Menu component for which to determine the trigger element.\n * @param size - the size of the default trigger button, which is determined by the row density. Condensed rows get a smaller button to match the more compact styling.\n * @param ariaLabel - the aria-label for the default trigger button, which should be provided to ensure accessibility since the button only contains an icon with no visible text.\n * @returns the custom menu trigger if present, or a default menu trigger (dot menu icon button) otherwise.\n */\nfunction getMenuTrigger(\n  menu: ReactElement<MenuProps>,\n  size?: 'default' | 'condensed',\n  ariaLabel?: string,\n) {\n  const menuChildren = Children.toArray(menu.props.children) as ReactElement[];\n  const customMenuTrigger = menuChildren.find(isMenuTrigger);\n  if (customMenuTrigger) {\n    return customMenuTrigger.props.children;\n  }\n  return getDefaultMenuTrigger(size, ariaLabel);\n}\n\n/**\n * Returns the default menu trigger element (dot menu icon button) for the row actions column.\n * @param size - the size of the button, which is determined by the row density. Condensed rows get a smaller button to match the more compact styling.\n * @param ariaLabel - the aria-label for the button, which should be provided to ensure accessibility since the button only contains an icon with no visible text.\n * @returns The default menu trigger element.\n */\nfunction getDefaultMenuTrigger(\n  size?: 'default' | 'condensed',\n  ariaLabel?: string,\n): JSX.Element {\n  return (\n    <Button variant=\"default\" size={size} aria-label={ariaLabel}>\n      <Button.Prefix>\n        <DotMenuIcon />\n      </Button.Prefix>\n    </Button>\n  );\n}\n/**\n * Typeguard function that checks if a ReactElement is a Fragment,\n * which is used to determine how to extract the children for the row actions menu.\n * @param child - the ReactElement to check.\n * @returns true if the element is a Fragment, false otherwise.\n */\nfunction isFragment(\n  child: ReactElement,\n): child is ReactElement<PropsWithChildren> {\n  return child.type === Fragment;\n}\n\n/**\n * Internal wrapper component for the row actions children.\n * @internal\n */\nconst DataTableInternalRowActions = memo(\n  (props: PropsWithChildren<{ rowId: string }>) => {\n    const table = useDataTable();\n    const intl = useIntl();\n    const density =\n      table.atoms.visualVariantConfig?.get().rowDensity === 'condensed'\n        ? 'condensed'\n        : 'default';\n    const ariaLabel = intl.formatMessage(dataTableMessages.rowActionsTrigger);\n\n    const [open, setOpen] = useState(false);\n\n    const closeMenu = useCallback(() => {\n      setOpen(false);\n      table.setOpenMenuRowId(null);\n    }, [table]);\n\n    const handleOpenChange = useCallback(\n      (nextOpen: boolean) => {\n        if (!nextOpen) {\n          closeMenu();\n          return;\n        }\n        setOpen(true);\n        table.setOpenMenuRowId(props.rowId);\n      },\n      [closeMenu, props.rowId, table],\n    );\n\n    useCloseMenuOnScroll({\n      isMenuOpen: open && table.getOpenMenuRowId() === props.rowId,\n      closeMenu,\n      rowId: props.rowId,\n      columnId: DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n    });\n\n    const { menu, freeformSlot } = useMemo(() => {\n      const slots: {\n        menu: ReactElement<MenuProps> | null;\n        freeformSlot: ReactNode[];\n      } = {\n        menu: null,\n        freeformSlot: [],\n      };\n\n      const childrenArray = Children.toArray(props.children);\n      for (const child of childrenArray) {\n        if (isValidElement<MenuProps>(child) && child.type === Menu) {\n          slots.menu = child;\n          continue;\n        }\n        slots.freeformSlot.push(child);\n      }\n      return slots;\n    }, [props.children]);\n\n    if (!menu) {\n      return freeformSlot;\n    }\n\n    // Avoid spawning the menu while it is closed to avoid react render\n    // performance issues.\n    if (open === false) {\n      return (\n        <>\n          {freeformSlot}\n          <span\n            onClick={() => handleOpenChange(true)}\n            style={{ display: 'contents' }}\n          >\n            {getMenuTrigger(menu, density, ariaLabel)}\n          </span>\n        </>\n      );\n    }\n\n    return (\n      <>\n        {freeformSlot}\n        <Menu\n          open={open}\n          onOpenChange={handleOpenChange}\n          modal={false}\n          {...menu.props}\n        >\n          <Menu.Trigger>\n            <Button variant=\"default\" size={density} aria-label={ariaLabel}>\n              <Button.Prefix>\n                <DotMenuIcon />\n              </Button.Prefix>\n            </Button>\n          </Menu.Trigger>\n          {menu.props.children}\n        </Menu>\n      </>\n    );\n  },\n);\n\n/**\n * Column definition for the Action Column\n * @internal\n */\nexport const ROW_ACTIONS_COLUMN: AccessorFnColumnDef<\n  TDataTableFeatures,\n  RowData,\n  string\n> = rowActionsColumnHelper.accessor(() => '', {\n  id: DATA_TABLE_ROW_ACTIONS_COLUMN_ID,\n  header: '',\n  width: 'content',\n  enableSorting: false,\n  enableUserActions: false,\n  enableHiding: false,\n  enableResizing: false,\n  meta: {\n    builtin: true,\n    builtinPlacement: 'suffix',\n    hasCustomCellRenderer: true,\n    hasCustomHeaderRenderer: true,\n  },\n  cell: ({ row, table }) => {\n    if (table.options.rowActions === undefined) {\n      return null;\n    }\n    const actions = table.options.rowActions(row.original, {\n      rowDensity: table.atoms.visualVariantConfig?.get().rowDensity,\n      rowIndex: row.index,\n      rowId: row.id,\n    });\n\n    if (isElement(actions)) {\n      return (\n        <DataTableDefaultCell className={styles.rowActions}>\n          <DataTableInternalRowActions rowId={row.id}>\n            {isFragment(actions) ? actions.props.children : actions}\n          </DataTableInternalRowActions>\n        </DataTableDefaultCell>\n      );\n    }\n  },\n});\n"],
+  "mappings": "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",
   "names": ["Fragment"]
 }

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

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

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

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

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/UserActions/UserActions.css.ts"],
-  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../../../core/components/app-root/AppRoot.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../ColumnSizing/ColumnSizing.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-7-1';\nexport var floatingMenuButton = '_duopj91-3-7-1';"],
+  "sourcesContent": ["import '../../components/Alignment.css';\nimport '../../DataTable.css';\nimport '../../../../core/components/app-root/AppRoot.css';\nimport '../../components/DataTableVirtualizationContainer.css';\nimport '../RowOrder/RowOrder.css';\nimport '../RowDetails/RowDetails.css';\nimport '../RowInteractivity/RowInteractivity.css';\nimport '../../components/DataTableRow.css';\nimport '../ColumnSizing/ColumnSizing.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-9-0';\nexport var floatingMenuButton = '_duopj91-3-9-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;AACP,OAAO;AACP,OAAO;AACA,IAAI,eAAe;AACnB,IAAI,qBAAqB;",
   "names": []
 }

package/esm/tables/DataTable/features/UserActions/useCloseFloatingMenuOnScroll.js

@@ -0,0 +1,88 @@
+import { useEffect } from "react";
+import { DATA_TABLE_ROW_HEIGHT_MAP } from "../../constants.js";
+import { useDataTable } from "../../contexts/DataTableContext.js";
+const CLOSE_THRESHOLD = DATA_TABLE_ROW_HEIGHT_MAP.default;
+function useCloseFloatingMenuOnScroll(props) {
+  const { isMenuOpen, closeMenu, stickyVertically = false } = props;
+  const table = useDataTable();
+  useEffect(() => {
+    if (!isMenuOpen) {
+      return;
+    }
+    const closeThreshold = CLOSE_THRESHOLD;
+    let scrolledDistance = 0;
+    const accumulate = (delta) => {
+      scrolledDistance += Math.abs(delta);
+    };
+    const closeIfScrolledFarEnough = () => {
+      if (scrolledDistance >= closeThreshold) {
+        closeMenu();
+      }
+    };
+    const containerElement = table.getRowVirtualizationContainer();
+    let lastContainerScrollTop = containerElement?.scrollTop ?? 0;
+    let lastContainerScrollLeft = containerElement?.scrollLeft ?? 0;
+    let lastTouchY = null;
+    let lastTouchX = null;
+    const handleWheel = (event) => {
+      const containerWillScrollVertically = stickyVertically && containerElement !== null && containerElement !== void 0 && containerElement.contains(event.target) && (event.deltaY > 0 ? containerElement.scrollTop + containerElement.clientHeight < containerElement.scrollHeight : containerElement.scrollTop > 0);
+      accumulate(
+        containerWillScrollVertically ? Math.abs(event.deltaX) : Math.max(Math.abs(event.deltaX), Math.abs(event.deltaY))
+      );
+      closeIfScrolledFarEnough();
+    };
+    const handleTouchMove = (event) => {
+      const touch = event.touches[0];
+      if (!touch) {
+        return;
+      }
+      if (lastTouchY !== null && lastTouchX !== null) {
+        accumulate(
+          Math.max(
+            Math.abs(touch.clientX - lastTouchX),
+            Math.abs(touch.clientY - lastTouchY)
+          )
+        );
+      }
+      lastTouchY = touch.clientY;
+      lastTouchX = touch.clientX;
+      closeIfScrolledFarEnough();
+    };
+    const handleContainerScroll = () => {
+      if (!containerElement) {
+        return;
+      }
+      accumulate(
+        stickyVertically ? Math.abs(containerElement.scrollLeft - lastContainerScrollLeft) : Math.max(
+          Math.abs(containerElement.scrollTop - lastContainerScrollTop),
+          Math.abs(containerElement.scrollLeft - lastContainerScrollLeft)
+        )
+      );
+      lastContainerScrollTop = containerElement.scrollTop;
+      lastContainerScrollLeft = containerElement.scrollLeft;
+      closeIfScrolledFarEnough();
+    };
+    window.addEventListener("wheel", handleWheel, {
+      passive: true,
+      capture: true
+    });
+    window.addEventListener("touchmove", handleTouchMove, {
+      passive: true,
+      capture: true
+    });
+    containerElement?.addEventListener("scroll", handleContainerScroll, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener("wheel", handleWheel, { capture: true });
+      window.removeEventListener("touchmove", handleTouchMove, {
+        capture: true
+      });
+      containerElement?.removeEventListener("scroll", handleContainerScroll);
+    };
+  }, [isMenuOpen, closeMenu, stickyVertically, table]);
+}
+export {
+  useCloseFloatingMenuOnScroll
+};
+//# sourceMappingURL=useCloseFloatingMenuOnScroll.js.map

package/esm/tables/DataTable/features/UserActions/useCloseFloatingMenuOnScroll.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/tables/DataTable/features/UserActions/useCloseFloatingMenuOnScroll.ts"],
+  "sourcesContent": ["import { useEffect } from 'react';\n\nimport { DATA_TABLE_ROW_HEIGHT_MAP } from '../../constants.js';\nimport { useDataTable } from '../../contexts/DataTableContext.js';\n\nconst CLOSE_THRESHOLD = DATA_TABLE_ROW_HEIGHT_MAP.default;\n\n/**\n * Closes the right-click floating menu once the user scrolls far enough. The menu is\n * portaled to the body at fixed coordinates, so it does not follow the table on scroll \u2014\n * it is dismissed instead of being left floating detached from its anchor.\n *\n * When `stickyVertically` is true (header menus), vertical scroll of the table container\n * is ignored because the header is sticky and its position doesn't change vertically.\n * Page-level wheel/touch events and horizontal container scroll still close the menu.\n */\nexport function useCloseFloatingMenuOnScroll(props: {\n  isMenuOpen: boolean;\n  closeMenu: () => void;\n  stickyVertically?: boolean;\n}): void {\n  const { isMenuOpen, closeMenu, stickyVertically = false } = props;\n  const table = useDataTable();\n\n  useEffect(() => {\n    if (!isMenuOpen) {\n      return;\n    }\n\n    // Only close once the accumulated scroll distance crosses this threshold. A small\n    // threshold avoids closing the menu on minimal or unintentional scrolling.\n    const closeThreshold = CLOSE_THRESHOLD;\n    let scrolledDistance = 0;\n\n    const accumulate = (delta: number) => {\n      scrolledDistance += Math.abs(delta);\n    };\n\n    const closeIfScrolledFarEnough = () => {\n      if (scrolledDistance >= closeThreshold) {\n        closeMenu();\n      }\n    };\n\n    const containerElement = table.getRowVirtualizationContainer();\n    let lastContainerScrollTop = containerElement?.scrollTop ?? 0;\n    let lastContainerScrollLeft = containerElement?.scrollLeft ?? 0;\n    let lastTouchY: number | null = null;\n    let lastTouchX: number | null = null;\n\n    // For page-level scrolling we listen to user gestures (wheel/touch) rather than the\n    // `scroll` event: opening the menu auto-focuses its first item, which can scroll the\n    // document programmatically and would otherwise close the menu the instant it opens.\n    const handleWheel = (event: WheelEvent) => {\n      // For sticky-vertical anchors (e.g. column headers) we want to ignore vertical\n      // wheel events that will scroll the table container \u2014 the header is sticky and\n      // doesn't move. But if the container has no room to scroll in the wheel direction\n      // (already at the boundary, or not overflow-scrollable at all), the event will\n      // scroll the page instead, and the menu anchor's position is now wrong \u2014 close it.\n      const containerWillScrollVertically =\n        stickyVertically &&\n        containerElement !== null &&\n        containerElement !== undefined &&\n        containerElement.contains(event.target as Node) &&\n        (event.deltaY > 0\n          ? containerElement.scrollTop + containerElement.clientHeight <\n            containerElement.scrollHeight\n          : containerElement.scrollTop > 0);\n\n      accumulate(\n        containerWillScrollVertically\n          ? Math.abs(event.deltaX)\n          : Math.max(Math.abs(event.deltaX), Math.abs(event.deltaY)),\n      );\n      closeIfScrolledFarEnough();\n    };\n\n    const handleTouchMove = (event: TouchEvent) => {\n      const touch = event.touches[0];\n      if (!touch) {\n        return;\n      }\n      if (lastTouchY !== null && lastTouchX !== null) {\n        accumulate(\n          Math.max(\n            Math.abs(touch.clientX - lastTouchX),\n            Math.abs(touch.clientY - lastTouchY),\n          ),\n        );\n      }\n      lastTouchY = touch.clientY;\n      lastTouchX = touch.clientX;\n      closeIfScrolledFarEnough();\n    };\n\n    // The virtualization container's `scroll` event is safe to use directly because the\n    // body-portaled menu never scrolls that container when it gains focus.\n    const handleContainerScroll = () => {\n      if (!containerElement) {\n        return;\n      }\n      accumulate(\n        stickyVertically\n          ? Math.abs(containerElement.scrollLeft - lastContainerScrollLeft)\n          : Math.max(\n              Math.abs(containerElement.scrollTop - lastContainerScrollTop),\n              Math.abs(containerElement.scrollLeft - lastContainerScrollLeft),\n            ),\n      );\n      lastContainerScrollTop = containerElement.scrollTop;\n      lastContainerScrollLeft = containerElement.scrollLeft;\n      closeIfScrolledFarEnough();\n    };\n\n    window.addEventListener('wheel', handleWheel, {\n      passive: true,\n      capture: true,\n    });\n    window.addEventListener('touchmove', handleTouchMove, {\n      passive: true,\n      capture: true,\n    });\n    containerElement?.addEventListener('scroll', handleContainerScroll, {\n      passive: true,\n    });\n\n    return () => {\n      window.removeEventListener('wheel', handleWheel, { capture: true });\n      window.removeEventListener('touchmove', handleTouchMove, {\n        capture: true,\n      });\n      containerElement?.removeEventListener('scroll', handleContainerScroll);\n    };\n  }, [isMenuOpen, closeMenu, stickyVertically, table]);\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,iCAAiC;AAC1C,SAAS,oBAAoB;AAE7B,MAAM,kBAAkB,0BAA0B;AAW3C,SAAS,6BAA6B,OAIpC;AACP,QAAM,EAAE,YAAY,WAAW,mBAAmB,MAAM,IAAI;AAC5D,QAAM,QAAQ,aAAa;AAE3B,YAAU,MAAM;AACd,QAAI,CAAC,YAAY;AACf;AAAA,IACF;AAIA,UAAM,iBAAiB;AACvB,QAAI,mBAAmB;AAEvB,UAAM,aAAa,CAAC,UAAkB;AACpC,0BAAoB,KAAK,IAAI,KAAK;AAAA,IACpC;AAEA,UAAM,2BAA2B,MAAM;AACrC,UAAI,oBAAoB,gBAAgB;AACtC,kBAAU;AAAA,MACZ;AAAA,IACF;AAEA,UAAM,mBAAmB,MAAM,8BAA8B;AAC7D,QAAI,yBAAyB,kBAAkB,aAAa;AAC5D,QAAI,0BAA0B,kBAAkB,cAAc;AAC9D,QAAI,aAA4B;AAChC,QAAI,aAA4B;AAKhC,UAAM,cAAc,CAAC,UAAsB;AAMzC,YAAM,gCACJ,oBACA,qBAAqB,QACrB,qBAAqB,UACrB,iBAAiB,SAAS,MAAM,MAAc,MAC7C,MAAM,SAAS,IACZ,iBAAiB,YAAY,iBAAiB,eAC9C,iBAAiB,eACjB,iBAAiB,YAAY;AAEnC;AAAA,QACE,gCACI,KAAK,IAAI,MAAM,MAAM,IACrB,KAAK,IAAI,KAAK,IAAI,MAAM,MAAM,GAAG,KAAK,IAAI,MAAM,MAAM,CAAC;AAAA,MAC7D;AACA,+BAAyB;AAAA,IAC3B;AAEA,UAAM,kBAAkB,CAAC,UAAsB;AAC7C,YAAM,QAAQ,MAAM,QAAQ,CAAC;AAC7B,UAAI,CAAC,OAAO;AACV;AAAA,MACF;AACA,UAAI,eAAe,QAAQ,eAAe,MAAM;AAC9C;AAAA,UACE,KAAK;AAAA,YACH,KAAK,IAAI,MAAM,UAAU,UAAU;AAAA,YACnC,KAAK,IAAI,MAAM,UAAU,UAAU;AAAA,UACrC;AAAA,QACF;AAAA,MACF;AACA,mBAAa,MAAM;AACnB,mBAAa,MAAM;AACnB,+BAAyB;AAAA,IAC3B;AAIA,UAAM,wBAAwB,MAAM;AAClC,UAAI,CAAC,kBAAkB;AACrB;AAAA,MACF;AACA;AAAA,QACE,mBACI,KAAK,IAAI,iBAAiB,aAAa,uBAAuB,IAC9D,KAAK;AAAA,UACH,KAAK,IAAI,iBAAiB,YAAY,sBAAsB;AAAA,UAC5D,KAAK,IAAI,iBAAiB,aAAa,uBAAuB;AAAA,QAChE;AAAA,MACN;AACA,+BAAyB,iBAAiB;AAC1C,gCAA0B,iBAAiB;AAC3C,+BAAyB;AAAA,IAC3B;AAEA,WAAO,iBAAiB,SAAS,aAAa;AAAA,MAC5C,SAAS;AAAA,MACT,SAAS;AAAA,IACX,CAAC;AACD,WAAO,iBAAiB,aAAa,iBAAiB;AAAA,MACpD,SAAS;AAAA,MACT,SAAS;AAAA,IACX,CAAC;AACD,sBAAkB,iBAAiB,UAAU,uBAAuB;AAAA,MAClE,SAAS;AAAA,IACX,CAAC;AAED,WAAO,MAAM;AACX,aAAO,oBAAoB,SAAS,aAAa,EAAE,SAAS,KAAK,CAAC;AAClE,aAAO,oBAAoB,aAAa,iBAAiB;AAAA,QACvD,SAAS;AAAA,MACX,CAAC;AACD,wBAAkB,oBAAoB,UAAU,qBAAqB;AAAA,IACvE;AAAA,EACF,GAAG,CAAC,YAAY,WAAW,kBAAkB,KAAK,CAAC;AACrD;",
+  "names": []
+}

package/esm/tables/DataTable/features/UserActions/useCloseMenuOnScroll.js

@@ -0,0 +1,60 @@
+import { useEffect } from "react";
+import { useDataTable } from "../../contexts/DataTableContext.js";
+function getCellTriggerElement(containerElement, rowId) {
+  const row = containerElement.querySelector(
+    `[role="row"][data-rowid="${CSS.escape(rowId)}"]`
+  );
+  return row?.querySelector('button[data-state="open"]') ?? null;
+}
+function getHeaderTriggerElement(containerElement) {
+  return containerElement.querySelector(
+    '[data-rowgroup="header"] button[data-state="open"]'
+  );
+}
+function useCloseMenuOnScroll(props) {
+  const { isMenuOpen, closeMenu, rowId, columnId, isHeader = false } = props;
+  const table = useDataTable();
+  useEffect(() => {
+    if (!isMenuOpen) {
+      return;
+    }
+    const containerElement = table.getRowVirtualizationContainer();
+    if (!containerElement) {
+      return;
+    }
+    const triggerElement = isHeader ? getHeaderTriggerElement(containerElement) : getCellTriggerElement(containerElement, rowId);
+    if (!triggerElement) {
+      return;
+    }
+    const headerHeight = isHeader ? 0 : table.getTotalHeaderHeight();
+    const isColumnPinned = table.getColumn(columnId)?.getIsPinned() !== false;
+    const leftPinnedWidth = isColumnPinned ? 0 : table.getLeftLeafColumns().reduce((sum, col) => sum + table.getColumnOrHeaderWidth(col.id), 0);
+    const rightPinnedWidth = isColumnPinned ? 0 : table.getRightLeafColumns().reduce((sum, col) => sum + table.getColumnOrHeaderWidth(col.id), 0);
+    const rootMargin = [
+      `-${headerHeight + 4}px`,
+      `-${rightPinnedWidth + 4}px`,
+      "-4px",
+      `-${leftPinnedWidth + 4}px`
+    ].join(" ");
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry && !entry.isIntersecting) {
+          closeMenu();
+        }
+      },
+      {
+        root: containerElement,
+        rootMargin,
+        threshold: 0
+      }
+    );
+    observer.observe(triggerElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [rowId, columnId, isHeader, closeMenu, isMenuOpen, table]);
+}
+export {
+  useCloseMenuOnScroll
+};
+//# sourceMappingURL=useCloseMenuOnScroll.js.map

package/esm/tables/DataTable/features/UserActions/useCloseMenuOnScroll.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/tables/DataTable/features/UserActions/useCloseMenuOnScroll.ts"],
+  "sourcesContent": ["import { useEffect } from 'react';\n\nimport { useDataTable } from '../../contexts/DataTableContext.js';\n\n/**\n * Finds the open action-menu trigger button inside the anchor row.\n */\nfunction getCellTriggerElement(\n  containerElement: HTMLElement,\n  rowId: string,\n): HTMLElement | null {\n  const row = containerElement.querySelector<HTMLElement>(\n    `[role=\"row\"][data-rowid=\"${CSS.escape(rowId)}\"]`,\n  );\n  return row?.querySelector<HTMLElement>('button[data-state=\"open\"]') ?? null;\n}\n\n/**\n * Finds the open action-menu trigger button inside the sticky header.\n */\nfunction getHeaderTriggerElement(\n  containerElement: HTMLElement,\n): HTMLElement | null {\n  return containerElement.querySelector<HTMLElement>(\n    '[data-rowgroup=\"header\"] button[data-state=\"open\"]',\n  );\n}\n\n/**\n * Closes an open menu when the table is scrolled far enough that the trigger button the\n * menu is anchored to is no longer visible inside the container. For cell menus all four\n * edges are checked; for header menus only the horizontal edges are checked since the\n * header is sticky and never leaves vertically.\n */\nexport function useCloseMenuOnScroll(props: {\n  isMenuOpen: boolean;\n  closeMenu: () => void;\n  rowId: string;\n  columnId: string;\n  isHeader?: boolean;\n}): void {\n  const { isMenuOpen, closeMenu, rowId, columnId, isHeader = false } = props;\n  const table = useDataTable();\n\n  useEffect(() => {\n    if (!isMenuOpen) {\n      return;\n    }\n\n    const containerElement = table.getRowVirtualizationContainer();\n    if (!containerElement) {\n      return;\n    }\n\n    const triggerElement = isHeader\n      ? getHeaderTriggerElement(containerElement)\n      : getCellTriggerElement(containerElement, rowId);\n\n    if (!triggerElement) {\n      return;\n    }\n\n    // For cell menus shrink the effective root by the sticky header height on the top so\n    // triggers behind the header are treated as out of view. Headers are sticky and never\n    // leave vertically, so no top adjustment is needed \u2014 only the horizontal edges matter.\n    const headerHeight = isHeader ? 0 : table.getTotalHeaderHeight();\n\n    // Triggers inside pinned columns are sticky \u2014 they never move horizontally, so the\n    // IntersectionObserver would fire immediately if horizontal margins were applied.\n    // Skip horizontal margins entirely for pinned-column triggers.\n    const isColumnPinned = table.getColumn(columnId)?.getIsPinned() !== false;\n\n    // Shrink the horizontal edges by the total width of pinned columns so that a trigger\n    // sliding behind a sticky pinned column is treated as out of view.\n    // col.getSize() returns TanStack's logical default (150 px) for prefix/suffix columns\n    // whose actual rendered width is much smaller \u2014 use the measured DOM width instead.\n    const leftPinnedWidth = isColumnPinned\n      ? 0\n      : table\n          .getLeftLeafColumns()\n          .reduce((sum, col) => sum + table.getColumnOrHeaderWidth(col.id), 0);\n    const rightPinnedWidth = isColumnPinned\n      ? 0\n      : table\n          .getRightLeafColumns()\n          .reduce((sum, col) => sum + table.getColumnOrHeaderWidth(col.id), 0);\n\n    // rootMargin order: top right bottom left\n    const rootMargin = [\n      `-${headerHeight + 4}px`,\n      `-${rightPinnedWidth + 4}px`,\n      '-4px',\n      `-${leftPinnedWidth + 4}px`,\n    ].join(' ');\n\n    const observer = new IntersectionObserver(\n      ([entry]) => {\n        if (entry && !entry.isIntersecting) {\n          closeMenu();\n        }\n      },\n      {\n        root: containerElement,\n        rootMargin,\n        threshold: 0,\n      },\n    );\n\n    observer.observe(triggerElement);\n\n    return () => {\n      observer.disconnect();\n    };\n  }, [rowId, columnId, isHeader, closeMenu, isMenuOpen, table]);\n}\n"],
+  "mappings": "AAAA,SAAS,iBAAiB;AAE1B,SAAS,oBAAoB;AAK7B,SAAS,sBACP,kBACA,OACoB;AACpB,QAAM,MAAM,iBAAiB;AAAA,IAC3B,4BAA4B,IAAI,OAAO,KAAK,CAAC;AAAA,EAC/C;AACA,SAAO,KAAK,cAA2B,2BAA2B,KAAK;AACzE;AAKA,SAAS,wBACP,kBACoB;AACpB,SAAO,iBAAiB;AAAA,IACtB;AAAA,EACF;AACF;AAQO,SAAS,qBAAqB,OAM5B;AACP,QAAM,EAAE,YAAY,WAAW,OAAO,UAAU,WAAW,MAAM,IAAI;AACrE,QAAM,QAAQ,aAAa;AAE3B,YAAU,MAAM;AACd,QAAI,CAAC,YAAY;AACf;AAAA,IACF;AAEA,UAAM,mBAAmB,MAAM,8BAA8B;AAC7D,QAAI,CAAC,kBAAkB;AACrB;AAAA,IACF;AAEA,UAAM,iBAAiB,WACnB,wBAAwB,gBAAgB,IACxC,sBAAsB,kBAAkB,KAAK;AAEjD,QAAI,CAAC,gBAAgB;AACnB;AAAA,IACF;AAKA,UAAM,eAAe,WAAW,IAAI,MAAM,qBAAqB;AAK/D,UAAM,iBAAiB,MAAM,UAAU,QAAQ,GAAG,YAAY,MAAM;AAMpE,UAAM,kBAAkB,iBACpB,IACA,MACG,mBAAmB,EACnB,OAAO,CAAC,KAAK,QAAQ,MAAM,MAAM,uBAAuB,IAAI,EAAE,GAAG,CAAC;AACzE,UAAM,mBAAmB,iBACrB,IACA,MACG,oBAAoB,EACpB,OAAO,CAAC,KAAK,QAAQ,MAAM,MAAM,uBAAuB,IAAI,EAAE,GAAG,CAAC;AAGzE,UAAM,aAAa;AAAA,MACjB,IAAI,eAAe,CAAC;AAAA,MACpB,IAAI,mBAAmB,CAAC;AAAA,MACxB;AAAA,MACA,IAAI,kBAAkB,CAAC;AAAA,IACzB,EAAE,KAAK,GAAG;AAEV,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,CAAC,KAAK,MAAM;AACX,YAAI,SAAS,CAAC,MAAM,gBAAgB;AAClC,oBAAU;AAAA,QACZ;AAAA,MACF;AAAA,MACA;AAAA,QACE,MAAM;AAAA,QACN;AAAA,QACA,WAAW;AAAA,MACb;AAAA,IACF;AAEA,aAAS,QAAQ,cAAc;AAE/B,WAAO,MAAM;AACX,eAAS,WAAW;AAAA,IACtB;AAAA,EACF,GAAG,CAAC,OAAO,UAAU,UAAU,WAAW,YAAY,KAAK,CAAC;AAC9D;",
+  "names": []
+}

package/esm/tables/DataTable/hooks/useTableRootResize.js

@@ -5,7 +5,9 @@ import {
   useReducer,
   useRef
 } from "react";
-import useResizeObserver from "use-resize-observer";
+import {
+  useResizeObserver
+} from "../../../core/hooks/useResizeObserver.js";
 function useTableRootResize(remeasureRows) {
   const rootRef = useRef(null);
   const rootContainerSize = useRef(

package/esm/tables/DataTable/hooks/useTableRootResize.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/tables/DataTable/hooks/useTableRootResize.ts"],
-  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  useCallback,\n  useEffect,\n  useReducer,\n  useRef,\n  type MutableRefObject,\n} from 'react';\nimport type { ObservedSize } from 'use-resize-observer';\nimport useResizeObserver from 'use-resize-observer';\n\n/**\n * Handles resizing of the DataTable root container.\n * @returns root ref\n * @internal\n */\nexport function useTableRootResize(\n  remeasureRows: (virtualizationContainerWidth?: number) => void,\n): MutableRefObject<HTMLDivElement | null> {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  // Keep track of the root container size. We are updating a reference to\n  // the container size with the actual size.\n  const rootContainerSize = useRef<number>(\n    Math.round(rootRef.current?.getBoundingClientRect().width ?? 0),\n  );\n  //  Store debounced function in ref to cancel on unmount\n  const debouncedResizeRef = useRef<ReturnType<typeof debounce>>();\n  // Triggers DataTable re-renders via React state rather than alien-signals atoms,\n  // avoiding \"Cannot update during rendering\" warnings from the stale inst.value\n  // window that would otherwise open between LINE A (setOptions flush) and LINE B\n  // (useSyncExternalStore snapshot update) in the subsequent re-render.\n  const [, forceRender] = useReducer((x: number, _: void): number => x + 1, 0);\n\n  const onContainerResize = useCallback(\n    (size: ObservedSize) => {\n      if (size.width) {\n        rootContainerSize.current = Math.round(size.width);\n        // The `table.remeasureRow` is a memoized function, which will only run if\n        // its parameters change.\n        remeasureRows(rootContainerSize.current);\n        // Trigger a re-render to recalculate styles that depend on container\n        // dimensions, such as overflow behavior.\n        forceRender();\n      }\n    },\n    [remeasureRows, forceRender],\n  );\n\n  useEffect(() => {\n    // Debounce the resizing to avoid flickering and performance impacts\n    // during resize. The rows are measured once the DataTable width stabilizes\n    // for a given number of milliseconds.\n    debouncedResizeRef.current = debounce(onContainerResize, 125);\n    return () => debouncedResizeRef.current?.cancel();\n  }, [onContainerResize]);\n\n  // Track the resizing of the DataTable root container.\n  useResizeObserver({\n    ref: rootRef,\n    onResize: (size) => debouncedResizeRef.current?.(size),\n  });\n\n  // When the table re-renders, invoke the measureRow with the last known\n  // value for the containerSize in order to keep the memoization stable.\n  remeasureRows(rootContainerSize.current);\n\n  return rootRef;\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP,OAAO,uBAAuB;AAOvB,SAAS,mBACd,eACyC;AACzC,QAAM,UAAU,OAA8B,IAAI;AAGlD,QAAM,oBAAoB;AAAA,IACxB,KAAK,MAAM,QAAQ,SAAS,sBAAsB,EAAE,SAAS,CAAC;AAAA,EAChE;AAEA,QAAM,qBAAqB,OAAoC;AAK/D,QAAM,CAAC,EAAE,WAAW,IAAI,WAAW,CAAC,GAAW,MAAoB,IAAI,GAAG,CAAC;AAE3E,QAAM,oBAAoB;AAAA,IACxB,CAAC,SAAuB;AACtB,UAAI,KAAK,OAAO;AACd,0BAAkB,UAAU,KAAK,MAAM,KAAK,KAAK;AAGjD,sBAAc,kBAAkB,OAAO;AAGvC,oBAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,eAAe,WAAW;AAAA,EAC7B;AAEA,YAAU,MAAM;AAId,uBAAmB,UAAU,SAAS,mBAAmB,GAAG;AAC5D,WAAO,MAAM,mBAAmB,SAAS,OAAO;AAAA,EAClD,GAAG,CAAC,iBAAiB,CAAC;AAGtB,oBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,UAAU,CAAC,SAAS,mBAAmB,UAAU,IAAI;AAAA,EACvD,CAAC;AAID,gBAAc,kBAAkB,OAAO;AAEvC,SAAO;AACT;",
+  "sourcesContent": ["import { debounce } from 'lodash-es';\nimport {\n  useCallback,\n  useEffect,\n  useReducer,\n  useRef,\n  type RefObject,\n} from 'react';\n\nimport {\n  type ObservedSize,\n  useResizeObserver,\n} from '../../../core/hooks/useResizeObserver.js';\n\n/**\n * Handles resizing of the DataTable root container.\n * @returns root ref\n * @internal\n */\nexport function useTableRootResize(\n  remeasureRows: (virtualizationContainerWidth?: number) => void,\n): RefObject<HTMLDivElement | null> {\n  const rootRef = useRef<HTMLDivElement | null>(null);\n  // Keep track of the root container size. We are updating a reference to\n  // the container size with the actual size.\n  const rootContainerSize = useRef<number>(\n    Math.round(rootRef.current?.getBoundingClientRect().width ?? 0),\n  );\n  //  Store debounced function in ref to cancel on unmount\n  const debouncedResizeRef = useRef<ReturnType<typeof debounce>>();\n  // Triggers DataTable re-renders via React state rather than alien-signals atoms,\n  // avoiding \"Cannot update during rendering\" warnings from the stale inst.value\n  // window that would otherwise open between LINE A (setOptions flush) and LINE B\n  // (useSyncExternalStore snapshot update) in the subsequent re-render.\n  const [, forceRender] = useReducer((x: number, _: void): number => x + 1, 0);\n\n  const onContainerResize = useCallback(\n    (size: ObservedSize) => {\n      if (size.width) {\n        rootContainerSize.current = Math.round(size.width);\n        // The `table.remeasureRow` is a memoized function, which will only run if\n        // its parameters change.\n        remeasureRows(rootContainerSize.current);\n        // Trigger a re-render to recalculate styles that depend on container\n        // dimensions, such as overflow behavior.\n        forceRender();\n      }\n    },\n    [remeasureRows, forceRender],\n  );\n\n  useEffect(() => {\n    // Debounce the resizing to avoid flickering and performance impacts\n    // during resize. The rows are measured once the DataTable width stabilizes\n    // for a given number of milliseconds.\n    debouncedResizeRef.current = debounce(onContainerResize, 125);\n    return () => debouncedResizeRef.current?.cancel();\n  }, [onContainerResize]);\n\n  useResizeObserver({\n    ref: rootRef,\n    onResize: (size) => debouncedResizeRef.current?.(size),\n  });\n\n  // When the table re-renders, invoke the measureRow with the last known\n  // value for the containerSize in order to keep the memoization stable.\n  remeasureRows(rootContainerSize.current);\n\n  return rootRef;\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AACzB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAEP;AAAA,EAEE;AAAA,OACK;AAOA,SAAS,mBACd,eACkC;AAClC,QAAM,UAAU,OAA8B,IAAI;AAGlD,QAAM,oBAAoB;AAAA,IACxB,KAAK,MAAM,QAAQ,SAAS,sBAAsB,EAAE,SAAS,CAAC;AAAA,EAChE;AAEA,QAAM,qBAAqB,OAAoC;AAK/D,QAAM,CAAC,EAAE,WAAW,IAAI,WAAW,CAAC,GAAW,MAAoB,IAAI,GAAG,CAAC;AAE3E,QAAM,oBAAoB;AAAA,IACxB,CAAC,SAAuB;AACtB,UAAI,KAAK,OAAO;AACd,0BAAkB,UAAU,KAAK,MAAM,KAAK,KAAK;AAGjD,sBAAc,kBAAkB,OAAO;AAGvC,oBAAY;AAAA,MACd;AAAA,IACF;AAAA,IACA,CAAC,eAAe,WAAW;AAAA,EAC7B;AAEA,YAAU,MAAM;AAId,uBAAmB,UAAU,SAAS,mBAAmB,GAAG;AAC5D,WAAO,MAAM,mBAAmB,SAAS,OAAO;AAAA,EAClD,GAAG,CAAC,iBAAiB,CAAC;AAEtB,oBAAkB;AAAA,IAChB,KAAK;AAAA,IACL,UAAU,CAAC,SAAS,mBAAmB,UAAU,IAAI;AAAA,EACvD,CAAC;AAID,gBAAc,kBAAkB,OAAO;AAEvC,SAAO;AACT;",
   "names": []
 }

package/esm/tables/DataTable/messages.js

@@ -1,5 +1,12 @@
 import { defineMessages } from "react-intl";
 const dataTableMessages = defineMessages({
+  // Accessible name
+  // ---------------
+  dataTableLabel: {
+    defaultMessage: "Data table",
+    id: "OmNf7ak/Kcv7wP3u",
+    description: "Default accessible name for the DataTable component when no aria-label or aria-labelledby is provided."
+  },
   // Selection messages
   // ------------------
   selectAllTooltip: {
@@ -55,6 +62,11 @@ const dataTableMessages = defineMessages({
     id: "CrdM30eeqaF3mlZr",
     description: "Label for the row drag handle."
   },
+  rowDragAndDropSortedTooltip: {
+    defaultMessage: "Clear {sortDirection, select, ascending {ascending} descending {descending} other {}} sort order to drag and drop rows",
+    id: "miecKI74dxONRE98",
+    description: "Tooltip shown on a disabled row drag handle when reordering is unavailable because the table is sorted."
+  },
   interactiveRowTrigger: {
     defaultMessage: '{isActivated, select, true {Deactivate} other {Activate}} row with id "{rowId}".',
     id: "an4qwOaAQd8t60m5",
@@ -289,6 +301,61 @@ const dataTableMessages = defineMessages({
     id: "WGVOUOAZiBC2rWlk",
     description: "Label for the column drag handle in the column settings."
   },
+  columnSettingsSectionPinnedLeft: {
+    defaultMessage: "Pinned to left",
+    id: "FWPcCUBJ8OXZAxdJ",
+    description: "Section header for columns pinned to the left in the column settings modal."
+  },
+  columnSettingsSectionUnpinned: {
+    defaultMessage: "Unpinned",
+    id: "ml+Pyzyh+p8TWy3Z",
+    description: "Section header for columns that are not pinned in the column settings modal."
+  },
+  columnSettingsSectionPinnedRight: {
+    defaultMessage: "Pinned to right",
+    id: "DXbY+p0kaQthdZgP",
+    description: "Section header for columns pinned to the right in the column settings modal."
+  },
+  columnHiddenChipLabel: {
+    defaultMessage: "Hidden",
+    id: "BqRVinIeQxz83n1M",
+    description: "Label of the chip shown next to a hidden column in the column settings modal."
+  },
+  toggleColumnVisibilityLabel: {
+    defaultMessage: "{isHidden, select, true {Show} other {Hide}} column",
+    id: "ZhUT5iq6+B7hRPfb",
+    description: "Tooltip for the button toggling the visibility of a column in the column settings."
+  },
+  toggleColumnVisibilityAriaLabel: {
+    defaultMessage: "{isHidden, select, true {Show} other {Hide}} {columnName}",
+    id: "MJmQVUKWduRqcQ2F",
+    description: "Aria label for the button toggling the visibility of a column in the column settings. columnName is the display label of the column."
+  },
+  columnVisibilityDisabledLabel: {
+    defaultMessage: "Column can't be {isHidden, select, true {shown} other {hidden}}",
+    id: "UZ1xW95v+ePFi3HE",
+    description: "Tooltip for the visibility toggle of a column whose visibility can't be changed."
+  },
+  columnVisibilityDisabledAriaLabel: {
+    defaultMessage: "{columnName} can't be {isHidden, select, true {shown} other {hidden}}",
+    id: "QsCiOjrrvWmpOx/R",
+    description: "Aria label for the visibility toggle of a column whose visibility can't be changed. columnName is the display label of the column."
+  },
+  visibleColumnsMinError: {
+    defaultMessage: "At least 1 column must be shown.",
+    id: "FIMM9WXC8Kwieah3",
+    description: "Error message shown in column settings modal when the user tries to apply changes with no visible columns."
+  },
+  visibleColumnsWarning: {
+    defaultMessage: "Displaying more than {limit} {limit, plural, one {column} other {columns}} may affect this table's performance.",
+    id: "5BpZ1y39lJ+Q6BOs",
+    description: "Warning message shown in column settings modal when the number of visible columns exceeds the warning threshold."
+  },
+  visibleColumnsError: {
+    defaultMessage: "Displaying more than {limit} {limit, plural, one {column} other {columns}} is not allowed.",
+    id: "uIY0S6+5RUL68Rsd",
+    description: "Error message shown in column settings modal when the number of visible columns exceeds the error threshold."
+  },
   // Sorting
   // -------
   dragAndDropLabel: {