@servicetitan/anvil2 2.0.4 → 2.2.0

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

@@ -2,22 +2,24 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { C as Chip } from './Chip-Bc7jiIJ1.js';
 import { F as Flex } from './Flex-CUtXN-C0.js';
 import * as React from 'react';
-import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, Fragment as Fragment$1, useReducer } from 'react';
+import { useRef, useState, useLayoutEffect, createContext, useContext, useCallback, forwardRef, useMemo, useImperativeHandle, useEffect, useId, Fragment as Fragment$1, useReducer } from 'react';
 import { c as cx } from './index-SvGbrGuT.js';
 import { D as DateTime } from './luxon-wpz4A-OQ.js';
-import { C as Checkbox } from './Checkbox-ZXftLNwB.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 { 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 { m as mergeRefs } from './useMergeRefs-Dfmtq9cI.js';
-import { P as Popover } from './Popover-OOLK0hUz.js';
+import { P as Popover } from './Popover-4C5IVk8T.js';
 import { S as SearchField } from './SearchField-CoeaOip5.js';
-import { L as ListView } from './ListView-CtRhYAls.js';
+import { L as ListView } from './ListView-MMmJDM--.js';
 import { S as SvgError } from './error-DR_wWdYY.js';
-import { T as Tooltip } from './Tooltip-CUiAJXak.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                     */
@@ -402,22 +404,19 @@ function getColumnTypeDefaults(type) {
 }
 
 function logDeprecationWarnings(id, column) {
-  if (process.env.NODE_ENV === "production") {
-    return;
-  }
   const columnId = typeof id === "object" && "group" in id ? id.group : String(id);
   if ("editMode" in column && column.editMode && !("editConfig" in column && column.editConfig)) {
-    console.warn(
+    warnOnce(
       `[Anvil2 DataTable] Column "${columnId}" uses deprecated \`editMode\` prop. Migrate to \`editConfig: { mode: "${column.editMode}", onChange: ... }\``
     );
   }
   if ("onChange" in column && column.onChange && !("editConfig" in column && column.editConfig)) {
-    console.warn(
+    warnOnce(
       `[Anvil2 DataTable] Column "${columnId}" uses deprecated top-level \`onChange\`. Move \`onChange\` inside \`editConfig\`.`
     );
   }
   if ("options" in column && column.options && !("editConfig" in column && column.editConfig)) {
-    console.warn(
+    warnOnce(
       `[Anvil2 DataTable] Column "${columnId}" uses deprecated top-level \`options\`. Move \`options\` inside \`editConfig\`.`
     );
   }
@@ -431,9 +430,12 @@ function transformEditConfig(column) {
     editMode: editConfig.mode,
     onChange: editConfig.onChange
   };
-  if ("options" in editConfig) {
-    result.options = editConfig.options;
+  if (editConfig.mode === "select" || editConfig.mode === "multiselect") {
+    if ("options" in editConfig) {
+      result.options = editConfig.options;
+    }
   }
+  result.editConfig = editConfig;
   return result;
 }
 function createColumnHelper$1() {
@@ -4170,9 +4172,6 @@ function DataTableEditableTextCellInner(props, ref) {
       case "string":
         value = cellValue;
         break;
-      case "number":
-        value = String(cellValue);
-        break;
       case "boolean":
         value = String(cellValue);
         break;
@@ -4344,6 +4343,204 @@ const DataTableEditableTextCell = Object.assign(
   { displayName: "DataTableEditableTextCell" }
 );
 
+function DataTableEditableNumberCellInner(props, ref) {
+  const { cell, cellProps, cellPosition, children } = props;
+  const { onKeyDown: onCellKeyDown } = cellProps;
+  const cellRef = useRef(null);
+  const localInputRef = useRef(null);
+  const rowId = cell.row.id;
+  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 === "number") {
+      value = cellValue;
+    } else {
+      value = null;
+      isValid = false;
+    }
+    if (!isValid) {
+      logWarningForInvalidCellValueType({
+        columnId: String(columnId),
+        editMode: "number",
+        expectedType: "number",
+        receivedType: Array.isArray(cellValue) ? "array" : typeof cellValue
+      });
+    }
+    return [value, isValid];
+  }, [cellValue, columnId]);
+  const editConfig = cell.column.columnDef.meta?.editConfig;
+  const numberEditOptions = useMemo(() => {
+    if (editConfig && editConfig.mode === "number") {
+      const { mode: _, onChange: __, ...options } = editConfig;
+      return options;
+    }
+    return {};
+  }, [editConfig]);
+  const [draftValue, setDraftValue] = useState(initialValue);
+  const { inputRef: numberFieldInputRef, inputProps } = useNumberField({
+    value: draftValue,
+    onChange: setDraftValue,
+    ...numberEditOptions
+  });
+  const combinedInputRef = useMergeRefs([localInputRef, numberFieldInputRef]);
+  const [tabIndex, setTabIndex] = useState(-1);
+  const { moveFocusToCell } = useDTFocusDispatchContext();
+  const instructionsId = useId();
+  const headerLabel = cell.column.columnDef.meta?.columnDef?.headerLabel ?? String(columnId);
+  const inputAriaLabel = `${headerLabel}, row ${cellPosition.rowIndex + 1}`;
+  const skipCommitOnBlur = useRef(false);
+  const onChange = getCellOnChange(cell);
+  const commitValue = useCallback(() => {
+    if (draftValue !== initialValue) {
+      onChange?.(draftValue, rowId);
+    }
+    setIsEditing(false);
+  }, [rowId, draftValue, onChange, initialValue]);
+  const resetValue = useCallback(() => {
+    setDraftValue(initialValue);
+    skipCommitOnBlur.current = true;
+    cellRef.current?.focus();
+    setIsEditing(false);
+  }, [initialValue]);
+  const beginEditing = useCallback(() => {
+    setDraftValue(initialValue);
+    setIsEditing(true);
+  }, [initialValue]);
+  useImperativeHandle(ref, () => ({
+    invoke: beginEditing,
+    focus: () => {
+      cellRef.current?.focus();
+      setTabIndex(0);
+    }
+  }));
+  const handleInputKeyDown = useCallback(
+    (event) => {
+      if (event.key === "Enter" || event.key === "F2") {
+        event.preventDefault();
+        skipCommitOnBlur.current = true;
+        cellRef.current?.focus();
+        commitValue();
+        return;
+      } else if (event.key === "Escape") {
+        event.preventDefault();
+        resetValue();
+        return;
+      }
+    },
+    [commitValue, resetValue]
+  );
+  const handleInputBlur = useCallback(() => {
+    if (skipCommitOnBlur.current) {
+      skipCommitOnBlur.current = false;
+      return;
+    }
+    commitValue();
+  }, [commitValue]);
+  const classes = cx(
+    styles$a["data-table-body-cell-editable"],
+    cellProps.className,
+    {
+      [styles$9["data-table-body-cell-editing"]]: isEditing
+    }
+  );
+  const handleCellKeyDown = useCallback(
+    (event) => {
+      if (isEditing) {
+        return;
+      }
+      onCellKeyDown?.(event);
+    },
+    [onCellKeyDown, isEditing]
+  );
+  const handleCellFocus = useCallback(
+    (event) => {
+      if (event.target !== cellRef.current) {
+        return;
+      }
+      event.preventDefault();
+      setTabIndex(0);
+    },
+    [setTabIndex]
+  );
+  const handleCellBlur = useCallback(
+    (e) => {
+      if (cellRef.current?.contains(e.relatedTarget)) {
+        return;
+      }
+      setTabIndex(-1);
+    },
+    [setTabIndex, cellRef]
+  );
+  const handleCellMouseDown = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      beginEditing();
+      moveFocusToCell(cellPosition);
+    },
+    [beginEditing, cellPosition, moveFocusToCell]
+  );
+  const cellFocusContextValue = useMemo(
+    () => ({ isCellFocused: tabIndex === 0 && !isEditing }),
+    [tabIndex, isEditing]
+  );
+  useEffect(() => {
+    if (isEditing) {
+      localInputRef.current?.focus();
+    }
+  }, [isEditing]);
+  if (!isValidValueType) {
+    const { cellProps: _cellProps, ...immutableCellProps } = props;
+    return /* @__PURE__ */ jsx(DataTableBodyImmutableCell, { ...immutableCellProps });
+  }
+  return /* @__PURE__ */ jsxs(
+    TableBodyCell,
+    {
+      ref: cellRef,
+      type: "data-table",
+      className: classes,
+      style: cellProps.style,
+      onMouseDown: handleCellMouseDown,
+      onKeyDown: handleCellKeyDown,
+      tabIndex,
+      onFocus: handleCellFocus,
+      onBlur: handleCellBlur,
+      "data-cell-pos": formatCellPositionString(cellPosition),
+      children: [
+        isEditing ? /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: combinedInputRef,
+            ...inputProps,
+            name: `${cell.column.id}-row-${cellPosition.rowIndex}`,
+            "aria-label": inputAriaLabel,
+            "aria-describedby": instructionsId,
+            className: styles$a["data-table-body-cell-input"],
+            onBlur: handleInputBlur,
+            onKeyDown: handleInputKeyDown
+          }
+        ) }) : /* @__PURE__ */ jsxs(CellFocusContext.Provider, { value: cellFocusContextValue, children: [
+          children,
+          !isEditing && /* @__PURE__ */ jsx(DataTableEditableCellEditIcon, {})
+        ] }),
+        /* @__PURE__ */ jsx(SrOnly, { id: instructionsId, children: isEditing ? "Press Enter or F2 to save cell value." : "Press Enter or F2 to edit cell value. Press Escape to cancel." })
+      ]
+    }
+  );
+}
+const DataTableEditableNumberCell = Object.assign(
+  forwardRef(DataTableEditableNumberCellInner),
+  { displayName: "DataTableEditableNumberCell" }
+);
+
 function DataTableEditableSelectCellInner(props, ref) {
   const { cell, cellProps, cellPosition, children } = props;
   const { onKeyDown: onCellKeyDown } = cellProps;
@@ -4890,6 +5087,9 @@ function DataTableBodyMutableCell(props) {
     if (editMode === "text") {
       return DataTableEditableTextCell;
     }
+    if (editMode === "number") {
+      return DataTableEditableNumberCell;
+    }
     if (editMode === "select") {
       return DataTableEditableSelectCell;
     }
@@ -5384,7 +5584,10 @@ function getTanStackColumnDef({
     cell: (info) => {
       let cellContent;
       if (resolvedRenderCell) {
-        cellContent = resolvedRenderCell(info.getValue(), info.row.depth);
+        cellContent = resolvedRenderCell(info.getValue(), {
+          row: info.row.original,
+          depth: info.row.depth
+        });
       } else {
         cellContent = info.getValue();
       }
@@ -5417,6 +5620,7 @@ function getTanStackColumnDef({
     enableSorting: !!columnDef.sortable,
     meta: {
       editMode: columnDef.editMode,
+      editConfig: columnDef.editConfig,
       onChange: columnDef.onChange,
       options: columnDef.options,
       columnDef
@@ -6633,4 +6837,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-CQpySyDq.js.map
+//# sourceMappingURL=DataTable-D30sE1Xt.js.map