@servicetitan/anvil2 1.49.7 → 1.50.1

package/dist/Combobox.js

@@ -1,3 +1,3 @@
-export { C as Combobox, c as ComboboxContent, a as ComboboxElement, i as ComboboxEmpty, e as ComboboxItem, f as ComboboxItemAddNew, d as ComboboxList, g as ComboboxSearchField, b as ComboboxSelect, h as ComboboxSelectTrigger, C as default } from './Combobox-hxGMMb8x.js';
+export { C as Combobox, c as ComboboxContent, a as ComboboxElement, i as ComboboxEmpty, e as ComboboxItem, f as ComboboxItemAddNew, d as ComboboxList, g as ComboboxSearchField, b as ComboboxSelect, h as ComboboxSelectTrigger, C as default } from './Combobox-DGAa9vgU.js';
 export { u as useInfiniteCombobox } from './useInfiniteCombobox-WcRgC9p6.js';
 //# sourceMappingURL=Combobox.js.map

package/dist/{DataTable-CUFa7cQK.js → DataTable-DQ9FFuV8.js}

@@ -11,11 +11,12 @@ import { I as Icon } from './Icon-BSuTVNaa.js';
 import { S as SrOnly } from './SrOnly-CTsYSuby.js';
 import { M as Menu } from './Menu-Cn2JJe1Y.js';
 import { P as Popover } from './Popover-CCXrzBul.js';
-import { S as SearchField } from './SearchField-D6bICv4b.js';
+import { S as SearchField } from './SearchField-CJAo8dE0.js';
 import { L as ListView } from './ListView-D8mfK8Lu.js';
+import { flushSync } from 'react-dom';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-BlIWftBb.js';
 import './anvil-fonts.css';import './DataTable.css';/* empty css                     */
-import { P as Pagination } from './Pagination-CnF6yBr5.js';
+import { P as Pagination } from './Pagination-BR8MiRaA.js';
 import { S as Spinner } from './Spinner-xEFwsq8_.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
 
@@ -3485,7 +3486,8 @@ function useReactTable(options) {
 }
 
 const styles$c = {
-	"table-base": "_table-base_wtnhx_2"
+	"table-base": "_table-base_11xh7_2",
+	"data-table-base": "_data-table-base_11xh7_15"
 };
 
 const SimpleTableBase = ({
@@ -3512,7 +3514,7 @@ const DataTableBase = ({
   hasSubRows,
   ...rest
 }) => {
-  const tableBaseClassNames = cx(className, styles$c["table-base"]);
+  const tableBaseClassNames = cx(className, styles$c["data-table-base"]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -3548,7 +3550,6 @@ const getCommonPinningStyles = (column) => {
     left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
     position: isPinned ? "sticky" : "relative",
-    width: `calc(var(--a2-table-col-${column.getIndex()}-size) * 1px)`,
     zIndex: isPinned ? 1 : 0
   };
 };
@@ -3566,7 +3567,7 @@ const getCommonPinningClasses = (column) => {
 };
 
 const styles$b = {
-	"table-body": "_table-body_zs2gj_2"
+	"table-body": "_table-body_zx1bt_2"
 };
 
 function TableBody({ type, children, ...rest }) {
@@ -4157,10 +4158,11 @@ function DataTableBodyCellElement(props) {
 const DataTableBodyCell = memo$1(DataTableBodyCellElement);
 
 const styles$8 = {
-	"data-table-body-row": "_data-table-body-row_1vs3r_2",
-	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_1vs3r_20",
-	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_1vs3r_25",
-	"data-table-body-cell-group": "_data-table-body-cell-group_1vs3r_31"
+	"data-table-body-row": "_data-table-body-row_3jgem_2",
+	"data-table-body-sub-component-row": "_data-table-body-sub-component-row_3jgem_22",
+	"data-table-body-sub-component-container": "_data-table-body-sub-component-container_3jgem_26",
+	"data-table-body-sub-component-content": "_data-table-body-sub-component-content_3jgem_31",
+	"data-table-body-cell-group": "_data-table-body-cell-group_3jgem_37"
 };
 
 const DataTableBodyContent = ({
@@ -4186,10 +4188,7 @@ const DataTableBodyContent = ({
             {
               "aria-colindex": cell.column.getIndex() + 1,
               className: cellClasses,
-              style: {
-                minWidth: `calc(var(--a2-table-col-${cell.column.getIndex()}-size) * 1px)`,
-                ...getCommonPinningStyles(cell.column)
-              },
+              style: getCommonPinningStyles(cell.column),
               columnId: cell.column.id,
               cellPosition: {
                 rowIndex: sortedIndex + table.getHeaderGroups().length,
@@ -4214,7 +4213,7 @@ const DataTableBodyContent = ({
       {
         id: `${row.id}-sub-component`,
         "aria-hidden": !row.getIsExpanded(),
-        className: styles$8["data-table-body-row"],
+        className: styles$8["data-table-body-sub-component-row"],
         children: /* @__PURE__ */ jsx("div", { className: styles$8["data-table-body-sub-component-container"], children: /* @__PURE__ */ jsx(Flex, { className: styles$8["data-table-body-sub-component-content"], children: row.original.subComponent }) })
       }
     )
@@ -4225,20 +4224,8 @@ function DataTableBody(props) {
   return /* @__PURE__ */ jsx(TableBody, { type: "data-table", ...rest, children: /* @__PURE__ */ jsx(DataTableBodyContent, { table }) });
 }
 
-const getColSpanWidth = (colSpan, cellIndex) => {
-  let minWidth = `calc(var(--a2-table-col-${cellIndex}-size) * 1px)`;
-  if (colSpan > 1) {
-    const varsToAdd = Array.from(
-      { length: colSpan },
-      (_, i) => `var(--a2-table-col-${cellIndex + i}-size)`
-    );
-    minWidth = `calc((${varsToAdd.join(" + ")}) * 1px)`;
-  }
-  return minWidth;
-};
-
 const styles$7 = {
-	"table-footer": "_table-footer_hq77m_2"};
+	"table-footer": "_table-footer_9bv2z_2"};
 
 function TableFooter({ type, children, ...rest }) {
   const classes = cx(styles$7["table-footer"], rest.className);
@@ -4310,8 +4297,8 @@ function DataTableFooterCell(props) {
 }
 
 const styles$6 = {
-	"data-table-footer-row": "_data-table-footer-row_1nmuq_2",
-	"data-table-footer": "_data-table-footer_1nmuq_2"
+	"data-table-footer-row": "_data-table-footer-row_13en8_2",
+	"data-table-footer": "_data-table-footer_13en8_2"
 };
 
 function DefaultTableFooterRows({
@@ -4374,10 +4361,7 @@ function DefaultTableFooterRows({
           DataTableFooterCell,
           {
             className: getCommonPinningClasses(header.column),
-            style: {
-              minWidth: `calc(var(--a2-table-col-${header.column.getIndex()}-size) * 1px)`,
-              ...getCommonPinningStyles(header.column)
-            },
+            style: getCommonPinningStyles(header.column),
             cellPosition: {
               rowIndex: rowIndex + table.getHeaderGroups().length + table.getRowModel().rows.length,
               columnIndex: header.column.getIndex()
@@ -4415,16 +4399,13 @@ function CustomTableFooterRows({
             )
           }).map((_, index) => {
             const footer = footerRow[index] ?? { content: "", colSpan: 1 };
-            const minWidth = getColSpanWidth(
-              footer.colSpan,
-              currentColumnIndex
-            );
+            const gridColumn = footer.colSpan > 1 ? `span ${footer.colSpan}` : void 0;
             const cell = /* @__PURE__ */ jsx(
               DataTableFooterCell,
               {
                 colSpan: footer.colSpan,
                 style: {
-                  minWidth
+                  gridColumn
                 },
                 cellPosition: {
                   rowIndex: rowIndex + table.getHeaderGroups().length + table.getRowModel().rows.length,
@@ -5083,7 +5064,7 @@ const SvgArrowUpward = (props) => /* @__PURE__ */ React.createElement("svg", { x
 const SvgArrowDownward = (props) => /* @__PURE__ */ React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1em", height: "1em", viewBox: "0 0 24 24", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M11 5v11.17l-4.88-4.88c-.39-.39-1.03-.39-1.42 0a.996.996 0 0 0 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0l6.59-6.59a.996.996 0 1 0-1.41-1.41L13 16.17V5c0-.55-.45-1-1-1s-1 .45-1 1z" }));
 
 const styles$5 = {
-	"table-header": "_table-header_1pe38_2"
+	"table-header": "_table-header_y7cb1_2"
 };
 
 function TableHeader({ type, children, ...rest }) {
@@ -5133,16 +5114,27 @@ const TableHeaderCell = forwardRef(
 );
 TableHeaderCell.displayName = "TableHeaderCell";
 
-function DataTableHeaderCell(props) {
+function DataTableHeaderCellInner(props, forwardedRef) {
   const { cellPosition, children, header, className, ...rest } = props;
-  const headerCellRef = useRef(null);
+  const internalRef = useRef(null);
+  const setRefs = useCallback(
+    (element) => {
+      internalRef.current = element;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(element);
+      } else if (forwardedRef) {
+        forwardedRef.current = element;
+      }
+    },
+    [forwardedRef]
+  );
   const tableContext = useDataTableContext();
   useEffect(() => {
-    if (headerCellRef.current) {
+    if (internalRef.current) {
       const sortingHandler = header.column.columnDef.enableSorting ? header.column.getToggleSortingHandler() : void 0;
       tableContext.registerCell({
         position: cellPosition,
-        element: headerCellRef.current,
+        element: internalRef.current,
         isHeader: true,
         sortingHandler
       });
@@ -5178,7 +5170,7 @@ function DataTableHeaderCell(props) {
     {
       type: "data-table",
       ...rest,
-      ref: headerCellRef,
+      ref: setRefs,
       tabIndex,
       onFocus: handleFocus,
       onClick: handleClick,
@@ -5195,6 +5187,7 @@ function DataTableHeaderCell(props) {
     }
   );
 }
+const DataTableHeaderCell = forwardRef(DataTableHeaderCellInner);
 
 const resizing = "_resizing_spw3o_35";
 const styles$4 = {
@@ -5202,18 +5195,25 @@ const styles$4 = {
 	resizing: resizing
 };
 
-function ResizeHandle({ header }) {
+function ResizeHandle({
+  header,
+  onResizeStart
+}) {
   const classes = cx(styles$4["resize-handle"], {
     [styles$4["resizing"]]: header.column.getIsResizing()
   });
+  const handleResizeStart = (e) => {
+    onResizeStart?.();
+    header.getResizeHandler()(e);
+  };
   return /* @__PURE__ */ jsx(
     "div",
     {
       role: "button",
       tabIndex: -1,
       onDoubleClick: () => header.column.resetSize(),
-      onMouseDown: header.getResizeHandler(),
-      onTouchStart: header.getResizeHandler(),
+      onMouseDown: handleResizeStart,
+      onTouchStart: handleResizeStart,
       className: classes,
       "aria-label": "Resize column",
       "aria-pressed": header.column.getIsResizing(),
@@ -5223,11 +5223,27 @@ function ResizeHandle({ header }) {
 }
 
 const styles$3 = {
-	"data-table-header-row": "_data-table-header-row_blxpc_17"
+	"data-table-header-row": "_data-table-header-row_6qs0u_17"
 };
 
 function DataTableHeader({ table }) {
   const { setHoveredColumnId } = useDataTableContext();
+  const cellRefs = useRef(/* @__PURE__ */ new Map());
+  const createResizeStartHandler = useCallback(
+    (columnId) => () => {
+      const cellElement = cellRefs.current.get(columnId);
+      if (cellElement) {
+        const actualWidth = cellElement.getBoundingClientRect().width;
+        flushSync(() => {
+          table.setColumnSizing((prev) => ({
+            ...prev,
+            [columnId]: actualWidth
+          }));
+        });
+      }
+    },
+    [table]
+  );
   return /* @__PURE__ */ jsx(TableHeader, { type: "data-table", children: table.getHeaderGroups().map((headerGroup, index) => /* @__PURE__ */ jsx(
     "div",
     {
@@ -5238,17 +5254,21 @@ function DataTableHeader({ table }) {
         const isLastInParentGroup = header.column.parent ? header.column.parent.getLeafColumns().slice(-1)[0] === header.column : false;
         const isInternalSelectColumn = header.column.id === "a2-table-internal-select";
         const isInternalExpandColumn = header.column.id === "a2-table-internal-expand";
-        const minWidth = getColSpanWidth(
-          header.colSpan,
-          header.column.columns?.length > 0 ? header.column.columns[0].getIndex() : header.column.getIndex()
-        );
+        const gridColumn = header.colSpan > 1 ? `span ${header.colSpan}` : void 0;
         return /* @__PURE__ */ jsx(
           DataTableHeaderCell,
           {
             header: header.getContext(),
+            ref: (el) => {
+              if (el) {
+                cellRefs.current.set(header.column.id, el);
+              } else {
+                cellRefs.current.delete(header.column.id);
+              }
+            },
             className: getCommonPinningClasses(header.column),
             style: {
-              minWidth,
+              gridColumn,
               ...getCommonPinningStyles(header.column)
             },
             "aria-colspan": header.colSpan,
@@ -5282,7 +5302,15 @@ function DataTableHeader({ table }) {
                       desc: /* @__PURE__ */ jsx(Icon, { svg: SvgArrowDownward, size: "small" })
                     }[header.column.getIsSorted()] ?? null
                   ] }),
-                  header.column.columnDef.enableResizing && /* @__PURE__ */ jsx(ResizeHandle, { header })
+                  header.column.columnDef.enableResizing && /* @__PURE__ */ jsx(
+                    ResizeHandle,
+                    {
+                      header,
+                      onResizeStart: createResizeStartHandler(
+                        header.column.id
+                      )
+                    }
+                  )
                 ]
               }
             )
@@ -5575,6 +5603,8 @@ function DataTable(props) {
       tableColumns.unshift({
         id: "a2-table-internal-expand",
         size: 44,
+        maxSize: 44,
+        minSize: 44,
         header: ({ table: table2 }) => {
           return /* @__PURE__ */ jsx(Flex, { grow: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(
             Button,
@@ -5626,6 +5656,8 @@ function DataTable(props) {
       tableColumns.unshift({
         id: "a2-table-internal-select",
         size: 44,
+        maxSize: 44,
+        minSize: 44,
         header: ({ table: table2 }) => /* @__PURE__ */ jsx(Flex, { grow: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(
           Checkbox,
           {
@@ -5723,6 +5755,25 @@ function DataTable(props) {
   );
   const cssVars = useMemo(() => {
     const vars = {};
+    const leafHeaders = headers.filter(
+      (header) => header.subHeaders?.length === 0
+    );
+    const allHaveMaxWidth = leafHeaders.every(
+      (header) => header.column.columnDef.maxSize != null
+    );
+    const gridColumns = leafHeaders.map((header) => {
+      const columnId = header.column.id;
+      const hasBeenResized = columnId in columnSizing;
+      const currentSize = header.column.getSize();
+      if (hasBeenResized) {
+        return `${currentSize}px`;
+      }
+      const minSize = header.column.columnDef.minSize ?? currentSize;
+      const maxSize = header.column.columnDef.maxSize;
+      return `minmax(${minSize}px, ${maxSize ? `${maxSize}px` : "1fr"})`;
+    }).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];
       vars[`--a2-table-col-${header.column.getIndex()}-size`] = header.column.getSize();
@@ -5736,7 +5787,10 @@ function DataTable(props) {
     DataTableContainer,
     {
       ...rest,
-      style: styleCombined,
+      style: {
+        ...styleCombined,
+        width: cssVars["--a2-table-width"]
+      },
       background,
       className: pagination ? styles["container-with-pagination"] : void 0,
       children: [
@@ -5811,4 +5865,4 @@ function DataTable(props) {
 }
 
 export { DataTable as D, chipsFormatter as a, currencyFormatter as b, createColumnHelper$1 as c, percentFormatter as p };
-//# sourceMappingURL=DataTable-CUFa7cQK.js.map
+//# sourceMappingURL=DataTable-DQ9FFuV8.js.map