@osdk/react-components 0.2.0-beta.9 → 0.2.1-main-20260407074313

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

@@ -1,3 +1,70 @@
-.osdkEditableInput:focus {
-  outline: none;
+.osdkEditableCell {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+
+  padding: var(--osdk-surface-spacing) calc(var(--osdk-surface-spacing) * 3);
+  border-radius: var(--osdk-surface-border-radius);
+  border: var(--osdk-surface-border-width) solid transparent;
+  background: inherit;
+
+  tr[data-focused="true"] & {
+    border: var(--osdk-table-cell-editable-border);
+    background: var(--osdk-table-cell-editable-bg);
+
+    &.osdkEditedInput {
+      border: var(--osdk-table-cell-edited-border);
+    }
+
+    &:focus-within,
+    &.osdkEditedInput:focus-within {
+      border: var(--osdk-emphasis-focus-width) solid
+        var(--osdk-emphasis-focus-color);
+    }
+
+    &.error {
+      border: var(--osdk-table-cell-edited-border-error);
+
+      &:focus-within {
+        border: var(--osdk-emphasis-focus-width) solid
+          var(--osdk-intent-danger-rest);
+      }
+    }
+  }
+
+  &.error {
+    background: var(--osdk-table-cell-editable-bg);
+    border: var(--osdk-table-cell-edited-border-error);
+  }
+}
+
+.osdkEditableInput {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  background: inherit;
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+}
+
+.osdkEditedInput {
+  border: var(--osdk-table-cell-edited-border);
+  background: var(--osdk-table-cell-editable-bg);
+}
+
+.validationError {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+}
+
+.errorIcon {
+  color: var(--osdk-intent-danger-rest);
 }

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

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

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

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

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

@@ -20,29 +20,11 @@
   flex: 1;
 }
 
-/* Blueprint skeleton animation keyframes */
-@keyframes skeleton-glow {
-  from {
-    background: var(--osdk-table-skeleton-color-from);
-    border-color: var(--osdk-table-skeleton-color-from);
-  }
-
-  to {
-    background: var(--osdk-table-skeleton-color-to);
-    border-color: var(--osdk-table-skeleton-color-to);
-  }
-}
-
-.osdkCellSkeleton {
-  animation: 1000ms linear infinite alternate skeleton-glow;
-  background: var(--osdk-table-skeleton-color-from);
-  background-clip: padding-box;
-  border-color: var(--osdk-table-skeleton-color-from);
+.osdkCellSkeleton.osdkCellSkeleton {
+  --osdk-background-skeleton-from: var(--osdk-table-skeleton-color-from);
+  --osdk-background-skeleton-to: var(--osdk-table-skeleton-color-to);
   border-radius: calc(var(--osdk-surface-border-radius) * 0.5);
-  border: 1px solid var(--osdk-table-skeleton-border-color);
   box-shadow: none;
   color: transparent;
   cursor: default;
-  pointer-events: none;
-  user-select: none;
 }

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

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

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

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

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

@@ -16,6 +16,7 @@
 
 import classNames from "classnames";
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { SkeletonBar } from "../base-components/skeleton/SkeletonBar.js";
 import loadingStyles from "./LoadingCell.module.css";
 import { LoadingRow } from "./LoadingRow.js";
 import bodyStyles from "./TableBody.module.css";
@@ -81,7 +82,7 @@ export function LoadingStateTable({
       style: {
         width
       }
-    }, /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement(SkeletonBar, {
       className: classNames(headerStyles.osdkLoadingHeaderCell, loadingStyles.osdkCellSkeleton)
     }));
   }))), /*#__PURE__*/React.createElement("tbody", {

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingStateTable.js","names":["classNames","React","useEffect","useMemo","useRef","useState","loadingStyles","LoadingRow","bodyStyles","TableHeader","headerStyles","MIN_ROWS","LoadingStateTable","table","tableContainerRef","headerGroups","rowHeight","columnWidth","enableRowSelection","options","minHeaderCount","headers","length","hasHeadersLoaded","headerRef","bodyRef","loadingRowCount","setLoadingRowCount","loadingColumnCount","setLoadingColumnCount","current","tableWidth","clientWidth","columnsNeeded","Math","ceil","containerHeight","clientHeight","availableHeight","rowsNeeded","max","createElement","Fragment","className","osdkTableHeader","ref","osdkTableHeaderRow","Array","from","map","_","index","width","getSize","key","osdkTableHeaderCell","style","osdkLoadingHeaderCell","osdkCellSkeleton","osdkTableBody","columnCount","translateY"],"sources":["LoadingStateTable.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderGroup, RowData, Table } from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport loadingStyles from \"./LoadingCell.module.css\";\nimport { LoadingRow } from \"./LoadingRow.js\";\nimport bodyStyles from \"./TableBody.module.css\";\nimport { TableHeader } from \"./TableHeader.js\";\nimport headerStyles from \"./TableHeader.module.css\";\n\ninterface LoadingStateTableProps<TData extends RowData> {\n  table: Table<TData>;\n  tableContainerRef: React.RefObject<HTMLDivElement>;\n  headerGroups: Array<HeaderGroup<TData>>;\n  rowHeight?: number;\n  columnWidth?: number;\n}\n\nconst MIN_ROWS = 5;\n\nexport function LoadingStateTable<TData extends RowData>({\n  table,\n  tableContainerRef,\n  headerGroups,\n  rowHeight = 40,\n  columnWidth = 120,\n}: LoadingStateTableProps<TData>): React.ReactElement {\n  // If selection enabled, there will be a header for the selection column\n  const enableRowSelection = table.options.enableRowSelection;\n  const minHeaderCount = enableRowSelection ? 1 : 0;\n  const headers = useMemo(\n    () => headerGroups.length > 0 ? headerGroups[0].headers : [],\n    [headerGroups],\n  );\n  const hasHeadersLoaded = headers.length > minHeaderCount;\n\n  const headerRef = useRef<HTMLTableSectionElement>(null);\n  const bodyRef = useRef<HTMLTableSectionElement>(null);\n  const [loadingRowCount, setLoadingRowCount] = useState<number>(MIN_ROWS);\n  const [loadingColumnCount, setLoadingColumnCount] = useState<number>(\n    headers.length,\n  );\n  // Calculate number of columns needed to fill container width\n  useEffect(() => {\n    if (hasHeadersLoaded) {\n      setLoadingColumnCount(headers.length);\n    } else {\n      if (tableContainerRef.current) {\n        const tableWidth = tableContainerRef.current.clientWidth;\n        if (tableWidth > 0) {\n          const columnsNeeded = Math.ceil(tableWidth / columnWidth);\n          setLoadingColumnCount(columnsNeeded);\n        }\n      }\n    }\n  }, [columnWidth, hasHeadersLoaded, headers, tableContainerRef]);\n\n  // Calculate number of rows needed to fill container height\n  useEffect(() => {\n    if (tableContainerRef.current) {\n      const containerHeight = tableContainerRef.current.clientHeight;\n      const availableHeight = containerHeight - rowHeight;\n\n      if (availableHeight > 0) {\n        const rowsNeeded = Math.ceil(availableHeight / rowHeight);\n        setLoadingRowCount(Math.max(rowsNeeded, MIN_ROWS));\n      }\n    }\n  }, [tableContainerRef, rowHeight]);\n\n  return (\n    <>\n      {hasHeadersLoaded\n        ? <TableHeader table={table} />\n        : (\n          <thead className={headerStyles.osdkTableHeader} ref={headerRef}>\n            <tr className={headerStyles.osdkTableHeaderRow}>\n              {Array.from({ length: loadingColumnCount }).map((\n                _,\n                index,\n              ) => {\n                const width = headers.length > index\n                  ? headers[index].getSize()\n                  : columnWidth;\n                return (\n                  <th\n                    key={`loading-header-${index}`}\n                    className={headerStyles.osdkTableHeaderCell}\n                    style={{ width }}\n                  >\n                    <div\n                      className={classNames(\n                        headerStyles.osdkLoadingHeaderCell,\n                        loadingStyles.osdkCellSkeleton,\n                      )}\n                    />\n                  </th>\n                );\n              })}\n            </tr>\n          </thead>\n        )}\n      <tbody className={bodyStyles.osdkTableBody} ref={bodyRef}>\n        {Array.from({ length: loadingRowCount }).map((_, index) => (\n          <LoadingRow\n            key={`skeleton-${index}`}\n            columnCount={loadingColumnCount}\n            headers={headers}\n            translateY={rowHeight * index}\n            rowHeight={rowHeight}\n            columnWidth={columnWidth}\n          />\n        ))}\n      </tbody>\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"LoadingStateTable.js","names":["classNames","React","useEffect","useMemo","useRef","useState","SkeletonBar","loadingStyles","LoadingRow","bodyStyles","TableHeader","headerStyles","MIN_ROWS","LoadingStateTable","table","tableContainerRef","headerGroups","rowHeight","columnWidth","enableRowSelection","options","minHeaderCount","headers","length","hasHeadersLoaded","headerRef","bodyRef","loadingRowCount","setLoadingRowCount","loadingColumnCount","setLoadingColumnCount","current","tableWidth","clientWidth","columnsNeeded","Math","ceil","containerHeight","clientHeight","availableHeight","rowsNeeded","max","createElement","Fragment","className","osdkTableHeader","ref","osdkTableHeaderRow","Array","from","map","_","index","width","getSize","key","osdkTableHeaderCell","style","osdkLoadingHeaderCell","osdkCellSkeleton","osdkTableBody","columnCount","translateY"],"sources":["LoadingStateTable.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderGroup, RowData, Table } from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { SkeletonBar } from \"../base-components/skeleton/SkeletonBar.js\";\nimport loadingStyles from \"./LoadingCell.module.css\";\nimport { LoadingRow } from \"./LoadingRow.js\";\nimport bodyStyles from \"./TableBody.module.css\";\nimport { TableHeader } from \"./TableHeader.js\";\nimport headerStyles from \"./TableHeader.module.css\";\n\ninterface LoadingStateTableProps<TData extends RowData> {\n  table: Table<TData>;\n  tableContainerRef: React.RefObject<HTMLDivElement>;\n  headerGroups: Array<HeaderGroup<TData>>;\n  rowHeight?: number;\n  columnWidth?: number;\n}\n\nconst MIN_ROWS = 5;\n\nexport function LoadingStateTable<TData extends RowData>({\n  table,\n  tableContainerRef,\n  headerGroups,\n  rowHeight = 40,\n  columnWidth = 120,\n}: LoadingStateTableProps<TData>): React.ReactElement {\n  // If selection enabled, there will be a header for the selection column\n  const enableRowSelection = table.options.enableRowSelection;\n  const minHeaderCount = enableRowSelection ? 1 : 0;\n  const headers = useMemo(\n    () => headerGroups.length > 0 ? headerGroups[0].headers : [],\n    [headerGroups],\n  );\n  const hasHeadersLoaded = headers.length > minHeaderCount;\n\n  const headerRef = useRef<HTMLTableSectionElement>(null);\n  const bodyRef = useRef<HTMLTableSectionElement>(null);\n  const [loadingRowCount, setLoadingRowCount] = useState<number>(MIN_ROWS);\n  const [loadingColumnCount, setLoadingColumnCount] = useState<number>(\n    headers.length,\n  );\n  // Calculate number of columns needed to fill container width\n  useEffect(() => {\n    if (hasHeadersLoaded) {\n      setLoadingColumnCount(headers.length);\n    } else {\n      if (tableContainerRef.current) {\n        const tableWidth = tableContainerRef.current.clientWidth;\n        if (tableWidth > 0) {\n          const columnsNeeded = Math.ceil(tableWidth / columnWidth);\n          setLoadingColumnCount(columnsNeeded);\n        }\n      }\n    }\n  }, [columnWidth, hasHeadersLoaded, headers, tableContainerRef]);\n\n  // Calculate number of rows needed to fill container height\n  useEffect(() => {\n    if (tableContainerRef.current) {\n      const containerHeight = tableContainerRef.current.clientHeight;\n      const availableHeight = containerHeight - rowHeight;\n\n      if (availableHeight > 0) {\n        const rowsNeeded = Math.ceil(availableHeight / rowHeight);\n        setLoadingRowCount(Math.max(rowsNeeded, MIN_ROWS));\n      }\n    }\n  }, [tableContainerRef, rowHeight]);\n\n  return (\n    <>\n      {hasHeadersLoaded\n        ? <TableHeader table={table} />\n        : (\n          <thead className={headerStyles.osdkTableHeader} ref={headerRef}>\n            <tr className={headerStyles.osdkTableHeaderRow}>\n              {Array.from({ length: loadingColumnCount }).map((\n                _,\n                index,\n              ) => {\n                const width = headers.length > index\n                  ? headers[index].getSize()\n                  : columnWidth;\n                return (\n                  <th\n                    key={`loading-header-${index}`}\n                    className={headerStyles.osdkTableHeaderCell}\n                    style={{ width }}\n                  >\n                    <SkeletonBar\n                      className={classNames(\n                        headerStyles.osdkLoadingHeaderCell,\n                        loadingStyles.osdkCellSkeleton,\n                      )}\n                    />\n                  </th>\n                );\n              })}\n            </tr>\n          </thead>\n        )}\n      <tbody className={bodyStyles.osdkTableBody} ref={bodyRef}>\n        {Array.from({ length: loadingRowCount }).map((_, index) => (\n          <LoadingRow\n            key={`skeleton-${index}`}\n            columnCount={loadingColumnCount}\n            headers={headers}\n            translateY={rowHeight * index}\n            rowHeight={rowHeight}\n            columnWidth={columnWidth}\n          />\n        ))}\n      </tbody>\n    </>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -15,14 +15,13 @@
  */
 
 import { Button } from "@base-ui/react/button";
-import { Menu } from "@base-ui/react/menu";
 import { Add, CaretDown, Cog, SortAlphabetical, SortAlphabeticalDesc } from "@blueprintjs/icons";
 import { arrayMove } from "@dnd-kit/sortable";
 import classNames from "classnames";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { ActionButton } from "../base-components/action-button/ActionButton.js";
 import { Dialog } from "../base-components/dialog/Dialog.js";
-import { SearchBar } from "../base-components/search-bar/SearchBar.js";
+import { SearchableMenu } from "../base-components/searchable-menu/SearchableMenu.js";
 import styles from "./MultiColumnSortDialog.module.css";
 import { SortableItemsList } from "./SortableItemsList.js";
 export function MultiColumnSortDialog({
@@ -33,8 +32,6 @@ export function MultiColumnSortDialog({
   columnOptions
 }) {
   const [selectedSortColumns, setSelectedSortColumns] = useState([]);
-  const [menuSearchQuery, setMenuSearchQuery] = useState("");
-
   // Initialize selected sort columns from current sorting
   useEffect(() => {
     if (isOpen) {
@@ -78,21 +75,16 @@ export function MultiColumnSortDialog({
     onClose();
   }, [selectedSortColumns, onApply, onClose]);
   const availableColumns = useMemo(() => columnOptions.filter(col => col.canSort && !selectedSortColumns.some(selected => selected.id === col.id)), [columnOptions, selectedSortColumns]);
-  const filteredAvailableColumns = useMemo(() => {
-    const query = menuSearchQuery.toLowerCase().trim();
-    if (!query) {
-      return availableColumns;
-    }
-    return availableColumns.filter(col => col.name.toLowerCase().includes(query));
-  }, [availableColumns, menuSearchQuery]);
-  const handleMenuSearchChange = useCallback(event => {
-    setMenuSearchQuery(event.target.value);
-  }, []);
-  const handleMenuOpenChange = useCallback(open => {
-    if (open) {
-      setMenuSearchQuery("");
+  const searchableMenuItems = useMemo(() => availableColumns.map(col => ({
+    key: col.id,
+    label: col.name
+  })), [availableColumns]);
+  const handleMenuItemSelected = useCallback(key => {
+    const column = availableColumns.find(col => col.id === key);
+    if (column) {
+      handleAddColumn(column);
     }
-  }, []);
+  }, [availableColumns, handleAddColumn]);
   const sortableItems = useMemo(() => {
     return selectedSortColumns.map(item => ({
       id: item.id,
@@ -130,49 +122,21 @@ export function MultiColumnSortDialog({
     onReorder: handleReorderSortColumns,
     onRemove: handleRemoveSortColumn,
     className: styles.sortableList
-  }), /*#__PURE__*/React.createElement(Menu.Root, {
-    onOpenChange: handleMenuOpenChange
-  }, /*#__PURE__*/React.createElement(Menu.Trigger, {
-    className: styles.addColumnButton,
+  }), /*#__PURE__*/React.createElement(SearchableMenu, {
+    items: searchableMenuItems,
+    onItemSelected: handleMenuItemSelected,
+    trigger: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Add, {
+      className: styles.addIcon
+    }), /*#__PURE__*/React.createElement("span", {
+      className: styles.addColumnText
+    }, "Add Column to Sort"), /*#__PURE__*/React.createElement(CaretDown, null)),
+    triggerClassName: styles.addColumnButton,
     disabled: availableColumns.length === 0,
-    "aria-label": "Add column to sort"
-  }, /*#__PURE__*/React.createElement(Add, {
-    className: styles.addIcon
-  }), /*#__PURE__*/React.createElement("span", {
-    className: styles.addColumnText
-  }, "Add Column to Sort"), /*#__PURE__*/React.createElement(CaretDown, {
-    color: "currentColor"
-  })), /*#__PURE__*/React.createElement(Menu.Portal, null, /*#__PURE__*/React.createElement(Menu.Positioner, {
-    className: styles.menuPositioner,
-    sideOffset: 4
-  }, /*#__PURE__*/React.createElement(Menu.Popup, {
-    className: styles.dropdownMenu
-  }, /*#__PURE__*/React.createElement(SearchBar, {
-    value: menuSearchQuery,
-    onChange: handleMenuSearchChange,
-    placeholder: "Search columns",
-    "aria-label": "Search columns to sort",
-    className: styles.menuSearchContainer,
-    onKeyDown: e => e.stopPropagation()
-  }), filteredAvailableColumns.map(column => /*#__PURE__*/React.createElement(AvailableColumnMenuItem, {
-    key: column.id,
-    column: column,
-    onAddColumn: handleAddColumn
-  })), filteredAvailableColumns.length === 0 && /*#__PURE__*/React.createElement("div", {
-    className: styles.menuEmptyState
-  }, "No matching columns")))))));
+    searchPlaceholder: "Search columns",
+    emptyMessage: "No matching columns"
+  })));
 }
 const DialogTitle = /*#__PURE__*/React.createElement("div", {
   className: styles.title
 }, /*#__PURE__*/React.createElement(Cog, null), "Sort on Multiple Columns");
-function AvailableColumnMenuItem({
-  column,
-  onAddColumn
-}) {
-  const onClick = useCallback(() => onAddColumn(column), [onAddColumn, column]);
-  return /*#__PURE__*/React.createElement(Menu.Item, {
-    className: classNames(styles.dropdownItem, styles.truncate),
-    onClick: onClick
-  }, column.name);
-}
 //# sourceMappingURL=MultiColumnSortDialog.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MultiColumnSortDialog.js","names":["Button","Menu","Add","CaretDown","Cog","SortAlphabetical","SortAlphabeticalDesc","arrayMove","classNames","React","useCallback","useEffect","useMemo","useState","ActionButton","Dialog","SearchBar","styles","SortableItemsList","MultiColumnSortDialog","isOpen","onClose","onApply","currentSorting","columnOptions","selectedSortColumns","setSelectedSortColumns","menuSearchQuery","setMenuSearchQuery","selectedColumns","sort","column","find","col","id","push","direction","desc","handleAddColumn","prev","handleRemoveSortColumn","filter","item","handleReorderSortColumns","fromIndex","toIndex","items","handleToggleSortDirection","map","handleApply","sortingState","availableColumns","canSort","some","selected","filteredAvailableColumns","query","toLowerCase","trim","name","includes","handleMenuSearchChange","event","target","value","handleMenuOpenChange","open","sortableItems","label","content","createElement","className","sortColumnItem","sortColumnName","truncate","sortDirectionButton","onClick","sortIcon","footer","Fragment","variant","onOpenChange","title","DialogTitle","sortColumnsList","onReorder","onRemove","sortableList","Root","Trigger","addColumnButton","disabled","length","addIcon","addColumnText","color","Portal","Positioner","menuPositioner","sideOffset","Popup","dropdownMenu","onChange","placeholder","menuSearchContainer","onKeyDown","e","stopPropagation","AvailableColumnMenuItem","key","onAddColumn","menuEmptyState","Item","dropdownItem"],"sources":["MultiColumnSortDialog.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 { Button } from \"@base-ui/react/button\";\nimport { Menu } from \"@base-ui/react/menu\";\nimport {\n  Add,\n  CaretDown,\n  Cog,\n  SortAlphabetical,\n  SortAlphabeticalDesc,\n} from \"@blueprintjs/icons\";\nimport { arrayMove } from \"@dnd-kit/sortable\";\nimport type { SortingState } from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { ActionButton } from \"../base-components/action-button/ActionButton.js\";\nimport { Dialog } from \"../base-components/dialog/Dialog.js\";\nimport { SearchBar } from \"../base-components/search-bar/SearchBar.js\";\nimport styles from \"./MultiColumnSortDialog.module.css\";\nimport { type SortableItem, SortableItemsList } from \"./SortableItemsList.js\";\nimport type { ColumnOption } from \"./utils/types.js\";\n\nexport interface SortColumnItem extends ColumnOption {\n  direction: \"asc\" | \"desc\";\n}\n\ninterface MultiColumnSortDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onApply: (sortColumns: SortingState) => void;\n  currentSorting: SortingState;\n  columnOptions: ColumnOption[];\n}\n\nexport function MultiColumnSortDialog({\n  isOpen,\n  onClose,\n  onApply,\n  currentSorting,\n  columnOptions,\n}: MultiColumnSortDialogProps): React.ReactElement {\n  const [selectedSortColumns, setSelectedSortColumns] = useState<\n    SortColumnItem[]\n  >([]);\n  const [menuSearchQuery, setMenuSearchQuery] = useState(\"\");\n\n  // Initialize selected sort columns from current sorting\n  useEffect(() => {\n    if (isOpen) {\n      const selectedColumns: SortColumnItem[] = [];\n      for (const sort of currentSorting) {\n        const column = columnOptions.find((col) => col.id === sort.id);\n        if (column) {\n          selectedColumns.push({\n            ...column,\n            direction: sort.desc ? \"desc\" : \"asc\",\n          });\n        }\n      }\n      setSelectedSortColumns(selectedColumns);\n    }\n  }, [isOpen, currentSorting, columnOptions]);\n\n  const handleAddColumn = useCallback((column: ColumnOption) => {\n    setSelectedSortColumns((prev) => [\n      ...prev,\n      { ...column, direction: \"asc\" },\n    ]);\n  }, []);\n\n  const handleRemoveSortColumn = useCallback((id: string) => {\n    setSelectedSortColumns((prev) => prev.filter((item) => item.id !== id));\n  }, []);\n\n  const handleReorderSortColumns = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      setSelectedSortColumns((items) => arrayMove(items, fromIndex, toIndex));\n    },\n    [],\n  );\n\n  const handleToggleSortDirection = useCallback((id: string) => {\n    setSelectedSortColumns((prev) =>\n      prev.map((item) =>\n        item.id === id\n          ? { ...item, direction: item.direction === \"asc\" ? \"desc\" : \"asc\" }\n          : item\n      )\n    );\n  }, []);\n\n  const handleApply = useCallback(() => {\n    const sortingState: SortingState = selectedSortColumns.map((col) => ({\n      id: col.id,\n      desc: col.direction === \"desc\",\n    }));\n    onApply(sortingState);\n    onClose();\n  }, [selectedSortColumns, onApply, onClose]);\n\n  const availableColumns = useMemo(\n    () =>\n      columnOptions.filter(\n        (col) =>\n          col.canSort\n          && !selectedSortColumns.some((selected) => selected.id === col.id),\n      ),\n    [columnOptions, selectedSortColumns],\n  );\n\n  const filteredAvailableColumns = useMemo(() => {\n    const query = menuSearchQuery.toLowerCase().trim();\n    if (!query) {\n      return availableColumns;\n    }\n    return availableColumns.filter((col) =>\n      col.name.toLowerCase().includes(query)\n    );\n  }, [availableColumns, menuSearchQuery]);\n\n  const handleMenuSearchChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setMenuSearchQuery(event.target.value);\n    },\n    [],\n  );\n\n  const handleMenuOpenChange = useCallback((open: boolean) => {\n    if (open) {\n      setMenuSearchQuery(\"\");\n    }\n  }, []);\n\n  const sortableItems: SortableItem[] = useMemo(() => {\n    return selectedSortColumns.map((item) => ({\n      id: item.id,\n      label: item.name,\n      content: (\n        <div className={styles.sortColumnItem}>\n          <span className={classNames(styles.sortColumnName, styles.truncate)}>\n            {item.name}\n          </span>\n          <Button\n            className={styles.sortDirectionButton}\n            onClick={() => handleToggleSortDirection(item.id)}\n            aria-label={`Toggle sort direction for ${item.name}`}\n          >\n            {item.direction === \"asc\"\n              ? <SortAlphabetical className={styles.sortIcon} />\n              : <SortAlphabeticalDesc className={styles.sortIcon} />}\n          </Button>\n        </div>\n      ),\n    }));\n  }, [selectedSortColumns, handleToggleSortDirection]);\n\n  const footer = useMemo(() => (\n    <>\n      <ActionButton onClick={onClose}>Cancel</ActionButton>\n      <ActionButton variant=\"primary\" onClick={handleApply}>\n        Apply\n      </ActionButton>\n    </>\n  ), [handleApply, onClose]);\n\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onClose}\n      title={DialogTitle}\n      footer={footer}\n    >\n      <div className={styles.sortColumnsList}>\n        <SortableItemsList\n          items={sortableItems}\n          onReorder={handleReorderSortColumns}\n          onRemove={handleRemoveSortColumn}\n          className={styles.sortableList}\n        />\n        <Menu.Root onOpenChange={handleMenuOpenChange}>\n          <Menu.Trigger\n            className={styles.addColumnButton}\n            disabled={availableColumns.length === 0}\n            aria-label=\"Add column to sort\"\n          >\n            <Add className={styles.addIcon} />\n            <span className={styles.addColumnText}>\n              Add Column to Sort\n            </span>\n            <CaretDown color={\"currentColor\"} />\n          </Menu.Trigger>\n          <Menu.Portal>\n            <Menu.Positioner className={styles.menuPositioner} sideOffset={4}>\n              <Menu.Popup className={styles.dropdownMenu}>\n                <SearchBar\n                  value={menuSearchQuery}\n                  onChange={handleMenuSearchChange}\n                  placeholder=\"Search columns\"\n                  aria-label=\"Search columns to sort\"\n                  className={styles.menuSearchContainer}\n                  onKeyDown={(e) => e.stopPropagation()}\n                />\n                {filteredAvailableColumns.map((column) => (\n                  <AvailableColumnMenuItem\n                    key={column.id}\n                    column={column}\n                    onAddColumn={handleAddColumn}\n                  />\n                ))}\n                {filteredAvailableColumns.length === 0 && (\n                  <div className={styles.menuEmptyState}>\n                    No matching columns\n                  </div>\n                )}\n              </Menu.Popup>\n            </Menu.Positioner>\n          </Menu.Portal>\n        </Menu.Root>\n      </div>\n    </Dialog>\n  );\n}\n\nconst DialogTitle = (\n  <div className={styles.title}>\n    <Cog />Sort on Multiple Columns\n  </div>\n);\nfunction AvailableColumnMenuItem(\n  { column, onAddColumn }: {\n    column: ColumnOption;\n    onAddColumn: (column: ColumnOption) => void;\n  },\n) {\n  const onClick = useCallback(() => onAddColumn(column), [onAddColumn, column]);\n\n  return (\n    <Menu.Item\n      className={classNames(styles.dropdownItem, styles.truncate)}\n      onClick={onClick}\n    >\n      {column.name}\n    </Menu.Item>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MultiColumnSortDialog.js","names":["Button","Add","CaretDown","Cog","SortAlphabetical","SortAlphabeticalDesc","arrayMove","classNames","React","useCallback","useEffect","useMemo","useState","ActionButton","Dialog","SearchableMenu","styles","SortableItemsList","MultiColumnSortDialog","isOpen","onClose","onApply","currentSorting","columnOptions","selectedSortColumns","setSelectedSortColumns","selectedColumns","sort","column","find","col","id","push","direction","desc","handleAddColumn","prev","handleRemoveSortColumn","filter","item","handleReorderSortColumns","fromIndex","toIndex","items","handleToggleSortDirection","map","handleApply","sortingState","availableColumns","canSort","some","selected","searchableMenuItems","key","label","name","handleMenuItemSelected","sortableItems","content","createElement","className","sortColumnItem","sortColumnName","truncate","sortDirectionButton","onClick","sortIcon","footer","Fragment","variant","onOpenChange","title","DialogTitle","sortColumnsList","onReorder","onRemove","sortableList","onItemSelected","trigger","addIcon","addColumnText","triggerClassName","addColumnButton","disabled","length","searchPlaceholder","emptyMessage"],"sources":["MultiColumnSortDialog.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 { Button } from \"@base-ui/react/button\";\nimport {\n  Add,\n  CaretDown,\n  Cog,\n  SortAlphabetical,\n  SortAlphabeticalDesc,\n} from \"@blueprintjs/icons\";\nimport { arrayMove } from \"@dnd-kit/sortable\";\nimport type { SortingState } from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport { ActionButton } from \"../base-components/action-button/ActionButton.js\";\nimport { Dialog } from \"../base-components/dialog/Dialog.js\";\nimport { SearchableMenu } from \"../base-components/searchable-menu/SearchableMenu.js\";\nimport styles from \"./MultiColumnSortDialog.module.css\";\nimport { type SortableItem, SortableItemsList } from \"./SortableItemsList.js\";\nimport type { ColumnOption } from \"./utils/types.js\";\n\nexport interface SortColumnItem extends ColumnOption {\n  direction: \"asc\" | \"desc\";\n}\n\ninterface MultiColumnSortDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onApply: (sortColumns: SortingState) => void;\n  currentSorting: SortingState;\n  columnOptions: ColumnOption[];\n}\n\nexport function MultiColumnSortDialog({\n  isOpen,\n  onClose,\n  onApply,\n  currentSorting,\n  columnOptions,\n}: MultiColumnSortDialogProps): React.ReactElement {\n  const [selectedSortColumns, setSelectedSortColumns] = useState<\n    SortColumnItem[]\n  >([]);\n  // Initialize selected sort columns from current sorting\n  useEffect(() => {\n    if (isOpen) {\n      const selectedColumns: SortColumnItem[] = [];\n      for (const sort of currentSorting) {\n        const column = columnOptions.find((col) => col.id === sort.id);\n        if (column) {\n          selectedColumns.push({\n            ...column,\n            direction: sort.desc ? \"desc\" : \"asc\",\n          });\n        }\n      }\n      setSelectedSortColumns(selectedColumns);\n    }\n  }, [isOpen, currentSorting, columnOptions]);\n\n  const handleAddColumn = useCallback((column: ColumnOption) => {\n    setSelectedSortColumns((prev) => [\n      ...prev,\n      { ...column, direction: \"asc\" },\n    ]);\n  }, []);\n\n  const handleRemoveSortColumn = useCallback((id: string) => {\n    setSelectedSortColumns((prev) => prev.filter((item) => item.id !== id));\n  }, []);\n\n  const handleReorderSortColumns = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      setSelectedSortColumns((items) => arrayMove(items, fromIndex, toIndex));\n    },\n    [],\n  );\n\n  const handleToggleSortDirection = useCallback((id: string) => {\n    setSelectedSortColumns((prev) =>\n      prev.map((item) =>\n        item.id === id\n          ? { ...item, direction: item.direction === \"asc\" ? \"desc\" : \"asc\" }\n          : item\n      )\n    );\n  }, []);\n\n  const handleApply = useCallback(() => {\n    const sortingState: SortingState = selectedSortColumns.map((col) => ({\n      id: col.id,\n      desc: col.direction === \"desc\",\n    }));\n    onApply(sortingState);\n    onClose();\n  }, [selectedSortColumns, onApply, onClose]);\n\n  const availableColumns = useMemo(\n    () =>\n      columnOptions.filter(\n        (col) =>\n          col.canSort\n          && !selectedSortColumns.some((selected) => selected.id === col.id),\n      ),\n    [columnOptions, selectedSortColumns],\n  );\n\n  const searchableMenuItems = useMemo(\n    () => availableColumns.map((col) => ({ key: col.id, label: col.name })),\n    [availableColumns],\n  );\n\n  const handleMenuItemSelected = useCallback(\n    (key: string) => {\n      const column = availableColumns.find((col) => col.id === key);\n      if (column) {\n        handleAddColumn(column);\n      }\n    },\n    [availableColumns, handleAddColumn],\n  );\n\n  const sortableItems: SortableItem[] = useMemo(() => {\n    return selectedSortColumns.map((item) => ({\n      id: item.id,\n      label: item.name,\n      content: (\n        <div className={styles.sortColumnItem}>\n          <span className={classNames(styles.sortColumnName, styles.truncate)}>\n            {item.name}\n          </span>\n          <Button\n            className={styles.sortDirectionButton}\n            onClick={() => handleToggleSortDirection(item.id)}\n            aria-label={`Toggle sort direction for ${item.name}`}\n          >\n            {item.direction === \"asc\"\n              ? (\n                <SortAlphabetical\n                  className={styles.sortIcon}\n                />\n              )\n              : (\n                <SortAlphabeticalDesc\n                  className={styles.sortIcon}\n                />\n              )}\n          </Button>\n        </div>\n      ),\n    }));\n  }, [selectedSortColumns, handleToggleSortDirection]);\n\n  const footer = useMemo(() => (\n    <>\n      <ActionButton onClick={onClose}>Cancel</ActionButton>\n      <ActionButton variant=\"primary\" onClick={handleApply}>\n        Apply\n      </ActionButton>\n    </>\n  ), [handleApply, onClose]);\n\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onClose}\n      title={DialogTitle}\n      footer={footer}\n    >\n      <div className={styles.sortColumnsList}>\n        <SortableItemsList\n          items={sortableItems}\n          onReorder={handleReorderSortColumns}\n          onRemove={handleRemoveSortColumn}\n          className={styles.sortableList}\n        />\n        <SearchableMenu\n          items={searchableMenuItems}\n          onItemSelected={handleMenuItemSelected}\n          trigger={\n            <>\n              <Add className={styles.addIcon} />\n              <span className={styles.addColumnText}>\n                Add Column to Sort\n              </span>\n              <CaretDown />\n            </>\n          }\n          triggerClassName={styles.addColumnButton}\n          disabled={availableColumns.length === 0}\n          searchPlaceholder=\"Search columns\"\n          emptyMessage=\"No matching columns\"\n        />\n      </div>\n    </Dialog>\n  );\n}\n\nconst DialogTitle = (\n  <div className={styles.title}>\n    <Cog />Sort on Multiple Columns\n  </div>\n);\n"],"mappings":"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","ignoreList":[]}

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

@@ -102,10 +102,6 @@
     cursor: not-allowed;
   }
 
-  &:focus {
-    outline: none;
-  }
-
   &:focus-visible {
     outline: var(--osdk-focus-outline);
     outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
@@ -115,7 +111,6 @@
 .addIcon {
   width: var(--osdk-iconography-size-small);
   height: var(--osdk-iconography-size-small);
-  color: currentColor;
 }
 
 .addColumnText {
@@ -123,70 +118,6 @@
   text-align: left;
 }
 
-.menuPositioner {
-  z-index: var(--osdk-surface-z-index-2);
-}
-
-.dropdownMenu {
-  background-color: var(--osdk-surface-background-color-default-rest);
-  border: var(--osdk-surface-border);
-  border-radius: var(--osdk-surface-border-radius);
-  box-shadow: var(--osdk-surface-shadow-2);
-  max-height: calc(var(--osdk-dialog-max-height) * 0.5);
-  overflow-y: auto;
-  width: var(--anchor-width);
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--osdk-focus-outline);
-    outline-offset: var(--osdk-focus-visible-outline-offset);
-  }
-}
-
-.menuSearchContainer {
-  border: none;
-  border-bottom: var(--osdk-surface-border);
-  border-radius: 0;
-  position: sticky;
-  top: 0;
-  background-color: var(--osdk-surface-background-color-default-rest);
-}
-
-.menuEmptyState {
-  padding: calc(var(--osdk-surface-spacing) * 3);
-  text-align: center;
-  color: var(--osdk-typography-color-muted);
-  font-size: var(--osdk-typography-size-body-medium);
-}
-
-.dropdownItem {
-  display: block;
-  width: 100%;
-  text-align: left;
-  padding: calc(var(--osdk-surface-spacing) * 2)
-    calc(var(--osdk-surface-spacing) * 3);
-  background: none;
-  border: none;
-  cursor: pointer;
-  font-size: var(--osdk-typography-size-body-medium);
-  color: var(--osdk-typography-color-default-rest);
-
-  &:hover {
-    background-color: var(--osdk-surface-background-color-default-hover);
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &:focus-visible {
-    outline: var(--osdk-focus-outline);
-    outline-offset: calc(-1 * var(--osdk-focus-visible-outline-offset));
-  }
-}
 
 .truncate {
   overflow: hidden;

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

@@ -27,7 +27,6 @@ import { useSelectionColumn } from "./hooks/useSelectionColumn.js";
 import { useTableSorting } from "./hooks/useTableSorting.js";
 import { BaseTable } from "./Table.js";
 import { getRowId } from "./utils/getRowId.js";
-
 /**
  * ObjectTable - A headless table component for displaying OSDK object sets
  *
@@ -37,6 +36,7 @@ import { getRowId } from "./utils/getRowId.js";
  * ```
  */
 
+const EMPTY_ARRAY = [];
 export function ObjectTable({
   objectType,
   objectSet,
@@ -52,6 +52,7 @@ export function ObjectTable({
   renderCellContextMenu,
   selectionMode = "none",
   selectedRows,
+  isAllSelected: isAllSelectedProp,
   onColumnVisibilityChanged,
   onCellValueChanged,
   onSubmitEdits,
@@ -59,6 +60,7 @@ export function ObjectTable({
   enableColumnPinning = true,
   enableColumnResizing = true,
   enableColumnConfig = true,
+  editMode = "manual",
   ...props
 }) {
   const {
@@ -67,15 +69,6 @@ export function ObjectTable({
   } = useColumnResize({
     onColumnResize
   });
-  const {
-    cellEdits,
-    clearEdits,
-    handleCellEdit,
-    handleSubmitEdits
-  } = useEditableTable({
-    onCellValueChanged,
-    onSubmitEdits
-  });
   const {
     sorting,
     onSortingChange
@@ -104,6 +97,7 @@ export function ObjectTable({
   } = useRowSelection({
     selectionMode,
     selectedRows,
+    isAllSelected: isAllSelectedProp,
     onRowSelection,
     data
   });
@@ -134,8 +128,13 @@ export function ObjectTable({
   const allColumns = useMemo(() => {
     return selectionColumn ? [selectionColumn, ...columns] : columns;
   }, [selectionColumn, columns]);
+  const editableConfig = useEditableTable({
+    editMode,
+    onCellValueChanged,
+    onSubmitEdits
+  });
   const table = useReactTable({
-    data: data ?? [],
+    data: data ?? EMPTY_ARRAY,
     columns: allColumns,
     getCoreRowModel: getCoreRowModel(),
     state: {
@@ -162,8 +161,12 @@ export function ObjectTable({
     },
     getRowId,
     meta: {
-      onCellEdit: handleCellEdit,
-      cellEdits
+      onCellEdit: editableConfig.onCellEdit,
+      onCellValidationError: editableConfig.onCellValidationError,
+      clearCellValidationError: editableConfig.clearCellValidationError,
+      cellEdits: editableConfig.cellEdits,
+      isInEditMode: editableConfig.editModeState.isActive,
+      validationErrors: editableConfig.validationErrors
     }
   });
   const onRenderCellContextMenu = useCallback((row, cell) => {
@@ -175,16 +178,6 @@ export function ObjectTable({
     showResizeItem: enableColumnResizing,
     showConfigItem: enableColumnConfig
   }), [enableOrdering, enableColumnPinning, enableColumnResizing, enableColumnConfig]);
-  const editableConfig = useMemo(() => {
-    if (!onSubmitEdits) {
-      return;
-    }
-    return {
-      onSubmitEdits: handleSubmitEdits,
-      clearEdits,
-      cellEdits
-    };
-  }, [onSubmitEdits, handleSubmitEdits, clearEdits, cellEdits]);
   return /*#__PURE__*/React.createElement(BaseTable, {
     table: table,
     isLoading: isLoading || isColumnsLoading,