@osdk/react-components 0.2.0-beta.1 → 0.2.0-beta.3

package/build/esm/filter-list/utils/getFilterKey.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getFilterKey.js","names":["assertUnreachable","getFilterKey","definition","type","id","key","linkName","linkedPropertyKey","Array","isArray","properties","join"],"sources":["getFilterKey.ts"],"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 { ObjectTypeDefinition } from \"@osdk/api\";\nimport type { FilterDefinitionUnion } from \"../FilterListApi.js\";\nimport { assertUnreachable } from \"./assertUnreachable.js\";\n\nexport function getFilterKey<Q extends ObjectTypeDefinition>(\n  definition: FilterDefinitionUnion<Q>,\n): string {\n  switch (definition.type) {\n    case \"PROPERTY\":\n      return definition.id ?? definition.key;\n    case \"HAS_LINK\":\n      return definition.id ?? `hasLink:${definition.linkName}`;\n    case \"LINKED_PROPERTY\":\n      return definition.id\n        ?? `linkedProperty:${definition.linkName}:${definition.linkedPropertyKey}`;\n    case \"KEYWORD_SEARCH\":\n      return definition.id\n        ?? `keywordSearch-${\n          Array.isArray(definition.properties)\n            ? definition.properties.join(\"-\")\n            : \"all\"\n        }`;\n    case \"CUSTOM\":\n      return definition.id ?? definition.key;\n    default:\n      return assertUnreachable(definition);\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAIA,SAASA,iBAAiB,QAAQ,wBAAwB;AAE1D,OAAO,SAASC,YAAYA,CAC1BC,UAAoC,EAC5B;EACR,QAAQA,UAAU,CAACC,IAAI;IACrB,KAAK,UAAU;MACb,OAAOD,UAAU,CAACE,EAAE,IAAIF,UAAU,CAACG,GAAG;IACxC,KAAK,UAAU;MACb,OAAOH,UAAU,CAACE,EAAE,IAAI,WAAWF,UAAU,CAACI,QAAQ,EAAE;IAC1D,KAAK,iBAAiB;MACpB,OAAOJ,UAAU,CAACE,EAAE,IACf,kBAAkBF,UAAU,CAACI,QAAQ,IAAIJ,UAAU,CAACK,iBAAiB,EAAE;IAC9E,KAAK,gBAAgB;MACnB,OAAOL,UAAU,CAACE,EAAE,IACf,iBACDI,KAAK,CAACC,OAAO,CAACP,UAAU,CAACQ,UAAU,CAAC,GAChCR,UAAU,CAACQ,UAAU,CAACC,IAAI,CAAC,GAAG,CAAC,GAC/B,KAAK,EACT;IACN,KAAK,QAAQ;MACX,OAAOT,UAAU,CAACE,EAAE,IAAIF,UAAU,CAACG,GAAG;IACxC;MACE,OAAOL,iBAAiB,CAACE,UAAU,CAAC;EACxC;AACF","ignoreList":[]}

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

@@ -0,0 +1,259 @@
+/*
+ * 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 { Collapsible } from "@base-ui/react/collapsible";
+import { CaretDown, Cog, SmallInfoSign } 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 { Checkbox } from "../base-components/checkbox/Checkbox.js";
+import { Dialog } from "../base-components/dialog/Dialog.js";
+import { DraggableList } from "../base-components/draggable-list/DraggableList.js";
+import { SearchBar } from "../base-components/search-bar/SearchBar.js";
+import styles from "./ColumnConfigDialog.module.css";
+export function ColumnConfigDialog({
+  isOpen,
+  onClose,
+  columnOptions,
+  currentVisibility,
+  currentColumnOrder,
+  onApply,
+  isValidConfig
+}) {
+  const [visibleColumns, setVisibleColumns] = useState([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const allColumns = useMemo(() => {
+    return columnOptions.map(opt => {
+      const isVisible = currentVisibility ? currentVisibility[opt.id] : false;
+      return {
+        id: opt.id,
+        label: opt.name,
+        isVisible
+      };
+    });
+  }, [columnOptions, currentVisibility]);
+
+  // Sync local state with prop when dialog is opened
+  useEffect(() => {
+    if (isOpen) {
+      const visibleCols = allColumns.filter(col => col.isVisible);
+
+      // Sort by current column order if available
+      if (!!currentColumnOrder?.length) {
+        visibleCols.sort((a, b) => {
+          const indexA = currentColumnOrder.indexOf(a.id);
+          const indexB = currentColumnOrder.indexOf(b.id);
+          // If not in order array, put at end
+          const orderA = indexA === -1 ? Infinity : indexA;
+          const orderB = indexB === -1 ? Infinity : indexB;
+          return orderA - orderB;
+        });
+      }
+      setVisibleColumns(visibleCols);
+      setSearchQuery("");
+    }
+  }, [isOpen, allColumns, currentColumnOrder]);
+  const handleApply = useCallback(() => {
+    onApply(getColumnConfig(allColumns, visibleColumns));
+    onClose();
+  }, [allColumns, visibleColumns, onApply, onClose]);
+
+  // If no condition provided, default to valid
+  const isValid = isValidConfig ? isValidConfig(getColumnConfig(allColumns, visibleColumns)) : true;
+  const isApplyDisabled = visibleColumns.length === 0 || !isValid;
+  const handleReorderColumns = useCallback((fromIndex, toIndex) => {
+    setVisibleColumns(items => arrayMove(items, fromIndex, toIndex));
+  }, []);
+  const handleRemoveColumn = useCallback(columnId => {
+    setVisibleColumns(prev => prev.filter(col => col.id !== columnId));
+  }, []);
+  const handleToggleColumn = useCallback(column => {
+    setVisibleColumns(prev => {
+      const isCurrentlyVisible = prev.some(col => col.id === column.id);
+      if (isCurrentlyVisible) {
+        return prev.filter(col => col.id !== column.id);
+      } else {
+        return [...prev, column];
+      }
+    });
+  }, []);
+  const handleSearchChange = useCallback(event => {
+    setSearchQuery(event.target.value);
+  }, []);
+  const handleSelectAll = useCallback(columns => {
+    setVisibleColumns(prev => {
+      const allSelected = columns.every(col => prev.some(v => v.id === col.id));
+      if (allSelected) {
+        // Deselect all filtered columns
+        return prev.filter(v => !columns.some(col => col.id === v.id));
+      } else {
+        // Select all filtered columns that aren't already selected
+        const newColumns = columns.filter(col => !prev.some(v => v.id === col.id));
+        return [...prev, ...newColumns];
+      }
+    });
+  }, []);
+  const filteredAvailableColumns = useMemo(() => {
+    const query = searchQuery.toLowerCase().trim();
+    if (!query) {
+      return allColumns;
+    }
+    return allColumns.filter(col => (col.label?.toLowerCase().includes(query) ?? false) || col.id.toLowerCase().includes(query));
+  }, [allColumns, searchQuery]);
+  const footer = useMemo(() => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ActionButton, {
+    onClick: onClose
+  }, "Cancel"), /*#__PURE__*/React.createElement(ActionButton, {
+    variant: "primary",
+    onClick: handleApply,
+    disabled: isApplyDisabled
+  }, "Apply")), [onClose, handleApply, isApplyDisabled]);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    isOpen: isOpen,
+    onOpenChange: onClose,
+    title: DialogTitle,
+    footer: footer,
+    className: styles.columnConfigDialog
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.dialogLayout
+  }, /*#__PURE__*/React.createElement(VisibleColumnsList, {
+    columns: visibleColumns,
+    onReorder: handleReorderColumns,
+    onRemove: handleRemoveColumn
+  }), /*#__PURE__*/React.createElement(AvailableColumnsList, {
+    visibleColumns: visibleColumns,
+    searchQuery: searchQuery,
+    onSearchChange: handleSearchChange,
+    onToggleColumn: handleToggleColumn,
+    onSelectAll: handleSelectAll,
+    filteredColumns: filteredAvailableColumns
+  })));
+}
+const DialogTitle = /*#__PURE__*/React.createElement("div", {
+  className: styles.title
+}, /*#__PURE__*/React.createElement(Cog, null), "Configure Table Columns");
+const getColumnConfig = (allColumns, visibleColumns) => {
+  const hiddenColumns = allColumns.filter(col => !visibleColumns.some(v => v.id === col.id));
+  return [...visibleColumns.map(col => ({
+    columnId: col.id,
+    isVisible: true
+  })), ...hiddenColumns.map(col => ({
+    columnId: col.id,
+    isVisible: false
+  }))];
+};
+function VisibleColumnsList({
+  columns,
+  onReorder,
+  onRemove
+}) {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.visibleColumnsContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.sectionHeader
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.sectionTitle
+  }, /*#__PURE__*/React.createElement("span", null, "Visible Columns"), /*#__PURE__*/React.createElement("span", {
+    className: styles.countTag
+  }, columns.length)), /*#__PURE__*/React.createElement("div", {
+    className: styles.sectionHint
+  }, "Drag to reorder")), /*#__PURE__*/React.createElement(DraggableList, {
+    items: columns,
+    onReorder: onReorder,
+    onRemove: onRemove,
+    removeIconVariant: "trash",
+    emptyMessage: "No visible columns",
+    className: styles.columnList
+  }));
+}
+function AvailableColumnsList({
+  visibleColumns,
+  searchQuery,
+  onSearchChange,
+  onToggleColumn,
+  onSelectAll,
+  filteredColumns
+}) {
+  const selectedCount = visibleColumns.length;
+  const totalCount = filteredColumns.length;
+  const allFilteredSelected = filteredColumns.every(col => visibleColumns.some(v => v.id === col.id));
+  const someFilteredSelected = filteredColumns.some(col => visibleColumns.some(v => v.id === col.id));
+  const handleSelectAllClick = useCallback(() => {
+    onSelectAll(filteredColumns);
+  }, [filteredColumns, onSelectAll]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.availableColumnsContainer
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(styles.sectionHeader, styles.sectionTitle)
+  }, "Add or Remove Columns"), /*#__PURE__*/React.createElement(SearchBar, {
+    value: searchQuery,
+    onChange: onSearchChange,
+    placeholder: "Search...",
+    "aria-label": "Search available columns",
+    className: styles.searchContainer
+  }), /*#__PURE__*/React.createElement(Collapsible.Root, {
+    defaultOpen: true,
+    className: styles.propertiesList
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.categoryHeader
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: allFilteredSelected,
+    indeterminate: someFilteredSelected && !allFilteredSelected,
+    onCheckedChange: handleSelectAllClick,
+    className: styles.checkbox
+  }), /*#__PURE__*/React.createElement(Collapsible.Trigger, {
+    className: styles.categoryTrigger
+  }, /*#__PURE__*/React.createElement("span", {
+    className: styles.categoryTitle
+  }, "All Columns"), /*#__PURE__*/React.createElement("span", {
+    className: styles.categoryCount
+  }, selectedCount, "/", totalCount), /*#__PURE__*/React.createElement(CaretDown, {
+    className: styles.caretIcon
+  }))), /*#__PURE__*/React.createElement(Collapsible.Panel, {
+    className: styles.propertyList
+  }, filteredColumns.length === 0 ? /*#__PURE__*/React.createElement("div", {
+    className: styles.emptyState
+  }, "No matching columns found") : filteredColumns.map(column => /*#__PURE__*/React.createElement(PropertyItem, {
+    key: column.id,
+    column: column,
+    isSelected: visibleColumns.some(v => v.id === column.id),
+    onToggle: onToggleColumn
+  })))));
+}
+function PropertyItem({
+  column,
+  isSelected,
+  onToggle,
+  showInfoIcon = false
+}) {
+  const handleClick = useCallback(() => {
+    onToggle(column);
+  }, [onToggle, column]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.propertyItem
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: isSelected,
+    onCheckedChange: handleClick,
+    className: styles.checkbox
+  }), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleClick,
+    className: styles.propertyName
+  }, column.label), showInfoIcon && /*#__PURE__*/React.createElement(SmallInfoSign, {
+    className: styles.infoIcon
+  }));
+}
+//# sourceMappingURL=ColumnConfigDialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnConfigDialog.js","names":["Button","Collapsible","CaretDown","Cog","SmallInfoSign","arrayMove","classNames","React","useCallback","useEffect","useMemo","useState","ActionButton","Checkbox","Dialog","DraggableList","SearchBar","styles","ColumnConfigDialog","isOpen","onClose","columnOptions","currentVisibility","currentColumnOrder","onApply","isValidConfig","visibleColumns","setVisibleColumns","searchQuery","setSearchQuery","allColumns","map","opt","isVisible","id","label","name","visibleCols","filter","col","length","sort","a","b","indexA","indexOf","indexB","orderA","Infinity","orderB","handleApply","getColumnConfig","isValid","isApplyDisabled","handleReorderColumns","fromIndex","toIndex","items","handleRemoveColumn","columnId","prev","handleToggleColumn","column","isCurrentlyVisible","some","handleSearchChange","event","target","value","handleSelectAll","columns","allSelected","every","v","newColumns","filteredAvailableColumns","query","toLowerCase","trim","includes","footer","createElement","Fragment","onClick","variant","disabled","onOpenChange","title","DialogTitle","className","columnConfigDialog","dialogLayout","VisibleColumnsList","onReorder","onRemove","AvailableColumnsList","onSearchChange","onToggleColumn","onSelectAll","filteredColumns","hiddenColumns","visibleColumnsContainer","sectionHeader","sectionTitle","countTag","sectionHint","removeIconVariant","emptyMessage","columnList","selectedCount","totalCount","allFilteredSelected","someFilteredSelected","handleSelectAllClick","availableColumnsContainer","onChange","placeholder","searchContainer","Root","defaultOpen","propertiesList","categoryHeader","checked","indeterminate","onCheckedChange","checkbox","Trigger","categoryTrigger","categoryTitle","categoryCount","caretIcon","Panel","propertyList","emptyState","PropertyItem","key","isSelected","onToggle","showInfoIcon","handleClick","propertyItem","propertyName","infoIcon"],"sources":["ColumnConfigDialog.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 { Collapsible } from \"@base-ui/react/collapsible\";\nimport { CaretDown, Cog, SmallInfoSign } from \"@blueprintjs/icons\";\nimport { arrayMove } from \"@dnd-kit/sortable\";\nimport type { ColumnOrderState, VisibilityState } 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 { Checkbox } from \"../base-components/checkbox/Checkbox.js\";\nimport { Dialog } from \"../base-components/dialog/Dialog.js\";\nimport { DraggableList } from \"../base-components/draggable-list/DraggableList.js\";\nimport { SearchBar } from \"../base-components/search-bar/SearchBar.js\";\nimport styles from \"./ColumnConfigDialog.module.css\";\nimport type { ColumnOption } from \"./utils/types.js\";\n\nexport interface ColumnConfig {\n  columnId: string;\n  isVisible: boolean;\n}\n\nexport type ColumnConfigOptions = Array<Pick<ColumnOption, \"id\" | \"name\">>;\n\nexport interface ColumnConfigDialogProps {\n  isOpen: boolean;\n  onClose: () => void;\n  columnOptions: ColumnConfigOptions;\n  currentVisibility?: VisibilityState;\n  currentColumnOrder?: ColumnOrderState;\n  onApply: (\n    columns: ColumnConfig[],\n  ) => void;\n  isValidConfig?: (columns: ColumnConfig[]) => boolean;\n}\n\ninterface ColumnItem {\n  id: string;\n  label: string;\n  isVisible: boolean;\n}\n\nexport function ColumnConfigDialog({\n  isOpen,\n  onClose,\n  columnOptions,\n  currentVisibility,\n  currentColumnOrder,\n  onApply,\n  isValidConfig,\n}: ColumnConfigDialogProps):\n  | React.ReactElement\n  | null\n{\n  const [visibleColumns, setVisibleColumns] = useState<ColumnItem[]>([]);\n  const [searchQuery, setSearchQuery] = useState(\"\");\n\n  const allColumns: ColumnItem[] = useMemo(() => {\n    return columnOptions.map((opt) => {\n      const isVisible = currentVisibility\n        ? currentVisibility[opt.id]\n        : false;\n\n      return {\n        id: opt.id,\n        label: opt.name,\n        isVisible,\n      };\n    });\n  }, [columnOptions, currentVisibility]);\n\n  // Sync local state with prop when dialog is opened\n  useEffect(() => {\n    if (isOpen) {\n      const visibleCols = allColumns.filter((col) => col.isVisible);\n\n      // Sort by current column order if available\n      if (!!currentColumnOrder?.length) {\n        visibleCols.sort((a, b) => {\n          const indexA = currentColumnOrder.indexOf(a.id);\n          const indexB = currentColumnOrder.indexOf(b.id);\n          // If not in order array, put at end\n          const orderA = indexA === -1 ? Infinity : indexA;\n          const orderB = indexB === -1 ? Infinity : indexB;\n          return orderA - orderB;\n        });\n      }\n\n      setVisibleColumns(visibleCols);\n      setSearchQuery(\"\");\n    }\n  }, [isOpen, allColumns, currentColumnOrder]);\n\n  const handleApply = useCallback(() => {\n    onApply(getColumnConfig(allColumns, visibleColumns));\n    onClose();\n  }, [allColumns, visibleColumns, onApply, onClose]);\n\n  // If no condition provided, default to valid\n  const isValid = isValidConfig\n    ? isValidConfig(getColumnConfig(allColumns, visibleColumns))\n    : true;\n\n  const isApplyDisabled = visibleColumns.length === 0 || !isValid;\n\n  const handleReorderColumns = useCallback(\n    (fromIndex: number, toIndex: number) => {\n      setVisibleColumns((items) => arrayMove(items, fromIndex, toIndex));\n    },\n    [],\n  );\n\n  const handleRemoveColumn = useCallback((columnId: string) => {\n    setVisibleColumns((prev) => prev.filter((col) => col.id !== columnId));\n  }, []);\n\n  const handleToggleColumn = useCallback((column: ColumnItem) => {\n    setVisibleColumns((prev) => {\n      const isCurrentlyVisible = prev.some((col) => col.id === column.id);\n      if (isCurrentlyVisible) {\n        return prev.filter((col) => col.id !== column.id);\n      } else {\n        return [...prev, column];\n      }\n    });\n  }, []);\n\n  const handleSearchChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      setSearchQuery(event.target.value);\n    },\n    [],\n  );\n\n  const handleSelectAll = useCallback((columns: ColumnItem[]) => {\n    setVisibleColumns((prev) => {\n      const allSelected = columns.every((col) =>\n        prev.some((v) => v.id === col.id)\n      );\n      if (allSelected) {\n        // Deselect all filtered columns\n        return prev.filter(\n          (v) => !columns.some((col) => col.id === v.id),\n        );\n      } else {\n        // Select all filtered columns that aren't already selected\n        const newColumns = columns.filter(\n          (col) => !prev.some((v) => v.id === col.id),\n        );\n        return [...prev, ...newColumns];\n      }\n    });\n  }, []);\n\n  const filteredAvailableColumns = useMemo(() => {\n    const query = searchQuery.toLowerCase().trim();\n    if (!query) {\n      return allColumns;\n    }\n    return allColumns.filter(\n      (col) =>\n        (col.label?.toLowerCase().includes(query) ?? false)\n        || col.id.toLowerCase().includes(query),\n    );\n  }, [allColumns, searchQuery]);\n\n  const footer = useMemo(() => (\n    <>\n      <ActionButton onClick={onClose}>Cancel</ActionButton>\n      <ActionButton\n        variant=\"primary\"\n        onClick={handleApply}\n        disabled={isApplyDisabled}\n      >\n        Apply\n      </ActionButton>\n    </>\n  ), [onClose, handleApply, isApplyDisabled]);\n\n  return (\n    <Dialog\n      isOpen={isOpen}\n      onOpenChange={onClose}\n      title={DialogTitle}\n      footer={footer}\n      className={styles.columnConfigDialog}\n    >\n      <div className={styles.dialogLayout}>\n        <VisibleColumnsList\n          columns={visibleColumns}\n          onReorder={handleReorderColumns}\n          onRemove={handleRemoveColumn}\n        />\n        <AvailableColumnsList\n          visibleColumns={visibleColumns}\n          searchQuery={searchQuery}\n          onSearchChange={handleSearchChange}\n          onToggleColumn={handleToggleColumn}\n          onSelectAll={handleSelectAll}\n          filteredColumns={filteredAvailableColumns}\n        />\n      </div>\n    </Dialog>\n  );\n}\n\nconst DialogTitle = (\n  <div className={styles.title}>\n    <Cog />Configure Table Columns\n  </div>\n);\n\nconst getColumnConfig = (\n  allColumns: ColumnItem[],\n  visibleColumns: ColumnItem[],\n): ColumnConfig[] => {\n  const hiddenColumns = allColumns.filter(\n    (col) => !visibleColumns.some((v) => v.id === col.id),\n  );\n\n  return [\n    ...visibleColumns.map((col) => ({ columnId: col.id, isVisible: true })),\n    ...hiddenColumns.map((col) => ({ columnId: col.id, isVisible: false })),\n  ];\n};\n\ninterface VisibleColumnsListProps {\n  columns: ColumnItem[];\n  onReorder: (fromIndex: number, toIndex: number) => void;\n  onRemove: (columnId: string) => void;\n}\n\nfunction VisibleColumnsList({\n  columns,\n  onReorder,\n  onRemove,\n}: VisibleColumnsListProps): React.ReactElement {\n  return (\n    <div className={styles.visibleColumnsContainer}>\n      <div className={styles.sectionHeader}>\n        <div className={styles.sectionTitle}>\n          <span>Visible Columns</span>\n          <span className={styles.countTag}>{columns.length}</span>\n        </div>\n        <div className={styles.sectionHint}>Drag to reorder</div>\n      </div>\n      <DraggableList\n        items={columns}\n        onReorder={onReorder}\n        onRemove={onRemove}\n        removeIconVariant=\"trash\"\n        emptyMessage=\"No visible columns\"\n        className={styles.columnList}\n      />\n    </div>\n  );\n}\n\ninterface AvailableColumnsListProps {\n  visibleColumns: ColumnItem[];\n  searchQuery: string;\n  onSearchChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  onToggleColumn: (column: ColumnItem) => void;\n  onSelectAll: (columns: ColumnItem[]) => void;\n  filteredColumns: ColumnItem[];\n}\n\nfunction AvailableColumnsList({\n  visibleColumns,\n  searchQuery,\n  onSearchChange,\n  onToggleColumn,\n  onSelectAll,\n  filteredColumns,\n}: AvailableColumnsListProps): React.ReactElement {\n  const selectedCount = visibleColumns.length;\n  const totalCount = filteredColumns.length;\n  const allFilteredSelected = filteredColumns.every((col) =>\n    visibleColumns.some((v) => v.id === col.id)\n  );\n  const someFilteredSelected = filteredColumns.some((col) =>\n    visibleColumns.some((v) => v.id === col.id)\n  );\n\n  const handleSelectAllClick = useCallback(() => {\n    onSelectAll(filteredColumns);\n  }, [filteredColumns, onSelectAll]);\n\n  return (\n    <div className={styles.availableColumnsContainer}>\n      <div className={classNames(styles.sectionHeader, styles.sectionTitle)}>\n        Add or Remove Columns\n      </div>\n      <SearchBar\n        value={searchQuery}\n        onChange={onSearchChange}\n        placeholder=\"Search...\"\n        aria-label=\"Search available columns\"\n        className={styles.searchContainer}\n      />\n      <Collapsible.Root defaultOpen className={styles.propertiesList}>\n        <div className={styles.categoryHeader}>\n          <Checkbox\n            checked={allFilteredSelected}\n            indeterminate={someFilteredSelected && !allFilteredSelected}\n            onCheckedChange={handleSelectAllClick}\n            className={styles.checkbox}\n          />\n          <Collapsible.Trigger className={styles.categoryTrigger}>\n            <span className={styles.categoryTitle}>All Columns</span>\n            <span className={styles.categoryCount}>\n              {selectedCount}/{totalCount}\n            </span>\n            <CaretDown className={styles.caretIcon} />\n          </Collapsible.Trigger>\n        </div>\n        <Collapsible.Panel className={styles.propertyList}>\n          {filteredColumns.length === 0\n            ? (\n              <div className={styles.emptyState}>\n                No matching columns found\n              </div>\n            )\n            : (\n              filteredColumns.map((column) => (\n                <PropertyItem\n                  key={column.id}\n                  column={column}\n                  isSelected={visibleColumns.some((v) => v.id === column.id)}\n                  onToggle={onToggleColumn}\n                />\n              ))\n            )}\n        </Collapsible.Panel>\n      </Collapsible.Root>\n    </div>\n  );\n}\n\ninterface PropertyItemProps {\n  column: ColumnItem;\n  isSelected: boolean;\n  onToggle: (column: ColumnItem) => void;\n  showInfoIcon?: boolean;\n}\n\nfunction PropertyItem({\n  column,\n  isSelected,\n  onToggle,\n  showInfoIcon = false,\n}: PropertyItemProps): React.ReactElement {\n  const handleClick = useCallback(() => {\n    onToggle(column);\n  }, [onToggle, column]);\n\n  return (\n    <div className={styles.propertyItem}>\n      <Checkbox\n        checked={isSelected}\n        onCheckedChange={handleClick}\n        className={styles.checkbox}\n      />\n      <Button\n        onClick={handleClick}\n        className={styles.propertyName}\n      >\n        {column.label}\n      </Button>\n      {showInfoIcon && <SmallInfoSign className={styles.infoIcon} />}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,247 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.title {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+}
+
+/* Override dialog styling */
+.columnConfigDialog {
+  --osdk-dialog-min-width: var(--osdk-table-column-config-dialog-min-width);
+  --osdk-dialog-min-height: var(--osdk-table-column-config-dialog-min-height);
+  --osdk-dialog-body-padding: 0;
+}
+
+.dialogLayout {
+  display: flex;
+  flex-direction: row;
+  gap: 0;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.visibleColumnsContainer {
+  flex: 1.5;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: calc(var(--osdk-surface-spacing) * 5);
+  background: var(--osdk-table-column-config-visible-columns-bg);
+  border-right: 1px solid var(--osdk-surface-border-color-default);
+}
+
+.availableColumnsContainer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: calc(var(--osdk-surface-spacing) * 5)
+    calc(var(--osdk-surface-spacing) * 3);
+}
+
+.sectionHeader {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: calc(var(--osdk-surface-spacing) * 5);
+}
+
+.sectionTitle {
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  font-size: var(--osdk-typography-size-body-medium);
+  font-weight: var(--osdk-typography-weight-bold);
+  color: var(--osdk-typography-color-muted);
+  flex-shrink: 0;
+  gap: var(--osdk-surface-spacing);
+}
+
+.countTag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--osdk-custom-color-gray-3);
+  padding: calc(var(--osdk-surface-spacing) / 2)
+    calc(var(--osdk-surface-spacing) * 1.5);
+  border-radius: var(--osdk-surface-border-radius);
+  font-size: var(--osdk-typography-size-body-small);
+  font-weight: var(--osdk-typography-weight-default);
+  color: var(--osdk-typography-color-default-rest);
+}
+
+.sectionHint {
+  font-size: var(--osdk-typography-size-body-small);
+  color: var(--osdk-typography-color-muted);
+}
+
+.columnList {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.searchContainer {
+  margin-bottom: calc(var(--osdk-surface-spacing) * 2);
+  flex-shrink: 0;
+}
+
+.propertiesList {
+  flex: 1;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.categoryHeader {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  width: 100%;
+  padding: calc(var(--osdk-surface-spacing) * 2)
+    calc(var(--osdk-surface-spacing) * 3);
+  background: none;
+  border: none;
+  margin: 0;
+  gap: calc(var(--osdk-surface-spacing) * 3);
+  flex-shrink: 0;
+}
+
+.categoryTrigger {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.categoryTitle {
+  flex: 1;
+  color: var(--osdk-typography-color-muted);
+  font-size: var(--osdk-typography-size-body-small);
+  font-weight: var(--osdk-typography-weight-bold);
+  text-align: left;
+}
+
+.categoryCount {
+  color: var(--osdk-typography-color-muted);
+  font-size: var(--osdk-typography-size-body-small);
+  margin-left: var(--osdk-surface-spacing);
+}
+
+.caretIcon {
+  color: var(--osdk-typography-color-muted);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.categoryTrigger[data-panel-open] .caretIcon {
+  transform: rotate(180deg);
+}
+
+.checkbox {
+  width: var(--osdk-checkbox-icon-size);
+  height: var(--osdk-checkbox-icon-size);
+}
+
+.propertyList {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+.propertyItem {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  width: 100%;
+  gap: calc(var(--osdk-surface-spacing) * 3);
+  padding: calc(var(--osdk-surface-spacing) * 2)
+    calc(var(--osdk-surface-spacing) * 3);
+  background: none;
+  border: none;
+  cursor: pointer;
+  text-align: left;
+  border-radius: var(--osdk-surface-border-radius);
+
+  &:hover {
+    background-color: var(--osdk-surface-background-color-default-hover);
+  }
+}
+
+.checkboxIndicator {
+  color: var(--osdk-intent-primary-foreground);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.propertyName {
+  text-align: left;
+  flex: 1;
+  font-size: var(--osdk-typography-size-body-medium);
+  font-weight: 400;
+  color: var(--osdk-typography-color-default-rest);
+  padding: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  background: none;
+  border: none;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-focus-outline);
+    outline-offset: var(--osdk-focus-visible-outline-offset);
+  }
+}
+
+.infoIcon {
+  color: var(--osdk-typography-color-muted);
+  flex-shrink: 0;
+  width: calc(var(--osdk-checkbox-icon-size) * 0.75);
+  height: calc(var(--osdk-checkbox-icon-size) * 0.75);
+}
+
+.emptyState {
+  padding: calc(var(--osdk-surface-spacing) * 5);
+  text-align: center;
+  color: var(--osdk-typography-color-muted);
+  font-style: italic;
+}

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

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

package/build/esm/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":[]}