@osdk/react-components 0.2.0-beta.28 → 0.2.0-beta.29

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

@@ -14,16 +14,24 @@
  * limitations under the License.
  */
 
+import { Button } from "@base-ui/react/button";
 import classnames from "classnames";
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
 import { supportsExcluding } from "../utils/filterValues.js";
 import { ExcludeDropdown } from "./ExcludeDropdown.js";
 import styles from "./FilterListItem.module.css.js";
+function getSelectedCount(filterState) {
+  if (!filterState) return 0;
+  if (filterState.type === "EXACT_MATCH") return filterState.values.length;
+  if (filterState.type === "SELECT") return filterState.selectedValues.length;
+  return 0;
+}
 function FilterInputExcludeRowInner({
   excludeRowOpen,
   filterState,
   onFilterStateChanged,
   totalValueCount,
+  onClearAll,
   children
 }) {
   const handleToggleExclude = useCallback(() => {
@@ -35,6 +43,7 @@ function FilterInputExcludeRowInner({
     }
   }, [filterState, onFilterStateChanged]);
   const isExcluding = filterState?.isExcluding ?? false;
+  const selectedCount = useMemo(() => getSelectedCount(filterState), [filterState]);
   if (!supportsExcluding(filterState)) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, children);
   }
@@ -49,7 +58,10 @@ function FilterInputExcludeRowInner({
   }), totalValueCount != null && totalValueCount > 0 && /*#__PURE__*/React.createElement("span", {
     className: styles.excludeCountLabel,
     title: "Approximate count of unique values"
-  }, totalValueCount.toLocaleString(), " values")), children);
+  }, selectedCount.toLocaleString(), " of", " ", totalValueCount.toLocaleString(), " values"), onClearAll && selectedCount > 0 && /*#__PURE__*/React.createElement(Button, {
+    className: styles.clearAllButton,
+    onClick: onClearAll
+  }, "Clear all")), children);
 }
 export const FilterInputExcludeRow = /*#__PURE__*/memo(FilterInputExcludeRowInner);
 //# sourceMappingURL=FilterInputExcludeRow.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"FilterInputExcludeRow.js","names":["classnames","React","memo","useCallback","supportsExcluding","ExcludeDropdown","styles","FilterInputExcludeRowInner","excludeRowOpen","filterState","onFilterStateChanged","totalValueCount","children","handleToggleExclude","isExcluding","createElement","Fragment","className","excludeRow","excludeRowVisible","onToggleExclude","excludeCountLabel","title","toLocaleString","FilterInputExcludeRow"],"sources":["FilterInputExcludeRow.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { supportsExcluding } from \"../utils/filterValues.js\";\nimport { ExcludeDropdown } from \"./ExcludeDropdown.js\";\nimport styles from \"./FilterListItem.module.css\";\n\ninterface FilterInputExcludeRowProps {\n  excludeRowOpen?: boolean;\n  filterState: FilterState | undefined;\n  onFilterStateChanged: (state: FilterState) => void;\n  totalValueCount?: number;\n  children: React.ReactNode;\n}\n\nfunction FilterInputExcludeRowInner({\n  excludeRowOpen,\n  filterState,\n  onFilterStateChanged,\n  totalValueCount,\n  children,\n}: FilterInputExcludeRowProps): React.ReactElement {\n  const handleToggleExclude = useCallback(() => {\n    if (filterState) {\n      onFilterStateChanged({\n        ...filterState,\n        isExcluding: !filterState.isExcluding,\n      });\n    }\n  }, [filterState, onFilterStateChanged]);\n\n  const isExcluding = filterState?.isExcluding ?? false;\n  const isOpen = excludeRowOpen ?? false;\n\n  if (!supportsExcluding(filterState)) {\n    return <>{children}</>;\n  }\n\n  return (\n    <>\n      <div\n        data-exclude-row\n        className={classnames(styles.excludeRow, {\n          [styles.excludeRowVisible]: isOpen,\n        })}\n      >\n        <ExcludeDropdown\n          isExcluding={isExcluding}\n          onToggleExclude={handleToggleExclude}\n        />\n        {totalValueCount != null && totalValueCount > 0 && (\n          <span\n            className={styles.excludeCountLabel}\n            title=\"Approximate count of unique values\"\n          >\n            {totalValueCount.toLocaleString()} values\n          </span>\n        )}\n      </div>\n      {children}\n    </>\n  );\n}\n\nexport const FilterInputExcludeRow: React.MemoExoticComponent<\n  typeof FilterInputExcludeRowInner\n> = memo(FilterInputExcludeRowInner);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAEhD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,eAAe,QAAQ,sBAAsB;AACtD,OAAOC,MAAM,MAAM,6BAA6B;AAUhD,SAASC,0BAA0BA,CAAC;EAClCC,cAAc;EACdC,WAAW;EACXC,oBAAoB;EACpBC,eAAe;EACfC;AAC0B,CAAC,EAAsB;EACjD,MAAMC,mBAAmB,GAAGV,WAAW,CAAC,MAAM;IAC5C,IAAIM,WAAW,EAAE;MACfC,oBAAoB,CAAC;QACnB,GAAGD,WAAW;QACdK,WAAW,EAAE,CAACL,WAAW,CAACK;MAC5B,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACL,WAAW,EAAEC,oBAAoB,CAAC,CAAC;EAEvC,MAAMI,WAAW,GAAGL,WAAW,EAAEK,WAAW,IAAI,KAAK;EAGrD,IAAI,CAACV,iBAAiB,CAACK,WAAW,CAAC,EAAE;IACnC,oBAAOR,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,QAAGJ,QAAW,CAAC;EACxB;EAEA,oBACEX,KAAA,CAAAc,aAAA,CAAAd,KAAA,CAAAe,QAAA,qBACEf,KAAA,CAAAc,aAAA;IACE,wBAAgB;IAChBE,SAAS,EAAEjB,UAAU,CAACM,MAAM,CAACY,UAAU,EAAE;MACvC,CAACZ,MAAM,CAACa,iBAAiB,GAXlBX,cAAc,IAAI;IAY3B,CAAC;EAAE,gBAEHP,KAAA,CAAAc,aAAA,CAACV,eAAe;IACdS,WAAW,EAAEA,WAAY;IACzBM,eAAe,EAAEP;EAAoB,CACtC,CAAC,EACDF,eAAe,IAAI,IAAI,IAAIA,eAAe,GAAG,CAAC,iBAC7CV,KAAA,CAAAc,aAAA;IACEE,SAAS,EAAEX,MAAM,CAACe,iBAAkB;IACpCC,KAAK,EAAC;EAAoC,GAEzCX,eAAe,CAACY,cAAc,CAAC,CAAC,EAAC,SAC9B,CAEL,CAAC,EACLX,QACD,CAAC;AAEP;AAEA,OAAO,MAAMY,qBAEZ,gBAAGtB,IAAI,CAACK,0BAA0B,CAAC","ignoreList":[]}
+{"version":3,"file":"FilterInputExcludeRow.js","names":["Button","classnames","React","memo","useCallback","useMemo","supportsExcluding","ExcludeDropdown","styles","getSelectedCount","filterState","type","values","length","selectedValues","FilterInputExcludeRowInner","excludeRowOpen","onFilterStateChanged","totalValueCount","onClearAll","children","handleToggleExclude","isExcluding","selectedCount","createElement","Fragment","className","excludeRow","excludeRowVisible","onToggleExclude","excludeCountLabel","title","toLocaleString","clearAllButton","onClick","FilterInputExcludeRow"],"sources":["FilterInputExcludeRow.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 classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo } from \"react\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { supportsExcluding } from \"../utils/filterValues.js\";\nimport { ExcludeDropdown } from \"./ExcludeDropdown.js\";\nimport styles from \"./FilterListItem.module.css\";\n\nfunction getSelectedCount(filterState: FilterState | undefined): number {\n  if (!filterState) return 0;\n  if (filterState.type === \"EXACT_MATCH\") return filterState.values.length;\n  if (filterState.type === \"SELECT\") return filterState.selectedValues.length;\n  return 0;\n}\n\ninterface FilterInputExcludeRowProps {\n  excludeRowOpen?: boolean;\n  filterState: FilterState | undefined;\n  onFilterStateChanged: (state: FilterState) => void;\n  totalValueCount?: number;\n  onClearAll?: () => void;\n  children: React.ReactNode;\n}\n\nfunction FilterInputExcludeRowInner({\n  excludeRowOpen,\n  filterState,\n  onFilterStateChanged,\n  totalValueCount,\n  onClearAll,\n  children,\n}: FilterInputExcludeRowProps): React.ReactElement {\n  const handleToggleExclude = useCallback(() => {\n    if (filterState) {\n      onFilterStateChanged({\n        ...filterState,\n        isExcluding: !filterState.isExcluding,\n      });\n    }\n  }, [filterState, onFilterStateChanged]);\n\n  const isExcluding = filterState?.isExcluding ?? false;\n  const isOpen = excludeRowOpen ?? false;\n  const selectedCount = useMemo(\n    () => getSelectedCount(filterState),\n    [filterState],\n  );\n\n  if (!supportsExcluding(filterState)) {\n    return <>{children}</>;\n  }\n\n  return (\n    <>\n      <div\n        data-exclude-row={true}\n        className={classnames(styles.excludeRow, {\n          [styles.excludeRowVisible]: isOpen,\n        })}\n      >\n        <ExcludeDropdown\n          isExcluding={isExcluding}\n          onToggleExclude={handleToggleExclude}\n        />\n        {totalValueCount != null && totalValueCount > 0 && (\n          <span\n            className={styles.excludeCountLabel}\n            title=\"Approximate count of unique values\"\n          >\n            {selectedCount.toLocaleString()} of{\" \"}\n            {totalValueCount.toLocaleString()} values\n          </span>\n        )}\n        {onClearAll && selectedCount > 0 && (\n          <Button\n            className={styles.clearAllButton}\n            onClick={onClearAll}\n          >\n            Clear all\n          </Button>\n        )}\n      </div>\n      {children}\n    </>\n  );\n}\n\nexport const FilterInputExcludeRow: React.MemoExoticComponent<\n  typeof FilterInputExcludeRowInner\n> = memo(FilterInputExcludeRowInner);\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAEzD,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,eAAe,QAAQ,sBAAsB;AACtD,OAAOC,MAAM,MAAM,6BAA6B;AAEhD,SAASC,gBAAgBA,CAACC,WAAoC,EAAU;EACtE,IAAI,CAACA,WAAW,EAAE,OAAO,CAAC;EAC1B,IAAIA,WAAW,CAACC,IAAI,KAAK,aAAa,EAAE,OAAOD,WAAW,CAACE,MAAM,CAACC,MAAM;EACxE,IAAIH,WAAW,CAACC,IAAI,KAAK,QAAQ,EAAE,OAAOD,WAAW,CAACI,cAAc,CAACD,MAAM;EAC3E,OAAO,CAAC;AACV;AAWA,SAASE,0BAA0BA,CAAC;EAClCC,cAAc;EACdN,WAAW;EACXO,oBAAoB;EACpBC,eAAe;EACfC,UAAU;EACVC;AAC0B,CAAC,EAAsB;EACjD,MAAMC,mBAAmB,GAAGjB,WAAW,CAAC,MAAM;IAC5C,IAAIM,WAAW,EAAE;MACfO,oBAAoB,CAAC;QACnB,GAAGP,WAAW;QACdY,WAAW,EAAE,CAACZ,WAAW,CAACY;MAC5B,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACZ,WAAW,EAAEO,oBAAoB,CAAC,CAAC;EAEvC,MAAMK,WAAW,GAAGZ,WAAW,EAAEY,WAAW,IAAI,KAAK;EAErD,MAAMC,aAAa,GAAGlB,OAAO,CAC3B,MAAMI,gBAAgB,CAACC,WAAW,CAAC,EACnC,CAACA,WAAW,CACd,CAAC;EAED,IAAI,CAACJ,iBAAiB,CAACI,WAAW,CAAC,EAAE;IACnC,oBAAOR,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,QAAGL,QAAW,CAAC;EACxB;EAEA,oBACElB,KAAA,CAAAsB,aAAA,CAAAtB,KAAA,CAAAuB,QAAA,qBACEvB,KAAA,CAAAsB,aAAA;IACE,oBAAkB,IAAK;IACvBE,SAAS,EAAEzB,UAAU,CAACO,MAAM,CAACmB,UAAU,EAAE;MACvC,CAACnB,MAAM,CAACoB,iBAAiB,GAflBZ,cAAc,IAAI;IAgB3B,CAAC;EAAE,gBAEHd,KAAA,CAAAsB,aAAA,CAACjB,eAAe;IACde,WAAW,EAAEA,WAAY;IACzBO,eAAe,EAAER;EAAoB,CACtC,CAAC,EACDH,eAAe,IAAI,IAAI,IAAIA,eAAe,GAAG,CAAC,iBAC7ChB,KAAA,CAAAsB,aAAA;IACEE,SAAS,EAAElB,MAAM,CAACsB,iBAAkB;IACpCC,KAAK,EAAC;EAAoC,GAEzCR,aAAa,CAACS,cAAc,CAAC,CAAC,EAAC,KAAG,EAAC,GAAG,EACtCd,eAAe,CAACc,cAAc,CAAC,CAAC,EAAC,SAC9B,CACP,EACAb,UAAU,IAAII,aAAa,GAAG,CAAC,iBAC9BrB,KAAA,CAAAsB,aAAA,CAACxB,MAAM;IACL0B,SAAS,EAAElB,MAAM,CAACyB,cAAe;IACjCC,OAAO,EAAEf;EAAW,GACrB,WAEO,CAEP,CAAC,EACLC,QACD,CAAC;AAEP;AAEA,OAAO,MAAMe,qBAEZ,gBAAGhC,IAAI,CAACY,0BAA0B,CAAC","ignoreList":[]}

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

@@ -37,14 +37,23 @@
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow-y: auto;
+  overflow: hidden;
   background: var(--osdk-filter-list-bg);
   border: var(--osdk-filter-list-border);
   border-radius: var(--osdk-filter-list-border-radius);
+  box-shadow: var(--osdk-filter-list-shadow);
   padding: var(--osdk-filter-list-padding);
   gap: var(--osdk-filter-list-gap);
 }
 
+.scrollableContent {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  overflow-y: auto;
+  min-height: 0;
+}
+
 .hiddenContent {
   display: none;
 }
@@ -92,7 +101,10 @@
 .addButtonContainer {
   display: flex;
   justify-content: center;
-  padding-top: var(--osdk-filter-list-addButton-padding-top);
+  padding: var(--osdk-filter-list-addButton-container-padding);
+  background: var(--osdk-filter-list-addButton-container-bg);
+  border-top: var(--osdk-filter-list-addButton-container-border-top);
+  flex-shrink: 0;
 }
 
 .addButtonContainer > * {
@@ -100,13 +112,17 @@
 }
 
 .addButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   font-family: var(--osdk-filter-header-font-family);
   font-size: var(--osdk-filter-header-reset-font-size);
-  color: var(--osdk-filter-header-reset-color);
+  color: var(--osdk-typography-color-default-rest);
   background: var(--osdk-filter-header-button-bg);
-  border: none;
+  border: var(--osdk-filter-list-addButton-border);
   cursor: pointer;
   padding: var(--osdk-filter-header-reset-padding);
+  min-height: var(--osdk-filter-list-addButton-height);
   border-radius: var(--osdk-filter-header-button-border-radius);
   transition: background-color var(--osdk-filter-header-button-transition);
 

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

@@ -3,6 +3,7 @@ const styles = {
   "filterList": "FilterList-module__filterList___wmzCNbkH",
   "filterListCollapsed": "FilterList-module__filterListCollapsed___CGrK9txF",
   "expandedContent": "FilterList-module__expandedContent___aEk2i2At",
+  "scrollableContent": "FilterList-module__scrollableContent___F3O1nfAo",
   "hiddenContent": "FilterList-module__hiddenContent___PHKe-yWc",
   "expandButton": "FilterList-module__expandButton___-QlY8-ot",
   "collapsedLabel": "FilterList-module__collapsedLabel___QA0UtRts",

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

@@ -48,7 +48,7 @@ function FilterListHeaderInner({
     className: styles.resetButton,
     onClick: onReset,
     disabled: activeFilterCount === 0 && !hasVisibilityChanges
-  }, /*#__PURE__*/React.createElement(ResetIcon, null), " Reset"), onCollapsedChange != null && /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(ResetIcon, null), " Reset filters"), onCollapsedChange != null && /*#__PURE__*/React.createElement(Button, {
     className: styles.collapseButton,
     onClick: handleCollapseClick,
     "aria-expanded": !collapsed,

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

@@ -1 +1 @@
-{"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\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,UACP,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":[]}
+{"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 {
@@ -97,10 +101,10 @@
   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) {
@@ -109,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/FilterListItem.module.css

@@ -20,15 +20,6 @@
   gap: var(--osdk-filter-item-gap);
   border-radius: var(--osdk-filter-item-border-radius);
   padding: var(--osdk-filter-item-padding);
-  border: 1px solid transparent;
-}
-
-.filterItem[data-has-selection] {
-  border-color: var(--osdk-intent-primary-rest);
-}
-
-.filterItem[data-has-selection] .searchRow {
-  border-color: transparent;
 }
 
 .itemHeader {
@@ -200,6 +191,21 @@
   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

@@ -1,17 +1,18 @@
 // CSS Module proxy for FilterListItem.module.css
 const styles = {
   "filterItem": "FilterListItem-module__filterItem___fDBkbb7u",
-  "searchRow": "FilterListItem-module__searchRow___4fUrAgAm",
   "itemHeader": "FilterListItem-module__itemHeader___jp4epXg-",
   "itemLabel": "FilterListItem-module__itemLabel___cEnbqE59",
   "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"
 };
 

package/build/browser/filter-list/base/inputs/ListogramInput.js

@@ -110,7 +110,7 @@ function ListogramInputInner({
     })));
   }), hasMore && !isExpanded && /*#__PURE__*/React.createElement(Button, {
     type: "button",
-    className: styles.row,
+    className: styles.viewAllButton,
     onClick: () => setIsExpanded(true)
   }, "View all (", sortedValues.length, ")")));
 }

package/build/browser/filter-list/base/inputs/ListogramInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListogramInput.js","names":["Button","classnames","React","memo","useCallback","useMemo","useState","Checkbox","filterValuesBySearch","styles","ListogramSkeleton","sharedStyles","useStableData","ListogramInputInner","values","maxCount","isLoading","error","selectedValues","onChange","colorMap","displayMode","isExcluding","className","style","maxVisibleItems","searchQuery","isExpanded","setIsExpanded","stableValues","selectedSet","Set","toggleValue","value","has","filter","v","filteredValues","sortedValues","selected","unselected","displayValues","slice","hasMore","length","createElement","listogram","errorMessage","message","emptyMessage","container","map","count","percentage","perRowColor","key","row","onClick","undefined","checkbox","e","stopPropagation","checked","onCheckedChange","label","toLocaleString","bar","barFill","type","ListogramInput"],"sources":["ListogramInput.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 classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\nimport { Checkbox } from \"../../../base-components/checkbox/Checkbox.js\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport { filterValuesBySearch } from \"../../utils/filterValues.js\";\nimport styles from \"./ListogramInput.module.css\";\nimport { ListogramSkeleton } from \"./ListogramSkeleton.js\";\nimport sharedStyles from \"./shared.module.css\";\nimport { useStableData } from \"./useStableData.js\";\n\nexport type ListogramDisplayMode = \"full\" | \"count\" | \"minimal\";\n\ninterface ListogramInputProps {\n  values: PropertyAggregationValue[];\n  maxCount: number;\n  isLoading: boolean;\n  error: Error | null;\n  selectedValues: string[];\n  onChange: (values: string[]) => void;\n  colorMap?: Record<string, string>;\n  displayMode?: ListogramDisplayMode;\n  isExcluding?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  maxVisibleItems?: number;\n  searchQuery?: string;\n}\n\nfunction ListogramInputInner({\n  values,\n  maxCount,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  colorMap,\n  displayMode = \"full\",\n  isExcluding,\n  className,\n  style,\n  maxVisibleItems,\n  searchQuery,\n}: ListogramInputProps): React.ReactElement {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const stableValues = useStableData(values, isLoading);\n\n  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);\n\n  const toggleValue = useCallback(\n    (value: string) => {\n      if (selectedSet.has(value)) {\n        onChange(selectedValues.filter((v) => v !== value));\n      } else {\n        onChange([...selectedValues, value]);\n      }\n    },\n    [selectedValues, selectedSet, onChange],\n  );\n\n  const filteredValues = useMemo(() => {\n    if (searchQuery) {\n      return filterValuesBySearch(stableValues, searchQuery, (v) => v.value);\n    }\n    return stableValues;\n  }, [stableValues, searchQuery]);\n\n  const sortedValues = useMemo(() => {\n    const selected = filteredValues.filter(v => selectedSet.has(v.value));\n    const unselected = filteredValues.filter(v => !selectedSet.has(v.value));\n    return [...selected, ...unselected];\n  }, [filteredValues, selectedSet]);\n\n  const displayValues = useMemo(() => {\n    if (isExpanded || !maxVisibleItems) return sortedValues;\n    return sortedValues.slice(0, maxVisibleItems);\n  }, [sortedValues, maxVisibleItems, isExpanded]);\n\n  const hasMore = maxVisibleItems != null\n    && sortedValues.length > maxVisibleItems;\n\n  return (\n    <div\n      className={classnames(styles.listogram, className)}\n      style={style}\n      data-loading={isLoading && filteredValues.length > 0}\n    >\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading values: {error.message}\n        </div>\n      )}\n\n      {!error && filteredValues.length === 0 && isLoading && (\n        <ListogramSkeleton />\n      )}\n      {!error && filteredValues.length === 0 && !isLoading && (\n        <div className={sharedStyles.emptyMessage}>\n          No values available\n        </div>\n      )}\n\n      {filteredValues.length > 0 && (\n        <div className={styles.container}>\n          {displayValues.map(({ value, count }) => {\n            const percentage = maxCount > 0 ? (count / maxCount) * 100 : 0;\n            const perRowColor = colorMap?.[value];\n\n            return (\n              <Button\n                key={value}\n                className={styles.row}\n                onClick={() => toggleValue(value)}\n                aria-pressed={selectedSet.has(value)}\n                style={perRowColor || percentage > 0\n                  ? {\n                    \"--osdk-filter-listogram-bar-fill-scale\": percentage / 100,\n                    ...(perRowColor\n                      ? {\n                        \"--osdk-filter-listogram-row-bar-color\": perRowColor,\n                      }\n                      : undefined),\n                  } as React.CSSProperties\n                  : undefined}\n              >\n                <span\n                  className={styles.checkbox}\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  <Checkbox\n                    checked={selectedSet.has(value)}\n                    onCheckedChange={() => toggleValue(value)}\n                    isExcluding={isExcluding}\n                  />\n                </span>\n                <span\n                  className={styles.label}\n                  data-excluding={(isExcluding && selectedSet.has(value))\n                    || undefined}\n                >\n                  {value}\n                </span>\n                {displayMode !== \"minimal\" && (\n                  <span className={styles.count}>\n                    {count.toLocaleString()}\n                  </span>\n                )}\n                {displayMode === \"full\" && (\n                  <span className={styles.bar}>\n                    <span className={styles.barFill} />\n                  </span>\n                )}\n              </Button>\n            );\n          })}\n\n          {hasMore && !isExpanded && (\n            <Button\n              type=\"button\"\n              className={styles.row}\n              onClick={() => setIsExpanded(true)}\n            >\n              View all ({sortedValues.length})\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ListogramInput = memo(\n  ListogramInputInner,\n) as typeof ListogramInputInner;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListogramInput.js","names":["Button","classnames","React","memo","useCallback","useMemo","useState","Checkbox","filterValuesBySearch","styles","ListogramSkeleton","sharedStyles","useStableData","ListogramInputInner","values","maxCount","isLoading","error","selectedValues","onChange","colorMap","displayMode","isExcluding","className","style","maxVisibleItems","searchQuery","isExpanded","setIsExpanded","stableValues","selectedSet","Set","toggleValue","value","has","filter","v","filteredValues","sortedValues","selected","unselected","displayValues","slice","hasMore","length","createElement","listogram","errorMessage","message","emptyMessage","container","map","count","percentage","perRowColor","key","row","onClick","undefined","checkbox","e","stopPropagation","checked","onCheckedChange","label","toLocaleString","bar","barFill","type","viewAllButton","ListogramInput"],"sources":["ListogramInput.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 classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\nimport { Checkbox } from \"../../../base-components/checkbox/Checkbox.js\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport { filterValuesBySearch } from \"../../utils/filterValues.js\";\nimport styles from \"./ListogramInput.module.css\";\nimport { ListogramSkeleton } from \"./ListogramSkeleton.js\";\nimport sharedStyles from \"./shared.module.css\";\nimport { useStableData } from \"./useStableData.js\";\n\nexport type ListogramDisplayMode = \"full\" | \"count\" | \"minimal\";\n\ninterface ListogramInputProps {\n  values: PropertyAggregationValue[];\n  maxCount: number;\n  isLoading: boolean;\n  error: Error | null;\n  selectedValues: string[];\n  onChange: (values: string[]) => void;\n  colorMap?: Record<string, string>;\n  displayMode?: ListogramDisplayMode;\n  isExcluding?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  maxVisibleItems?: number;\n  searchQuery?: string;\n}\n\nfunction ListogramInputInner({\n  values,\n  maxCount,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  colorMap,\n  displayMode = \"full\",\n  isExcluding,\n  className,\n  style,\n  maxVisibleItems,\n  searchQuery,\n}: ListogramInputProps): React.ReactElement {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const stableValues = useStableData(values, isLoading);\n\n  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);\n\n  const toggleValue = useCallback(\n    (value: string) => {\n      if (selectedSet.has(value)) {\n        onChange(selectedValues.filter((v) => v !== value));\n      } else {\n        onChange([...selectedValues, value]);\n      }\n    },\n    [selectedValues, selectedSet, onChange],\n  );\n\n  const filteredValues = useMemo(() => {\n    if (searchQuery) {\n      return filterValuesBySearch(stableValues, searchQuery, (v) => v.value);\n    }\n    return stableValues;\n  }, [stableValues, searchQuery]);\n\n  const sortedValues = useMemo(() => {\n    const selected = filteredValues.filter(v => selectedSet.has(v.value));\n    const unselected = filteredValues.filter(v => !selectedSet.has(v.value));\n    return [...selected, ...unselected];\n  }, [filteredValues, selectedSet]);\n\n  const displayValues = useMemo(() => {\n    if (isExpanded || !maxVisibleItems) return sortedValues;\n    return sortedValues.slice(0, maxVisibleItems);\n  }, [sortedValues, maxVisibleItems, isExpanded]);\n\n  const hasMore = maxVisibleItems != null\n    && sortedValues.length > maxVisibleItems;\n\n  return (\n    <div\n      className={classnames(styles.listogram, className)}\n      style={style}\n      data-loading={isLoading && filteredValues.length > 0}\n    >\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading values: {error.message}\n        </div>\n      )}\n\n      {!error && filteredValues.length === 0 && isLoading && (\n        <ListogramSkeleton />\n      )}\n      {!error && filteredValues.length === 0 && !isLoading && (\n        <div className={sharedStyles.emptyMessage}>\n          No values available\n        </div>\n      )}\n\n      {filteredValues.length > 0 && (\n        <div className={styles.container}>\n          {displayValues.map(({ value, count }) => {\n            const percentage = maxCount > 0 ? (count / maxCount) * 100 : 0;\n            const perRowColor = colorMap?.[value];\n\n            return (\n              <Button\n                key={value}\n                className={styles.row}\n                onClick={() => toggleValue(value)}\n                aria-pressed={selectedSet.has(value)}\n                style={perRowColor || percentage > 0\n                  ? {\n                    \"--osdk-filter-listogram-bar-fill-scale\": percentage / 100,\n                    ...(perRowColor\n                      ? {\n                        \"--osdk-filter-listogram-row-bar-color\": perRowColor,\n                      }\n                      : undefined),\n                  } as React.CSSProperties\n                  : undefined}\n              >\n                <span\n                  className={styles.checkbox}\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  <Checkbox\n                    checked={selectedSet.has(value)}\n                    onCheckedChange={() => toggleValue(value)}\n                    isExcluding={isExcluding}\n                  />\n                </span>\n                <span\n                  className={styles.label}\n                  data-excluding={(isExcluding && selectedSet.has(value))\n                    || undefined}\n                >\n                  {value}\n                </span>\n                {displayMode !== \"minimal\" && (\n                  <span className={styles.count}>\n                    {count.toLocaleString()}\n                  </span>\n                )}\n                {displayMode === \"full\" && (\n                  <span className={styles.bar}>\n                    <span className={styles.barFill} />\n                  </span>\n                )}\n              </Button>\n            );\n          })}\n\n          {hasMore && !isExpanded && (\n            <Button\n              type=\"button\"\n              className={styles.viewAllButton}\n              onClick={() => setIsExpanded(true)}\n            >\n              View all ({sortedValues.length})\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ListogramInput = memo(\n  ListogramInputInner,\n) as typeof ListogramInputInner;\n"],"mappings":"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","ignoreList":[]}

package/build/browser/filter-list/base/inputs/ListogramInput.module.css

@@ -91,6 +91,7 @@
   height: 100%;
   width: 100%;
   background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-bar-color));
+  border-radius: var(--osdk-filter-listogram-bar-border-radius);
   transform-origin: left;
   transform: scaleX(var(--osdk-filter-listogram-bar-fill-scale, 0));
   transition: transform var(--osdk-filter-listogram-bar-fill-transition);
@@ -100,6 +101,28 @@
   background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-selected-color));
 }
 
+.viewAllButton {
+  display: flex;
+  align-items: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--osdk-filter-listogram-label-font-family);
+  font-size: var(--osdk-filter-listogram-view-all-font-size);
+  color: var(--osdk-filter-listogram-view-all-color);
+  padding: var(--osdk-filter-listogram-row-padding);
+  text-align: left;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-filter-listogram-row-focus-outline);
+    outline-offset: var(--osdk-filter-listogram-row-focus-offset);
+  }
+}
+
 .checkbox {
   display: flex;
 }

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

@@ -6,6 +6,7 @@ const styles = {
   "label": "ListogramInput-module__label___hQ3nLEpx",
   "bar": "ListogramInput-module__bar___iUqTfYSm",
   "barFill": "ListogramInput-module__barFill___za7KWtcm",
+  "viewAllButton": "ListogramInput-module__viewAllButton___CxQzJRxu",
   "checkbox": "ListogramInput-module__checkbox___M-faPyIy",
   "count": "ListogramInput-module__count___81M2s4eq"
 };

package/build/browser/filter-list/base/inputs/MultiSelectInput.js

@@ -14,9 +14,8 @@
  * limitations under the License.
  */
 
-import { Button } from "@base-ui/react/button";
 import classnames from "classnames";
-import React, { memo, useCallback } from "react";
+import React, { memo, useCallback, useMemo } from "react";
 import { Combobox } from "../../../base-components/combobox/Combobox.js";
 import styles from "./MultiSelectInput.module.css.js";
 import sharedStyles from "./shared.module.css.js";
@@ -29,21 +28,33 @@ function MultiSelectInputInner({
   className,
   style,
   placeholder = "Select values...",
-  maxDisplayedTags = 3,
-  showClearAll = true,
   ariaLabel = "Search values"
 }) {
   const handleValueChange = useCallback(newValues => {
     onChange(newValues ?? []);
   }, [onChange]);
-  const removeValue = useCallback(value => {
-    onChange(selectedValues.filter(v => v !== value));
-  }, [selectedValues, onChange]);
-  const clearAll = useCallback(() => {
-    onChange([]);
-  }, [onChange]);
-  const displayedTags = selectedValues.slice(0, maxDisplayedTags);
-  const remainingCount = selectedValues.length - maxDisplayedTags;
+  const items = useMemo(() => values.map(({
+    value
+  }) => value), [values]);
+  const countByValue = useMemo(() => new Map(values.map(({
+    value,
+    count
+  }) => [value, count])), [values]);
+  const renderItem = useCallback(value => /*#__PURE__*/React.createElement(Combobox.Item, {
+    key: value,
+    value: value
+  }, /*#__PURE__*/React.createElement(Combobox.ItemIndicator, null), /*#__PURE__*/React.createElement("span", {
+    className: styles.itemLabel
+  }, value), /*#__PURE__*/React.createElement("span", {
+    className: styles.itemCount
+  }, "(", (countByValue.get(value) ?? 0).toLocaleString(), ")")), [countByValue]);
+  const renderChips = useCallback(selectedItems => /*#__PURE__*/React.createElement(React.Fragment, null, selectedItems.map(value => /*#__PURE__*/React.createElement(Combobox.Chip, {
+    key: value,
+    "aria-label": value
+  }, value, /*#__PURE__*/React.createElement(Combobox.ChipRemove, null))), /*#__PURE__*/React.createElement(Combobox.Input, {
+    placeholder: selectedItems.length > 0 ? "" : placeholder,
+    "aria-label": ariaLabel
+  })), [placeholder, ariaLabel]);
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.multiSelect, className),
     style: style,
@@ -55,39 +66,11 @@ function MultiSelectInputInner({
   }, isLoading ? "Loading options..." : "No options available"), (values.length > 0 || isLoading) && /*#__PURE__*/React.createElement(Combobox.Root, {
     multiple: true,
     value: selectedValues,
-    onValueChange: handleValueChange
+    onValueChange: handleValueChange,
+    items: items
   }, isLoading && /*#__PURE__*/React.createElement("div", {
     className: sharedStyles.loadingMessage
-  }, "Updating..."), selectedValues.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: sharedStyles.tagContainer
-  }, displayedTags.map(value => /*#__PURE__*/React.createElement("span", {
-    key: value,
-    className: sharedStyles.tag
-  }, value, /*#__PURE__*/React.createElement(Button, {
-    type: "button",
-    className: sharedStyles.tagRemove,
-    onClick: () => removeValue(value),
-    "aria-label": `Remove ${value}`
-  }, "\xD7"))), remainingCount > 0 && /*#__PURE__*/React.createElement("span", {
-    className: sharedStyles.tag
-  }, "+", remainingCount, " more")), /*#__PURE__*/React.createElement("div", {
-    className: styles.inputRow
-  }, /*#__PURE__*/React.createElement(Combobox.SearchInput, {
-    placeholder: selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder,
-    "aria-label": ariaLabel
-  }), showClearAll && selectedValues.length > 0 && /*#__PURE__*/React.createElement(Combobox.Clear, {
-    className: styles.clearButton,
-    onClick: clearAll,
-    "aria-label": "Clear all selections"
-  })), /*#__PURE__*/React.createElement(Combobox.Portal, null, /*#__PURE__*/React.createElement(Combobox.Positioner, null, /*#__PURE__*/React.createElement(Combobox.Popup, null, values.length === 0 ? /*#__PURE__*/React.createElement(Combobox.Empty, null, "No options available") : values.map(({
-    value,
-    count
-  }) => /*#__PURE__*/React.createElement(Combobox.Item, {
-    key: value,
-    value: value
-  }, /*#__PURE__*/React.createElement("span", null, value), /*#__PURE__*/React.createElement("span", {
-    className: styles.itemCount
-  }, "(", count.toLocaleString(), ")"))))))));
+  }, "Updating..."), /*#__PURE__*/React.createElement(Combobox.Chips, null, /*#__PURE__*/React.createElement(Combobox.Value, null, renderChips)), /*#__PURE__*/React.createElement(Combobox.Portal, null, /*#__PURE__*/React.createElement(Combobox.Positioner, null, /*#__PURE__*/React.createElement(Combobox.Popup, null, /*#__PURE__*/React.createElement(Combobox.Empty, null, "No matching options"), /*#__PURE__*/React.createElement(Combobox.List, null, renderItem))))));
 }
 export const MultiSelectInput = /*#__PURE__*/memo(MultiSelectInputInner);
 //# sourceMappingURL=MultiSelectInput.js.map

package/build/browser/filter-list/base/inputs/MultiSelectInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.js","names":["Button","classnames","React","memo","useCallback","Combobox","styles","sharedStyles","MultiSelectInputInner","values","isLoading","error","selectedValues","onChange","className","style","placeholder","maxDisplayedTags","showClearAll","ariaLabel","handleValueChange","newValues","removeValue","value","filter","v","clearAll","displayedTags","slice","remainingCount","length","createElement","multiSelect","errorMessage","message","emptyMessage","Root","multiple","onValueChange","loadingMessage","tagContainer","map","key","tag","type","tagRemove","onClick","inputRow","SearchInput","Clear","clearButton","Portal","Positioner","Popup","Empty","count","Item","itemCount","toLocaleString","MultiSelectInput"],"sources":["MultiSelectInput.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 classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport { Combobox } from \"../../../base-components/combobox/Combobox.js\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport styles from \"./MultiSelectInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\ninterface MultiSelectInputProps {\n  values: PropertyAggregationValue[];\n  isLoading: boolean;\n  error: Error | null;\n  selectedValues: string[];\n  onChange: (values: string[]) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  placeholder?: string;\n  maxDisplayedTags?: number;\n  showClearAll?: boolean;\n  ariaLabel?: string;\n}\n\nfunction MultiSelectInputInner({\n  values,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  className,\n  style,\n  placeholder = \"Select values...\",\n  maxDisplayedTags = 3,\n  showClearAll = true,\n  ariaLabel = \"Search values\",\n}: MultiSelectInputProps): React.ReactElement {\n  const handleValueChange = useCallback(\n    (newValues: string[] | null) => {\n      onChange(newValues ?? []);\n    },\n    [onChange],\n  );\n\n  const removeValue = useCallback(\n    (value: string) => {\n      onChange(selectedValues.filter((v) => v !== value));\n    },\n    [selectedValues, onChange],\n  );\n\n  const clearAll = useCallback(() => {\n    onChange([]);\n  }, [onChange]);\n\n  const displayedTags = selectedValues.slice(0, maxDisplayedTags);\n  const remainingCount = selectedValues.length - maxDisplayedTags;\n\n  return (\n    <div\n      className={classnames(styles.multiSelect, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading options: {error.message}\n        </div>\n      )}\n\n      {!error && values.length === 0 && (\n        <div className={sharedStyles.emptyMessage}>\n          {isLoading ? \"Loading options...\" : \"No options available\"}\n        </div>\n      )}\n\n      {(values.length > 0 || isLoading) && (\n        <Combobox.Root<string, true>\n          multiple\n          value={selectedValues}\n          onValueChange={handleValueChange}\n        >\n          {isLoading && (\n            <div className={sharedStyles.loadingMessage}>\n              Updating...\n            </div>\n          )}\n\n          {selectedValues.length > 0 && (\n            <div className={sharedStyles.tagContainer}>\n              {displayedTags.map((value) => (\n                <span key={value} className={sharedStyles.tag}>\n                  {value}\n                  <Button\n                    type=\"button\"\n                    className={sharedStyles.tagRemove}\n                    onClick={() =>\n                      removeValue(value)}\n                    aria-label={`Remove ${value}`}\n                  >\n                    ×\n                  </Button>\n                </span>\n              ))}\n              {remainingCount > 0 && (\n                <span className={sharedStyles.tag}>\n                  +{remainingCount} more\n                </span>\n              )}\n            </div>\n          )}\n\n          <div className={styles.inputRow}>\n            <Combobox.SearchInput\n              placeholder={selectedValues.length > 0\n                ? `${selectedValues.length} selected`\n                : placeholder}\n              aria-label={ariaLabel}\n            />\n            {showClearAll && selectedValues.length > 0 && (\n              <Combobox.Clear\n                className={styles.clearButton}\n                onClick={clearAll}\n                aria-label=\"Clear all selections\"\n              />\n            )}\n          </div>\n\n          <Combobox.Portal>\n            <Combobox.Positioner>\n              <Combobox.Popup>\n                {values.length === 0\n                  ? <Combobox.Empty>No options available</Combobox.Empty>\n                  : values.map(({ value, count }) => (\n                    <Combobox.Item key={value} value={value}>\n                      <span>{value}</span>\n                      <span className={styles.itemCount}>\n                        ({count.toLocaleString()})\n                      </span>\n                    </Combobox.Item>\n                  ))}\n              </Combobox.Popup>\n            </Combobox.Positioner>\n          </Combobox.Portal>\n        </Combobox.Root>\n      )}\n    </div>\n  );\n}\n\nexport const MultiSelectInput = memo(\n  MultiSelectInputInner,\n) as typeof MultiSelectInputInner;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAChD,SAASC,QAAQ,QAAQ,+CAA+C;AAExE,OAAOC,MAAM,MAAM,+BAA+B;AAClD,OAAOC,YAAY,MAAM,qBAAqB;AAgB9C,SAASC,qBAAqBA,CAAC;EAC7BC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,cAAc;EACdC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,WAAW,GAAG,kBAAkB;EAChCC,gBAAgB,GAAG,CAAC;EACpBC,YAAY,GAAG,IAAI;EACnBC,SAAS,GAAG;AACS,CAAC,EAAsB;EAC5C,MAAMC,iBAAiB,GAAGhB,WAAW,CAClCiB,SAA0B,IAAK;IAC9BR,QAAQ,CAACQ,SAAS,IAAI,EAAE,CAAC;EAC3B,CAAC,EACD,CAACR,QAAQ,CACX,CAAC;EAED,MAAMS,WAAW,GAAGlB,WAAW,CAC5BmB,KAAa,IAAK;IACjBV,QAAQ,CAACD,cAAc,CAACY,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKF,KAAK,CAAC,CAAC;EACrD,CAAC,EACD,CAACX,cAAc,EAAEC,QAAQ,CAC3B,CAAC;EAED,MAAMa,QAAQ,GAAGtB,WAAW,CAAC,MAAM;IACjCS,QAAQ,CAAC,EAAE,CAAC;EACd,CAAC,EAAE,CAACA,QAAQ,CAAC,CAAC;EAEd,MAAMc,aAAa,GAAGf,cAAc,CAACgB,KAAK,CAAC,CAAC,EAAEX,gBAAgB,CAAC;EAC/D,MAAMY,cAAc,GAAGjB,cAAc,CAACkB,MAAM,GAAGb,gBAAgB;EAE/D,oBACEf,KAAA,CAAA6B,aAAA;IACEjB,SAAS,EAAEb,UAAU,CAACK,MAAM,CAAC0B,WAAW,EAAElB,SAAS,CAAE;IACrDC,KAAK,EAAEA,KAAM;IACb,gBAAcL;EAAU,GAEvBC,KAAK,iBACJT,KAAA,CAAA6B,aAAA;IAAKjB,SAAS,EAAEP,YAAY,CAAC0B;EAAa,GAAC,yBAClB,EAACtB,KAAK,CAACuB,OAC3B,CACN,EAEA,CAACvB,KAAK,IAAIF,MAAM,CAACqB,MAAM,KAAK,CAAC,iBAC5B5B,KAAA,CAAA6B,aAAA;IAAKjB,SAAS,EAAEP,YAAY,CAAC4B;EAAa,GACvCzB,SAAS,GAAG,oBAAoB,GAAG,sBACjC,CACN,EAEA,CAACD,MAAM,CAACqB,MAAM,GAAG,CAAC,IAAIpB,SAAS,kBAC9BR,KAAA,CAAA6B,aAAA,CAAC1B,QAAQ,CAAC+B,IAAI;IACZC,QAAQ;IACRd,KAAK,EAAEX,cAAe;IACtB0B,aAAa,EAAElB;EAAkB,GAEhCV,SAAS,iBACRR,KAAA,CAAA6B,aAAA;IAAKjB,SAAS,EAAEP,YAAY,CAACgC;EAAe,GAAC,aAExC,CACN,EAEA3B,cAAc,CAACkB,MAAM,GAAG,CAAC,iBACxB5B,KAAA,CAAA6B,aAAA;IAAKjB,SAAS,EAAEP,YAAY,CAACiC;EAAa,GACvCb,aAAa,CAACc,GAAG,CAAElB,KAAK,iBACvBrB,KAAA,CAAA6B,aAAA;IAAMW,GAAG,EAAEnB,KAAM;IAACT,SAAS,EAAEP,YAAY,CAACoC;EAAI,GAC3CpB,KAAK,eACNrB,KAAA,CAAA6B,aAAA,CAAC/B,MAAM;IACL4C,IAAI,EAAC,QAAQ;IACb9B,SAAS,EAAEP,YAAY,CAACsC,SAAU;IAClCC,OAAO,EAAEA,CAAA,KACPxB,WAAW,CAACC,KAAK,CAAE;IACrB,cAAY,UAAUA,KAAK;EAAG,GAC/B,MAEO,CACJ,CACP,CAAC,EACDM,cAAc,GAAG,CAAC,iBACjB3B,KAAA,CAAA6B,aAAA;IAAMjB,SAAS,EAAEP,YAAY,CAACoC;EAAI,GAAC,GAChC,EAACd,cAAc,EAAC,OACb,CAEL,CACN,eAED3B,KAAA,CAAA6B,aAAA;IAAKjB,SAAS,EAAER,MAAM,CAACyC;EAAS,gBAC9B7C,KAAA,CAAA6B,aAAA,CAAC1B,QAAQ,CAAC2C,WAAW;IACnBhC,WAAW,EAAEJ,cAAc,CAACkB,MAAM,GAAG,CAAC,GAClC,GAAGlB,cAAc,CAACkB,MAAM,WAAW,GACnCd,WAAY;IAChB,cAAYG;EAAU,CACvB,CAAC,EACDD,YAAY,IAAIN,cAAc,CAACkB,MAAM,GAAG,CAAC,iBACxC5B,KAAA,CAAA6B,aAAA,CAAC1B,QAAQ,CAAC4C,KAAK;IACbnC,SAAS,EAAER,MAAM,CAAC4C,WAAY;IAC9BJ,OAAO,EAAEpB,QAAS;IAClB,cAAW;EAAsB,CAClC,CAEA,CAAC,eAENxB,KAAA,CAAA6B,aAAA,CAAC1B,QAAQ,CAAC8C,MAAM,qBACdjD,KAAA,CAAA6B,aAAA,CAAC1B,QAAQ,CAAC+C,UAAU,qBAClBlD,KAAA,CAAA6B,aAAA,CAAC1B,QAAQ,CAACgD,KAAK,QACZ5C,MAAM,CAACqB,MAAM,KAAK,CAAC,gBAChB5B,KAAA,CAAA6B,aAAA,CAAC1B,QAAQ,CAACiD,KAAK,QAAC,sBAAoC,CAAC,GACrD7C,MAAM,CAACgC,GAAG,CAAC,CAAC;IAAElB,KAAK;IAAEgC;EAAM,CAAC,kBAC5BrD,KAAA,CAAA6B,aAAA,CAAC1B,QAAQ,CAACmD,IAAI;IAACd,GAAG,EAAEnB,KAAM;IAACA,KAAK,EAAEA;EAAM,gBACtCrB,KAAA,CAAA6B,aAAA,eAAOR,KAAY,CAAC,eACpBrB,KAAA,CAAA6B,aAAA;IAAMjB,SAAS,EAAER,MAAM,CAACmD;EAAU,GAAC,GAChC,EAACF,KAAK,CAACG,cAAc,CAAC,CAAC,EAAC,GACrB,CACO,CAChB,CACW,CACG,CACN,CACJ,CAEd,CAAC;AAEV;AAEA,OAAO,MAAMC,gBAAgB,gBAAGxD,IAAI,CAClCK,qBACF,CAAiC","ignoreList":[]}
+{"version":3,"file":"MultiSelectInput.js","names":["classnames","React","memo","useCallback","useMemo","Combobox","styles","sharedStyles","MultiSelectInputInner","values","isLoading","error","selectedValues","onChange","className","style","placeholder","ariaLabel","handleValueChange","newValues","items","map","value","countByValue","Map","count","renderItem","createElement","Item","key","ItemIndicator","itemLabel","itemCount","get","toLocaleString","renderChips","selectedItems","Fragment","Chip","ChipRemove","Input","length","multiSelect","errorMessage","message","emptyMessage","Root","multiple","onValueChange","loadingMessage","Chips","Value","Portal","Positioner","Popup","Empty","List","MultiSelectInput"],"sources":["MultiSelectInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo } from \"react\";\nimport { Combobox } from \"../../../base-components/combobox/Combobox.js\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport styles from \"./MultiSelectInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\ninterface MultiSelectInputProps {\n  values: PropertyAggregationValue[];\n  isLoading: boolean;\n  error: Error | null;\n  selectedValues: string[];\n  onChange: (values: string[]) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  placeholder?: string;\n  ariaLabel?: string;\n}\n\nfunction MultiSelectInputInner({\n  values,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  className,\n  style,\n  placeholder = \"Select values...\",\n  ariaLabel = \"Search values\",\n}: MultiSelectInputProps): React.ReactElement {\n  const handleValueChange = useCallback(\n    (newValues: string[] | null) => {\n      onChange(newValues ?? []);\n    },\n    [onChange],\n  );\n\n  const items = useMemo(\n    () => values.map(({ value }) => value),\n    [values],\n  );\n\n  const countByValue = useMemo(\n    () => new Map(values.map(({ value, count }) => [value, count])),\n    [values],\n  );\n\n  const renderItem = useCallback(\n    (value: string) => (\n      <Combobox.Item key={value} value={value}>\n        <Combobox.ItemIndicator />\n        <span className={styles.itemLabel}>{value}</span>\n        <span className={styles.itemCount}>\n          ({(countByValue.get(value) ?? 0).toLocaleString()})\n        </span>\n      </Combobox.Item>\n    ),\n    [countByValue],\n  );\n\n  const renderChips = useCallback(\n    (selectedItems: string[]) => (\n      <>\n        {selectedItems.map((value) => (\n          <Combobox.Chip\n            key={value}\n            aria-label={value}\n          >\n            {value}\n            <Combobox.ChipRemove />\n          </Combobox.Chip>\n        ))}\n        <Combobox.Input\n          placeholder={selectedItems.length > 0 ? \"\" : placeholder}\n          aria-label={ariaLabel}\n        />\n      </>\n    ),\n    [placeholder, ariaLabel],\n  );\n\n  return (\n    <div\n      className={classnames(styles.multiSelect, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading options: {error.message}\n        </div>\n      )}\n\n      {!error && values.length === 0 && (\n        <div className={sharedStyles.emptyMessage}>\n          {isLoading ? \"Loading options...\" : \"No options available\"}\n        </div>\n      )}\n\n      {(values.length > 0 || isLoading) && (\n        <Combobox.Root<string, true>\n          multiple={true}\n          value={selectedValues}\n          onValueChange={handleValueChange}\n          items={items}\n        >\n          {isLoading && (\n            <div className={sharedStyles.loadingMessage}>\n              Updating...\n            </div>\n          )}\n\n          <Combobox.Chips>\n            <Combobox.Value>{renderChips}</Combobox.Value>\n          </Combobox.Chips>\n\n          <Combobox.Portal>\n            <Combobox.Positioner>\n              <Combobox.Popup>\n                <Combobox.Empty>No matching options</Combobox.Empty>\n                <Combobox.List>{renderItem}</Combobox.List>\n              </Combobox.Popup>\n            </Combobox.Positioner>\n          </Combobox.Portal>\n        </Combobox.Root>\n      )}\n    </div>\n  );\n}\n\nexport const MultiSelectInput = memo(\n  MultiSelectInputInner,\n) as typeof MultiSelectInputInner;\n"],"mappings":"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","ignoreList":[]}

package/build/browser/filter-list/base/inputs/MultiSelectInput.module.css

@@ -20,14 +20,12 @@
   gap: var(--osdk-filter-multiselect-gap);
 }
 
-.inputRow {
-  display: flex;
-  align-items: center;
-  gap: var(--osdk-filter-multiselect-inputRow-gap);
-}
-
-.clearButton {
-  flex-shrink: 0;
+.itemLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .itemCount {
@@ -35,4 +33,5 @@
   font-size: var(--osdk-filter-multiselect-count-font-size);
   font-variant-numeric: tabular-nums;
   color: var(--osdk-filter-multiselect-count-color);
+  flex-shrink: 0;
 }

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

@@ -1,8 +1,7 @@
 // CSS Module proxy for MultiSelectInput.module.css
 const styles = {
   "multiSelect": "MultiSelectInput-module__multiSelect___QW1VndMR",
-  "inputRow": "MultiSelectInput-module__inputRow___rWRIzWSC",
-  "clearButton": "MultiSelectInput-module__clearButton___tSH63Y1q",
+  "itemLabel": "MultiSelectInput-module__itemLabel___Kkk-GsEl",
   "itemCount": "MultiSelectInput-module__itemCount___YAf51fvo"
 };
 

package/build/browser/filter-list/base/inputs/RangeInput.module.css

@@ -31,6 +31,8 @@
   align-items: flex-end;
   height: var(--osdk-filter-range-histogram-height);
   gap: var(--osdk-filter-range-histogram-bar-gap);
+  padding-bottom: var(--osdk-filter-range-histogram-padding-bottom);
+  padding-inline: var(--osdk-filter-range-histogram-padding-inline);
   overflow: hidden;
 }
 
@@ -88,7 +90,11 @@
 }
 
 .separator {
-  padding-bottom: calc(var(--osdk-filter-range-inputs-gap) * 0.75);
+  display: flex;
+  align-items: center;
+  height: calc(
+    var(--osdk-filter-input-font-size) + var(--osdk-filter-input-padding) * 2
+  );
   color: var(--osdk-filter-range-separator-color);
 }