@osdk/react-components 0.2.0-beta.2 → 0.2.0-beta.21

package/build/esm/object-table/ColumnConfigDialog.module.css

@@ -0,0 +1,238 @@
+/*
+ * 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.
+ */
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+}
+
+/* Override dialog styling */
+.columnConfigDialog {
+  --osdk-dialog-min-width: var(--osdk-table-column-config-dialog-min-width);
+  --osdk-dialog-min-height: var(--osdk-table-column-config-dialog-min-height);
+  --osdk-dialog-body-padding: 0;
+}
+
+.dialogLayout {
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.visibleColumnsContainer {
+  flex: 1.5;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: calc(var(--osdk-surface-spacing) * 5);
+  background: var(--osdk-table-column-config-visible-columns-bg);
+  border-right: 1px solid var(--osdk-surface-border-color-default);
+}
+
+.availableColumnsContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: calc(var(--osdk-surface-spacing) * 5)
+    calc(var(--osdk-surface-spacing) * 3);
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: calc(var(--osdk-surface-spacing) * 5);
+}
+
+.sectionTitle {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  font-size: var(--osdk-typography-size-body-medium);
+  font-weight: var(--osdk-typography-weight-bold);
+  color: var(--osdk-typography-color-muted);
+  flex-shrink: 0;
+  gap: var(--osdk-surface-spacing);
+}
+
+.countTag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--osdk-custom-color-gray-3);
+  padding: calc(var(--osdk-surface-spacing) / 2)
+    calc(var(--osdk-surface-spacing) * 1.5);
+  border-radius: var(--osdk-surface-border-radius);
+  font-size: var(--osdk-typography-size-body-small);
+  font-weight: var(--osdk-typography-weight-default);
+  color: var(--osdk-typography-color-default-rest);
+}
+
+.sectionHint {
+  font-size: var(--osdk-typography-size-body-small);
+  color: var(--osdk-typography-color-muted);
+}
+
+.columnList {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.searchContainer {
+  margin-bottom: calc(var(--osdk-surface-spacing) * 2);
+  flex-shrink: 0;
+}
+
+.propertiesList {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.categoryHeader {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: calc(var(--osdk-surface-spacing) * 2)
+    calc(var(--osdk-surface-spacing) * 3);
+  background: none;
+  border: none;
+  margin: 0;
+  gap: calc(var(--osdk-surface-spacing) * 3);
+  flex-shrink: 0;
+}
+
+.categoryTrigger {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.categoryTitle {
+  flex: 1;
+  color: var(--osdk-typography-color-muted);
+  font-size: var(--osdk-typography-size-body-small);
+  font-weight: var(--osdk-typography-weight-bold);
+  text-align: left;
+}
+
+.categoryCount {
+  color: var(--osdk-typography-color-muted);
+  font-size: var(--osdk-typography-size-body-small);
+  margin-left: var(--osdk-surface-spacing);
+}
+
+.caretIcon {
+  color: var(--osdk-typography-color-muted);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.categoryTrigger[data-panel-open] .caretIcon {
+  transform: rotate(180deg);
+}
+
+.checkbox {
+  width: var(--osdk-checkbox-icon-size);
+  height: var(--osdk-checkbox-icon-size);
+}
+
+.propertyList {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.propertyItem {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  gap: calc(var(--osdk-surface-spacing) * 3);
+  padding: calc(var(--osdk-surface-spacing) * 2)
+    calc(var(--osdk-surface-spacing) * 3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--osdk-surface-border-radius);
+
+  &:hover {
+    background-color: var(--osdk-surface-background-color-default-hover);
+  }
+}
+
+.checkboxIndicator {
+  color: var(--osdk-intent-primary-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.propertyName {
+  text-align: left;
+  flex: 1;
+  font-size: var(--osdk-typography-size-body-medium);
+  font-weight: 400;
+  color: var(--osdk-typography-color-default-rest);
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: none;
+  border: none;
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.infoIcon {
+  color: var(--osdk-typography-color-muted);
+  flex-shrink: 0;
+  width: calc(var(--osdk-checkbox-icon-size) * 0.75);
+  height: calc(var(--osdk-checkbox-icon-size) * 0.75);
+}
+
+.emptyState {
+  padding: calc(var(--osdk-surface-spacing) * 5);
+  text-align: center;
+  color: var(--osdk-typography-color-muted);
+  font-style: italic;
+}

package/build/esm/object-table/DefaultCellRenderer.js

@@ -0,0 +1,61 @@
+/*
+ * 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.
+ */
+
+import React from "react";
+import { AsyncValueCell } from "./components/AsyncValueCell.js";
+import { EditableCell } from "./EditableCell.js";
+import { isAsyncCellData } from "./utils/AsyncCellData.js";
+import { getCellId } from "./utils/getCellId.js";
+export function renderDefaultCell(cellContext) {
+  const meta = cellContext.table.options.meta;
+  const columnMeta = cellContext.column.columnDef.meta;
+  const cellValue = cellContext.getValue();
+  const asyncCellData = isAsyncCellData(cellValue) ? cellValue : undefined;
+
+  // Function-backed columns are read-only: the value is server-computed
+  // and cannot be edited in the table. Return the async cell directly.
+  if (columnMeta?.isAsyncColumn && asyncCellData) {
+    return /*#__PURE__*/React.createElement(AsyncValueCell, asyncCellData);
+  }
+  if (!columnMeta?.editable || !meta?.onCellEdit || !meta?.isInEditMode) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, cellValue);
+  }
+  const rowId = cellContext.row.id;
+  const columnId = cellContext.column.id;
+  const cellId = getCellId({
+    rowId,
+    columnId
+  });
+  const cellEdits = meta.cellEdits;
+  const editedValue = cellEdits?.[cellId];
+  const currentValue = editedValue?.newValue ?? cellValue;
+  const validationError = meta.validationErrors?.get(cellId);
+  return /*#__PURE__*/React.createElement(EditableCell, {
+    initialValue: cellValue,
+    currentValue: currentValue,
+    cellId: cellId,
+    dataType: columnMeta?.dataType,
+    onCellEdit: meta.onCellEdit,
+    onCellValidationError: meta.onCellValidationError,
+    clearCellValidationError: meta.clearCellValidationError,
+    originalRowData: cellContext.row.original,
+    rowId: rowId,
+    columnId: columnId,
+    validateEdit: columnMeta?.validateEdit,
+    validationError: validationError
+  });
+}
+//# sourceMappingURL=DefaultCellRenderer.js.map

package/build/esm/object-table/DefaultCellRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DefaultCellRenderer.js","names":["React","AsyncValueCell","EditableCell","isAsyncCellData","getCellId","renderDefaultCell","cellContext","meta","table","options","columnMeta","column","columnDef","cellValue","getValue","asyncCellData","undefined","isAsyncColumn","createElement","editable","onCellEdit","isInEditMode","Fragment","rowId","row","id","columnId","cellId","cellEdits","editedValue","currentValue","newValue","validationError","validationErrors","get","initialValue","dataType","onCellValidationError","clearCellValidationError","originalRowData","original","validateEdit"],"sources":["DefaultCellRenderer.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { CellContext, RowData } from \"@tanstack/react-table\";\nimport React from \"react\";\nimport { AsyncValueCell } from \"./components/AsyncValueCell.js\";\nimport { EditableCell } from \"./EditableCell.js\";\nimport { isAsyncCellData } from \"./utils/AsyncCellData.js\";\nimport { getCellId } from \"./utils/getCellId.js\";\n\nexport function renderDefaultCell<TData extends RowData>(\n  cellContext: CellContext<TData, unknown>,\n): React.ReactNode {\n  const meta = cellContext.table.options.meta;\n  const columnMeta = cellContext.column.columnDef.meta;\n\n  const cellValue = cellContext.getValue();\n\n  const asyncCellData = isAsyncCellData(cellValue)\n    ? cellValue\n    : undefined;\n\n  // Function-backed columns are read-only: the value is server-computed\n  // and cannot be edited in the table. Return the async cell directly.\n  if (columnMeta?.isAsyncColumn && asyncCellData) {\n    return <AsyncValueCell {...asyncCellData} />;\n  }\n\n  if (!columnMeta?.editable || !meta?.onCellEdit || !meta?.isInEditMode) {\n    return <>{cellValue}</>;\n  }\n\n  const rowId = cellContext.row.id;\n  const columnId = cellContext.column.id;\n  const cellId = getCellId({ rowId, columnId });\n\n  const cellEdits = meta.cellEdits;\n  const editedValue = cellEdits?.[cellId];\n  const currentValue = editedValue?.newValue ?? cellValue;\n  const validationError = meta.validationErrors?.get(cellId);\n\n  return (\n    <EditableCell<TData>\n      initialValue={cellValue}\n      currentValue={currentValue}\n      cellId={cellId}\n      dataType={columnMeta?.dataType}\n      onCellEdit={meta.onCellEdit}\n      onCellValidationError={meta.onCellValidationError}\n      clearCellValidationError={meta.clearCellValidationError}\n      originalRowData={cellContext.row.original}\n      rowId={rowId}\n      columnId={columnId}\n      validateEdit={columnMeta?.validateEdit}\n      validationError={validationError}\n    />\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,cAAc,QAAQ,gCAAgC;AAC/D,SAASC,YAAY,QAAQ,mBAAmB;AAChD,SAASC,eAAe,QAAQ,0BAA0B;AAC1D,SAASC,SAAS,QAAQ,sBAAsB;AAEhD,OAAO,SAASC,iBAAiBA,CAC/BC,WAAwC,EACvB;EACjB,MAAMC,IAAI,GAAGD,WAAW,CAACE,KAAK,CAACC,OAAO,CAACF,IAAI;EAC3C,MAAMG,UAAU,GAAGJ,WAAW,CAACK,MAAM,CAACC,SAAS,CAACL,IAAI;EAEpD,MAAMM,SAAS,GAAGP,WAAW,CAACQ,QAAQ,CAAC,CAAC;EAExC,MAAMC,aAAa,GAAGZ,eAAe,CAACU,SAAS,CAAC,GAC5CA,SAAS,GACTG,SAAS;;EAEb;EACA;EACA,IAAIN,UAAU,EAAEO,aAAa,IAAIF,aAAa,EAAE;IAC9C,oBAAOf,KAAA,CAAAkB,aAAA,CAACjB,cAAc,EAAKc,aAAgB,CAAC;EAC9C;EAEA,IAAI,CAACL,UAAU,EAAES,QAAQ,IAAI,CAACZ,IAAI,EAAEa,UAAU,IAAI,CAACb,IAAI,EAAEc,YAAY,EAAE;IACrE,oBAAOrB,KAAA,CAAAkB,aAAA,CAAAlB,KAAA,CAAAsB,QAAA,QAAGT,SAAY,CAAC;EACzB;EAEA,MAAMU,KAAK,GAAGjB,WAAW,CAACkB,GAAG,CAACC,EAAE;EAChC,MAAMC,QAAQ,GAAGpB,WAAW,CAACK,MAAM,CAACc,EAAE;EACtC,MAAME,MAAM,GAAGvB,SAAS,CAAC;IAAEmB,KAAK;IAAEG;EAAS,CAAC,CAAC;EAE7C,MAAME,SAAS,GAAGrB,IAAI,CAACqB,SAAS;EAChC,MAAMC,WAAW,GAAGD,SAAS,GAAGD,MAAM,CAAC;EACvC,MAAMG,YAAY,GAAGD,WAAW,EAAEE,QAAQ,IAAIlB,SAAS;EACvD,MAAMmB,eAAe,GAAGzB,IAAI,CAAC0B,gBAAgB,EAAEC,GAAG,CAACP,MAAM,CAAC;EAE1D,oBACE3B,KAAA,CAAAkB,aAAA,CAAChB,YAAY;IACXiC,YAAY,EAAEtB,SAAU;IACxBiB,YAAY,EAAEA,YAAa;IAC3BH,MAAM,EAAEA,MAAO;IACfS,QAAQ,EAAE1B,UAAU,EAAE0B,QAAS;IAC/BhB,UAAU,EAAEb,IAAI,CAACa,UAAW;IAC5BiB,qBAAqB,EAAE9B,IAAI,CAAC8B,qBAAsB;IAClDC,wBAAwB,EAAE/B,IAAI,CAAC+B,wBAAyB;IACxDC,eAAe,EAAEjC,WAAW,CAACkB,GAAG,CAACgB,QAAS;IAC1CjB,KAAK,EAAEA,KAAM;IACbG,QAAQ,EAAEA,QAAS;IACnBe,YAAY,EAAE/B,UAAU,EAAE+B,YAAa;IACvCT,eAAe,EAAEA;EAAgB,CAClC,CAAC;AAEN","ignoreList":[]}

package/build/esm/object-table/EditableCell.js

@@ -0,0 +1,168 @@
+/*
+ * 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.
+ */
+
+import { Input } from "@base-ui/react/input";
+import { Error } from "@blueprintjs/icons";
+import classNames from "classnames";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Tooltip } from "../base-components/tooltip/Tooltip.js";
+import styles from "./EditableCell.module.css";
+const NUMBER_TYPES = ["double", "integer", "long", "float", "decimal", "byte", "short"];
+function valueToString(value) {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  // At this point, value is a primitive (string, number, boolean, symbol, bigint)
+  return String(value);
+}
+function parseValueByType(value, dataType) {
+  if (!dataType || !NUMBER_TYPES.includes(dataType)) {
+    return value;
+  }
+  if (value === "") {
+    return null;
+  }
+  const parsedNumber = Number(value);
+  if (isNaN(parsedNumber)) {
+    return value;
+  }
+  return parsedNumber;
+}
+const VALIDATION_ERROR_MESSAGE = "Validation error";
+function EditableCellInner({
+  initialValue,
+  currentValue,
+  cellId,
+  dataType,
+  onCellEdit,
+  onCellValidationError,
+  clearCellValidationError,
+  originalRowData,
+  rowId,
+  columnId,
+  validateEdit,
+  validationError
+}) {
+  const [inputValue, setInputValue] = useState(valueToString(currentValue));
+  const isCancelled = useRef(false);
+  const validationAbortControllerRef = useRef(null);
+  const abortController = useCallback(() => {
+    if (validationAbortControllerRef.current) {
+      validationAbortControllerRef.current.abort();
+      validationAbortControllerRef.current = null;
+    }
+  }, []);
+  const hasValidationError = validationError != null;
+  useEffect(() => {
+    setInputValue(valueToString(currentValue));
+  }, [currentValue]);
+  useEffect(() => {
+    // Cleanup abort controller on unmount
+    return () => {
+      abortController();
+    };
+  }, [abortController]);
+  const handleBlur = useCallback(() => {
+    // Do not commit the edit if it was cancelled with Escape key
+    if (isCancelled.current) {
+      isCancelled.current = false;
+      return;
+    }
+
+    // Cancel any in-flight validation
+    abortController();
+    const parsedValue = parseValueByType(inputValue, dataType);
+    onCellEdit(cellId, {
+      rowId,
+      columnId,
+      newValue: parsedValue,
+      oldValue: initialValue,
+      originalRowData
+    });
+    if (validateEdit) {
+      // Create new AbortController for this validation
+      const abortController = new AbortController();
+      validationAbortControllerRef.current = abortController;
+      const validationPromise = validateEdit(parsedValue);
+
+      // Race between validation and abort
+      Promise.race([validationPromise, new Promise((_, reject) => {
+        abortController.signal.addEventListener("abort", () => {
+          reject(new DOMException("Aborted", "AbortError"));
+        });
+      })]).then(errorMessage => {
+        if (abortController.signal.aborted) {
+          return;
+        }
+        if (errorMessage) {
+          onCellValidationError?.(cellId, errorMessage);
+        } else {
+          clearCellValidationError?.(cellId);
+        }
+      }, error => {
+        if (!abortController.signal.aborted && error.name !== "AbortError") {
+          onCellValidationError?.(cellId, VALIDATION_ERROR_MESSAGE);
+        }
+      });
+    }
+  }, [abortController, inputValue, dataType, onCellEdit, cellId, rowId, columnId, initialValue, originalRowData, validateEdit, onCellValidationError, clearCellValidationError]);
+  const handleChange = useCallback(value => {
+    // Cancel any in-flight validation
+    abortController();
+    setInputValue(value);
+  }, [abortController]);
+  const handleKeyDown = useCallback(e => {
+    if (e.key === "Enter") {
+      e.currentTarget.blur();
+    }
+    if (e.key === "Escape") {
+      isCancelled.current = true;
+      setInputValue(valueToString(currentValue));
+      e.currentTarget.blur();
+    }
+  }, [currentValue]);
+  const inputType = dataType && NUMBER_TYPES.includes(dataType) ? "number" : "text";
+  return /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement(Tooltip.Root, {
+    disabled: !hasValidationError
+  }, /*#__PURE__*/React.createElement(Tooltip.Trigger, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.osdkEditableCell, {
+      [styles.error]: hasValidationError,
+      [styles.osdkEditedInput]: currentValue !== initialValue
+    })
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: inputType,
+    value: inputValue,
+    className: styles.osdkEditableInput,
+    onValueChange: handleChange,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    "aria-invalid": hasValidationError
+  }), hasValidationError && /*#__PURE__*/React.createElement(Error, {
+    className: styles.errorIcon
+  }))), /*#__PURE__*/React.createElement(Tooltip.Portal, null, /*#__PURE__*/React.createElement(Tooltip.Positioner, {
+    sideOffset: 4,
+    side: "bottom"
+  }, /*#__PURE__*/React.createElement(Tooltip.Popup, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.validationError
+  }, /*#__PURE__*/React.createElement(Error, {
+    className: styles.errorIcon
+  }), validationError), /*#__PURE__*/React.createElement(Tooltip.Arrow, null))))));
+}
+export const EditableCell = /*#__PURE__*/React.memo(EditableCellInner);
+//# sourceMappingURL=EditableCell.js.map

package/build/esm/object-table/EditableCell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EditableCell.js","names":["Input","Error","classNames","React","useCallback","useEffect","useRef","useState","Tooltip","styles","NUMBER_TYPES","valueToString","value","JSON","stringify","String","parseValueByType","dataType","includes","parsedNumber","Number","isNaN","VALIDATION_ERROR_MESSAGE","EditableCellInner","initialValue","currentValue","cellId","onCellEdit","onCellValidationError","clearCellValidationError","originalRowData","rowId","columnId","validateEdit","validationError","inputValue","setInputValue","isCancelled","validationAbortControllerRef","abortController","current","abort","hasValidationError","handleBlur","parsedValue","newValue","oldValue","AbortController","validationPromise","Promise","race","_","reject","signal","addEventListener","DOMException","then","errorMessage","aborted","error","name","handleChange","handleKeyDown","e","key","currentTarget","blur","inputType","createElement","Provider","Root","disabled","Trigger","className","osdkEditableCell","osdkEditedInput","type","osdkEditableInput","onValueChange","onBlur","onKeyDown","errorIcon","Portal","Positioner","sideOffset","side","Popup","Arrow","EditableCell","memo"],"sources":["EditableCell.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Input } from \"@base-ui/react/input\";\nimport { Error } from \"@blueprintjs/icons\";\nimport type { RowData } from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Tooltip } from \"../base-components/tooltip/Tooltip.js\";\nimport styles from \"./EditableCell.module.css\";\nimport type { CellEditInfo } from \"./utils/types.js\";\n\nexport interface EditableCellProps<TData extends RowData, CellValue = unknown> {\n  initialValue: CellValue;\n  currentValue: CellValue;\n  cellId: string;\n  dataType?: string;\n  onCellEdit: (cellId: string, info: CellEditInfo<TData, CellValue>) => void;\n  onCellValidationError?: (\n    cellId: string,\n    error: string,\n  ) => void;\n  clearCellValidationError?: (cellId: string) => void;\n  validationError?: string;\n  originalRowData: TData;\n  rowId: string;\n  columnId: string;\n  validateEdit?: (value: unknown) => Promise<string | undefined>;\n}\n\nconst NUMBER_TYPES: string[] = [\n  \"double\",\n  \"integer\",\n  \"long\",\n  \"float\",\n  \"decimal\",\n  \"byte\",\n  \"short\",\n];\n\nfunction valueToString(value: unknown): string {\n  if (value == null) {\n    return \"\";\n  }\n  if (typeof value === \"object\") {\n    return JSON.stringify(value);\n  }\n  // At this point, value is a primitive (string, number, boolean, symbol, bigint)\n  return String(value as string | number | boolean | symbol | bigint);\n}\n\nfunction parseValueByType(\n  value: string,\n  dataType?: string,\n): unknown {\n  if (!dataType || !NUMBER_TYPES.includes(dataType)) {\n    return value;\n  }\n\n  if (value === \"\") {\n    return null;\n  }\n\n  const parsedNumber = Number(value);\n\n  if (isNaN(parsedNumber)) {\n    return value;\n  }\n\n  return parsedNumber;\n}\n\nconst VALIDATION_ERROR_MESSAGE = \"Validation error\";\n\nfunction EditableCellInner<TData extends RowData, CellValue = unknown>({\n  initialValue,\n  currentValue,\n  cellId,\n  dataType,\n  onCellEdit,\n  onCellValidationError,\n  clearCellValidationError,\n  originalRowData,\n  rowId,\n  columnId,\n  validateEdit,\n  validationError,\n}: EditableCellProps<TData, CellValue>): React.ReactElement {\n  const [inputValue, setInputValue] = useState<string>(\n    valueToString(currentValue),\n  );\n  const isCancelled = useRef(false);\n  const validationAbortControllerRef = useRef<AbortController | null>(null);\n\n  const abortController = useCallback(() => {\n    if (validationAbortControllerRef.current) {\n      validationAbortControllerRef.current.abort();\n      validationAbortControllerRef.current = null;\n    }\n  }, []);\n\n  const hasValidationError = validationError != null;\n  const isEdited = currentValue !== initialValue;\n\n  useEffect(() => {\n    setInputValue(valueToString(currentValue));\n  }, [currentValue]);\n\n  useEffect(() => {\n    // Cleanup abort controller on unmount\n    return () => {\n      abortController();\n    };\n  }, [abortController]);\n\n  const handleBlur = useCallback(() => {\n    // Do not commit the edit if it was cancelled with Escape key\n    if (isCancelled.current) {\n      isCancelled.current = false;\n      return;\n    }\n\n    // Cancel any in-flight validation\n    abortController();\n\n    const parsedValue = parseValueByType(inputValue, dataType) as CellValue;\n\n    onCellEdit(cellId, {\n      rowId,\n      columnId,\n      newValue: parsedValue,\n      oldValue: initialValue,\n      originalRowData,\n    });\n\n    if (validateEdit) {\n      // Create new AbortController for this validation\n      const abortController = new AbortController();\n      validationAbortControllerRef.current = abortController;\n\n      const validationPromise = validateEdit(parsedValue);\n\n      // Race between validation and abort\n      Promise.race([\n        validationPromise,\n        new Promise<string | undefined>((_, reject) => {\n          abortController.signal.addEventListener(\"abort\", () => {\n            reject(new DOMException(\"Aborted\", \"AbortError\"));\n          });\n        }),\n      ]).then(\n        (errorMessage) => {\n          if (abortController.signal.aborted) {\n            return;\n          }\n          if (errorMessage) {\n            onCellValidationError?.(cellId, errorMessage);\n          } else {\n            clearCellValidationError?.(cellId);\n          }\n        },\n        (error) => {\n          if (!abortController.signal.aborted && error.name !== \"AbortError\") {\n            onCellValidationError?.(cellId, VALIDATION_ERROR_MESSAGE);\n          }\n        },\n      );\n    }\n  }, [\n    abortController,\n    inputValue,\n    dataType,\n    onCellEdit,\n    cellId,\n    rowId,\n    columnId,\n    initialValue,\n    originalRowData,\n    validateEdit,\n    onCellValidationError,\n    clearCellValidationError,\n  ]);\n\n  const handleChange = useCallback((value: string) => {\n    // Cancel any in-flight validation\n    abortController();\n    setInputValue(value);\n  }, [abortController]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\") {\n        e.currentTarget.blur();\n      }\n      if (e.key === \"Escape\") {\n        isCancelled.current = true;\n        setInputValue(valueToString(currentValue));\n        e.currentTarget.blur();\n      }\n    },\n    [currentValue],\n  );\n\n  const inputType = dataType && NUMBER_TYPES.includes(dataType)\n    ? \"number\"\n    : \"text\";\n\n  return (\n    <Tooltip.Provider>\n      <Tooltip.Root disabled={!hasValidationError}>\n        <Tooltip.Trigger>\n          <div\n            className={classNames(styles.osdkEditableCell, {\n              [styles.error]: hasValidationError,\n              [styles.osdkEditedInput]: isEdited,\n            })}\n          >\n            <Input\n              type={inputType}\n              value={inputValue}\n              className={styles.osdkEditableInput}\n              onValueChange={handleChange}\n              onBlur={handleBlur}\n              onKeyDown={handleKeyDown}\n              aria-invalid={hasValidationError}\n            />\n            {hasValidationError && <Error className={styles.errorIcon} />}\n          </div>\n        </Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Positioner sideOffset={4} side={\"bottom\"}>\n            <Tooltip.Popup>\n              <div className={styles.validationError}>\n                <Error className={styles.errorIcon} />\n                {validationError}\n              </div>\n              <Tooltip.Arrow />\n            </Tooltip.Popup>\n          </Tooltip.Positioner>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </Tooltip.Provider>\n  );\n}\n\nexport const EditableCell = React.memo(\n  EditableCellInner,\n) as typeof EditableCellInner;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,KAAK,QAAQ,sBAAsB;AAC5C,SAASC,KAAK,QAAQ,oBAAoB;AAE1C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AACvE,SAASC,OAAO,QAAQ,uCAAuC;AAC/D,OAAOC,MAAM,MAAM,2BAA2B;AAqB9C,MAAMC,YAAsB,GAAG,CAC7B,QAAQ,EACR,SAAS,EACT,MAAM,EACN,OAAO,EACP,SAAS,EACT,MAAM,EACN,OAAO,CACR;AAED,SAASC,aAAaA,CAACC,KAAc,EAAU;EAC7C,IAAIA,KAAK,IAAI,IAAI,EAAE;IACjB,OAAO,EAAE;EACX;EACA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC7B,OAAOC,IAAI,CAACC,SAAS,CAACF,KAAK,CAAC;EAC9B;EACA;EACA,OAAOG,MAAM,CAACH,KAAoD,CAAC;AACrE;AAEA,SAASI,gBAAgBA,CACvBJ,KAAa,EACbK,QAAiB,EACR;EACT,IAAI,CAACA,QAAQ,IAAI,CAACP,YAAY,CAACQ,QAAQ,CAACD,QAAQ,CAAC,EAAE;IACjD,OAAOL,KAAK;EACd;EAEA,IAAIA,KAAK,KAAK,EAAE,EAAE;IAChB,OAAO,IAAI;EACb;EAEA,MAAMO,YAAY,GAAGC,MAAM,CAACR,KAAK,CAAC;EAElC,IAAIS,KAAK,CAACF,YAAY,CAAC,EAAE;IACvB,OAAOP,KAAK;EACd;EAEA,OAAOO,YAAY;AACrB;AAEA,MAAMG,wBAAwB,GAAG,kBAAkB;AAEnD,SAASC,iBAAiBA,CAA6C;EACrEC,YAAY;EACZC,YAAY;EACZC,MAAM;EACNT,QAAQ;EACRU,UAAU;EACVC,qBAAqB;EACrBC,wBAAwB;EACxBC,eAAe;EACfC,KAAK;EACLC,QAAQ;EACRC,YAAY;EACZC;AACmC,CAAC,EAAsB;EAC1D,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG7B,QAAQ,CAC1CI,aAAa,CAACc,YAAY,CAC5B,CAAC;EACD,MAAMY,WAAW,GAAG/B,MAAM,CAAC,KAAK,CAAC;EACjC,MAAMgC,4BAA4B,GAAGhC,MAAM,CAAyB,IAAI,CAAC;EAEzE,MAAMiC,eAAe,GAAGnC,WAAW,CAAC,MAAM;IACxC,IAAIkC,4BAA4B,CAACE,OAAO,EAAE;MACxCF,4BAA4B,CAACE,OAAO,CAACC,KAAK,CAAC,CAAC;MAC5CH,4BAA4B,CAACE,OAAO,GAAG,IAAI;IAC7C;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,MAAME,kBAAkB,GAAGR,eAAe,IAAI,IAAI;EAGlD7B,SAAS,CAAC,MAAM;IACd+B,aAAa,CAACzB,aAAa,CAACc,YAAY,CAAC,CAAC;EAC5C,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElBpB,SAAS,CAAC,MAAM;IACd;IACA,OAAO,MAAM;MACXkC,eAAe,CAAC,CAAC;IACnB,CAAC;EACH,CAAC,EAAE,CAACA,eAAe,CAAC,CAAC;EAErB,MAAMI,UAAU,GAAGvC,WAAW,CAAC,MAAM;IACnC;IACA,IAAIiC,WAAW,CAACG,OAAO,EAAE;MACvBH,WAAW,CAACG,OAAO,GAAG,KAAK;MAC3B;IACF;;IAEA;IACAD,eAAe,CAAC,CAAC;IAEjB,MAAMK,WAAW,GAAG5B,gBAAgB,CAACmB,UAAU,EAAElB,QAAQ,CAAc;IAEvEU,UAAU,CAACD,MAAM,EAAE;MACjBK,KAAK;MACLC,QAAQ;MACRa,QAAQ,EAAED,WAAW;MACrBE,QAAQ,EAAEtB,YAAY;MACtBM;IACF,CAAC,CAAC;IAEF,IAAIG,YAAY,EAAE;MAChB;MACA,MAAMM,eAAe,GAAG,IAAIQ,eAAe,CAAC,CAAC;MAC7CT,4BAA4B,CAACE,OAAO,GAAGD,eAAe;MAEtD,MAAMS,iBAAiB,GAAGf,YAAY,CAACW,WAAW,CAAC;;MAEnD;MACAK,OAAO,CAACC,IAAI,CAAC,CACXF,iBAAiB,EACjB,IAAIC,OAAO,CAAqB,CAACE,CAAC,EAAEC,MAAM,KAAK;QAC7Cb,eAAe,CAACc,MAAM,CAACC,gBAAgB,CAAC,OAAO,EAAE,MAAM;UACrDF,MAAM,CAAC,IAAIG,YAAY,CAAC,SAAS,EAAE,YAAY,CAAC,CAAC;QACnD,CAAC,CAAC;MACJ,CAAC,CAAC,CACH,CAAC,CAACC,IAAI,CACJC,YAAY,IAAK;QAChB,IAAIlB,eAAe,CAACc,MAAM,CAACK,OAAO,EAAE;UAClC;QACF;QACA,IAAID,YAAY,EAAE;UAChB7B,qBAAqB,GAAGF,MAAM,EAAE+B,YAAY,CAAC;QAC/C,CAAC,MAAM;UACL5B,wBAAwB,GAAGH,MAAM,CAAC;QACpC;MACF,CAAC,EACAiC,KAAK,IAAK;QACT,IAAI,CAACpB,eAAe,CAACc,MAAM,CAACK,OAAO,IAAIC,KAAK,CAACC,IAAI,KAAK,YAAY,EAAE;UAClEhC,qBAAqB,GAAGF,MAAM,EAAEJ,wBAAwB,CAAC;QAC3D;MACF,CACF,CAAC;IACH;EACF,CAAC,EAAE,CACDiB,eAAe,EACfJ,UAAU,EACVlB,QAAQ,EACRU,UAAU,EACVD,MAAM,EACNK,KAAK,EACLC,QAAQ,EACRR,YAAY,EACZM,eAAe,EACfG,YAAY,EACZL,qBAAqB,EACrBC,wBAAwB,CACzB,CAAC;EAEF,MAAMgC,YAAY,GAAGzD,WAAW,CAAEQ,KAAa,IAAK;IAClD;IACA2B,eAAe,CAAC,CAAC;IACjBH,aAAa,CAACxB,KAAK,CAAC;EACtB,CAAC,EAAE,CAAC2B,eAAe,CAAC,CAAC;EAErB,MAAMuB,aAAa,GAAG1D,WAAW,CAC9B2D,CAAwC,IAAK;IAC5C,IAAIA,CAAC,CAACC,GAAG,KAAK,OAAO,EAAE;MACrBD,CAAC,CAACE,aAAa,CAACC,IAAI,CAAC,CAAC;IACxB;IACA,IAAIH,CAAC,CAACC,GAAG,KAAK,QAAQ,EAAE;MACtB3B,WAAW,CAACG,OAAO,GAAG,IAAI;MAC1BJ,aAAa,CAACzB,aAAa,CAACc,YAAY,CAAC,CAAC;MAC1CsC,CAAC,CAACE,aAAa,CAACC,IAAI,CAAC,CAAC;IACxB;EACF,CAAC,EACD,CAACzC,YAAY,CACf,CAAC;EAED,MAAM0C,SAAS,GAAGlD,QAAQ,IAAIP,YAAY,CAACQ,QAAQ,CAACD,QAAQ,CAAC,GACzD,QAAQ,GACR,MAAM;EAEV,oBACEd,KAAA,CAAAiE,aAAA,CAAC5D,OAAO,CAAC6D,QAAQ,qBACflE,KAAA,CAAAiE,aAAA,CAAC5D,OAAO,CAAC8D,IAAI;IAACC,QAAQ,EAAE,CAAC7B;EAAmB,gBAC1CvC,KAAA,CAAAiE,aAAA,CAAC5D,OAAO,CAACgE,OAAO,qBACdrE,KAAA,CAAAiE,aAAA;IACEK,SAAS,EAAEvE,UAAU,CAACO,MAAM,CAACiE,gBAAgB,EAAE;MAC7C,CAACjE,MAAM,CAACkD,KAAK,GAAGjB,kBAAkB;MAClC,CAACjC,MAAM,CAACkE,eAAe,GAhHlBlD,YAAY,KAAKD;IAiHxB,CAAC;EAAE,gBAEHrB,KAAA,CAAAiE,aAAA,CAACpE,KAAK;IACJ4E,IAAI,EAAET,SAAU;IAChBvD,KAAK,EAAEuB,UAAW;IAClBsC,SAAS,EAAEhE,MAAM,CAACoE,iBAAkB;IACpCC,aAAa,EAAEjB,YAAa;IAC5BkB,MAAM,EAAEpC,UAAW;IACnBqC,SAAS,EAAElB,aAAc;IACzB,gBAAcpB;EAAmB,CAClC,CAAC,EACDA,kBAAkB,iBAAIvC,KAAA,CAAAiE,aAAA,CAACnE,KAAK;IAACwE,SAAS,EAAEhE,MAAM,CAACwE;EAAU,CAAE,CACzD,CACU,CAAC,eAClB9E,KAAA,CAAAiE,aAAA,CAAC5D,OAAO,CAAC0E,MAAM,qBACb/E,KAAA,CAAAiE,aAAA,CAAC5D,OAAO,CAAC2E,UAAU;IAACC,UAAU,EAAE,CAAE;IAACC,IAAI,EAAE;EAAS,gBAChDlF,KAAA,CAAAiE,aAAA,CAAC5D,OAAO,CAAC8E,KAAK,qBACZnF,KAAA,CAAAiE,aAAA;IAAKK,SAAS,EAAEhE,MAAM,CAACyB;EAAgB,gBACrC/B,KAAA,CAAAiE,aAAA,CAACnE,KAAK;IAACwE,SAAS,EAAEhE,MAAM,CAACwE;EAAU,CAAE,CAAC,EACrC/C,eACE,CAAC,eACN/B,KAAA,CAAAiE,aAAA,CAAC5D,OAAO,CAAC+E,KAAK,MAAE,CACH,CACG,CACN,CACJ,CACE,CAAC;AAEvB;AAEA,OAAO,MAAMC,YAAY,gBAAGrF,KAAK,CAACsF,IAAI,CACpClE,iBACF,CAA6B","ignoreList":[]}

package/build/esm/object-table/EditableCell.module.css

@@ -0,0 +1,70 @@
+.osdkEditableCell {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
+  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);
+
+    &.osdkEditedInput {
+      border: var(--osdk-table-cell-edited-border);
+    }
+
+    &:focus-within,
+    &.osdkEditedInput:focus-within {
+      border: var(--osdk-emphasis-focus-width) solid
+        var(--osdk-emphasis-focus-color);
+    }
+
+    &.error {
+      border: var(--osdk-table-cell-edited-border-error);
+
+      &:focus-within {
+        border: var(--osdk-emphasis-focus-width) solid
+          var(--osdk-intent-danger-rest);
+      }
+    }
+  }
+
+  &.error {
+    background: var(--osdk-table-cell-editable-bg);
+    border: var(--osdk-table-cell-edited-border-error);
+  }
+}
+
+.osdkEditableInput {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  background: inherit;
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.osdkEditedInput {
+  border: var(--osdk-table-cell-edited-border);
+  background: var(--osdk-table-cell-editable-bg);
+}
+
+.validationError {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+}
+
+.errorIcon {
+  color: var(--osdk-intent-danger-rest);
+}

package/build/esm/object-table/LoadingCell.js

@@ -18,6 +18,11 @@ import classNames from "classnames";
 import React from "react";
 import styles from "./LoadingCell.module.css";
 import cellStyles from "./TableCell.module.css";
+export function LoadingCellContent() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.osdkLoadingCell, styles.osdkCellSkeleton)
+  });
+}
 export function LoadingCell({
   width
 }) {
@@ -26,8 +31,6 @@ export function LoadingCell({
     style: {
       width
     }
-  }, /*#__PURE__*/React.createElement("div", {
-    className: classNames(styles.osdkLoadingCell, styles.osdkCellSkeleton)
-  }));
+  }, /*#__PURE__*/React.createElement(LoadingCellContent, null));
 }
 //# sourceMappingURL=LoadingCell.js.map

package/build/esm/object-table/LoadingCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingCell.js","names":["classNames","React","styles","cellStyles","LoadingCell","width","createElement","className","osdkTableCell","style","osdkLoadingCell","osdkCellSkeleton"],"sources":["LoadingCell.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport styles from \"./LoadingCell.module.css\";\nimport cellStyles from \"./TableCell.module.css\";\n\nexport function LoadingCell({ width }: { width: number }): React.ReactElement {\n  return (\n    <td\n      className={cellStyles.osdkTableCell}\n      style={{ width }}\n    >\n      <div\n        className={classNames(styles.osdkLoadingCell, styles.osdkCellSkeleton)}\n      />\n    </td>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,0BAA0B;AAC7C,OAAOC,UAAU,MAAM,wBAAwB;AAE/C,OAAO,SAASC,WAAWA,CAAC;EAAEC;AAAyB,CAAC,EAAsB;EAC5E,oBACEJ,KAAA,CAAAK,aAAA;IACEC,SAAS,EAAEJ,UAAU,CAACK,aAAc;IACpCC,KAAK,EAAE;MAAEJ;IAAM;EAAE,gBAEjBJ,KAAA,CAAAK,aAAA;IACEC,SAAS,EAAEP,UAAU,CAACE,MAAM,CAACQ,eAAe,EAAER,MAAM,CAACS,gBAAgB;EAAE,CACxE,CACC,CAAC;AAET","ignoreList":[]}
+{"version":3,"file":"LoadingCell.js","names":["classNames","React","styles","cellStyles","LoadingCellContent","createElement","className","osdkLoadingCell","osdkCellSkeleton","LoadingCell","width","osdkTableCell","style"],"sources":["LoadingCell.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classNames from \"classnames\";\nimport React from \"react\";\nimport styles from \"./LoadingCell.module.css\";\nimport cellStyles from \"./TableCell.module.css\";\n\nexport function LoadingCellContent(): React.ReactElement {\n  return (\n    <div\n      className={classNames(\n        styles.osdkLoadingCell,\n        styles.osdkCellSkeleton,\n      )}\n    />\n  );\n}\n\nexport function LoadingCell({ width }: { width: number }): React.ReactElement {\n  return (\n    <td\n      className={cellStyles.osdkTableCell}\n      style={{ width }}\n    >\n      <LoadingCellContent />\n    </td>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AACzB,OAAOC,MAAM,MAAM,0BAA0B;AAC7C,OAAOC,UAAU,MAAM,wBAAwB;AAE/C,OAAO,SAASC,kBAAkBA,CAAA,EAAuB;EACvD,oBACEH,KAAA,CAAAI,aAAA;IACEC,SAAS,EAAEN,UAAU,CACnBE,MAAM,CAACK,eAAe,EACtBL,MAAM,CAACM,gBACT;EAAE,CACH,CAAC;AAEN;AAEA,OAAO,SAASC,WAAWA,CAAC;EAAEC;AAAyB,CAAC,EAAsB;EAC5E,oBACET,KAAA,CAAAI,aAAA;IACEC,SAAS,EAAEH,UAAU,CAACQ,aAAc;IACpCC,KAAK,EAAE;MAAEF;IAAM;EAAE,gBAEjBT,KAAA,CAAAI,aAAA,CAACD,kBAAkB,MAAE,CACnB,CAAC;AAET","ignoreList":[]}

package/build/esm/object-table/LoadingRow.js

@@ -17,12 +17,13 @@
 import React from "react";
 import { LoadingCell } from "./LoadingCell.js";
 import rowStyles from "./TableRow.module.css";
+import { DEFAULT_COLUMN_WIDTH } from "./utils/constants.js";
 export function LoadingRow({
   headers,
   columnCount,
   translateY,
   rowHeight = 40,
-  columnWidth = 80
+  columnWidth = DEFAULT_COLUMN_WIDTH
 }) {
   return /*#__PURE__*/React.createElement("tr", {
     className: rowStyles.osdkTableRow,

package/build/esm/object-table/LoadingRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"LoadingRow.js","names":["React","LoadingCell","rowStyles","LoadingRow","headers","columnCount","translateY","rowHeight","columnWidth","createElement","className","osdkTableRow","style","height","transform","Fragment","Array","from","length","map","_","index","width","getSize","key"],"sources":["LoadingRow.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderGroup, RowData } from \"@tanstack/react-table\";\nimport React from \"react\";\nimport { LoadingCell } from \"./LoadingCell.js\";\nimport rowStyles from \"./TableRow.module.css\";\n\ninterface LoadingRowProps<TData extends RowData> {\n  headers: HeaderGroup<TData>[\"headers\"];\n  columnCount: number;\n  translateY: number;\n  rowHeight?: number;\n  columnWidth?: number;\n}\n\nexport function LoadingRow<TData extends RowData>({\n  headers,\n  columnCount,\n  translateY,\n  rowHeight = 40,\n  columnWidth = 80,\n}: LoadingRowProps<TData>): React.ReactElement {\n  return (\n    <tr\n      className={rowStyles.osdkTableRow}\n      style={{\n        height: `${rowHeight}px`,\n        transform: `translateY(${translateY}px)`,\n      }}\n    >\n      {\n        <>\n          {Array.from({ length: columnCount }).map((_, index) => {\n            const width = headers.length > index\n              ? headers[index].getSize()\n              : columnWidth;\n            return <LoadingCell key={`loading-cell-${index}`} width={width} />;\n          })}\n        </>\n      }\n    </tr>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,OAAOC,SAAS,MAAM,uBAAuB;AAU7C,OAAO,SAASC,UAAUA,CAAwB;EAChDC,OAAO;EACPC,WAAW;EACXC,UAAU;EACVC,SAAS,GAAG,EAAE;EACdC,WAAW,GAAG;AACQ,CAAC,EAAsB;EAC7C,oBACER,KAAA,CAAAS,aAAA;IACEC,SAAS,EAAER,SAAS,CAACS,YAAa;IAClCC,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGN,SAAS,IAAI;MACxBO,SAAS,EAAE,cAAcR,UAAU;IACrC;EAAE,gBAGAN,KAAA,CAAAS,aAAA,CAAAT,KAAA,CAAAe,QAAA,QACGC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEb;EAAY,CAAC,CAAC,CAACc,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAK;IACrD,MAAMC,KAAK,GAAGlB,OAAO,CAACc,MAAM,GAAGG,KAAK,GAChCjB,OAAO,CAACiB,KAAK,CAAC,CAACE,OAAO,CAAC,CAAC,GACxBf,WAAW;IACf,oBAAOR,KAAA,CAAAS,aAAA,CAACR,WAAW;MAACuB,GAAG,EAAE,gBAAgBH,KAAK,EAAG;MAACC,KAAK,EAAEA;IAAM,CAAE,CAAC;EACpE,CAAC,CACD,CAEF,CAAC;AAET","ignoreList":[]}
+{"version":3,"file":"LoadingRow.js","names":["React","LoadingCell","rowStyles","DEFAULT_COLUMN_WIDTH","LoadingRow","headers","columnCount","translateY","rowHeight","columnWidth","createElement","className","osdkTableRow","style","height","transform","Fragment","Array","from","length","map","_","index","width","getSize","key"],"sources":["LoadingRow.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderGroup, RowData } from \"@tanstack/react-table\";\nimport React from \"react\";\nimport { LoadingCell } from \"./LoadingCell.js\";\nimport rowStyles from \"./TableRow.module.css\";\nimport { DEFAULT_COLUMN_WIDTH } from \"./utils/constants.js\";\n\ninterface LoadingRowProps<TData extends RowData> {\n  headers: HeaderGroup<TData>[\"headers\"];\n  columnCount: number;\n  translateY: number;\n  rowHeight?: number;\n  columnWidth?: number;\n}\n\nexport function LoadingRow<TData extends RowData>({\n  headers,\n  columnCount,\n  translateY,\n  rowHeight = 40,\n  columnWidth = DEFAULT_COLUMN_WIDTH,\n}: LoadingRowProps<TData>): React.ReactElement {\n  return (\n    <tr\n      className={rowStyles.osdkTableRow}\n      style={{\n        height: `${rowHeight}px`,\n        transform: `translateY(${translateY}px)`,\n      }}\n    >\n      {\n        <>\n          {Array.from({ length: columnCount }).map((_, index) => {\n            const width = headers.length > index\n              ? headers[index].getSize()\n              : columnWidth;\n            return <LoadingCell key={`loading-cell-${index}`} width={width} />;\n          })}\n        </>\n      }\n    </tr>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,OAAOC,SAAS,MAAM,uBAAuB;AAC7C,SAASC,oBAAoB,QAAQ,sBAAsB;AAU3D,OAAO,SAASC,UAAUA,CAAwB;EAChDC,OAAO;EACPC,WAAW;EACXC,UAAU;EACVC,SAAS,GAAG,EAAE;EACdC,WAAW,GAAGN;AACQ,CAAC,EAAsB;EAC7C,oBACEH,KAAA,CAAAU,aAAA;IACEC,SAAS,EAAET,SAAS,CAACU,YAAa;IAClCC,KAAK,EAAE;MACLC,MAAM,EAAE,GAAGN,SAAS,IAAI;MACxBO,SAAS,EAAE,cAAcR,UAAU;IACrC;EAAE,gBAGAP,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAgB,QAAA,QACGC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEb;EAAY,CAAC,CAAC,CAACc,GAAG,CAAC,CAACC,CAAC,EAAEC,KAAK,KAAK;IACrD,MAAMC,KAAK,GAAGlB,OAAO,CAACc,MAAM,GAAGG,KAAK,GAChCjB,OAAO,CAACiB,KAAK,CAAC,CAACE,OAAO,CAAC,CAAC,GACxBf,WAAW;IACf,oBAAOT,KAAA,CAAAU,aAAA,CAACT,WAAW;MAACwB,GAAG,EAAE,gBAAgBH,KAAK,EAAG;MAACC,KAAK,EAAEA;IAAM,CAAE,CAAC;EACpE,CAAC,CACD,CAEF,CAAC;AAET","ignoreList":[]}

package/build/esm/object-table/LoadingStateTable.js

@@ -15,7 +15,7 @@
  */
 
 import classNames from "classnames";
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
 import loadingStyles from "./LoadingCell.module.css";
 import { LoadingRow } from "./LoadingRow.js";
 import bodyStyles from "./TableBody.module.css";
@@ -30,9 +30,9 @@ export function LoadingStateTable({
   columnWidth = 120
 }) {
   // If selection enabled, there will be a header for the selection column
-  const isSelectionEnabled = table.options.enableRowSelection;
-  const minHeaderCount = isSelectionEnabled ? 1 : 0;
-  const headers = headerGroups[0]?.headers ?? [];
+  const enableRowSelection = table.options.enableRowSelection;
+  const minHeaderCount = enableRowSelection ? 1 : 0;
+  const headers = useMemo(() => headerGroups.length > 0 ? headerGroups[0].headers : [], [headerGroups]);
   const hasHeadersLoaded = headers.length > minHeaderCount;
   const headerRef = useRef(null);
   const bodyRef = useRef(null);