@osdk/react-components 0.2.0-beta.10 → 0.2.0-beta.12

package/build/browser/styles.css

@@ -2217,8 +2217,36 @@
 
 
 /* object-table/EditableCell.module.css */
-.EditableCell-module__osdkEditableInput___2BjN5Q4P:focus {
-  outline: none;
+.EditableCell-module__osdkEditableInput___2BjN5Q4P {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
+  width: 100%;
+  border-radius: var(--osdk-surface-border-radius);
+  border: var(--osdk-surface-border-width) solid transparent;
+  background: inherit;
+
+  tr[data-focused="true"] & {
+    border: var(--osdk-table-cell-editable-border);
+    background: var(--osdk-table-cell-editable-bg);
+
+    &.EditableCell-module__osdkEditedInput___HxzrAqJz {
+      border: var(--osdk-table-cell-edited-border);
+    }
+
+    &:focus,
+    &.EditableCell-module__osdkEditedInput___HxzrAqJz:focus {
+      border: var(--osdk-emphasis-focus-width) solid
+        var(--osdk-emphasis-focus-color);
+    }
+  }
+}
+
+.EditableCell-module__osdkEditedInput___HxzrAqJz {
+  border: var(--osdk-table-cell-edited-border);
+  background: var(--osdk-table-cell-editable-bg);
 }
 
 
@@ -2540,14 +2568,6 @@
   min-width: 100%;
 }
 
-.Table-module__submitButtonContainer___2UgcHhXl {
-  background-color: var(--osdk-surface-background-color-default-rest);
-  border-top: var(--osdk-table-border);
-  padding: var(--osdk-table-button-container-padding);
-  display: flex;
-  justify-content: flex-end;
-}
-
 
 /* object-table/TableBody.module.css */
 /*
@@ -2636,14 +2656,6 @@
   padding: 0;
 }
 
-/* Show focus state for editable cells */
-.TableCell-module__osdkTableCell___gVl6jToJ:not(:has([role="checkbox"])):has(input):focus-within {
-  border: var(--osdk-emphasis-focus-width) solid
-    var(--osdk-emphasis-focus-color);
-  border-radius: var(--osdk-surface-border-radius);
-  background-color: var(--osdk-table-cell-editable-bg);
-}
-
 .TableCell-module__osdkTableCellContent___tcj6DRaU:not(:has([role="checkbox"])) {
   overflow: hidden;
   text-overflow: ellipsis;
@@ -2660,6 +2672,53 @@
 }
 
 
+/* object-table/TableEditContainer.module.css */
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.TableEditContainer-module__tableEditContainer___cIVjgtld {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: var(--osdk-surface-background-color-default-rest);
+  border-top: var(--osdk-table-border);
+  padding: var(--osdk-table-edit-container-padding);
+  min-height: var(--osdk-table-edit-container-min-height);
+}
+
+.TableEditContainer-module__placeholder___ggxoxvTp {
+  color: var(--osdk-typography-color-muted);
+  font-size: var(--osdk-typography-size-body-small);
+  padding: calc(var(--osdk-surface-spacing) * 2) 0;
+}
+
+.TableEditContainer-module__modificationCount___sLN93v77 {
+  color: var(--osdk-intent-primary-rest);
+  font-size: var(--osdk-typography-size-body-small);
+  padding: calc(var(--osdk-surface-spacing) * 2) 0;
+}
+
+.TableEditContainer-module__editButtons___xI-Z7kz1 {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  flex: 1;
+}
+
+
 /* object-table/TableHeader.module.css */
 /*
  * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
@@ -2996,7 +3055,8 @@
     border-bottom-color: var(--osdk-table-row-border-color-hover);
   }
 
-  &[data-selected="true"] {
+  &[data-selected="true"],
+  &[data-focused="true"] {
     z-index: 2;
     background-color: var(--osdk-table-row-bg-active);
     border-top-color: var(--osdk-table-row-border-color-active);

package/build/cjs/public/experimental.cjs

@@ -2780,12 +2780,15 @@ function parseValueByType(value, dataType) {
   }
   return parsedNumber;
 }
-function EditableCell({
+function EditableCellInner({
   initialValue,
   currentValue,
   cellId,
   dataType,
-  onCellEdit
+  onCellEdit,
+  originalRowData,
+  rowId,
+  columnId
 }) {
   const [inputValue, setInputValue] = React21.useState(valueToString(currentValue));
   const isCancelled = React21.useRef(false);
@@ -2798,11 +2801,14 @@ function EditableCell({
       return;
     }
     const parsedValue = parseValueByType(inputValue, dataType);
-    onCellEdit?.(cellId, {
+    onCellEdit(cellId, {
+      rowId,
+      columnId,
       newValue: parsedValue,
-      oldValue: initialValue
+      oldValue: initialValue,
+      originalRowData
     });
-  }, [inputValue, initialValue, onCellEdit, cellId, dataType]);
+  }, [inputValue, initialValue, onCellEdit, cellId, dataType, rowId, columnId, originalRowData]);
   const handleChange = React21.useCallback((value) => {
     setInputValue(value);
   }, []);
@@ -2817,8 +2823,11 @@ function EditableCell({
     }
   }, [currentValue]);
   const inputType = dataType && NUMBER_TYPES.includes(dataType) ? "number" : "text";
+  const isEdited = currentValue !== initialValue;
   return /* @__PURE__ */ React21__default.default.createElement(input.Input, {
-    className: EditableCell_default.osdkEditableInput,
+    className: classnames7__default.default(EditableCell_default.osdkEditableInput, {
+      [EditableCell_default.osdkEditedInput]: isEdited
+    }),
     type: inputType,
     value: inputValue,
     onValueChange: handleChange,
@@ -2826,24 +2835,18 @@ function EditableCell({
     onKeyDown: handleKeyDown
   });
 }
+var EditableCell = /* @__PURE__ */ React21__default.default.memo(EditableCellInner);
 
 // src/object-table/utils/getCellId.ts
 function getCellId(cellIdentifier) {
   return JSON.stringify(cellIdentifier);
 }
-function getCellIdentifier(cellId) {
-  const parsed = JSON.parse(cellId);
-  if (typeof parsed === "object" && parsed != null && "rowId" in parsed && "columnId" in parsed) {
-    return parsed;
-  }
-  throw new Error("Parsed cellId does not have required properties");
-}
 
 // src/object-table/DefaultCellRenderer.tsx
 function renderDefaultCell(cellContext) {
   const meta = cellContext.table.options.meta;
   const columnMeta = cellContext.column.columnDef.meta;
-  if (!columnMeta?.editable || !meta?.onCellEdit) {
+  if (!columnMeta?.editable || !meta?.onCellEdit || !meta?.isInEditMode) {
     return /* @__PURE__ */ React21__default.default.createElement(React21__default.default.Fragment, null, cellContext.getValue());
   }
   const rowId = cellContext.row.id;
@@ -2860,7 +2863,10 @@ function renderDefaultCell(cellContext) {
     currentValue,
     cellId,
     dataType: columnMeta?.dataType,
-    onCellEdit: meta.onCellEdit
+    onCellEdit: meta.onCellEdit,
+    originalRowData: cellContext.row.original,
+    rowId,
+    columnId
   });
 }
 
@@ -3100,13 +3106,14 @@ var getColumnOrder = (allColumns) => {
   return allColumns.map((col) => col.id ?? col.accessorKey).filter((id) => id != null);
 };
 function useEditableTable({
+  editMode = "manual",
   onCellValueChanged,
   onSubmitEdits
 }) {
+  const [isActive, setActive] = React21.useState(editMode === "always");
   const [cellEdits, setCellEdits] = React21.useState({});
-  const handleCellEdit = React21.useCallback((cellId, state) => {
-    const cellIdentifier = getCellIdentifier(cellId);
-    if (state.newValue === state.oldValue) {
+  const handleCellEdit = React21.useCallback((cellId, info) => {
+    if (info.newValue === info.oldValue) {
       setCellEdits((prev) => {
         const {
           [cellId]: _,
@@ -3117,22 +3124,32 @@ function useEditableTable({
     } else {
       setCellEdits((prev) => ({
         ...prev,
-        [cellId]: state
+        [cellId]: info
       }));
     }
-    onCellValueChanged?.(cellIdentifier, state);
+    onCellValueChanged?.(info);
   }, [onCellValueChanged]);
   const clearEdits = React21.useCallback(() => {
     setCellEdits({});
   }, []);
   const handleSubmitEdits = React21.useCallback(async () => {
-    await onSubmitEdits?.(cellEdits);
+    const edits = Object.values(cellEdits);
+    return onSubmitEdits ? onSubmitEdits(edits) : false;
   }, [cellEdits, onSubmitEdits]);
+  const editModeConfig = editMode === "always" ? {
+    type: "always",
+    isActive: true
+  } : {
+    type: "manual",
+    isActive,
+    setActive
+  };
   return {
     cellEdits,
-    handleCellEdit,
-    handleSubmitEdits,
-    clearEdits
+    onCellEdit: handleCellEdit,
+    onSubmitEdits: onSubmitEdits ? handleSubmitEdits : void 0,
+    clearEdits,
+    editMode: editModeConfig
   };
 }
 var PAGE_SIZE = 50;
@@ -3181,7 +3198,6 @@ function useObjectTableData(objectOrInterfaceType, columnDefinitions, filter, so
     enabled: !shouldUseObjectSet
   });
   if (shouldUseObjectSet) {
-    console.debug("Using useObjectSet for data fetching in ObjectTable because objectSet is provided and objectType is an object.");
     return {
       data: objectSetResult.data,
       fetchMore: objectSetResult.fetchMore,
@@ -3192,7 +3208,6 @@ function useObjectTableData(objectOrInterfaceType, columnDefinitions, filter, so
       // ObjectSet doesn't support optimistic updates
     };
   }
-  console.debug("Using useOsdkObjects for data fetching in ObjectTable because objectSet is not provided or objectType is an interface.");
   return osdkObjectsResult;
 }
 
@@ -3474,29 +3489,6 @@ function convertSortingStateToOrderBy(sorting) {
   }));
 }
 
-// src/base-components/action-button/ActionButton.module.css
-var ActionButton_default = {};
-
-// src/base-components/action-button/ActionButton.tsx
-function _extends8() {
-  return _extends8 = Object.assign ? Object.assign.bind() : function(n) {
-    for (var e = 1; e < arguments.length; e++) {
-      var t = arguments[e];
-      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-    }
-    return n;
-  }, _extends8.apply(null, arguments);
-}
-function ActionButton({
-  variant = "secondary",
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ React21__default.default.createElement(button.Button, _extends8({
-    className: classnames7__default.default(ActionButton_default.button, variant === "primary" ? ActionButton_default.primaryButton : ActionButton_default.secondaryButton, className)
-  }, rest));
-}
-
 // src/object-table/LoadingCell.module.css
 var LoadingCell_default = {};
 
@@ -3548,6 +3540,29 @@ function LoadingRow({
 // src/object-table/TableBody.module.css
 var TableBody_default = {};
 
+// src/base-components/action-button/ActionButton.module.css
+var ActionButton_default = {};
+
+// src/base-components/action-button/ActionButton.tsx
+function _extends8() {
+  return _extends8 = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends8.apply(null, arguments);
+}
+function ActionButton({
+  variant = "secondary",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ React21__default.default.createElement(button.Button, _extends8({
+    className: classnames7__default.default(ActionButton_default.button, variant === "primary" ? ActionButton_default.primaryButton : ActionButton_default.secondaryButton, className)
+  }, rest));
+}
+
 // src/base-components/dialog/Dialog.module.css
 var Dialog_default = {};
 
@@ -4646,17 +4661,24 @@ function TableCell({
 }
 
 // src/object-table/TableRow.tsx
-function TableRow({
+function TableRowInner({
   row,
   virtualRow,
   onRowClick,
-  renderCellContextMenu
+  renderCellContextMenu,
+  focusedRowId,
+  setFocusedRowId,
+  isInEditMode
 }) {
   const handleClick = React21.useCallback(() => {
-    onRowClick?.(row.original);
-  }, [onRowClick, row.original]);
+    setFocusedRowId?.(row.id);
+    if (!isInEditMode) {
+      onRowClick?.(row.original);
+    }
+  }, [isInEditMode, onRowClick, row.original, row.id, setFocusedRowId]);
   return /* @__PURE__ */ React21__default.default.createElement("tr", {
     "data-selected": row.getIsSelected(),
+    "data-focused": focusedRowId === row.id,
     className: TableRow_default.osdkTableRow,
     style: {
       height: `${virtualRow.size}px`,
@@ -4669,6 +4691,7 @@ function TableRow({
     renderCellContextMenu
   })));
 }
+var TableRow = /* @__PURE__ */ React21__default.default.memo(TableRowInner);
 
 // src/object-table/TableBody.tsx
 function TableBody({
@@ -4678,7 +4701,10 @@ function TableBody({
   renderCellContextMenu,
   rowHeight = 40,
   isLoadingMore = false,
-  headerGroups = []
+  headerGroups = [],
+  focusedRowId,
+  setFocusedRowId,
+  isInEditMode
 }) {
   const rowVirtualizer = reactVirtual.useVirtualizer({
     count: rows.length,
@@ -4704,7 +4730,10 @@ function TableBody({
       row,
       virtualRow,
       onRowClick,
-      renderCellContextMenu
+      renderCellContextMenu,
+      focusedRowId,
+      setFocusedRowId,
+      isInEditMode
     });
   }), isLoadingMore && /* @__PURE__ */ React21__default.default.createElement(LoadingRow, {
     headers,
@@ -4714,6 +4743,70 @@ function TableBody({
   }));
 }
 
+// src/object-table/TableEditContainer.module.css
+var TableEditContainer_default = {};
+
+// src/object-table/TableEditContainer.tsx
+function TableEditContainer({
+  editableConfig,
+  focusedRowId
+}) {
+  const {
+    cellEdits,
+    onSubmitEdits,
+    clearEdits,
+    editMode
+  } = editableConfig ?? {};
+  const hasEdits = Object.keys(cellEdits ?? {}).length > 0;
+  const [isSubmitting, setIsSubmitting] = React21.useState(false);
+  const isInEditMode = editMode?.isActive;
+  const canToggleEditMode = editMode?.type === "manual";
+  const handleSubmitEdits = React21.useCallback(async () => {
+    setIsSubmitting(true);
+    try {
+      const success = await onSubmitEdits?.();
+      if (success) {
+        clearEdits?.();
+        if (editMode?.type === "manual") {
+          editMode.setActive(false);
+        }
+      }
+    } finally {
+      setIsSubmitting(false);
+    }
+  }, [editMode, onSubmitEdits, clearEdits]);
+  const handleCancelEdits = React21.useCallback(() => {
+    clearEdits?.();
+    if (editMode?.type === "manual") {
+      editMode.setActive(false);
+    }
+  }, [clearEdits, editMode]);
+  const handleEnterEditMode = React21.useCallback(() => {
+    if (editMode?.type === "manual") {
+      editMode.setActive(true);
+    }
+  }, [editMode]);
+  return /* @__PURE__ */ React21__default.default.createElement("div", {
+    className: TableEditContainer_default.tableEditContainer
+  }, hasEdits ? /* @__PURE__ */ React21__default.default.createElement("div", {
+    className: TableEditContainer_default.modificationCount
+  }, `${cellEdits ? Object.keys(cellEdits).length : 0} modifications`) : isInEditMode && !focusedRowId && /* @__PURE__ */ React21__default.default.createElement("div", {
+    className: TableEditContainer_default.placeholder
+  }, "Select a row to edit data\u2026"), /* @__PURE__ */ React21__default.default.createElement("div", {
+    className: TableEditContainer_default.editButtons
+  }, !isInEditMode && canToggleEditMode && /* @__PURE__ */ React21__default.default.createElement(ActionButton, {
+    variant: "primary",
+    onClick: handleEnterEditMode
+  }, "Edit Table"), isInEditMode && canToggleEditMode && /* @__PURE__ */ React21__default.default.createElement(ActionButton, {
+    variant: "secondary",
+    onClick: handleCancelEdits
+  }, "Cancel"), isInEditMode && !!onSubmitEdits && /* @__PURE__ */ React21__default.default.createElement(ActionButton, {
+    variant: "primary",
+    onClick: handleSubmitEdits,
+    disabled: !hasEdits || isSubmitting
+  }, "Submit Edits")));
+}
+
 // src/object-table/Table.tsx
 function BaseTable({
   table,
@@ -4729,6 +4822,7 @@ function BaseTable({
 }) {
   const tableContainerRef = React21.useRef(null);
   const [isLoadingMore, setIsLoadingMore] = React21.useState(false);
+  const [focusedRowId, setFocusedRowId] = React21.useState(null);
   const fetchingRef = React21.useRef(false);
   React21.useEffect(() => {
     if (!isLoading || fetchNextPage == null) {
@@ -4759,16 +4853,23 @@ function BaseTable({
   const rows = table.getRowModel().rows;
   const headerGroups = table.getHeaderGroups();
   const hasData = rows.length > 0;
-  const hasEdits = Object.keys(editableConfig?.cellEdits ?? {}).length > 0;
-  const handleSubmitEdits = React21.useCallback(async () => {
-    await editableConfig?.onSubmitEdits?.();
-    editableConfig?.clearEdits?.();
-  }, [editableConfig]);
+  const hasEditableColumns = table.getAllColumns().some((column) => column.columnDef.meta?.editable === true);
+  React21.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (tableContainerRef.current && !tableContainerRef.current.contains(event.target)) {
+        setFocusedRowId(null);
+      }
+    };
+    document.addEventListener("click", handleClickOutside);
+    return () => {
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, []);
   return /* @__PURE__ */ React21__default.default.createElement("div", {
     className: classnames7__default.default(Table_default.osdkTableWrapper, className)
   }, /* @__PURE__ */ React21__default.default.createElement("div", {
     ref: tableContainerRef,
-    className: classnames7__default.default(Table_default.osdkTableContainer, editableConfig && Table_default.osdkTableContainerWithButton),
+    className: Table_default.osdkTableContainer,
     onScroll: handleScroll
   }, /* @__PURE__ */ React21__default.default.createElement("table", null, isLoading && !hasData ? /* @__PURE__ */ React21__default.default.createElement(LoadingStateTable, {
     table,
@@ -4785,18 +4886,18 @@ function BaseTable({
     rowHeight,
     renderCellContextMenu,
     isLoadingMore,
-    headerGroups
+    headerGroups,
+    focusedRowId,
+    setFocusedRowId,
+    isInEditMode: editableConfig?.editMode.isActive
   }))), !hasData && error == null && /* @__PURE__ */ React21__default.default.createElement(NonIdealState, {
     message: "No Data"
   }), error != null && /* @__PURE__ */ React21__default.default.createElement(NonIdealState, {
     message: `Error Loading Data: ${error.message}`
-  })), editableConfig && /* @__PURE__ */ React21__default.default.createElement("div", {
-    className: Table_default.submitButtonContainer
-  }, /* @__PURE__ */ React21__default.default.createElement(ActionButton, {
-    variant: "primary",
-    onClick: handleSubmitEdits,
-    disabled: !hasEdits
-  }, "Submit Edits")));
+  })), hasEditableColumns && /* @__PURE__ */ React21__default.default.createElement(TableEditContainer, {
+    editableConfig,
+    focusedRowId
+  }));
 }
 
 // src/object-table/ObjectTable.tsx
@@ -4822,6 +4923,7 @@ function ObjectTable({
   enableColumnPinning = true,
   enableColumnResizing = true,
   enableColumnConfig = true,
+  editMode = "manual",
   ...props
 }) {
   const {
@@ -4830,15 +4932,6 @@ function ObjectTable({
   } = useColumnResize({
     onColumnResize
   });
-  const {
-    cellEdits,
-    clearEdits,
-    handleCellEdit,
-    handleSubmitEdits
-  } = useEditableTable({
-    onCellValueChanged,
-    onSubmitEdits
-  });
   const {
     sorting,
     onSortingChange
@@ -4897,6 +4990,11 @@ function ObjectTable({
   const allColumns = React21.useMemo(() => {
     return selectionColumn ? [selectionColumn, ...columns] : columns;
   }, [selectionColumn, columns]);
+  const editableConfig = useEditableTable({
+    editMode,
+    onCellValueChanged,
+    onSubmitEdits
+  });
   const table = reactTable.useReactTable({
     data: data ?? [],
     columns: allColumns,
@@ -4925,8 +5023,9 @@ function ObjectTable({
     },
     getRowId,
     meta: {
-      onCellEdit: handleCellEdit,
-      cellEdits
+      onCellEdit: editableConfig.onCellEdit,
+      cellEdits: editableConfig.cellEdits,
+      isInEditMode: editableConfig.editMode.isActive
     }
   });
   const onRenderCellContextMenu = React21.useCallback((row, cell) => {
@@ -4939,16 +5038,6 @@ function ObjectTable({
     showResizeItem: enableColumnResizing,
     showConfigItem: enableColumnConfig
   }), [enableOrdering, enableColumnPinning, enableColumnResizing, enableColumnConfig]);
-  const editableConfig = React21.useMemo(() => {
-    if (!onSubmitEdits) {
-      return;
-    }
-    return {
-      onSubmitEdits: handleSubmitEdits,
-      clearEdits,
-      cellEdits
-    };
-  }, [onSubmitEdits, handleSubmitEdits, clearEdits, cellEdits]);
   return /* @__PURE__ */ React21__default.default.createElement(BaseTable, {
     table,
     isLoading: isTableLoading,