@servicetitan/anvil2 2.2.0 → 2.4.0

package/dist/Combobox.js

@@ -1,3 +1,3 @@
-export { C as Combobox, a as ComboboxElement, c as ComboboxList, b as ComboboxSelect, C as default } from './Combobox-CSGn20KQ.js';
+export { C as Combobox, a as ComboboxElement, c as ComboboxList, b as ComboboxSelect, C as default } from './Combobox-Drqb3GVU.js';
 export { u as useInfiniteCombobox } from './useInfiniteCombobox-WcRgC9p6.js';
 //# sourceMappingURL=Combobox.js.map

package/dist/{DataTable-D30sE1Xt.js → DataTable-BLuJ4FtH.js}

@@ -6,26 +6,28 @@ import { useRef, useState, useLayoutEffect, createContext, useContext, useCallba
 import { c as cx } from './index-SvGbrGuT.js';
 import { D as DateTime } from './luxon-wpz4A-OQ.js';
 import { a as warnOnce } from './utils-pudAMGnO.js';
-import { C as Checkbox } from './Checkbox-DuzAqrE7.js';
-import { B as Button } from './Button-l7pTJdPc.js';
+import { C as Checkbox } from './Checkbox-CFgjreAl.js';
+import { B as Button } from './Button-DrNDkO2f.js';
 import { S as SvgChevronRight } from './chevron_right-BdpsxX7x.js';
 import { S as SvgEdit } from './edit-DQOiktcu.js';
 import { I as Icon } from './Icon-Bcil6aBo.js';
 import { S as SrOnly } from './SrOnly-CrdBTl6E.js';
 import { u as useNumberField } from './useNumberField-eMyk7MB8.js';
 import { u as useMergeRefs, m as mergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { M as Menu } from './Menu-3LIfRdTk.js';
-import { P as Popover } from './Popover-4C5IVk8T.js';
-import { S as SearchField } from './SearchField-CoeaOip5.js';
-import { L as ListView } from './ListView-MMmJDM--.js';
+import { M as Menu } from './Menu-CpRnsr0v.js';
+import { P as Popover } from './Popover-CYWYCj7l.js';
+import { S as SearchField } from './SearchField-CtdtcrVV.js';
+import { L as ListView } from './ListView-CN8zu-cq.js';
 import { S as SvgError } from './error-DR_wWdYY.js';
 import { T as Tooltip } from './Tooltip-Bt62hC5J.js';
 import { flushSync } from 'react-dom';
 import { u as useLayoutPropsUtil } from './useLayoutPropsUtil-loxbyklF.js';
 import './anvil-fonts.css';import './DataTable.css';/* empty css                     */
-import { P as Pagination } from './Pagination-DIatYUXX.js';
+import { P as Pagination } from './Pagination-BuiyhZlJ.js';
+import { T as ThemeProviderContext } from './ThemeProviderContext-l52GohYT.js';
 import { S as Spinner } from './Spinner-CpEm3Lud.js';
 import { u as useOptionallyControlledState } from './useOptionallyControlledState-DbDuos5L.js';
+import { u as usePrefersColorScheme } from './usePrefersColorScheme-_hT7dK7_.js';
 
 const booleanFormatter = (value, { trueLabel = "True", falseLabel = "False" } = {}) => {
   if (value == null) {
@@ -4161,34 +4163,19 @@ function DataTableEditableTextCellInner(props, ref) {
   const columnId = getColumnId(cell);
   const cellValue = getCellValue(cell);
   const [initialValue, isValidValueType] = useMemo(() => {
-    let value;
-    let isValid = true;
     if (cellValue === void 0 || cellValue === null) {
-      value = "";
-      isValid = true;
-      return [value, isValid];
-    }
-    switch (typeof cellValue) {
-      case "string":
-        value = cellValue;
-        break;
-      case "boolean":
-        value = String(cellValue);
-        break;
-      default:
-        value = "";
-        isValid = false;
-        break;
+      return ["", true];
     }
-    if (!isValid) {
-      logWarningForInvalidCellValueType({
-        columnId: String(columnId),
-        editMode: "text",
-        expectedType: "string",
-        receivedType: Array.isArray(cellValue) ? "array" : typeof cellValue
-      });
+    if (typeof cellValue === "string") {
+      return [cellValue, true];
     }
-    return [value, isValid];
+    logWarningForInvalidCellValueType({
+      columnId: String(columnId),
+      editMode: "text",
+      expectedType: "string",
+      receivedType: Array.isArray(cellValue) ? "array" : typeof cellValue
+    });
+    return ["", false];
   }, [cellValue, columnId]);
   const [draftValue, setDraftValue] = useState(initialValue);
   const [tabIndex, setTabIndex] = useState(-1);
@@ -5020,6 +5007,231 @@ const DataTableEditableMultiselectCell = Object.assign(
   { displayName: "DataTableEditableMultiselectCell" }
 );
 
+function DataTableEditableBooleanCellInner(props, ref) {
+  const { cell, cellProps, cellPosition, children } = props;
+  const { onKeyDown: onCellKeyDown } = cellProps;
+  const [isEditing, setIsEditing] = useState(false);
+  const columnId = getColumnId(cell);
+  const cellValue = getCellValue(cell);
+  const [initialValue, isValidValueType] = useMemo(() => {
+    let value;
+    let isValid = true;
+    if (cellValue === void 0 || cellValue === null) {
+      value = null;
+      isValid = true;
+      return [value, isValid];
+    }
+    if (typeof cellValue === "boolean") {
+      value = cellValue;
+    } else {
+      value = null;
+      isValid = false;
+    }
+    if (!isValid) {
+      logWarningForInvalidCellValueType({
+        columnId: String(columnId),
+        editMode: "boolean",
+        expectedType: "boolean",
+        receivedType: Array.isArray(cellValue) ? "array" : typeof cellValue
+      });
+    }
+    return [value, isValid];
+  }, [cellValue, columnId]);
+  const options = useMemo(() => {
+    const editConfig = cell.column.columnDef.meta?.editConfig;
+    const config = editConfig?.mode === "boolean" ? editConfig : {
+      trueLabel: void 0,
+      falseLabel: void 0,
+      allowNull: false,
+      nullLabel: void 0
+    };
+    const typeConfig = cell.column.columnDef.meta?.columnDef?.type;
+    const typeOptions = typeof typeConfig === "object" && typeConfig.type === "boolean" ? typeConfig.options : void 0;
+    const items = [
+      {
+        value: true,
+        label: config.trueLabel ?? typeOptions?.trueLabel ?? "True"
+      },
+      {
+        value: false,
+        label: config.falseLabel ?? typeOptions?.falseLabel ?? "False"
+      }
+    ];
+    if (config.allowNull) {
+      items.push({ value: null, label: config.nullLabel ?? "Unset" });
+    }
+    return items;
+  }, [
+    cell.column.columnDef.meta?.editConfig,
+    cell.column.columnDef.meta?.columnDef?.type
+  ]);
+  const [tabIndex, setTabIndex] = useState(-1);
+  const { moveFocusToCell } = useDTFocusDispatchContext();
+  const cellRef = useRef(null);
+  const rowId = cell.row.id;
+  const menuElement = useRef(null);
+  useImperativeHandle(ref, () => ({
+    invoke: beginEditing,
+    focus: () => {
+      cellRef.current?.focus();
+      setTabIndex(0);
+    }
+  }));
+  const beginEditing = useCallback(() => {
+    setIsEditing(true);
+  }, [setIsEditing]);
+  const stopEditing = useCallback(() => {
+    setIsEditing(false);
+  }, [setIsEditing]);
+  const onChange = getCellOnChange(cell);
+  const commitValue = useCallback(
+    (value) => {
+      if (value !== initialValue) {
+        onChange?.(value, rowId);
+      }
+      stopEditing();
+    },
+    [rowId, onChange, initialValue, stopEditing]
+  );
+  const cellClasses = cx(
+    styles$a["data-table-body-cell-editable"],
+    cellProps.className,
+    { [styles$9["data-table-body-cell-editing"]]: isEditing }
+  );
+  const handleCellKeyDown = useCallback(
+    (event, handleMenuKeydown) => {
+      if (isEditing) {
+        if (event.key === "Escape" || event.key === "F2") {
+          stopEditing();
+          return;
+        }
+        handleMenuKeydown?.(event);
+        return;
+      }
+      onCellKeyDown?.(event);
+    },
+    [onCellKeyDown, isEditing, stopEditing]
+  );
+  const handleOutsidePress = useCallback(() => {
+    stopEditing();
+    setTabIndex(-1);
+  }, [stopEditing]);
+  const handleCellMouseDown = useCallback(() => {
+    if (isEditing) {
+      stopEditing();
+      return;
+    }
+    moveFocusToCell(cellPosition);
+    beginEditing();
+  }, [beginEditing, cellPosition, moveFocusToCell, isEditing, stopEditing]);
+  const handleCellBlur = useCallback(
+    (e) => {
+      if (menuElement.current?.contains(e.relatedTarget)) {
+        return;
+      }
+      setTabIndex(-1);
+      stopEditing();
+    },
+    [setTabIndex, menuElement, stopEditing]
+  );
+  const handleCellFocus = useCallback(
+    (event) => {
+      if (event.target !== cellRef.current) {
+        return;
+      }
+      event.preventDefault();
+      setTabIndex(0);
+    },
+    [setTabIndex]
+  );
+  const handleMenuItemClick = useCallback(
+    (value) => {
+      commitValue(value);
+    },
+    [commitValue]
+  );
+  const handleMenuItemKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Escape" || event.key === "F2") {
+        cellRef.current?.focus();
+        stopEditing();
+      }
+    },
+    [stopEditing]
+  );
+  const cellFocusContextValue = useMemo(
+    () => ({ isCellFocused: tabIndex === 0 && !isEditing }),
+    [tabIndex, isEditing]
+  );
+  if (!isValidValueType) {
+    const { cellProps: _cellProps, ...immutableCellProps } = props;
+    return /* @__PURE__ */ jsx(DataTableBodyImmutableCell, { ...immutableCellProps });
+  }
+  return /* @__PURE__ */ jsx(
+    Menu,
+    {
+      open: isEditing,
+      onOutsidePress: handleOutsidePress,
+      trigger: ({
+        ref: triggerRef,
+        onKeyDown: menuOnTriggerKeydown,
+        ["aria-controls"]: triggerAriaControls,
+        ["aria-expanded"]: triggerAriaExpanded,
+        ["aria-haspopup"]: triggerAriaHaspopup,
+        ["data-open"]: triggerDataOpen,
+        ["data-state"]: triggerDataState
+      }) => {
+        menuElement.current = document.querySelector(`#${triggerAriaControls}`) || null;
+        return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
+          TableBodyCell,
+          {
+            ref: mergeRefs([
+              triggerRef,
+              cellRef
+            ]),
+            tabIndex,
+            type: "data-table",
+            ...cellProps,
+            className: cellClasses,
+            onMouseDown: handleCellMouseDown,
+            onBlur: handleCellBlur,
+            onFocus: handleCellFocus,
+            "data-cell-pos": formatCellPositionString(cellPosition),
+            "aria-controls": triggerAriaControls,
+            "aria-expanded": triggerAriaExpanded,
+            "aria-haspopup": triggerAriaHaspopup,
+            "data-open": triggerDataOpen,
+            "data-state": triggerDataState,
+            onKeyDown: (e) => handleCellKeyDown(e, menuOnTriggerKeydown),
+            children: [
+              /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
+                children,
+                !isEditing && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
+              ] }),
+              /* @__PURE__ */ jsx(SrOnly, { children: isEditing ? "Press Enter or Space to select a cell value. Press Escape or F2 to cancel." : "Press Enter or F2 to edit cell value." })
+            ]
+          }
+        ) });
+      },
+      children: isEditing && options.map((item) => {
+        return /* @__PURE__ */ jsx(
+          Menu.Item,
+          {
+            label: item.label,
+            onClick: () => handleMenuItemClick(item.value),
+            onKeyDown: handleMenuItemKeyDown
+          },
+          String(item.value)
+        );
+      })
+    }
+  );
+}
+const DataTableEditableBooleanCell = Object.assign(
+  forwardRef(DataTableEditableBooleanCellInner),
+  { displayName: "DataTableEditableBooleanCell" }
+);
+
 function DataTableBodyMutableCell(props) {
   const { cell, cellPosition, children, isHovered, ...rest } = props;
   const editableCellRef = useRef(null);
@@ -5096,6 +5308,9 @@ function DataTableBodyMutableCell(props) {
     if (editMode === "multiselect") {
       return DataTableEditableMultiselectCell;
     }
+    if (editMode === "boolean") {
+      return DataTableEditableBooleanCell;
+    }
   }, [editMode]);
   if (!EditableComponent) {
     return null;
@@ -5755,12 +5970,13 @@ function DataTableHeaderCellInner(props, forwardedRef) {
         }
         case " ":
         case "Enter": {
-          if (isSelectCell) {
+          const isDisabled = header.column.columnDef.meta?.disableHeaderAction;
+          if (isSelectCell && !isDisabled) {
             event.preventDefault();
             header.table.toggleAllRowsSelected();
             return;
           }
-          if (isExpandCell) {
+          if (isExpandCell && !isDisabled) {
             event.preventDefault();
             header.table.toggleAllRowsExpanded();
             return;
@@ -6051,11 +6267,12 @@ const DataTablePagination = ({
   );
 };
 
-const expanded = "_expanded_1r902_17";
+const expanded = "_expanded_1shcm_21";
 const styles = {
-	"container-with-pagination": "_container-with-pagination_1r902_2",
-	"footer-with-pagination": "_footer-with-pagination_1r902_5",
-	"expand-button": "_expand-button_1r902_8",
+	"container-with-pagination": "_container-with-pagination_1shcm_2",
+	"footer-with-pagination": "_footer-with-pagination_1shcm_5",
+	"empty-state-container": "_empty-state-container_1shcm_8",
+	"expand-button": "_expand-button_1shcm_12",
 	expanded: expanded
 };
 
@@ -6371,6 +6588,8 @@ function DataTableInner(props, ref) {
     defaultExpandedRowIds,
     defaultSelectedRowIds,
     defaultSortedColumn,
+    disableExpandAll,
+    disableSelectAll,
     expandedRowIds,
     isSelectable,
     onSelectRow,
@@ -6379,6 +6598,7 @@ function DataTableInner(props, ref) {
     pagination,
     selectedRowIds,
     sortedColumn,
+    emptyState,
     className,
     style,
     ...rest
@@ -6550,7 +6770,9 @@ function DataTableInner(props, ref) {
         size: 44,
         maxSize: 44,
         minSize: 44,
+        meta: { disableHeaderAction: disableExpandAll },
         header: ({ table: table2 }) => {
+          if (disableExpandAll) return null;
           return /* @__PURE__ */ jsx(Flex, { grow: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(
             Button,
             {
@@ -6609,17 +6831,21 @@ function DataTableInner(props, ref) {
         size: 44,
         maxSize: 44,
         minSize: 44,
-        header: ({ table: table2 }) => /* @__PURE__ */ jsx(Flex, { grow: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(
-          Checkbox,
-          {
-            tabIndex: -1,
-            "aria-label": table2.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
-            checked: table2.getIsAllRowsSelected(),
-            indeterminate: table2.getIsSomeRowsSelected(),
-            onChange: table2.getToggleAllRowsSelectedHandler(),
-            "data-cell-action": "select"
-          }
-        ) }),
+        meta: { disableHeaderAction: disableSelectAll },
+        header: ({ table: table2 }) => {
+          if (disableSelectAll) return null;
+          return /* @__PURE__ */ jsx(Flex, { grow: 1, justifyContent: "center", children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              tabIndex: -1,
+              "aria-label": table2.getIsAllRowsSelected() ? "Deselect all rows" : "Select all rows",
+              checked: table2.getIsAllRowsSelected(),
+              indeterminate: table2.getIsSomeRowsSelected(),
+              onChange: table2.getToggleAllRowsSelectedHandler(),
+              "data-cell-action": "select"
+            }
+          ) });
+        },
         cell: ({ row }) => {
           if (row.getParentRow()?.getCanExpand() && isSelectable) {
             return null;
@@ -6640,7 +6866,15 @@ function DataTableInner(props, ref) {
       });
     }
     return tableColumns;
-  }, [columnsProp, hasRowErrors, hasSubComponent, isExpandable, isSelectable]);
+  }, [
+    columnsProp,
+    disableExpandAll,
+    disableSelectAll,
+    hasRowErrors,
+    hasSubComponent,
+    isExpandable,
+    isSelectable
+  ]);
   const table = useReactTable({
     data: tableData ?? [],
     columns,
@@ -6708,6 +6942,16 @@ function DataTableInner(props, ref) {
     () => bodyRowCount + headerRowCount + footerLength,
     [bodyRowCount, headerRowCount, footerLength]
   );
+  const isEmpty = !isLoading && (!tableData || tableData.length === 0);
+  const { mode: themeMode } = useContext(ThemeProviderContext);
+  const { mode: sysMode } = usePrefersColorScheme();
+  const colorSchemeMode = themeMode ?? sysMode;
+  const EmptyStateSvg = (() => {
+    const svg = emptyState?.svg;
+    if (!svg) return void 0;
+    if (typeof svg === "function") return svg;
+    return colorSchemeMode === "dark" ? svg.dark ?? svg.light : svg.light ?? svg.dark;
+  })();
   const cssVars = useMemo(() => {
     const vars = {};
     const leafHeaders = headers.filter(
@@ -6770,6 +7014,22 @@ function DataTableInner(props, ref) {
                 children: [
                   /* @__PURE__ */ jsx(DataTableHeader, { table }),
                   /* @__PURE__ */ jsx(DataTableBody, { table, hasSubRows }),
+                  isEmpty && emptyState && /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx(SrOnly, { children: "No data to display." }),
+                    /* @__PURE__ */ jsx("div", { className: styles["empty-state-container"], children: /* @__PURE__ */ jsxs(
+                      Flex,
+                      {
+                        justifyContent: "center",
+                        alignItems: "center",
+                        direction: "column",
+                        gap: 2,
+                        children: [
+                          EmptyStateSvg && /* @__PURE__ */ jsx(EmptyStateSvg, { "aria-hidden": "true" }),
+                          emptyState.content
+                        ]
+                      }
+                    ) })
+                  ] }),
                   isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
                     /* @__PURE__ */ jsx(SrOnly, { children: "Loading data. Please wait." }),
                     /* @__PURE__ */ jsx(
@@ -6837,4 +7097,4 @@ 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-D30sE1Xt.js.map
+//# sourceMappingURL=DataTable-BLuJ4FtH.js.map