@osdk/react-components 0.2.0-beta.15 → 0.2.0-beta.16

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

@@ -26,6 +26,7 @@
 }
 
 .itemLabel {
+  flex: 1;
   font-family: var(--osdk-filter-item-label-font-family);
   font-size: var(--osdk-filter-item-label-font-size);
   font-weight: var(--osdk-filter-item-label-font-weight);
@@ -60,11 +61,66 @@
   }
 
   &:focus-visible {
-    outline: 2px solid var(--osdk-filter-item-drag-handle-focus-outline-color);
-    outline-offset: 2px;
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-item-drag-handle-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
   }
 }
 
+.excludeToggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-exclude-toggle-padding);
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
+  color: var(--osdk-filter-item-exclude-toggle-color);
+
+  &:hover {
+    color: var(--osdk-filter-item-exclude-toggle-color-hover);
+    background: var(--osdk-filter-item-exclude-toggle-bg-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+}
+
+.excludeToggle[aria-pressed="true"] {
+  color: var(--osdk-filter-item-exclude-toggle-color-active);
+}
+
+.removeButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--osdk-filter-item-exclude-toggle-padding);
+  margin-left: var(--osdk-surface-spacing);
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  border-radius: var(--osdk-filter-item-exclude-toggle-border-radius);
+  color: var(--osdk-filter-item-exclude-toggle-color);
+
+  &:hover {
+    color: var(--osdk-filter-item-exclude-toggle-color-hover);
+    background: var(--osdk-filter-item-exclude-toggle-bg-hover);
+  }
+
+  &:focus-visible {
+    outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
+    outline-offset: var(--osdk-filter-input-focus-outline-offset);
+  }
+}
+
+.filterItem[data-excluding] {
+  border-left: var(--osdk-filter-item-exclude-border-width) solid var(--osdk-filter-item-exclude-border-color);
+  padding-left: var(--osdk-filter-item-gap);
+}
+
 .dragging {
   opacity: var(--osdk-filter-item-dragging-opacity);
 }

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

@@ -5,6 +5,8 @@ const styles = {
   "itemLabel": "FilterListItem-module__itemLabel___cEnbqE59",
   "itemContent": "FilterListItem-module__itemContent___PfVHHhIy",
   "dragHandle": "FilterListItem-module__dragHandle___BwFrILWs",
+  "excludeToggle": "FilterListItem-module__excludeToggle___nWNDvntP",
+  "removeButton": "FilterListItem-module__removeButton___72cjHbqK",
   "dragging": "FilterListItem-module__dragging___S5-LGyfS"
 };
 

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

@@ -22,13 +22,13 @@ import { FilterListItem } from "./FilterListItem.js";
 import styles from "./FilterListItem.module.css.js";
 export function SortableFilterListItem({
   id,
-  objectType,
-  objectSet,
   definition,
   filterKey,
+  label,
   filterState,
   onFilterStateChanged,
-  whereClause
+  onFilterRemoved,
+  renderInput
 }) {
   const {
     attributes,
@@ -49,13 +49,13 @@ export function SortableFilterListItem({
     style: style,
     className: classnames(isDragging && styles.dragging)
   }, /*#__PURE__*/React.createElement(FilterListItem, {
-    objectType: objectType,
-    objectSet: objectSet,
     definition: definition,
     filterKey: filterKey,
+    label: label,
     filterState: filterState,
     onFilterStateChanged: onFilterStateChanged,
-    whereClause: whereClause,
+    onFilterRemoved: onFilterRemoved,
+    renderInput: renderInput,
     dragHandleAttributes: attributes,
     dragHandleListeners: listeners
   }));

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","objectType","objectSet","definition","filterKey","filterState","onFilterStateChanged","whereClause","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 type { ObjectSet, ObjectTypeDefinition, WhereClause } from \"@osdk/api\";\nimport classnames from \"classnames\";\nimport React, { useMemo } from \"react\";\nimport type { FilterDefinitionUnion } from \"../FilterListApi.js\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { FilterListItem } from \"./FilterListItem.js\";\nimport styles from \"./FilterListItem.module.css\";\n\ninterface SortableFilterListItemProps<Q extends ObjectTypeDefinition> {\n  id: string;\n  objectType: Q;\n  objectSet: ObjectSet<Q>;\n  definition: FilterDefinitionUnion<Q>;\n  filterKey: string;\n  filterState: FilterState | undefined;\n  onFilterStateChanged: (\n    filterKey: string,\n    state: FilterState,\n  ) => void;\n  whereClause: WhereClause<Q>;\n}\n\nexport function SortableFilterListItem<Q extends ObjectTypeDefinition>({\n  id,\n  objectType,\n  objectSet,\n  definition,\n  filterKey,\n  filterState,\n  onFilterStateChanged,\n  whereClause,\n}: SortableFilterListItemProps<Q>): 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        objectType={objectType}\n        objectSet={objectSet}\n        definition={definition}\n        filterKey={filterKey}\n        filterState={filterState}\n        onFilterStateChanged={onFilterStateChanged}\n        whereClause={whereClause}\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;AAExC,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,CAAiC;EACrEC,EAAE;EACFC,UAAU;EACVC,SAAS;EACTC,UAAU;EACVC,SAAS;EACTC,WAAW;EACXC,oBAAoB;EACpBC;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,UAAU,EAAEA,UAAW;IACvBC,SAAS,EAAEA,SAAU;IACrBC,WAAW,EAAEA,WAAY;IACzBC,oBAAoB,EAAEA,oBAAqB;IAC3CC,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","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":[]}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["FilterInput","FilterList","FilterListContent","FilterListHeader","FilterListItem"],"sources":["index.ts"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { FilterInput } from \"./FilterInput.js\";\nexport { FilterList } from \"./FilterList.js\";\nexport { FilterListContent } from \"./FilterListContent.js\";\nexport { FilterListHeader } from \"./FilterListHeader.js\";\nexport { FilterListItem } from \"./FilterListItem.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,QAAQ,kBAAkB;AAC9C,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,cAAc,QAAQ,qBAAqB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["BaseFilterList","FilterListContent","FilterListHeader","FilterListItem"],"sources":["index.ts"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport { BaseFilterList } from \"./BaseFilterList.js\";\nexport type {\n  BaseFilterListProps,\n  RenderFilterInput,\n} from \"./BaseFilterListApi.js\";\nexport { FilterListContent } from \"./FilterListContent.js\";\nexport { FilterListHeader } from \"./FilterListHeader.js\";\nexport { FilterListItem } from \"./FilterListItem.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,cAAc,QAAQ,qBAAqB;AAKpD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,cAAc,QAAQ,qBAAqB","ignoreList":[]}

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

@@ -17,26 +17,19 @@
 import classnames from "classnames";
 import React, { memo, useCallback, useMemo } from "react";
 import { Checkbox } from "../../../base-components/checkbox/Checkbox.js";
-import { usePropertyAggregation } from "../../hooks/usePropertyAggregation.js";
 import styles from "./CheckboxListInput.module.css.js";
 import sharedStyles from "./shared.module.css.js";
 function CheckboxListInputInner({
-  objectType,
-  propertyKey,
+  values,
+  isLoading,
+  error,
   selectedValues,
   onChange,
-  whereClause,
+  colorMap,
   className,
   style
 }) {
-  const {
-    data,
-    isLoading,
-    error
-  } = usePropertyAggregation(objectType, propertyKey, {
-    where: whereClause
-  });
-  const values = useMemo(() => data.map(item => item.value), [data]);
+  const displayValues = useMemo(() => values.map(item => item.value), [values]);
   const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
   const toggleValue = useCallback(value => {
     if (selectedSet.has(value)) {
@@ -45,18 +38,39 @@ function CheckboxListInputInner({
       onChange([...selectedValues, value]);
     }
   }, [selectedValues, selectedSet, onChange]);
+  const allSelected = useMemo(() => displayValues.length > 0 && displayValues.every(v => selectedSet.has(v)), [displayValues, selectedSet]);
+  const areSomeValuesSelected = useMemo(() => !allSelected && selectedValues.some(v => selectedSet.has(v)), [allSelected, selectedValues, selectedSet]);
+  const handleSelectAll = useCallback(() => {
+    if (allSelected) {
+      onChange([]);
+    } else {
+      onChange([...displayValues]);
+    }
+  }, [allSelected, displayValues, onChange]);
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.checkboxList, className),
     style: style,
     "data-loading": isLoading
   }, error && /*#__PURE__*/React.createElement("div", {
     className: sharedStyles.errorMessage
-  }, "Error loading values: ", error.message), !error && values.length === 0 && /*#__PURE__*/React.createElement("div", {
+  }, "Error loading values: ", error.message), !error && displayValues.length === 0 && /*#__PURE__*/React.createElement("div", {
     className: sharedStyles.emptyMessage
-  }, isLoading ? "Loading values..." : "No values available"), (values.length > 0 || isLoading) && /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("div", {
+  }, isLoading ? "Loading values..." : "No values available"), (displayValues.length > 0 || isLoading) && /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("div", {
     className: sharedStyles.loadingMessage
-  }, "Updating..."), values.map(value => {
+  }, "Updating..."), /*#__PURE__*/React.createElement("div", {
+    className: styles.checkboxRow,
+    "data-select-all": true
+  }, /*#__PURE__*/React.createElement("label", {
+    className: styles.checkboxLabel
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    checked: allSelected,
+    indeterminate: areSomeValuesSelected,
+    onCheckedChange: handleSelectAll
+  }), /*#__PURE__*/React.createElement("span", {
+    className: styles.valueText
+  }, "Select all"))), displayValues.map(value => {
     const isSelected = selectedSet.has(value);
+    const color = colorMap?.[value];
     return /*#__PURE__*/React.createElement("div", {
       key: value,
       className: styles.checkboxRow,
@@ -66,6 +80,11 @@ function CheckboxListInputInner({
     }, /*#__PURE__*/React.createElement(Checkbox, {
       checked: isSelected,
       onCheckedChange: () => toggleValue(value)
+    }), color && /*#__PURE__*/React.createElement("span", {
+      className: styles.colorDot,
+      style: {
+        backgroundColor: color
+      }
     }), /*#__PURE__*/React.createElement("span", {
       className: styles.valueText
     }, value)));

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxListInput.js","names":["classnames","React","memo","useCallback","useMemo","Checkbox","usePropertyAggregation","styles","sharedStyles","CheckboxListInputInner","objectType","propertyKey","selectedValues","onChange","whereClause","className","style","data","isLoading","error","where","values","map","item","value","selectedSet","Set","toggleValue","has","filter","v","createElement","checkboxList","errorMessage","message","length","emptyMessage","Fragment","loadingMessage","isSelected","key","checkboxRow","checkboxLabel","checked","onCheckedChange","valueText","CheckboxListInput"],"sources":["CheckboxListInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type {\n  ObjectSet,\n  ObjectTypeDefinition,\n  PropertyKeys,\n  WhereClause,\n} from \"@osdk/api\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo } from \"react\";\nimport { Checkbox } from \"../../../base-components/checkbox/Checkbox.js\";\nimport { usePropertyAggregation } from \"../../hooks/usePropertyAggregation.js\";\nimport styles from \"./CheckboxListInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\ninterface CheckboxListInputProps<\n  Q extends ObjectTypeDefinition,\n  K extends PropertyKeys<Q>,\n> {\n  objectType: Q;\n  propertyKey: K;\n  selectedValues: string[];\n  onChange: (selectedValues: string[]) => void;\n  objectSet?: ObjectSet<Q>;\n  whereClause?: WhereClause<Q>;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction CheckboxListInputInner<\n  Q extends ObjectTypeDefinition,\n  K extends PropertyKeys<Q>,\n>({\n  objectType,\n  propertyKey,\n  selectedValues,\n  onChange,\n  whereClause,\n  className,\n  style,\n}: CheckboxListInputProps<Q, K>): React.ReactElement {\n  const { data, isLoading, error } = usePropertyAggregation(\n    objectType,\n    propertyKey,\n    { where: whereClause },\n  );\n\n  const values = useMemo(\n    () => data.map((item) => item.value),\n    [data],\n  );\n\n  const selectedSet = useMemo(\n    () => new Set(selectedValues),\n    [selectedValues],\n  );\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  return (\n    <div\n      className={classnames(styles.checkboxList, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading values: {error.message}\n        </div>\n      )}\n\n      {!error && values.length === 0 && (\n        <div className={sharedStyles.emptyMessage}>\n          {isLoading ? \"Loading values...\" : \"No values available\"}\n        </div>\n      )}\n\n      {(values.length > 0 || isLoading) && (\n        <>\n          {isLoading && (\n            <div className={sharedStyles.loadingMessage}>\n              Updating...\n            </div>\n          )}\n          {values.map((value) => {\n            const isSelected = selectedSet.has(value);\n\n            return (\n              <div\n                key={value}\n                className={styles.checkboxRow}\n                data-selected={isSelected}\n              >\n                <label className={styles.checkboxLabel}>\n                  <Checkbox\n                    checked={isSelected}\n                    onCheckedChange={() => toggleValue(value)}\n                  />\n                  <span className={styles.valueText}>\n                    {value}\n                  </span>\n                </label>\n              </div>\n            );\n          })}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const CheckboxListInput = memo(\n  CheckboxListInputInner,\n) as typeof CheckboxListInputInner;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CheckboxListInput.js","names":["classnames","React","memo","useCallback","useMemo","Checkbox","styles","sharedStyles","CheckboxListInputInner","values","isLoading","error","selectedValues","onChange","colorMap","className","style","displayValues","map","item","value","selectedSet","Set","toggleValue","has","filter","v","allSelected","length","every","areSomeValuesSelected","some","handleSelectAll","createElement","checkboxList","errorMessage","message","emptyMessage","Fragment","loadingMessage","checkboxRow","checkboxLabel","checked","indeterminate","onCheckedChange","valueText","isSelected","color","key","colorDot","backgroundColor","CheckboxListInput"],"sources":["CheckboxListInput.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 { Checkbox } from \"../../../base-components/checkbox/Checkbox.js\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport styles from \"./CheckboxListInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\ninterface CheckboxListInputProps {\n  values: PropertyAggregationValue[];\n  isLoading: boolean;\n  error: Error | null;\n  selectedValues: string[];\n  onChange: (selectedValues: string[]) => void;\n  colorMap?: Record<string, string>;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction CheckboxListInputInner({\n  values,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  colorMap,\n  className,\n  style,\n}: CheckboxListInputProps): React.ReactElement {\n  const displayValues = useMemo(\n    () => values.map((item) => item.value),\n    [values],\n  );\n\n  const selectedSet = useMemo(\n    () => new Set(selectedValues),\n    [selectedValues],\n  );\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 allSelected = useMemo(\n    () =>\n      displayValues.length > 0\n      && displayValues.every((v) => selectedSet.has(v)),\n    [displayValues, selectedSet],\n  );\n  const areSomeValuesSelected = useMemo(\n    () => !allSelected && selectedValues.some((v) => selectedSet.has(v)),\n    [allSelected, selectedValues, selectedSet],\n  );\n\n  const handleSelectAll = useCallback(\n    () => {\n      if (allSelected) {\n        onChange([]);\n      } else {\n        onChange([...displayValues]);\n      }\n    },\n    [allSelected, displayValues, onChange],\n  );\n\n  return (\n    <div\n      className={classnames(styles.checkboxList, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading values: {error.message}\n        </div>\n      )}\n\n      {!error && displayValues.length === 0 && (\n        <div className={sharedStyles.emptyMessage}>\n          {isLoading ? \"Loading values...\" : \"No values available\"}\n        </div>\n      )}\n\n      {(displayValues.length > 0 || isLoading) && (\n        <>\n          {isLoading && (\n            <div className={sharedStyles.loadingMessage}>\n              Updating...\n            </div>\n          )}\n          <div\n            className={styles.checkboxRow}\n            data-select-all\n          >\n            <label className={styles.checkboxLabel}>\n              <Checkbox\n                checked={allSelected}\n                indeterminate={areSomeValuesSelected}\n                onCheckedChange={handleSelectAll}\n              />\n              <span className={styles.valueText}>Select all</span>\n            </label>\n          </div>\n          {displayValues.map((value) => {\n            const isSelected = selectedSet.has(value);\n            const color = colorMap?.[value];\n\n            return (\n              <div\n                key={value}\n                className={styles.checkboxRow}\n                data-selected={isSelected}\n              >\n                <label className={styles.checkboxLabel}>\n                  <Checkbox\n                    checked={isSelected}\n                    onCheckedChange={() => toggleValue(value)}\n                  />\n                  {color && (\n                    <span\n                      className={styles.colorDot}\n                      style={{ backgroundColor: color }}\n                    />\n                  )}\n                  <span className={styles.valueText}>\n                    {value}\n                  </span>\n                </label>\n              </div>\n            );\n          })}\n        </>\n      )}\n    </div>\n  );\n}\n\nexport const CheckboxListInput = memo(\n  CheckboxListInputInner,\n) as typeof CheckboxListInputInner;\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,EAAEC,OAAO,QAAQ,OAAO;AACzD,SAASC,QAAQ,QAAQ,+CAA+C;AAExE,OAAOC,MAAM,MAAM,gCAAgC;AACnD,OAAOC,YAAY,MAAM,qBAAqB;AAa9C,SAASC,sBAAsBA,CAAC;EAC9BC,MAAM;EACNC,SAAS;EACTC,KAAK;EACLC,cAAc;EACdC,QAAQ;EACRC,QAAQ;EACRC,SAAS;EACTC;AACsB,CAAC,EAAsB;EAC7C,MAAMC,aAAa,GAAGb,OAAO,CAC3B,MAAMK,MAAM,CAACS,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,KAAK,CAAC,EACtC,CAACX,MAAM,CACT,CAAC;EAED,MAAMY,WAAW,GAAGjB,OAAO,CACzB,MAAM,IAAIkB,GAAG,CAACV,cAAc,CAAC,EAC7B,CAACA,cAAc,CACjB,CAAC;EAED,MAAMW,WAAW,GAAGpB,WAAW,CAC5BiB,KAAa,IAAK;IACjB,IAAIC,WAAW,CAACG,GAAG,CAACJ,KAAK,CAAC,EAAE;MAC1BP,QAAQ,CAACD,cAAc,CAACa,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKN,KAAK,CAAC,CAAC;IACrD,CAAC,MAAM;MACLP,QAAQ,CAAC,CAAC,GAAGD,cAAc,EAAEQ,KAAK,CAAC,CAAC;IACtC;EACF,CAAC,EACD,CAACR,cAAc,EAAES,WAAW,EAAER,QAAQ,CACxC,CAAC;EAED,MAAMc,WAAW,GAAGvB,OAAO,CACzB,MACEa,aAAa,CAACW,MAAM,GAAG,CAAC,IACrBX,aAAa,CAACY,KAAK,CAAEH,CAAC,IAAKL,WAAW,CAACG,GAAG,CAACE,CAAC,CAAC,CAAC,EACnD,CAACT,aAAa,EAAEI,WAAW,CAC7B,CAAC;EACD,MAAMS,qBAAqB,GAAG1B,OAAO,CACnC,MAAM,CAACuB,WAAW,IAAIf,cAAc,CAACmB,IAAI,CAAEL,CAAC,IAAKL,WAAW,CAACG,GAAG,CAACE,CAAC,CAAC,CAAC,EACpE,CAACC,WAAW,EAAEf,cAAc,EAAES,WAAW,CAC3C,CAAC;EAED,MAAMW,eAAe,GAAG7B,WAAW,CACjC,MAAM;IACJ,IAAIwB,WAAW,EAAE;MACfd,QAAQ,CAAC,EAAE,CAAC;IACd,CAAC,MAAM;MACLA,QAAQ,CAAC,CAAC,GAAGI,aAAa,CAAC,CAAC;IAC9B;EACF,CAAC,EACD,CAACU,WAAW,EAAEV,aAAa,EAAEJ,QAAQ,CACvC,CAAC;EAED,oBACEZ,KAAA,CAAAgC,aAAA;IACElB,SAAS,EAAEf,UAAU,CAACM,MAAM,CAAC4B,YAAY,EAAEnB,SAAS,CAAE;IACtDC,KAAK,EAAEA,KAAM;IACb,gBAAcN;EAAU,GAEvBC,KAAK,iBACJV,KAAA,CAAAgC,aAAA;IAAKlB,SAAS,EAAER,YAAY,CAAC4B;EAAa,GAAC,wBACnB,EAACxB,KAAK,CAACyB,OAC1B,CACN,EAEA,CAACzB,KAAK,IAAIM,aAAa,CAACW,MAAM,KAAK,CAAC,iBACnC3B,KAAA,CAAAgC,aAAA;IAAKlB,SAAS,EAAER,YAAY,CAAC8B;EAAa,GACvC3B,SAAS,GAAG,mBAAmB,GAAG,qBAChC,CACN,EAEA,CAACO,aAAa,CAACW,MAAM,GAAG,CAAC,IAAIlB,SAAS,kBACrCT,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAAqC,QAAA,QACG5B,SAAS,iBACRT,KAAA,CAAAgC,aAAA;IAAKlB,SAAS,EAAER,YAAY,CAACgC;EAAe,GAAC,aAExC,CACN,eACDtC,KAAA,CAAAgC,aAAA;IACElB,SAAS,EAAET,MAAM,CAACkC,WAAY;IAC9B;EAAe,gBAEfvC,KAAA,CAAAgC,aAAA;IAAOlB,SAAS,EAAET,MAAM,CAACmC;EAAc,gBACrCxC,KAAA,CAAAgC,aAAA,CAAC5B,QAAQ;IACPqC,OAAO,EAAEf,WAAY;IACrBgB,aAAa,EAAEb,qBAAsB;IACrCc,eAAe,EAAEZ;EAAgB,CAClC,CAAC,eACF/B,KAAA,CAAAgC,aAAA;IAAMlB,SAAS,EAAET,MAAM,CAACuC;EAAU,GAAC,YAAgB,CAC9C,CACJ,CAAC,EACL5B,aAAa,CAACC,GAAG,CAAEE,KAAK,IAAK;IAC5B,MAAM0B,UAAU,GAAGzB,WAAW,CAACG,GAAG,CAACJ,KAAK,CAAC;IACzC,MAAM2B,KAAK,GAAGjC,QAAQ,GAAGM,KAAK,CAAC;IAE/B,oBACEnB,KAAA,CAAAgC,aAAA;MACEe,GAAG,EAAE5B,KAAM;MACXL,SAAS,EAAET,MAAM,CAACkC,WAAY;MAC9B,iBAAeM;IAAW,gBAE1B7C,KAAA,CAAAgC,aAAA;MAAOlB,SAAS,EAAET,MAAM,CAACmC;IAAc,gBACrCxC,KAAA,CAAAgC,aAAA,CAAC5B,QAAQ;MACPqC,OAAO,EAAEI,UAAW;MACpBF,eAAe,EAAEA,CAAA,KAAMrB,WAAW,CAACH,KAAK;IAAE,CAC3C,CAAC,EACD2B,KAAK,iBACJ9C,KAAA,CAAAgC,aAAA;MACElB,SAAS,EAAET,MAAM,CAAC2C,QAAS;MAC3BjC,KAAK,EAAE;QAAEkC,eAAe,EAAEH;MAAM;IAAE,CACnC,CACF,eACD9C,KAAA,CAAAgC,aAAA;MAAMlB,SAAS,EAAET,MAAM,CAACuC;IAAU,GAC/BzB,KACG,CACD,CACJ,CAAC;EAEV,CAAC,CACD,CAED,CAAC;AAEV;AAEA,OAAO,MAAM+B,iBAAiB,gBAAGjD,IAAI,CACnCM,sBACF,CAAkC","ignoreList":[]}

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

@@ -24,6 +24,12 @@
   padding: var(--osdk-filter-checkbox-row-padding);
 }
 
+.checkboxRow[data-select-all] {
+  border-bottom: var(--osdk-filter-checkbox-selectall-border-bottom);
+  padding-bottom: calc(var(--osdk-filter-checkbox-row-padding) + 2px);
+  margin-bottom: 2px;
+}
+
 .checkboxLabel {
   display: flex;
   align-items: center;
@@ -40,3 +46,10 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.colorDot {
+  width: var(--osdk-filter-checkbox-color-dot-size);
+  height: var(--osdk-filter-checkbox-color-dot-size);
+  border-radius: 50%;
+  flex-shrink: 0;
+}

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

@@ -3,7 +3,8 @@ const styles = {
   "checkboxList": "CheckboxListInput-module__checkboxList___NTBTd7DH",
   "checkboxRow": "CheckboxListInput-module__checkboxRow___ga-mvL9m",
   "checkboxLabel": "CheckboxListInput-module__checkboxLabel___iFH7C6-U",
-  "valueText": "CheckboxListInput-module__valueText___ohfVO74D"
+  "valueText": "CheckboxListInput-module__valueText___ohfVO74D",
+  "colorDot": "CheckboxListInput-module__colorDot___AdQXW5K-"
 };
 
 export default styles;

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.js","names":["React","memo","formatDateForInput","parseDateFromInput","RangeInput","dateConfig","inputType","formatValue","parseValue","toNumber","d","getTime","fromNumber","t","Date","minLabel","maxLabel","formatTooltip","min","max","count","toLocaleString","DateRangeInputInner","props","createElement","_extends","config","DateRangeInput"],"sources":["DateRangeInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { ObjectSet, ObjectTypeDefinition, PropertyKeys } from \"@osdk/api\";\nimport React, { memo } from \"react\";\nimport { formatDateForInput, parseDateFromInput } from \"./dateUtils.js\";\nimport { RangeInput, type RangeInputConfig } from \"./RangeInput.js\";\n\nconst dateConfig: RangeInputConfig<Date> = {\n  inputType: \"date\",\n  formatValue: formatDateForInput,\n  parseValue: parseDateFromInput,\n  toNumber: (d) => d.getTime(),\n  fromNumber: (t) => new Date(t),\n  minLabel: \"From\",\n  maxLabel: \"To\",\n  formatTooltip: (min, max, count) =>\n    `${formatDateForInput(min)} - ${\n      formatDateForInput(max)\n    }: ${count.toLocaleString()}`,\n};\n\ninterface DateRangeInputProps<\n  Q extends ObjectTypeDefinition,\n  K extends PropertyKeys<Q>,\n> {\n  objectType: Q;\n  propertyKey: K;\n  minValue: Date | undefined;\n  maxValue: Date | undefined;\n  onChange: (min: Date | undefined, max: Date | undefined) => void;\n  objectSet?: ObjectSet<Q>;\n  showHistogram?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction DateRangeInputInner<\n  Q extends ObjectTypeDefinition,\n  K extends PropertyKeys<Q>,\n>(props: DateRangeInputProps<Q, K>): React.ReactElement {\n  return <RangeInput {...props} config={dateConfig} />;\n}\n\nexport const DateRangeInput = memo(\n  DateRangeInputInner,\n) as typeof DateRangeInputInner;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,kBAAkB,EAAEC,kBAAkB,QAAQ,gBAAgB;AACvE,SAASC,UAAU,QAA+B,iBAAiB;AAEnE,MAAMC,UAAkC,GAAG;EACzCC,SAAS,EAAE,MAAM;EACjBC,WAAW,EAAEL,kBAAkB;EAC/BM,UAAU,EAAEL,kBAAkB;EAC9BM,QAAQ,EAAGC,CAAC,IAAKA,CAAC,CAACC,OAAO,CAAC,CAAC;EAC5BC,UAAU,EAAGC,CAAC,IAAK,IAAIC,IAAI,CAACD,CAAC,CAAC;EAC9BE,QAAQ,EAAE,MAAM;EAChBC,QAAQ,EAAE,IAAI;EACdC,aAAa,EAAEA,CAACC,GAAG,EAAEC,GAAG,EAAEC,KAAK,KAC7B,GAAGlB,kBAAkB,CAACgB,GAAG,CAAC,MACxBhB,kBAAkB,CAACiB,GAAG,CAAC,KACpBC,KAAK,CAACC,cAAc,CAAC,CAAC;AAC/B,CAAC;AAiBD,SAASC,mBAAmBA,CAG1BC,KAAgC,EAAsB;EACtD,oBAAOvB,KAAA,CAAAwB,aAAA,CAACpB,UAAU,EAAAqB,QAAA,KAAKF,KAAK;IAAEG,MAAM,EAAErB;EAAW,EAAE,CAAC;AACtD;AAEA,OAAO,MAAMsB,cAAc,gBAAG1B,IAAI,CAChCqB,mBACF,CAA+B","ignoreList":[]}
+{"version":3,"file":"DateRangeInput.js","names":["React","memo","formatDateForInput","parseDateFromInput","RangeInput","dateConfig","inputType","formatValue","parseValue","toNumber","d","getTime","fromNumber","t","Date","minLabel","maxLabel","formatTooltip","min","max","count","toLocaleString","DateRangeInputInner","props","createElement","_extends","config","DateRangeInput"],"sources":["DateRangeInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { memo } from \"react\";\nimport { formatDateForInput, parseDateFromInput } from \"./dateUtils.js\";\nimport { RangeInput, type RangeInputConfig } from \"./RangeInput.js\";\n\nconst dateConfig: RangeInputConfig<Date> = {\n  inputType: \"date\",\n  formatValue: formatDateForInput,\n  parseValue: parseDateFromInput,\n  toNumber: (d) => d.getTime(),\n  fromNumber: (t) => new Date(t),\n  minLabel: \"From\",\n  maxLabel: \"To\",\n  formatTooltip: (min, max, count) =>\n    `${formatDateForInput(min)} - ${\n      formatDateForInput(max)\n    }: ${count.toLocaleString()}`,\n};\n\ninterface DateRangeInputProps {\n  valueCountPairs: Array<{ value: Date; count: number }>;\n  isLoading: boolean;\n  minValue: Date | undefined;\n  maxValue: Date | undefined;\n  onChange: (min: Date | undefined, max: Date | undefined) => void;\n  showHistogram?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction DateRangeInputInner(\n  props: DateRangeInputProps,\n): React.ReactElement {\n  return <RangeInput {...props} config={dateConfig} />;\n}\n\nexport const DateRangeInput = memo(\n  DateRangeInputInner,\n) as typeof DateRangeInputInner;\n"],"mappings":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,kBAAkB,EAAEC,kBAAkB,QAAQ,gBAAgB;AACvE,SAASC,UAAU,QAA+B,iBAAiB;AAEnE,MAAMC,UAAkC,GAAG;EACzCC,SAAS,EAAE,MAAM;EACjBC,WAAW,EAAEL,kBAAkB;EAC/BM,UAAU,EAAEL,kBAAkB;EAC9BM,QAAQ,EAAGC,CAAC,IAAKA,CAAC,CAACC,OAAO,CAAC,CAAC;EAC5BC,UAAU,EAAGC,CAAC,IAAK,IAAIC,IAAI,CAACD,CAAC,CAAC;EAC9BE,QAAQ,EAAE,MAAM;EAChBC,QAAQ,EAAE,IAAI;EACdC,aAAa,EAAEA,CAACC,GAAG,EAAEC,GAAG,EAAEC,KAAK,KAC7B,GAAGlB,kBAAkB,CAACgB,GAAG,CAAC,MACxBhB,kBAAkB,CAACiB,GAAG,CAAC,KACpBC,KAAK,CAACC,cAAc,CAAC,CAAC;AAC/B,CAAC;AAaD,SAASC,mBAAmBA,CAC1BC,KAA0B,EACN;EACpB,oBAAOvB,KAAA,CAAAwB,aAAA,CAACpB,UAAU,EAAAqB,QAAA,KAAKF,KAAK;IAAEG,MAAM,EAAErB;EAAW,EAAE,CAAC;AACtD;AAEA,OAAO,MAAMsB,cAAc,gBAAG1B,IAAI,CAChCqB,mBACF,CAA+B","ignoreList":[]}

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

@@ -17,28 +17,22 @@
 import { Button } from "@base-ui/react/button";
 import classnames from "classnames";
 import React, { memo, useCallback, useMemo, useState } from "react";
-import { usePropertyAggregation } from "../../hooks/usePropertyAggregation.js";
 import styles from "./ListogramInput.module.css.js";
 import sharedStyles from "./shared.module.css.js";
 function ListogramInputInner({
-  objectType,
-  propertyKey,
+  values,
+  maxCount,
+  isLoading,
+  error,
   selectedValues,
   onChange,
-  whereClause,
+  colorMap,
+  displayMode = "full",
   className,
   style,
   maxVisibleItems
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const {
-    data: values,
-    maxCount,
-    isLoading,
-    error
-  } = usePropertyAggregation(objectType, propertyKey, {
-    where: whereClause
-  });
   const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
   const toggleValue = useCallback(value => {
     if (selectedSet.has(value)) {
@@ -68,24 +62,26 @@ function ListogramInputInner({
     value,
     count
   }) => {
-    const isSelected = selectedSet.has(value);
     const percentage = maxCount > 0 ? count / maxCount * 100 : 0;
+    const perRowColor = colorMap?.[value];
     return /*#__PURE__*/React.createElement(Button, {
       key: value,
-      type: "button",
       className: styles.row,
       onClick: () => toggleValue(value),
-      "aria-pressed": isSelected
+      "aria-pressed": selectedSet.has(value),
+      style: perRowColor || percentage > 0 ? {
+        "--osdk-filter-listogram-bar-fill-scale": percentage / 100,
+        ...(perRowColor ? {
+          "--osdk-filter-listogram-row-bar-color": perRowColor
+        } : undefined)
+      } : undefined
     }, /*#__PURE__*/React.createElement("span", {
       className: styles.label
-    }, value), /*#__PURE__*/React.createElement("span", {
+    }, value), displayMode === "full" && /*#__PURE__*/React.createElement("span", {
       className: styles.bar
     }, /*#__PURE__*/React.createElement("span", {
-      className: styles.barFill,
-      style: {
-        width: `${percentage}%`
-      }
-    })), /*#__PURE__*/React.createElement("span", {
+      className: styles.barFill
+    })), displayMode !== "minimal" && /*#__PURE__*/React.createElement("span", {
       className: styles.count
     }, count.toLocaleString()));
   }), hasMore && !isExpanded && /*#__PURE__*/React.createElement(Button, {

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","usePropertyAggregation","styles","sharedStyles","ListogramInputInner","objectType","propertyKey","selectedValues","onChange","whereClause","className","style","maxVisibleItems","isExpanded","setIsExpanded","data","values","maxCount","isLoading","error","where","selectedSet","Set","toggleValue","value","has","filter","v","displayValues","slice","hasMore","length","createElement","listogram","loadingMessage","errorMessage","message","emptyMessage","container","map","count","isSelected","percentage","key","type","row","onClick","label","bar","barFill","width","toLocaleString","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 type {\n  ObjectSet,\n  ObjectTypeDefinition,\n  PropertyKeys,\n  WhereClause,\n} from \"@osdk/api\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\nimport { usePropertyAggregation } from \"../../hooks/usePropertyAggregation.js\";\nimport styles from \"./ListogramInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\ninterface ListogramInputProps<\n  Q extends ObjectTypeDefinition,\n  K extends PropertyKeys<Q>,\n> {\n  objectType: Q;\n  propertyKey: K;\n  selectedValues: string[];\n  onChange: (values: string[]) => void;\n  objectSet?: ObjectSet<Q>;\n  whereClause?: WhereClause<Q>;\n  className?: string;\n  style?: React.CSSProperties;\n  maxVisibleItems?: number;\n}\n\nfunction ListogramInputInner<\n  Q extends ObjectTypeDefinition,\n  K extends PropertyKeys<Q>,\n>({\n  objectType,\n  propertyKey,\n  selectedValues,\n  onChange,\n  whereClause,\n  className,\n  style,\n  maxVisibleItems,\n}: ListogramInputProps<Q, K>): React.ReactElement {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const { data: values, maxCount, isLoading, error } = usePropertyAggregation(\n    objectType,\n    propertyKey,\n    { where: whereClause },\n  );\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 displayValues = useMemo(() => {\n    if (isExpanded || !maxVisibleItems) return values;\n    return values.slice(0, maxVisibleItems);\n  }, [values, maxVisibleItems, isExpanded]);\n\n  const hasMore = maxVisibleItems != null && values.length > maxVisibleItems;\n\n  return (\n    <div\n      className={classnames(styles.listogram, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {isLoading && (\n        <div className={sharedStyles.loadingMessage}>\n          Loading values...\n        </div>\n      )}\n\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading values: {error.message}\n        </div>\n      )}\n\n      {!isLoading && !error && values.length === 0 && (\n        <div className={sharedStyles.emptyMessage}>\n          No values available\n        </div>\n      )}\n\n      {(values.length > 0 || isLoading) && (\n        <div className={styles.container}>\n          {displayValues.map(({ value, count }) => {\n            const isSelected = selectedSet.has(value);\n            const percentage = maxCount > 0 ? (count / maxCount) * 100 : 0;\n\n            return (\n              <Button\n                key={value}\n                type=\"button\"\n                className={styles.row}\n                onClick={() => toggleValue(value)}\n                aria-pressed={isSelected}\n              >\n                <span className={styles.label}>{value}</span>\n                <span className={styles.bar}>\n                  <span\n                    className={styles.barFill}\n                    style={{ width: `${percentage}%` }}\n                  />\n                </span>\n                <span className={styles.count}>\n                  {count.toLocaleString()}\n                </span>\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 ({values.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","styles","sharedStyles","ListogramInputInner","values","maxCount","isLoading","error","selectedValues","onChange","colorMap","displayMode","className","style","maxVisibleItems","isExpanded","setIsExpanded","selectedSet","Set","toggleValue","value","has","filter","v","displayValues","slice","hasMore","length","createElement","listogram","loadingMessage","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 styles from \"./ListogramInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\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}\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}: ListogramInputProps): React.ReactElement {\n  const [isExpanded, setIsExpanded] = useState(false);\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 displayValues = useMemo(() => {\n    if (isExpanded || !maxVisibleItems) return values;\n    return values.slice(0, maxVisibleItems);\n  }, [values, maxVisibleItems, isExpanded]);\n\n  const hasMore = maxVisibleItems != null && values.length > maxVisibleItems;\n\n  return (\n    <div\n      className={classnames(styles.listogram, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {isLoading && (\n        <div className={sharedStyles.loadingMessage}>\n          Loading values...\n        </div>\n      )}\n\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading values: {error.message}\n        </div>\n      )}\n\n      {!isLoading && !error && values.length === 0 && (\n        <div className={sharedStyles.emptyMessage}>\n          No values available\n        </div>\n      )}\n\n      {(values.length > 0 || isLoading) && (\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 ({values.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

@@ -22,40 +22,41 @@
 .container {
   display: flex;
   flex-direction: column;
-  gap: var(--osdk-filter-listogram-gap, calc(var(--osdk-surface-spacing) * 1));
+  gap: var(--osdk-filter-listogram-gap);
 }
 
 .row {
   display: flex;
   align-items: center;
-  gap: var(--osdk-filter-listogram-row-gap, calc(var(--osdk-surface-spacing) * 2));
-  padding: var(--osdk-filter-listogram-row-padding, calc(var(--osdk-surface-spacing) * 1));
+  gap: var(--osdk-filter-listogram-row-gap);
+  padding: var(--osdk-filter-listogram-row-padding);
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: var(--osdk-surface-border-radius);
+  border-radius: var(--osdk-filter-listogram-row-border-radius);
   text-align: left;
   width: 100%;
-  transition: background-color var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+  transition: background-color var(--osdk-filter-listogram-row-transition);
 
   &:hover {
-    background: var(--osdk-surface-background-color-default-hover);
+    background: var(--osdk-filter-listogram-row-bg-hover);
   }
 
   &:focus-visible {
-    outline: var(--osdk-emphasis-focus-width) solid var(--osdk-emphasis-focus-color);
-    outline-offset: var(--osdk-emphasis-focus-offset);
+    outline: var(--osdk-filter-listogram-row-focus-outline);
+    outline-offset: var(--osdk-filter-listogram-row-focus-offset);
   }
 }
 
 .row[aria-pressed="true"] {
-  background: var(--osdk-surface-background-color-default-active);
+  background: var(--osdk-filter-listogram-row-bg-active);
 }
 
 .label {
   flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
-  color: var(--osdk-typography-color-default-rest);
+  font-family: var(--osdk-filter-listogram-label-font-family);
+  font-size: var(--osdk-filter-listogram-label-font-size);
+  color: var(--osdk-filter-listogram-label-color);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -63,26 +64,31 @@
 
 .bar {
   flex: 2;
-  height: var(--osdk-filter-listogram-bar-height, 8px);
-  background: var(--osdk-custom-color-gray-2);
-  border-radius: var(--osdk-surface-border-radius);
+  height: var(--osdk-filter-listogram-bar-height);
+  background: var(--osdk-filter-listogram-bar-bg);
+  border-radius: var(--osdk-filter-listogram-bar-border-radius);
   overflow: hidden;
 }
 
 .barFill {
+  display: block;
   height: 100%;
-  background: var(--osdk-filter-listogram-bar-color);
-  transition: width var(--osdk-emphasis-transition-duration) var(--osdk-emphasis-ease-default);
+  width: 100%;
+  background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-bar-color));
+  transform-origin: left;
+  transform: scaleX(var(--osdk-filter-listogram-bar-fill-scale, 0));
+  transition: transform var(--osdk-filter-listogram-bar-fill-transition);
 }
 
 .row[aria-pressed="true"] .barFill {
-  background: var(--osdk-filter-listogram-selected-color);
+  background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-selected-color));
 }
 
 .count {
-  font-size: var(--osdk-typography-size-body-small);
+  font-family: var(--osdk-filter-listogram-count-font-family);
+  font-size: var(--osdk-filter-listogram-count-font-size);
   font-variant-numeric: tabular-nums;
-  color: var(--osdk-typography-color-muted);
+  color: var(--osdk-filter-listogram-count-color);
   min-width: 3ch;
   text-align: right;
 }

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

@@ -21,12 +21,13 @@
 }
 
 .clearAll {
-  font-size: var(--osdk-typography-size-body-small);
-  color: var(--osdk-intent-primary-rest);
+  font-family: var(--osdk-filter-date-clear-font-family);
+  font-size: var(--osdk-filter-date-clear-font-size);
+  color: var(--osdk-filter-date-clear-color);
   background: transparent;
   border: none;
   cursor: pointer;
-  padding: calc(var(--osdk-surface-spacing) * 0.5);
+  padding: var(--osdk-filter-date-clear-padding);
 
   &:hover {
     text-decoration: underline;
@@ -39,7 +40,8 @@
 
 .input {
   flex: 1;
-  font-size: var(--osdk-typography-size-body-medium);
+  font-family: var(--osdk-filter-input-font-family);
+  font-size: var(--osdk-filter-timeline-input-font-size);
   padding: var(--osdk-filter-input-padding);
   border: var(--osdk-filter-input-border);
   border-radius: var(--osdk-filter-input-border-radius);