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

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

@@ -1,24 +1,27 @@
-// build/browser/object-table/TableHeaderContent.js
+/*
+ * 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 { flexRender } from "@tanstack/react-table";
 import React from "react";
-
-// build/browser/object-table/TableHeaderContent.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.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 = css;
-  document.head.appendChild(style);
-}
-var TableHeaderContent_default = { "osdkHeaderContent": "osdkHeaderContent" };
-
-// build/browser/object-table/TableHeaderContent.js
-function TableHeaderContent({
+import styles from "./TableHeaderContent.module.css.js";
+export function TableHeaderContent({
   header
 }) {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: TableHeaderContent_default.osdkHeaderContent
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.osdkHeaderContent
   }, flexRender(header.column.columnDef.header, header.getContext()));
 }
-export {
-  TableHeaderContent
-};
+//# sourceMappingURL=TableHeaderContent.js.map

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

@@ -0,0 +1,30 @@
+/*
+ * 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.
+ */
+
+.osdkHeaderContent {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.osdkHeaderContent:has([role="checkbox"]) {
+  display: flex;
+  justify-content: center;
+}

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

@@ -0,0 +1,6 @@
+// CSS Module proxy for TableHeaderContent.module.css
+const styles = {
+  "osdkHeaderContent": "TableHeaderContent-module__osdkHeaderContent___UQM9R9VU"
+};
+
+export default styles;

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

@@ -1,169 +1,186 @@
-// build/browser/object-table/TableHeaderWithPopover.js
+/*
+ * 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 { Menu } from "@base-ui/react/menu";
-import { ChevronDown, Pin, Remove, SortAlphabetical, SortAlphabeticalDesc, Unpin, VerticalDistribution } from "@blueprintjs/icons";
+import { ChevronDown, Pin, Remove, Settings, Sort, SortAlphabetical, SortAlphabeticalDesc, Unpin, VerticalDistribution } from "@blueprintjs/icons";
 import classNames from "classnames";
-import React2, { useCallback, useState } from "react";
-
-// build/browser/object-table/TableHeaderContent.js
-import { flexRender } from "@tanstack/react-table";
-import React from "react";
-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.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 = css;
-  document.head.appendChild(style);
-}
-var TableHeaderContent_default = { "osdkHeaderContent": "osdkHeaderContent" };
-function TableHeaderContent({
-  header
-}) {
-  return /* @__PURE__ */ React.createElement("div", {
-    className: TableHeaderContent_default.osdkHeaderContent
-  }, flexRender(header.column.columnDef.header, header.getContext()));
-}
-
-// build/browser/object-table/TableHeaderWithPopover.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.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 = css2;
-  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
+import React, { useCallback, useState } from "react";
+import { TableHeaderContent } from "./TableHeaderContent.js";
+import styles from "./TableHeaderWithPopover.module.css.js";
 function HeaderMenuItem({
   onClick,
   icon: Icon,
   label,
   active = false
 }) {
-  return /* @__PURE__ */ React2.createElement(Menu.Item, {
+  return /*#__PURE__*/React.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,
+    className: classNames(styles.osdkCenterContainer, styles.osdkContentGap, styles.osdkHeaderMenuItem, active && styles.osdkHeaderActiveMenuItem),
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: styles.osdkHeaderIcon,
     color: "currentColor"
-  }), /* @__PURE__ */ React2.createElement("span", null, label));
+  }), /*#__PURE__*/React.createElement("span", null, label));
 }
-function TableHeaderWithPopover({
+export function TableHeaderWithPopover({
   header,
+  table,
   isColumnPinned,
-  setColumnPinning,
-  onSortChange,
-  onResetSize
+  onResetSize,
+  columnOptions,
+  featureFlags,
+  onOpenColumnConfig,
+  onOpenMultiSort
 }) {
+  const {
+    showSortingItems = false,
+    showPinningItems = false,
+    showResizeItem = false,
+    showConfigItem = false
+  } = featureFlags ?? {};
+  const {
+    setColumnPinning,
+    setSorting
+  } = table;
+  const currentSorting = table.getState().sorting;
   const [isOpen, setIsOpen] = useState(false);
   const handlePinLeft = useCallback(() => {
-    setColumnPinning((prev) => {
+    setColumnPinning(prev => {
       return {
-        left: [...prev.left || [], header.column.id],
-        right: prev.right?.filter((id) => id !== header.column.id) || []
+        left: [...(prev.left || []), header.column.id],
+        right: prev.right?.filter(id => id !== header.column.id) || []
       };
     });
   }, [header.column.id, setColumnPinning]);
   const handleUnpin = useCallback(() => {
-    setColumnPinning((prev) => {
+    setColumnPinning(prev => {
       return {
-        left: prev.left?.filter((id) => id !== header.column.id) || [],
-        right: prev.right?.filter((id) => id !== header.column.id) || []
+        left: prev.left?.filter(id => id !== header.column.id) || [],
+        right: prev.right?.filter(id => id !== header.column.id) || []
       };
     });
   }, [header.column.id, setColumnPinning]);
   const handleSortAscending = useCallback(() => {
     header.column.toggleSorting(false);
-    onSortChange?.([{
+    setSorting?.([{
       id: header.column.id,
       desc: false
     }]);
-  }, [header.column, onSortChange]);
+  }, [header.column, setSorting]);
   const handleSortDescending = useCallback(() => {
     header.column.toggleSorting(true);
-    onSortChange?.([{
+    setSorting?.([{
       id: header.column.id,
       desc: true
     }]);
-  }, [header.column, onSortChange]);
+  }, [header.column, setSorting]);
   const handleClearAllSorts = useCallback(() => {
     header.column.clearSorting();
-    onSortChange?.([]);
-  }, [header.column, onSortChange]);
+    setSorting?.([]);
+  }, [header.column, setSorting]);
   const handleResetSize = useCallback(() => {
     header.column.resetSize();
     if (onResetSize) {
       onResetSize();
     }
   }, [header.column, onResetSize]);
-  const handleInteraction = useCallback((e) => {
+  const handleInteraction = useCallback(e => {
     e.preventDefault();
-    setIsOpen((prev) => !prev);
+    setIsOpen(prev => !prev);
   }, []);
+  const handleOpenColumnConfig = useCallback(() => {
+    onOpenColumnConfig?.();
+    setIsOpen(false);
+  }, [onOpenColumnConfig]);
+  const handleOpenMultiSort = useCallback(() => {
+    onOpenMultiSort?.();
+    setIsOpen(false);
+  }, [onOpenMultiSort]);
   const isSorted = header.column.getIsSorted();
   const isSortable = header.column.getCanSort();
-  return /* @__PURE__ */ React2.createElement(Menu.Root, {
+  const sortIndex = currentSorting?.findIndex(s => s.id === header.column.id) ?? -1;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Menu.Root, {
     open: isOpen,
     onOpenChange: setIsOpen
-  }, /* @__PURE__ */ React2.createElement("div", {
-    className: classNames(TableHeaderWithPopover_default.osdkCenterContainer, TableHeaderWithPopover_default.osdkContentGap, TableHeaderWithPopover_default.osdkHeaderContainer),
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.osdkCenterContainer, styles.osdkContentGap, styles.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,
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.osdkCenterContainer, styles.osdkContentGap, styles.osdkHeaderContentLeft)
+  }, isColumnPinned && /*#__PURE__*/React.createElement(Pin, {
+    className: styles.osdkHeaderIcon,
     color: "currentColor"
-  })), /* @__PURE__ */ React2.createElement(Menu.Trigger, {
+  }), /*#__PURE__*/React.createElement(TableHeaderContent, {
+    header: header
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.osdkCenterContainer, styles.osdkContentGap, styles.osdkHeaderContentRight)
+  }, isSorted && /*#__PURE__*/React.createElement("div", {
+    className: styles.osdkCenterContainer
+  }, isSorted === "asc" ? /*#__PURE__*/React.createElement(SortAlphabetical, {
+    className: styles.osdkHeaderIcon
+  }) : /*#__PURE__*/React.createElement(SortAlphabeticalDesc, {
+    className: styles.osdkHeaderIcon
+  }), currentSorting.length > 1 && sortIndex >= 0 && /*#__PURE__*/React.createElement("span", {
+    className: styles.sortIndex
+  }, sortIndex + 1)), (showPinningItems || showSortingItems && isSortable || showResizeItem || showConfigItem) && /*#__PURE__*/React.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, {
+    className: classNames(styles.osdkCenterContainer, styles.osdkHeaderPopoverTrigger)
+  }, /*#__PURE__*/React.createElement(ChevronDown, {
+    className: styles.osdkHeaderIcon
+  }))), /*#__PURE__*/React.createElement(Menu.Portal, {
     container: document.body
-  }, /* @__PURE__ */ React2.createElement(Menu.Positioner, {
+  }, /*#__PURE__*/React.createElement(Menu.Positioner, {
     sideOffset: 4
-  }, /* @__PURE__ */ React2.createElement(Menu.Popup, {
-    className: TableHeaderWithPopover_default.osdkHeaderPopup
-  }, !isColumnPinned && /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
+  }, /*#__PURE__*/React.createElement(Menu.Popup, {
+    className: styles.osdkHeaderPopup
+  }, showPinningItems && !isColumnPinned && /*#__PURE__*/React.createElement(HeaderMenuItem, {
     onClick: handlePinLeft,
     icon: Pin,
     label: "Pin column"
-  }), isColumnPinned && /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
+  }), showPinningItems && isColumnPinned && /*#__PURE__*/React.createElement(HeaderMenuItem, {
     onClick: handleUnpin,
     icon: Unpin,
     label: "Unpin Column",
     active: true
-  }), isSortable && /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
+  }), showSortingItems && isSortable && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HeaderMenuItem, {
     onClick: handleSortAscending,
     icon: SortAlphabetical,
     label: "Sort ascending",
     active: isSorted === "asc"
-  }), /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
+  }), /*#__PURE__*/React.createElement(HeaderMenuItem, {
     onClick: handleSortDescending,
     icon: SortAlphabeticalDesc,
     label: "Sort descending",
     active: isSorted === "desc"
-  })), !!isSorted && /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
+  }), columnOptions?.some(col => col.canSort) && /*#__PURE__*/React.createElement(HeaderMenuItem, {
+    onClick: handleOpenMultiSort,
+    icon: Sort,
+    label: "Sort on multiple columns"
+  })), showSortingItems && !!currentSorting?.length && /*#__PURE__*/React.createElement(HeaderMenuItem, {
     onClick: handleClearAllSorts,
     icon: Remove,
     label: "Clear all sorts"
-  }), /* @__PURE__ */ React2.createElement(HeaderMenuItem, {
+  }), showResizeItem && /*#__PURE__*/React.createElement(HeaderMenuItem, {
     onClick: handleResetSize,
     icon: VerticalDistribution,
     label: "Reset Column Size"
-  }))))));
+  }), showConfigItem && /*#__PURE__*/React.createElement(HeaderMenuItem, {
+    onClick: handleOpenColumnConfig,
+    icon: Settings,
+    label: "Configure Columns"
+  })))))));
 }
-export {
-  TableHeaderWithPopover
-};
+//# sourceMappingURL=TableHeaderWithPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"TableHeaderWithPopover.js","names":["Menu","ChevronDown","Pin","Remove","SortAlphabetical","SortAlphabeticalDesc","Unpin","VerticalDistribution","classNames","React","useCallback","useState","TableHeaderContent","styles","HeaderMenuItem","onClick","icon","Icon","label","active","createElement","Item","closeOnClick","className","osdkCenterContainer","osdkContentGap","osdkHeaderMenuItem","osdkHeaderActiveMenuItem","osdkHeaderIcon","color","TableHeaderWithPopover","header","isColumnPinned","setColumnPinning","onSortChange","onResetSize","isOpen","setIsOpen","handlePinLeft","prev","left","column","id","right","filter","handleUnpin","handleSortAscending","toggleSorting","desc","handleSortDescending","handleClearAllSorts","clearSorting","handleResetSize","resetSize","handleInteraction","e","preventDefault","isSorted","getIsSorted","isSortable","getCanSort","Root","open","onOpenChange","osdkHeaderContainer","onContextMenu","osdkHeaderContentLeft","osdkHeaderContentRight","Trigger","osdkHeaderPopoverTrigger","Portal","container","document","body","Positioner","sideOffset","Popup","osdkHeaderPopup","Fragment"],"sources":["TableHeaderWithPopover.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 { Menu } from \"@base-ui/react/menu\";\nimport {\n  ChevronDown,\n  Pin,\n  Remove,\n  SortAlphabetical,\n  SortAlphabeticalDesc,\n  Unpin,\n  VerticalDistribution,\n} from \"@blueprintjs/icons\";\nimport type {\n  ColumnPinningState,\n  Header,\n  RowData,\n  SortingState,\n} from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, { useCallback, useState } from \"react\";\nimport { TableHeaderContent } from \"./TableHeaderContent.js\";\nimport styles from \"./TableHeaderWithPopover.module.css\";\n\ninterface HeaderMenuItemProps {\n  onClick: () => void;\n  icon: React.ComponentType<{ className?: string; color?: string }>;\n  label: string;\n  active?: boolean;\n}\n\nfunction HeaderMenuItem({\n  onClick,\n  icon: Icon,\n  label,\n  active = false,\n}: HeaderMenuItemProps): React.ReactElement {\n  return (\n    <Menu.Item\n      closeOnClick\n      className={classNames(\n        styles.osdkCenterContainer,\n        styles.osdkContentGap,\n        styles.osdkHeaderMenuItem,\n        active && styles.osdkHeaderActiveMenuItem,\n      )}\n      onClick={onClick}\n    >\n      <Icon className={styles.osdkHeaderIcon} color=\"currentColor\" />\n      <span>{label}</span>\n    </Menu.Item>\n  );\n}\n\ninterface TableHeaderWithPopoverProps<TData extends RowData> {\n  header: Header<TData, unknown>;\n  isColumnPinned: false | \"left\" | \"right\";\n  setColumnPinning: React.Dispatch<React.SetStateAction<ColumnPinningState>>;\n  onSortChange?: (sorting: SortingState) => void;\n  onResetSize?: () => void;\n  onColumnConfig?: () => void;\n  enableColumnPinningRight?: boolean;\n}\n\nexport function TableHeaderWithPopover<TData extends RowData>({\n  header,\n  isColumnPinned,\n  setColumnPinning,\n  onSortChange,\n  onResetSize,\n}: TableHeaderWithPopoverProps<TData>): React.ReactElement {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handlePinLeft = useCallback(() => {\n    setColumnPinning((prev) => {\n      return {\n        left: [...(prev.left || []), header.column.id],\n        right: prev.right?.filter((id) => id !== header.column.id) || [],\n      };\n    });\n  }, [header.column.id, setColumnPinning]);\n\n  const handleUnpin = useCallback(() => {\n    setColumnPinning((prev) => {\n      return {\n        left: prev.left?.filter((id) => id !== header.column.id) || [],\n        right: prev.right?.filter((id) => id !== header.column.id) || [],\n      };\n    });\n  }, [header.column.id, setColumnPinning]);\n\n  const handleSortAscending = useCallback(() => {\n    header.column.toggleSorting(false);\n    onSortChange?.([{ id: header.column.id, desc: false }]);\n  }, [header.column, onSortChange]);\n\n  const handleSortDescending = useCallback(() => {\n    header.column.toggleSorting(true);\n    onSortChange?.([{ id: header.column.id, desc: true }]);\n  }, [header.column, onSortChange]);\n\n  const handleClearAllSorts = useCallback(() => {\n    header.column.clearSorting();\n    onSortChange?.([]);\n  }, [header.column, onSortChange]);\n\n  const handleResetSize = useCallback(() => {\n    header.column.resetSize();\n    if (onResetSize) {\n      onResetSize();\n    }\n  }, [header.column, onResetSize]);\n\n  const handleInteraction = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      setIsOpen((prev) => !prev);\n    },\n    [],\n  );\n\n  const isSorted = header.column.getIsSorted();\n  const isSortable = header.column.getCanSort();\n\n  return (\n    <Menu.Root open={isOpen} onOpenChange={setIsOpen}>\n      <div\n        className={classNames(\n          styles.osdkCenterContainer,\n          styles.osdkContentGap,\n          styles.osdkHeaderContainer,\n        )}\n        onContextMenu={handleInteraction}\n      >\n        <div\n          className={classNames(\n            styles.osdkCenterContainer,\n            styles.osdkContentGap,\n            styles.osdkHeaderContentLeft,\n          )}\n        >\n          {isColumnPinned && (\n            <Pin\n              className={styles.osdkHeaderIcon}\n              color={\"currentColor\"}\n            />\n          )}\n          <TableHeaderContent header={header} />\n        </div>\n        <div\n          className={classNames(\n            styles.osdkCenterContainer,\n            styles.osdkContentGap,\n            styles.osdkHeaderContentRight,\n          )}\n        >\n          {isSorted && (\n            <div className={styles.osdkCenterContainer}>\n              {isSorted === \"asc\"\n                ? (\n                  <SortAlphabetical\n                    className={styles.osdkHeaderIcon}\n                    color={\"currentColor\"}\n                  />\n                )\n                : (\n                  <SortAlphabeticalDesc\n                    className={styles.osdkHeaderIcon}\n                    color={\"currentColor\"}\n                  />\n                )}\n            </div>\n          )}\n          <Menu.Trigger\n            aria-label={`Open header menu for column with id=${header.column.id}`}\n            className={classNames(\n              styles.osdkCenterContainer,\n              styles.osdkHeaderPopoverTrigger,\n            )}\n          >\n            <ChevronDown\n              className={styles.osdkHeaderIcon}\n            />\n          </Menu.Trigger>\n        </div>\n        <Menu.Portal container={document.body}>\n          <Menu.Positioner sideOffset={4}>\n            <Menu.Popup\n              className={styles.osdkHeaderPopup}\n            >\n              {!isColumnPinned && (\n                <HeaderMenuItem\n                  onClick={handlePinLeft}\n                  icon={Pin}\n                  label=\"Pin column\"\n                />\n              )}\n\n              {isColumnPinned && (\n                <HeaderMenuItem\n                  onClick={handleUnpin}\n                  icon={Unpin}\n                  label=\"Unpin Column\"\n                  active={true}\n                />\n              )}\n              {isSortable && (\n                <>\n                  <HeaderMenuItem\n                    onClick={handleSortAscending}\n                    icon={SortAlphabetical}\n                    label=\"Sort ascending\"\n                    active={isSorted === \"asc\"}\n                  />\n                  <HeaderMenuItem\n                    onClick={handleSortDescending}\n                    icon={SortAlphabeticalDesc}\n                    label=\"Sort descending\"\n                    active={isSorted === \"desc\"}\n                  />\n                </>\n              )}\n              {!!isSorted && (\n                <HeaderMenuItem\n                  onClick={handleClearAllSorts}\n                  icon={Remove}\n                  label=\"Clear all sorts\"\n                />\n              )}\n              <HeaderMenuItem\n                onClick={handleResetSize}\n                icon={VerticalDistribution}\n                label=\"Reset Column Size\"\n              />\n            </Menu.Popup>\n          </Menu.Positioner>\n        </Menu.Portal>\n      </div>\n    </Menu.Root>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,IAAI,QAAQ,qBAAqB;AAC1C,SACEC,WAAW,EACXC,GAAG,EACHC,MAAM,EACNC,gBAAgB,EAChBC,oBAAoB,EACpBC,KAAK,EACLC,oBAAoB,QACf,oBAAoB;AAO3B,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AACpD,SAASC,kBAAkB,QAAQ,yBAAyB;AAC5D,OAAOC,MAAM,MAAM,qCAAqC;AASxD,SAASC,cAAcA,CAAC;EACtBC,OAAO;EACPC,IAAI,EAAEC,IAAI;EACVC,KAAK;EACLC,MAAM,GAAG;AACU,CAAC,EAAsB;EAC1C,oBACEV,KAAA,CAAAW,aAAA,CAACpB,IAAI,CAACqB,IAAI;IACRC,YAAY;IACZC,SAAS,EAAEf,UAAU,CACnBK,MAAM,CAACW,mBAAmB,EAC1BX,MAAM,CAACY,cAAc,EACrBZ,MAAM,CAACa,kBAAkB,EACzBP,MAAM,IAAIN,MAAM,CAACc,wBACnB,CAAE;IACFZ,OAAO,EAAEA;EAAQ,gBAEjBN,KAAA,CAAAW,aAAA,CAACH,IAAI;IAACM,SAAS,EAAEV,MAAM,CAACe,cAAe;IAACC,KAAK,EAAC;EAAc,CAAE,CAAC,eAC/DpB,KAAA,CAAAW,aAAA,eAAOF,KAAY,CACV,CAAC;AAEhB;AAYA,OAAO,SAASY,sBAAsBA,CAAwB;EAC5DC,MAAM;EACNC,cAAc;EACdC,gBAAgB;EAChBC,YAAY;EACZC;AACkC,CAAC,EAAsB;EACzD,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EAE3C,MAAM2B,aAAa,GAAG5B,WAAW,CAAC,MAAM;IACtCuB,gBAAgB,CAAEM,IAAI,IAAK;MACzB,OAAO;QACLC,IAAI,EAAE,CAAC,IAAID,IAAI,CAACC,IAAI,IAAI,EAAE,CAAC,EAAET,MAAM,CAACU,MAAM,CAACC,EAAE,CAAC;QAC9CC,KAAK,EAAEJ,IAAI,CAACI,KAAK,EAAEC,MAAM,CAAEF,EAAE,IAAKA,EAAE,KAAKX,MAAM,CAACU,MAAM,CAACC,EAAE,CAAC,IAAI;MAChE,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,EAAE,CAACX,MAAM,CAACU,MAAM,CAACC,EAAE,EAAET,gBAAgB,CAAC,CAAC;EAExC,MAAMY,WAAW,GAAGnC,WAAW,CAAC,MAAM;IACpCuB,gBAAgB,CAAEM,IAAI,IAAK;MACzB,OAAO;QACLC,IAAI,EAAED,IAAI,CAACC,IAAI,EAAEI,MAAM,CAAEF,EAAE,IAAKA,EAAE,KAAKX,MAAM,CAACU,MAAM,CAACC,EAAE,CAAC,IAAI,EAAE;QAC9DC,KAAK,EAAEJ,IAAI,CAACI,KAAK,EAAEC,MAAM,CAAEF,EAAE,IAAKA,EAAE,KAAKX,MAAM,CAACU,MAAM,CAACC,EAAE,CAAC,IAAI;MAChE,CAAC;IACH,CAAC,CAAC;EACJ,CAAC,EAAE,CAACX,MAAM,CAACU,MAAM,CAACC,EAAE,EAAET,gBAAgB,CAAC,CAAC;EAExC,MAAMa,mBAAmB,GAAGpC,WAAW,CAAC,MAAM;IAC5CqB,MAAM,CAACU,MAAM,CAACM,aAAa,CAAC,KAAK,CAAC;IAClCb,YAAY,GAAG,CAAC;MAAEQ,EAAE,EAAEX,MAAM,CAACU,MAAM,CAACC,EAAE;MAAEM,IAAI,EAAE;IAAM,CAAC,CAAC,CAAC;EACzD,CAAC,EAAE,CAACjB,MAAM,CAACU,MAAM,EAAEP,YAAY,CAAC,CAAC;EAEjC,MAAMe,oBAAoB,GAAGvC,WAAW,CAAC,MAAM;IAC7CqB,MAAM,CAACU,MAAM,CAACM,aAAa,CAAC,IAAI,CAAC;IACjCb,YAAY,GAAG,CAAC;MAAEQ,EAAE,EAAEX,MAAM,CAACU,MAAM,CAACC,EAAE;MAAEM,IAAI,EAAE;IAAK,CAAC,CAAC,CAAC;EACxD,CAAC,EAAE,CAACjB,MAAM,CAACU,MAAM,EAAEP,YAAY,CAAC,CAAC;EAEjC,MAAMgB,mBAAmB,GAAGxC,WAAW,CAAC,MAAM;IAC5CqB,MAAM,CAACU,MAAM,CAACU,YAAY,CAAC,CAAC;IAC5BjB,YAAY,GAAG,EAAE,CAAC;EACpB,CAAC,EAAE,CAACH,MAAM,CAACU,MAAM,EAAEP,YAAY,CAAC,CAAC;EAEjC,MAAMkB,eAAe,GAAG1C,WAAW,CAAC,MAAM;IACxCqB,MAAM,CAACU,MAAM,CAACY,SAAS,CAAC,CAAC;IACzB,IAAIlB,WAAW,EAAE;MACfA,WAAW,CAAC,CAAC;IACf;EACF,CAAC,EAAE,CAACJ,MAAM,CAACU,MAAM,EAAEN,WAAW,CAAC,CAAC;EAEhC,MAAMmB,iBAAiB,GAAG5C,WAAW,CAClC6C,CAAmB,IAAK;IACvBA,CAAC,CAACC,cAAc,CAAC,CAAC;IAClBnB,SAAS,CAAEE,IAAI,IAAK,CAACA,IAAI,CAAC;EAC5B,CAAC,EACD,EACF,CAAC;EAED,MAAMkB,QAAQ,GAAG1B,MAAM,CAACU,MAAM,CAACiB,WAAW,CAAC,CAAC;EAC5C,MAAMC,UAAU,GAAG5B,MAAM,CAACU,MAAM,CAACmB,UAAU,CAAC,CAAC;EAE7C,oBACEnD,KAAA,CAAAW,aAAA,CAACpB,IAAI,CAAC6D,IAAI;IAACC,IAAI,EAAE1B,MAAO;IAAC2B,YAAY,EAAE1B;EAAU,gBAC/C5B,KAAA,CAAAW,aAAA;IACEG,SAAS,EAAEf,UAAU,CACnBK,MAAM,CAACW,mBAAmB,EAC1BX,MAAM,CAACY,cAAc,EACrBZ,MAAM,CAACmD,mBACT,CAAE;IACFC,aAAa,EAAEX;EAAkB,gBAEjC7C,KAAA,CAAAW,aAAA;IACEG,SAAS,EAAEf,UAAU,CACnBK,MAAM,CAACW,mBAAmB,EAC1BX,MAAM,CAACY,cAAc,EACrBZ,MAAM,CAACqD,qBACT;EAAE,GAEDlC,cAAc,iBACbvB,KAAA,CAAAW,aAAA,CAAClB,GAAG;IACFqB,SAAS,EAAEV,MAAM,CAACe,cAAe;IACjCC,KAAK,EAAE;EAAe,CACvB,CACF,eACDpB,KAAA,CAAAW,aAAA,CAACR,kBAAkB;IAACmB,MAAM,EAAEA;EAAO,CAAE,CAClC,CAAC,eACNtB,KAAA,CAAAW,aAAA;IACEG,SAAS,EAAEf,UAAU,CACnBK,MAAM,CAACW,mBAAmB,EAC1BX,MAAM,CAACY,cAAc,EACrBZ,MAAM,CAACsD,sBACT;EAAE,GAEDV,QAAQ,iBACPhD,KAAA,CAAAW,aAAA;IAAKG,SAAS,EAAEV,MAAM,CAACW;EAAoB,GACxCiC,QAAQ,KAAK,KAAK,gBAEfhD,KAAA,CAAAW,aAAA,CAAChB,gBAAgB;IACfmB,SAAS,EAAEV,MAAM,CAACe,cAAe;IACjCC,KAAK,EAAE;EAAe,CACvB,CAAC,gBAGFpB,KAAA,CAAAW,aAAA,CAACf,oBAAoB;IACnBkB,SAAS,EAAEV,MAAM,CAACe,cAAe;IACjCC,KAAK,EAAE;EAAe,CACvB,CAEF,CACN,eACDpB,KAAA,CAAAW,aAAA,CAACpB,IAAI,CAACoE,OAAO;IACX,cAAY,uCAAuCrC,MAAM,CAACU,MAAM,CAACC,EAAE,EAAG;IACtEnB,SAAS,EAAEf,UAAU,CACnBK,MAAM,CAACW,mBAAmB,EAC1BX,MAAM,CAACwD,wBACT;EAAE,gBAEF5D,KAAA,CAAAW,aAAA,CAACnB,WAAW;IACVsB,SAAS,EAAEV,MAAM,CAACe;EAAe,CAClC,CACW,CACX,CAAC,eACNnB,KAAA,CAAAW,aAAA,CAACpB,IAAI,CAACsE,MAAM;IAACC,SAAS,EAAEC,QAAQ,CAACC;EAAK,gBACpChE,KAAA,CAAAW,aAAA,CAACpB,IAAI,CAAC0E,UAAU;IAACC,UAAU,EAAE;EAAE,gBAC7BlE,KAAA,CAAAW,aAAA,CAACpB,IAAI,CAAC4E,KAAK;IACTrD,SAAS,EAAEV,MAAM,CAACgE;EAAgB,GAEjC,CAAC7C,cAAc,iBACdvB,KAAA,CAAAW,aAAA,CAACN,cAAc;IACbC,OAAO,EAAEuB,aAAc;IACvBtB,IAAI,EAAEd,GAAI;IACVgB,KAAK,EAAC;EAAY,CACnB,CACF,EAEAc,cAAc,iBACbvB,KAAA,CAAAW,aAAA,CAACN,cAAc;IACbC,OAAO,EAAE8B,WAAY;IACrB7B,IAAI,EAAEV,KAAM;IACZY,KAAK,EAAC,cAAc;IACpBC,MAAM,EAAE;EAAK,CACd,CACF,EACAwC,UAAU,iBACTlD,KAAA,CAAAW,aAAA,CAAAX,KAAA,CAAAqE,QAAA,qBACErE,KAAA,CAAAW,aAAA,CAACN,cAAc;IACbC,OAAO,EAAE+B,mBAAoB;IAC7B9B,IAAI,EAAEZ,gBAAiB;IACvBc,KAAK,EAAC,gBAAgB;IACtBC,MAAM,EAAEsC,QAAQ,KAAK;EAAM,CAC5B,CAAC,eACFhD,KAAA,CAAAW,aAAA,CAACN,cAAc;IACbC,OAAO,EAAEkC,oBAAqB;IAC9BjC,IAAI,EAAEX,oBAAqB;IAC3Ba,KAAK,EAAC,iBAAiB;IACvBC,MAAM,EAAEsC,QAAQ,KAAK;EAAO,CAC7B,CACD,CACH,EACA,CAAC,CAACA,QAAQ,iBACThD,KAAA,CAAAW,aAAA,CAACN,cAAc;IACbC,OAAO,EAAEmC,mBAAoB;IAC7BlC,IAAI,EAAEb,MAAO;IACbe,KAAK,EAAC;EAAiB,CACxB,CACF,eACDT,KAAA,CAAAW,aAAA,CAACN,cAAc;IACbC,OAAO,EAAEqC,eAAgB;IACzBpC,IAAI,EAAET,oBAAqB;IAC3BW,KAAK,EAAC;EAAmB,CAC1B,CACS,CACG,CACN,CACV,CACI,CAAC;AAEhB","ignoreList":[]}
+{"version":3,"file":"TableHeaderWithPopover.js","names":["Menu","ChevronDown","Pin","Remove","Settings","Sort","SortAlphabetical","SortAlphabeticalDesc","Unpin","VerticalDistribution","classNames","React","useCallback","useState","TableHeaderContent","styles","HeaderMenuItem","onClick","icon","Icon","label","active","createElement","Item","closeOnClick","className","osdkCenterContainer","osdkContentGap","osdkHeaderMenuItem","osdkHeaderActiveMenuItem","osdkHeaderIcon","color","TableHeaderWithPopover","header","table","isColumnPinned","onResetSize","columnOptions","featureFlags","onOpenColumnConfig","onOpenMultiSort","showSortingItems","showPinningItems","showResizeItem","showConfigItem","setColumnPinning","setSorting","currentSorting","getState","sorting","isOpen","setIsOpen","handlePinLeft","prev","left","column","id","right","filter","handleUnpin","handleSortAscending","toggleSorting","desc","handleSortDescending","handleClearAllSorts","clearSorting","handleResetSize","resetSize","handleInteraction","e","preventDefault","handleOpenColumnConfig","handleOpenMultiSort","isSorted","getIsSorted","isSortable","getCanSort","sortIndex","findIndex","s","Fragment","Root","open","onOpenChange","osdkHeaderContainer","onContextMenu","osdkHeaderContentLeft","osdkHeaderContentRight","length","Trigger","osdkHeaderPopoverTrigger","Portal","container","document","body","Positioner","sideOffset","Popup","osdkHeaderPopup","some","col","canSort"],"sources":["TableHeaderWithPopover.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 { Menu } from \"@base-ui/react/menu\";\nimport {\n  ChevronDown,\n  Pin,\n  Remove,\n  Settings,\n  Sort,\n  SortAlphabetical,\n  SortAlphabeticalDesc,\n  Unpin,\n  VerticalDistribution,\n} from \"@blueprintjs/icons\";\nimport type { Header, RowData, Table } from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, { useCallback, useState } from \"react\";\nimport { TableHeaderContent } from \"./TableHeaderContent.js\";\nimport styles from \"./TableHeaderWithPopover.module.css\";\nimport type { ColumnOption } from \"./utils/types.js\";\n\ninterface HeaderMenuItemProps {\n  onClick: () => void;\n  icon: React.ComponentType<{ className?: string; color?: string }>;\n  label: string;\n  active?: boolean;\n}\n\nfunction HeaderMenuItem({\n  onClick,\n  icon: Icon,\n  label,\n  active = false,\n}: HeaderMenuItemProps): React.ReactElement {\n  return (\n    <Menu.Item\n      closeOnClick\n      className={classNames(\n        styles.osdkCenterContainer,\n        styles.osdkContentGap,\n        styles.osdkHeaderMenuItem,\n        active && styles.osdkHeaderActiveMenuItem,\n      )}\n      onClick={onClick}\n    >\n      <Icon className={styles.osdkHeaderIcon} color=\"currentColor\" />\n      <span>{label}</span>\n    </Menu.Item>\n  );\n}\n\nexport interface HeaderMenuFeatureFlags {\n  /**\n   * Whether sorting menu items should be shown.\n   * When false, hides \"Sort ascending\", \"Sort descending\", \"Sort on multiple columns\", and \"Clear all sorts\".\n   */\n  showSortingItems?: boolean;\n  /**\n   * Whether pinning menu items should be shown.\n   * When false, hides \"Pin column\" and \"Unpin Column\".\n   */\n  showPinningItems?: boolean;\n  /**\n   * Whether resize menu item should be shown.\n   * When false, hides \"Reset Column Size\".\n   */\n  showResizeItem?: boolean;\n  /**\n   * Whether column config menu item should be shown.\n   * When false, hides \"Configure Columns\".\n   */\n  showConfigItem?: boolean;\n}\n\ninterface TableHeaderWithPopoverProps<\n  TData extends RowData,\n> {\n  table: Table<TData>;\n  header: Header<TData, unknown>;\n  isColumnPinned: false | \"left\" | \"right\";\n  onResetSize?: () => void;\n  columnOptions?: ColumnOption[];\n  featureFlags?: HeaderMenuFeatureFlags;\n  onOpenColumnConfig?: () => void;\n  onOpenMultiSort?: () => void;\n}\n\nexport function TableHeaderWithPopover<\n  TData extends RowData,\n>({\n  header,\n  table,\n  isColumnPinned,\n  onResetSize,\n  columnOptions,\n  featureFlags,\n  onOpenColumnConfig,\n  onOpenMultiSort,\n}: TableHeaderWithPopoverProps<TData>): React.ReactElement {\n  const {\n    showSortingItems = false,\n    showPinningItems = false,\n    showResizeItem = false,\n    showConfigItem = false,\n  } = featureFlags ?? {};\n\n  const {\n    setColumnPinning,\n    setSorting,\n  } = table;\n\n  const currentSorting = table.getState().sorting;\n\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handlePinLeft = useCallback(() => {\n    setColumnPinning((prev) => {\n      return {\n        left: [...(prev.left || []), header.column.id],\n        right: prev.right?.filter((id) => id !== header.column.id) || [],\n      };\n    });\n  }, [header.column.id, setColumnPinning]);\n\n  const handleUnpin = useCallback(() => {\n    setColumnPinning((prev) => {\n      return {\n        left: prev.left?.filter((id) => id !== header.column.id) || [],\n        right: prev.right?.filter((id) => id !== header.column.id) || [],\n      };\n    });\n  }, [header.column.id, setColumnPinning]);\n\n  const handleSortAscending = useCallback(() => {\n    header.column.toggleSorting(false);\n    setSorting?.([{ id: header.column.id, desc: false }]);\n  }, [header.column, setSorting]);\n\n  const handleSortDescending = useCallback(() => {\n    header.column.toggleSorting(true);\n    setSorting?.([{ id: header.column.id, desc: true }]);\n  }, [header.column, setSorting]);\n\n  const handleClearAllSorts = useCallback(() => {\n    header.column.clearSorting();\n    setSorting?.([]);\n  }, [header.column, setSorting]);\n\n  const handleResetSize = useCallback(() => {\n    header.column.resetSize();\n    if (onResetSize) {\n      onResetSize();\n    }\n  }, [header.column, onResetSize]);\n\n  const handleInteraction = useCallback(\n    (e: React.MouseEvent) => {\n      e.preventDefault();\n      setIsOpen((prev) => !prev);\n    },\n    [],\n  );\n\n  const handleOpenColumnConfig = useCallback(() => {\n    onOpenColumnConfig?.();\n    setIsOpen(false);\n  }, [onOpenColumnConfig]);\n\n  const handleOpenMultiSort = useCallback(() => {\n    onOpenMultiSort?.();\n    setIsOpen(false);\n  }, [onOpenMultiSort]);\n\n  const isSorted = header.column.getIsSorted();\n  const isSortable = header.column.getCanSort();\n  const sortIndex = currentSorting?.findIndex(s => s.id === header.column.id)\n    ?? -1;\n\n  const hasAnyMenuItems = showPinningItems\n    || (showSortingItems && isSortable)\n    || showResizeItem\n    || showConfigItem;\n\n  return (\n    <>\n      <Menu.Root open={isOpen} onOpenChange={setIsOpen}>\n        <div\n          className={classNames(\n            styles.osdkCenterContainer,\n            styles.osdkContentGap,\n            styles.osdkHeaderContainer,\n          )}\n          onContextMenu={handleInteraction}\n        >\n          <div\n            className={classNames(\n              styles.osdkCenterContainer,\n              styles.osdkContentGap,\n              styles.osdkHeaderContentLeft,\n            )}\n          >\n            {isColumnPinned && (\n              <Pin\n                className={styles.osdkHeaderIcon}\n                color={\"currentColor\"}\n              />\n            )}\n            <TableHeaderContent header={header} />\n          </div>\n          <div\n            className={classNames(\n              styles.osdkCenterContainer,\n              styles.osdkContentGap,\n              styles.osdkHeaderContentRight,\n            )}\n          >\n            {isSorted && (\n              <div className={styles.osdkCenterContainer}>\n                {isSorted === \"asc\"\n                  ? (\n                    <SortAlphabetical\n                      className={styles.osdkHeaderIcon}\n                    />\n                  )\n                  : (\n                    <SortAlphabeticalDesc\n                      className={styles.osdkHeaderIcon}\n                    />\n                  )}\n                {currentSorting.length > 1 && sortIndex >= 0\n                  && <span className={styles.sortIndex}>{sortIndex + 1}</span>}\n              </div>\n            )}\n            {hasAnyMenuItems && (\n              <Menu.Trigger\n                aria-label={`Open header menu for column with id=${header.column.id}`}\n                className={classNames(\n                  styles.osdkCenterContainer,\n                  styles.osdkHeaderPopoverTrigger,\n                )}\n              >\n                <ChevronDown\n                  className={styles.osdkHeaderIcon}\n                />\n              </Menu.Trigger>\n            )}\n          </div>\n          <Menu.Portal container={document.body}>\n            <Menu.Positioner sideOffset={4}>\n              <Menu.Popup\n                className={styles.osdkHeaderPopup}\n              >\n                {showPinningItems && !isColumnPinned && (\n                  <HeaderMenuItem\n                    onClick={handlePinLeft}\n                    icon={Pin}\n                    label=\"Pin column\"\n                  />\n                )}\n\n                {showPinningItems && isColumnPinned && (\n                  <HeaderMenuItem\n                    onClick={handleUnpin}\n                    icon={Unpin}\n                    label=\"Unpin Column\"\n                    active={true}\n                  />\n                )}\n                {showSortingItems && isSortable && (\n                  <>\n                    <HeaderMenuItem\n                      onClick={handleSortAscending}\n                      icon={SortAlphabetical}\n                      label=\"Sort ascending\"\n                      active={isSorted === \"asc\"}\n                    />\n                    <HeaderMenuItem\n                      onClick={handleSortDescending}\n                      icon={SortAlphabeticalDesc}\n                      label=\"Sort descending\"\n                      active={isSorted === \"desc\"}\n                    />\n                    {columnOptions?.some(col => col.canSort) && (\n                      <HeaderMenuItem\n                        onClick={handleOpenMultiSort}\n                        icon={Sort}\n                        label=\"Sort on multiple columns\"\n                      />\n                    )}\n                  </>\n                )}\n                {showSortingItems && !!currentSorting?.length\n                  && (\n                    <HeaderMenuItem\n                      onClick={handleClearAllSorts}\n                      icon={Remove}\n                      label=\"Clear all sorts\"\n                    />\n                  )}\n                {showResizeItem && (\n                  <HeaderMenuItem\n                    onClick={handleResetSize}\n                    icon={VerticalDistribution}\n                    label=\"Reset Column Size\"\n                  />\n                )}\n                {showConfigItem && (\n                  <HeaderMenuItem\n                    onClick={handleOpenColumnConfig}\n                    icon={Settings}\n                    label=\"Configure Columns\"\n                  />\n                )}\n              </Menu.Popup>\n            </Menu.Positioner>\n          </Menu.Portal>\n        </div>\n      </Menu.Root>\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,141 @@
+/*
+ * 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.
+ */
+
+.osdkCenterContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.osdkContentGap {
+  display: flex;
+  gap: calc(var(--osdk-surface-spacing) * 2);
+}
+
+.osdkHeaderContainer {
+  justify-content: space-between;
+  flex: 1;
+  min-width: 0;
+  align-self: stretch;
+}
+
+.osdkHeaderContentLeft {
+  min-width: 0;
+  flex-shrink: 1;
+}
+
+.osdkHeaderContentRight {
+  flex-shrink: 0;
+}
+
+.osdkHeaderText {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  line-clamp: 3;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex-grow: 1;
+}
+
+.osdkHeaderPopoverTrigger {
+  padding: var(--osdk-table-header-menu-padding);
+  flex-shrink: 0;
+  flex-grow: 0;
+  background-color: var(--osdk-table-header-menu-bg);
+  border: var(--osdk-table-header-menu-border);
+  border-radius: var(--osdk-surface-border-radius);
+  color: var(--osdk-table-header-menu-color);
+  cursor: pointer;
+  user-select: none;
+
+  &:hover {
+    background-color: var(--osdk-table-header-menu-bg-hover);
+  }
+
+  &[data-popup-open] {
+    background-color: var(--osdk-table-header-menu-bg-active);
+    color: var(--osdk-table-header-menu-color-active);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.osdkHeaderIcon {
+  width: var(--osdk-iconography-size-small);
+  height: var(--osdk-iconography-size-small);
+}
+
+.osdkHeaderPopup {
+  box-sizing: border-box;
+  padding: var(--osdk-surface-spacing);
+  border-radius: var(--osdk-surface-border-radius);
+  border: var(--osdk-surface-border);
+  background-color: var(--osdk-surface-background-color-default-rest);
+  color: var(--osdk-typography-color-default-rest);
+  box-shadow: var(--osdk-surface-shadow-2);
+  font-size: var(--osdk-typography-size-body-medium);
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.osdkHeaderMenuItem {
+  justify-content: flex-start;
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 2);
+  cursor: pointer;
+
+  &:hover {
+    background-color: var(--osdk-surface-background-color-default-hover);
+    border-radius: var(--osdk-surface-border-radius);
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.osdkHeaderMenuItem .osdkHeaderActiveMenuItem {
+  background-color: var(--osdk-intent-primary-rest);
+  color: var(--osdk-intent-primary-foreground);
+
+  &:hover {
+    background-color: var(--osdk-intent-primary-hover);
+  }
+
+  &:active {
+    background-color: var(--osdk-intent-primary-active);
+  }
+}
+
+.sortIndex {
+  font-size: var(--osdk-typography-size-body-x-small);
+  margin-left: var(--osdk-surface-spacing);
+  color: var(--osdk-typography-color-muted);
+}

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

@@ -0,0 +1,17 @@
+// CSS Module proxy for TableHeaderWithPopover.module.css
+const styles = {
+  "osdkCenterContainer": "TableHeaderWithPopover-module__osdkCenterContainer___7EQ0efaV",
+  "osdkContentGap": "TableHeaderWithPopover-module__osdkContentGap___ydRnh6Gk",
+  "osdkHeaderContainer": "TableHeaderWithPopover-module__osdkHeaderContainer___Yp1FKb-z",
+  "osdkHeaderContentLeft": "TableHeaderWithPopover-module__osdkHeaderContentLeft___PpdFKG5D",
+  "osdkHeaderContentRight": "TableHeaderWithPopover-module__osdkHeaderContentRight___-cSZMBVb",
+  "osdkHeaderText": "TableHeaderWithPopover-module__osdkHeaderText___VnBa1IL3",
+  "osdkHeaderPopoverTrigger": "TableHeaderWithPopover-module__osdkHeaderPopoverTrigger___Y5Q22NIE",
+  "osdkHeaderIcon": "TableHeaderWithPopover-module__osdkHeaderIcon___lgyu9GmV",
+  "osdkHeaderPopup": "TableHeaderWithPopover-module__osdkHeaderPopup___TMO39wLW",
+  "osdkHeaderMenuItem": "TableHeaderWithPopover-module__osdkHeaderMenuItem___f-D5iGwi",
+  "osdkHeaderActiveMenuItem": "TableHeaderWithPopover-module__osdkHeaderActiveMenuItem___K007KHkr",
+  "sortIndex": "TableHeaderWithPopover-module__sortIndex___WDA6gCRz"
+};
+
+export default styles;