@osdk/react-components 0.2.0-beta.12 → 0.2.0-beta.14

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @osdk/react-components
 
+## 0.2.0-beta.14
+
+### Minor Changes
+
+- fb9383c: Fix table crashes on remount
+
+## 0.2.0-beta.13
+
+### Minor Changes
+
+- 76ee40a: Fix column resize and value change ux
+- edbe438: FilterList base components with drag-and-drop sorting and tokenized styling
+
+### Patch Changes
+
+- Updated dependencies [8c30908]
+  - @osdk/client@2.8.0-beta.17
+  - @osdk/api@2.8.0-beta.17
+  - @osdk/react@0.10.0-beta.8
+
 ## 0.2.0-beta.12
 
 ### Minor Changes

package/build/browser/base-components/draggable-list/DraggableList.module.css

@@ -40,7 +40,7 @@
 
 .dragHandle {
   display: flex;
-  cursor: grab;
+  cursor: var(--osdk-drag-handle-cursor);
   color: var(--osdk-draggable-item-drag-icon-color);
 
   &:hover {
@@ -48,7 +48,7 @@
   }
 
   &:active {
-    cursor: grabbing;
+    cursor: var(--osdk-drag-handle-cursor-active);
   }
 
   &:focus {

package/build/browser/filter-list/FilterListApi.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterListApi.js","names":[],"sources":["FilterListApi.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 {\n  LinkNames,\n  ObjectSet,\n  ObjectTypeDefinition,\n  WhereClause,\n} from \"@osdk/api\";\nimport type React from \"react\";\nimport type {\n  FilterState as FilterStateType,\n  PropertyFilterDefinition,\n} from \"./FilterListItemApi.js\";\nimport type { CustomFilterDefinition } from \"./types/CustomRendererTypes.js\";\nimport type { KeywordSearchFilterDefinition } from \"./types/KeywordSearchTypes.js\";\nimport type {\n  HasLinkFilterDefinition,\n  LinkedPropertyFilterDefinition,\n} from \"./types/LinkedFilterTypes.js\";\n\n/**\n * Union type of all filter definition types\n */\nexport type FilterDefinitionUnion<Q extends ObjectTypeDefinition> =\n  | PropertyFilterDefinition<Q>\n  | HasLinkFilterDefinition<Q>\n  | LinkedPropertyFilterDefinition<Q, LinkNames<Q>>\n  | KeywordSearchFilterDefinition<Q>\n  | CustomFilterDefinition<Q>;\n\n/**\n * Extract the key from a filter definition union\n */\nexport type FilterKey<Q extends ObjectTypeDefinition> =\n  FilterDefinitionUnion<Q> extends infer D ? D extends { key: infer K } ? K\n    : D extends { linkName: infer L } ? L\n    : never\n    : never;\n\n/**\n * Extract the filter state from a filter definition union\n */\nexport type FilterState<Q extends ObjectTypeDefinition> =\n  FilterDefinitionUnion<Q> extends infer D\n    ? D extends { filterState: infer S } ? S\n    : never\n    : never;\n\n/**\n * Map from filter definition objects to their current state.\n * Uses object identity for keys, ensuring stable lookups across reorders.\n */\nexport type FilterStatesMap<Q extends ObjectTypeDefinition> = Map<\n  FilterDefinitionUnion<Q>,\n  FilterStateType\n>;\n\nexport interface FilterListProps<Q extends ObjectTypeDefinition> {\n  /**\n   * The set of objects to be filtered\n   */\n  objectSet: ObjectSet<Q>;\n\n  /**\n   * Optional title to display in the filter list header\n   */\n  title?: string;\n\n  /**\n   * Optional icon to display next to the title\n   */\n  titleIcon?: React.ReactNode;\n\n  /**\n   * The definition for all supported filter items in the list\n   * If not supplied, all filterable properties will be available\n   */\n  filterDefinitions?: Array<FilterDefinitionUnion<Q>>;\n\n  /**\n   * The current where clause to filter the objectSet.\n   * If provided, the filter clause is controlled.\n   */\n  filterClause?: WhereClause<Q>;\n\n  /**\n   * Called when the filter clause changes.\n   * The filters are joined by the selected filterOperator.\n   * Required in controlled mode.\n   *\n   * @param newClause The updated filter clause\n   */\n  onFilterClauseChanged?: (newClause: WhereClause<Q>) => void;\n\n  /**\n   * The logical operator to join multiple filters\n   *\n   * @default \"and\"\n   */\n  filterOperator?: \"and\" | \"or\";\n\n  /**\n   * Called when filter state changes\n   *\n   * @param definition The filter definition whose state changed\n   * @param newState The updated filter state\n   */\n  onFilterStateChanged?: (\n    definition: FilterDefinitionUnion<Q>,\n    newState: FilterStateType,\n  ) => void;\n\n  /**\n   * Called when a filter is added\n   * If provided, user will be allowed to add filters\n   *\n   * @param filterKey The key of the added filter\n   * @param newDefinitions The filter list with the new filter added\n   */\n  onFilterAdded?: (\n    filterKey: FilterKey<Q>,\n    newDefinitions: Array<FilterDefinitionUnion<Q>>,\n  ) => void;\n\n  /**\n   * Called when a filter is removed\n   * If provided, user will be allowed to remove filters\n   *\n   * @param filterKey The key of the removed filter\n   */\n  onFilterRemoved?: (filterKey: FilterKey<Q>) => void;\n\n  /**\n   * Show reset filters button in header\n   */\n  showResetButton?: boolean;\n\n  /**\n   * Called when reset button is clicked\n   */\n  onReset?: () => void;\n\n  /**\n   * Show count of active filters in header\n   */\n  showActiveFilterCount?: boolean;\n\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n\n  /**\n   * Custom render function for the \"Add filter\" button.\n   * When not provided, a default button is shown if onFilterAdded is set.\n   */\n  renderAddFilterButton?: () => React.ReactNode;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"file":"FilterListApi.js","names":[],"sources":["FilterListApi.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 {\n  LinkNames,\n  ObjectSet,\n  ObjectTypeDefinition,\n  WhereClause,\n} from \"@osdk/api\";\nimport type React from \"react\";\nimport type {\n  FilterState as FilterStateType,\n  PropertyFilterDefinition,\n} from \"./FilterListItemApi.js\";\nimport type { CustomFilterDefinition } from \"./types/CustomRendererTypes.js\";\nimport type { KeywordSearchFilterDefinition } from \"./types/KeywordSearchTypes.js\";\nimport type {\n  HasLinkFilterDefinition,\n  LinkedPropertyFilterDefinition,\n} from \"./types/LinkedFilterTypes.js\";\n\n/**\n * Union type of all filter definition types\n */\nexport type FilterDefinitionUnion<Q extends ObjectTypeDefinition> =\n  | PropertyFilterDefinition<Q>\n  | HasLinkFilterDefinition<Q>\n  | LinkedPropertyFilterDefinition<Q, LinkNames<Q>>\n  | KeywordSearchFilterDefinition<Q>\n  | CustomFilterDefinition<Q>;\n\n/**\n * Extract the key from a filter definition union\n */\nexport type FilterKey<Q extends ObjectTypeDefinition> =\n  FilterDefinitionUnion<Q> extends infer D ? D extends { key: infer K } ? K\n    : D extends { linkName: infer L } ? L\n    : never\n    : never;\n\n/**\n * Extract the filter state from a filter definition union\n */\nexport type FilterState<Q extends ObjectTypeDefinition> =\n  FilterDefinitionUnion<Q> extends infer D\n    ? D extends { filterState: infer S } ? S\n    : never\n    : never;\n\n/**\n * Map from filter definition objects to their current state.\n * Uses object identity for keys, ensuring stable lookups across reorders.\n */\nexport type FilterStatesMap<Q extends ObjectTypeDefinition> = Map<\n  FilterDefinitionUnion<Q>,\n  FilterStateType\n>;\n\nexport interface FilterListProps<Q extends ObjectTypeDefinition> {\n  /**\n   * The set of objects to be filtered\n   */\n  objectSet: ObjectSet<Q>;\n\n  /**\n   * Optional title to display in the filter list header\n   */\n  title?: string;\n\n  /**\n   * Optional icon to display next to the title\n   */\n  titleIcon?: React.ReactNode;\n\n  /**\n   * The definition for all supported filter items in the list\n   * If not supplied, all filterable properties will be available\n   */\n  filterDefinitions?: Array<FilterDefinitionUnion<Q>>;\n\n  /**\n   * The current where clause to filter the objectSet.\n   * If provided, the filter clause is controlled.\n   */\n  filterClause?: WhereClause<Q>;\n\n  /**\n   * Called when the filter clause changes.\n   * The filters are joined by the selected filterOperator.\n   * Required in controlled mode.\n   *\n   * @param newClause The updated filter clause\n   */\n  onFilterClauseChanged?: (newClause: WhereClause<Q>) => void;\n\n  /**\n   * The logical operator to join multiple filters\n   *\n   * @default \"and\"\n   */\n  filterOperator?: \"and\" | \"or\";\n\n  /**\n   * Called when filter state changes\n   *\n   * @param definition The filter definition whose state changed\n   * @param newState The updated filter state\n   */\n  onFilterStateChanged?: (\n    definition: FilterDefinitionUnion<Q>,\n    newState: FilterStateType,\n  ) => void;\n\n  /**\n   * Called when a filter is added\n   * If provided, user will be allowed to add filters\n   *\n   * @param filterKey The key of the added filter\n   * @param newDefinitions The filter list with the new filter added\n   */\n  onFilterAdded?: (\n    filterKey: FilterKey<Q>,\n    newDefinitions: Array<FilterDefinitionUnion<Q>>,\n  ) => void;\n\n  /**\n   * Called when a filter is removed\n   * If provided, user will be allowed to remove filters\n   *\n   * @param filterKey The key of the removed filter\n   */\n  onFilterRemoved?: (filterKey: FilterKey<Q>) => void;\n\n  /**\n   * Enable drag-and-drop reordering of filters.\n   * When true, drag handles are rendered and filters can be reordered.\n   * Reorder state is managed internally; consumers who need to track order\n   * should use controlled filterDefinitions.\n   */\n  enableSorting?: boolean;\n\n  /**\n   * Show reset filters button in header\n   */\n  showResetButton?: boolean;\n\n  /**\n   * Called when reset button is clicked\n   */\n  onReset?: () => void;\n\n  /**\n   * Show count of active filters in header\n   */\n  showActiveFilterCount?: boolean;\n\n  /**\n   * Additional CSS class name\n   */\n  className?: string;\n\n  /**\n   * Custom render function for the \"Add filter\" button.\n   * When not provided, a default button is shown if onFilterAdded is set.\n   */\n  renderAddFilterButton?: () => React.ReactNode;\n}\n"],"mappings":"","ignoreList":[]}

package/build/browser/filter-list/base/DragHandleIcon.js

@@ -0,0 +1,51 @@
+/*
+ * 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 React from "react";
+export function DragHandleIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true"
+  }, /*#__PURE__*/React.createElement("circle", {
+    cx: "5.5",
+    cy: "3.5",
+    r: "1.5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "10.5",
+    cy: "3.5",
+    r: "1.5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "5.5",
+    cy: "8",
+    r: "1.5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "10.5",
+    cy: "8",
+    r: "1.5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "5.5",
+    cy: "12.5",
+    r: "1.5"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "10.5",
+    cy: "12.5",
+    r: "1.5"
+  }));
+}
+//# sourceMappingURL=DragHandleIcon.js.map

package/build/browser/filter-list/base/DragHandleIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragHandleIcon.js","names":["React","DragHandleIcon","createElement","width","height","viewBox","fill","cx","cy","r"],"sources":["DragHandleIcon.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 React from \"react\";\n\nexport function DragHandleIcon(): React.ReactElement {\n  return (\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <circle cx=\"5.5\" cy=\"3.5\" r=\"1.5\" />\n      <circle cx=\"10.5\" cy=\"3.5\" r=\"1.5\" />\n      <circle cx=\"5.5\" cy=\"8\" r=\"1.5\" />\n      <circle cx=\"10.5\" cy=\"8\" r=\"1.5\" />\n      <circle cx=\"5.5\" cy=\"12.5\" r=\"1.5\" />\n      <circle cx=\"10.5\" cy=\"12.5\" r=\"1.5\" />\n    </svg>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,MAAM,OAAO;AAEzB,OAAO,SAASC,cAAcA,CAAA,EAAuB;EACnD,oBACED,KAAA,CAAAE,aAAA;IACEC,KAAK,EAAC,IAAI;IACVC,MAAM,EAAC,IAAI;IACXC,OAAO,EAAC,WAAW;IACnBC,IAAI,EAAC,cAAc;IACnB,eAAY;EAAM,gBAElBN,KAAA,CAAAE,aAAA;IAAQK,EAAE,EAAC,KAAK;IAACC,EAAE,EAAC,KAAK;IAACC,CAAC,EAAC;EAAK,CAAE,CAAC,eACpCT,KAAA,CAAAE,aAAA;IAAQK,EAAE,EAAC,MAAM;IAACC,EAAE,EAAC,KAAK;IAACC,CAAC,EAAC;EAAK,CAAE,CAAC,eACrCT,KAAA,CAAAE,aAAA;IAAQK,EAAE,EAAC,KAAK;IAACC,EAAE,EAAC,GAAG;IAACC,CAAC,EAAC;EAAK,CAAE,CAAC,eAClCT,KAAA,CAAAE,aAAA;IAAQK,EAAE,EAAC,MAAM;IAACC,EAAE,EAAC,GAAG;IAACC,CAAC,EAAC;EAAK,CAAE,CAAC,eACnCT,KAAA,CAAAE,aAAA;IAAQK,EAAE,EAAC,KAAK;IAACC,EAAE,EAAC,MAAM;IAACC,CAAC,EAAC;EAAK,CAAE,CAAC,eACrCT,KAAA,CAAAE,aAAA;IAAQK,EAAE,EAAC,MAAM;IAACC,EAAE,EAAC,MAAM;IAACC,CAAC,EAAC;EAAK,CAAE,CAClC,CAAC;AAEV","ignoreList":[]}

package/build/browser/filter-list/base/FilterList.js

@@ -31,6 +31,7 @@ export function FilterList(props) {
     onReset,
     onFilterAdded,
     showActiveFilterCount = false,
+    enableSorting,
     className,
     renderAddFilterButton
   } = props;
@@ -66,7 +67,8 @@ export function FilterList(props) {
     filterDefinitions: visibleFilterDefinitions,
     filterStates: filterStates,
     onFilterStateChanged: setFilterState,
-    whereClause: whereClause
+    whereClause: whereClause,
+    enableSorting: enableSorting
   }), (renderAddFilterButton != null || onFilterAdded != null) && /*#__PURE__*/React.createElement("div", {
     className: styles.addButtonContainer
   }, renderAddFilterButton ? renderAddFilterButton() : /*#__PURE__*/React.createElement(Button, {

package/build/browser/filter-list/base/FilterList.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterList.js","names":["Button","classnames","React","useCallback","useMemo","useFilterListState","styles","FilterListContent","FilterListHeader","FilterList","props","objectSet","title","titleIcon","filterDefinitions","showResetButton","onReset","onFilterAdded","showActiveFilterCount","className","renderAddFilterButton","objectType","$objectSetInternals","def","filterStates","setFilterState","whereClause","activeFilterCount","reset","handleReset","visibleFilterDefinitions","undefined","filter","isVisible","createElement","filterList","onFilterStateChanged","addButtonContainer","type","addButton"],"sources":["FilterList.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 type { ObjectTypeDefinition } from \"@osdk/api\";\nimport classnames from \"classnames\";\nimport React, { useCallback, useMemo } from \"react\";\nimport type {\n  FilterDefinitionUnion,\n  FilterListProps,\n} from \"../FilterListApi.js\";\nimport { useFilterListState } from \"../hooks/useFilterListState.js\";\nimport styles from \"./FilterList.module.css\";\nimport { FilterListContent } from \"./FilterListContent.js\";\nimport { FilterListHeader } from \"./FilterListHeader.js\";\n\nexport function FilterList<Q extends ObjectTypeDefinition>(\n  props: FilterListProps<Q>,\n): React.ReactElement {\n  const {\n    objectSet,\n    title,\n    titleIcon,\n    filterDefinitions,\n    showResetButton = false,\n    onReset,\n    onFilterAdded,\n    showActiveFilterCount = false,\n    className,\n    renderAddFilterButton,\n  } = props;\n\n  const objectType = objectSet.$objectSetInternals.def;\n\n  const {\n    filterStates,\n    setFilterState,\n    whereClause,\n    activeFilterCount,\n    reset,\n  } = useFilterListState(props);\n\n  const handleReset = useCallback(() => {\n    reset();\n    onReset?.();\n  }, [reset, onReset]);\n\n  const visibleFilterDefinitions = useMemo(() => {\n    if (!filterDefinitions) return undefined;\n    return filterDefinitions.filter(\n      (def: FilterDefinitionUnion<Q>) => def.isVisible !== false,\n    );\n  }, [filterDefinitions]);\n\n  const showHeader = title || titleIcon || showResetButton\n    || showActiveFilterCount;\n\n  const showAddButton = renderAddFilterButton != null || onFilterAdded != null;\n\n  return (\n    <div\n      className={classnames(styles.filterList, className)}\n      data-active-count={activeFilterCount}\n    >\n      {showHeader && (\n        <FilterListHeader\n          title={title}\n          titleIcon={titleIcon}\n          showResetButton={showResetButton}\n          onReset={handleReset}\n          showActiveFilterCount={showActiveFilterCount}\n          activeFilterCount={activeFilterCount}\n        />\n      )}\n\n      <FilterListContent\n        objectType={objectType}\n        objectSet={objectSet}\n        filterDefinitions={visibleFilterDefinitions}\n        filterStates={filterStates}\n        onFilterStateChanged={setFilterState}\n        whereClause={whereClause}\n      />\n\n      {showAddButton && (\n        <div className={styles.addButtonContainer}>\n          {renderAddFilterButton\n            ? renderAddFilterButton()\n            : (\n              <Button type=\"button\" className={styles.addButton}>\n                + Add filter\n              </Button>\n            )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAKnD,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,OAAOC,MAAM,MAAM,yBAAyB;AAC5C,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAO,SAASC,UAAUA,CACxBC,KAAyB,EACL;EACpB,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,iBAAiB;IACjBC,eAAe,GAAG,KAAK;IACvBC,OAAO;IACPC,aAAa;IACbC,qBAAqB,GAAG,KAAK;IAC7BC,SAAS;IACTC;EACF,CAAC,GAAGV,KAAK;EAET,MAAMW,UAAU,GAAGV,SAAS,CAACW,mBAAmB,CAACC,GAAG;EAEpD,MAAM;IACJC,YAAY;IACZC,cAAc;IACdC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC,GAAGvB,kBAAkB,CAACK,KAAK,CAAC;EAE7B,MAAMmB,WAAW,GAAG1B,WAAW,CAAC,MAAM;IACpCyB,KAAK,CAAC,CAAC;IACPZ,OAAO,GAAG,CAAC;EACb,CAAC,EAAE,CAACY,KAAK,EAAEZ,OAAO,CAAC,CAAC;EAEpB,MAAMc,wBAAwB,GAAG1B,OAAO,CAAC,MAAM;IAC7C,IAAI,CAACU,iBAAiB,EAAE,OAAOiB,SAAS;IACxC,OAAOjB,iBAAiB,CAACkB,MAAM,CAC5BT,GAA6B,IAAKA,GAAG,CAACU,SAAS,KAAK,KACvD,CAAC;EACH,CAAC,EAAE,CAACnB,iBAAiB,CAAC,CAAC;EAOvB,oBACEZ,KAAA,CAAAgC,aAAA;IACEf,SAAS,EAAElB,UAAU,CAACK,MAAM,CAAC6B,UAAU,EAAEhB,SAAS,CAAE;IACpD,qBAAmBQ;EAAkB,GAEpC,CAVcf,KAAK,IAAIC,SAAS,IAAIE,eAAe,IACnDG,qBAAqB,kBAUpBhB,KAAA,CAAAgC,aAAA,CAAC1B,gBAAgB;IACfI,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEA,SAAU;IACrBE,eAAe,EAAEA,eAAgB;IACjCC,OAAO,EAAEa,WAAY;IACrBX,qBAAqB,EAAEA,qBAAsB;IAC7CS,iBAAiB,EAAEA;EAAkB,CACtC,CACF,eAEDzB,KAAA,CAAAgC,aAAA,CAAC3B,iBAAiB;IAChBc,UAAU,EAAEA,UAAW;IACvBV,SAAS,EAAEA,SAAU;IACrBG,iBAAiB,EAAEgB,wBAAyB;IAC5CN,YAAY,EAAEA,YAAa;IAC3BY,oBAAoB,EAAEX,cAAe;IACrCC,WAAW,EAAEA;EAAY,CAC1B,CAAC,EAED,CA3BiBN,qBAAqB,IAAI,IAAI,IAAIH,aAAa,IAAI,IAAI,kBA4BtEf,KAAA,CAAAgC,aAAA;IAAKf,SAAS,EAAEb,MAAM,CAAC+B;EAAmB,GACvCjB,qBAAqB,GAClBA,qBAAqB,CAAC,CAAC,gBAEvBlB,KAAA,CAAAgC,aAAA,CAAClC,MAAM;IAACsC,IAAI,EAAC,QAAQ;IAACnB,SAAS,EAAEb,MAAM,CAACiC;EAAU,GAAC,cAE3C,CAET,CAEJ,CAAC;AAEV","ignoreList":[]}
+{"version":3,"file":"FilterList.js","names":["Button","classnames","React","useCallback","useMemo","useFilterListState","styles","FilterListContent","FilterListHeader","FilterList","props","objectSet","title","titleIcon","filterDefinitions","showResetButton","onReset","onFilterAdded","showActiveFilterCount","enableSorting","className","renderAddFilterButton","objectType","$objectSetInternals","def","filterStates","setFilterState","whereClause","activeFilterCount","reset","handleReset","visibleFilterDefinitions","undefined","filter","isVisible","createElement","filterList","onFilterStateChanged","addButtonContainer","type","addButton"],"sources":["FilterList.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 type { ObjectTypeDefinition } from \"@osdk/api\";\nimport classnames from \"classnames\";\nimport React, { useCallback, useMemo } from \"react\";\nimport type {\n  FilterDefinitionUnion,\n  FilterListProps,\n} from \"../FilterListApi.js\";\nimport { useFilterListState } from \"../hooks/useFilterListState.js\";\nimport styles from \"./FilterList.module.css\";\nimport { FilterListContent } from \"./FilterListContent.js\";\nimport { FilterListHeader } from \"./FilterListHeader.js\";\n\nexport function FilterList<Q extends ObjectTypeDefinition>(\n  props: FilterListProps<Q>,\n): React.ReactElement {\n  const {\n    objectSet,\n    title,\n    titleIcon,\n    filterDefinitions,\n    showResetButton = false,\n    onReset,\n    onFilterAdded,\n    showActiveFilterCount = false,\n    enableSorting,\n    className,\n    renderAddFilterButton,\n  } = props;\n\n  const objectType = objectSet.$objectSetInternals.def;\n\n  const {\n    filterStates,\n    setFilterState,\n    whereClause,\n    activeFilterCount,\n    reset,\n  } = useFilterListState(props);\n\n  const handleReset = useCallback(() => {\n    reset();\n    onReset?.();\n  }, [reset, onReset]);\n\n  const visibleFilterDefinitions = useMemo(() => {\n    if (!filterDefinitions) return undefined;\n    return filterDefinitions.filter(\n      (def: FilterDefinitionUnion<Q>) => def.isVisible !== false,\n    );\n  }, [filterDefinitions]);\n\n  const showHeader = title || titleIcon || showResetButton\n    || showActiveFilterCount;\n\n  const showAddButton = renderAddFilterButton != null || onFilterAdded != null;\n\n  return (\n    <div\n      className={classnames(styles.filterList, className)}\n      data-active-count={activeFilterCount}\n    >\n      {showHeader && (\n        <FilterListHeader\n          title={title}\n          titleIcon={titleIcon}\n          showResetButton={showResetButton}\n          onReset={handleReset}\n          showActiveFilterCount={showActiveFilterCount}\n          activeFilterCount={activeFilterCount}\n        />\n      )}\n\n      <FilterListContent\n        objectType={objectType}\n        objectSet={objectSet}\n        filterDefinitions={visibleFilterDefinitions}\n        filterStates={filterStates}\n        onFilterStateChanged={setFilterState}\n        whereClause={whereClause}\n        enableSorting={enableSorting}\n      />\n\n      {showAddButton && (\n        <div className={styles.addButtonContainer}>\n          {renderAddFilterButton\n            ? renderAddFilterButton()\n            : (\n              <Button type=\"button\" className={styles.addButton}>\n                + Add filter\n              </Button>\n            )}\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAE9C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAKnD,SAASC,kBAAkB,QAAQ,gCAAgC;AACnE,OAAOC,MAAM,MAAM,yBAAyB;AAC5C,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,gBAAgB,QAAQ,uBAAuB;AAExD,OAAO,SAASC,UAAUA,CACxBC,KAAyB,EACL;EACpB,MAAM;IACJC,SAAS;IACTC,KAAK;IACLC,SAAS;IACTC,iBAAiB;IACjBC,eAAe,GAAG,KAAK;IACvBC,OAAO;IACPC,aAAa;IACbC,qBAAqB,GAAG,KAAK;IAC7BC,aAAa;IACbC,SAAS;IACTC;EACF,CAAC,GAAGX,KAAK;EAET,MAAMY,UAAU,GAAGX,SAAS,CAACY,mBAAmB,CAACC,GAAG;EAEpD,MAAM;IACJC,YAAY;IACZC,cAAc;IACdC,WAAW;IACXC,iBAAiB;IACjBC;EACF,CAAC,GAAGxB,kBAAkB,CAACK,KAAK,CAAC;EAE7B,MAAMoB,WAAW,GAAG3B,WAAW,CAAC,MAAM;IACpC0B,KAAK,CAAC,CAAC;IACPb,OAAO,GAAG,CAAC;EACb,CAAC,EAAE,CAACa,KAAK,EAAEb,OAAO,CAAC,CAAC;EAEpB,MAAMe,wBAAwB,GAAG3B,OAAO,CAAC,MAAM;IAC7C,IAAI,CAACU,iBAAiB,EAAE,OAAOkB,SAAS;IACxC,OAAOlB,iBAAiB,CAACmB,MAAM,CAC5BT,GAA6B,IAAKA,GAAG,CAACU,SAAS,KAAK,KACvD,CAAC;EACH,CAAC,EAAE,CAACpB,iBAAiB,CAAC,CAAC;EAOvB,oBACEZ,KAAA,CAAAiC,aAAA;IACEf,SAAS,EAAEnB,UAAU,CAACK,MAAM,CAAC8B,UAAU,EAAEhB,SAAS,CAAE;IACpD,qBAAmBQ;EAAkB,GAEpC,CAVchB,KAAK,IAAIC,SAAS,IAAIE,eAAe,IACnDG,qBAAqB,kBAUpBhB,KAAA,CAAAiC,aAAA,CAAC3B,gBAAgB;IACfI,KAAK,EAAEA,KAAM;IACbC,SAAS,EAAEA,SAAU;IACrBE,eAAe,EAAEA,eAAgB;IACjCC,OAAO,EAAEc,WAAY;IACrBZ,qBAAqB,EAAEA,qBAAsB;IAC7CU,iBAAiB,EAAEA;EAAkB,CACtC,CACF,eAED1B,KAAA,CAAAiC,aAAA,CAAC5B,iBAAiB;IAChBe,UAAU,EAAEA,UAAW;IACvBX,SAAS,EAAEA,SAAU;IACrBG,iBAAiB,EAAEiB,wBAAyB;IAC5CN,YAAY,EAAEA,YAAa;IAC3BY,oBAAoB,EAAEX,cAAe;IACrCC,WAAW,EAAEA,WAAY;IACzBR,aAAa,EAAEA;EAAc,CAC9B,CAAC,EAED,CA5BiBE,qBAAqB,IAAI,IAAI,IAAIJ,aAAa,IAAI,IAAI,kBA6BtEf,KAAA,CAAAiC,aAAA;IAAKf,SAAS,EAAEd,MAAM,CAACgC;EAAmB,GACvCjB,qBAAqB,GAClBA,qBAAqB,CAAC,CAAC,gBAEvBnB,KAAA,CAAAiC,aAAA,CAACnC,MAAM;IAACuC,IAAI,EAAC,QAAQ;IAACnB,SAAS,EAAEd,MAAM,CAACkC;EAAU,GAAC,cAE3C,CAET,CAEJ,CAAC;AAEV","ignoreList":[]}

package/build/browser/filter-list/base/FilterListContent.js

@@ -14,11 +14,25 @@
  * limitations under the License.
  */
 
+import { closestCenter, DndContext, DragOverlay, KeyboardSensor, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from "@dnd-kit/sortable";
 import classnames from "classnames";
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import { getFilterKey } from "../utils/getFilterKey.js";
+import { getFilterLabel } from "../utils/getFilterLabel.js";
 import styles from "./FilterListContent.module.css.js";
 import { FilterListItem } from "./FilterListItem.js";
+import { SortableFilterListItem } from "./SortableFilterListItem.js";
+const restrictToVerticalAxis = ({
+  transform
+}) => ({
+  ...transform,
+  x: 0
+});
+const POINTER_ACTIVATION_CONSTRAINT = {
+  distance: 8
+};
+const MODIFIERS = [restrictToVerticalAxis];
 export function FilterListContent({
   objectType,
   objectSet,
@@ -26,20 +40,146 @@ export function FilterListContent({
   filterStates,
   onFilterStateChanged,
   whereClause,
+  enableSorting,
   className,
   style
 }) {
-  if (!filterDefinitions || filterDefinitions.length === 0) {
+  const [internalOrder, setInternalOrder] = useState(() => filterDefinitions ?? []);
+  const [activeId, setActiveId] = useState(null);
+  useEffect(() => {
+    if (filterDefinitions) {
+      setInternalOrder(filterDefinitions);
+    }
+  }, [filterDefinitions]);
+  const renderDefinitions = enableSorting ? internalOrder : filterDefinitions;
+  const sortableIds = useMemo(() => enableSorting ? internalOrder.map(def => getFilterKey(def)) : [], [enableSorting, internalOrder]);
+  const pointerSensor = useSensor(PointerSensor, {
+    activationConstraint: POINTER_ACTIVATION_CONSTRAINT
+  });
+  const keyboardSensor = useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  });
+  const sensors = useSensors(pointerSensor, keyboardSensor);
+  const activeIndex = activeId != null ? sortableIds.indexOf(String(activeId)) : -1;
+  const activeDefinition = activeIndex >= 0 ? internalOrder[activeIndex] : undefined;
+  const activeFilterKey = useMemo(() => activeDefinition ? getFilterKey(activeDefinition) : undefined, [activeDefinition]);
+  const handleDragStart = useCallback(event => {
+    setActiveId(event.active.id);
+  }, []);
+  const handleDragEnd = useCallback(event => {
+    setActiveId(null);
+    const {
+      active,
+      over
+    } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    const oldIndex = sortableIds.indexOf(String(active.id));
+    const newIndex = sortableIds.indexOf(String(over.id));
+    if (oldIndex !== -1 && newIndex !== -1) {
+      setInternalOrder(arrayMove(internalOrder, oldIndex, newIndex));
+    }
+  }, [internalOrder, sortableIds]);
+  const handleDragCancel = useCallback(() => {
+    setActiveId(null);
+  }, []);
+  const announcements = useMemo(() => ({
+    onDragStart({
+      active
+    }) {
+      const idx = sortableIds.indexOf(String(active.id));
+      const def = idx >= 0 ? internalOrder[idx] : undefined;
+      const label = def ? getFilterLabel(def) : "filter";
+      return `Picked up ${label} filter`;
+    },
+    onDragOver({
+      over
+    }) {
+      if (!over) {
+        return "Not over a droppable area";
+      }
+      const overIdx = sortableIds.indexOf(String(over.id));
+      return `Moved to position ${overIdx + 1} of ${sortableIds.length}`;
+    },
+    onDragEnd({
+      active,
+      over
+    }) {
+      const idx = sortableIds.indexOf(String(active.id));
+      const def = idx >= 0 ? internalOrder[idx] : undefined;
+      const label = def ? getFilterLabel(def) : "filter";
+      if (over && active.id !== over.id) {
+        const overIdx = sortableIds.indexOf(String(over.id));
+        return `Dropped ${label} filter at position ${overIdx + 1}`;
+      }
+      return `Dropped ${label} filter back in its original position`;
+    },
+    onDragCancel({
+      active
+    }) {
+      const idx = sortableIds.indexOf(String(active.id));
+      const def = idx >= 0 ? internalOrder[idx] : undefined;
+      const label = def ? getFilterLabel(def) : "filter";
+      return `Cancelled dragging ${label} filter`;
+    }
+  }), [internalOrder, sortableIds]);
+  if (!renderDefinitions || renderDefinitions.length === 0) {
     return /*#__PURE__*/React.createElement("div", {
       className: classnames(styles.content, className),
       style: style,
       "data-empty": "true"
     });
   }
+  if (enableSorting) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classnames(styles.content, className),
+      style: style
+    }, /*#__PURE__*/React.createElement(DndContext, {
+      sensors: sensors,
+      collisionDetection: closestCenter,
+      modifiers: MODIFIERS,
+      onDragStart: handleDragStart,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      accessibility: {
+        announcements
+      }
+    }, /*#__PURE__*/React.createElement(SortableContext, {
+      items: sortableIds,
+      strategy: verticalListSortingStrategy
+    }, internalOrder.map((definition, index) => {
+      const id = sortableIds[index];
+      const filterKey = getFilterKey(definition);
+      const state = filterStates.get(filterKey);
+      return /*#__PURE__*/React.createElement(SortableFilterListItem, {
+        key: id,
+        id: id,
+        objectType: objectType,
+        objectSet: objectSet,
+        definition: definition,
+        filterKey: filterKey,
+        filterState: state,
+        onFilterStateChanged: onFilterStateChanged,
+        whereClause: whereClause
+      });
+    })), /*#__PURE__*/React.createElement(DragOverlay, {
+      dropAnimation: null,
+      className: styles.dragOverlay
+    }, activeDefinition && activeFilterKey && /*#__PURE__*/React.createElement(FilterListItem, {
+      objectType: objectType,
+      objectSet: objectSet,
+      definition: activeDefinition,
+      filterKey: activeFilterKey,
+      filterState: filterStates.get(activeFilterKey),
+      onFilterStateChanged: onFilterStateChanged,
+      whereClause: whereClause
+    }))));
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.content, className),
     style: style
-  }, filterDefinitions.map(definition => {
+  }, renderDefinitions.map(definition => {
     const filterKey = getFilterKey(definition);
     const state = filterStates.get(filterKey);
     return /*#__PURE__*/React.createElement(FilterListItem, {

package/build/browser/filter-list/base/FilterListContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterListContent.js","names":["classnames","React","getFilterKey","styles","FilterListItem","FilterListContent","objectType","objectSet","filterDefinitions","filterStates","onFilterStateChanged","whereClause","className","style","length","createElement","content","map","definition","filterKey","state","get","key","filterState"],"sources":["FilterListContent.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 { ObjectSet, ObjectTypeDefinition, WhereClause } from \"@osdk/api\";\nimport classnames from \"classnames\";\nimport React from \"react\";\nimport type { FilterDefinitionUnion } from \"../FilterListApi.js\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { getFilterKey } from \"../utils/getFilterKey.js\";\nimport styles from \"./FilterListContent.module.css\";\nimport { FilterListItem } from \"./FilterListItem.js\";\n\ninterface FilterListContentProps<Q extends ObjectTypeDefinition> {\n  objectType: Q;\n  objectSet: ObjectSet<Q>;\n  filterDefinitions?: Array<FilterDefinitionUnion<Q>>;\n  filterStates: Map<string, FilterState>;\n  onFilterStateChanged: (\n    filterKey: string,\n    state: FilterState,\n  ) => void;\n  whereClause: WhereClause<Q>;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function FilterListContent<Q extends ObjectTypeDefinition>({\n  objectType,\n  objectSet,\n  filterDefinitions,\n  filterStates,\n  onFilterStateChanged,\n  whereClause,\n  className,\n  style,\n}: FilterListContentProps<Q>): React.ReactElement {\n  if (!filterDefinitions || filterDefinitions.length === 0) {\n    return (\n      <div\n        className={classnames(styles.content, className)}\n        style={style}\n        data-empty=\"true\"\n      />\n    );\n  }\n\n  return (\n    <div\n      className={classnames(styles.content, className)}\n      style={style}\n    >\n      {filterDefinitions.map((definition, index) => {\n        const filterKey = getFilterKey(definition);\n        const state = filterStates.get(filterKey);\n\n        return (\n          <FilterListItem\n            key={filterKey}\n            objectType={objectType}\n            objectSet={objectSet}\n            definition={definition}\n            filterKey={filterKey}\n            filterState={state}\n            onFilterStateChanged={onFilterStateChanged}\n            whereClause={whereClause}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,MAAM,OAAO;AAGzB,SAASC,YAAY,QAAQ,0BAA0B;AACvD,OAAOC,MAAM,MAAM,gCAAgC;AACnD,SAASC,cAAc,QAAQ,qBAAqB;AAgBpD,OAAO,SAASC,iBAAiBA,CAAiC;EAChEC,UAAU;EACVC,SAAS;EACTC,iBAAiB;EACjBC,YAAY;EACZC,oBAAoB;EACpBC,WAAW;EACXC,SAAS;EACTC;AACyB,CAAC,EAAsB;EAChD,IAAI,CAACL,iBAAiB,IAAIA,iBAAiB,CAACM,MAAM,KAAK,CAAC,EAAE;IACxD,oBACEb,KAAA,CAAAc,aAAA;MACEH,SAAS,EAAEZ,UAAU,CAACG,MAAM,CAACa,OAAO,EAAEJ,SAAS,CAAE;MACjDC,KAAK,EAAEA,KAAM;MACb,cAAW;IAAM,CAClB,CAAC;EAEN;EAEA,oBACEZ,KAAA,CAAAc,aAAA;IACEH,SAAS,EAAEZ,UAAU,CAACG,MAAM,CAACa,OAAO,EAAEJ,SAAS,CAAE;IACjDC,KAAK,EAAEA;EAAM,GAEZL,iBAAiB,CAACS,GAAG,CAAEC,UAAU,IAAY;IAC5C,MAAMC,SAAS,GAAGjB,YAAY,CAACgB,UAAU,CAAC;IAC1C,MAAME,KAAK,GAAGX,YAAY,CAACY,GAAG,CAACF,SAAS,CAAC;IAEzC,oBACElB,KAAA,CAAAc,aAAA,CAACX,cAAc;MACbkB,GAAG,EAAEH,SAAU;MACfb,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBW,UAAU,EAAEA,UAAW;MACvBC,SAAS,EAAEA,SAAU;MACrBI,WAAW,EAAEH,KAAM;MACnBV,oBAAoB,EAAEA,oBAAqB;MAC3CC,WAAW,EAAEA;IAAY,CAC1B,CAAC;EAEN,CAAC,CACE,CAAC;AAEV","ignoreList":[]}
+{"version":3,"file":"FilterListContent.js","names":["closestCenter","DndContext","DragOverlay","KeyboardSensor","PointerSensor","useSensor","useSensors","arrayMove","SortableContext","sortableKeyboardCoordinates","verticalListSortingStrategy","classnames","React","useCallback","useEffect","useMemo","useState","getFilterKey","getFilterLabel","styles","FilterListItem","SortableFilterListItem","restrictToVerticalAxis","transform","x","POINTER_ACTIVATION_CONSTRAINT","distance","MODIFIERS","FilterListContent","objectType","objectSet","filterDefinitions","filterStates","onFilterStateChanged","whereClause","enableSorting","className","style","internalOrder","setInternalOrder","activeId","setActiveId","renderDefinitions","sortableIds","map","def","pointerSensor","activationConstraint","keyboardSensor","coordinateGetter","sensors","activeIndex","indexOf","String","activeDefinition","undefined","activeFilterKey","handleDragStart","event","active","id","handleDragEnd","over","oldIndex","newIndex","handleDragCancel","announcements","onDragStart","idx","label","onDragOver","overIdx","length","onDragEnd","onDragCancel","createElement","content","collisionDetection","modifiers","accessibility","items","strategy","definition","index","filterKey","state","get","key","filterState","dropAnimation","dragOverlay"],"sources":["FilterListContent.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type {\n  Announcements,\n  DragEndEvent,\n  DragStartEvent,\n  Modifier,\n  UniqueIdentifier,\n} from \"@dnd-kit/core\";\nimport {\n  closestCenter,\n  DndContext,\n  DragOverlay,\n  KeyboardSensor,\n  PointerSensor,\n  useSensor,\n  useSensors,\n} from \"@dnd-kit/core\";\nimport {\n  arrayMove,\n  SortableContext,\n  sortableKeyboardCoordinates,\n  verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport type { ObjectSet, ObjectTypeDefinition, WhereClause } from \"@osdk/api\";\nimport classnames from \"classnames\";\nimport React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport type { FilterDefinitionUnion } from \"../FilterListApi.js\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { getFilterKey } from \"../utils/getFilterKey.js\";\nimport { getFilterLabel } from \"../utils/getFilterLabel.js\";\nimport styles from \"./FilterListContent.module.css\";\nimport { FilterListItem } from \"./FilterListItem.js\";\nimport { SortableFilterListItem } from \"./SortableFilterListItem.js\";\n\nconst restrictToVerticalAxis: Modifier = ({ transform }) => ({\n  ...transform,\n  x: 0,\n});\n\nconst POINTER_ACTIVATION_CONSTRAINT = { distance: 8 } as const;\nconst MODIFIERS: Modifier[] = [restrictToVerticalAxis];\n\ninterface FilterListContentProps<Q extends ObjectTypeDefinition> {\n  objectType: Q;\n  objectSet: ObjectSet<Q>;\n  filterDefinitions?: Array<FilterDefinitionUnion<Q>>;\n  filterStates: Map<string, FilterState>;\n  onFilterStateChanged: (\n    filterKey: string,\n    state: FilterState,\n  ) => void;\n  whereClause: WhereClause<Q>;\n  enableSorting?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function FilterListContent<Q extends ObjectTypeDefinition>({\n  objectType,\n  objectSet,\n  filterDefinitions,\n  filterStates,\n  onFilterStateChanged,\n  whereClause,\n  enableSorting,\n  className,\n  style,\n}: FilterListContentProps<Q>): React.ReactElement {\n  const [internalOrder, setInternalOrder] = useState<\n    Array<FilterDefinitionUnion<Q>>\n  >(() => filterDefinitions ?? []);\n  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);\n\n  useEffect(() => {\n    if (filterDefinitions) {\n      setInternalOrder(filterDefinitions);\n    }\n  }, [filterDefinitions]);\n\n  const renderDefinitions = enableSorting ? internalOrder : filterDefinitions;\n\n  const sortableIds = useMemo(\n    () =>\n      enableSorting\n        ? internalOrder.map((def) => getFilterKey(def))\n        : [],\n    [enableSorting, internalOrder],\n  );\n\n  const pointerSensor = useSensor(PointerSensor, {\n    activationConstraint: POINTER_ACTIVATION_CONSTRAINT,\n  });\n  const keyboardSensor = useSensor(KeyboardSensor, {\n    coordinateGetter: sortableKeyboardCoordinates,\n  });\n  const sensors = useSensors(pointerSensor, keyboardSensor);\n\n  const activeIndex = activeId != null\n    ? sortableIds.indexOf(String(activeId))\n    : -1;\n  const activeDefinition = activeIndex >= 0\n    ? internalOrder[activeIndex]\n    : undefined;\n\n  const activeFilterKey = useMemo(\n    () => activeDefinition ? getFilterKey(activeDefinition) : undefined,\n    [activeDefinition],\n  );\n\n  const handleDragStart = useCallback((event: DragStartEvent) => {\n    setActiveId(event.active.id);\n  }, []);\n\n  const handleDragEnd = useCallback(\n    (event: DragEndEvent) => {\n      setActiveId(null);\n      const { active, over } = event;\n      if (!over || active.id === over.id) {\n        return;\n      }\n      const oldIndex = sortableIds.indexOf(String(active.id));\n      const newIndex = sortableIds.indexOf(String(over.id));\n      if (oldIndex !== -1 && newIndex !== -1) {\n        setInternalOrder(arrayMove(internalOrder, oldIndex, newIndex));\n      }\n    },\n    [internalOrder, sortableIds],\n  );\n\n  const handleDragCancel = useCallback(() => {\n    setActiveId(null);\n  }, []);\n\n  const announcements = useMemo<Announcements>(\n    () => ({\n      onDragStart({ active }) {\n        const idx = sortableIds.indexOf(String(active.id));\n        const def = idx >= 0 ? internalOrder[idx] : undefined;\n        const label = def ? getFilterLabel(def) : \"filter\";\n        return `Picked up ${label} filter`;\n      },\n      onDragOver({ over }) {\n        if (!over) {\n          return \"Not over a droppable area\";\n        }\n        const overIdx = sortableIds.indexOf(String(over.id));\n        return `Moved to position ${overIdx + 1} of ${sortableIds.length}`;\n      },\n      onDragEnd({ active, over }) {\n        const idx = sortableIds.indexOf(String(active.id));\n        const def = idx >= 0 ? internalOrder[idx] : undefined;\n        const label = def ? getFilterLabel(def) : \"filter\";\n        if (over && active.id !== over.id) {\n          const overIdx = sortableIds.indexOf(String(over.id));\n          return `Dropped ${label} filter at position ${overIdx + 1}`;\n        }\n        return `Dropped ${label} filter back in its original position`;\n      },\n      onDragCancel({ active }) {\n        const idx = sortableIds.indexOf(String(active.id));\n        const def = idx >= 0 ? internalOrder[idx] : undefined;\n        const label = def ? getFilterLabel(def) : \"filter\";\n        return `Cancelled dragging ${label} filter`;\n      },\n    }),\n    [internalOrder, sortableIds],\n  );\n\n  if (!renderDefinitions || renderDefinitions.length === 0) {\n    return (\n      <div\n        className={classnames(styles.content, className)}\n        style={style}\n        data-empty=\"true\"\n      />\n    );\n  }\n\n  if (enableSorting) {\n    return (\n      <div\n        className={classnames(styles.content, className)}\n        style={style}\n      >\n        <DndContext\n          sensors={sensors}\n          collisionDetection={closestCenter}\n          modifiers={MODIFIERS}\n          onDragStart={handleDragStart}\n          onDragEnd={handleDragEnd}\n          onDragCancel={handleDragCancel}\n          accessibility={{ announcements }}\n        >\n          <SortableContext\n            items={sortableIds}\n            strategy={verticalListSortingStrategy}\n          >\n            {internalOrder.map((definition, index) => {\n              const id = sortableIds[index];\n              const filterKey = getFilterKey(definition);\n              const state = filterStates.get(filterKey);\n\n              return (\n                <SortableFilterListItem\n                  key={id}\n                  id={id}\n                  objectType={objectType}\n                  objectSet={objectSet}\n                  definition={definition}\n                  filterKey={filterKey}\n                  filterState={state}\n                  onFilterStateChanged={onFilterStateChanged}\n                  whereClause={whereClause}\n                />\n              );\n            })}\n          </SortableContext>\n\n          <DragOverlay\n            dropAnimation={null}\n            className={styles.dragOverlay}\n          >\n            {activeDefinition && activeFilterKey && (\n              <FilterListItem\n                objectType={objectType}\n                objectSet={objectSet}\n                definition={activeDefinition}\n                filterKey={activeFilterKey}\n                filterState={filterStates.get(activeFilterKey)}\n                onFilterStateChanged={onFilterStateChanged}\n                whereClause={whereClause}\n              />\n            )}\n          </DragOverlay>\n        </DndContext>\n      </div>\n    );\n  }\n\n  return (\n    <div\n      className={classnames(styles.content, className)}\n      style={style}\n    >\n      {renderDefinitions.map((definition) => {\n        const filterKey = getFilterKey(definition);\n        const state = filterStates.get(filterKey);\n\n        return (\n          <FilterListItem\n            key={filterKey}\n            objectType={objectType}\n            objectSet={objectSet}\n            definition={definition}\n            filterKey={filterKey}\n            filterState={state}\n            onFilterStateChanged={onFilterStateChanged}\n            whereClause={whereClause}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/build/browser/filter-list/base/FilterListContent.module.css

@@ -25,3 +25,9 @@
   color: var(--osdk-filter-list-empty-text-color);
   font-size: var(--osdk-filter-list-empty-font-size);
 }
+
+.dragOverlay {
+  box-shadow: var(--osdk-filter-item-drag-overlay-shadow);
+  border-radius: var(--osdk-filter-item-drag-overlay-border-radius);
+  background: var(--osdk-filter-item-drag-overlay-bg);
+}

package/build/browser/filter-list/base/FilterListContent.module.css.js

@@ -1,7 +1,8 @@
 // CSS Module proxy for FilterListContent.module.css
 const styles = {
   "content": "FilterListContent-module__content___fG0EgVp6",
-  "emptyMessage": "FilterListContent-module__emptyMessage___9wdgSE9W"
+  "emptyMessage": "FilterListContent-module__emptyMessage___9wdgSE9W",
+  "dragOverlay": "FilterListContent-module__dragOverlay___Tjd1YpmI"
 };
 
 export default styles;

package/build/browser/filter-list/base/FilterListItem.js

@@ -1,3 +1,4 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 /*
  * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
  *
@@ -17,6 +18,8 @@
 import classnames from "classnames";
 import React, { memo, useCallback } from "react";
 import { ErrorBoundary } from "../../shared/ErrorBoundary.js";
+import { getFilterLabel } from "../utils/getFilterLabel.js";
+import { DragHandleIcon } from "./DragHandleIcon.js";
 import { FilterInput } from "./FilterInput.js";
 import styles from "./FilterListItem.module.css.js";
 function FilterListItemInner({
@@ -27,10 +30,12 @@ function FilterListItemInner({
   filterState,
   onFilterStateChanged,
   whereClause,
+  dragHandleAttributes,
+  dragHandleListeners,
   className,
   style
 }) {
-  const label = getLabel(definition);
+  const label = getFilterLabel(definition);
   const handleFilterStateChanged = useCallback(newState => {
     onFilterStateChanged(filterKey, newState);
   }, [filterKey, onFilterStateChanged]);
@@ -40,7 +45,11 @@ function FilterListItemInner({
     "data-filter-type": definition.type
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.itemHeader
-  }, /*#__PURE__*/React.createElement("span", {
+  }, dragHandleAttributes && /*#__PURE__*/React.createElement("button", _extends({
+    type: "button",
+    className: styles.dragHandle,
+    "aria-label": `Reorder ${label}`
+  }, dragHandleAttributes, dragHandleListeners), /*#__PURE__*/React.createElement(DragHandleIcon, null)), /*#__PURE__*/React.createElement("span", {
     className: styles.itemLabel
   }, label)), /*#__PURE__*/React.createElement("div", {
     className: styles.itemContent
@@ -56,20 +65,4 @@ function FilterListItemInner({
   }))));
 }
 export const FilterListItem = /*#__PURE__*/memo(FilterListItemInner);
-function getLabel(definition) {
-  if ("label" in definition && definition.label) {
-    return definition.label;
-  }
-  switch (definition.type) {
-    case "PROPERTY":
-      return definition.key;
-    case "HAS_LINK":
-    case "LINKED_PROPERTY":
-      return definition.linkName;
-    case "KEYWORD_SEARCH":
-      return "Search";
-    case "CUSTOM":
-      return definition.key;
-  }
-}
 //# sourceMappingURL=FilterListItem.js.map

package/build/browser/filter-list/base/FilterListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterListItem.js","names":["classnames","React","memo","useCallback","ErrorBoundary","FilterInput","styles","FilterListItemInner","objectType","objectSet","definition","filterKey","filterState","onFilterStateChanged","whereClause","className","style","label","getLabel","handleFilterStateChanged","newState","createElement","filterItem","type","itemHeader","itemLabel","itemContent","errorMessage","FilterListItem","key","linkName"],"sources":["FilterListItem.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 { ObjectSet, ObjectTypeDefinition, WhereClause } from \"@osdk/api\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport { ErrorBoundary } from \"../../shared/ErrorBoundary.js\";\nimport type { FilterDefinitionUnion } from \"../FilterListApi.js\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { FilterInput } from \"./FilterInput.js\";\nimport styles from \"./FilterListItem.module.css\";\n\ninterface FilterListItemProps<Q extends ObjectTypeDefinition> {\n  objectType: Q;\n  objectSet: ObjectSet<Q>;\n  definition: FilterDefinitionUnion<Q>;\n  filterKey: string;\n  filterState: FilterState | undefined;\n  onFilterStateChanged: (\n    filterKey: string,\n    state: FilterState,\n  ) => void;\n  whereClause: WhereClause<Q>;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction FilterListItemInner<Q extends ObjectTypeDefinition>({\n  objectType,\n  objectSet,\n  definition,\n  filterKey,\n  filterState,\n  onFilterStateChanged,\n  whereClause,\n  className,\n  style,\n}: FilterListItemProps<Q>): React.ReactElement {\n  const label = getLabel(definition);\n\n  const handleFilterStateChanged = useCallback(\n    (newState: FilterState) => {\n      onFilterStateChanged(filterKey, newState);\n    },\n    [filterKey, onFilterStateChanged],\n  );\n\n  return (\n    <div\n      className={classnames(styles.filterItem, className)}\n      style={style}\n      data-filter-type={definition.type}\n    >\n      <div className={styles.itemHeader}>\n        <span className={styles.itemLabel}>{label}</span>\n      </div>\n\n      <div className={styles.itemContent}>\n        <ErrorBoundary errorMessage=\"Error loading filter\">\n          <FilterInput\n            objectType={objectType}\n            objectSet={objectSet}\n            definition={definition}\n            filterState={filterState}\n            onFilterStateChanged={handleFilterStateChanged}\n            whereClause={whereClause}\n          />\n        </ErrorBoundary>\n      </div>\n    </div>\n  );\n}\n\nexport const FilterListItem = memo(\n  FilterListItemInner,\n) as typeof FilterListItemInner;\n\nfunction getLabel<Q extends ObjectTypeDefinition>(\n  definition: FilterDefinitionUnion<Q>,\n): string {\n  if (\"label\" in definition && definition.label) {\n    return definition.label;\n  }\n\n  switch (definition.type) {\n    case \"PROPERTY\":\n      return definition.key;\n    case \"HAS_LINK\":\n    case \"LINKED_PROPERTY\":\n      return definition.linkName;\n    case \"KEYWORD_SEARCH\":\n      return \"Search\";\n    case \"CUSTOM\":\n      return definition.key;\n  }\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAChD,SAASC,aAAa,QAAQ,+BAA+B;AAG7D,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,OAAOC,MAAM,MAAM,6BAA6B;AAiBhD,SAASC,mBAAmBA,CAAiC;EAC3DC,UAAU;EACVC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,WAAW;EACXC,oBAAoB;EACpBC,WAAW;EACXC,SAAS;EACTC;AACsB,CAAC,EAAsB;EAC7C,MAAMC,KAAK,GAAGC,QAAQ,CAACR,UAAU,CAAC;EAElC,MAAMS,wBAAwB,GAAGhB,WAAW,CACzCiB,QAAqB,IAAK;IACzBP,oBAAoB,CAACF,SAAS,EAAES,QAAQ,CAAC;EAC3C,CAAC,EACD,CAACT,SAAS,EAAEE,oBAAoB,CAClC,CAAC;EAED,oBACEZ,KAAA,CAAAoB,aAAA;IACEN,SAAS,EAAEf,UAAU,CAACM,MAAM,CAACgB,UAAU,EAAEP,SAAS,CAAE;IACpDC,KAAK,EAAEA,KAAM;IACb,oBAAkBN,UAAU,CAACa;EAAK,gBAElCtB,KAAA,CAAAoB,aAAA;IAAKN,SAAS,EAAET,MAAM,CAACkB;EAAW,gBAChCvB,KAAA,CAAAoB,aAAA;IAAMN,SAAS,EAAET,MAAM,CAACmB;EAAU,GAAER,KAAY,CAC7C,CAAC,eAENhB,KAAA,CAAAoB,aAAA;IAAKN,SAAS,EAAET,MAAM,CAACoB;EAAY,gBACjCzB,KAAA,CAAAoB,aAAA,CAACjB,aAAa;IAACuB,YAAY,EAAC;EAAsB,gBAChD1B,KAAA,CAAAoB,aAAA,CAAChB,WAAW;IACVG,UAAU,EAAEA,UAAW;IACvBC,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBE,WAAW,EAAEA,WAAY;IACzBC,oBAAoB,EAAEM,wBAAyB;IAC/CL,WAAW,EAAEA;EAAY,CAC1B,CACY,CACZ,CACF,CAAC;AAEV;AAEA,OAAO,MAAMc,cAAc,gBAAG1B,IAAI,CAChCK,mBACF,CAA+B;AAE/B,SAASW,QAAQA,CACfR,UAAoC,EAC5B;EACR,IAAI,OAAO,IAAIA,UAAU,IAAIA,UAAU,CAACO,KAAK,EAAE;IAC7C,OAAOP,UAAU,CAACO,KAAK;EACzB;EAEA,QAAQP,UAAU,CAACa,IAAI;IACrB,KAAK,UAAU;MACb,OAAOb,UAAU,CAACmB,GAAG;IACvB,KAAK,UAAU;IACf,KAAK,iBAAiB;MACpB,OAAOnB,UAAU,CAACoB,QAAQ;IAC5B,KAAK,gBAAgB;MACnB,OAAO,QAAQ;IACjB,KAAK,QAAQ;MACX,OAAOpB,UAAU,CAACmB,GAAG;EACzB;AACF","ignoreList":[]}
+{"version":3,"file":"FilterListItem.js","names":["classnames","React","memo","useCallback","ErrorBoundary","getFilterLabel","DragHandleIcon","FilterInput","styles","FilterListItemInner","objectType","objectSet","definition","filterKey","filterState","onFilterStateChanged","whereClause","dragHandleAttributes","dragHandleListeners","className","style","label","handleFilterStateChanged","newState","createElement","filterItem","type","itemHeader","_extends","dragHandle","itemLabel","itemContent","errorMessage","FilterListItem"],"sources":["FilterListItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type {\n  DraggableAttributes,\n  DraggableSyntheticListeners,\n} from \"@dnd-kit/core\";\nimport type { ObjectSet, ObjectTypeDefinition, WhereClause } from \"@osdk/api\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport { ErrorBoundary } from \"../../shared/ErrorBoundary.js\";\nimport type { FilterDefinitionUnion } from \"../FilterListApi.js\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { getFilterLabel } from \"../utils/getFilterLabel.js\";\nimport { DragHandleIcon } from \"./DragHandleIcon.js\";\nimport { FilterInput } from \"./FilterInput.js\";\nimport styles from \"./FilterListItem.module.css\";\n\ninterface FilterListItemProps<Q extends ObjectTypeDefinition> {\n  objectType: Q;\n  objectSet: ObjectSet<Q>;\n  definition: FilterDefinitionUnion<Q>;\n  filterKey: string;\n  filterState: FilterState | undefined;\n  onFilterStateChanged: (\n    filterKey: string,\n    state: FilterState,\n  ) => void;\n  whereClause: WhereClause<Q>;\n  dragHandleAttributes?: DraggableAttributes;\n  dragHandleListeners?: DraggableSyntheticListeners;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction FilterListItemInner<Q extends ObjectTypeDefinition>({\n  objectType,\n  objectSet,\n  definition,\n  filterKey,\n  filterState,\n  onFilterStateChanged,\n  whereClause,\n  dragHandleAttributes,\n  dragHandleListeners,\n  className,\n  style,\n}: FilterListItemProps<Q>): React.ReactElement {\n  const label = getFilterLabel(definition);\n\n  const handleFilterStateChanged = useCallback(\n    (newState: FilterState) => {\n      onFilterStateChanged(filterKey, newState);\n    },\n    [filterKey, onFilterStateChanged],\n  );\n\n  return (\n    <div\n      className={classnames(styles.filterItem, className)}\n      style={style}\n      data-filter-type={definition.type}\n    >\n      <div className={styles.itemHeader}>\n        {dragHandleAttributes && (\n          <button\n            type=\"button\"\n            className={styles.dragHandle}\n            aria-label={`Reorder ${label}`}\n            {...dragHandleAttributes}\n            {...dragHandleListeners}\n          >\n            <DragHandleIcon />\n          </button>\n        )}\n        <span className={styles.itemLabel}>{label}</span>\n      </div>\n\n      <div className={styles.itemContent}>\n        <ErrorBoundary errorMessage=\"Error loading filter\">\n          <FilterInput\n            objectType={objectType}\n            objectSet={objectSet}\n            definition={definition}\n            filterState={filterState}\n            onFilterStateChanged={handleFilterStateChanged}\n            whereClause={whereClause}\n          />\n        </ErrorBoundary>\n      </div>\n    </div>\n  );\n}\n\nexport const FilterListItem = memo(\n  FilterListItemInner,\n) as typeof FilterListItemInner;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAOA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAChD,SAASC,aAAa,QAAQ,+BAA+B;AAG7D,SAASC,cAAc,QAAQ,4BAA4B;AAC3D,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,WAAW,QAAQ,kBAAkB;AAC9C,OAAOC,MAAM,MAAM,6BAA6B;AAmBhD,SAASC,mBAAmBA,CAAiC;EAC3DC,UAAU;EACVC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,WAAW;EACXC,oBAAoB;EACpBC,WAAW;EACXC,oBAAoB;EACpBC,mBAAmB;EACnBC,SAAS;EACTC;AACsB,CAAC,EAAsB;EAC7C,MAAMC,KAAK,GAAGhB,cAAc,CAACO,UAAU,CAAC;EAExC,MAAMU,wBAAwB,GAAGnB,WAAW,CACzCoB,QAAqB,IAAK;IACzBR,oBAAoB,CAACF,SAAS,EAAEU,QAAQ,CAAC;EAC3C,CAAC,EACD,CAACV,SAAS,EAAEE,oBAAoB,CAClC,CAAC;EAED,oBACEd,KAAA,CAAAuB,aAAA;IACEL,SAAS,EAAEnB,UAAU,CAACQ,MAAM,CAACiB,UAAU,EAAEN,SAAS,CAAE;IACpDC,KAAK,EAAEA,KAAM;IACb,oBAAkBR,UAAU,CAACc;EAAK,gBAElCzB,KAAA,CAAAuB,aAAA;IAAKL,SAAS,EAAEX,MAAM,CAACmB;EAAW,GAC/BV,oBAAoB,iBACnBhB,KAAA,CAAAuB,aAAA,WAAAI,QAAA;IACEF,IAAI,EAAC,QAAQ;IACbP,SAAS,EAAEX,MAAM,CAACqB,UAAW;IAC7B,cAAY,WAAWR,KAAK;EAAG,GAC3BJ,oBAAoB,EACpBC,mBAAmB,gBAEvBjB,KAAA,CAAAuB,aAAA,CAAClB,cAAc,MAAE,CACX,CACT,eACDL,KAAA,CAAAuB,aAAA;IAAML,SAAS,EAAEX,MAAM,CAACsB;EAAU,GAAET,KAAY,CAC7C,CAAC,eAENpB,KAAA,CAAAuB,aAAA;IAAKL,SAAS,EAAEX,MAAM,CAACuB;EAAY,gBACjC9B,KAAA,CAAAuB,aAAA,CAACpB,aAAa;IAAC4B,YAAY,EAAC;EAAsB,gBAChD/B,KAAA,CAAAuB,aAAA,CAACjB,WAAW;IACVG,UAAU,EAAEA,UAAW;IACvBC,SAAS,EAAEA,SAAU;IACrBC,UAAU,EAAEA,UAAW;IACvBE,WAAW,EAAEA,WAAY;IACzBC,oBAAoB,EAAEO,wBAAyB;IAC/CN,WAAW,EAAEA;EAAY,CAC1B,CACY,CACZ,CACF,CAAC;AAEV;AAEA,OAAO,MAAMiB,cAAc,gBAAG/B,IAAI,CAChCO,mBACF,CAA+B","ignoreList":[]}

package/build/browser/filter-list/base/FilterListItem.module.css

@@ -36,3 +36,35 @@
   display: flex;
   flex-direction: column;
 }
+
+.dragHandle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-drag-handle-padding);
+  margin-right: var(--osdk-surface-spacing);
+  border: none;
+  background: var(--osdk-filter-item-drag-handle-bg);
+  cursor: var(--osdk-drag-handle-cursor);
+  border-radius: var(--osdk-filter-item-drag-handle-border-radius);
+  color: var(--osdk-filter-item-drag-handle-color);
+  touch-action: none;
+
+  &:hover {
+    color: var(--osdk-filter-item-drag-handle-color-hover);
+    background: var(--osdk-filter-item-drag-handle-bg-hover);
+  }
+
+  &:active {
+    cursor: var(--osdk-drag-handle-cursor-active);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--osdk-filter-item-drag-handle-focus-outline-color);
+    outline-offset: 2px;
+  }
+}
+
+.dragging {
+  opacity: var(--osdk-filter-item-dragging-opacity);
+}

package/build/browser/filter-list/base/FilterListItem.module.css.js

@@ -3,7 +3,9 @@ const styles = {
   "filterItem": "FilterListItem-module__filterItem___fDBkbb7u",
   "itemHeader": "FilterListItem-module__itemHeader___jp4epXg-",
   "itemLabel": "FilterListItem-module__itemLabel___cEnbqE59",
-  "itemContent": "FilterListItem-module__itemContent___PfVHHhIy"
+  "itemContent": "FilterListItem-module__itemContent___PfVHHhIy",
+  "dragHandle": "FilterListItem-module__dragHandle___BwFrILWs",
+  "dragging": "FilterListItem-module__dragging___S5-LGyfS"
 };
 
 export default styles;

package/build/browser/filter-list/base/SortableFilterListItem.js

@@ -0,0 +1,63 @@
+/*
+ * 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 { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import classnames from "classnames";
+import React, { useMemo } from "react";
+import { FilterListItem } from "./FilterListItem.js";
+import styles from "./FilterListItem.module.css.js";
+export function SortableFilterListItem({
+  id,
+  objectType,
+  objectSet,
+  definition,
+  filterKey,
+  filterState,
+  onFilterStateChanged,
+  whereClause
+}) {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id
+  });
+  const style = useMemo(() => ({
+    transform: CSS.Transform.toString(transform),
+    transition: transition ?? undefined
+  }), [transform, transition]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: setNodeRef,
+    style: style,
+    className: classnames(isDragging && styles.dragging)
+  }, /*#__PURE__*/React.createElement(FilterListItem, {
+    objectType: objectType,
+    objectSet: objectSet,
+    definition: definition,
+    filterKey: filterKey,
+    filterState: filterState,
+    onFilterStateChanged: onFilterStateChanged,
+    whereClause: whereClause,
+    dragHandleAttributes: attributes,
+    dragHandleListeners: listeners
+  }));
+}
+//# sourceMappingURL=SortableFilterListItem.js.map