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

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

@@ -5,8 +5,8 @@ const styles = {
   "title": "FilterListHeader-module__title___xqfWfSzK",
   "titleIcon": "FilterListHeader-module__titleIcon___MQy-dec8",
   "activeCount": "FilterListHeader-module__activeCount___GyBsnsQL",
+  "actions": "FilterListHeader-module__actions___YZA7zmGc",
   "collapseButton": "FilterListHeader-module__collapseButton___N1-sj3B3",
-  "collapseIcon": "FilterListHeader-module__collapseIcon___P4YOgKig",
   "resetButton": "FilterListHeader-module__resetButton___jLcUypov"
 };
 

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.
  *
@@ -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.js";
+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

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","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 { 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  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  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            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;AAehD,SAASC,mBAAmBA,CAAiC;EAC3DC,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,GAAGd,WAAW,CACzCe,QAAqB,IAAK;IACzBP,oBAAoB,CAACF,SAAS,EAAES,QAAQ,CAAC;EAC3C,CAAC,EACD,CAACT,SAAS,EAAEE,oBAAoB,CAClC,CAAC;EAED,oBACEV,KAAA,CAAAkB,aAAA;IACEN,SAAS,EAAEb,UAAU,CAACM,MAAM,CAACc,UAAU,EAAEP,SAAS,CAAE;IACpDC,KAAK,EAAEA,KAAM;IACb,oBAAkBN,UAAU,CAACa;EAAK,gBAElCpB,KAAA,CAAAkB,aAAA;IAAKN,SAAS,EAAEP,MAAM,CAACgB;EAAW,gBAChCrB,KAAA,CAAAkB,aAAA;IAAMN,SAAS,EAAEP,MAAM,CAACiB;EAAU,GAAER,KAAY,CAC7C,CAAC,eAENd,KAAA,CAAAkB,aAAA;IAAKN,SAAS,EAAEP,MAAM,CAACkB;EAAY,gBACjCvB,KAAA,CAAAkB,aAAA,CAACf,aAAa;IAACqB,YAAY,EAAC;EAAsB,gBAChDxB,KAAA,CAAAkB,aAAA,CAACd,WAAW;IACVG,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,gBAAGxB,IAAI,CAChCK,mBACF,CAA+B;AAE/B,SAASS,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":["Button","Input","classnames","React","memo","useCallback","useState","ErrorBoundary","supportsExcluding","supportsSearch","DragHandleIcon","OverflowMenuIcon","RemoveIcon","SearchIcon","styles","hasActiveSelection","filterState","type","values","length","selectedValues","value","minValue","maxValue","startDate","endDate","enabled","searchTerm","hasLink","linkedFilterState","FilterListItemInner","definition","filterKey","label","onFilterStateChanged","onFilterRemoved","renderInput","dragHandleAttributes","dragHandleListeners","className","style","searchState","setSearchState","excludeRowOpen","setExcludeRowOpen","handleFilterStateChanged","newState","handleToggleSearch","prev","query","handleSearchChange","e","target","handleSearchClear","handleRemove","handleToggleExcludeRow","searchInputRef","element","focus","preventScroll","showExcludeDropdown","showSearch","searchOpen","searchQuery","searchQueryForInput","undefined","createElement","filterItem","itemHeader","_extends","dragHandle","itemLabel","headerActionButton","onClick","searchRow","searchInput","onChange","placeholder","ref","searchClearButton","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 { Button } from \"@base-ui/react/button\";\nimport { Input } from \"@base-ui/react/input\";\nimport type {\n  DraggableAttributes,\n  DraggableSyntheticListeners,\n} from \"@dnd-kit/core\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useState } from \"react\";\nimport { ErrorBoundary } from \"../../shared/ErrorBoundary.js\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { supportsExcluding, supportsSearch } from \"../utils/filterValues.js\";\nimport type { RenderFilterInput } from \"./BaseFilterListApi.js\";\nimport { DragHandleIcon } from \"./DragHandleIcon.js\";\nimport { OverflowMenuIcon, RemoveIcon, SearchIcon } from \"./FilterIcons.js\";\nimport styles from \"./FilterListItem.module.css\";\n\nfunction hasActiveSelection(filterState: FilterState | undefined): boolean {\n  if (filterState == null) {\n    return false;\n  }\n  switch (filterState.type) {\n    case \"EXACT_MATCH\":\n      return filterState.values.length > 0;\n    case \"SELECT\":\n      return filterState.selectedValues.length > 0;\n    case \"CONTAINS_TEXT\":\n      return filterState.value != null && filterState.value.length > 0;\n    case \"NUMBER_RANGE\":\n      return filterState.minValue != null || filterState.maxValue != null;\n    case \"DATE_RANGE\":\n      return filterState.minValue != null || filterState.maxValue != null;\n    case \"TIMELINE\":\n      return filterState.startDate != null || filterState.endDate != null;\n    case \"TOGGLE\":\n      return filterState.enabled;\n    case \"keywordSearch\":\n      return filterState.searchTerm.length > 0;\n    case \"hasLink\":\n      return filterState.hasLink;\n    case \"linkedProperty\":\n      return hasActiveSelection(filterState.linkedFilterState);\n    case \"custom\":\n      return true;\n    default:\n      return false;\n  }\n}\n\ninterface FilterListItemProps<D> {\n  definition: D;\n  filterKey: string;\n  label: string;\n  filterState: FilterState | undefined;\n  onFilterStateChanged: (\n    filterKey: string,\n    state: FilterState,\n  ) => void;\n  onFilterRemoved?: (filterKey: string) => void;\n  renderInput: RenderFilterInput<D>;\n  dragHandleAttributes?: DraggableAttributes;\n  dragHandleListeners?: DraggableSyntheticListeners;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction FilterListItemInner<D>({\n  definition,\n  filterKey,\n  label,\n  filterState,\n  onFilterStateChanged,\n  onFilterRemoved,\n  renderInput,\n  dragHandleAttributes,\n  dragHandleListeners,\n  className,\n  style,\n}: FilterListItemProps<D>): React.ReactElement {\n  const [searchState, setSearchState] = useState<\n    { type: \"closed\" } | { type: \"open\"; query: string }\n  >({ type: \"closed\" });\n  const [excludeRowOpen, setExcludeRowOpen] = useState(false);\n\n  const handleFilterStateChanged = useCallback(\n    (newState: FilterState) => {\n      onFilterStateChanged(filterKey, newState);\n    },\n    [filterKey, onFilterStateChanged],\n  );\n\n  const handleToggleSearch = useCallback(() => {\n    setSearchState((prev) =>\n      prev.type === \"closed\" ? { type: \"open\", query: \"\" } : { type: \"closed\" }\n    );\n  }, []);\n\n  const handleSearchChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      setSearchState({ type: \"open\", query: e.target.value });\n    },\n    [],\n  );\n\n  const handleSearchClear = useCallback(() => {\n    setSearchState({ type: \"open\", query: \"\" });\n  }, []);\n\n  const handleRemove = useCallback(() => {\n    onFilterRemoved?.(filterKey);\n  }, [filterKey, onFilterRemoved]);\n\n  const handleToggleExcludeRow = useCallback(() => {\n    setExcludeRowOpen((prev) => !prev);\n  }, []);\n\n  const searchInputRef = useCallback((element: HTMLInputElement | null) => {\n    element?.focus({ preventScroll: true });\n  }, []);\n\n  const showExcludeDropdown = supportsExcluding(filterState);\n  const showSearch = supportsSearch(filterState);\n  const hasOverflowActions = showExcludeDropdown;\n\n  const searchOpen = searchState.type === \"open\";\n  const searchQuery = searchState.type === \"open\" ? searchState.query : \"\";\n  const searchQueryForInput = searchState.type === \"open\"\n    ? searchState.query\n    : undefined;\n\n  return (\n    <div\n      className={classnames(styles.filterItem, className)}\n      style={style}\n      data-has-selection={hasActiveSelection(filterState) || undefined}\n    >\n      <div className={styles.itemHeader}>\n        {dragHandleAttributes && (\n          <Button\n            className={styles.dragHandle}\n            aria-label={`Reorder ${label}`}\n            {...dragHandleAttributes}\n            {...dragHandleListeners}\n          >\n            <DragHandleIcon />\n          </Button>\n        )}\n        <span\n          className={styles.itemLabel}\n        >\n          {label}\n        </span>\n        {showSearch && (\n          <Button\n            className={styles.headerActionButton}\n            onClick={handleToggleSearch}\n            aria-label=\"Search values\"\n            aria-pressed={searchOpen}\n          >\n            <SearchIcon />\n          </Button>\n        )}\n        {onFilterRemoved && (\n          <Button\n            className={styles.headerActionButton}\n            onClick={handleRemove}\n            aria-label={`Remove ${label} filter`}\n          >\n            <RemoveIcon />\n          </Button>\n        )}\n        {hasOverflowActions && (\n          <Button\n            className={styles.headerActionButton}\n            onClick={handleToggleExcludeRow}\n            aria-label=\"More actions\"\n            aria-pressed={excludeRowOpen}\n          >\n            <OverflowMenuIcon />\n          </Button>\n        )}\n      </div>\n\n      {searchOpen && (\n        <div className={styles.searchRow}>\n          <Input\n            type=\"text\"\n            className={styles.searchInput}\n            value={searchQuery}\n            onChange={handleSearchChange}\n            placeholder=\"Search property values...\"\n            aria-label=\"Search property values\"\n            ref={searchInputRef}\n          />\n          {searchQuery && (\n            <Button\n              type=\"button\"\n              className={styles.searchClearButton}\n              onClick={handleSearchClear}\n              aria-label=\"Clear search\"\n            >\n              <RemoveIcon />\n            </Button>\n          )}\n        </div>\n      )}\n\n      <div className={styles.itemContent}>\n        <ErrorBoundary errorMessage=\"Error loading filter\">\n          {renderInput({\n            definition,\n            filterKey,\n            filterState,\n            onFilterStateChanged: handleFilterStateChanged,\n            searchQuery: searchQueryForInput,\n            excludeRowOpen,\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;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,KAAK,QAAQ,sBAAsB;AAK5C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,EAAEC,QAAQ,QAAQ,OAAO;AAC1D,SAASC,aAAa,QAAQ,+BAA+B;AAE7D,SAASC,iBAAiB,EAAEC,cAAc,QAAQ,0BAA0B;AAE5E,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,gBAAgB,EAAEC,UAAU,EAAEC,UAAU,QAAQ,kBAAkB;AAC3E,OAAOC,MAAM,MAAM,6BAA6B;AAEhD,SAASC,kBAAkBA,CAACC,WAAoC,EAAW;EACzE,IAAIA,WAAW,IAAI,IAAI,EAAE;IACvB,OAAO,KAAK;EACd;EACA,QAAQA,WAAW,CAACC,IAAI;IACtB,KAAK,aAAa;MAChB,OAAOD,WAAW,CAACE,MAAM,CAACC,MAAM,GAAG,CAAC;IACtC,KAAK,QAAQ;MACX,OAAOH,WAAW,CAACI,cAAc,CAACD,MAAM,GAAG,CAAC;IAC9C,KAAK,eAAe;MAClB,OAAOH,WAAW,CAACK,KAAK,IAAI,IAAI,IAAIL,WAAW,CAACK,KAAK,CAACF,MAAM,GAAG,CAAC;IAClE,KAAK,cAAc;MACjB,OAAOH,WAAW,CAACM,QAAQ,IAAI,IAAI,IAAIN,WAAW,CAACO,QAAQ,IAAI,IAAI;IACrE,KAAK,YAAY;MACf,OAAOP,WAAW,CAACM,QAAQ,IAAI,IAAI,IAAIN,WAAW,CAACO,QAAQ,IAAI,IAAI;IACrE,KAAK,UAAU;MACb,OAAOP,WAAW,CAACQ,SAAS,IAAI,IAAI,IAAIR,WAAW,CAACS,OAAO,IAAI,IAAI;IACrE,KAAK,QAAQ;MACX,OAAOT,WAAW,CAACU,OAAO;IAC5B,KAAK,eAAe;MAClB,OAAOV,WAAW,CAACW,UAAU,CAACR,MAAM,GAAG,CAAC;IAC1C,KAAK,SAAS;MACZ,OAAOH,WAAW,CAACY,OAAO;IAC5B,KAAK,gBAAgB;MACnB,OAAOb,kBAAkB,CAACC,WAAW,CAACa,iBAAiB,CAAC;IAC1D,KAAK,QAAQ;MACX,OAAO,IAAI;IACb;MACE,OAAO,KAAK;EAChB;AACF;AAmBA,SAASC,mBAAmBA,CAAI;EAC9BC,UAAU;EACVC,SAAS;EACTC,KAAK;EACLjB,WAAW;EACXkB,oBAAoB;EACpBC,eAAe;EACfC,WAAW;EACXC,oBAAoB;EACpBC,mBAAmB;EACnBC,SAAS;EACTC;AACsB,CAAC,EAAsB;EAC7C,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGpC,QAAQ,CAE5C;IAAEW,IAAI,EAAE;EAAS,CAAC,CAAC;EACrB,MAAM,CAAC0B,cAAc,EAAEC,iBAAiB,CAAC,GAAGtC,QAAQ,CAAC,KAAK,CAAC;EAE3D,MAAMuC,wBAAwB,GAAGxC,WAAW,CACzCyC,QAAqB,IAAK;IACzBZ,oBAAoB,CAACF,SAAS,EAAEc,QAAQ,CAAC;EAC3C,CAAC,EACD,CAACd,SAAS,EAAEE,oBAAoB,CAClC,CAAC;EAED,MAAMa,kBAAkB,GAAG1C,WAAW,CAAC,MAAM;IAC3CqC,cAAc,CAAEM,IAAI,IAClBA,IAAI,CAAC/B,IAAI,KAAK,QAAQ,GAAG;MAAEA,IAAI,EAAE,MAAM;MAAEgC,KAAK,EAAE;IAAG,CAAC,GAAG;MAAEhC,IAAI,EAAE;IAAS,CAC1E,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMiC,kBAAkB,GAAG7C,WAAW,CACnC8C,CAAsC,IAAK;IAC1CT,cAAc,CAAC;MAAEzB,IAAI,EAAE,MAAM;MAAEgC,KAAK,EAAEE,CAAC,CAACC,MAAM,CAAC/B;IAAM,CAAC,CAAC;EACzD,CAAC,EACD,EACF,CAAC;EAED,MAAMgC,iBAAiB,GAAGhD,WAAW,CAAC,MAAM;IAC1CqC,cAAc,CAAC;MAAEzB,IAAI,EAAE,MAAM;MAAEgC,KAAK,EAAE;IAAG,CAAC,CAAC;EAC7C,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMK,YAAY,GAAGjD,WAAW,CAAC,MAAM;IACrC8B,eAAe,GAAGH,SAAS,CAAC;EAC9B,CAAC,EAAE,CAACA,SAAS,EAAEG,eAAe,CAAC,CAAC;EAEhC,MAAMoB,sBAAsB,GAAGlD,WAAW,CAAC,MAAM;IAC/CuC,iBAAiB,CAAEI,IAAI,IAAK,CAACA,IAAI,CAAC;EACpC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMQ,cAAc,GAAGnD,WAAW,CAAEoD,OAAgC,IAAK;IACvEA,OAAO,EAAEC,KAAK,CAAC;MAAEC,aAAa,EAAE;IAAK,CAAC,CAAC;EACzC,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMC,mBAAmB,GAAGpD,iBAAiB,CAACQ,WAAW,CAAC;EAC1D,MAAM6C,UAAU,GAAGpD,cAAc,CAACO,WAAW,CAAC;EAG9C,MAAM8C,UAAU,GAAGrB,WAAW,CAACxB,IAAI,KAAK,MAAM;EAC9C,MAAM8C,WAAW,GAAGtB,WAAW,CAACxB,IAAI,KAAK,MAAM,GAAGwB,WAAW,CAACQ,KAAK,GAAG,EAAE;EACxE,MAAMe,mBAAmB,GAAGvB,WAAW,CAACxB,IAAI,KAAK,MAAM,GACnDwB,WAAW,CAACQ,KAAK,GACjBgB,SAAS;EAEb,oBACE9D,KAAA,CAAA+D,aAAA;IACE3B,SAAS,EAAErC,UAAU,CAACY,MAAM,CAACqD,UAAU,EAAE5B,SAAS,CAAE;IACpDC,KAAK,EAAEA,KAAM;IACb,sBAAoBzB,kBAAkB,CAACC,WAAW,CAAC,IAAIiD;EAAU,gBAEjE9D,KAAA,CAAA+D,aAAA;IAAK3B,SAAS,EAAEzB,MAAM,CAACsD;EAAW,GAC/B/B,oBAAoB,iBACnBlC,KAAA,CAAA+D,aAAA,CAAClE,MAAM,EAAAqE,QAAA;IACL9B,SAAS,EAAEzB,MAAM,CAACwD,UAAW;IAC7B,cAAY,WAAWrC,KAAK;EAAG,GAC3BI,oBAAoB,EACpBC,mBAAmB,gBAEvBnC,KAAA,CAAA+D,aAAA,CAACxD,cAAc,MAAE,CACX,CACT,eACDP,KAAA,CAAA+D,aAAA;IACE3B,SAAS,EAAEzB,MAAM,CAACyD;EAAU,GAE3BtC,KACG,CAAC,EACN4B,UAAU,iBACT1D,KAAA,CAAA+D,aAAA,CAAClE,MAAM;IACLuC,SAAS,EAAEzB,MAAM,CAAC0D,kBAAmB;IACrCC,OAAO,EAAE1B,kBAAmB;IAC5B,cAAW,eAAe;IAC1B,gBAAce;EAAW,gBAEzB3D,KAAA,CAAA+D,aAAA,CAACrD,UAAU,MAAE,CACP,CACT,EACAsB,eAAe,iBACdhC,KAAA,CAAA+D,aAAA,CAAClE,MAAM;IACLuC,SAAS,EAAEzB,MAAM,CAAC0D,kBAAmB;IACrCC,OAAO,EAAEnB,YAAa;IACtB,cAAY,UAAUrB,KAAK;EAAU,gBAErC9B,KAAA,CAAA+D,aAAA,CAACtD,UAAU,MAAE,CACP,CACT,EAhDoBgD,mBAAmB,iBAkDtCzD,KAAA,CAAA+D,aAAA,CAAClE,MAAM;IACLuC,SAAS,EAAEzB,MAAM,CAAC0D,kBAAmB;IACrCC,OAAO,EAAElB,sBAAuB;IAChC,cAAW,cAAc;IACzB,gBAAcZ;EAAe,gBAE7BxC,KAAA,CAAA+D,aAAA,CAACvD,gBAAgB,MAAE,CACb,CAEP,CAAC,EAELmD,UAAU,iBACT3D,KAAA,CAAA+D,aAAA;IAAK3B,SAAS,EAAEzB,MAAM,CAAC4D;EAAU,gBAC/BvE,KAAA,CAAA+D,aAAA,CAACjE,KAAK;IACJgB,IAAI,EAAC,MAAM;IACXsB,SAAS,EAAEzB,MAAM,CAAC6D,WAAY;IAC9BtD,KAAK,EAAE0C,WAAY;IACnBa,QAAQ,EAAE1B,kBAAmB;IAC7B2B,WAAW,EAAC,2BAA2B;IACvC,cAAW,wBAAwB;IACnCC,GAAG,EAAEtB;EAAe,CACrB,CAAC,EACDO,WAAW,iBACV5D,KAAA,CAAA+D,aAAA,CAAClE,MAAM;IACLiB,IAAI,EAAC,QAAQ;IACbsB,SAAS,EAAEzB,MAAM,CAACiE,iBAAkB;IACpCN,OAAO,EAAEpB,iBAAkB;IAC3B,cAAW;EAAc,gBAEzBlD,KAAA,CAAA+D,aAAA,CAACtD,UAAU,MAAE,CACP,CAEP,CACN,eAEDT,KAAA,CAAA+D,aAAA;IAAK3B,SAAS,EAAEzB,MAAM,CAACkE;EAAY,gBACjC7E,KAAA,CAAA+D,aAAA,CAAC3D,aAAa;IAAC0E,YAAY,EAAC;EAAsB,GAC/C7C,WAAW,CAAC;IACXL,UAAU;IACVC,SAAS;IACThB,WAAW;IACXkB,oBAAoB,EAAEW,wBAAwB;IAC9CkB,WAAW,EAAEC,mBAAmB;IAChCrB;EACF,CAAC,CACY,CACZ,CACF,CAAC;AAEV;AAEA,OAAO,MAAMuC,cAAc,gBAAG9E,IAAI,CAChC0B,mBACF,CAA+B","ignoreList":[]}

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

@@ -18,6 +18,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--osdk-filter-item-gap);
+  border-radius: var(--osdk-filter-item-border-radius);
+  padding: var(--osdk-filter-item-padding);
 }
 
 .itemHeader {
@@ -26,6 +28,7 @@
 }
 
 .itemLabel {
+  flex: 1;
   font-family: var(--osdk-filter-item-label-font-family);
   font-size: var(--osdk-filter-item-label-font-size);
   font-weight: var(--osdk-filter-item-label-font-weight);
@@ -35,4 +38,174 @@
 .itemContent {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.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: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-item-drag-handle-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+}
+
+.headerActionButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-header-action-padding);
+  margin-left: calc(var(--osdk-surface-spacing) * 0.5);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-filter-item-header-action-border-radius);
+  color: var(--osdk-filter-item-header-action-color);
+  opacity: 0;
+  transition: opacity var(--osdk-filter-header-button-transition),
+    background-color var(--osdk-filter-header-button-transition);
+
+  &:hover {
+    color: var(--osdk-typography-color-default-rest);
+    background: var(--osdk-filter-item-header-action-bg-hover);
+  }
+
+  &:focus-visible {
+    opacity: 1;
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.filterItem:hover .headerActionButton {
+  opacity: 1;
+}
+
+.headerActionButton[data-popup-open],
+.headerActionButton[aria-pressed="true"] {
+  opacity: 1;
+}
+
+.searchRow {
+  display: flex;
+  align-items: center;
+  background: var(--osdk-filter-input-bg);
+  border: var(--osdk-filter-input-border);
+  border-radius: var(--osdk-filter-input-border-radius);
+  padding: var(--osdk-filter-input-padding);
+  gap: var(--osdk-filter-input-gap);
+}
+
+.searchInput {
+  flex: 1;
+  border: none;
+  background: transparent;
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-input-font-size);
+  color: var(--osdk-filter-input-color);
+  outline: none;
+
+  &::placeholder {
+    color: var(--osdk-filter-input-placeholder-color);
+  }
+}
+
+.searchClearButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-input-clear-padding);
+  border: none;
+  background: var(--osdk-filter-input-clear-bg);
+  color: var(--osdk-filter-input-icon-color);
+  cursor: pointer;
+  border-radius: var(--osdk-filter-input-clear-border-radius);
+  transition: background-color var(--osdk-filter-input-transition);
+
+  &:hover {
+    background: var(--osdk-filter-input-clear-bg-hover);
+  }
+
+  &:active {
+    background: var(--osdk-filter-input-clear-bg-active);
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.excludeRow {
+  display: flex;
+  align-items: center;
+  opacity: 0;
+  height: 0;
+  overflow: hidden;
+  transition: opacity var(--osdk-filter-header-button-transition),
+    height var(--osdk-filter-header-button-transition);
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+}
+
+.excludeRowVisible {
+  opacity: 1;
+  height: auto;
+  overflow: visible;
+}
+
+.excludeCountLabel {
+  font-family: var(--osdk-filter-item-exclude-dropdown-font-family);
+  font-size: var(--osdk-filter-item-exclude-dropdown-font-size);
+  color: var(--osdk-filter-item-exclude-dropdown-color);
+  margin-left: calc(var(--osdk-surface-spacing) * 0.5);
+}
+
+.clearAllButton {
+  margin-left: auto;
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-family: var(--osdk-filter-item-exclude-dropdown-font-family);
+  font-size: var(--osdk-filter-item-exclude-dropdown-font-size);
+  color: var(--osdk-filter-item-exclude-dropdown-color);
+  padding: 0;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.dragging {
+  opacity: var(--osdk-filter-item-dragging-opacity);
 }

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

@@ -3,7 +3,17 @@ 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",
+  "headerActionButton": "FilterListItem-module__headerActionButton___x10Z2Kx0",
+  "searchRow": "FilterListItem-module__searchRow___4fUrAgAm",
+  "searchInput": "FilterListItem-module__searchInput___v-qwznpk",
+  "searchClearButton": "FilterListItem-module__searchClearButton___HXHweIEa",
+  "excludeRow": "FilterListItem-module__excludeRow___6hctgE28",
+  "excludeRowVisible": "FilterListItem-module__excludeRowVisible___whT6lGyR",
+  "excludeCountLabel": "FilterListItem-module__excludeCountLabel___7IQFUJIY",
+  "clearAllButton": "FilterListItem-module__clearAllButton___rIGM4EMy",
+  "dragging": "FilterListItem-module__dragging___S5-LGyfS"
 };
 
 export default styles;

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

@@ -0,0 +1,64 @@
+/*
+ * 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, { memo, useMemo } from "react";
+import { FilterListItem } from "./FilterListItem.js";
+import styles from "./FilterListItem.module.css.js";
+function SortableFilterListItemInner({
+  id,
+  definition,
+  filterKey,
+  label,
+  filterState,
+  onFilterStateChanged,
+  onFilterRemoved,
+  renderInput
+}) {
+  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, {
+    definition: definition,
+    filterKey: filterKey,
+    label: label,
+    filterState: filterState,
+    onFilterStateChanged: onFilterStateChanged,
+    onFilterRemoved: onFilterRemoved,
+    renderInput: renderInput,
+    dragHandleAttributes: attributes,
+    dragHandleListeners: listeners
+  }));
+}
+export const SortableFilterListItem = /*#__PURE__*/memo(SortableFilterListItemInner);
+//# sourceMappingURL=SortableFilterListItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortableFilterListItem.js","names":["useSortable","CSS","classnames","React","memo","useMemo","FilterListItem","styles","SortableFilterListItemInner","id","definition","filterKey","label","filterState","onFilterStateChanged","onFilterRemoved","renderInput","attributes","listeners","setNodeRef","transform","transition","isDragging","style","Transform","toString","undefined","createElement","ref","className","dragging","dragHandleAttributes","dragHandleListeners","SortableFilterListItem"],"sources":["SortableFilterListItem.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 { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport classnames from \"classnames\";\nimport React, { memo, useMemo } from \"react\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport type { RenderFilterInput } from \"./BaseFilterListApi.js\";\nimport { FilterListItem } from \"./FilterListItem.js\";\nimport styles from \"./FilterListItem.module.css\";\n\ninterface SortableFilterListItemProps<D> {\n  id: string;\n  definition: D;\n  filterKey: string;\n  label: string;\n  filterState: FilterState | undefined;\n  onFilterStateChanged: (\n    filterKey: string,\n    state: FilterState,\n  ) => void;\n  onFilterRemoved?: (filterKey: string) => void;\n  renderInput: RenderFilterInput<D>;\n}\n\nfunction SortableFilterListItemInner<D>({\n  id,\n  definition,\n  filterKey,\n  label,\n  filterState,\n  onFilterStateChanged,\n  onFilterRemoved,\n  renderInput,\n}: SortableFilterListItemProps<D>): React.ReactElement {\n  const {\n    attributes,\n    listeners,\n    setNodeRef,\n    transform,\n    transition,\n    isDragging,\n  } = useSortable({ id });\n\n  const style = useMemo<React.CSSProperties>(() => ({\n    transform: CSS.Transform.toString(transform),\n    transition: transition ?? undefined,\n  }), [transform, transition]);\n\n  return (\n    <div\n      ref={setNodeRef}\n      style={style}\n      className={classnames(isDragging && styles.dragging)}\n    >\n      <FilterListItem\n        definition={definition}\n        filterKey={filterKey}\n        label={label}\n        filterState={filterState}\n        onFilterStateChanged={onFilterStateChanged}\n        onFilterRemoved={onFilterRemoved}\n        renderInput={renderInput}\n        dragHandleAttributes={attributes}\n        dragHandleListeners={listeners}\n      />\n    </div>\n  );\n}\n\nexport const SortableFilterListItem = memo(\n  SortableFilterListItemInner,\n) as typeof SortableFilterListItemInner;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAG5C,SAASC,cAAc,QAAQ,qBAAqB;AACpD,OAAOC,MAAM,MAAM,6BAA6B;AAgBhD,SAASC,2BAA2BA,CAAI;EACtCC,EAAE;EACFC,UAAU;EACVC,SAAS;EACTC,KAAK;EACLC,WAAW;EACXC,oBAAoB;EACpBC,eAAe;EACfC;AAC8B,CAAC,EAAsB;EACrD,MAAM;IACJC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC;EACF,CAAC,GAAGtB,WAAW,CAAC;IAAES;EAAG,CAAC,CAAC;EAEvB,MAAMc,KAAK,GAAGlB,OAAO,CAAsB,OAAO;IAChDe,SAAS,EAAEnB,GAAG,CAACuB,SAAS,CAACC,QAAQ,CAACL,SAAS,CAAC;IAC5CC,UAAU,EAAEA,UAAU,IAAIK;EAC5B,CAAC,CAAC,EAAE,CAACN,SAAS,EAAEC,UAAU,CAAC,CAAC;EAE5B,oBACElB,KAAA,CAAAwB,aAAA;IACEC,GAAG,EAAET,UAAW;IAChBI,KAAK,EAAEA,KAAM;IACbM,SAAS,EAAE3B,UAAU,CAACoB,UAAU,IAAIf,MAAM,CAACuB,QAAQ;EAAE,gBAErD3B,KAAA,CAAAwB,aAAA,CAACrB,cAAc;IACbI,UAAU,EAAEA,UAAW;IACvBC,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA,WAAY;IACzBC,oBAAoB,EAAEA,oBAAqB;IAC3CC,eAAe,EAAEA,eAAgB;IACjCC,WAAW,EAAEA,WAAY;IACzBe,oBAAoB,EAAEd,UAAW;IACjCe,mBAAmB,EAAEd;EAAU,CAChC,CACE,CAAC;AAEV;AAEA,OAAO,MAAMe,sBAAsB,gBAAG7B,IAAI,CACxCI,2BACF,CAAuC","ignoreList":[]}

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

@@ -14,8 +14,7 @@
  * limitations under the License.
  */
 
-export { FilterInput } from "./FilterInput.js";
-export { FilterList } from "./FilterList.js";
+export { BaseFilterList } from "./BaseFilterList.js";
 export { FilterListContent } from "./FilterListContent.js";
 export { FilterListHeader } from "./FilterListHeader.js";
 export { FilterListItem } from "./FilterListItem.js";