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

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.js

@@ -24,6 +24,37 @@ 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,
@@ -82,7 +113,8 @@ function FilterListItemInner({
   const searchQueryForInput = searchState.type === "open" ? searchState.query : undefined;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.filterItem, className),
-    style: style
+    style: style,
+    "data-has-selection": hasActiveSelection(filterState) || undefined
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.itemHeader
   }, dragHandleAttributes && /*#__PURE__*/React.createElement(Button, _extends({

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

@@ -1 +1 @@
-{"version":3,"file":"FilterListItem.js","names":["Button","Input","classnames","React","memo","useCallback","useState","ErrorBoundary","supportsExcluding","supportsSearch","DragHandleIcon","OverflowMenuIcon","RemoveIcon","SearchIcon","styles","FilterListItemInner","definition","filterKey","label","filterState","onFilterStateChanged","onFilterRemoved","renderInput","dragHandleAttributes","dragHandleListeners","className","style","searchState","setSearchState","type","excludeRowOpen","setExcludeRowOpen","handleFilterStateChanged","newState","handleToggleSearch","prev","query","handleSearchChange","e","target","value","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\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    >\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 className={styles.itemLabel}>{label}</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":"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","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":"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","ignoreList":[]}

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

@@ -118,11 +118,6 @@
   border-radius: var(--osdk-filter-input-border-radius);
   padding: var(--osdk-filter-input-padding);
   gap: var(--osdk-filter-input-gap);
-
-  &:focus-within {
-    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);
-  }
 }
 
 .searchInput {
@@ -183,7 +178,6 @@
   }
 }
 
-.filterItem:hover [data-exclude-row],
 .excludeRowVisible {
   opacity: 1;
   height: auto;
@@ -197,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

@@ -12,6 +12,7 @@ const styles = {
   "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/SortableFilterListItem.js

@@ -17,10 +17,10 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import classnames from "classnames";
-import React, { useMemo } from "react";
+import React, { memo, useMemo } from "react";
 import { FilterListItem } from "./FilterListItem.js";
 import styles from "./FilterListItem.module.css.js";
-export function SortableFilterListItem({
+function SortableFilterListItemInner({
   id,
   definition,
   filterKey,
@@ -60,4 +60,5 @@ export function SortableFilterListItem({
     dragHandleListeners: listeners
   }));
 }
+export const SortableFilterListItem = /*#__PURE__*/memo(SortableFilterListItemInner);
 //# sourceMappingURL=SortableFilterListItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SortableFilterListItem.js","names":["useSortable","CSS","classnames","React","useMemo","FilterListItem","styles","SortableFilterListItem","id","definition","filterKey","label","filterState","onFilterStateChanged","onFilterRemoved","renderInput","attributes","listeners","setNodeRef","transform","transition","isDragging","style","Transform","toString","undefined","createElement","ref","className","dragging","dragHandleAttributes","dragHandleListeners"],"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, { 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\nexport function SortableFilterListItem<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"],"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,OAAO,QAAQ,OAAO;AAGtC,SAASC,cAAc,QAAQ,qBAAqB;AACpD,OAAOC,MAAM,MAAM,6BAA6B;AAgBhD,OAAO,SAASC,sBAAsBA,CAAI;EACxCC,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,GAAGrB,WAAW,CAAC;IAAEQ;EAAG,CAAC,CAAC;EAEvB,MAAMc,KAAK,GAAGlB,OAAO,CAAsB,OAAO;IAChDe,SAAS,EAAElB,GAAG,CAACsB,SAAS,CAACC,QAAQ,CAACL,SAAS,CAAC;IAC5CC,UAAU,EAAEA,UAAU,IAAIK;EAC5B,CAAC,CAAC,EAAE,CAACN,SAAS,EAAEC,UAAU,CAAC,CAAC;EAE5B,oBACEjB,KAAA,CAAAuB,aAAA;IACEC,GAAG,EAAET,UAAW;IAChBI,KAAK,EAAEA,KAAM;IACbM,SAAS,EAAE1B,UAAU,CAACmB,UAAU,IAAIf,MAAM,CAACuB,QAAQ;EAAE,gBAErD1B,KAAA,CAAAuB,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","ignoreList":[]}
+{"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/inputs/ListogramInput.js

@@ -17,6 +17,7 @@
 import { Button } from "@base-ui/react/button";
 import classnames from "classnames";
 import React, { memo, useCallback, useMemo, useState } from "react";
+import { Checkbox } from "../../../base-components/checkbox/Checkbox.js";
 import { filterValuesBySearch } from "../../utils/filterValues.js";
 import styles from "./ListogramInput.module.css.js";
 import { ListogramSkeleton } from "./ListogramSkeleton.js";
@@ -31,6 +32,7 @@ function ListogramInputInner({
   onChange,
   colorMap,
   displayMode = "full",
+  isExcluding,
   className,
   style,
   maxVisibleItems,
@@ -52,11 +54,16 @@ function ListogramInputInner({
     }
     return stableValues;
   }, [stableValues, searchQuery]);
+  const sortedValues = useMemo(() => {
+    const selected = filteredValues.filter(v => selectedSet.has(v.value));
+    const unselected = filteredValues.filter(v => !selectedSet.has(v.value));
+    return [...selected, ...unselected];
+  }, [filteredValues, selectedSet]);
   const displayValues = useMemo(() => {
-    if (isExpanded || !maxVisibleItems) return filteredValues;
-    return filteredValues.slice(0, maxVisibleItems);
-  }, [filteredValues, maxVisibleItems, isExpanded]);
-  const hasMore = maxVisibleItems != null && filteredValues.length > maxVisibleItems;
+    if (isExpanded || !maxVisibleItems) return sortedValues;
+    return sortedValues.slice(0, maxVisibleItems);
+  }, [sortedValues, maxVisibleItems, isExpanded]);
+  const hasMore = maxVisibleItems != null && sortedValues.length > maxVisibleItems;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.listogram, className),
     style: style,
@@ -85,19 +92,27 @@ function ListogramInputInner({
         } : undefined)
       } : undefined
     }, /*#__PURE__*/React.createElement("span", {
-      className: styles.label
-    }, value), displayMode === "full" && /*#__PURE__*/React.createElement("span", {
+      className: styles.checkbox,
+      onClick: e => e.stopPropagation()
+    }, /*#__PURE__*/React.createElement(Checkbox, {
+      checked: selectedSet.has(value),
+      onCheckedChange: () => toggleValue(value),
+      isExcluding: isExcluding
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.label,
+      "data-excluding": isExcluding && selectedSet.has(value) || undefined
+    }, value), displayMode !== "minimal" && /*#__PURE__*/React.createElement("span", {
+      className: styles.count
+    }, count.toLocaleString()), displayMode === "full" && /*#__PURE__*/React.createElement("span", {
       className: styles.bar
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.barFill
-    })), displayMode !== "minimal" && /*#__PURE__*/React.createElement("span", {
-      className: styles.count
-    }, count.toLocaleString()));
+    })));
   }), hasMore && !isExpanded && /*#__PURE__*/React.createElement(Button, {
     type: "button",
-    className: styles.row,
+    className: styles.viewAllButton,
     onClick: () => setIsExpanded(true)
-  }, "View all (", filteredValues.length, ")")));
+  }, "View all (", sortedValues.length, ")")));
 }
 export const ListogramInput = /*#__PURE__*/memo(ListogramInputInner);
 //# sourceMappingURL=ListogramInput.js.map

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","filterValuesBySearch","styles","ListogramSkeleton","sharedStyles","useStableData","ListogramInputInner","values","maxCount","isLoading","error","selectedValues","onChange","colorMap","displayMode","className","style","maxVisibleItems","searchQuery","isExpanded","setIsExpanded","stableValues","selectedSet","Set","toggleValue","value","has","filter","v","filteredValues","displayValues","slice","hasMore","length","createElement","listogram","errorMessage","message","emptyMessage","container","map","count","percentage","perRowColor","key","row","onClick","undefined","label","bar","barFill","toLocaleString","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 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  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  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 displayValues = useMemo(() => {\n    if (isExpanded || !maxVisibleItems) return filteredValues;\n    return filteredValues.slice(0, maxVisibleItems);\n  }, [filteredValues, maxVisibleItems, isExpanded]);\n\n  const hasMore = maxVisibleItems != null\n    && filteredValues.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 className={styles.label}>{value}</span>\n                {displayMode === \"full\" && (\n                  <span className={styles.bar}>\n                    <span className={styles.barFill} />\n                  </span>\n                )}\n                {displayMode !== \"minimal\" && (\n                  <span className={styles.count}>\n                    {count.toLocaleString()}\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 ({filteredValues.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

@@ -73,6 +73,10 @@
   white-space: nowrap;
 }
 
+.label[data-excluding] {
+  text-decoration: line-through;
+}
+
 .bar {
   width: var(--osdk-filter-listogram-bar-width);
   flex-shrink: 0;
@@ -87,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);
@@ -96,6 +101,32 @@
   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;
+}
+
 .count {
   font-family: var(--osdk-filter-listogram-count-font-family);
   font-size: var(--osdk-filter-listogram-count-font-size);

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

@@ -6,6 +6,8 @@ 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":"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","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":[]}