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

package/build/browser/object-table/TableCell.module.css

@@ -0,0 +1,83 @@
+/*
+ * 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.
+ */
+
+.osdkTableCell {
+  display: flex;
+  align-items: center;
+  height: 100%;
+  text-align: left;
+  position: relative;
+  padding: var(--osdk-table-cell-padding);
+  font-size: var(--osdk-table-cell-fontSize);
+  color: var(--osdk-table-cell-color);
+  background-color: inherit;
+  border-right: var(--osdk-table-cell-divider);
+
+  &:first-child {
+    border-left: var(--osdk-table-border);
+  }
+
+  &:last-child {
+    border-right: var(--osdk-table-border);
+  }
+}
+
+.osdkTableCell[data-pinned="left"],
+.osdkTableCell[data-pinned="right"] {
+  position: sticky;
+  z-index: var(--osdk-surface-z-index-1);
+  background-color: inherit;
+}
+
+/* Last left-pinned column - no left-pinned siblings after it */
+.osdkTableCell[data-pinned="left"]:not(:has(~ [data-pinned="left"])) {
+  border-right: var(--osdk-table-pinned-column-border);
+}
+
+/* First right-pinned column - no right-pinned siblings before it */
+.osdkTableCell[data-pinned="right"]:not(
+    :has(~ [data-pinned="right"]):nth-child(n + 2)
+  ) {
+  border-left: var(--osdk-table-pinned-column-border);
+}
+
+.osdkTableCell:has([role="checkbox"]) {
+  justify-content: center;
+  padding: 0;
+}
+
+/* Show focus state for editable cells */
+.osdkTableCell: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);
+}
+
+.osdkTableCellContent:not(:has([role="checkbox"])) {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+}
+
+.osdkCheckboxContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}

package/build/browser/object-table/TableCell.module.css.js

@@ -0,0 +1,8 @@
+// CSS Module proxy for TableCell.module.css
+const styles = {
+  "osdkTableCell": "TableCell-module__osdkTableCell___gVl6jToJ",
+  "osdkTableCellContent": "TableCell-module__osdkTableCellContent___tcj6DRaU",
+  "osdkCheckboxContainer": "TableCell-module__osdkCheckboxContainer___Ex-KJho3"
+};
+
+export default styles;

package/build/browser/object-table/TableHeader.js

@@ -1,237 +1,147 @@
-// build/browser/object-table/TableHeader.js
-import React3 from "react";
+/*
+ * 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.
+ */
 
-// build/browser/object-table/TableHeader.module.css
-var css = '/*\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\n.osdkTableHeader {\n  display: grid;\n  position: sticky;\n  top: 0;\n  z-index: var(--osdk-surface-z-index-1);\n  background-color: var(--osdk-table-header-bg);\n}\n\n.osdkTableHeader[data-resizing="true"] {\n  cursor: col-resize;\n  user-select: none;\n}\n\n.osdkTableHeaderRow {\n  display: flex;\n}\n\n.osdkTableHeaderCell {\n  display: flex;\n  align-items: center;\n  text-align: left;\n  position: relative;\n  padding: var(--osdk-table-cell-padding);\n  font-weight: var(--osdk-table-header-fontWeight);\n  font-size: var(--osdk-table-header-fontSize);\n  color: var(--osdk-table-header-color);\n  border-top: var(--osdk-table-border);\n  border-right: var(--osdk-table-header-divider);\n  background-color: inherit;\n\n  &:first-child {\n    border-left: var(--osdk-table-border);\n  }\n\n  &:last-child {\n    border-right: var(--osdk-table-border);\n  }\n}\n\n.osdkTableHeaderCell[data-pinned="left"],\n.osdkTableHeaderCell[data-pinned="right"] {\n  position: sticky;\n  z-index: var(--osdk-surface-z-index-2);\n}\n\n/* Last left-pinned column - no left-pinned siblings after it */\n.osdkTableHeaderCell[data-pinned="left"]:not(:has(~ [data-pinned="left"])) {\n  border-right: var(--osdk-table-pinned-column-border);\n}\n\n/* First right-pinned column - no right-pinned siblings before it */\n.osdkTableHeaderCell[data-pinned="right"]:not(\n    :has(~ [data-pinned="right"]):nth-child(n + 2)\n  ) {\n  border-left: var(--osdk-table-pinned-column-border);\n}\n\n.osdkTableHeaderCell:has([role="checkbox"]) {\n  justify-content: center;\n}\n\n.osdkTableHeaderResizer {\n  background: none;\n  cursor: col-resize;\n  height: 100%;\n  position: absolute;\n  right: calc(-1 * var(--osdk-table-border-width));\n  top: 0;\n  touch-action: none;\n  width: 3px;\n  z-index: var(--osdk-surface-z-index-2);\n\n  &:hover {\n    background: var(--osdk-intent-primary-hover);\n  }\n\n  &:active {\n    background: var(--osdk-intent-primary-active);\n  }\n}\n\n.osdkLoadingHeaderCell {\n  height: var(--osdk-table-header-fontSize);\n  flex: 1;\n}\n';
-if (typeof document !== "undefined") {
-  const style = document.createElement("style");
-  style.textContent = css;
-  document.head.appendChild(style);
-}
-var TableHeader_default = { "osdkTableHeader": "osdkTableHeader", "osdkTableHeaderRow": "osdkTableHeaderRow", "osdkTableHeaderCell": "osdkTableHeaderCell", "osdkTableHeaderResizer": "osdkTableHeaderResizer", "osdkLoadingHeaderCell": "osdkLoadingHeaderCell" };
-
-// build/browser/object-table/TableHeaderContent.js
-import { flexRender } from "@tanstack/react-table";
-import React from "react";
-
-// build/browser/object-table/TableHeaderContent.module.css
-var css2 = '/*\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\n.osdkHeaderContent {\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  line-clamp: 2;\n  text-align: left;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.osdkHeaderContent:has([role="checkbox"]) {\n  display: flex;\n  justify-content: center;\n}\n';
-if (typeof document !== "undefined") {
-  const style = document.createElement("style");
-  style.textContent = css2;
-  document.head.appendChild(style);
-}
-var TableHeaderContent_default = { "osdkHeaderContent": "osdkHeaderContent" };
-
-// build/browser/object-table/TableHeaderContent.js
-function TableHeaderContent({
-  header
+import React, { useCallback, useMemo, useState } from "react";
+import { ColumnConfigDialog } from "./ColumnConfigDialog.js";
+import { MultiColumnSortDialog } from "./MultiColumnSortDialog.js";
+import styles from "./TableHeader.module.css.js";
+import { TableHeaderContent } from "./TableHeaderContent.js";
+import { TableHeaderWithPopover } from "./TableHeaderWithPopover.js";
+import { SELECTION_COLUMN_ID } from "./utils/constants.js";
+import { getColumnPinningStyles } from "./utils/getColumnPinningStyles.js";
+const getHeaderName = (column, allHeaders) => {
+  const {
+    id,
+    columnDef
+  } = column;
+  const header = allHeaders.find(header => header.id === id);
+  const headerDef = columnDef.header;
+  if (headerDef) {
+    if (typeof headerDef === "string") {
+      return headerDef;
+    }
+    // Try to get header name from the renderHeader function
+    if (header) {
+      const displayedHeader = headerDef(header.getContext());
+      if (typeof displayedHeader === "string") return displayedHeader;
+    }
+  }
+  // Fallback to use the columnName provided by user or id
+  const {
+    meta
+  } = columnDef;
+  return meta?.columnName ?? id;
+};
+export function TableHeader({
+  table,
+  headerMenuFeatureFlags
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: TableHeaderContent_default.osdkHeaderContent
-  }, flexRender(header.column.columnDef.header, header.getContext()));
-}
+  // TODO: If value is number type, right align header
 
-// build/browser/object-table/TableHeaderWithPopover.js
-import { Menu } from "@base-ui/react/menu";
-import { ChevronDown, Pin, Remove, SortAlphabetical, SortAlphabeticalDesc, Unpin, VerticalDistribution } from "@blueprintjs/icons";
-import classNames from "classnames";
-import React2, { useCallback, useState } from "react";
-
-// build/browser/object-table/TableHeaderWithPopover.module.css
-var css3 = '/*\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\n.osdkCenterContainer {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.osdkContentGap {\n  display: flex;\n  gap: var(--osdk-surface-spacing);\n}\n\n.osdkHeaderContainer {\n  justify-content: space-between;\n  flex: 1;\n  min-width: 0;\n  align-self: stretch;\n}\n\n.osdkHeaderContentLeft {\n  min-width: 0;\n  flex-shrink: 1;\n}\n\n.osdkHeaderContentRight {\n  flex-shrink: 0;\n}\n\n.osdkHeaderPopoverTrigger {\n  padding: 0;\n  flex-shrink: 0;\n  flex-grow: 0;\n  border: var(--osdk-surface-border-width) solid\n    var(--osdk-surface-border-color-default);\n  border-radius: var(--osdk-surface-border-radius);\n  color: var(--osdk-intent-default-foreground);\n  user-select: none;\n  outline: none;\n\n  &:hover {\n    background-color: var(--osdk-intent-default-hover);\n  }\n\n  &[data-popup-open] {\n    background-color: var(--osdk-intent-primary-rest);\n  }\n\n  &:focus-visible {\n    outline: var(--osdk-focus-visible-outline);\n    outline-offset: var(--osdk-focus-visible-outline-offset);\n  }\n}\n\n.osdkHeaderIcon {\n  width: var(--osdk-iconography-size-small);\n  height: var(--osdk-iconography-size-small);\n}\n\n.osdkHeaderPopup {\n  box-sizing: border-box;\n  padding: var(--osdk-surface-spacing);\n  border-radius: var(--osdk-surface-border-radius);\n  border: var(--osdk-surface-border-width) solid\n    var(--osdk-surface-border-color-default);\n  background-color: var(--osdk-surface-background-color-default);\n  color: var(--osdk-typography-color-default-rest);\n  box-shadow: var(--osdk-surface-shadow-2);\n  font-size: var(--osdk-typography-size-body-medium);\n  outline: none;\n}\n\n.osdkHeaderMenuItem {\n  justify-content: flex-start;\n  padding: var(--osdk-surface-spacing);\n  cursor: pointer;\n}\n\n.osdkHeaderMenuItem:hover {\n  outline: none;\n  background-color: var(--osdk-surface-background-color-default-hover);\n  border-radius: var(--osdk-surface-border-radius);\n}\n\n.osdkHeaderActiveMenuItem {\n  background-color: var(--osdk-intent-primary-rest);\n  color: var(--osdk-intent-primary-foreground);\n}\n\n.osdkHeaderActiveMenuItem:hover {\n  background-color: var(--osdk-intent-primary-hover);\n}\n\n.osdkHeaderActiveMenuItem:active {\n  background-color: var(--osdk-intent-primary-active);\n}\n';
-if (typeof document !== "undefined") {
-  const style = document.createElement("style");
-  style.textContent = css3;
-  document.head.appendChild(style);
-}
-var TableHeaderWithPopover_default = { "osdkCenterContainer": "osdkCenterContainer", "osdkContentGap": "osdkContentGap", "osdkHeaderContainer": "osdkHeaderContainer", "osdkHeaderContentLeft": "osdkHeaderContentLeft", "osdkHeaderContentRight": "osdkHeaderContentRight", "osdkHeaderPopoverTrigger": "osdkHeaderPopoverTrigger", "osdkHeaderIcon": "osdkHeaderIcon", "osdkHeaderPopup": "osdkHeaderPopup", "osdkHeaderMenuItem": "osdkHeaderMenuItem", "osdkHeaderActiveMenuItem": "osdkHeaderActiveMenuItem" };
-
-// build/browser/object-table/TableHeaderWithPopover.js
-function HeaderMenuItem({
-  onClick,
-  icon: Icon,
-  label,
-  active = false
-}) {
-  return /* @__PURE__ */ React2.createElement(Menu.Item, {
-    closeOnClick: true,
-    className: classNames(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderMenuItem, active && TableHeaderWithPopover_default.osdkHeaderActiveMenuItem),
-    onClick
-  }, /* @__PURE__ */ React2.createElement(Icon, {
-    className: TableHeaderWithPopover_default.osdkHeaderIcon,
-    color: "currentColor"
-  }), /* @__PURE__ */ React2.createElement("span", null, label));
-}
-function TableHeaderWithPopover({
-  header,
-  isColumnPinned,
-  setColumnPinning,
-  onSortChange,
-  onResetSize
-}) {
-  const [isOpen, setIsOpen] = useState(false);
-  const handlePinLeft = useCallback(() => {
-    setColumnPinning((prev) => {
-      return {
-        left: [...prev.left || [], header.column.id],
-        right: prev.right?.filter((id) => id !== header.column.id) || []
-      };
-    });
-  }, [header.column.id, setColumnPinning]);
-  const handleUnpin = useCallback(() => {
-    setColumnPinning((prev) => {
+  const {
+    setColumnOrder,
+    setColumnVisibility,
+    setSorting
+  } = table;
+  const currentSorting = table.getState().sorting;
+  const currentVisibility = table.getState().columnVisibility;
+  const currentColumnOrder = table.getState().columnOrder;
+  const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;
+  const [configDialogOpen, setConfigDialogOpen] = useState(false);
+  const [multiSortDialogOpen, setMultiSortDialogOpen] = useState(false);
+  const handleOpenColumnConfig = useCallback(() => {
+    setConfigDialogOpen(true);
+  }, []);
+  const handleCloseColumnConfig = useCallback(() => {
+    setConfigDialogOpen(false);
+  }, []);
+  const handleOpenMultiSort = useCallback(() => {
+    setMultiSortDialogOpen(true);
+  }, []);
+  const handleCloseMultiSort = useCallback(() => {
+    setMultiSortDialogOpen(false);
+  }, []);
+  const handleApplyMultiSort = useCallback(sortColumns => {
+    setMultiSortDialogOpen(false);
+    setSorting?.(sortColumns);
+  }, [setSorting]);
+  const handleApplyColumnConfig = useCallback(updates => {
+    const newVisibilityState = {};
+    for (const update of updates) {
+      newVisibilityState[update.columnId] = update.isVisible;
+    }
+    setColumnOrder(updates.map(col => col.columnId));
+    setColumnVisibility(newVisibilityState);
+  }, [setColumnOrder, setColumnVisibility]);
+  const columnOptions = useMemo(() => {
+    const allHeaders = table.getHeaderGroups().flatMap(headerGroup => headerGroup.headers);
+    return table.getAllColumns().filter(column => column.id !== SELECTION_COLUMN_ID).map(column => {
       return {
-        left: prev.left?.filter((id) => id !== header.column.id) || [],
-        right: prev.right?.filter((id) => id !== header.column.id) || []
+        id: column.id,
+        name: getHeaderName(column, allHeaders),
+        canSort: column.getCanSort()
       };
     });
-  }, [header.column.id, setColumnPinning]);
-  const handleSortAscending = useCallback(() => {
-    header.column.toggleSorting(false);
-    onSortChange?.([{
-      id: header.column.id,
-      desc: false
-    }]);
-  }, [header.column, onSortChange]);
-  const handleSortDescending = useCallback(() => {
-    header.column.toggleSorting(true);
-    onSortChange?.([{
-      id: header.column.id,
-      desc: true
-    }]);
-  }, [header.column, onSortChange]);
-  const handleClearAllSorts = useCallback(() => {
-    header.column.clearSorting();
-    onSortChange?.([]);
-  }, [header.column, onSortChange]);
-  const handleResetSize = useCallback(() => {
-    header.column.resetSize();
-    if (onResetSize) {
-      onResetSize();
-    }
-  }, [header.column, onResetSize]);
-  const handleInteraction = useCallback((e) => {
-    e.preventDefault();
-    setIsOpen((prev) => !prev);
-  }, []);
-  const isSorted = header.column.getIsSorted();
-  const isSortable = header.column.getCanSort();
-  return /* @__PURE__ */ React2.createElement(Menu.Root, {
-    open: isOpen,
-    onOpenChange: setIsOpen
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: classNames(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
-    onContextMenu: handleInteraction
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: classNames(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentLeft)
-  }, isColumnPinned && /* @__PURE__ */ React2.createElement(Pin, {
-    className: TableHeaderWithPopover_default.osdkHeaderIcon,
-    color: "currentColor"
-  }), /* @__PURE__ */ React2.createElement(TableHeaderContent, {
-    header
-  })), /* @__PURE__ */ React2.createElement("div", {
-    className: classNames(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContentRight)
-  }, isSorted && /* @__PURE__ */ React2.createElement("div", {
-    className: TableHeaderWithPopover_default.osdkCenterContainer
-  }, isSorted === "asc" ? /* @__PURE__ */ React2.createElement(SortAlphabetical, {
-    className: TableHeaderWithPopover_default.osdkHeaderIcon,
-    color: "currentColor"
-  }) : /* @__PURE__ */ React2.createElement(SortAlphabeticalDesc, {
-    className: TableHeaderWithPopover_default.osdkHeaderIcon,
-    color: "currentColor"
-  })), /* @__PURE__ */ React2.createElement(Menu.Trigger, {
-    "aria-label": `Open header menu for column with id=${header.column.id}`,
-    className: classNames(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkHeaderPopoverTrigger)
-  }, /* @__PURE__ */ React2.createElement(ChevronDown, {
-    className: TableHeaderWithPopover_default.osdkHeaderIcon
-  }))), /* @__PURE__ */ React2.createElement(Menu.Portal, {
-    container: document.body
-  }, /* @__PURE__ */ React2.createElement(Menu.Positioner, {
-    sideOffset: 4
-  }, /* @__PURE__ */ React2.createElement(Menu.Popup, {
-    className: TableHeaderWithPopover_default.osdkHeaderPopup
-  }, !isColumnPinned && /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
-    onClick: handlePinLeft,
-    icon: Pin,
-    label: "Pin column"
-  }), isColumnPinned && /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
-    onClick: handleUnpin,
-    icon: Unpin,
-    label: "Unpin Column",
-    active: true
-  }), isSortable && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
-    onClick: handleSortAscending,
-    icon: SortAlphabetical,
-    label: "Sort ascending",
-    active: isSorted === "asc"
-  }), /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
-    onClick: handleSortDescending,
-    icon: SortAlphabeticalDesc,
-    label: "Sort descending",
-    active: isSorted === "desc"
-  })), !!isSorted && /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
-    onClick: handleClearAllSorts,
-    icon: Remove,
-    label: "Clear all sorts"
-  }), /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
-    onClick: handleResetSize,
-    icon: VerticalDistribution,
-    label: "Reset Column Size"
-  }))))));
-}
-
-// build/browser/object-table/utils/constants.js
-var SELECTION_COLUMN_ID = "__selection__";
-
-// build/browser/object-table/utils/getColumnPinningStyles.js
-function getColumnPinningStyles(column) {
-  const isPinned = column.getIsPinned();
-  return {
-    columnStyles: {
-      left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
-      right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
-      width: column.getSize()
-    }
-  };
-}
-
-// build/browser/object-table/TableHeader.js
-function TableHeader({
-  table
-}) {
-  const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;
-  return /* @__PURE__ */ React3.createElement("thead", {
-    className: TableHeader_default.osdkTableHeader,
+  }, [table]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("thead", {
+    className: styles.osdkTableHeader,
     "data-resizing": isResizing
-  }, table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ React3.createElement("tr", {
+  }, table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React.createElement("tr", {
     key: headerGroup.id,
-    className: TableHeader_default.osdkTableHeaderRow
-  }, headerGroup.headers.map((header) => {
+    className: styles.osdkTableHeaderRow
+  }, headerGroup.headers.map(header => {
     const {
       columnStyles
     } = getColumnPinningStyles(header.column);
     const isColumnPinned = header.column.getIsPinned();
     const isSelectColumn = header.id === SELECTION_COLUMN_ID;
-    return /* @__PURE__ */ React3.createElement("th", {
+    return /*#__PURE__*/React.createElement("th", {
       key: header.id,
       "data-pinned": header.column.getIsPinned(),
-      className: TableHeader_default.osdkTableHeaderCell,
+      className: styles.osdkTableHeaderCell,
       style: columnStyles
-    }, header.isPlaceholder ? null : isSelectColumn ? /* @__PURE__ */ React3.createElement(TableHeaderContent, {
-      header
-    }) : /* @__PURE__ */ React3.createElement(TableHeaderWithPopover, {
-      header,
-      isColumnPinned,
-      setColumnPinning: table.setColumnPinning
-    }), header.column.getCanResize() && /* @__PURE__ */ React3.createElement("div", {
-      className: TableHeader_default.osdkTableHeaderResizer,
+    }, header.isPlaceholder ? null : isSelectColumn ? /*#__PURE__*/React.createElement(TableHeaderContent, {
+      header: header
+    }) : /*#__PURE__*/React.createElement(TableHeaderWithPopover, {
+      table: table,
+      header: header,
+      isColumnPinned: isColumnPinned,
+      columnOptions: columnOptions,
+      featureFlags: headerMenuFeatureFlags,
+      onOpenColumnConfig: handleOpenColumnConfig,
+      onOpenMultiSort: handleOpenMultiSort
+    }), header.column.getCanResize() && headerMenuFeatureFlags?.showResizeItem !== false && /*#__PURE__*/React.createElement("div", {
+      className: styles.osdkTableHeaderResizer,
       onDoubleClick: () => header.column.resetSize(),
       onMouseDown: header.getResizeHandler(),
       onTouchStart: header.getResizeHandler()
     }));
-  }))));
+  })))), !!columnOptions?.length && /*#__PURE__*/React.createElement(ColumnConfigDialog, {
+    isOpen: configDialogOpen,
+    onClose: handleCloseColumnConfig,
+    columnOptions: columnOptions,
+    currentVisibility: currentVisibility,
+    currentColumnOrder: currentColumnOrder,
+    onApply: handleApplyColumnConfig
+  }), columnOptions?.some(col => col.canSort) && /*#__PURE__*/React.createElement(MultiColumnSortDialog, {
+    isOpen: multiSortDialogOpen,
+    onClose: handleCloseMultiSort,
+    columnOptions: columnOptions,
+    currentSorting: currentSorting,
+    onApply: handleApplyMultiSort
+  }));
 }
-export {
-  TableHeader
-};
+//# sourceMappingURL=TableHeader.js.map

package/build/browser/object-table/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","names":["React","styles","TableHeaderContent","TableHeaderWithPopover","SELECTION_COLUMN_ID","getColumnPinningStyles","TableHeader","table","isResizing","getState","columnSizingInfo","isResizingColumn","createElement","className","osdkTableHeader","getHeaderGroups","map","headerGroup","key","id","osdkTableHeaderRow","headers","header","columnStyles","column","isColumnPinned","getIsPinned","isSelectColumn","osdkTableHeaderCell","style","isPlaceholder","setColumnPinning","getCanResize","osdkTableHeaderResizer","onDoubleClick","resetSize","onMouseDown","getResizeHandler","onTouchStart"],"sources":["TableHeader.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 { RowData, Table } from \"@tanstack/react-table\";\nimport React from \"react\";\nimport styles from \"./TableHeader.module.css\";\nimport { TableHeaderContent } from \"./TableHeaderContent.js\";\nimport { TableHeaderWithPopover } from \"./TableHeaderWithPopover.js\";\nimport { SELECTION_COLUMN_ID } from \"./utils/constants.js\";\nimport { getColumnPinningStyles } from \"./utils/getColumnPinningStyles.js\";\n\ninterface TableHeaderProps<TData extends RowData> {\n  table: Table<TData>;\n}\n\nexport function TableHeader<TData extends RowData>({\n  table,\n}: TableHeaderProps<TData>): React.ReactElement {\n  // TODO: If value is number type, right align header\n\n  const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;\n\n  return (\n    <thead className={styles.osdkTableHeader} data-resizing={isResizing}>\n      {table.getHeaderGroups().map((headerGroup) => (\n        <tr\n          key={headerGroup.id}\n          className={styles.osdkTableHeaderRow}\n        >\n          {headerGroup.headers.map((header) => {\n            const { columnStyles } = getColumnPinningStyles(header.column);\n            const isColumnPinned = header.column.getIsPinned();\n            const isSelectColumn = header.id === SELECTION_COLUMN_ID;\n            return (\n              <th\n                key={header.id}\n                data-pinned={header.column.getIsPinned()}\n                className={styles.osdkTableHeaderCell}\n                style={columnStyles}\n              >\n                {header.isPlaceholder\n                  ? null\n                  : isSelectColumn\n                  ? <TableHeaderContent header={header} />\n                  : (\n                    <TableHeaderWithPopover\n                      header={header}\n                      isColumnPinned={isColumnPinned}\n                      setColumnPinning={table.setColumnPinning}\n                    />\n                  )}\n                {header.column.getCanResize() && (\n                  <div\n                    className={styles.osdkTableHeaderResizer}\n                    onDoubleClick={() => header.column.resetSize()}\n                    onMouseDown={header.getResizeHandler()}\n                    onTouchStart={header.getResizeHandler()}\n                  />\n                )}\n              </th>\n            );\n          })}\n        </tr>\n      ))}\n    </thead>\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,OAAOC,MAAM,MAAM,0BAA0B;AAC7C,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,sBAAsB,QAAQ,6BAA6B;AACpE,SAASC,mBAAmB,QAAQ,sBAAsB;AAC1D,SAASC,sBAAsB,QAAQ,mCAAmC;AAM1E,OAAO,SAASC,WAAWA,CAAwB;EACjDC;AACuB,CAAC,EAAsB;EAC9C;;EAEA,MAAMC,UAAU,GAAG,CAAC,CAACD,KAAK,CAACE,QAAQ,CAAC,CAAC,CAACC,gBAAgB,EAAEC,gBAAgB;EAExE,oBACEX,KAAA,CAAAY,aAAA;IAAOC,SAAS,EAAEZ,MAAM,CAACa,eAAgB;IAAC,iBAAeN;EAAW,GACjED,KAAK,CAACQ,eAAe,CAAC,CAAC,CAACC,GAAG,CAAEC,WAAW,iBACvCjB,KAAA,CAAAY,aAAA;IACEM,GAAG,EAAED,WAAW,CAACE,EAAG;IACpBN,SAAS,EAAEZ,MAAM,CAACmB;EAAmB,GAEpCH,WAAW,CAACI,OAAO,CAACL,GAAG,CAAEM,MAAM,IAAK;IACnC,MAAM;MAAEC;IAAa,CAAC,GAAGlB,sBAAsB,CAACiB,MAAM,CAACE,MAAM,CAAC;IAC9D,MAAMC,cAAc,GAAGH,MAAM,CAACE,MAAM,CAACE,WAAW,CAAC,CAAC;IAClD,MAAMC,cAAc,GAAGL,MAAM,CAACH,EAAE,KAAKf,mBAAmB;IACxD,oBACEJ,KAAA,CAAAY,aAAA;MACEM,GAAG,EAAEI,MAAM,CAACH,EAAG;MACf,eAAaG,MAAM,CAACE,MAAM,CAACE,WAAW,CAAC,CAAE;MACzCb,SAAS,EAAEZ,MAAM,CAAC2B,mBAAoB;MACtCC,KAAK,EAAEN;IAAa,GAEnBD,MAAM,CAACQ,aAAa,GACjB,IAAI,GACJH,cAAc,gBACd3B,KAAA,CAAAY,aAAA,CAACV,kBAAkB;MAACoB,MAAM,EAAEA;IAAO,CAAE,CAAC,gBAEtCtB,KAAA,CAAAY,aAAA,CAACT,sBAAsB;MACrBmB,MAAM,EAAEA,MAAO;MACfG,cAAc,EAAEA,cAAe;MAC/BM,gBAAgB,EAAExB,KAAK,CAACwB;IAAiB,CAC1C,CACF,EACFT,MAAM,CAACE,MAAM,CAACQ,YAAY,CAAC,CAAC,iBAC3BhC,KAAA,CAAAY,aAAA;MACEC,SAAS,EAAEZ,MAAM,CAACgC,sBAAuB;MACzCC,aAAa,EAAEA,CAAA,KAAMZ,MAAM,CAACE,MAAM,CAACW,SAAS,CAAC,CAAE;MAC/CC,WAAW,EAAEd,MAAM,CAACe,gBAAgB,CAAC,CAAE;MACvCC,YAAY,EAAEhB,MAAM,CAACe,gBAAgB,CAAC;IAAE,CACzC,CAED,CAAC;EAET,CAAC,CACC,CACL,CACI,CAAC;AAEZ","ignoreList":[]}
+{"version":3,"file":"TableHeader.js","names":["React","useCallback","useMemo","useState","ColumnConfigDialog","MultiColumnSortDialog","styles","TableHeaderContent","TableHeaderWithPopover","SELECTION_COLUMN_ID","getColumnPinningStyles","getHeaderName","column","allHeaders","id","columnDef","header","find","headerDef","displayedHeader","getContext","meta","columnName","TableHeader","table","headerMenuFeatureFlags","setColumnOrder","setColumnVisibility","setSorting","currentSorting","getState","sorting","currentVisibility","columnVisibility","currentColumnOrder","columnOrder","isResizing","columnSizingInfo","isResizingColumn","configDialogOpen","setConfigDialogOpen","multiSortDialogOpen","setMultiSortDialogOpen","handleOpenColumnConfig","handleCloseColumnConfig","handleOpenMultiSort","handleCloseMultiSort","handleApplyMultiSort","sortColumns","handleApplyColumnConfig","updates","newVisibilityState","update","columnId","isVisible","map","col","columnOptions","getHeaderGroups","flatMap","headerGroup","headers","getAllColumns","filter","name","canSort","getCanSort","createElement","Fragment","className","osdkTableHeader","key","osdkTableHeaderRow","columnStyles","isColumnPinned","getIsPinned","isSelectColumn","osdkTableHeaderCell","style","isPlaceholder","featureFlags","onOpenColumnConfig","onOpenMultiSort","getCanResize","showResizeItem","osdkTableHeaderResizer","onDoubleClick","resetSize","onMouseDown","getResizeHandler","onTouchStart","length","isOpen","onClose","onApply","some"],"sources":["TableHeader.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 {\n  Column,\n  Header,\n  RowData,\n  SortingState,\n  Table,\n  VisibilityState,\n} from \"@tanstack/react-table\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport { type ColumnConfig, ColumnConfigDialog } from \"./ColumnConfigDialog.js\";\nimport { MultiColumnSortDialog } from \"./MultiColumnSortDialog.js\";\nimport styles from \"./TableHeader.module.css\";\nimport { TableHeaderContent } from \"./TableHeaderContent.js\";\nimport {\n  type HeaderMenuFeatureFlags,\n  TableHeaderWithPopover,\n} from \"./TableHeaderWithPopover.js\";\nimport { SELECTION_COLUMN_ID } from \"./utils/constants.js\";\nimport { getColumnPinningStyles } from \"./utils/getColumnPinningStyles.js\";\nimport type { ColumnOption } from \"./utils/types.js\";\n\ninterface TableHeaderProps<\n  TData extends RowData,\n> {\n  table: Table<TData>;\n  headerMenuFeatureFlags?: HeaderMenuFeatureFlags;\n}\n\nconst getHeaderName = <TData,>(\n  column: Column<TData, unknown>,\n  allHeaders: Header<TData, unknown>[],\n) => {\n  const { id, columnDef } = column;\n  const header = allHeaders.find(header => header.id === id);\n  const headerDef = columnDef.header;\n\n  if (headerDef) {\n    if (typeof headerDef === \"string\") {\n      return headerDef;\n    }\n    // Try to get header name from the renderHeader function\n    if (header) {\n      const displayedHeader = headerDef(header.getContext());\n      if (typeof displayedHeader === \"string\") return displayedHeader;\n    }\n  }\n  // Fallback to use the columnName provided by user or id\n  const { meta } = columnDef;\n  return meta?.columnName ?? id;\n};\n\nexport function TableHeader<\n  TData extends RowData,\n>({\n  table,\n  headerMenuFeatureFlags,\n}: TableHeaderProps<TData>): React.ReactElement {\n  // TODO: If value is number type, right align header\n\n  const {\n    setColumnOrder,\n    setColumnVisibility,\n    setSorting,\n  } = table;\n\n  const currentSorting = table.getState().sorting;\n  const currentVisibility = table.getState().columnVisibility;\n  const currentColumnOrder = table.getState().columnOrder;\n\n  const isResizing = !!table.getState().columnSizingInfo?.isResizingColumn;\n\n  const [configDialogOpen, setConfigDialogOpen] = useState(false);\n  const [multiSortDialogOpen, setMultiSortDialogOpen] = useState(false);\n\n  const handleOpenColumnConfig = useCallback(() => {\n    setConfigDialogOpen(true);\n  }, []);\n\n  const handleCloseColumnConfig = useCallback(() => {\n    setConfigDialogOpen(false);\n  }, []);\n\n  const handleOpenMultiSort = useCallback(() => {\n    setMultiSortDialogOpen(true);\n  }, []);\n\n  const handleCloseMultiSort = useCallback(() => {\n    setMultiSortDialogOpen(false);\n  }, []);\n\n  const handleApplyMultiSort = useCallback(\n    (sortColumns: SortingState) => {\n      setMultiSortDialogOpen(false);\n      setSorting?.(sortColumns);\n    },\n    [setSorting],\n  );\n\n  const handleApplyColumnConfig = useCallback(\n    (updates: ColumnConfig[]) => {\n      const newVisibilityState: VisibilityState = {};\n      for (const update of updates) {\n        newVisibilityState[update.columnId] = update.isVisible;\n      }\n\n      setColumnOrder(updates.map(col => col.columnId));\n      setColumnVisibility(newVisibilityState);\n    },\n    [setColumnOrder, setColumnVisibility],\n  );\n\n  const columnOptions: ColumnOption[] = useMemo(() => {\n    const allHeaders = table.getHeaderGroups().flatMap(headerGroup =>\n      headerGroup.headers\n    );\n\n    return table\n      .getAllColumns()\n      .filter((column) => column.id !== SELECTION_COLUMN_ID)\n      .map((column) => {\n        return {\n          id: column.id,\n          name: getHeaderName(column, allHeaders),\n          canSort: column.getCanSort(),\n        };\n      });\n  }, [table]);\n\n  return (\n    <>\n      <thead className={styles.osdkTableHeader} data-resizing={isResizing}>\n        {table.getHeaderGroups().map((headerGroup) => (\n          <tr\n            key={headerGroup.id}\n            className={styles.osdkTableHeaderRow}\n          >\n            {headerGroup.headers.map((header) => {\n              const { columnStyles } = getColumnPinningStyles(header.column);\n              const isColumnPinned = header.column.getIsPinned();\n              const isSelectColumn = header.id === SELECTION_COLUMN_ID;\n              return (\n                <th\n                  key={header.id}\n                  data-pinned={header.column.getIsPinned()}\n                  className={styles.osdkTableHeaderCell}\n                  style={columnStyles}\n                >\n                  {header.isPlaceholder\n                    ? null\n                    : isSelectColumn\n                    ? <TableHeaderContent header={header} />\n                    : (\n                      <TableHeaderWithPopover\n                        table={table}\n                        header={header}\n                        isColumnPinned={isColumnPinned}\n                        columnOptions={columnOptions}\n                        featureFlags={headerMenuFeatureFlags}\n                        onOpenColumnConfig={handleOpenColumnConfig}\n                        onOpenMultiSort={handleOpenMultiSort}\n                      />\n                    )}\n                  {header.column.getCanResize()\n                    && headerMenuFeatureFlags?.showResizeItem !== false && (\n                    <div\n                      className={styles.osdkTableHeaderResizer}\n                      onDoubleClick={() => header.column.resetSize()}\n                      onMouseDown={header.getResizeHandler()}\n                      onTouchStart={header.getResizeHandler()}\n                    />\n                  )}\n                </th>\n              );\n            })}\n          </tr>\n        ))}\n      </thead>\n      {!!columnOptions?.length && (\n        <ColumnConfigDialog\n          isOpen={configDialogOpen}\n          onClose={handleCloseColumnConfig}\n          columnOptions={columnOptions}\n          currentVisibility={currentVisibility}\n          currentColumnOrder={currentColumnOrder}\n          onApply={handleApplyColumnConfig}\n        />\n      )}\n      {columnOptions?.some(col => col.canSort) && (\n        <MultiColumnSortDialog\n          isOpen={multiSortDialogOpen}\n          onClose={handleCloseMultiSort}\n          columnOptions={columnOptions}\n          currentSorting={currentSorting}\n          onApply={handleApplyMultiSort}\n        />\n      )}\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/browser/object-table/TableHeader.module.css

@@ -0,0 +1,108 @@
+/*
+ * 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.
+ */
+
+.osdkTableHeader {
+  display: grid;
+  position: sticky;
+  top: 0;
+  width: max-content;
+  min-width: 100%;
+  height: var(--osdk-table-header-height);
+  z-index: var(--osdk-surface-z-index-1);
+  background-color: var(--osdk-table-header-bg);
+}
+
+.osdkTableHeader[data-resizing="true"] {
+  cursor: col-resize;
+  user-select: none;
+}
+
+.osdkTableHeaderRow {
+  display: flex;
+  width: max-content;
+  min-width: 100%;
+  border-bottom: var(--osdk-table-border);
+}
+
+.osdkTableHeaderCell {
+  display: flex;
+  align-items: center;
+  text-align: left;
+  position: relative;
+  padding: var(--osdk-table-cell-padding);
+  font-weight: var(--osdk-table-header-fontWeight);
+  font-size: var(--osdk-table-header-fontSize);
+  color: var(--osdk-table-header-color);
+  border-top: var(--osdk-table-border);
+  border-right: var(--osdk-table-header-divider);
+  background-color: inherit;
+
+  &:first-child {
+    border-left: var(--osdk-table-border);
+  }
+
+  &:last-child {
+    border-right: var(--osdk-table-border);
+  }
+}
+
+.osdkTableHeaderCell[data-pinned="left"],
+.osdkTableHeaderCell[data-pinned="right"] {
+  position: sticky;
+  z-index: var(--osdk-surface-z-index-2);
+  background-color: var(--osdk-table-header-bg);
+}
+
+/* Last left-pinned column - no left-pinned siblings after it */
+.osdkTableHeaderCell[data-pinned="left"]:not(:has(~ [data-pinned="left"])) {
+  border-right: var(--osdk-table-pinned-column-border);
+}
+
+/* First right-pinned column - no right-pinned siblings before it */
+.osdkTableHeaderCell[data-pinned="right"]:not(
+    :has(~ [data-pinned="right"]):nth-child(n + 2)
+  ) {
+  border-left: var(--osdk-table-pinned-column-border);
+}
+
+.osdkTableHeaderCell:has([role="checkbox"]) {
+  justify-content: center;
+}
+
+.osdkTableHeaderResizer {
+  background: none;
+  cursor: col-resize;
+  height: 100%;
+  position: absolute;
+  right: calc(-1 * var(--osdk-table-border-width));
+  top: 0;
+  touch-action: none;
+  width: 3px;
+  z-index: var(--osdk-surface-z-index-2);
+
+  &:hover {
+    background: var(--osdk-table-resizer-color-hover);
+  }
+
+  &:active {
+    background: var(--osdk-table-resizer-color-active);
+  }
+}
+
+.osdkLoadingHeaderCell {
+  height: var(--osdk-table-header-fontSize);
+  flex: 1;
+}

package/build/browser/object-table/TableHeader.module.css.js

@@ -0,0 +1,10 @@
+// CSS Module proxy for TableHeader.module.css
+const styles = {
+  "osdkTableHeader": "TableHeader-module__osdkTableHeader___4Wzqkog9",
+  "osdkTableHeaderRow": "TableHeader-module__osdkTableHeaderRow___lUjQpm91",
+  "osdkTableHeaderCell": "TableHeader-module__osdkTableHeaderCell___iS9lGU8Z",
+  "osdkTableHeaderResizer": "TableHeader-module__osdkTableHeaderResizer___qpjGLncF",
+  "osdkLoadingHeaderCell": "TableHeader-module__osdkLoadingHeaderCell___gohWQuYX"
+};
+
+export default styles;