@dynatrace/strato-components 3.3.3 → 3.5.0

package/esm/tables/DataTable/components/Toolbar/DataTableToolbarMenu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/components/Toolbar/DataTableToolbarMenu.tsx"],
-  "sourcesContent": ["import { Fragment, useRef, useState, type ReactElement, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DotMenuIcon, DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { DataTableDownloadData } from './Download/DataTableDownloadData.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { type IntentProps } from '../../../../core/slots/Intent/Intent.js';\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { dataTableMessages } from '../../messages.js';\n\ninterface ToolbarMenuProps {\n  /**\n   * Indicates whether the `DownloadData` slot is used, to determine if the download action should be rendered in the menu.\n   */\n  hasDownloadData: boolean;\n  /**\n   * Array of column IDs that can optionally be excluded from the download, passed down to the `DownloadData` slot.\n   */\n  downloadExcludedColumns?: string[];\n  /**\n   * Array of intent props for the `Intent` slot, to render the intent actions in the menu.\n   */\n  intents: Array<IntentProps>;\n}\n\n/**\n * The menu component for the `DownloadData` and `Intent` slots.\n * @internal\n */\nexport const DataTableToolbarMenu = (\n  props: ToolbarMenuProps,\n): JSX.Element | undefined => {\n  const { hasDownloadData, downloadExcludedColumns, intents } = props;\n\n  const [menuOpen, setMenuOpen] = useState(false);\n  const hasIntents = intents.length > 0;\n  const triggerIcon = hasIntents ? <DotMenuIcon /> : <DownloadIcon />;\n  const Group = hasIntents ? Menu.Group : Fragment;\n\n  const intl = useIntl();\n  const toolbarMenuLabel = intl.formatMessage(\n    hasIntents\n      ? dataTableMessages.toolbarButtonLabel\n      : dataTableMessages.downloadButtonLabel,\n  );\n  const simpleButtonRef = useRef<HTMLButtonElement>(null);\n\n  // do not render anything if neither the `DownloadData` nor the `Intent` slot is used\n  if (!hasDownloadData && !hasIntents) {\n    return;\n  }\n\n  // Avoid spawning the menu while it is closed to avoid react render\n  // performance issues.\n  if (menuOpen === false) {\n    return (\n      <Tooltip text={toolbarMenuLabel}>\n        <Button\n          ref={simpleButtonRef}\n          variant=\"default\"\n          aria-label={toolbarMenuLabel}\n          onClick={() => setMenuOpen(true)}\n        >\n          <Button.Prefix>{triggerIcon}</Button.Prefix>\n        </Button>\n      </Tooltip>\n    );\n  }\n\n  // according to the GUIDEline intent items with app ids are grouped\n  // intent items that don't have an app id are positioned below that group\n  const {\n    intentsWithAppOrIntentId: intentsWithAppId,\n    intentsWithoutAppOrIntentId: intentsWithoutAppId,\n  } = intents.reduce<{\n    intentsWithAppOrIntentId: ReactElement[];\n    intentsWithoutAppOrIntentId: ReactElement[];\n  }>(\n    (acc, intentProps) => {\n      const hasAppOrIntentId =\n        intentProps.options.recommendedAppId !== undefined ||\n        intentProps.options.recommendedIntentId !== undefined;\n\n      const intent = (\n        <Menu.Intent {...intentProps}>\n          {intentProps.icon && <Menu.Prefix>{intentProps.icon}</Menu.Prefix>}\n          {intentProps.children}\n        </Menu.Intent>\n      );\n\n      hasAppOrIntentId\n        ? acc.intentsWithAppOrIntentId.push(intent)\n        : acc.intentsWithoutAppOrIntentId.push(intent);\n      return acc;\n    },\n    { intentsWithAppOrIntentId: [], intentsWithoutAppOrIntentId: [] },\n  );\n\n  return (\n    <Menu\n      open={menuOpen}\n      onOpenChange={(open) => {\n        // Since the elements are actually swapped when the menu is open / closed\n        // the focus needs to move back to the button only render.\n        if (open === false) {\n          requestAnimationFrame(() => {\n            simpleButtonRef.current?.focus();\n          });\n        }\n        setMenuOpen(open);\n      }}\n    >\n      <Tooltip text={toolbarMenuLabel}>\n        <Menu.Trigger>\n          <Button variant=\"default\" aria-label={toolbarMenuLabel}>\n            <Button.Prefix>{triggerIcon}</Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n      </Tooltip>\n\n      <Menu.Content alignment=\"end\">\n        {hasDownloadData && (\n          <Group>\n            <DataTableDownloadData excludeColumns={downloadExcludedColumns} />\n          </Group>\n        )}\n        {intentsWithAppId.length > 0 && <Group>{intentsWithAppId}</Group>}\n        {intentsWithoutAppId.length > 0 && <Group>{intentsWithoutAppId}</Group>}\n      </Menu.Content>\n    </Menu>\n  );\n};\n"],
-  "mappings": "AAsCmC,cAgD3B,YAhD2B;AAtCnC,SAAS,UAAU,QAAQ,gBAA6C;AACxE,SAAS,eAAe;AAExB,SAAS,aAAa,oBAAoB;AAE1C,SAAS,6BAA6B;AACtC,SAAS,cAAc;AAEvB,SAAS,YAAY;AACrB,SAAS,eAAe;AACxB,SAAS,yBAAyB;AAqB3B,MAAM,uBAAuB,CAClC,UAC4B;AAC5B,QAAM,EAAE,iBAAiB,yBAAyB,QAAQ,IAAI;AAE9D,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,aAAa,QAAQ,SAAS;AACpC,QAAM,cAAc,aAAa,oBAAC,eAAY,IAAK,oBAAC,gBAAa;AACjE,QAAM,QAAQ,aAAa,KAAK,QAAQ;AAExC,QAAM,OAAO,QAAQ;AACrB,QAAM,mBAAmB,KAAK;AAAA,IAC5B,aACI,kBAAkB,qBAClB,kBAAkB;AAAA,EACxB;AACA,QAAM,kBAAkB,OAA0B,IAAI;AAGtD,MAAI,CAAC,mBAAmB,CAAC,YAAY;AACnC;AAAA,EACF;AAIA,MAAI,aAAa,OAAO;AACtB,WACE,oBAAC,WAAQ,MAAM,kBACb;AAAA,MAAC;AAAA;AAAA,QACC,KAAK;AAAA,QACL,SAAQ;AAAA,QACR,cAAY;AAAA,QACZ,SAAS,MAAM,YAAY,IAAI;AAAA,QAE/B,8BAAC,OAAO,QAAP,EAAe,uBAAY;AAAA;AAAA,IAC9B,GACF;AAAA,EAEJ;AAIA,QAAM;AAAA,IACJ,0BAA0B;AAAA,IAC1B,6BAA6B;AAAA,EAC/B,IAAI,QAAQ;AAAA,IAIV,CAAC,KAAK,gBAAgB;AACpB,YAAM,mBACJ,YAAY,QAAQ,qBAAqB,UACzC,YAAY,QAAQ,wBAAwB;AAE9C,YAAM,SACJ,qBAAC,KAAK,QAAL,EAAa,GAAG,aACd;AAAA,oBAAY,QAAQ,oBAAC,KAAK,QAAL,EAAa,sBAAY,MAAK;AAAA,QACnD,YAAY;AAAA,SACf;AAGF,yBACI,IAAI,yBAAyB,KAAK,MAAM,IACxC,IAAI,4BAA4B,KAAK,MAAM;AAC/C,aAAO;AAAA,IACT;AAAA,IACA,EAAE,0BAA0B,CAAC,GAAG,6BAA6B,CAAC,EAAE;AAAA,EAClE;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,cAAc,CAAC,SAAS;AAGtB,YAAI,SAAS,OAAO;AAClB,gCAAsB,MAAM;AAC1B,4BAAgB,SAAS,MAAM;AAAA,UACjC,CAAC;AAAA,QACH;AACA,oBAAY,IAAI;AAAA,MAClB;AAAA,MAEA;AAAA,4BAAC,WAAQ,MAAM,kBACb,8BAAC,KAAK,SAAL,EACC,8BAAC,UAAO,SAAQ,WAAU,cAAY,kBACpC,8BAAC,OAAO,QAAP,EAAe,uBAAY,GAC9B,GACF,GACF;AAAA,QAEA,qBAAC,KAAK,SAAL,EAAa,WAAU,OACrB;AAAA,6BACC,oBAAC,SACC,8BAAC,yBAAsB,gBAAgB,yBAAyB,GAClE;AAAA,UAED,iBAAiB,SAAS,KAAK,oBAAC,SAAO,4BAAiB;AAAA,UACxD,oBAAoB,SAAS,KAAK,oBAAC,SAAO,+BAAoB;AAAA,WACjE;AAAA;AAAA;AAAA,EACF;AAEJ;",
+  "sourcesContent": ["import { Fragment, useRef, useState, type ReactElement, type JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { DotMenuIcon, DownloadIcon } from '@dynatrace/strato-icons';\n\nimport { DataTableDownloadData } from './Download/DataTableDownloadData.js';\nimport { Button } from '../../../../buttons/button/Button.js';\nimport { type IntentProps } from '../../../../core/slots/Intent/Intent.js';\nimport { Menu } from '../../../../navigation/menu/Menu.js';\nimport { Tooltip } from '../../../../overlays/tooltip/Tooltip.js';\nimport { dataTableMessages } from '../../messages.js';\n\ninterface ToolbarMenuProps {\n  /**\n   * Indicates whether the `DownloadData` slot is used, to determine if the download action should be rendered in the menu.\n   */\n  hasDownloadData: boolean;\n  /**\n   * Array of column IDs that can optionally be excluded from the download, passed down to the `DownloadData` slot.\n   */\n  downloadExcludedColumns?: string[];\n  /**\n   * Array of intent props for the `Intent` slot, to render the intent actions in the menu.\n   */\n  intents: Array<IntentProps>;\n}\n\n/**\n * The menu component for the `DownloadData` and `Intent` slots.\n * @internal\n */\nexport const DataTableToolbarMenu = (\n  props: ToolbarMenuProps,\n): JSX.Element | undefined => {\n  const { hasDownloadData, downloadExcludedColumns, intents } = props;\n\n  const [menuOpen, setMenuOpen] = useState(false);\n  const [isDownloading, setIsDownloading] = useState(false);\n  const hasIntents = intents.length > 0;\n\n  const triggerIcon = hasIntents ? <DotMenuIcon /> : <DownloadIcon />;\n\n  const Group = hasIntents ? Menu.Group : Fragment;\n\n  const intl = useIntl();\n  let toolbarMenuMessage = dataTableMessages.downloadButtonLabel;\n\n  if (isDownloading) {\n    toolbarMenuMessage = dataTableMessages.downloadingButtonLabel;\n  } else if (hasIntents) {\n    toolbarMenuMessage = dataTableMessages.toolbarButtonLabel;\n  }\n\n  const toolbarMenuLabel = intl.formatMessage(toolbarMenuMessage);\n  const simpleButtonRef = useRef<HTMLButtonElement>(null);\n\n  // do not render anything if neither the `DownloadData` nor the `Intent` slot is used\n  if (!hasDownloadData && !hasIntents) {\n    return;\n  }\n\n  // Avoid spawning the menu while it is closed to avoid react render\n  // performance issues.\n  if (menuOpen === false) {\n    return (\n      <Tooltip text={toolbarMenuLabel}>\n        <Button\n          ref={simpleButtonRef}\n          variant=\"default\"\n          aria-label={toolbarMenuLabel}\n          onClick={() => setMenuOpen(true)}\n          loading={isDownloading}\n        >\n          <Button.Prefix>{triggerIcon}</Button.Prefix>\n        </Button>\n      </Tooltip>\n    );\n  }\n\n  // according to the GUIDEline intent items with app ids are grouped\n  // intent items that don't have an app id are positioned below that group\n  const {\n    intentsWithAppOrIntentId: intentsWithAppId,\n    intentsWithoutAppOrIntentId: intentsWithoutAppId,\n  } = intents.reduce<{\n    intentsWithAppOrIntentId: ReactElement[];\n    intentsWithoutAppOrIntentId: ReactElement[];\n  }>(\n    (acc, intentProps, idx) => {\n      const hasAppOrIntentId =\n        intentProps.options.recommendedAppId !== undefined ||\n        intentProps.options.recommendedIntentId !== undefined;\n\n      const intent = (\n        <Menu.Intent key={`intent-${idx}`} {...intentProps}>\n          {intentProps.icon && <Menu.Prefix>{intentProps.icon}</Menu.Prefix>}\n          {intentProps.children}\n        </Menu.Intent>\n      );\n\n      hasAppOrIntentId\n        ? acc.intentsWithAppOrIntentId.push(intent)\n        : acc.intentsWithoutAppOrIntentId.push(intent);\n      return acc;\n    },\n    { intentsWithAppOrIntentId: [], intentsWithoutAppOrIntentId: [] },\n  );\n\n  return (\n    <Menu\n      open={menuOpen}\n      onOpenChange={(open) => {\n        // Since the elements are actually swapped when the menu is open / closed\n        // the focus needs to move back to the button only render.\n        if (open === false) {\n          requestAnimationFrame(() => {\n            simpleButtonRef.current?.focus();\n          });\n        }\n        setMenuOpen(open);\n      }}\n      modal={false}\n    >\n      <Tooltip text={toolbarMenuLabel}>\n        <Menu.Trigger>\n          <Button variant=\"default\" aria-label={toolbarMenuLabel}>\n            <Button.Prefix>{triggerIcon}</Button.Prefix>\n          </Button>\n        </Menu.Trigger>\n      </Tooltip>\n\n      <Menu.Content alignment=\"end\">\n        {hasDownloadData && (\n          <Group>\n            <DataTableDownloadData\n              excludeColumns={downloadExcludedColumns}\n              hasIntents={hasIntents}\n              isDownloading={isDownloading}\n              onDownloadStart={() => setIsDownloading(true)}\n              onDownloadEnd={() => setIsDownloading(false)}\n            />\n          </Group>\n        )}\n        {intentsWithAppId.length > 0 && <Group>{intentsWithAppId}</Group>}\n        {intentsWithoutAppId.length > 0 && <Group>{intentsWithoutAppId}</Group>}\n      </Menu.Content>\n    </Menu>\n  );\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.css

@@ -0,0 +1,9 @@
+._1gjma320-3-5-0 {
+  gap: var(--dt-spacings-size-24, 24px);
+}
+._1gjma321-3-5-0 {
+  white-space: nowrap;
+}
+._1m01arl7-3-5-0 ._1gjma321-3-5-0 {
+  color: var(--dt-colors-text-neutral-subdued, #595a7d);
+}

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.js

@@ -1,45 +1,89 @@
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useIntl } from "react-intl";
+import * as styles from "./DataTableDownloadData.sty.js";
 import { Menu } from "../../../../../navigation/menu/Menu.js";
 import { useDataTable } from "../../../contexts/DataTableContext.js";
 import { dataTableMessages } from "../../../messages.js";
 const DataTableDownloadData = ({
-  excludeColumns
+  excludeColumns,
+  hasIntents,
+  isDownloading,
+  onDownloadStart,
+  onDownloadEnd
 }) => {
   const intl = useIntl();
   const table = useDataTable();
   const selectionCount = table.getSelectionCount();
-  return /* @__PURE__ */ jsxs(Menu.Sub, { children: [
-    /* @__PURE__ */ jsx(Menu.SubTrigger, { children: intl.formatMessage(dataTableMessages.downloadTable) }),
-    /* @__PURE__ */ jsxs(Menu.SubContent, { children: [
-      /* @__PURE__ */ jsx(
-        Menu.Item,
-        {
-          onSelect: () => table.downloadAllData(excludeColumns),
-          "data-dt-name": "ToolbarDownloadAll",
-          children: intl.formatMessage(dataTableMessages.downloadAll)
-        }
-      ),
-      table.options.enablePagination && /* @__PURE__ */ jsx(
-        Menu.Item,
-        {
-          onSelect: () => table.downloadPageData(excludeColumns),
-          "data-dt-name": "ToolbarDownloadPage",
-          children: intl.formatMessage(dataTableMessages.downloadPage)
-        }
-      ),
-      table.options.enableRowSelection && /* @__PURE__ */ jsx(
-        Menu.Item,
-        {
-          disabled: selectionCount === 0,
-          onSelect: () => table.downloadSelectedData(excludeColumns),
-          "data-dt-name": "ToolbarDownloadSelected",
-          children: intl.formatMessage(dataTableMessages.downloadSelected, {
+  const menuGroupLabel = intl.formatMessage(dataTableMessages.downloadTable);
+  const downloadMenuItems = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      Menu.Item,
+      {
+        onSelect: () => {
+          if (isDownloading) {
+            return;
+          }
+          onDownloadStart();
+          table.downloadAllData(excludeColumns, onDownloadEnd);
+        },
+        className: styles.downloadMenuItem,
+        "data-dt-name": "ToolbarDownloadAll",
+        children: [
+          intl.formatMessage(dataTableMessages.downloadAll),
+          /* @__PURE__ */ jsx(Menu.Suffix, { className: styles.downloadMenuSuffix, children: intl.formatMessage(dataTableMessages.downloadRowsCount, {
+            noOfRows: table.getPrePaginationRowModel().flatRows.length
+          }) })
+        ]
+      }
+    ),
+    table.options.enablePagination && /* @__PURE__ */ jsxs(
+      Menu.Item,
+      {
+        onSelect: () => {
+          if (isDownloading) {
+            return;
+          }
+          onDownloadStart();
+          table.downloadPageData(excludeColumns, onDownloadEnd);
+        },
+        className: styles.downloadMenuItem,
+        "data-dt-name": "ToolbarDownloadPage",
+        children: [
+          intl.formatMessage(dataTableMessages.downloadPage),
+          /* @__PURE__ */ jsx(Menu.Suffix, { className: styles.downloadMenuSuffix, children: intl.formatMessage(dataTableMessages.downloadRowsCount, {
+            noOfRows: table.getPaginationRowModel().flatRows.length
+          }) })
+        ]
+      }
+    ),
+    table.options.enableRowSelection && /* @__PURE__ */ jsxs(
+      Menu.Item,
+      {
+        disabled: selectionCount === 0,
+        onSelect: () => {
+          if (isDownloading) {
+            return;
+          }
+          onDownloadStart();
+          table.downloadSelectedData(excludeColumns, onDownloadEnd);
+        },
+        className: styles.downloadMenuItem,
+        "data-dt-name": "ToolbarDownloadSelected",
+        children: [
+          intl.formatMessage(dataTableMessages.downloadSelected),
+          /* @__PURE__ */ jsx(Menu.Suffix, { className: styles.downloadMenuSuffix, children: intl.formatMessage(dataTableMessages.downloadRowsCount, {
             noOfRows: selectionCount
-          })
-        }
-      )
-    ] })
+          }) })
+        ]
+      }
+    )
+  ] });
+  return hasIntents ? /* @__PURE__ */ jsxs(Menu.Sub, { defaultOpen: false, children: [
+    /* @__PURE__ */ jsx(Menu.SubTrigger, { children: menuGroupLabel }),
+    /* @__PURE__ */ jsx(Menu.SubContent, { children: downloadMenuItems })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Menu.Label, { children: menuGroupLabel }),
+    downloadMenuItems
   ] });
 };
 export {

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.tsx"],
-  "sourcesContent": ["import type { JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../../messages.js';\n\n/**\n * A component providing the sub menu with the functionalities to download data.\n * @internal\n */\nexport const DataTableDownloadData = ({\n  excludeColumns,\n}: {\n  excludeColumns?: string[];\n}): JSX.Element => {\n  const intl = useIntl();\n  const table = useDataTable();\n  const selectionCount = table.getSelectionCount();\n\n  return (\n    <Menu.Sub>\n      <Menu.SubTrigger>\n        {intl.formatMessage(dataTableMessages.downloadTable)}\n      </Menu.SubTrigger>\n      <Menu.SubContent>\n        <Menu.Item\n          onSelect={() => table.downloadAllData(excludeColumns)}\n          data-dt-name=\"ToolbarDownloadAll\"\n        >\n          {intl.formatMessage(dataTableMessages.downloadAll)}\n        </Menu.Item>\n        {table.options.enablePagination && (\n          <Menu.Item\n            onSelect={() => table.downloadPageData(excludeColumns)}\n            data-dt-name=\"ToolbarDownloadPage\"\n          >\n            {intl.formatMessage(dataTableMessages.downloadPage)}\n          </Menu.Item>\n        )}\n        {table.options.enableRowSelection && (\n          <Menu.Item\n            disabled={selectionCount === 0}\n            onSelect={() => table.downloadSelectedData(excludeColumns)}\n            data-dt-name=\"ToolbarDownloadSelected\"\n          >\n            {intl.formatMessage(dataTableMessages.downloadSelected, {\n              noOfRows: selectionCount,\n            })}\n          </Menu.Item>\n        )}\n      </Menu.SubContent>\n    </Menu.Sub>\n  );\n};\n"],
-  "mappings": "AAsBM,cAGA,YAHA;AArBN,SAAS,eAAe;AAExB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,MAEmB;AACjB,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAC3B,QAAM,iBAAiB,MAAM,kBAAkB;AAE/C,SACE,qBAAC,KAAK,KAAL,EACC;AAAA,wBAAC,KAAK,YAAL,EACE,eAAK,cAAc,kBAAkB,aAAa,GACrD;AAAA,IACA,qBAAC,KAAK,YAAL,EACC;AAAA;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,MAAM,gBAAgB,cAAc;AAAA,UACpD,gBAAa;AAAA,UAEZ,eAAK,cAAc,kBAAkB,WAAW;AAAA;AAAA,MACnD;AAAA,MACC,MAAM,QAAQ,oBACb;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,MAAM,MAAM,iBAAiB,cAAc;AAAA,UACrD,gBAAa;AAAA,UAEZ,eAAK,cAAc,kBAAkB,YAAY;AAAA;AAAA,MACpD;AAAA,MAED,MAAM,QAAQ,sBACb;AAAA,QAAC,KAAK;AAAA,QAAL;AAAA,UACC,UAAU,mBAAmB;AAAA,UAC7B,UAAU,MAAM,MAAM,qBAAqB,cAAc;AAAA,UACzD,gBAAa;AAAA,UAEZ,eAAK,cAAc,kBAAkB,kBAAkB;AAAA,YACtD,UAAU;AAAA,UACZ,CAAC;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,KACF;AAEJ;",
+  "sourcesContent": ["import type { JSX } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport * as styles from './DataTableDownloadData.sty.js';\nimport { Menu } from '../../../../../navigation/menu/Menu.js';\nimport { useDataTable } from '../../../contexts/DataTableContext.js';\nimport { dataTableMessages } from '../../../messages.js';\n\n/**\n * A component providing the menu with the functionalities to download data.\n * @internal\n */\nexport const DataTableDownloadData = ({\n  excludeColumns,\n  hasIntents,\n  isDownloading,\n  onDownloadStart,\n  onDownloadEnd,\n}: {\n  excludeColumns?: string[];\n  hasIntents: boolean;\n  isDownloading: boolean;\n  onDownloadStart: () => void;\n  onDownloadEnd: () => void;\n}): JSX.Element => {\n  const intl = useIntl();\n  const table = useDataTable();\n  const selectionCount = table.getSelectionCount();\n  const menuGroupLabel = intl.formatMessage(dataTableMessages.downloadTable);\n\n  const downloadMenuItems = (\n    <>\n      <Menu.Item\n        onSelect={() => {\n          if (isDownloading) {\n            return;\n          }\n          onDownloadStart();\n          table.downloadAllData(excludeColumns, onDownloadEnd);\n        }}\n        className={styles.downloadMenuItem}\n        data-dt-name=\"ToolbarDownloadAll\"\n      >\n        {intl.formatMessage(dataTableMessages.downloadAll)}\n        <Menu.Suffix className={styles.downloadMenuSuffix}>\n          {intl.formatMessage(dataTableMessages.downloadRowsCount, {\n            noOfRows: table.getPrePaginationRowModel().flatRows.length,\n          })}\n        </Menu.Suffix>\n      </Menu.Item>\n      {table.options.enablePagination && (\n        <Menu.Item\n          onSelect={() => {\n            if (isDownloading) {\n              return;\n            }\n            onDownloadStart();\n            table.downloadPageData(excludeColumns, onDownloadEnd);\n          }}\n          className={styles.downloadMenuItem}\n          data-dt-name=\"ToolbarDownloadPage\"\n        >\n          {intl.formatMessage(dataTableMessages.downloadPage)}\n          <Menu.Suffix className={styles.downloadMenuSuffix}>\n            {intl.formatMessage(dataTableMessages.downloadRowsCount, {\n              noOfRows: table.getPaginationRowModel().flatRows.length,\n            })}\n          </Menu.Suffix>\n        </Menu.Item>\n      )}\n      {table.options.enableRowSelection && (\n        <Menu.Item\n          disabled={selectionCount === 0}\n          onSelect={() => {\n            if (isDownloading) {\n              return;\n            }\n            onDownloadStart();\n            table.downloadSelectedData(excludeColumns, onDownloadEnd);\n          }}\n          className={styles.downloadMenuItem}\n          data-dt-name=\"ToolbarDownloadSelected\"\n        >\n          {intl.formatMessage(dataTableMessages.downloadSelected)}\n          <Menu.Suffix className={styles.downloadMenuSuffix}>\n            {intl.formatMessage(dataTableMessages.downloadRowsCount, {\n              noOfRows: selectionCount,\n            })}\n          </Menu.Suffix>\n        </Menu.Item>\n      )}\n    </>\n  );\n\n  return hasIntents ? (\n    <Menu.Sub defaultOpen={false}>\n      <Menu.SubTrigger>{menuGroupLabel}</Menu.SubTrigger>\n      <Menu.SubContent>{downloadMenuItems}</Menu.SubContent>\n    </Menu.Sub>\n  ) : (\n    <>\n      <Menu.Label>{menuGroupLabel}</Menu.Label>\n      {downloadMenuItems}\n    </>\n  );\n};\n"],
+  "mappings": "AA+BI,mBAaI,KAZF,YADF;AA9BJ,SAAS,eAAe;AAExB,YAAY,YAAY;AACxB,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAC7B,SAAS,yBAAyB;AAM3B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAMmB;AACjB,QAAM,OAAO,QAAQ;AACrB,QAAM,QAAQ,aAAa;AAC3B,QAAM,iBAAiB,MAAM,kBAAkB;AAC/C,QAAM,iBAAiB,KAAK,cAAc,kBAAkB,aAAa;AAEzE,QAAM,oBACJ,iCACE;AAAA;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,UAAU,MAAM;AACd,cAAI,eAAe;AACjB;AAAA,UACF;AACA,0BAAgB;AAChB,gBAAM,gBAAgB,gBAAgB,aAAa;AAAA,QACrD;AAAA,QACA,WAAW,OAAO;AAAA,QAClB,gBAAa;AAAA,QAEZ;AAAA,eAAK,cAAc,kBAAkB,WAAW;AAAA,UACjD,oBAAC,KAAK,QAAL,EAAY,WAAW,OAAO,oBAC5B,eAAK,cAAc,kBAAkB,mBAAmB;AAAA,YACvD,UAAU,MAAM,yBAAyB,EAAE,SAAS;AAAA,UACtD,CAAC,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IACC,MAAM,QAAQ,oBACb;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,UAAU,MAAM;AACd,cAAI,eAAe;AACjB;AAAA,UACF;AACA,0BAAgB;AAChB,gBAAM,iBAAiB,gBAAgB,aAAa;AAAA,QACtD;AAAA,QACA,WAAW,OAAO;AAAA,QAClB,gBAAa;AAAA,QAEZ;AAAA,eAAK,cAAc,kBAAkB,YAAY;AAAA,UAClD,oBAAC,KAAK,QAAL,EAAY,WAAW,OAAO,oBAC5B,eAAK,cAAc,kBAAkB,mBAAmB;AAAA,YACvD,UAAU,MAAM,sBAAsB,EAAE,SAAS;AAAA,UACnD,CAAC,GACH;AAAA;AAAA;AAAA,IACF;AAAA,IAED,MAAM,QAAQ,sBACb;AAAA,MAAC,KAAK;AAAA,MAAL;AAAA,QACC,UAAU,mBAAmB;AAAA,QAC7B,UAAU,MAAM;AACd,cAAI,eAAe;AACjB;AAAA,UACF;AACA,0BAAgB;AAChB,gBAAM,qBAAqB,gBAAgB,aAAa;AAAA,QAC1D;AAAA,QACA,WAAW,OAAO;AAAA,QAClB,gBAAa;AAAA,QAEZ;AAAA,eAAK,cAAc,kBAAkB,gBAAgB;AAAA,UACtD,oBAAC,KAAK,QAAL,EAAY,WAAW,OAAO,oBAC5B,eAAK,cAAc,kBAAkB,mBAAmB;AAAA,YACvD,UAAU;AAAA,UACZ,CAAC,GACH;AAAA;AAAA;AAAA,IACF;AAAA,KAEJ;AAGF,SAAO,aACL,qBAAC,KAAK,KAAL,EAAS,aAAa,OACrB;AAAA,wBAAC,KAAK,YAAL,EAAiB,0BAAe;AAAA,IACjC,oBAAC,KAAK,YAAL,EAAiB,6BAAkB;AAAA,KACtC,IAEA,iCACE;AAAA,wBAAC,KAAK,OAAL,EAAY,0BAAe;AAAA,IAC3B;AAAA,KACH;AAEJ;",
   "names": []
 }

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.sty.js

@@ -0,0 +1,9 @@
+import "../../../../../navigation/menu/Menu.css";
+import "./DataTableDownloadData.css";
+var downloadMenuItem = "_1gjma320-3-5-0";
+var downloadMenuSuffix = "_1gjma321-3-5-0";
+export {
+  downloadMenuItem,
+  downloadMenuSuffix
+};
+//# sourceMappingURL=DataTableDownloadData.sty.js.map

package/esm/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.sty.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../../src/tables/DataTable/components/Toolbar/Download/DataTableDownloadData.css.ts"],
+  "sourcesContent": ["import '../../../../../navigation/menu/Menu.css';\nimport './DataTableDownloadData.css';\nexport var downloadMenuItem = '_1gjma320-3-5-0';\nexport var downloadMenuSuffix = '_1gjma321-3-5-0';"],
+  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,mBAAmB;AACvB,IAAI,qBAAqB;",
+  "names": []
+}

package/esm/tables/DataTable/constants.js

@@ -40,6 +40,7 @@ const DATA_TABLE_DEFAULT_PAGE_SIZE_OPTION = DATA_TABLE_DEFAULT_PAGE_SIZE_OPTIONS
 const DATA_TABLE_MIN_WIDTH = 120;
 const DATA_TABLE_EMPTY_MIN_WIDTH = 200;
 const DATA_TABLE_BORDER_WIDTH = 2;
+const DATA_TABLE_BORDER_WIDTH_VISUAL_REFRESH = 1;
 const DATA_TABLE_DEFAULT_MIN_COLUMN_WIDTH = 30;
 const DATA_TABLE_DEFAULT_COLUMN_WIDTH = 150;
 const DATA_TABLE_COLUMN_RESIZE_HANDLE_WIDTH = 3;
@@ -130,6 +131,7 @@ export {
   DATA_TABLE_ACTION_BUTTON_WIDTH,
   DATA_TABLE_ACTION_FOR_ALL_COLUMNS,
   DATA_TABLE_BORDER_WIDTH,
+  DATA_TABLE_BORDER_WIDTH_VISUAL_REFRESH,
   DATA_TABLE_BUILTIN_COLUMN_MIN_WIDTH,
   DATA_TABLE_BUILT_IN_COLUMN_IDS,
   DATA_TABLE_CELL_HORIZONTAL_PADDING_MAP,

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

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

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

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

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.js

@@ -71,10 +71,7 @@ const DataTableColumnOrder = {
   },
   createHeader(header, table) {
     header.getColumnDragAndDropMode = () => {
-      const isDragAndDropDisabled = (
-        // header.getIsPinned() ||
-        table.options.enableColumnPinning || header.column.columnDef.enableUserActions === false || table.options.enableColumnOrdering !== true
-      );
+      const isDragAndDropDisabled = table.options.enableColumnOrdering !== true || header.column.columnDef.enableUserActions === false || header.getIsPinned() || !header.column.getCanMoveColumnLeft() && !header.column.getCanMoveColumnRight();
       if (isDragAndDropDisabled) {
         return "none";
       }

package/esm/tables/DataTable/features/ColumnOrder/ColumnOrder.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/tables/DataTable/features/ColumnOrder/ColumnOrder.tsx"],
-  "sourcesContent": ["import {\n  type Column as ReactTableColumn,\n  type ColumnOrderState,\n  functionalUpdate,\n  memo,\n  orderColumns,\n} from '@tanstack/react-table';\nimport { isEqual } from 'lodash-es';\nimport { useCallback, useRef } from 'react';\n\nimport type { DataTableColumnOrderProps } from './column-order-types.js';\nimport {\n  canMoveColumnLeft,\n  canMoveColumnRight,\n  getColumnsToCompareForMove,\n  moveColumnLeft,\n  moveColumnRight,\n} from './column-order-utils.js';\nimport {\n  extractColumnOrderAndGroups,\n  validateColumnOrder,\n} from './column-order-validation.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport type {\n  Column,\n  Header,\n  RowData,\n  Table,\n  TableFeature,\n  TableOptions,\n  Updater,\n} from '../../hooks/useTable/types.js';\nimport { getMemoOptions } from '../../hooks/useTable/utils.js';\nimport type { DataTableColumnDef, DataTableRowData } from '../../public.api.js';\n\n/**\n * Additional feature implementation for column order.\n * @internal\n */\nexport const DataTableColumnOrder: TableFeature = {\n  createTable<TData extends DataTableRowData>(table: Table<TData>): void {\n    // overwrite the order columns fn from react table so that builtin columns are placed correctly\n    table._getOrderColumnsFn = memo(\n      () => {\n        const tableState = table.getState();\n        return [\n          tableState.columnOrder,\n          tableState.grouping,\n          table.options.groupedColumnMode,\n        ];\n      },\n      (columnOrder, grouping, groupedColumnMode) =>\n        (columns: Column<TData, unknown>[]) => {\n          const prefixColumns: Column<TData, unknown>[] = [];\n          const suffixColumns: Column<TData, unknown>[] = [];\n          let orderedColumns: Column<TData, unknown>[] = columns;\n\n          // If there is no order, return the normal columns\n          if (columnOrder.length) {\n            const columnsMap = new Map();\n\n            columns.forEach((column) => {\n              const builtinPlacement = column.columnDef.meta?.builtinPlacement;\n              if (builtinPlacement === 'prefix') {\n                prefixColumns.push(column);\n              } else if (builtinPlacement === 'suffix') {\n                suffixColumns.push(column);\n              } else {\n                columnsMap.set(column.id, column);\n              }\n            });\n\n            orderedColumns = [\n              ...prefixColumns,\n              ...columnOrder.flatMap((id) => columnsMap.get(id) ?? []),\n              ...suffixColumns,\n            ];\n          }\n\n          return orderColumns(\n            orderedColumns as ReactTableColumn<TData>[],\n            grouping,\n            groupedColumnMode,\n          ) as Column<TData, unknown>[];\n        },\n      getMemoOptions(table.options, 'debugCells', 'cell._getOrderColumnsFn'),\n    );\n\n    // Helper function that provides an array of all leaf-node columns, excluding builtin columns.\n    table.getLeafColumnsWithoutBuiltin = () => {\n      return table\n        .getAllLeafColumns()\n        .filter((leafColumn) => !leafColumn.columnDef.meta?.builtin);\n    };\n\n    table.setDraggedHeaderColumn = (column) => {\n      table.setState((state) => ({\n        ...state,\n        draggedHeaderColumn: column,\n      }));\n    };\n  },\n\n  createHeader<TData extends RowData, TValue>(\n    header: Header<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    header.getColumnDragAndDropMode = () => {\n      // temporarily disable drag and drop if table has column pinning enabled\n      // TODO: to be adjusted in APPDEV-14109\n      const isDragAndDropDisabled =\n        // header.getIsPinned() ||\n        table.options.enableColumnPinning ||\n        header.column.columnDef.enableUserActions === false ||\n        table.options.enableColumnOrdering !== true;\n\n      if (isDragAndDropDisabled) {\n        return 'none';\n      }\n\n      if (\n        !header.column.getCanColumnActions() &&\n        !header.getCanSortByHeaderClick()\n      ) {\n        return 'only';\n      }\n\n      return 'enabled';\n    };\n\n    header.getIsDragAndDropDisabled = () => {\n      const { draggedHeaderColumn } = table.getState();\n      const draggedHeaderParentId = draggedHeaderColumn?.parent?.id;\n      const draggedHeaderId = draggedHeaderColumn?.id;\n      const isPinnedHeader = !!header.getIsPinned();\n\n      if (draggedHeaderId && isPinnedHeader) {\n        return true;\n      }\n\n      if (\n        draggedHeaderParentId === undefined ||\n        draggedHeaderParentId === header.column.id ||\n        draggedHeaderParentId === header.column.parent?.id\n      ) {\n        return false;\n      } else {\n        return true;\n      }\n    };\n  },\n\n  createColumn<TData extends DataTableRowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.getCanMoveColumnLeft = () => {\n      const columnsToCompare = getColumnsToCompareForMove(table, column);\n      return canMoveColumnLeft(column, columnsToCompare);\n    };\n\n    column.getCanMoveColumnRight = () => {\n      const columnsToCompare = getColumnsToCompareForMove(table, column);\n      return canMoveColumnRight(column, columnsToCompare);\n    };\n\n    /**\n     * Moves the current column one position to the left and updates the table state.\n     *\n     * Depending on whether the column is a nested column or a standalone column,\n     * whether its neighboring columns are pinned, hidden, or nested,\n     * we need to consider different scenarios to calculate the new column order correctly.\n     *\n     * CASE1: Column itself is a nested child column.\n     *  - Constraint1: Can only move within the parent group.\n     *  - Constraint2: Skip pinned siblings.\n     *  - Constraint3: Skip hidden siblings.\n     *\n     * CASE2: Column is a standalone column or a parent column.\n     *  - Constraint1: Skip entire nested columns as a whole.\n     *  - Constraint2: Skip pinned columns.\n     *  - Constraint3: Skip hidden columns.\n     */\n    column.moveColumnLeft = () => {\n      // Get the current table state needed for column reordering\n      const leafColumns = table.getLeafColumnsWithoutBuiltin();\n      const currentColumnOrder = table.getState().columnOrder;\n      const columnsPinned = table.getState().columnPinning;\n\n      const newColumnOrder = moveColumnLeft(\n        column,\n        currentColumnOrder,\n        columnsPinned,\n        leafColumns,\n      );\n      table.setColumnOrder(newColumnOrder);\n    };\n\n    /**\n     * Moves the current column one position to the right and updates the table state.\n     *\n     * Depending on whether the column is a nested column or a standalone column,\n     * whether its neighboring columns are pinned, hidden, or nested,\n     * we need to consider different scenarios to calculate the new column order correctly.\n     *\n     * CASE1: Column itself is a nested child column.\n     *  - Constraint1: Can only move within the parent group.\n     *  - Constraint2: Skip pinned siblings.\n     *  - Constraint3: Skip hidden siblings.\n     *\n     * CASE2: Column is a standalone column or a parent column.\n     *  - Constraint1: Skip entire nested columns as a whole.\n     *  - Constraint2: Skip pinned columns.\n     *  - Constraint3: Skip hidden columns.\n     */\n    column.moveColumnRight = () => {\n      // Get the current table state needed for column reordering\n      const leafColumns = table.getLeafColumnsWithoutBuiltin();\n      const currentColumnOrder = table.getState().columnOrder;\n      const columnsPinned = table.getState().columnPinning;\n      const newColumnOrder = moveColumnRight(\n        column,\n        currentColumnOrder,\n        columnsPinned,\n        leafColumns,\n      );\n      table.setColumnOrder(newColumnOrder);\n    };\n  },\n};\n\n/**\n * Configuration hook for the DataTable ColumnOrder feature.\n * @internal\n */\nexport function useColumnOrder<TData extends DataTableRowData>(\n  props: DataTableColumnOrderProps & {\n    columns: DataTableColumnDef<TData>[];\n  },\n  options: TableOptions<TData>,\n): void {\n  options.enableColumnOrdering = false;\n\n  const { columnOrder: columnOrderFromDefinition, columnGroups } =\n    extractColumnOrderAndGroups<TData>(props.columns);\n\n  // save the last valid column order to be able to check the validity of a new one\n  const lastValidColumnOrder = useRef<string[] | undefined>(\n    columnOrderFromDefinition,\n  );\n  // save the column order inferred from the column definition to be able to check if it changed\n  const lastColumnOrderFromDefinition = useRef<string[] | undefined>(\n    columnOrderFromDefinition,\n  );\n\n  const [columnOrder, setColumnOrder] = useControllableState({\n    value: props.columnOrder,\n    // if no order was specified, initialize with column definition order\n    defaultValue: props.defaultColumnOrder || columnOrderFromDefinition,\n  });\n\n  const onColumnOrderChangeCallback = useCallback(\n    (\n      updater: Updater<ColumnOrderState>,\n      trigger: 'user' | 'internal' = 'user',\n    ): void => {\n      const nextState = functionalUpdate(\n        updater,\n        options.state?.columnOrder ?? columnOrder,\n      );\n\n      if (!isEqual(nextState, columnOrder)) {\n        setColumnOrder(nextState);\n        props.onColumnOrderChange?.(nextState, trigger);\n      }\n    },\n    [columnOrder, options.state?.columnOrder, props, setColumnOrder],\n  );\n\n  if (!props.columnOrdering) {\n    return;\n  }\n\n  // uncontrolled, column definition changed - update\n  if (\n    props.columnOrder === undefined &&\n    !isEqual(lastColumnOrderFromDefinition.current, columnOrderFromDefinition)\n  ) {\n    onColumnOrderChangeCallback(columnOrderFromDefinition, 'internal');\n    lastColumnOrderFromDefinition.current = columnOrderFromDefinition;\n  } else if (!isEqual(columnOrder, lastValidColumnOrder.current)) {\n    // Validate the column order when the current order is not equal\n    // with the last valid order or if the current order has different\n    // elements than the order extracted from the column definition.\n    const validColumnOrder = validateColumnOrder(\n      columnOrder,\n      columnOrderFromDefinition,\n      columnGroups,\n    );\n    // only update column order if it was invalid\n    if (validColumnOrder !== null) {\n      onColumnOrderChangeCallback(validColumnOrder, 'internal');\n      lastValidColumnOrder.current = validColumnOrder;\n    }\n  }\n\n  options.enableColumnOrdering = true;\n  options.state = { ...options.state, columnOrder };\n\n  options.onColumnOrderChange = onColumnOrderChangeCallback;\n\n  options.originalColumnOrder =\n    props.defaultColumnOrder ?? lastValidColumnOrder.current;\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {\n  type Column as ReactTableColumn,\n  type ColumnOrderState,\n  functionalUpdate,\n  memo,\n  orderColumns,\n} from '@tanstack/react-table';\nimport { isEqual } from 'lodash-es';\nimport { useCallback, useRef } from 'react';\n\nimport type { DataTableColumnOrderProps } from './column-order-types.js';\nimport {\n  canMoveColumnLeft,\n  canMoveColumnRight,\n  getColumnsToCompareForMove,\n  moveColumnLeft,\n  moveColumnRight,\n} from './column-order-utils.js';\nimport {\n  extractColumnOrderAndGroups,\n  validateColumnOrder,\n} from './column-order-validation.js';\nimport { useControllableState } from '../../../../core/hooks/useControllableState.js';\nimport type {\n  Column,\n  Header,\n  RowData,\n  Table,\n  TableFeature,\n  TableOptions,\n  Updater,\n} from '../../hooks/useTable/types.js';\nimport { getMemoOptions } from '../../hooks/useTable/utils.js';\nimport type { DataTableColumnDef, DataTableRowData } from '../../public.api.js';\n\n/**\n * Additional feature implementation for column order.\n * @internal\n */\nexport const DataTableColumnOrder: TableFeature = {\n  createTable<TData extends DataTableRowData>(table: Table<TData>): void {\n    // overwrite the order columns fn from react table so that builtin columns are placed correctly\n    table._getOrderColumnsFn = memo(\n      () => {\n        const tableState = table.getState();\n        return [\n          tableState.columnOrder,\n          tableState.grouping,\n          table.options.groupedColumnMode,\n        ];\n      },\n      (columnOrder, grouping, groupedColumnMode) =>\n        (columns: Column<TData, unknown>[]) => {\n          const prefixColumns: Column<TData, unknown>[] = [];\n          const suffixColumns: Column<TData, unknown>[] = [];\n          let orderedColumns: Column<TData, unknown>[] = columns;\n\n          // If there is no order, return the normal columns\n          if (columnOrder.length) {\n            const columnsMap = new Map();\n\n            columns.forEach((column) => {\n              const builtinPlacement = column.columnDef.meta?.builtinPlacement;\n              if (builtinPlacement === 'prefix') {\n                prefixColumns.push(column);\n              } else if (builtinPlacement === 'suffix') {\n                suffixColumns.push(column);\n              } else {\n                columnsMap.set(column.id, column);\n              }\n            });\n\n            orderedColumns = [\n              ...prefixColumns,\n              ...columnOrder.flatMap((id) => columnsMap.get(id) ?? []),\n              ...suffixColumns,\n            ];\n          }\n\n          return orderColumns(\n            orderedColumns as ReactTableColumn<TData>[],\n            grouping,\n            groupedColumnMode,\n          ) as Column<TData, unknown>[];\n        },\n      getMemoOptions(table.options, 'debugCells', 'cell._getOrderColumnsFn'),\n    );\n\n    // Helper function that provides an array of all leaf-node columns, excluding builtin columns.\n    table.getLeafColumnsWithoutBuiltin = () => {\n      return table\n        .getAllLeafColumns()\n        .filter((leafColumn) => !leafColumn.columnDef.meta?.builtin);\n    };\n\n    table.setDraggedHeaderColumn = (column) => {\n      table.setState((state) => ({\n        ...state,\n        draggedHeaderColumn: column,\n      }));\n    };\n  },\n\n  createHeader<TData extends RowData, TValue>(\n    header: Header<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    header.getColumnDragAndDropMode = () => {\n      const isDragAndDropDisabled =\n        table.options.enableColumnOrdering !== true ||\n        header.column.columnDef.enableUserActions === false ||\n        header.getIsPinned() ||\n        (!header.column.getCanMoveColumnLeft() &&\n          !header.column.getCanMoveColumnRight());\n\n      if (isDragAndDropDisabled) {\n        return 'none';\n      }\n\n      if (\n        !header.column.getCanColumnActions() &&\n        !header.getCanSortByHeaderClick()\n      ) {\n        return 'only';\n      }\n\n      return 'enabled';\n    };\n\n    header.getIsDragAndDropDisabled = () => {\n      const { draggedHeaderColumn } = table.getState();\n      const draggedHeaderParentId = draggedHeaderColumn?.parent?.id;\n      const draggedHeaderId = draggedHeaderColumn?.id;\n      const isPinnedHeader = !!header.getIsPinned();\n\n      if (draggedHeaderId && isPinnedHeader) {\n        return true;\n      }\n\n      if (\n        draggedHeaderParentId === undefined ||\n        draggedHeaderParentId === header.column.id ||\n        draggedHeaderParentId === header.column.parent?.id\n      ) {\n        return false;\n      } else {\n        return true;\n      }\n    };\n  },\n\n  createColumn<TData extends DataTableRowData, TValue>(\n    column: Column<TData, TValue>,\n    table: Table<TData>,\n  ) {\n    column.getCanMoveColumnLeft = () => {\n      const columnsToCompare = getColumnsToCompareForMove(table, column);\n      return canMoveColumnLeft(column, columnsToCompare);\n    };\n\n    column.getCanMoveColumnRight = () => {\n      const columnsToCompare = getColumnsToCompareForMove(table, column);\n      return canMoveColumnRight(column, columnsToCompare);\n    };\n\n    /**\n     * Moves the current column one position to the left and updates the table state.\n     *\n     * Depending on whether the column is a nested column or a standalone column,\n     * whether its neighboring columns are pinned, hidden, or nested,\n     * we need to consider different scenarios to calculate the new column order correctly.\n     *\n     * CASE1: Column itself is a nested child column.\n     *  - Constraint1: Can only move within the parent group.\n     *  - Constraint2: Skip pinned siblings.\n     *  - Constraint3: Skip hidden siblings.\n     *\n     * CASE2: Column is a standalone column or a parent column.\n     *  - Constraint1: Skip entire nested columns as a whole.\n     *  - Constraint2: Skip pinned columns.\n     *  - Constraint3: Skip hidden columns.\n     */\n    column.moveColumnLeft = () => {\n      // Get the current table state needed for column reordering\n      const leafColumns = table.getLeafColumnsWithoutBuiltin();\n      const currentColumnOrder = table.getState().columnOrder;\n      const columnsPinned = table.getState().columnPinning;\n\n      const newColumnOrder = moveColumnLeft(\n        column,\n        currentColumnOrder,\n        columnsPinned,\n        leafColumns,\n      );\n      table.setColumnOrder(newColumnOrder);\n    };\n\n    /**\n     * Moves the current column one position to the right and updates the table state.\n     *\n     * Depending on whether the column is a nested column or a standalone column,\n     * whether its neighboring columns are pinned, hidden, or nested,\n     * we need to consider different scenarios to calculate the new column order correctly.\n     *\n     * CASE1: Column itself is a nested child column.\n     *  - Constraint1: Can only move within the parent group.\n     *  - Constraint2: Skip pinned siblings.\n     *  - Constraint3: Skip hidden siblings.\n     *\n     * CASE2: Column is a standalone column or a parent column.\n     *  - Constraint1: Skip entire nested columns as a whole.\n     *  - Constraint2: Skip pinned columns.\n     *  - Constraint3: Skip hidden columns.\n     */\n    column.moveColumnRight = () => {\n      // Get the current table state needed for column reordering\n      const leafColumns = table.getLeafColumnsWithoutBuiltin();\n      const currentColumnOrder = table.getState().columnOrder;\n      const columnsPinned = table.getState().columnPinning;\n      const newColumnOrder = moveColumnRight(\n        column,\n        currentColumnOrder,\n        columnsPinned,\n        leafColumns,\n      );\n      table.setColumnOrder(newColumnOrder);\n    };\n  },\n};\n\n/**\n * Configuration hook for the DataTable ColumnOrder feature.\n * @internal\n */\nexport function useColumnOrder<TData extends DataTableRowData>(\n  props: DataTableColumnOrderProps & {\n    columns: DataTableColumnDef<TData>[];\n  },\n  options: TableOptions<TData>,\n): void {\n  options.enableColumnOrdering = false;\n\n  const { columnOrder: columnOrderFromDefinition, columnGroups } =\n    extractColumnOrderAndGroups<TData>(props.columns);\n\n  // save the last valid column order to be able to check the validity of a new one\n  const lastValidColumnOrder = useRef<string[] | undefined>(\n    columnOrderFromDefinition,\n  );\n  // save the column order inferred from the column definition to be able to check if it changed\n  const lastColumnOrderFromDefinition = useRef<string[] | undefined>(\n    columnOrderFromDefinition,\n  );\n\n  const [columnOrder, setColumnOrder] = useControllableState({\n    value: props.columnOrder,\n    // if no order was specified, initialize with column definition order\n    defaultValue: props.defaultColumnOrder || columnOrderFromDefinition,\n  });\n\n  const onColumnOrderChangeCallback = useCallback(\n    (\n      updater: Updater<ColumnOrderState>,\n      trigger: 'user' | 'internal' = 'user',\n    ): void => {\n      const nextState = functionalUpdate(\n        updater,\n        options.state?.columnOrder ?? columnOrder,\n      );\n\n      if (!isEqual(nextState, columnOrder)) {\n        setColumnOrder(nextState);\n        props.onColumnOrderChange?.(nextState, trigger);\n      }\n    },\n    [columnOrder, options.state?.columnOrder, props, setColumnOrder],\n  );\n\n  if (!props.columnOrdering) {\n    return;\n  }\n\n  // uncontrolled, column definition changed - update\n  if (\n    props.columnOrder === undefined &&\n    !isEqual(lastColumnOrderFromDefinition.current, columnOrderFromDefinition)\n  ) {\n    onColumnOrderChangeCallback(columnOrderFromDefinition, 'internal');\n    lastColumnOrderFromDefinition.current = columnOrderFromDefinition;\n  } else if (!isEqual(columnOrder, lastValidColumnOrder.current)) {\n    // Validate the column order when the current order is not equal\n    // with the last valid order or if the current order has different\n    // elements than the order extracted from the column definition.\n    const validColumnOrder = validateColumnOrder(\n      columnOrder,\n      columnOrderFromDefinition,\n      columnGroups,\n    );\n    // only update column order if it was invalid\n    if (validColumnOrder !== null) {\n      onColumnOrderChangeCallback(validColumnOrder, 'internal');\n      lastValidColumnOrder.current = validColumnOrder;\n    }\n  }\n\n  options.enableColumnOrdering = true;\n  options.state = { ...options.state, columnOrder };\n\n  options.onColumnOrderChange = onColumnOrderChangeCallback;\n\n  options.originalColumnOrder =\n    props.defaultColumnOrder ?? lastValidColumnOrder.current;\n}\n"],
+  "mappings": "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",
   "names": []
 }

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

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

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

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