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

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

@@ -14,39 +14,205 @@
  * 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 { getFilterKey } from "../utils/getFilterKey.js";
+import React, { useCallback, useMemo, useState } from "react";
 import styles from "./FilterListContent.module.css";
 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];
+const DRAG_OVERLAY_HANDLE_ATTRIBUTES = {
+  role: "button",
+  tabIndex: -1,
+  "aria-disabled": true,
+  "aria-pressed": undefined,
+  "aria-roledescription": "sortable",
+  "aria-describedby": ""
+};
 export function FilterListContent({
   filterDefinitions,
   filterStates,
   onFilterStateChanged,
-  whereClause,
+  onFilterRemoved,
+  renderInput,
+  getFilterKey,
+  getFilterLabel,
+  enableSorting,
   className,
   style
 }) {
-  if (!filterDefinitions || filterDefinitions.length === 0) {
+  const [dragOrder, setDragOrder] = useState(null);
+  const [activeId, setActiveId] = useState(null);
+  const renderDefinitions = useMemo(() => {
+    if (!enableSorting || !dragOrder || !filterDefinitions) {
+      return filterDefinitions;
+    }
+    const defsByKey = new Map(filterDefinitions.map(d => [getFilterKey(d), d]));
+    const ordered = [];
+    for (const key of dragOrder) {
+      const def = defsByKey.get(key);
+      if (def) {
+        ordered.push(def);
+        defsByKey.delete(key);
+      }
+    }
+    for (const def of defsByKey.values()) {
+      ordered.push(def);
+    }
+    return ordered;
+  }, [enableSorting, dragOrder, filterDefinitions, getFilterKey]);
+  const sortableIds = useMemo(() => enableSorting && renderDefinitions ? renderDefinitions.map(def => getFilterKey(def)) : [], [enableSorting, renderDefinitions, getFilterKey]);
+  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 && renderDefinitions ? renderDefinitions[activeIndex] : undefined;
+  const activeFilterKey = useMemo(() => activeDefinition ? getFilterKey(activeDefinition) : undefined, [activeDefinition, getFilterKey]);
+  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) {
+      setDragOrder(arrayMove(sortableIds, oldIndex, newIndex));
+    }
+  }, [sortableIds]);
+  const handleDragCancel = useCallback(() => {
+    setActiveId(null);
+  }, []);
+  const announcements = useMemo(() => ({
+    onDragStart({
+      active
+    }) {
+      const idx = sortableIds.indexOf(String(active.id));
+      const def = idx >= 0 && renderDefinitions ? renderDefinitions[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 && renderDefinitions ? renderDefinitions[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 && renderDefinitions ? renderDefinitions[idx] : undefined;
+      const label = def ? getFilterLabel(def) : "filter";
+      return `Cancelled dragging ${label} filter`;
+    }
+  }), [renderDefinitions, sortableIds, getFilterLabel]);
+  const accessibility = useMemo(() => ({
+    announcements
+  }), [announcements]);
+  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: accessibility
+    }, /*#__PURE__*/React.createElement(SortableContext, {
+      items: sortableIds,
+      strategy: verticalListSortingStrategy
+    }, renderDefinitions.map((definition, index) => {
+      const id = sortableIds[index];
+      const filterKey = getFilterKey(definition);
+      const label = getFilterLabel(definition);
+      const state = filterStates.get(filterKey);
+      return /*#__PURE__*/React.createElement(SortableFilterListItem, {
+        key: id,
+        id: id,
+        definition: definition,
+        filterKey: filterKey,
+        label: label,
+        filterState: state,
+        onFilterStateChanged: onFilterStateChanged,
+        onFilterRemoved: onFilterRemoved,
+        renderInput: renderInput
+      });
+    })), /*#__PURE__*/React.createElement(DragOverlay, {
+      dropAnimation: null,
+      className: styles.dragOverlay
+    }, activeDefinition && activeFilterKey && /*#__PURE__*/React.createElement(FilterListItem, {
+      definition: activeDefinition,
+      filterKey: activeFilterKey,
+      label: getFilterLabel(activeDefinition),
+      filterState: filterStates.get(activeFilterKey),
+      onFilterStateChanged: onFilterStateChanged,
+      onFilterRemoved: onFilterRemoved,
+      renderInput: renderInput,
+      dragHandleAttributes: DRAG_OVERLAY_HANDLE_ATTRIBUTES
+    }))));
+  }
   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, {
       key: filterKey,
       definition: definition,
       filterKey: filterKey,
+      label: getFilterLabel(definition),
       filterState: state,
       onFilterStateChanged: onFilterStateChanged,
-      whereClause: whereClause
+      onFilterRemoved: onFilterRemoved,
+      renderInput: renderInput
     });
   }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"FilterListContent.js","names":["classnames","React","getFilterKey","styles","FilterListItem","FilterListContent","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 { 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  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  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            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;AAcpD,OAAO,SAASC,iBAAiBA,CAAiC;EAChEC,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,oBACEX,KAAA,CAAAY,aAAA;MACEH,SAAS,EAAEV,UAAU,CAACG,MAAM,CAACW,OAAO,EAAEJ,SAAS,CAAE;MACjDC,KAAK,EAAEA,KAAM;MACb,cAAW;IAAM,CAClB,CAAC;EAEN;EAEA,oBACEV,KAAA,CAAAY,aAAA;IACEH,SAAS,EAAEV,UAAU,CAACG,MAAM,CAACW,OAAO,EAAEJ,SAAS,CAAE;IACjDC,KAAK,EAAEA;EAAM,GAEZL,iBAAiB,CAACS,GAAG,CAAEC,UAAU,IAAY;IAC5C,MAAMC,SAAS,GAAGf,YAAY,CAACc,UAAU,CAAC;IAC1C,MAAME,KAAK,GAAGX,YAAY,CAACY,GAAG,CAACF,SAAS,CAAC;IAEzC,oBACEhB,KAAA,CAAAY,aAAA,CAACT,cAAc;MACbgB,GAAG,EAAEH,SAAU;MACfD,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","useMemo","useState","styles","FilterListItem","SortableFilterListItem","restrictToVerticalAxis","transform","x","POINTER_ACTIVATION_CONSTRAINT","distance","MODIFIERS","DRAG_OVERLAY_HANDLE_ATTRIBUTES","role","tabIndex","undefined","FilterListContent","filterDefinitions","filterStates","onFilterStateChanged","onFilterRemoved","renderInput","getFilterKey","getFilterLabel","enableSorting","className","style","dragOrder","setDragOrder","activeId","setActiveId","renderDefinitions","defsByKey","Map","map","d","ordered","key","def","get","push","delete","values","sortableIds","pointerSensor","activationConstraint","keyboardSensor","coordinateGetter","sensors","activeIndex","indexOf","String","activeDefinition","activeFilterKey","handleDragStart","event","active","id","handleDragEnd","over","oldIndex","newIndex","handleDragCancel","announcements","onDragStart","idx","label","onDragOver","overIdx","length","onDragEnd","onDragCancel","accessibility","createElement","content","collisionDetection","modifiers","items","strategy","definition","index","filterKey","state","filterState","dropAnimation","dragOverlay","dragHandleAttributes"],"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  DraggableAttributes,\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 classnames from \"classnames\";\nimport React, { useCallback, useMemo, useState } from \"react\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport type { RenderFilterInput } from \"./BaseFilterListApi.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\nconst DRAG_OVERLAY_HANDLE_ATTRIBUTES: DraggableAttributes = {\n  role: \"button\",\n  tabIndex: -1,\n  \"aria-disabled\": true,\n  \"aria-pressed\": undefined,\n  \"aria-roledescription\": \"sortable\",\n  \"aria-describedby\": \"\",\n};\n\ninterface FilterListContentProps<D> {\n  filterDefinitions?: Array<D>;\n  filterStates: Map<string, FilterState>;\n  onFilterStateChanged: (\n    filterKey: string,\n    state: FilterState,\n  ) => void;\n  onFilterRemoved?: (filterKey: string) => void;\n  renderInput: RenderFilterInput<D>;\n  getFilterKey: (definition: D) => string;\n  getFilterLabel: (definition: D) => string;\n  enableSorting?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nexport function FilterListContent<D>({\n  filterDefinitions,\n  filterStates,\n  onFilterStateChanged,\n  onFilterRemoved,\n  renderInput,\n  getFilterKey,\n  getFilterLabel,\n  enableSorting,\n  className,\n  style,\n}: FilterListContentProps<D>): React.ReactElement {\n  const [dragOrder, setDragOrder] = useState<string[] | null>(null);\n  const [activeId, setActiveId] = useState<UniqueIdentifier | null>(null);\n\n  const renderDefinitions = useMemo(() => {\n    if (!enableSorting || !dragOrder || !filterDefinitions) {\n      return filterDefinitions;\n    }\n    const defsByKey = new Map(filterDefinitions.map(d => [getFilterKey(d), d]));\n    const ordered: Array<D> = [];\n    for (const key of dragOrder) {\n      const def = defsByKey.get(key);\n      if (def) {\n        ordered.push(def);\n        defsByKey.delete(key);\n      }\n    }\n    for (const def of defsByKey.values()) {\n      ordered.push(def);\n    }\n    return ordered;\n  }, [enableSorting, dragOrder, filterDefinitions, getFilterKey]);\n\n  const sortableIds = useMemo(\n    () =>\n      enableSorting && renderDefinitions\n        ? renderDefinitions.map((def) => getFilterKey(def))\n        : [],\n    [enableSorting, renderDefinitions, getFilterKey],\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 && renderDefinitions\n    ? renderDefinitions[activeIndex]\n    : undefined;\n\n  const activeFilterKey = useMemo(\n    () => activeDefinition ? getFilterKey(activeDefinition) : undefined,\n    [activeDefinition, getFilterKey],\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        setDragOrder(arrayMove(sortableIds, oldIndex, newIndex));\n      }\n    },\n    [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 && renderDefinitions\n          ? renderDefinitions[idx]\n          : 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 && renderDefinitions\n          ? renderDefinitions[idx]\n          : 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 && renderDefinitions\n          ? renderDefinitions[idx]\n          : undefined;\n        const label = def ? getFilterLabel(def) : \"filter\";\n        return `Cancelled dragging ${label} filter`;\n      },\n    }),\n    [renderDefinitions, sortableIds, getFilterLabel],\n  );\n\n  const accessibility = useMemo(\n    () => ({ announcements }),\n    [announcements],\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={accessibility}\n        >\n          <SortableContext\n            items={sortableIds}\n            strategy={verticalListSortingStrategy}\n          >\n            {renderDefinitions.map((definition, index) => {\n              const id = sortableIds[index];\n              const filterKey = getFilterKey(definition);\n              const label = getFilterLabel(definition);\n              const state = filterStates.get(filterKey);\n\n              return (\n                <SortableFilterListItem\n                  key={id}\n                  id={id}\n                  definition={definition}\n                  filterKey={filterKey}\n                  label={label}\n                  filterState={state}\n                  onFilterStateChanged={onFilterStateChanged}\n                  onFilterRemoved={onFilterRemoved}\n                  renderInput={renderInput}\n                />\n              );\n            })}\n          </SortableContext>\n\n          <DragOverlay\n            dropAnimation={null}\n            className={styles.dragOverlay}\n          >\n            {activeDefinition && activeFilterKey && (\n              <FilterListItem\n                definition={activeDefinition}\n                filterKey={activeFilterKey}\n                label={getFilterLabel(activeDefinition)}\n                filterState={filterStates.get(activeFilterKey)}\n                onFilterStateChanged={onFilterStateChanged}\n                onFilterRemoved={onFilterRemoved}\n                renderInput={renderInput}\n                dragHandleAttributes={DRAG_OVERLAY_HANDLE_ATTRIBUTES}\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            definition={definition}\n            filterKey={filterKey}\n            label={getFilterLabel(definition)}\n            filterState={state}\n            onFilterStateChanged={onFilterStateChanged}\n            onFilterRemoved={onFilterRemoved}\n            renderInput={renderInput}\n          />\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAUA,SACEA,aAAa,EACbC,UAAU,EACVC,WAAW,EACXC,cAAc,EACdC,aAAa,EACbC,SAAS,EACTC,UAAU,QACL,eAAe;AACtB,SACEC,SAAS,EACTC,eAAe,EACfC,2BAA2B,EAC3BC,2BAA2B,QACtB,mBAAmB;AAC1B,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAG7D,OAAOC,MAAM,MAAM,gCAAgC;AACnD,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,sBAAsB,QAAQ,6BAA6B;AAEpE,MAAMC,sBAAgC,GAAGA,CAAC;EAAEC;AAAU,CAAC,MAAM;EAC3D,GAAGA,SAAS;EACZC,CAAC,EAAE;AACL,CAAC,CAAC;AAEF,MAAMC,6BAA6B,GAAG;EAAEC,QAAQ,EAAE;AAAE,CAAU;AAC9D,MAAMC,SAAqB,GAAG,CAACL,sBAAsB,CAAC;AAEtD,MAAMM,8BAAmD,GAAG;EAC1DC,IAAI,EAAE,QAAQ;EACdC,QAAQ,EAAE,CAAC,CAAC;EACZ,eAAe,EAAE,IAAI;EACrB,cAAc,EAAEC,SAAS;EACzB,sBAAsB,EAAE,UAAU;EAClC,kBAAkB,EAAE;AACtB,CAAC;AAkBD,OAAO,SAASC,iBAAiBA,CAAI;EACnCC,iBAAiB;EACjBC,YAAY;EACZC,oBAAoB;EACpBC,eAAe;EACfC,WAAW;EACXC,YAAY;EACZC,cAAc;EACdC,aAAa;EACbC,SAAS;EACTC;AACyB,CAAC,EAAsB;EAChD,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAG1B,QAAQ,CAAkB,IAAI,CAAC;EACjE,MAAM,CAAC2B,QAAQ,EAAEC,WAAW,CAAC,GAAG5B,QAAQ,CAA0B,IAAI,CAAC;EAEvE,MAAM6B,iBAAiB,GAAG9B,OAAO,CAAC,MAAM;IACtC,IAAI,CAACuB,aAAa,IAAI,CAACG,SAAS,IAAI,CAACV,iBAAiB,EAAE;MACtD,OAAOA,iBAAiB;IAC1B;IACA,MAAMe,SAAS,GAAG,IAAIC,GAAG,CAAChB,iBAAiB,CAACiB,GAAG,CAACC,CAAC,IAAI,CAACb,YAAY,CAACa,CAAC,CAAC,EAAEA,CAAC,CAAC,CAAC,CAAC;IAC3E,MAAMC,OAAiB,GAAG,EAAE;IAC5B,KAAK,MAAMC,GAAG,IAAIV,SAAS,EAAE;MAC3B,MAAMW,GAAG,GAAGN,SAAS,CAACO,GAAG,CAACF,GAAG,CAAC;MAC9B,IAAIC,GAAG,EAAE;QACPF,OAAO,CAACI,IAAI,CAACF,GAAG,CAAC;QACjBN,SAAS,CAACS,MAAM,CAACJ,GAAG,CAAC;MACvB;IACF;IACA,KAAK,MAAMC,GAAG,IAAIN,SAAS,CAACU,MAAM,CAAC,CAAC,EAAE;MACpCN,OAAO,CAACI,IAAI,CAACF,GAAG,CAAC;IACnB;IACA,OAAOF,OAAO;EAChB,CAAC,EAAE,CAACZ,aAAa,EAAEG,SAAS,EAAEV,iBAAiB,EAAEK,YAAY,CAAC,CAAC;EAE/D,MAAMqB,WAAW,GAAG1C,OAAO,CACzB,MACEuB,aAAa,IAAIO,iBAAiB,GAC9BA,iBAAiB,CAACG,GAAG,CAAEI,GAAG,IAAKhB,YAAY,CAACgB,GAAG,CAAC,CAAC,GACjD,EAAE,EACR,CAACd,aAAa,EAAEO,iBAAiB,EAAET,YAAY,CACjD,CAAC;EAED,MAAMsB,aAAa,GAAGpD,SAAS,CAACD,aAAa,EAAE;IAC7CsD,oBAAoB,EAAEpC;EACxB,CAAC,CAAC;EACF,MAAMqC,cAAc,GAAGtD,SAAS,CAACF,cAAc,EAAE;IAC/CyD,gBAAgB,EAAEnD;EACpB,CAAC,CAAC;EACF,MAAMoD,OAAO,GAAGvD,UAAU,CAACmD,aAAa,EAAEE,cAAc,CAAC;EAEzD,MAAMG,WAAW,GAAGpB,QAAQ,IAAI,IAAI,GAChCc,WAAW,CAACO,OAAO,CAACC,MAAM,CAACtB,QAAQ,CAAC,CAAC,GACrC,CAAC,CAAC;EACN,MAAMuB,gBAAgB,GAAGH,WAAW,IAAI,CAAC,IAAIlB,iBAAiB,GAC1DA,iBAAiB,CAACkB,WAAW,CAAC,GAC9BlC,SAAS;EAEb,MAAMsC,eAAe,GAAGpD,OAAO,CAC7B,MAAMmD,gBAAgB,GAAG9B,YAAY,CAAC8B,gBAAgB,CAAC,GAAGrC,SAAS,EACnE,CAACqC,gBAAgB,EAAE9B,YAAY,CACjC,CAAC;EAED,MAAMgC,eAAe,GAAGtD,WAAW,CAAEuD,KAAqB,IAAK;IAC7DzB,WAAW,CAACyB,KAAK,CAACC,MAAM,CAACC,EAAE,CAAC;EAC9B,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,aAAa,GAAG1D,WAAW,CAC9BuD,KAAmB,IAAK;IACvBzB,WAAW,CAAC,IAAI,CAAC;IACjB,MAAM;MAAE0B,MAAM;MAAEG;IAAK,CAAC,GAAGJ,KAAK;IAC9B,IAAI,CAACI,IAAI,IAAIH,MAAM,CAACC,EAAE,KAAKE,IAAI,CAACF,EAAE,EAAE;MAClC;IACF;IACA,MAAMG,QAAQ,GAAGjB,WAAW,CAACO,OAAO,CAACC,MAAM,CAACK,MAAM,CAACC,EAAE,CAAC,CAAC;IACvD,MAAMI,QAAQ,GAAGlB,WAAW,CAACO,OAAO,CAACC,MAAM,CAACQ,IAAI,CAACF,EAAE,CAAC,CAAC;IACrD,IAAIG,QAAQ,KAAK,CAAC,CAAC,IAAIC,QAAQ,KAAK,CAAC,CAAC,EAAE;MACtCjC,YAAY,CAAClC,SAAS,CAACiD,WAAW,EAAEiB,QAAQ,EAAEC,QAAQ,CAAC,CAAC;IAC1D;EACF,CAAC,EACD,CAAClB,WAAW,CACd,CAAC;EAED,MAAMmB,gBAAgB,GAAG9D,WAAW,CAAC,MAAM;IACzC8B,WAAW,CAAC,IAAI,CAAC;EACnB,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMiC,aAAa,GAAG9D,OAAO,CAC3B,OAAO;IACL+D,WAAWA,CAAC;MAAER;IAAO,CAAC,EAAE;MACtB,MAAMS,GAAG,GAAGtB,WAAW,CAACO,OAAO,CAACC,MAAM,CAACK,MAAM,CAACC,EAAE,CAAC,CAAC;MAClD,MAAMnB,GAAG,GAAG2B,GAAG,IAAI,CAAC,IAAIlC,iBAAiB,GACrCA,iBAAiB,CAACkC,GAAG,CAAC,GACtBlD,SAAS;MACb,MAAMmD,KAAK,GAAG5B,GAAG,GAAGf,cAAc,CAACe,GAAG,CAAC,GAAG,QAAQ;MAClD,OAAO,aAAa4B,KAAK,SAAS;IACpC,CAAC;IACDC,UAAUA,CAAC;MAAER;IAAK,CAAC,EAAE;MACnB,IAAI,CAACA,IAAI,EAAE;QACT,OAAO,2BAA2B;MACpC;MACA,MAAMS,OAAO,GAAGzB,WAAW,CAACO,OAAO,CAACC,MAAM,CAACQ,IAAI,CAACF,EAAE,CAAC,CAAC;MACpD,OAAO,qBAAqBW,OAAO,GAAG,CAAC,OAAOzB,WAAW,CAAC0B,MAAM,EAAE;IACpE,CAAC;IACDC,SAASA,CAAC;MAAEd,MAAM;MAAEG;IAAK,CAAC,EAAE;MAC1B,MAAMM,GAAG,GAAGtB,WAAW,CAACO,OAAO,CAACC,MAAM,CAACK,MAAM,CAACC,EAAE,CAAC,CAAC;MAClD,MAAMnB,GAAG,GAAG2B,GAAG,IAAI,CAAC,IAAIlC,iBAAiB,GACrCA,iBAAiB,CAACkC,GAAG,CAAC,GACtBlD,SAAS;MACb,MAAMmD,KAAK,GAAG5B,GAAG,GAAGf,cAAc,CAACe,GAAG,CAAC,GAAG,QAAQ;MAClD,IAAIqB,IAAI,IAAIH,MAAM,CAACC,EAAE,KAAKE,IAAI,CAACF,EAAE,EAAE;QACjC,MAAMW,OAAO,GAAGzB,WAAW,CAACO,OAAO,CAACC,MAAM,CAACQ,IAAI,CAACF,EAAE,CAAC,CAAC;QACpD,OAAO,WAAWS,KAAK,uBAAuBE,OAAO,GAAG,CAAC,EAAE;MAC7D;MACA,OAAO,WAAWF,KAAK,uCAAuC;IAChE,CAAC;IACDK,YAAYA,CAAC;MAAEf;IAAO,CAAC,EAAE;MACvB,MAAMS,GAAG,GAAGtB,WAAW,CAACO,OAAO,CAACC,MAAM,CAACK,MAAM,CAACC,EAAE,CAAC,CAAC;MAClD,MAAMnB,GAAG,GAAG2B,GAAG,IAAI,CAAC,IAAIlC,iBAAiB,GACrCA,iBAAiB,CAACkC,GAAG,CAAC,GACtBlD,SAAS;MACb,MAAMmD,KAAK,GAAG5B,GAAG,GAAGf,cAAc,CAACe,GAAG,CAAC,GAAG,QAAQ;MAClD,OAAO,sBAAsB4B,KAAK,SAAS;IAC7C;EACF,CAAC,CAAC,EACF,CAACnC,iBAAiB,EAAEY,WAAW,EAAEpB,cAAc,CACjD,CAAC;EAED,MAAMiD,aAAa,GAAGvE,OAAO,CAC3B,OAAO;IAAE8D;EAAc,CAAC,CAAC,EACzB,CAACA,aAAa,CAChB,CAAC;EAED,IAAI,CAAChC,iBAAiB,IAAIA,iBAAiB,CAACsC,MAAM,KAAK,CAAC,EAAE;IACxD,oBACEtE,KAAA,CAAA0E,aAAA;MACEhD,SAAS,EAAE3B,UAAU,CAACK,MAAM,CAACuE,OAAO,EAAEjD,SAAS,CAAE;MACjDC,KAAK,EAAEA,KAAM;MACb,cAAW;IAAM,CAClB,CAAC;EAEN;EAEA,IAAIF,aAAa,EAAE;IACjB,oBACEzB,KAAA,CAAA0E,aAAA;MACEhD,SAAS,EAAE3B,UAAU,CAACK,MAAM,CAACuE,OAAO,EAAEjD,SAAS,CAAE;MACjDC,KAAK,EAAEA;IAAM,gBAEb3B,KAAA,CAAA0E,aAAA,CAACrF,UAAU;MACT4D,OAAO,EAAEA,OAAQ;MACjB2B,kBAAkB,EAAExF,aAAc;MAClCyF,SAAS,EAAEjE,SAAU;MACrBqD,WAAW,EAAEV,eAAgB;MAC7BgB,SAAS,EAAEZ,aAAc;MACzBa,YAAY,EAAET,gBAAiB;MAC/BU,aAAa,EAAEA;IAAc,gBAE7BzE,KAAA,CAAA0E,aAAA,CAAC9E,eAAe;MACdkF,KAAK,EAAElC,WAAY;MACnBmC,QAAQ,EAAEjF;IAA4B,GAErCkC,iBAAiB,CAACG,GAAG,CAAC,CAAC6C,UAAU,EAAEC,KAAK,KAAK;MAC5C,MAAMvB,EAAE,GAAGd,WAAW,CAACqC,KAAK,CAAC;MAC7B,MAAMC,SAAS,GAAG3D,YAAY,CAACyD,UAAU,CAAC;MAC1C,MAAMb,KAAK,GAAG3C,cAAc,CAACwD,UAAU,CAAC;MACxC,MAAMG,KAAK,GAAGhE,YAAY,CAACqB,GAAG,CAAC0C,SAAS,CAAC;MAEzC,oBACElF,KAAA,CAAA0E,aAAA,CAACpE,sBAAsB;QACrBgC,GAAG,EAAEoB,EAAG;QACRA,EAAE,EAAEA,EAAG;QACPsB,UAAU,EAAEA,UAAW;QACvBE,SAAS,EAAEA,SAAU;QACrBf,KAAK,EAAEA,KAAM;QACbiB,WAAW,EAAED,KAAM;QACnB/D,oBAAoB,EAAEA,oBAAqB;QAC3CC,eAAe,EAAEA,eAAgB;QACjCC,WAAW,EAAEA;MAAY,CAC1B,CAAC;IAEN,CAAC,CACc,CAAC,eAElBtB,KAAA,CAAA0E,aAAA,CAACpF,WAAW;MACV+F,aAAa,EAAE,IAAK;MACpB3D,SAAS,EAAEtB,MAAM,CAACkF;IAAY,GAE7BjC,gBAAgB,IAAIC,eAAe,iBAClCtD,KAAA,CAAA0E,aAAA,CAACrE,cAAc;MACb2E,UAAU,EAAE3B,gBAAiB;MAC7B6B,SAAS,EAAE5B,eAAgB;MAC3Ba,KAAK,EAAE3C,cAAc,CAAC6B,gBAAgB,CAAE;MACxC+B,WAAW,EAAEjE,YAAY,CAACqB,GAAG,CAACc,eAAe,CAAE;MAC/ClC,oBAAoB,EAAEA,oBAAqB;MAC3CC,eAAe,EAAEA,eAAgB;MACjCC,WAAW,EAAEA,WAAY;MACzBiE,oBAAoB,EAAE1E;IAA+B,CACtD,CAEQ,CACH,CACT,CAAC;EAEV;EAEA,oBACEb,KAAA,CAAA0E,aAAA;IACEhD,SAAS,EAAE3B,UAAU,CAACK,MAAM,CAACuE,OAAO,EAAEjD,SAAS,CAAE;IACjDC,KAAK,EAAEA;EAAM,GAEZK,iBAAiB,CAACG,GAAG,CAAE6C,UAAU,IAAK;IACrC,MAAME,SAAS,GAAG3D,YAAY,CAACyD,UAAU,CAAC;IAC1C,MAAMG,KAAK,GAAGhE,YAAY,CAACqB,GAAG,CAAC0C,SAAS,CAAC;IAEzC,oBACElF,KAAA,CAAA0E,aAAA,CAACrE,cAAc;MACbiC,GAAG,EAAE4C,SAAU;MACfF,UAAU,EAAEA,UAAW;MACvBE,SAAS,EAAEA,SAAU;MACrBf,KAAK,EAAE3C,cAAc,CAACwD,UAAU,CAAE;MAClCI,WAAW,EAAED,KAAM;MACnB/D,oBAAoB,EAAEA,oBAAqB;MAC3CC,eAAe,EAAEA,eAAgB;MACjCC,WAAW,EAAEA;IAAY,CAC1B,CAAC;EAEN,CAAC,CACE,CAAC;AAEV","ignoreList":[]}

package/build/esm/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/esm/filter-list/base/FilterListHeader.js

@@ -16,6 +16,7 @@
 
 import { Button } from "@base-ui/react/button";
 import React, { memo, useCallback } from "react";
+import { CollapseIcon, ResetIcon } from "./FilterIcons.js";
 import styles from "./FilterListHeader.module.css";
 function FilterListHeaderInner({
   title,
@@ -25,22 +26,15 @@ function FilterListHeaderInner({
   showResetButton,
   onReset,
   showActiveFilterCount,
-  activeFilterCount = 0
+  activeFilterCount = 0,
+  hasVisibilityChanges = false
 }) {
   const handleCollapseClick = useCallback(() => {
     onCollapsedChange?.(!collapsed);
   }, [onCollapsedChange, collapsed]);
   return /*#__PURE__*/React.createElement("div", {
     className: styles.header
-  }, onCollapsedChange != null && /*#__PURE__*/React.createElement(Button, {
-    className: styles.collapseButton,
-    onClick: handleCollapseClick,
-    "aria-expanded": !collapsed,
-    "aria-label": collapsed ? "Expand filters" : "Collapse filters"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: styles.collapseIcon,
-    "data-collapsed": collapsed
-  })), !collapsed && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: styles.titleContainer
   }, titleIcon && /*#__PURE__*/React.createElement("span", {
     className: styles.titleIcon
@@ -48,11 +42,18 @@ function FilterListHeaderInner({
     className: styles.title
   }, title), showActiveFilterCount && activeFilterCount > 0 && /*#__PURE__*/React.createElement("span", {
     className: styles.activeCount
-  }, "(", activeFilterCount, ")")), showResetButton && /*#__PURE__*/React.createElement(Button, {
+  }, "(", activeFilterCount, ")")), /*#__PURE__*/React.createElement("div", {
+    className: styles.actions
+  }, showResetButton && /*#__PURE__*/React.createElement(Button, {
     className: styles.resetButton,
     onClick: onReset,
-    disabled: activeFilterCount === 0
-  }, "Reset")));
+    disabled: activeFilterCount === 0 && !hasVisibilityChanges
+  }, /*#__PURE__*/React.createElement(ResetIcon, null), " Reset filters"), onCollapsedChange != null && /*#__PURE__*/React.createElement(Button, {
+    className: styles.collapseButton,
+    onClick: handleCollapseClick,
+    "aria-expanded": !collapsed,
+    "aria-label": collapsed ? "Expand filters" : "Collapse filters"
+  }, /*#__PURE__*/React.createElement(CollapseIcon, null))));
 }
 export const FilterListHeader = /*#__PURE__*/memo(FilterListHeaderInner);
 //# sourceMappingURL=FilterListHeader.js.map

package/build/esm/filter-list/base/FilterListHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterListHeader.js","names":["Button","React","memo","useCallback","styles","FilterListHeaderInner","title","titleIcon","collapsed","onCollapsedChange","showResetButton","onReset","showActiveFilterCount","activeFilterCount","handleCollapseClick","createElement","className","header","collapseButton","onClick","collapseIcon","Fragment","titleContainer","activeCount","resetButton","disabled","FilterListHeader"],"sources":["FilterListHeader.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 React, { memo, type ReactNode, useCallback } from \"react\";\nimport styles from \"./FilterListHeader.module.css\";\n\ninterface FilterListHeaderProps {\n  title?: string;\n  titleIcon?: ReactNode;\n  collapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  showResetButton?: boolean;\n  onReset?: () => void;\n  showActiveFilterCount?: boolean;\n  activeFilterCount?: number;\n}\n\nfunction FilterListHeaderInner({\n  title,\n  titleIcon,\n  collapsed = false,\n  onCollapsedChange,\n  showResetButton,\n  onReset,\n  showActiveFilterCount,\n  activeFilterCount = 0,\n}: FilterListHeaderProps): React.ReactElement {\n  const showCollapseButton = onCollapsedChange != null;\n\n  const handleCollapseClick = useCallback(() => {\n    onCollapsedChange?.(!collapsed);\n  }, [onCollapsedChange, collapsed]);\n\n  return (\n    <div className={styles.header}>\n      {showCollapseButton && (\n        <Button\n          className={styles.collapseButton}\n          onClick={handleCollapseClick}\n          aria-expanded={!collapsed}\n          aria-label={collapsed ? \"Expand filters\" : \"Collapse filters\"}\n        >\n          <span\n            className={styles.collapseIcon}\n            data-collapsed={collapsed}\n          />\n        </Button>\n      )}\n\n      {!collapsed && (\n        <>\n          <div className={styles.titleContainer}>\n            {titleIcon && (\n              <span className={styles.titleIcon}>\n                {titleIcon}\n              </span>\n            )}\n            {title && (\n              <span className={styles.title}>\n                {title}\n              </span>\n            )}\n            {showActiveFilterCount && activeFilterCount > 0 && (\n              <span className={styles.activeCount}>\n                ({activeFilterCount})\n              </span>\n            )}\n          </div>\n\n          {showResetButton && (\n            <Button\n              className={styles.resetButton}\n              onClick={onReset}\n              disabled={activeFilterCount === 0}\n            >\n              Reset\n            </Button>\n          )}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const FilterListHeader: React.MemoExoticComponent<\n  typeof FilterListHeaderInner\n> = memo(FilterListHeaderInner);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,OAAOC,KAAK,IAAIC,IAAI,EAAkBC,WAAW,QAAQ,OAAO;AAChE,OAAOC,MAAM,MAAM,+BAA+B;AAalD,SAASC,qBAAqBA,CAAC;EAC7BC,KAAK;EACLC,SAAS;EACTC,SAAS,GAAG,KAAK;EACjBC,iBAAiB;EACjBC,eAAe;EACfC,OAAO;EACPC,qBAAqB;EACrBC,iBAAiB,GAAG;AACC,CAAC,EAAsB;EAG5C,MAAMC,mBAAmB,GAAGX,WAAW,CAAC,MAAM;IAC5CM,iBAAiB,GAAG,CAACD,SAAS,CAAC;EACjC,CAAC,EAAE,CAACC,iBAAiB,EAAED,SAAS,CAAC,CAAC;EAElC,oBACEP,KAAA,CAAAc,aAAA;IAAKC,SAAS,EAAEZ,MAAM,CAACa;EAAO,GAPLR,iBAAiB,IAAI,IAAI,iBAS9CR,KAAA,CAAAc,aAAA,CAACf,MAAM;IACLgB,SAAS,EAAEZ,MAAM,CAACc,cAAe;IACjCC,OAAO,EAAEL,mBAAoB;IAC7B,iBAAe,CAACN,SAAU;IAC1B,cAAYA,SAAS,GAAG,gBAAgB,GAAG;EAAmB,gBAE9DP,KAAA,CAAAc,aAAA;IACEC,SAAS,EAAEZ,MAAM,CAACgB,YAAa;IAC/B,kBAAgBZ;EAAU,CAC3B,CACK,CACT,EAEA,CAACA,SAAS,iBACTP,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAoB,QAAA,qBACEpB,KAAA,CAAAc,aAAA;IAAKC,SAAS,EAAEZ,MAAM,CAACkB;EAAe,GACnCf,SAAS,iBACRN,KAAA,CAAAc,aAAA;IAAMC,SAAS,EAAEZ,MAAM,CAACG;EAAU,GAC/BA,SACG,CACP,EACAD,KAAK,iBACJL,KAAA,CAAAc,aAAA;IAAMC,SAAS,EAAEZ,MAAM,CAACE;EAAM,GAC3BA,KACG,CACP,EACAM,qBAAqB,IAAIC,iBAAiB,GAAG,CAAC,iBAC7CZ,KAAA,CAAAc,aAAA;IAAMC,SAAS,EAAEZ,MAAM,CAACmB;EAAY,GAAC,GAClC,EAACV,iBAAiB,EAAC,GAChB,CAEL,CAAC,EAELH,eAAe,iBACdT,KAAA,CAAAc,aAAA,CAACf,MAAM;IACLgB,SAAS,EAAEZ,MAAM,CAACoB,WAAY;IAC9BL,OAAO,EAAER,OAAQ;IACjBc,QAAQ,EAAEZ,iBAAiB,KAAK;EAAE,GACnC,OAEO,CAEV,CAED,CAAC;AAEV;AAEA,OAAO,MAAMa,gBAEZ,gBAAGxB,IAAI,CAACG,qBAAqB,CAAC","ignoreList":[]}
+{"version":3,"file":"FilterListHeader.js","names":["Button","React","memo","useCallback","CollapseIcon","ResetIcon","styles","FilterListHeaderInner","title","titleIcon","collapsed","onCollapsedChange","showResetButton","onReset","showActiveFilterCount","activeFilterCount","hasVisibilityChanges","handleCollapseClick","createElement","className","header","titleContainer","activeCount","actions","resetButton","onClick","disabled","collapseButton","FilterListHeader"],"sources":["FilterListHeader.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 React, { memo, type ReactNode, useCallback } from \"react\";\nimport { CollapseIcon, ResetIcon } from \"./FilterIcons.js\";\nimport styles from \"./FilterListHeader.module.css\";\n\ninterface FilterListHeaderProps {\n  title?: ReactNode;\n  titleIcon?: ReactNode;\n  collapsed?: boolean;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  showResetButton?: boolean;\n  onReset?: () => void;\n  showActiveFilterCount?: boolean;\n  activeFilterCount?: number;\n  hasVisibilityChanges?: boolean;\n}\n\nfunction FilterListHeaderInner({\n  title,\n  titleIcon,\n  collapsed = false,\n  onCollapsedChange,\n  showResetButton,\n  onReset,\n  showActiveFilterCount,\n  activeFilterCount = 0,\n  hasVisibilityChanges = false,\n}: FilterListHeaderProps): React.ReactElement {\n  const showCollapseButton = onCollapsedChange != null;\n\n  const handleCollapseClick = useCallback(() => {\n    onCollapsedChange?.(!collapsed);\n  }, [onCollapsedChange, collapsed]);\n\n  return (\n    <div className={styles.header}>\n      <div className={styles.titleContainer}>\n        {titleIcon && (\n          <span className={styles.titleIcon}>\n            {titleIcon}\n          </span>\n        )}\n        {title && (\n          <span className={styles.title}>\n            {title}\n          </span>\n        )}\n        {showActiveFilterCount && activeFilterCount > 0 && (\n          <span className={styles.activeCount}>\n            ({activeFilterCount})\n          </span>\n        )}\n      </div>\n\n      <div className={styles.actions}>\n        {showResetButton && (\n          <Button\n            className={styles.resetButton}\n            onClick={onReset}\n            disabled={activeFilterCount === 0 && !hasVisibilityChanges}\n          >\n            <ResetIcon /> Reset filters\n          </Button>\n        )}\n\n        {showCollapseButton && (\n          <Button\n            className={styles.collapseButton}\n            onClick={handleCollapseClick}\n            aria-expanded={!collapsed}\n            aria-label={collapsed ? \"Expand filters\" : \"Collapse filters\"}\n          >\n            <CollapseIcon />\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n}\n\nexport const FilterListHeader: React.MemoExoticComponent<\n  typeof FilterListHeaderInner\n> = memo(FilterListHeaderInner);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,OAAOC,KAAK,IAAIC,IAAI,EAAkBC,WAAW,QAAQ,OAAO;AAChE,SAASC,YAAY,EAAEC,SAAS,QAAQ,kBAAkB;AAC1D,OAAOC,MAAM,MAAM,+BAA+B;AAclD,SAASC,qBAAqBA,CAAC;EAC7BC,KAAK;EACLC,SAAS;EACTC,SAAS,GAAG,KAAK;EACjBC,iBAAiB;EACjBC,eAAe;EACfC,OAAO;EACPC,qBAAqB;EACrBC,iBAAiB,GAAG,CAAC;EACrBC,oBAAoB,GAAG;AACF,CAAC,EAAsB;EAG5C,MAAMC,mBAAmB,GAAGd,WAAW,CAAC,MAAM;IAC5CQ,iBAAiB,GAAG,CAACD,SAAS,CAAC;EACjC,CAAC,EAAE,CAACC,iBAAiB,EAAED,SAAS,CAAC,CAAC;EAElC,oBACET,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAEb,MAAM,CAACc;EAAO,gBAC5BnB,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAEb,MAAM,CAACe;EAAe,GACnCZ,SAAS,iBACRR,KAAA,CAAAiB,aAAA;IAAMC,SAAS,EAAEb,MAAM,CAACG;EAAU,GAC/BA,SACG,CACP,EACAD,KAAK,iBACJP,KAAA,CAAAiB,aAAA;IAAMC,SAAS,EAAEb,MAAM,CAACE;EAAM,GAC3BA,KACG,CACP,EACAM,qBAAqB,IAAIC,iBAAiB,GAAG,CAAC,iBAC7Cd,KAAA,CAAAiB,aAAA;IAAMC,SAAS,EAAEb,MAAM,CAACgB;EAAY,GAAC,GAClC,EAACP,iBAAiB,EAAC,GAChB,CAEL,CAAC,eAENd,KAAA,CAAAiB,aAAA;IAAKC,SAAS,EAAEb,MAAM,CAACiB;EAAQ,GAC5BX,eAAe,iBACdX,KAAA,CAAAiB,aAAA,CAAClB,MAAM;IACLmB,SAAS,EAAEb,MAAM,CAACkB,WAAY;IAC9BC,OAAO,EAAEZ,OAAQ;IACjBa,QAAQ,EAAEX,iBAAiB,KAAK,CAAC,IAAI,CAACC;EAAqB,gBAE3Df,KAAA,CAAAiB,aAAA,CAACb,SAAS,MAAE,CAAC,kBACP,CACT,EAnCoBM,iBAAiB,IAAI,IAAI,iBAsC5CV,KAAA,CAAAiB,aAAA,CAAClB,MAAM;IACLmB,SAAS,EAAEb,MAAM,CAACqB,cAAe;IACjCF,OAAO,EAAER,mBAAoB;IAC7B,iBAAe,CAACP,SAAU;IAC1B,cAAYA,SAAS,GAAG,gBAAgB,GAAG;EAAmB,gBAE9DT,KAAA,CAAAiB,aAAA,CAACd,YAAY,MAAE,CACT,CAEP,CACF,CAAC;AAEV;AAEA,OAAO,MAAMwB,gBAEZ,gBAAG1B,IAAI,CAACK,qBAAqB,CAAC","ignoreList":[]}

package/build/esm/filter-list/base/FilterListHeader.module.css

@@ -18,14 +18,18 @@
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding-bottom: var(--osdk-filter-header-padding-bottom);
+  padding: var(--osdk-filter-header-padding);
+  gap: var(--osdk-filter-header-gap);
   border-bottom: var(--osdk-filter-header-border-bottom);
+  flex-shrink: 0;
 }
 
 .titleContainer {
   display: flex;
   align-items: center;
   gap: var(--osdk-filter-header-titleContainer-gap);
+  flex: 1;
+  min-width: 0;
 }
 
 .title {
@@ -49,6 +53,16 @@
   font-variant-numeric: tabular-nums;
 }
 
+.actions {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-surface-spacing);
+
+  &:empty {
+    display: none;
+  }
+}
+
 .collapseButton {
   display: flex;
   align-items: center;
@@ -59,6 +73,7 @@
   cursor: pointer;
   border-radius: var(--osdk-filter-header-button-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
+  color: var(--osdk-filter-header-collapse-icon-color);
 
   &:hover {
     background: var(--osdk-filter-header-button-bg-hover);
@@ -78,33 +93,18 @@
   }
 }
 
-.collapseIcon {
-  display: block;
-  width: var(--osdk-filter-header-collapse-icon-size);
-  height: var(--osdk-filter-header-collapse-icon-size);
-  border-left: var(--osdk-filter-header-collapse-icon-border-width) solid var(--osdk-filter-header-collapse-icon-color);
-  border-bottom: var(--osdk-filter-header-collapse-icon-border-width) solid var(--osdk-filter-header-collapse-icon-color);
-  transform: rotate(-45deg);
-  transition: transform var(--osdk-filter-header-button-transition);
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-}
-
-.collapseIcon[data-collapsed="true"] {
-  transform: rotate(-135deg);
-}
-
 .resetButton {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--osdk-surface-spacing) * 0.5);
   font-family: var(--osdk-filter-header-font-family);
   font-size: var(--osdk-filter-header-reset-font-size);
   color: var(--osdk-filter-header-reset-color);
   background: var(--osdk-filter-header-button-bg);
-  border: none;
+  border: var(--osdk-filter-header-reset-border);
   cursor: pointer;
   padding: var(--osdk-filter-header-reset-padding);
-  border-radius: var(--osdk-filter-header-button-border-radius);
+  border-radius: var(--osdk-filter-header-reset-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
 
   &:hover:not(:disabled) {
@@ -113,6 +113,7 @@
 
   &:disabled {
     color: var(--osdk-filter-header-reset-color-disabled);
+    border: var(--osdk-filter-header-reset-border-disabled);
     cursor: not-allowed;
   }
 

package/build/esm/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.
  *
@@ -14,58 +15,154 @@
  * limitations under the License.
  */
 
+import { Button } from "@base-ui/react/button";
+import { Input } from "@base-ui/react/input";
 import classnames from "classnames";
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useState } from "react";
 import { ErrorBoundary } from "../../shared/ErrorBoundary.js";
-import { FilterInput } from "./FilterInput.js";
+import { supportsExcluding, supportsSearch } from "../utils/filterValues.js";
+import { DragHandleIcon } from "./DragHandleIcon.js";
+import { OverflowMenuIcon, RemoveIcon, SearchIcon } from "./FilterIcons.js";
 import styles from "./FilterListItem.module.css";
+function hasActiveSelection(filterState) {
+  if (filterState == null) {
+    return false;
+  }
+  switch (filterState.type) {
+    case "EXACT_MATCH":
+      return filterState.values.length > 0;
+    case "SELECT":
+      return filterState.selectedValues.length > 0;
+    case "CONTAINS_TEXT":
+      return filterState.value != null && filterState.value.length > 0;
+    case "NUMBER_RANGE":
+      return filterState.minValue != null || filterState.maxValue != null;
+    case "DATE_RANGE":
+      return filterState.minValue != null || filterState.maxValue != null;
+    case "TIMELINE":
+      return filterState.startDate != null || filterState.endDate != null;
+    case "TOGGLE":
+      return filterState.enabled;
+    case "keywordSearch":
+      return filterState.searchTerm.length > 0;
+    case "hasLink":
+      return filterState.hasLink;
+    case "linkedProperty":
+      return hasActiveSelection(filterState.linkedFilterState);
+    case "custom":
+      return true;
+    default:
+      return false;
+  }
+}
 function FilterListItemInner({
   definition,
   filterKey,
+  label,
   filterState,
   onFilterStateChanged,
-  whereClause,
+  onFilterRemoved,
+  renderInput,
+  dragHandleAttributes,
+  dragHandleListeners,
   className,
   style
 }) {
-  const label = getLabel(definition);
+  const [searchState, setSearchState] = useState({
+    type: "closed"
+  });
+  const [excludeRowOpen, setExcludeRowOpen] = useState(false);
   const handleFilterStateChanged = useCallback(newState => {
     onFilterStateChanged(filterKey, newState);
   }, [filterKey, onFilterStateChanged]);
+  const handleToggleSearch = useCallback(() => {
+    setSearchState(prev => prev.type === "closed" ? {
+      type: "open",
+      query: ""
+    } : {
+      type: "closed"
+    });
+  }, []);
+  const handleSearchChange = useCallback(e => {
+    setSearchState({
+      type: "open",
+      query: e.target.value
+    });
+  }, []);
+  const handleSearchClear = useCallback(() => {
+    setSearchState({
+      type: "open",
+      query: ""
+    });
+  }, []);
+  const handleRemove = useCallback(() => {
+    onFilterRemoved?.(filterKey);
+  }, [filterKey, onFilterRemoved]);
+  const handleToggleExcludeRow = useCallback(() => {
+    setExcludeRowOpen(prev => !prev);
+  }, []);
+  const searchInputRef = useCallback(element => {
+    element?.focus({
+      preventScroll: true
+    });
+  }, []);
+  const showExcludeDropdown = supportsExcluding(filterState);
+  const showSearch = supportsSearch(filterState);
+  const searchOpen = searchState.type === "open";
+  const searchQuery = searchState.type === "open" ? searchState.query : "";
+  const searchQueryForInput = searchState.type === "open" ? searchState.query : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.filterItem, className),
     style: style,
-    "data-filter-type": definition.type
+    "data-has-selection": hasActiveSelection(filterState) || undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.itemHeader
-  }, /*#__PURE__*/React.createElement("span", {
+  }, dragHandleAttributes && /*#__PURE__*/React.createElement(Button, _extends({
+    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", {
+  }, label), showSearch && /*#__PURE__*/React.createElement(Button, {
+    className: styles.headerActionButton,
+    onClick: handleToggleSearch,
+    "aria-label": "Search values",
+    "aria-pressed": searchOpen
+  }, /*#__PURE__*/React.createElement(SearchIcon, null)), onFilterRemoved && /*#__PURE__*/React.createElement(Button, {
+    className: styles.headerActionButton,
+    onClick: handleRemove,
+    "aria-label": `Remove ${label} filter`
+  }, /*#__PURE__*/React.createElement(RemoveIcon, null)), showExcludeDropdown && /*#__PURE__*/React.createElement(Button, {
+    className: styles.headerActionButton,
+    onClick: handleToggleExcludeRow,
+    "aria-label": "More actions",
+    "aria-pressed": excludeRowOpen
+  }, /*#__PURE__*/React.createElement(OverflowMenuIcon, null))), searchOpen && /*#__PURE__*/React.createElement("div", {
+    className: styles.searchRow
+  }, /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    className: styles.searchInput,
+    value: searchQuery,
+    onChange: handleSearchChange,
+    placeholder: "Search property values...",
+    "aria-label": "Search property values",
+    ref: searchInputRef
+  }), searchQuery && /*#__PURE__*/React.createElement(Button, {
+    type: "button",
+    className: styles.searchClearButton,
+    onClick: handleSearchClear,
+    "aria-label": "Clear search"
+  }, /*#__PURE__*/React.createElement(RemoveIcon, null))), /*#__PURE__*/React.createElement("div", {
     className: styles.itemContent
   }, /*#__PURE__*/React.createElement(ErrorBoundary, {
     errorMessage: "Error loading filter"
-  }, /*#__PURE__*/React.createElement(FilterInput, {
-    definition: definition,
-    filterState: filterState,
+  }, renderInput({
+    definition,
+    filterKey,
+    filterState,
     onFilterStateChanged: handleFilterStateChanged,
-    whereClause: whereClause
+    searchQuery: searchQueryForInput,
+    excludeRowOpen
   }))));
 }
 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