@osdk/react-components 0.12.0 → 0.13.0

package/build/browser/base-components/select/Select.module.css

@@ -85,6 +85,12 @@
     );
   }
 
+  /* Override global :focus rules (e.g. Blueprint) that add an outline on
+     mouse click. Only show the ring on keyboard focus (:focus-visible). */
+  &:focus:not(:focus-visible) {
+    outline: none;
+  }
+
   &:focus-visible {
     outline: var(--osdk-select-focus-width, var(--osdk-emphasis-focus-width))
       solid var(--osdk-select-focus-color, var(--osdk-emphasis-focus-color));
@@ -94,6 +100,10 @@
     );
   }
 
+  &[data-popup-open]:focus-visible {
+    outline: none;
+  }
+
   &[data-disabled] {
     cursor: not-allowed;
     opacity: var(--osdk-disabled-opacity, 0.5);
@@ -200,6 +210,10 @@
 
 .osdkSelectPositioner {
   z-index: var(--osdk-select-z-index, var(--osdk-surface-z-index-3));
+  /* Base UI may focus the popup/positioner so it can own select keyboard
+     navigation. Keep the visual focus affordance on the active option instead
+     of drawing a browser-default ring around this non-interactive wrapper. */
+  outline: none;
 }
 
 .osdkSelectPopup {
@@ -221,6 +235,10 @@
     var(--osdk-surface-background-color-default-rest)
   );
   box-shadow: var(--osdk-select-popup-shadow, var(--osdk-surface-shadow-2));
+
+  &:focus {
+    outline: none;
+  }
 }
 
 .osdkSelectItem {

package/build/browser/base-components/switch/Switch.module.css

@@ -15,10 +15,22 @@
  */
 
 .osdkSwitchRoot {
-  --osdk-switch-track-width: var(--osdk-switch-track-width-override, 28px);
-  --osdk-switch-track-height: var(--osdk-switch-track-height-override, 16px);
-  --osdk-switch-thumb-size: var(--osdk-switch-thumb-size-override, 12px);
-  --osdk-switch-thumb-offset: var(--osdk-switch-thumb-offset-override, 2px);
+  --osdk-switch-track-width: var(
+    --osdk-switch-track-width-override,
+    calc(var(--osdk-surface-spacing) * 9)
+  );
+  --osdk-switch-track-height: var(
+    --osdk-switch-track-height-override,
+    calc(var(--osdk-surface-spacing) * 5)
+  );
+  --osdk-switch-thumb-size: var(
+    --osdk-switch-thumb-size-override,
+    calc(var(--osdk-surface-spacing) * 4)
+  );
+  --osdk-switch-thumb-offset: var(
+    --osdk-switch-thumb-offset-override,
+    calc(var(--osdk-surface-spacing) * 0.5)
+  );
 
   display: inline-flex;
   align-items: center;
@@ -26,7 +38,7 @@
   height: var(--osdk-switch-track-height);
   padding: 0;
   cursor: pointer;
-  border-radius: var(--osdk-switch-border-radius, var(--osdk-surface-border-radius));
+  border-radius: var(--osdk-switch-border-radius, 9999px);
   position: relative;
   border: none;
   transition: background-color var(--osdk-switch-transition-duration, var(--osdk-emphasis-transition-duration))
@@ -58,7 +70,7 @@
 
   &[data-disabled] {
     cursor: not-allowed;
-    opacity: 0.5;
+    opacity: var(--osdk-switch-disabled-opacity, var(--osdk-input-disabled-opacity));
   }
 
   &:focus-visible {

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

@@ -18,9 +18,10 @@ 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 { filterValuesBySearch, isEmptyValue } from "../../utils/filterValues.js";
 import styles from "./ListogramInput.module.css.js";
 import { ListogramSkeleton } from "./ListogramSkeleton.js";
+import { NoValueLabel } from "./NoValueLabel.js";
 import sharedStyles from "./shared.module.css.js";
 import { useStableData } from "./useStableData.js";
 function ListogramInputInner({
@@ -41,7 +42,33 @@ function ListogramInputInner({
   renderValue
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
-  const stableValues = useStableData(values, isLoading);
+
+  // Aggregations may return both "" and null as separate rows; merge them
+  // into a single "No value" placeholder at the position of the first match.
+  const dedupedValues = useMemo(() => {
+    const out = [];
+    let emptyCount = 0;
+    let firstEmptyIndex = -1;
+    for (const v of values) {
+      if (v.value === "" || v.value == null) {
+        if (firstEmptyIndex === -1) {
+          firstEmptyIndex = out.length;
+        }
+        emptyCount += v.count;
+      } else {
+        out.push(v);
+      }
+    }
+    if (firstEmptyIndex >= 0 && emptyCount > 0) {
+      out.splice(firstEmptyIndex, 0, {
+        value: "",
+        count: emptyCount,
+        isNull: true
+      });
+    }
+    return out;
+  }, [values]);
+  const stableValues = useStableData(dedupedValues, isLoading);
   const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
   const toggleValue = useCallback(value => {
     if (selectedSet.has(value)) {
@@ -82,8 +109,7 @@ function ListogramInputInner({
   }) => {
     const percentage = maxCount > 0 ? count / maxCount * 100 : 0;
     const perRowColor = colorMap?.[value];
-    const isEmpty = value === "";
-    const displayLabel = isEmpty ? "No value" : renderValue?.(value) ?? value;
+    const isEmpty = isEmptyValue(value);
     return /*#__PURE__*/React.createElement(Button, {
       key: value,
       className: styles.row
@@ -107,9 +133,11 @@ function ListogramInputInner({
       onCheckedChange: () => toggleValue(value),
       isExcluding: isExcluding
     })), /*#__PURE__*/React.createElement("span", {
-      className: classnames(styles.label, isEmpty && styles.emptyLabel),
+      className: styles.label,
       "data-excluding": isExcluding && selectedSet.has(value) || undefined
-    }, displayLabel), showCount && displayMode !== "minimal" && /*#__PURE__*/React.createElement("span", {
+    }, isEmpty ? /*#__PURE__*/React.createElement(NoValueLabel, {
+      className: styles.noValueLabel
+    }) : renderValue?.(value) ?? value), showCount && displayMode !== "minimal" && /*#__PURE__*/React.createElement("span", {
       className: styles.count
     }, count.toLocaleString()), displayMode === "full" && /*#__PURE__*/React.createElement("span", {
       className: styles.bar

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

@@ -1 +1 @@
-{"version":3,"file":"ListogramInput.js","names":["Button","classnames","React","memo","useCallback","useMemo","useState","Checkbox","filterValuesBySearch","styles","ListogramSkeleton","sharedStyles","useStableData","ListogramInputInner","values","maxCount","isLoading","error","selectedValues","onChange","colorMap","displayMode","showCount","isExcluding","className","style","maxVisibleItems","searchQuery","renderValue","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","isEmpty","displayLabel","key","row","onClick","undefined","checkbox","e","stopPropagation","checked","onCheckedChange","label","emptyLabel","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  showCount?: boolean;\n  isExcluding?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  maxVisibleItems?: number;\n  searchQuery?: string;\n  renderValue?: (value: string) => string;\n}\n\nfunction ListogramInputInner({\n  values,\n  maxCount,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  colorMap,\n  displayMode = \"full\",\n  showCount = true,\n  isExcluding,\n  className,\n  style,\n  maxVisibleItems,\n  searchQuery,\n  renderValue,\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(\n        stableValues,\n        searchQuery,\n        (v) => renderValue?.(v.value) ?? v.value,\n      );\n    }\n    return stableValues;\n  }, [stableValues, searchQuery, renderValue]);\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}>No values available</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            const isEmpty = value === \"\";\n            const displayLabel = isEmpty\n              ? \"No value\"\n              : (renderValue?.(value) ?? value);\n\n            return (\n              <Button\n                key={value}\n                className={styles.row}\n                // eslint-disable-next-line react/jsx-no-bind\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                    // eslint-disable-next-line react/jsx-no-bind\n                    onCheckedChange={() => toggleValue(value)}\n                    isExcluding={isExcluding}\n                  />\n                </span>\n                <span\n                  className={classnames(\n                    styles.label,\n                    isEmpty && styles.emptyLabel,\n                  )}\n                  data-excluding={(isExcluding && selectedSet.has(value))\n                    || undefined}\n                >\n                  {displayLabel}\n                </span>\n                {showCount && displayMode !== \"minimal\" && (\n                  <span className={styles.count}>{count.toLocaleString()}</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              // eslint-disable-next-line react/jsx-no-bind\n              onClick={() => setIsExpanded(true)}\n            >\n              View all ({sortedValues.length})\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ListogramInput = memo(\n  ListogramInputInner,\n) as typeof ListogramInputInner;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListogramInput.js","names":["Button","classnames","React","memo","useCallback","useMemo","useState","Checkbox","filterValuesBySearch","isEmptyValue","styles","ListogramSkeleton","NoValueLabel","sharedStyles","useStableData","ListogramInputInner","values","maxCount","isLoading","error","selectedValues","onChange","colorMap","displayMode","showCount","isExcluding","className","style","maxVisibleItems","searchQuery","renderValue","isExpanded","setIsExpanded","dedupedValues","out","emptyCount","firstEmptyIndex","v","value","length","count","push","splice","isNull","stableValues","selectedSet","Set","toggleValue","has","filter","filteredValues","sortedValues","selected","unselected","displayValues","slice","hasMore","createElement","listogram","errorMessage","message","emptyMessage","container","map","percentage","perRowColor","isEmpty","key","row","onClick","undefined","checkbox","e","stopPropagation","checked","onCheckedChange","label","noValueLabel","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 {\n  filterValuesBySearch,\n  isEmptyValue,\n} from \"../../utils/filterValues.js\";\nimport styles from \"./ListogramInput.module.css\";\nimport { ListogramSkeleton } from \"./ListogramSkeleton.js\";\nimport { NoValueLabel } from \"./NoValueLabel.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  showCount?: boolean;\n  isExcluding?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  maxVisibleItems?: number;\n  searchQuery?: string;\n  renderValue?: (value: string) => string;\n}\n\nfunction ListogramInputInner({\n  values,\n  maxCount,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  colorMap,\n  displayMode = \"full\",\n  showCount = true,\n  isExcluding,\n  className,\n  style,\n  maxVisibleItems,\n  searchQuery,\n  renderValue,\n}: ListogramInputProps): React.ReactElement {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  // Aggregations may return both \"\" and null as separate rows; merge them\n  // into a single \"No value\" placeholder at the position of the first match.\n  const dedupedValues = useMemo(() => {\n    const out: PropertyAggregationValue[] = [];\n    let emptyCount = 0;\n    let firstEmptyIndex = -1;\n    for (const v of values) {\n      if (v.value === \"\" || v.value == null) {\n        if (firstEmptyIndex === -1) {\n          firstEmptyIndex = out.length;\n        }\n        emptyCount += v.count;\n      } else {\n        out.push(v);\n      }\n    }\n    if (firstEmptyIndex >= 0 && emptyCount > 0) {\n      out.splice(firstEmptyIndex, 0, {\n        value: \"\",\n        count: emptyCount,\n        isNull: true,\n      });\n    }\n    return out;\n  }, [values]);\n\n  const stableValues = useStableData(dedupedValues, 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(\n        stableValues,\n        searchQuery,\n        (v) => renderValue?.(v.value) ?? v.value,\n      );\n    }\n    return stableValues;\n  }, [stableValues, searchQuery, renderValue]);\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}>No values available</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            const isEmpty = isEmptyValue(value);\n\n            return (\n              <Button\n                key={value}\n                className={styles.row}\n                // eslint-disable-next-line react/jsx-no-bind\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                    // eslint-disable-next-line react/jsx-no-bind\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                  {isEmpty\n                    ? <NoValueLabel className={styles.noValueLabel} />\n                    : (renderValue?.(value) ?? value)}\n                </span>\n                {showCount && displayMode !== \"minimal\" && (\n                  <span className={styles.count}>{count.toLocaleString()}</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              // eslint-disable-next-line react/jsx-no-bind\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

@@ -20,6 +20,17 @@
   transition: opacity var(--osdk-filter-content-fade-duration);
 }
 
+.noValueLabel {
+  color: var(
+    --osdk-filter-listogram-empty-label-color,
+    var(--osdk-filter-no-value-color)
+  );
+  font-style: var(
+    --osdk-filter-listogram-empty-label-font-style,
+    var(--osdk-filter-no-value-font-style)
+  );
+}
+
 .listogram[data-loading="true"] {
   opacity: 0.5;
 }
@@ -77,11 +88,6 @@
   text-decoration: line-through;
 }
 
-.emptyLabel {
-  color: var(--osdk-filter-listogram-empty-label-color);
-  font-style: var(--osdk-filter-listogram-empty-label-font-style);
-}
-
 .bar {
   width: var(--osdk-filter-listogram-bar-width);
   flex-shrink: 0;

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

@@ -1,10 +1,10 @@
 // CSS Module proxy for ListogramInput.module.css
 const styles = {
   "listogram": "ListogramInput-module__listogram___QdvKag0g",
+  "noValueLabel": "ListogramInput-module__noValueLabel___8avapBJI",
   "container": "ListogramInput-module__container___hMngsxor",
   "row": "ListogramInput-module__row___rps-rpjo",
   "label": "ListogramInput-module__label___hQ3nLEpx",
-  "emptyLabel": "ListogramInput-module__emptyLabel___4JpVowj8",
   "bar": "ListogramInput-module__bar___iUqTfYSm",
   "barFill": "ListogramInput-module__barFill___za7KWtcm",
   "viewAllButton": "ListogramInput-module__viewAllButton___CxQzJRxu",

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

@@ -17,7 +17,9 @@
 import classnames from "classnames";
 import React, { memo, useCallback, useMemo } from "react";
 import { Combobox } from "../../../base-components/combobox/Combobox.js";
+import { isEmptyValue } from "../../utils/filterValues.js";
 import styles from "./MultiSelectInput.module.css.js";
+import { NoValueLabel } from "./NoValueLabel.js";
 import sharedStyles from "./shared.module.css.js";
 function MultiSelectInputInner({
   values,
@@ -43,18 +45,24 @@ function MultiSelectInputInner({
     count
   }) => [value, count])), [values]);
   const comboboxFilter = useMemo(() => renderValue ? (itemValue, query) => renderValue(itemValue).toLowerCase().includes(query.toLowerCase()) : undefined, [renderValue]);
-  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
-  }, renderValue ? renderValue(value) : value), showCounts && /*#__PURE__*/React.createElement("span", {
-    className: styles.itemCount
-  }, "(", (countByValue.get(value) ?? 0).toLocaleString(), ")")), [countByValue, showCounts, renderValue]);
-  const renderChips = useCallback(selectedItems => /*#__PURE__*/React.createElement(React.Fragment, null, selectedItems.map(value => /*#__PURE__*/React.createElement(Combobox.Chip, {
-    key: value,
-    "aria-label": value
-  }, renderValue ? renderValue(value) : value, /*#__PURE__*/React.createElement(Combobox.ChipRemove, null))), /*#__PURE__*/React.createElement(Combobox.Input, {
+  const renderItem = useCallback(value => {
+    const isEmpty = isEmptyValue(value);
+    return /*#__PURE__*/React.createElement(Combobox.Item, {
+      key: value,
+      value: value
+    }, /*#__PURE__*/React.createElement(Combobox.ItemIndicator, null), /*#__PURE__*/React.createElement("span", {
+      className: styles.itemLabel
+    }, isEmpty ? /*#__PURE__*/React.createElement(NoValueLabel, null) : renderValue ? renderValue(value) : value), showCounts && /*#__PURE__*/React.createElement("span", {
+      className: styles.itemCount
+    }, "(", (countByValue.get(value) ?? 0).toLocaleString(), ")"));
+  }, [countByValue, showCounts, renderValue]);
+  const renderChips = useCallback(selectedItems => /*#__PURE__*/React.createElement(React.Fragment, null, selectedItems.map(value => {
+    const isEmpty = isEmptyValue(value);
+    return /*#__PURE__*/React.createElement(Combobox.Chip, {
+      key: value,
+      "aria-label": isEmpty ? "No value" : value
+    }, isEmpty ? /*#__PURE__*/React.createElement(NoValueLabel, null) : renderValue ? renderValue(value) : value, /*#__PURE__*/React.createElement(Combobox.ChipRemove, null));
+  }), /*#__PURE__*/React.createElement(Combobox.Input, {
     placeholder: selectedItems.length > 0 ? "" : placeholder,
     "aria-label": ariaLabel
   })), [placeholder, ariaLabel, renderValue]);

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.js","names":["classnames","React","memo","useCallback","useMemo","Combobox","styles","sharedStyles","MultiSelectInputInner","values","isLoading","error","selectedValues","onChange","className","style","placeholder","showCounts","ariaLabel","renderValue","handleValueChange","newValues","items","map","value","countByValue","Map","count","comboboxFilter","itemValue","query","toLowerCase","includes","undefined","renderItem","createElement","Item","key","ItemIndicator","itemLabel","itemCount","get","toLocaleString","renderChips","selectedItems","Fragment","Chip","ChipRemove","Input","length","multiSelect","errorMessage","message","emptyMessage","Root","multiple","onValueChange","filter","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  showCounts?: boolean;\n  ariaLabel?: string;\n  renderValue?: (value: string) => string;\n}\n\nfunction MultiSelectInputInner({\n  values,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  className,\n  style,\n  placeholder = \"Select values...\",\n  showCounts = true,\n  ariaLabel = \"Search values\",\n  renderValue,\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 comboboxFilter = useMemo(\n    () =>\n      renderValue\n        ? (itemValue: string, query: string) =>\n          renderValue(itemValue).toLowerCase().includes(query.toLowerCase())\n        : undefined,\n    [renderValue],\n  );\n\n  const renderItem = useCallback(\n    (value: string) => (\n      <Combobox.Item key={value} value={value}>\n        <Combobox.ItemIndicator />\n        <span className={styles.itemLabel}>\n          {renderValue ? renderValue(value) : value}\n        </span>\n        {showCounts && (\n          <span className={styles.itemCount}>\n            ({(countByValue.get(value) ?? 0).toLocaleString()})\n          </span>\n        )}\n      </Combobox.Item>\n    ),\n    [countByValue, showCounts, renderValue],\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            {renderValue ? renderValue(value) : 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, renderValue],\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          filter={comboboxFilter}\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":[]}
+{"version":3,"file":"MultiSelectInput.js","names":["classnames","React","memo","useCallback","useMemo","Combobox","isEmptyValue","styles","NoValueLabel","sharedStyles","MultiSelectInputInner","values","isLoading","error","selectedValues","onChange","className","style","placeholder","showCounts","ariaLabel","renderValue","handleValueChange","newValues","items","map","value","countByValue","Map","count","comboboxFilter","itemValue","query","toLowerCase","includes","undefined","renderItem","isEmpty","createElement","Item","key","ItemIndicator","itemLabel","itemCount","get","toLocaleString","renderChips","selectedItems","Fragment","Chip","ChipRemove","Input","length","multiSelect","errorMessage","message","emptyMessage","Root","multiple","onValueChange","filter","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 { isEmptyValue } from \"../../utils/filterValues.js\";\nimport styles from \"./MultiSelectInput.module.css\";\nimport { NoValueLabel } from \"./NoValueLabel.js\";\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  showCounts?: boolean;\n  ariaLabel?: string;\n  renderValue?: (value: string) => string;\n}\n\nfunction MultiSelectInputInner({\n  values,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  className,\n  style,\n  placeholder = \"Select values...\",\n  showCounts = true,\n  ariaLabel = \"Search values\",\n  renderValue,\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 comboboxFilter = useMemo(\n    () =>\n      renderValue\n        ? (itemValue: string, query: string) =>\n          renderValue(itemValue).toLowerCase().includes(query.toLowerCase())\n        : undefined,\n    [renderValue],\n  );\n\n  const renderItem = useCallback(\n    (value: string) => {\n      const isEmpty = isEmptyValue(value);\n      return (\n        <Combobox.Item key={value} value={value}>\n          <Combobox.ItemIndicator />\n          <span className={styles.itemLabel}>\n            {isEmpty\n              ? <NoValueLabel />\n              : (renderValue ? renderValue(value) : value)}\n          </span>\n          {showCounts && (\n            <span className={styles.itemCount}>\n              ({(countByValue.get(value) ?? 0).toLocaleString()})\n            </span>\n          )}\n        </Combobox.Item>\n      );\n    },\n    [countByValue, showCounts, renderValue],\n  );\n\n  const renderChips = useCallback(\n    (selectedItems: string[]) => (\n      <>\n        {selectedItems.map((value) => {\n          const isEmpty = isEmptyValue(value);\n          return (\n            <Combobox.Chip\n              key={value}\n              aria-label={isEmpty ? \"No value\" : value}\n            >\n              {isEmpty\n                ? <NoValueLabel />\n                : (renderValue ? renderValue(value) : value)}\n              <Combobox.ChipRemove />\n            </Combobox.Chip>\n          );\n        })}\n        <Combobox.Input\n          placeholder={selectedItems.length > 0 ? \"\" : placeholder}\n          aria-label={ariaLabel}\n        />\n      </>\n    ),\n    [placeholder, ariaLabel, renderValue],\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          filter={comboboxFilter}\n        >\n          {isLoading && (\n            <div className={sharedStyles.loadingMessage}>\n              Updating...\n            </div>\n          )}\n\n          <Combobox.Chips>\n            <Combobox.Value>{renderChips}</Combobox.Value>\n          </Combobox.Chips>\n\n          <Combobox.Portal>\n            <Combobox.Positioner>\n              <Combobox.Popup>\n                <Combobox.Empty>No matching options</Combobox.Empty>\n                <Combobox.List>{renderItem}</Combobox.List>\n              </Combobox.Popup>\n            </Combobox.Positioner>\n          </Combobox.Portal>\n        </Combobox.Root>\n      )}\n    </div>\n  );\n}\n\nexport const MultiSelectInput = memo(\n  MultiSelectInputInner,\n) as typeof MultiSelectInputInner;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,36 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import classnames from "classnames";
+import React, { memo } from "react";
+import styles from "./NoValueLabel.module.css.js";
+/**
+ * Canonical "No value" rendering for empty/null filter values.
+ * Italic, muted span used in dropdowns, listogram buckets, and
+ * NullValueWrapper.
+ *
+ * Style is configurable via the `--osdk-filter-no-value-color` and
+ * `--osdk-filter-no-value-font-style` CSS variables.
+ */
+function NoValueLabelInner({
+  className
+}) {
+  return /*#__PURE__*/React.createElement("span", {
+    className: classnames(styles.noValue, className)
+  }, "No value");
+}
+export const NoValueLabel = /*#__PURE__*/memo(NoValueLabelInner);
+//# sourceMappingURL=NoValueLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NoValueLabel.js","names":["classnames","React","memo","styles","NoValueLabelInner","className","createElement","noValue","NoValueLabel"],"sources":["NoValueLabel.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 } from \"react\";\nimport styles from \"./NoValueLabel.module.css\";\n\ninterface NoValueLabelProps {\n  className?: string;\n}\n\n/**\n * Canonical \"No value\" rendering for empty/null filter values.\n * Italic, muted span used in dropdowns, listogram buckets, and\n * NullValueWrapper.\n *\n * Style is configurable via the `--osdk-filter-no-value-color` and\n * `--osdk-filter-no-value-font-style` CSS variables.\n */\nfunction NoValueLabelInner(\n  { className }: NoValueLabelProps,\n): React.ReactElement {\n  return (\n    <span className={classnames(styles.noValue, className)}>\n      No value\n    </span>\n  );\n}\n\nexport const NoValueLabel = memo(NoValueLabelInner) as typeof NoValueLabelInner;\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,QAAQ,OAAO;AACnC,OAAOC,MAAM,MAAM,2BAA2B;AAM9C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,iBAAiBA,CACxB;EAAEC;AAA6B,CAAC,EACZ;EACpB,oBACEJ,KAAA,CAAAK,aAAA;IAAMD,SAAS,EAAEL,UAAU,CAACG,MAAM,CAACI,OAAO,EAAEF,SAAS;EAAE,GAAC,UAElD,CAAC;AAEX;AAEA,OAAO,MAAMG,YAAY,gBAAGN,IAAI,CAACE,iBAAiB,CAA6B","ignoreList":[]}

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

@@ -0,0 +1,20 @@
+/*
+ * Copyright 2025 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.noValue {
+  color: var(--osdk-filter-no-value-color);
+  font-style: var(--osdk-filter-no-value-font-style);
+}

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

@@ -0,0 +1,6 @@
+// CSS Module proxy for NoValueLabel.module.css
+const styles = {
+  "noValue": "NoValueLabel-module__noValue___rihoTb7q"
+};
+
+export default styles;

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

@@ -17,6 +17,7 @@
 import classnames from "classnames";
 import React, { memo, useCallback } from "react";
 import { Checkbox } from "../../../base-components/checkbox/Checkbox.js";
+import { NoValueLabel } from "./NoValueLabel.js";
 import styles from "./NullValueWrapper.module.css.js";
 import sharedStyles from "./shared.module.css.js";
 function NullValueWrapperInner({
@@ -45,9 +46,9 @@ function NullValueWrapperInner({
   }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: includeNull,
     onCheckedChange: handleToggle
-  }), /*#__PURE__*/React.createElement("span", {
-    className: styles.nullLabelText
-  }, "No value")), showNullCount && !error && /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React.createElement(NoValueLabel, {
+    className: styles.noValueLabel
+  })), showNullCount && !error && /*#__PURE__*/React.createElement("span", {
     className: styles.count
   }, nullCount.toLocaleString())), error && /*#__PURE__*/React.createElement("div", {
     className: sharedStyles.errorMessage

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

@@ -1 +1 @@
-{"version":3,"file":"NullValueWrapper.js","names":["classnames","React","memo","useCallback","Checkbox","styles","sharedStyles","NullValueWrapperInner","nullCount","isLoading","error","includeNull","onIncludeNullChange","showNullCount","children","className","style","handleToggle","createElement","nullWrapper","nullValueRow","nullLabel","checked","onCheckedChange","nullLabelText","count","toLocaleString","errorMessage","NullValueWrapper"],"sources":["NullValueWrapper.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport { Checkbox } from \"../../../base-components/checkbox/Checkbox.js\";\nimport styles from \"./NullValueWrapper.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\ninterface NullValueWrapperProps {\n  nullCount: number;\n  isLoading: boolean;\n  error?: Error | null;\n  includeNull?: boolean;\n  onIncludeNullChange: (include: boolean) => void;\n  showNullCount?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction NullValueWrapperInner({\n  nullCount,\n  isLoading,\n  error,\n  includeNull = false,\n  onIncludeNullChange,\n  showNullCount = true,\n  children,\n  className,\n  style,\n}: NullValueWrapperProps): React.ReactElement {\n  const handleToggle = useCallback(() => {\n    onIncludeNullChange(!includeNull);\n  }, [includeNull, onIncludeNullChange]);\n\n  return (\n    <div className={classnames(styles.nullWrapper, className)} style={style}>\n      {children}\n\n      <div\n        className={styles.nullValueRow}\n        data-checked={includeNull}\n        data-loading={isLoading}\n      >\n        <label className={styles.nullLabel}>\n          <Checkbox checked={includeNull} onCheckedChange={handleToggle} />\n          <span className={styles.nullLabelText}>No value</span>\n        </label>\n        {showNullCount && !error && (\n          <span className={styles.count}>\n            {nullCount.toLocaleString()}\n          </span>\n        )}\n      </div>\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Failed to load null count\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const NullValueWrapper = memo(\n  NullValueWrapperInner,\n) as typeof NullValueWrapperInner;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAChD,SAASC,QAAQ,QAAQ,+CAA+C;AACxE,OAAOC,MAAM,MAAM,+BAA+B;AAClD,OAAOC,YAAY,MAAM,qBAAqB;AAc9C,SAASC,qBAAqBA,CAAC;EAC7BC,SAAS;EACTC,SAAS;EACTC,KAAK;EACLC,WAAW,GAAG,KAAK;EACnBC,mBAAmB;EACnBC,aAAa,GAAG,IAAI;EACpBC,QAAQ;EACRC,SAAS;EACTC;AACqB,CAAC,EAAsB;EAC5C,MAAMC,YAAY,GAAGd,WAAW,CAAC,MAAM;IACrCS,mBAAmB,CAAC,CAACD,WAAW,CAAC;EACnC,CAAC,EAAE,CAACA,WAAW,EAAEC,mBAAmB,CAAC,CAAC;EAEtC,oBACEX,KAAA,CAAAiB,aAAA;IAAKH,SAAS,EAAEf,UAAU,CAACK,MAAM,CAACc,WAAW,EAAEJ,SAAS,CAAE;IAACC,KAAK,EAAEA;EAAM,GACrEF,QAAQ,eAETb,KAAA,CAAAiB,aAAA;IACEH,SAAS,EAAEV,MAAM,CAACe,YAAa;IAC/B,gBAAcT,WAAY;IAC1B,gBAAcF;EAAU,gBAExBR,KAAA,CAAAiB,aAAA;IAAOH,SAAS,EAAEV,MAAM,CAACgB;EAAU,gBACjCpB,KAAA,CAAAiB,aAAA,CAACd,QAAQ;IAACkB,OAAO,EAAEX,WAAY;IAACY,eAAe,EAAEN;EAAa,CAAE,CAAC,eACjEhB,KAAA,CAAAiB,aAAA;IAAMH,SAAS,EAAEV,MAAM,CAACmB;EAAc,GAAC,UAAc,CAChD,CAAC,EACPX,aAAa,IAAI,CAACH,KAAK,iBACtBT,KAAA,CAAAiB,aAAA;IAAMH,SAAS,EAAEV,MAAM,CAACoB;EAAM,GAC3BjB,SAAS,CAACkB,cAAc,CAAC,CACtB,CAEL,CAAC,EACLhB,KAAK,iBACJT,KAAA,CAAAiB,aAAA;IAAKH,SAAS,EAAET,YAAY,CAACqB;EAAa,GAAC,2BAEtC,CAEJ,CAAC;AAEV;AAEA,OAAO,MAAMC,gBAAgB,gBAAG1B,IAAI,CAClCK,qBACF,CAAiC","ignoreList":[]}
+{"version":3,"file":"NullValueWrapper.js","names":["classnames","React","memo","useCallback","Checkbox","NoValueLabel","styles","sharedStyles","NullValueWrapperInner","nullCount","isLoading","error","includeNull","onIncludeNullChange","showNullCount","children","className","style","handleToggle","createElement","nullWrapper","nullValueRow","nullLabel","checked","onCheckedChange","noValueLabel","count","toLocaleString","errorMessage","NullValueWrapper"],"sources":["NullValueWrapper.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport { Checkbox } from \"../../../base-components/checkbox/Checkbox.js\";\nimport { NoValueLabel } from \"./NoValueLabel.js\";\nimport styles from \"./NullValueWrapper.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\ninterface NullValueWrapperProps {\n  nullCount: number;\n  isLoading: boolean;\n  error?: Error | null;\n  includeNull?: boolean;\n  onIncludeNullChange: (include: boolean) => void;\n  showNullCount?: boolean;\n  children: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n}\n\nfunction NullValueWrapperInner({\n  nullCount,\n  isLoading,\n  error,\n  includeNull = false,\n  onIncludeNullChange,\n  showNullCount = true,\n  children,\n  className,\n  style,\n}: NullValueWrapperProps): React.ReactElement {\n  const handleToggle = useCallback(() => {\n    onIncludeNullChange(!includeNull);\n  }, [includeNull, onIncludeNullChange]);\n\n  return (\n    <div className={classnames(styles.nullWrapper, className)} style={style}>\n      {children}\n\n      <div\n        className={styles.nullValueRow}\n        data-checked={includeNull}\n        data-loading={isLoading}\n      >\n        <label className={styles.nullLabel}>\n          <Checkbox checked={includeNull} onCheckedChange={handleToggle} />\n          <NoValueLabel className={styles.noValueLabel} />\n        </label>\n        {showNullCount && !error && (\n          <span className={styles.count}>\n            {nullCount.toLocaleString()}\n          </span>\n        )}\n      </div>\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Failed to load null count\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const NullValueWrapper = memo(\n  NullValueWrapperInner,\n) as typeof NullValueWrapperInner;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,QAAQ,OAAO;AAChD,SAASC,QAAQ,QAAQ,+CAA+C;AACxE,SAASC,YAAY,QAAQ,mBAAmB;AAChD,OAAOC,MAAM,MAAM,+BAA+B;AAClD,OAAOC,YAAY,MAAM,qBAAqB;AAc9C,SAASC,qBAAqBA,CAAC;EAC7BC,SAAS;EACTC,SAAS;EACTC,KAAK;EACLC,WAAW,GAAG,KAAK;EACnBC,mBAAmB;EACnBC,aAAa,GAAG,IAAI;EACpBC,QAAQ;EACRC,SAAS;EACTC;AACqB,CAAC,EAAsB;EAC5C,MAAMC,YAAY,GAAGf,WAAW,CAAC,MAAM;IACrCU,mBAAmB,CAAC,CAACD,WAAW,CAAC;EACnC,CAAC,EAAE,CAACA,WAAW,EAAEC,mBAAmB,CAAC,CAAC;EAEtC,oBACEZ,KAAA,CAAAkB,aAAA;IAAKH,SAAS,EAAEhB,UAAU,CAACM,MAAM,CAACc,WAAW,EAAEJ,SAAS,CAAE;IAACC,KAAK,EAAEA;EAAM,GACrEF,QAAQ,eAETd,KAAA,CAAAkB,aAAA;IACEH,SAAS,EAAEV,MAAM,CAACe,YAAa;IAC/B,gBAAcT,WAAY;IAC1B,gBAAcF;EAAU,gBAExBT,KAAA,CAAAkB,aAAA;IAAOH,SAAS,EAAEV,MAAM,CAACgB;EAAU,gBACjCrB,KAAA,CAAAkB,aAAA,CAACf,QAAQ;IAACmB,OAAO,EAAEX,WAAY;IAACY,eAAe,EAAEN;EAAa,CAAE,CAAC,eACjEjB,KAAA,CAAAkB,aAAA,CAACd,YAAY;IAACW,SAAS,EAAEV,MAAM,CAACmB;EAAa,CAAE,CAC1C,CAAC,EACPX,aAAa,IAAI,CAACH,KAAK,iBACtBV,KAAA,CAAAkB,aAAA;IAAMH,SAAS,EAAEV,MAAM,CAACoB;EAAM,GAC3BjB,SAAS,CAACkB,cAAc,CAAC,CACtB,CAEL,CAAC,EACLhB,KAAK,iBACJV,KAAA,CAAAkB,aAAA;IAAKH,SAAS,EAAET,YAAY,CAACqB;EAAa,GAAC,2BAEtC,CAEJ,CAAC;AAEV;AAEA,OAAO,MAAMC,gBAAgB,gBAAG3B,IAAI,CAClCM,qBACF,CAAiC","ignoreList":[]}

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

@@ -20,6 +20,16 @@
   gap: var(--osdk-filter-null-wrapper-gap);
 }
 
+.noValueLabel {
+  color: var(
+    --osdk-filter-null-label-color,
+    var(--osdk-filter-no-value-color)
+  );
+  font-family: var(--osdk-filter-null-label-font-family, inherit);
+  font-size: var(--osdk-filter-null-label-font-size, inherit);
+  line-height: var(--osdk-filter-null-label-line-height, inherit);
+}
+
 .nullValueRow {
   display: flex;
   align-items: center;
@@ -35,13 +45,6 @@
   cursor: pointer;
 }
 
-.nullLabelText {
-  font-family: var(--osdk-filter-null-label-font-family);
-  font-size: var(--osdk-filter-null-label-font-size);
-  line-height: var(--osdk-filter-null-label-line-height);
-  color: var(--osdk-filter-null-label-color);
-}
-
 .count {
   font-family: var(--osdk-filter-null-count-font-family);
   font-size: var(--osdk-filter-null-count-font-size);

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

@@ -1,9 +1,9 @@
 // CSS Module proxy for NullValueWrapper.module.css
 const styles = {
   "nullWrapper": "NullValueWrapper-module__nullWrapper___hfIurJcX",
+  "noValueLabel": "NullValueWrapper-module__noValueLabel___dz4qRXGp",
   "nullValueRow": "NullValueWrapper-module__nullValueRow___sHIqcE89",
   "nullLabel": "NullValueWrapper-module__nullLabel___D-f1K2Aq",
-  "nullLabelText": "NullValueWrapper-module__nullLabelText___jzAptlbZ",
   "count": "NullValueWrapper-module__count___-Rsq7EuS"
 };
 

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

@@ -17,6 +17,8 @@
 import classnames from "classnames";
 import React, { memo, useCallback, useMemo } from "react";
 import { Combobox } from "../../../base-components/combobox/Combobox.js";
+import { isEmptyValue } from "../../utils/filterValues.js";
+import { NoValueLabel } from "./NoValueLabel.js";
 import sharedStyles from "./shared.module.css.js";
 import styles from "./SingleSelectInput.module.css.js";
 function SingleSelectInputInner({
@@ -44,14 +46,17 @@ function SingleSelectInputInner({
     count
   }) => [value, count])), [values]);
   const comboboxFilter = useMemo(() => renderValue ? (itemValue, query) => renderValue(itemValue).toLowerCase().includes(query.toLowerCase()) : undefined, [renderValue]);
-  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
-  }, renderValue ? renderValue(value) : value), showCounts && /*#__PURE__*/React.createElement("span", {
-    className: styles.itemCount
-  }, "(", (countByValue.get(value) ?? 0).toLocaleString(), ")")), [countByValue, showCounts, renderValue]);
+  const renderItem = useCallback(value => {
+    const isEmpty = isEmptyValue(value);
+    return /*#__PURE__*/React.createElement(Combobox.Item, {
+      key: value,
+      value: value
+    }, /*#__PURE__*/React.createElement(Combobox.ItemIndicator, null), /*#__PURE__*/React.createElement("span", {
+      className: styles.itemLabel
+    }, isEmpty ? /*#__PURE__*/React.createElement(NoValueLabel, null) : renderValue ? renderValue(value) : value), showCounts && /*#__PURE__*/React.createElement("span", {
+      className: styles.itemCount
+    }, "(", (countByValue.get(value) ?? 0).toLocaleString(), ")"));
+  }, [countByValue, showCounts, renderValue]);
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.singleSelect, className),
     style: style,