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

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

@@ -0,0 +1,168 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Input } from "@base-ui/react/input";
+import { Error } from "@blueprintjs/icons";
+import classNames from "classnames";
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Tooltip } from "../base-components/tooltip/Tooltip.js";
+import styles from "./EditableCell.module.css.js";
+const NUMBER_TYPES = ["double", "integer", "long", "float", "decimal", "byte", "short"];
+function valueToString(value) {
+  if (value == null) {
+    return "";
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  // At this point, value is a primitive (string, number, boolean, symbol, bigint)
+  return String(value);
+}
+function parseValueByType(value, dataType) {
+  if (!dataType || !NUMBER_TYPES.includes(dataType)) {
+    return value;
+  }
+  if (value === "") {
+    return null;
+  }
+  const parsedNumber = Number(value);
+  if (isNaN(parsedNumber)) {
+    return value;
+  }
+  return parsedNumber;
+}
+const VALIDATION_ERROR_MESSAGE = "Validation error";
+function EditableCellInner({
+  initialValue,
+  currentValue,
+  cellId,
+  dataType,
+  onCellEdit,
+  onCellValidationError,
+  clearCellValidationError,
+  originalRowData,
+  rowId,
+  columnId,
+  validateEdit,
+  validationError
+}) {
+  const [inputValue, setInputValue] = useState(valueToString(currentValue));
+  const isCancelled = useRef(false);
+  const validationAbortControllerRef = useRef(null);
+  const abortController = useCallback(() => {
+    if (validationAbortControllerRef.current) {
+      validationAbortControllerRef.current.abort();
+      validationAbortControllerRef.current = null;
+    }
+  }, []);
+  const hasValidationError = validationError != null;
+  useEffect(() => {
+    setInputValue(valueToString(currentValue));
+  }, [currentValue]);
+  useEffect(() => {
+    // Cleanup abort controller on unmount
+    return () => {
+      abortController();
+    };
+  }, [abortController]);
+  const handleBlur = useCallback(() => {
+    // Do not commit the edit if it was cancelled with Escape key
+    if (isCancelled.current) {
+      isCancelled.current = false;
+      return;
+    }
+
+    // Cancel any in-flight validation
+    abortController();
+    const parsedValue = parseValueByType(inputValue, dataType);
+    onCellEdit(cellId, {
+      rowId,
+      columnId,
+      newValue: parsedValue,
+      oldValue: initialValue,
+      originalRowData
+    });
+    if (validateEdit) {
+      // Create new AbortController for this validation
+      const abortController = new AbortController();
+      validationAbortControllerRef.current = abortController;
+      const validationPromise = validateEdit(parsedValue);
+
+      // Race between validation and abort
+      Promise.race([validationPromise, new Promise((_, reject) => {
+        abortController.signal.addEventListener("abort", () => {
+          reject(new DOMException("Aborted", "AbortError"));
+        });
+      })]).then(errorMessage => {
+        if (abortController.signal.aborted) {
+          return;
+        }
+        if (errorMessage) {
+          onCellValidationError?.(cellId, errorMessage);
+        } else {
+          clearCellValidationError?.(cellId);
+        }
+      }, error => {
+        if (!abortController.signal.aborted && error.name !== "AbortError") {
+          onCellValidationError?.(cellId, VALIDATION_ERROR_MESSAGE);
+        }
+      });
+    }
+  }, [abortController, inputValue, dataType, onCellEdit, cellId, rowId, columnId, initialValue, originalRowData, validateEdit, onCellValidationError, clearCellValidationError]);
+  const handleChange = useCallback(value => {
+    // Cancel any in-flight validation
+    abortController();
+    setInputValue(value);
+  }, [abortController]);
+  const handleKeyDown = useCallback(e => {
+    if (e.key === "Enter") {
+      e.currentTarget.blur();
+    }
+    if (e.key === "Escape") {
+      isCancelled.current = true;
+      setInputValue(valueToString(currentValue));
+      e.currentTarget.blur();
+    }
+  }, [currentValue]);
+  const inputType = dataType && NUMBER_TYPES.includes(dataType) ? "number" : "text";
+  return /*#__PURE__*/React.createElement(Tooltip.Provider, null, /*#__PURE__*/React.createElement(Tooltip.Root, {
+    disabled: !hasValidationError
+  }, /*#__PURE__*/React.createElement(Tooltip.Trigger, null, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.osdkEditableCell, {
+      [styles.error]: hasValidationError,
+      [styles.osdkEditedInput]: currentValue !== initialValue
+    })
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: inputType,
+    value: inputValue,
+    className: styles.osdkEditableInput,
+    onValueChange: handleChange,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    "aria-invalid": hasValidationError
+  }), hasValidationError && /*#__PURE__*/React.createElement(Error, {
+    className: styles.errorIcon
+  }))), /*#__PURE__*/React.createElement(Tooltip.Portal, null, /*#__PURE__*/React.createElement(Tooltip.Positioner, {
+    sideOffset: 4,
+    side: "bottom"
+  }, /*#__PURE__*/React.createElement(Tooltip.Popup, null, /*#__PURE__*/React.createElement("div", {
+    className: styles.validationError
+  }, /*#__PURE__*/React.createElement(Error, {
+    className: styles.errorIcon
+  }), validationError), /*#__PURE__*/React.createElement(Tooltip.Arrow, null))))));
+}
+export const EditableCell = /*#__PURE__*/React.memo(EditableCellInner);
+//# sourceMappingURL=EditableCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditableCell.js","names":["Input","Error","classNames","React","useCallback","useEffect","useRef","useState","Tooltip","styles","NUMBER_TYPES","valueToString","value","JSON","stringify","String","parseValueByType","dataType","includes","parsedNumber","Number","isNaN","VALIDATION_ERROR_MESSAGE","EditableCellInner","initialValue","currentValue","cellId","onCellEdit","onCellValidationError","clearCellValidationError","originalRowData","rowId","columnId","validateEdit","validationError","inputValue","setInputValue","isCancelled","validationAbortControllerRef","abortController","current","abort","hasValidationError","handleBlur","parsedValue","newValue","oldValue","AbortController","validationPromise","Promise","race","_","reject","signal","addEventListener","DOMException","then","errorMessage","aborted","error","name","handleChange","handleKeyDown","e","key","currentTarget","blur","inputType","createElement","Provider","Root","disabled","Trigger","className","osdkEditableCell","osdkEditedInput","type","osdkEditableInput","onValueChange","onBlur","onKeyDown","errorIcon","Portal","Positioner","sideOffset","side","Popup","Arrow","EditableCell","memo"],"sources":["EditableCell.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Input } from \"@base-ui/react/input\";\nimport { Error } from \"@blueprintjs/icons\";\nimport type { RowData } from \"@tanstack/react-table\";\nimport classNames from \"classnames\";\nimport React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { Tooltip } from \"../base-components/tooltip/Tooltip.js\";\nimport styles from \"./EditableCell.module.css\";\nimport type { CellEditInfo } from \"./utils/types.js\";\n\nexport interface EditableCellProps<TData extends RowData, CellValue = unknown> {\n  initialValue: CellValue;\n  currentValue: CellValue;\n  cellId: string;\n  dataType?: string;\n  onCellEdit: (cellId: string, info: CellEditInfo<TData, CellValue>) => void;\n  onCellValidationError?: (\n    cellId: string,\n    error: string,\n  ) => void;\n  clearCellValidationError?: (cellId: string) => void;\n  validationError?: string;\n  originalRowData: TData;\n  rowId: string;\n  columnId: string;\n  validateEdit?: (value: unknown) => Promise<string | undefined>;\n}\n\nconst NUMBER_TYPES: string[] = [\n  \"double\",\n  \"integer\",\n  \"long\",\n  \"float\",\n  \"decimal\",\n  \"byte\",\n  \"short\",\n];\n\nfunction valueToString(value: unknown): string {\n  if (value == null) {\n    return \"\";\n  }\n  if (typeof value === \"object\") {\n    return JSON.stringify(value);\n  }\n  // At this point, value is a primitive (string, number, boolean, symbol, bigint)\n  return String(value as string | number | boolean | symbol | bigint);\n}\n\nfunction parseValueByType(\n  value: string,\n  dataType?: string,\n): unknown {\n  if (!dataType || !NUMBER_TYPES.includes(dataType)) {\n    return value;\n  }\n\n  if (value === \"\") {\n    return null;\n  }\n\n  const parsedNumber = Number(value);\n\n  if (isNaN(parsedNumber)) {\n    return value;\n  }\n\n  return parsedNumber;\n}\n\nconst VALIDATION_ERROR_MESSAGE = \"Validation error\";\n\nfunction EditableCellInner<TData extends RowData, CellValue = unknown>({\n  initialValue,\n  currentValue,\n  cellId,\n  dataType,\n  onCellEdit,\n  onCellValidationError,\n  clearCellValidationError,\n  originalRowData,\n  rowId,\n  columnId,\n  validateEdit,\n  validationError,\n}: EditableCellProps<TData, CellValue>): React.ReactElement {\n  const [inputValue, setInputValue] = useState<string>(\n    valueToString(currentValue),\n  );\n  const isCancelled = useRef(false);\n  const validationAbortControllerRef = useRef<AbortController | null>(null);\n\n  const abortController = useCallback(() => {\n    if (validationAbortControllerRef.current) {\n      validationAbortControllerRef.current.abort();\n      validationAbortControllerRef.current = null;\n    }\n  }, []);\n\n  const hasValidationError = validationError != null;\n  const isEdited = currentValue !== initialValue;\n\n  useEffect(() => {\n    setInputValue(valueToString(currentValue));\n  }, [currentValue]);\n\n  useEffect(() => {\n    // Cleanup abort controller on unmount\n    return () => {\n      abortController();\n    };\n  }, [abortController]);\n\n  const handleBlur = useCallback(() => {\n    // Do not commit the edit if it was cancelled with Escape key\n    if (isCancelled.current) {\n      isCancelled.current = false;\n      return;\n    }\n\n    // Cancel any in-flight validation\n    abortController();\n\n    const parsedValue = parseValueByType(inputValue, dataType) as CellValue;\n\n    onCellEdit(cellId, {\n      rowId,\n      columnId,\n      newValue: parsedValue,\n      oldValue: initialValue,\n      originalRowData,\n    });\n\n    if (validateEdit) {\n      // Create new AbortController for this validation\n      const abortController = new AbortController();\n      validationAbortControllerRef.current = abortController;\n\n      const validationPromise = validateEdit(parsedValue);\n\n      // Race between validation and abort\n      Promise.race([\n        validationPromise,\n        new Promise<string | undefined>((_, reject) => {\n          abortController.signal.addEventListener(\"abort\", () => {\n            reject(new DOMException(\"Aborted\", \"AbortError\"));\n          });\n        }),\n      ]).then(\n        (errorMessage) => {\n          if (abortController.signal.aborted) {\n            return;\n          }\n          if (errorMessage) {\n            onCellValidationError?.(cellId, errorMessage);\n          } else {\n            clearCellValidationError?.(cellId);\n          }\n        },\n        (error) => {\n          if (!abortController.signal.aborted && error.name !== \"AbortError\") {\n            onCellValidationError?.(cellId, VALIDATION_ERROR_MESSAGE);\n          }\n        },\n      );\n    }\n  }, [\n    abortController,\n    inputValue,\n    dataType,\n    onCellEdit,\n    cellId,\n    rowId,\n    columnId,\n    initialValue,\n    originalRowData,\n    validateEdit,\n    onCellValidationError,\n    clearCellValidationError,\n  ]);\n\n  const handleChange = useCallback((value: string) => {\n    // Cancel any in-flight validation\n    abortController();\n    setInputValue(value);\n  }, [abortController]);\n\n  const handleKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\") {\n        e.currentTarget.blur();\n      }\n      if (e.key === \"Escape\") {\n        isCancelled.current = true;\n        setInputValue(valueToString(currentValue));\n        e.currentTarget.blur();\n      }\n    },\n    [currentValue],\n  );\n\n  const inputType = dataType && NUMBER_TYPES.includes(dataType)\n    ? \"number\"\n    : \"text\";\n\n  return (\n    <Tooltip.Provider>\n      <Tooltip.Root disabled={!hasValidationError}>\n        <Tooltip.Trigger>\n          <div\n            className={classNames(styles.osdkEditableCell, {\n              [styles.error]: hasValidationError,\n              [styles.osdkEditedInput]: isEdited,\n            })}\n          >\n            <Input\n              type={inputType}\n              value={inputValue}\n              className={styles.osdkEditableInput}\n              onValueChange={handleChange}\n              onBlur={handleBlur}\n              onKeyDown={handleKeyDown}\n              aria-invalid={hasValidationError}\n            />\n            {hasValidationError && <Error className={styles.errorIcon} />}\n          </div>\n        </Tooltip.Trigger>\n        <Tooltip.Portal>\n          <Tooltip.Positioner sideOffset={4} side={\"bottom\"}>\n            <Tooltip.Popup>\n              <div className={styles.validationError}>\n                <Error className={styles.errorIcon} />\n                {validationError}\n              </div>\n              <Tooltip.Arrow />\n            </Tooltip.Popup>\n          </Tooltip.Positioner>\n        </Tooltip.Portal>\n      </Tooltip.Root>\n    </Tooltip.Provider>\n  );\n}\n\nexport const EditableCell = React.memo(\n  EditableCellInner,\n) as typeof EditableCellInner;\n"],"mappings":"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","ignoreList":[]}

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

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

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

@@ -0,0 +1,11 @@
+// CSS Module proxy for EditableCell.module.css
+const styles = {
+  "osdkEditableCell": "EditableCell-module__osdkEditableCell___P-nxlrRu",
+  "osdkEditedInput": "EditableCell-module__osdkEditedInput___HxzrAqJz",
+  "error": "EditableCell-module__error___yNbrj69Y",
+  "osdkEditableInput": "EditableCell-module__osdkEditableInput___2BjN5Q4P",
+  "validationError": "EditableCell-module__validationError___42e5gigN",
+  "errorIcon": "EditableCell-module__errorIcon___bBnWLGrm"
+};
+
+export default styles;

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

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

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

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

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

@@ -17,12 +17,13 @@
 import React from "react";
 import { LoadingCell } from "./LoadingCell.js";
 import rowStyles from "./TableRow.module.css.js";
+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/browser/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/browser/object-table/LoadingStateTable.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"LoadingStateTable.js","names":["classNames","React","useEffect","useRef","useState","loadingStyles","LoadingRow","bodyStyles","TableHeader","headerStyles","MIN_ROWS","LoadingStateTable","table","tableContainerRef","headerGroups","rowHeight","columnWidth","isSelectionEnabled","options","enableRowSelection","minHeaderCount","headers","hasHeadersLoaded","length","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, 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 isSelectionEnabled = table.options.enableRowSelection;\n  const minHeaderCount = isSelectionEnabled ? 1 : 0;\n  const headers = headerGroups[0]?.headers ?? [];\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","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":[]}

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

@@ -0,0 +1,181 @@
+/*
+ * 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 { 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 styles from "./MultiColumnSortDialog.module.css.js";
+import { SortableItemsList } from "./SortableItemsList.js";
+export function MultiColumnSortDialog({
+  isOpen,
+  onClose,
+  onApply,
+  currentSorting,
+  columnOptions
+}) {
+  const [selectedSortColumns, setSelectedSortColumns] = useState([]);
+  const [menuSearchQuery, setMenuSearchQuery] = useState("");
+
+  // Initialize selected sort columns from current sorting
+  useEffect(() => {
+    if (isOpen) {
+      const selectedColumns = [];
+      for (const sort of currentSorting) {
+        const column = columnOptions.find(col => col.id === sort.id);
+        if (column) {
+          selectedColumns.push({
+            ...column,
+            direction: sort.desc ? "desc" : "asc"
+          });
+        }
+      }
+      setSelectedSortColumns(selectedColumns);
+    }
+  }, [isOpen, currentSorting, columnOptions]);
+  const handleAddColumn = useCallback(column => {
+    setSelectedSortColumns(prev => [...prev, {
+      ...column,
+      direction: "asc"
+    }]);
+  }, []);
+  const handleRemoveSortColumn = useCallback(id => {
+    setSelectedSortColumns(prev => prev.filter(item => item.id !== id));
+  }, []);
+  const handleReorderSortColumns = useCallback((fromIndex, toIndex) => {
+    setSelectedSortColumns(items => arrayMove(items, fromIndex, toIndex));
+  }, []);
+  const handleToggleSortDirection = useCallback(id => {
+    setSelectedSortColumns(prev => prev.map(item => item.id === id ? {
+      ...item,
+      direction: item.direction === "asc" ? "desc" : "asc"
+    } : item));
+  }, []);
+  const handleApply = useCallback(() => {
+    const sortingState = selectedSortColumns.map(col => ({
+      id: col.id,
+      desc: col.direction === "desc"
+    }));
+    onApply(sortingState);
+    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 sortableItems = useMemo(() => {
+    return selectedSortColumns.map(item => ({
+      id: item.id,
+      label: item.name,
+      content: /*#__PURE__*/React.createElement("div", {
+        className: styles.sortColumnItem
+      }, /*#__PURE__*/React.createElement("span", {
+        className: classNames(styles.sortColumnName, styles.truncate)
+      }, item.name), /*#__PURE__*/React.createElement(Button, {
+        className: styles.sortDirectionButton,
+        onClick: () => handleToggleSortDirection(item.id),
+        "aria-label": `Toggle sort direction for ${item.name}`
+      }, item.direction === "asc" ? /*#__PURE__*/React.createElement(SortAlphabetical, {
+        className: styles.sortIcon
+      }) : /*#__PURE__*/React.createElement(SortAlphabeticalDesc, {
+        className: styles.sortIcon
+      })))
+    }));
+  }, [selectedSortColumns, handleToggleSortDirection]);
+  const footer = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionButton, {
+    onClick: onClose
+  }, "Cancel"), /*#__PURE__*/React.createElement(ActionButton, {
+    variant: "primary",
+    onClick: handleApply
+  }, "Apply")), [handleApply, onClose]);
+  const handleKeyDown = useCallback(event => {
+    event.stopPropagation();
+  }, []);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    isOpen: isOpen,
+    onOpenChange: onClose,
+    title: DialogTitle,
+    footer: footer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.sortColumnsList
+  }, /*#__PURE__*/React.createElement(SortableItemsList, {
+    items: sortableItems,
+    onReorder: handleReorderSortColumns,
+    onRemove: handleRemoveSortColumn,
+    className: styles.sortableList
+  }), /*#__PURE__*/React.createElement(Menu.Root, {
+    onOpenChange: handleMenuOpenChange
+  }, /*#__PURE__*/React.createElement(Menu.Trigger, {
+    className: 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: handleKeyDown
+  }), 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")))))));
+}
+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