@servicetitan/anvil2 2.8.0 → 2.9.0

package/dist/{DataTable-DK9xRjnq.js → DataTable-BCV_mtSy.js}

@@ -1,56 +1,57 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { C as Chip } from './Chip-BnofwIUN.js';
+import { C as Chip } from './Chip-Ce0WGKAc.js';
 import { F as Flex } from './Flex-WyyZm1bf.js';
 import * as React from 'react';
-import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, useId, Fragment as Fragment$1, useReducer } from 'react';
+import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, useId, Fragment as Fragment$1, isValidElement, useReducer } from 'react';
 import { c as cx } from './index-De1g9FRV.js';
 import { D as DateTime } from './luxon-wpz4A-OQ.js';
-import { C as Checkbox } from './Checkbox-DbaZrUE2.js';
-import { B as Button } from './Button-a_D7tUgM.js';
+import { C as Checkbox } from './Checkbox-Cw1-KFvq.js';
+import { B as Button } from './Button-BdrrhBTI.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgEdit } from './edit-DQOiktcu.js';
 import { I as Icon } from './Icon-DuIlne4x.js';
 import { S as SrOnly } from './SrOnly-eUpYGpAT.js';
 import { u as useNumberField } from './useNumberField-eMyk7MB8.js';
 import { u as useMergeRefs, m as mergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-CuZp9mnt.js';
-import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-B_mXpTEe.js';
+import { a as SelectMenuSync, S as SelectMenu } from './SelectMenuSync-DXrwecFt.js';
+import { a as MultiSelectMenuSync, M as MultiSelectMenu } from './MultiSelectMenuSync-7C1wW4oO.js';
+import { F as FieldLabel } from './FieldLabel-HO2VP-4B.js';
 import { S as SvgError } from './error-DR_wWdYY.js';
 import { S as SvgWarning } from './warning-c4Wj1rI4.js';
 import { T as Tooltip } from './Tooltip-C1PBRnJv.js';
 import { flushSync } from 'react-dom';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-DMDdfIah.js';
-import './anvil-fonts.css';import './DataTable.css';/* empty css                     */
-import { P as Pagination } from './Pagination-CjGmJ_rU.js';
+import { P as Pagination } from './Pagination-DecGSuW4.js';
 import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
 import { S as Spinner } from './Spinner-BqmcE2pb.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
 
-const booleanFormatter = (value, { trueLabel = "True", falseLabel = "False" } = {}) => {
+import './DataTable.css';const booleanFormatter = (value, { trueLabel = "True", falseLabel = "False" } = {}) => {
   if (value == null) {
     return null;
   }
   return value ? trueLabel : falseLabel;
 };
 
-const styles$e = {
-	"table-header-cell": "_table-header-cell_1ffr7_2",
-	"table-body-cell": "_table-body-cell_1ffr7_3",
-	"table-footer-cell": "_table-footer-cell_1ffr7_4",
-	"last-pinned-left-column": "_last-pinned-left-column_1ffr7_33",
-	"first-pinned-right-column": "_first-pinned-right-column_1ffr7_33",
-	"empty-cell": "_empty-cell_1ffr7_54",
-	"table-cell-internal-select": "_table-cell-internal-select_1ffr7_71",
-	"table-cell-internal-expand": "_table-cell-internal-expand_1ffr7_72",
-	"table-header-cell-group": "_table-header-cell-group_1ffr7_91",
-	"table-header-cell-sortable": "_table-header-cell-sortable_1ffr7_100"};
+const styles$f = {
+	"table-header-cell": "_table-header-cell_nfkc_2",
+	"table-body-cell": "_table-body-cell_nfkc_3",
+	"table-footer-cell": "_table-footer-cell_nfkc_4",
+	"last-pinned-left-column": "_last-pinned-left-column_nfkc_33",
+	"first-pinned-right-column": "_first-pinned-right-column_nfkc_33",
+	"empty-cell": "_empty-cell_nfkc_54",
+	"table-cell-internal-select": "_table-cell-internal-select_nfkc_71",
+	"table-cell-internal-expand": "_table-cell-internal-expand_nfkc_72",
+	"table-header-cell-group": "_table-header-cell-group_nfkc_91",
+	"table-header-cell-sortable": "_table-header-cell-sortable_nfkc_100",
+	"table-header-cell-interactive": "_table-header-cell-interactive_nfkc_101"};
 
 const TableEmptyCellContent = () => {
-  return /* @__PURE__ */ jsx("span", { "aria-label": "empty table cell", className: styles$e["empty-cell"], children: "—" });
+  return /* @__PURE__ */ jsx("span", { "aria-label": "empty table cell", className: styles$f["empty-cell"], children: "—" });
 };
 
-const styles$d = {
+const styles$e = {
 	"truncate-chips": "_truncate-chips_1lgyk_2"
 };
 
@@ -136,7 +137,7 @@ const TruncateChips = ({
     "div",
     {
       ref: containerRef,
-      className: cx(styles$d["truncate-chips"], className),
+      className: cx(styles$e["truncate-chips"], className),
       style: {
         marginInlineEnd: plusChipWidth
       },
@@ -250,6 +251,238 @@ const dateTimeFormatter = (value, {
   return localizedDateTime.toLocaleString(formatOptions);
 };
 
+const SUPPORTED_INLINE_TAGS = ["strong", "b", "em", "i", "code", "mark"];
+const INLINE_TAG_REGEX = new RegExp(
+  `<(${SUPPORTED_INLINE_TAGS.join("|")})(\\s[^>]*)?>([\\s\\S]*?)</\\1>`,
+  "gi"
+);
+const INLINE_WRAPPERS = {
+  strong: ["**", "**"],
+  b: ["**", "**"],
+  em: ["*", "*"],
+  i: ["*", "*"],
+  code: ["`", "`"],
+  mark: ["==", "=="]
+};
+function convertInlineTags(html) {
+  let result = html;
+  let previous = "";
+  while (result !== previous) {
+    previous = result;
+    result = result.replace(INLINE_TAG_REGEX, (_, tag, _attrs, content) => {
+      const normalizedTag = tag.toLowerCase();
+      const wrapper = INLINE_WRAPPERS[normalizedTag];
+      if (!wrapper) return content;
+      return wrapper[0] + convertInlineTags(content) + wrapper[1];
+    });
+  }
+  return result;
+}
+const BR_REGEX = /<br\s*\/?>/gi;
+const P_OPEN_REGEX = /<p(\s[^>]*)?>/gi;
+const P_CLOSE_REGEX = /<\/p>/gi;
+const NAMED_ENTITIES = {
+  amp: "&",
+  lt: "<",
+  gt: ">",
+  nbsp: " ",
+  quot: '"',
+  "#39": "'"
+};
+const ENTITY_REGEX = /&(#x[0-9a-fA-F]+|#\d+|[a-zA-Z]+);/g;
+function decodeEntities(text) {
+  return text.replace(ENTITY_REGEX, (match, entity) => {
+    if (entity.startsWith("#x")) {
+      return String.fromCharCode(parseInt(entity.slice(2), 16));
+    }
+    if (entity.startsWith("#")) {
+      return String.fromCharCode(parseInt(entity.slice(1), 10));
+    }
+    return NAMED_ENTITIES[entity] ?? match;
+  });
+}
+const SUPPORTED_TAGS = [
+  "strong",
+  "b",
+  "em",
+  "i",
+  "code",
+  "mark",
+  "ul",
+  "ol",
+  "li",
+  "br",
+  "p"
+];
+const UNSUPPORTED_TAG_REGEX = new RegExp(
+  `<(?!/?(?:${SUPPORTED_TAGS.join("|")})\\b)[a-zA-Z][^>]*>[\\s\\S]*?</[a-zA-Z][^>]*>`,
+  "gi"
+);
+const ORPHANED_CLOSE_TAG_REGEX = new RegExp(
+  `</(?!(?:${SUPPORTED_TAGS.join("|")})\\b)[a-zA-Z][^>]*>`,
+  "gi"
+);
+function removeUnsupportedTags(html) {
+  let result = html;
+  let previous = "";
+  while (result !== previous) {
+    previous = result;
+    result = result.replace(UNSUPPORTED_TAG_REGEX, "");
+  }
+  result = result.replace(ORPHANED_CLOSE_TAG_REGEX, "");
+  return result;
+}
+const UL_REGEX = /<ul(\s[^>]*)?>[\s\S]*?<\/ul>/gi;
+const OL_REGEX = /<ol(\s[^>]*)?>[\s\S]*?<\/ol>/gi;
+const LI_REGEX = /<li(\s[^>]*)?>[\s\S]*?<\/li>/gi;
+const LI_CONTENT_REGEX = /^<li(\s[^>]*)?>|<\/li>$/gi;
+function convertList(listHtml, ordered) {
+  const items = listHtml.match(LI_REGEX);
+  if (!items) return "";
+  return items.map((item, index) => {
+    const content = convertInlineTags(
+      item.replace(LI_CONTENT_REGEX, "").trim()
+    );
+    return ordered ? `${index + 1}. ${content}` : `- ${content}`;
+  }).join("\n");
+}
+function convertLists(html) {
+  let result = html;
+  result = result.replace(UL_REGEX, (match) => convertList(match, false));
+  result = result.replace(OL_REGEX, (match) => convertList(match, true));
+  return result;
+}
+function htmlToMarkdown(value) {
+  if (value == null || value === "") {
+    return "";
+  }
+  let result = value;
+  result = removeUnsupportedTags(result);
+  result = result.replace(P_OPEN_REGEX, "");
+  result = result.replace(P_CLOSE_REGEX, "\n");
+  result = convertLists(result);
+  result = result.replace(BR_REGEX, "\n");
+  result = convertInlineTags(result);
+  result = decodeEntities(result);
+  result = result.replace(/\n+$/, "");
+  return result;
+}
+
+const code = "_code_1u8e7_1";
+const highlight = "_highlight_1u8e7_2";
+const list = "_list_1u8e7_3";
+const container = "_container_1u8e7_4";
+const styles$d = {
+	code: code,
+	highlight: highlight,
+	list: list,
+	container: container
+};
+
+const INLINE_REGEX = /\*\*\*(.+?)\*\*\*|\*\*(.+?)\*\*|\*(.+?)\*|==(.+?)==|`(.+?)`/g;
+const UNORDERED_LIST_REGEX = /^- (.+)$/;
+const ORDERED_LIST_REGEX = /^\d+\. (.+)$/;
+function parseInline(text) {
+  const parts = [];
+  let lastIndex = 0;
+  INLINE_REGEX.lastIndex = 0;
+  let match;
+  while ((match = INLINE_REGEX.exec(text)) !== null) {
+    if (match.index > lastIndex) {
+      parts.push(text.substring(lastIndex, match.index));
+    }
+    const key = match.index;
+    const savedIndex = INLINE_REGEX.lastIndex;
+    if (match[1]) {
+      parts.push(
+        /* @__PURE__ */ jsx("strong", { children: /* @__PURE__ */ jsx("em", { children: parseInline(match[1]) }) }, key)
+      );
+    } else if (match[2]) {
+      parts.push(/* @__PURE__ */ jsx("strong", { children: parseInline(match[2]) }, key));
+    } else if (match[3]) {
+      parts.push(/* @__PURE__ */ jsx("em", { children: parseInline(match[3]) }, key));
+    } else if (match[4]) {
+      parts.push(
+        /* @__PURE__ */ jsx("mark", { className: styles$d.highlight, children: parseInline(match[4]) }, key)
+      );
+    } else if (match[5]) {
+      parts.push(
+        /* @__PURE__ */ jsx("code", { className: styles$d.code, children: match[5] }, key)
+      );
+    }
+    INLINE_REGEX.lastIndex = savedIndex;
+    lastIndex = savedIndex;
+  }
+  if (lastIndex < text.length) {
+    parts.push(text.substring(lastIndex));
+  }
+  return parts;
+}
+function parseBlocks(text) {
+  const lines = text.split("\n");
+  const blocks = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    const ulMatch = line.match(UNORDERED_LIST_REGEX);
+    const olMatch = line.match(ORDERED_LIST_REGEX);
+    if (ulMatch) {
+      const items = [ulMatch[1]];
+      i++;
+      while (i < lines.length) {
+        const nextUl = lines[i].match(UNORDERED_LIST_REGEX);
+        if (!nextUl) break;
+        items.push(nextUl[1]);
+        i++;
+      }
+      blocks.push({ type: "ul", items });
+    } else if (olMatch) {
+      const items = [olMatch[1]];
+      i++;
+      while (i < lines.length) {
+        const nextOl = lines[i].match(ORDERED_LIST_REGEX);
+        if (!nextOl) break;
+        items.push(nextOl[1]);
+        i++;
+      }
+      blocks.push({ type: "ol", items });
+    } else {
+      if (line !== "") {
+        blocks.push({ type: "text", content: line });
+      }
+      i++;
+    }
+  }
+  return blocks;
+}
+function renderBlocks(blocks) {
+  return blocks.map((block, index) => {
+    switch (block.type) {
+      case "text":
+        return /* @__PURE__ */ jsx("span", { children: parseInline(block.content) }, index);
+      case "ul":
+        return /* @__PURE__ */ jsx("ul", { className: styles$d.list, children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: parseInline(item) }, i)) }, index);
+      case "ol":
+        return /* @__PURE__ */ jsx("ol", { className: styles$d.list, children: block.items.map((item, i) => /* @__PURE__ */ jsx("li", { children: parseInline(item) }, i)) }, index);
+    }
+  });
+}
+const markdownFormatter = (value) => {
+  if (value == null || value === "") {
+    return null;
+  }
+  const blocks = parseBlocks(value);
+  if (blocks.length === 1 && blocks[0].type === "text") {
+    return /* @__PURE__ */ jsx(Fragment, { children: parseInline(blocks[0].content) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles$d.container, children: renderBlocks(blocks) });
+};
+
+const htmlFormatter = (value) => {
+  const markdown = htmlToMarkdown(value);
+  return markdownFormatter(markdown);
+};
+
 const numberFormatter = (value, options = {}) => {
   const {
     locale = "en-US",
@@ -391,6 +624,14 @@ const COLUMN_TYPE_DEFAULTS = {
       value,
       options
     )
+  },
+  markdown: {
+    align: "start",
+    createRenderCell: () => (value) => markdownFormatter(value)
+  },
+  html: {
+    align: "start",
+    createRenderCell: () => (value) => htmlFormatter(value)
   }
 };
 function resolveColumnTypeConfig(config) {
@@ -3913,10 +4154,10 @@ const getCommonPinningClasses = (column) => {
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   if (isLastLeftPinnedColumn) {
-    return styles$e["last-pinned-left-column"];
+    return styles$f["last-pinned-left-column"];
   }
   if (isFirstRightPinnedColumn) {
-    return styles$e["first-pinned-right-column"];
+    return styles$f["first-pinned-right-column"];
   }
 };
 
@@ -3939,9 +4180,9 @@ const DataTableEditableCellEditIcon = () => {
 };
 
 const TableBodyCell = forwardRef(({ type, children, className, isExpandCell, isSelectCell, ...rest }, ref) => {
-  const classes = cx(styles$e["table-body-cell"], className, {
-    [styles$e["table-cell-internal-expand"]]: isExpandCell,
-    [styles$e["table-cell-internal-select"]]: isSelectCell
+  const classes = cx(styles$f["table-body-cell"], className, {
+    [styles$f["table-cell-internal-expand"]]: isExpandCell,
+    [styles$f["table-cell-internal-select"]]: isSelectCell
   });
   const CellElement = type === "simple" ? "td" : "div";
   return /* @__PURE__ */ jsx(
@@ -4066,8 +4307,8 @@ function DataTableBodyImmutableCell(props) {
     [styles$9["data-table-body-cell-hovered"]]: isHovered,
     [styles$9["data-table-body-cell-error"]]: !!cellError,
     [styles$9["data-table-body-cell-warning"]]: !cellError && !!cellWarning,
-    [styles$e["table-cell-internal-expand"]]: isExpandCell,
-    [styles$e["table-cell-internal-select"]]: isSelectCell
+    [styles$f["table-cell-internal-expand"]]: isExpandCell,
+    [styles$f["table-cell-internal-select"]]: isSelectCell
   });
   const commonPinningStyles = useCommonPinningStyles(column);
   const { jumpFocus, moveFocus } = useDTFocusDispatchContext();
@@ -5570,7 +5811,7 @@ function TableFooter({ type, children, ...rest }) {
 
 const TableFooterCell = forwardRef((props, ref) => {
   const { type, children, className, ...rest } = props;
-  const classes = cx(styles$e["table-footer-cell"], className);
+  const classes = cx(styles$f["table-footer-cell"], className);
   const CellElement = type === "simple" ? "td" : "div";
   return /* @__PURE__ */ jsx(
     CellElement,
@@ -5837,22 +6078,116 @@ function CellStatus({ status, variant }) {
   ] });
 }
 
+function resolveHeaderAlign(align, isGroup = false) {
+  if (isGroup) {
+    return "start";
+  }
+  return align ?? "start";
+}
+function getHeaderJustifyContent(align) {
+  if (align === "center") {
+    return "center";
+  }
+  if (align === "end") {
+    return "flex-end";
+  }
+  return "flex-start";
+}
+function normalizeColumnHeader(columnDef) {
+  return {
+    label: columnDef.header?.label ?? columnDef.headerLabel ?? String(columnDef.id),
+    required: columnDef.header?.required,
+    moreInfo: columnDef.header?.moreInfo
+  };
+}
+function renderColumnHeader(header, {
+  align,
+  isGroup = false
+}) {
+  const resolvedAlign = resolveHeaderAlign(align, isGroup);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-a2-datatable-header-wrapper": "true",
+      "data-a2-datatable-header-align": resolvedAlign,
+      "data-a2-datatable-header-kind": isGroup ? "group" : "leaf",
+      style: {
+        justifyContent: getHeaderJustifyContent(resolvedAlign),
+        maxWidth: "100%",
+        width: "fit-content"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-a2-datatable-header-content": "true",
+          style: { maxWidth: "100%", width: "fit-content" },
+          children: /* @__PURE__ */ jsx(
+            FieldLabel,
+            {
+              el: "div",
+              required: header.required,
+              moreInfo: header.moreInfo,
+              style: {
+                maxWidth: "100%",
+                textAlign: resolvedAlign,
+                width: "fit-content"
+              },
+              children: header.label
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function renderRawCellValue(value) {
+  if (value === null || value === void 0) {
+    return null;
+  }
+  if (value === "") {
+    return "";
+  }
+  if (typeof value === "string" || typeof value === "number" || typeof value === "bigint") {
+    return value;
+  }
+  if (typeof value === "boolean") {
+    return String(value);
+  }
+  if (typeof value === "symbol") {
+    return value.toString();
+  }
+  if (typeof value === "object" && isValidElement(value)) {
+    return value;
+  }
+  if (Array.isArray(value)) {
+    return value.map((item, index) => /* @__PURE__ */ jsx(Fragment$1, { children: renderRawCellValue(item) }, index));
+  }
+  return String(value);
+}
 function getTanStackColumnDef({
   columnDef,
   emptyCellContent
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 }) {
   const columnHelper = createColumnHelper();
+  const normalizedHeader = normalizeColumnHeader(columnDef);
   if (columnDef.columns && columnDef.columns.length > 0) {
     return columnHelper.group({
       id: columnDef.id,
-      header: columnDef.headerLabel,
+      header: () => renderColumnHeader(normalizedHeader, {
+        align: columnDef.align,
+        isGroup: true
+      }),
       columns: columnDef.columns.map(
         (column) => getTanStackColumnDef({
           columnDef: column,
           emptyCellContent
         })
       ),
+      meta: {
+        columnDef,
+        headerAlign: resolveHeaderAlign(columnDef.align, true),
+        isGroupHeader: true
+      },
       footer: columnDef.footerContent ? () => columnDef.footerContent : void 0,
       enableResizing: columnDef.resizable
     });
@@ -5874,17 +6209,22 @@ function getTanStackColumnDef({
     }
   }
   const resolvedEmptyContent = columnDef.emptyCellContent ?? emptyCellContent ?? /* @__PURE__ */ jsx(TableEmptyCellContent, {});
+  const metaColumnDef = {
+    ...columnDef,
+    headerLabel: normalizedHeader.label
+  };
   return columnHelper.accessor((row) => row[columnDef.id], {
     id: columnDef.id,
     cell: (info) => {
+      const rawCellValue = info.row.original[columnDef.id];
       let cellContent;
       if (resolvedRenderCell) {
-        cellContent = resolvedRenderCell(info.getValue(), {
+        cellContent = resolvedRenderCell(rawCellValue, {
           row: info.row.original,
           depth: info.row.depth
         });
       } else {
-        cellContent = info.getValue();
+        cellContent = renderRawCellValue(rawCellValue);
       }
       if (cellContent === "") {
         cellContent = resolvedEmptyContent;
@@ -5910,7 +6250,9 @@ function getTanStackColumnDef({
         }
       );
     },
-    header: () => /* @__PURE__ */ jsx(Flex, { justifyContent: resolvedAlign, wrap: "wrap", grow: 1, children: columnDef.headerLabel }),
+    header: () => renderColumnHeader(normalizedHeader, {
+      align: resolvedAlign
+    }),
     footer: columnDef.footerContent ? () => columnDef.footerContent : void 0,
     minSize: columnDef.minWidth,
     maxSize: columnDef.maxWidth,
@@ -5919,8 +6261,10 @@ function getTanStackColumnDef({
     meta: {
       editMode: columnDef.editConfig?.mode,
       editConfig: columnDef.editConfig,
-      columnDef
+      columnDef: metaColumnDef,
       // Store original for type narrowing
+      headerAlign: resolveHeaderAlign(resolvedAlign),
+      isGroupHeader: false
     },
     // If custom sorting function is provided, use it
     ...columnDef.sortable && typeof columnDef.sortable === "function" ? {
@@ -5966,15 +6310,17 @@ const TableHeaderCell = forwardRef(
     className,
     isGroup,
     isSortable,
+    isInteractiveHeaderCell,
     isSelectCell,
     isExpandCell,
     ...rest
   }, ref) => {
-    const classes = cx(styles$e["table-header-cell"], className, {
-      [styles$e["table-header-cell-group"]]: isGroup,
-      [styles$e["table-header-cell-sortable"]]: isSortable,
-      [styles$e["table-cell-internal-expand"]]: isExpandCell,
-      [styles$e["table-cell-internal-select"]]: isSelectCell
+    const classes = cx(styles$f["table-header-cell"], className, {
+      [styles$f["table-header-cell-group"]]: isGroup,
+      [styles$f["table-header-cell-sortable"]]: isSortable,
+      [styles$f["table-header-cell-interactive"]]: isInteractiveHeaderCell,
+      [styles$f["table-cell-internal-expand"]]: isExpandCell,
+      [styles$f["table-cell-internal-select"]]: isSelectCell
     });
     const CellElement = type === "simple" ? "th" : "div";
     return /* @__PURE__ */ jsx(
@@ -5992,6 +6338,23 @@ const TableHeaderCell = forwardRef(
 );
 TableHeaderCell.displayName = "TableHeaderCell";
 
+const INTERACTIVE_DESCENDANT_SELECTOR = [
+  "button",
+  "a[href]",
+  "input",
+  "select",
+  "textarea",
+  '[role="button"]',
+  '[role="link"]',
+  '[contenteditable="true"]'
+].join(", ");
+function isInteractiveDescendant(target, currentTarget) {
+  if (!(target instanceof Element)) {
+    return false;
+  }
+  const interactiveElement = target.closest(INTERACTIVE_DESCENDANT_SELECTOR);
+  return !!interactiveElement && currentTarget.contains(interactiveElement);
+}
 function DataTableHeaderCellInner(props, forwardedRef) {
   const { cellPosition, children, header, className, ...rest } = props;
   const internalRef = useRef(null);
@@ -6019,7 +6382,7 @@ function DataTableHeaderCellInner(props, forwardedRef) {
   const columnId = header.column.id;
   const isExpandCell = columnId === INTERNAL_ROW_ACTION_PRIMARY_COLUMN_ID;
   const isSelectCell = columnId === INTERNAL_ROW_ACTION_SECONDARY_COLUMN_ID;
-  const isSortingCell = header.column.columnDef.enableSorting;
+  const isSortingCell = header.column.getCanSort();
   const handleKeyDown = useCallback(
     (event) => {
       switch (event.key) {
@@ -6051,6 +6414,9 @@ function DataTableHeaderCellInner(props, forwardedRef) {
         }
         case " ":
         case "Enter": {
+          if (isInteractiveDescendant(event.target, event.currentTarget)) {
+            return;
+          }
           const isDisabled = header.column.columnDef.meta?.disableHeaderAction;
           if (isSelectCell && !isDisabled) {
             event.preventDefault();
@@ -6083,18 +6449,20 @@ function DataTableHeaderCellInner(props, forwardedRef) {
   );
   const handleClick = useCallback(
     (event) => {
-      if (header.column.columnDef.enableSorting) {
-        const target = event.target;
-        const resizeHandle = target.closest(
+      if (isSortingCell) {
+        if (!(event.target instanceof Element)) {
+          return;
+        }
+        const resizeHandle = event.target.closest(
           '[aria-roledescription="Resize handle"]'
         );
-        if (resizeHandle) {
+        if (resizeHandle || isInteractiveDescendant(event.target, event.currentTarget)) {
           return;
         }
         header.column.getToggleSortingHandler()?.(event);
       }
     },
-    [header.column]
+    [header.column, isSortingCell]
   );
   return /* @__PURE__ */ jsxs(
     TableHeaderCell,
@@ -6112,7 +6480,7 @@ function DataTableHeaderCellInner(props, forwardedRef) {
       "aria-sort": header.column.getIsSorted() === "asc" ? "ascending" : header.column.getIsSorted() === "desc" ? "descending" : void 0,
       children: [
         children,
-        header.column.columnDef.enableSorting && /* @__PURE__ */ jsxs(SrOnly, { children: [
+        isSortingCell && /* @__PURE__ */ jsxs(SrOnly, { children: [
           header.column.getIsSorted() === "asc" ? "Sorted ascending." : header.column.getIsSorted() === "desc" ? "Sorted descending." : "Not sorted.",
           " ",
           "Click to toggle sort."
@@ -6167,6 +6535,15 @@ function useDTHoverDispatchContext() {
   return useContext(DTHoverDispatchContext);
 }
 
+function getHeaderContentAlign(align) {
+  if (align === "center") {
+    return "center";
+  }
+  if (align === "end") {
+    return "flex-end";
+  }
+  return "flex-start";
+}
 function DataTableHeader({ table }) {
   const dispatch = useDTHoverDispatchContext();
   const handleHoverColumn = useCallback(
@@ -6224,6 +6601,13 @@ function DataTableHeader({ table }) {
         const isInternalSelectColumn = header.column.id === INTERNAL_ROW_ACTION_SECONDARY_COLUMN_ID;
         const isInternalExpandColumn = header.column.id === INTERNAL_ROW_ACTION_PRIMARY_COLUMN_ID;
         const gridColumn = header.colSpan > 1 ? `span ${header.colSpan}` : void 0;
+        const headerContentAlign = getHeaderContentAlign(
+          header.column.columnDef.meta?.headerAlign
+        );
+        const isGroupHeader = header.subHeaders.length > 0;
+        const hasGroupDivider = isGroupHeader || Boolean(header.column.parent && isLastInParentGroup);
+        const isHeaderActionDisabled = header.column.columnDef.meta?.disableHeaderAction === true;
+        const headerCellInteractive = !isGroupHeader && (header.column.getCanSort() || (isInternalExpandColumn || isInternalSelectColumn) && !isHeaderActionDisabled);
         return /* @__PURE__ */ jsx(
           DataTableHeaderCell,
           {
@@ -6241,12 +6625,13 @@ function DataTableHeader({ table }) {
               ...getCommonPinningStyles(header.column)
             },
             "aria-colspan": header.colSpan,
-            isGroup: "columns" in header.column.columnDef || header.getContext().header.column.parent && isLastInParentGroup,
-            isSortable: header.column.columnDef.enableSorting,
+            isGroup: hasGroupDivider,
+            isSortable: header.column.getCanSort(),
+            isInteractiveHeaderCell: headerCellInteractive,
             isSelectCell: isInternalSelectColumn,
             isExpandCell: isInternalExpandColumn,
-            onMouseEnter: isInternalExpandColumn || isInternalSelectColumn ? void 0 : () => handleHoverColumn(header.column.id),
-            onMouseLeave: isInternalExpandColumn || isInternalSelectColumn ? void 0 : () => handleHoverColumnLeave(header.column.id),
+            onMouseEnter: headerCellInteractive ? () => handleHoverColumn(header.column.id) : void 0,
+            onMouseLeave: headerCellInteractive ? () => handleHoverColumnLeave(header.column.id) : void 0,
             cellPosition: {
               rowIndex: index,
               columnIndex: columnOrder.indexOf(header.column.getIndex())
@@ -6255,22 +6640,46 @@ function DataTableHeader({ table }) {
               Flex,
               {
                 direction: "row",
-                alignItems: "flex-end",
+                alignItems: "center",
                 gap: 2,
                 style: {
                   width: "100%"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs(Flex, { direction: "row", alignItems: "center", gap: 2, grow: 1, children: [
-                    flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    ),
+                  /* @__PURE__ */ jsxs(
+                    Flex,
                     {
-                      asc: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowUpward, size: "small" }),
-                      desc: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowDownward, size: "small" })
-                    }[header.column.getIsSorted()] ?? null
-                  ] }),
+                      direction: "row",
+                      alignItems: "center",
+                      justifyContent: headerContentAlign,
+                      gap: 2,
+                      grow: 1,
+                      style: {
+                        minWidth: 0,
+                        width: "100%"
+                      },
+                      children: [
+                        flexRender(
+                          header.column.columnDef.header,
+                          header.getContext()
+                        ),
+                        header.column.getIsSorted() ? /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            style: {
+                              alignItems: "center",
+                              display: "flex",
+                              flexShrink: 0
+                            },
+                            children: {
+                              asc: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowUpward, size: "small" }),
+                              desc: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowDownward, size: "small" })
+                            }[header.column.getIsSorted()] ?? null
+                          }
+                        ) : null
+                      ]
+                    }
+                  ),
                   header.column.columnDef.enableResizing && /* @__PURE__ */ jsx(
                     ResizeHandle,
                     {
@@ -7126,8 +7535,7 @@ function DataTableInner(props, ref) {
     }).join(" ");
     vars["--a2-grid-template-columns"] = gridColumns;
     vars["--a2-table-width"] = allHaveMaxWidth ? "max-content" : "100%";
-    for (let i = 0; i < headers.length; i++) {
-      const header = headers[i];
+    for (const header of headers) {
       vars[`--a2-table-col-${header.column.getIndex()}-size`] = header.column.getSize();
     }
     return vars;
@@ -7249,5 +7657,5 @@ function DataTableInner(props, ref) {
 }
 const DataTable = forwardRef(DataTableInner);
 
-export { COLUMN_TYPE_DEFAULTS as C, DataTable as D, chipsFormatter as a, booleanFormatter as b, createColumnHelper$1 as c, currencyFormatter as d, dateFormatter as e, dateTimeFormatter as f, getColumnTypeDefaults as g, dateFormatPresets as h, timeFormatter as i, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
-//# sourceMappingURL=DataTable-DK9xRjnq.js.map
+export { COLUMN_TYPE_DEFAULTS as C, DataTable as D, chipsFormatter as a, booleanFormatter as b, createColumnHelper$1 as c, currencyFormatter as d, dateFormatter as e, dateTimeFormatter as f, getColumnTypeDefaults as g, htmlFormatter as h, dateFormatPresets as i, timeFormatter as j, markdownFormatter as m, numberFormatter as n, percentFormatter as p, resolveColumnTypeConfig as r, timeFormatPresets as t, yearlessDateFormatter as y };
+//# sourceMappingURL=DataTable-BCV_mtSy.js.map