@osdk/react-components 0.2.0-beta.19 → 0.2.0-beta.20

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

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxListSkeleton.js","names":["React","SkeletonBar","styles","SKELETON_ROWS","textWidth","CHECKBOX_SIZE","CheckboxListSkeleton","createElement","className","container","map","row","index","key","width","height","maxWidth","flexBar"],"sources":["CheckboxListSkeleton.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 from \"react\";\nimport { SkeletonBar } from \"../../../base-components/skeleton/SkeletonBar.js\";\nimport styles from \"./CheckboxListSkeleton.module.css\";\n\nconst SKELETON_ROWS = [\n  { textWidth: \"60%\" },\n  { textWidth: \"45%\" },\n  { textWidth: \"70%\" },\n];\n\nconst CHECKBOX_SIZE =\n  \"calc(var(--osdk-checkbox-icon-size) + var(--osdk-checkbox-padding) * 2)\";\n\nexport function CheckboxListSkeleton(): React.ReactElement {\n  return (\n    <div className={styles.container}>\n      {SKELETON_ROWS.map((row, index) => (\n        <div key={index} className={styles.row}>\n          <SkeletonBar\n            width={CHECKBOX_SIZE}\n            height={CHECKBOX_SIZE}\n          />\n          <SkeletonBar\n            height=\"var(--osdk-filter-skeleton-text-height)\"\n            maxWidth={row.textWidth}\n            className={styles.flexBar}\n          />\n          <SkeletonBar\n            width=\"var(--osdk-filter-skeleton-count-width)\"\n            height=\"var(--osdk-filter-skeleton-text-height)\"\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,kDAAkD;AAC9E,OAAOC,MAAM,MAAM,mCAAmC;AAEtD,MAAMC,aAAa,GAAG,CACpB;EAAEC,SAAS,EAAE;AAAM,CAAC,EACpB;EAAEA,SAAS,EAAE;AAAM,CAAC,EACpB;EAAEA,SAAS,EAAE;AAAM,CAAC,CACrB;AAED,MAAMC,aAAa,GACjB,yEAAyE;AAE3E,OAAO,SAASC,oBAAoBA,CAAA,EAAuB;EACzD,oBACEN,KAAA,CAAAO,aAAA;IAAKC,SAAS,EAAEN,MAAM,CAACO;EAAU,GAC9BN,aAAa,CAACO,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBAC5BZ,KAAA,CAAAO,aAAA;IAAKM,GAAG,EAAED,KAAM;IAACJ,SAAS,EAAEN,MAAM,CAACS;EAAI,gBACrCX,KAAA,CAAAO,aAAA,CAACN,WAAW;IACVa,KAAK,EAAET,aAAc;IACrBU,MAAM,EAAEV;EAAc,CACvB,CAAC,eACFL,KAAA,CAAAO,aAAA,CAACN,WAAW;IACVc,MAAM,EAAC,yCAAyC;IAChDC,QAAQ,EAAEL,GAAG,CAACP,SAAU;IACxBI,SAAS,EAAEN,MAAM,CAACe;EAAQ,CAC3B,CAAC,eACFjB,KAAA,CAAAO,aAAA,CAACN,WAAW;IACVa,KAAK,EAAC,yCAAyC;IAC/CC,MAAM,EAAC;EAAyC,CACjD,CACE,CACN,CACE,CAAC;AAEV","ignoreList":[]}

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

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-checkbox-list-gap);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-filter-checkbox-label-gap);
+  padding: var(--osdk-filter-checkbox-row-padding);
+}
+
+.flexBar {
+  flex: 1;
+}

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

@@ -0,0 +1,8 @@
+// CSS Module proxy for CheckboxListSkeleton.module.css
+const styles = {
+  "container": "CheckboxListSkeleton-module__container___34VQnT36",
+  "row": "CheckboxListSkeleton-module__row___j6zYcQ2Q",
+  "flexBar": "CheckboxListSkeleton-module__flexBar___6K266kRa"
+};
+
+export default styles;

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

@@ -17,8 +17,11 @@
 import { Button } from "@base-ui/react/button";
 import classnames from "classnames";
 import React, { memo, useCallback, useMemo, useState } from "react";
+import { filterValuesBySearch } from "../../utils/filterValues.js";
 import styles from "./ListogramInput.module.css.js";
+import { ListogramSkeleton } from "./ListogramSkeleton.js";
 import sharedStyles from "./shared.module.css.js";
+import { useStaleData } from "./useStaleData.js";
 function ListogramInputInner({
   values,
   maxCount,
@@ -30,9 +33,11 @@ function ListogramInputInner({
   displayMode = "full",
   className,
   style,
-  maxVisibleItems
+  maxVisibleItems,
+  searchQuery
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
+  const stableValues = useStaleData(values, isLoading);
   const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
   const toggleValue = useCallback(value => {
     if (selectedSet.has(value)) {
@@ -41,22 +46,26 @@ function ListogramInputInner({
       onChange([...selectedValues, value]);
     }
   }, [selectedValues, selectedSet, onChange]);
+  const filteredValues = useMemo(() => {
+    if (searchQuery) {
+      return filterValuesBySearch(stableValues, searchQuery, v => v.value);
+    }
+    return stableValues;
+  }, [stableValues, searchQuery]);
   const displayValues = useMemo(() => {
-    if (isExpanded || !maxVisibleItems) return values;
-    return values.slice(0, maxVisibleItems);
-  }, [values, maxVisibleItems, isExpanded]);
-  const hasMore = maxVisibleItems != null && values.length > maxVisibleItems;
+    if (isExpanded || !maxVisibleItems) return filteredValues;
+    return filteredValues.slice(0, maxVisibleItems);
+  }, [filteredValues, maxVisibleItems, isExpanded]);
+  const hasMore = maxVisibleItems != null && filteredValues.length > maxVisibleItems;
   return /*#__PURE__*/React.createElement("div", {
     className: classnames(styles.listogram, className),
     style: style,
-    "data-loading": isLoading
-  }, isLoading && /*#__PURE__*/React.createElement("div", {
-    className: sharedStyles.loadingMessage
-  }, "Loading values..."), error && /*#__PURE__*/React.createElement("div", {
+    "data-loading": isLoading && filteredValues.length > 0
+  }, error && /*#__PURE__*/React.createElement("div", {
     className: sharedStyles.errorMessage
-  }, "Error loading values: ", error.message), !isLoading && !error && values.length === 0 && /*#__PURE__*/React.createElement("div", {
+  }, "Error loading values: ", error.message), !error && filteredValues.length === 0 && isLoading && /*#__PURE__*/React.createElement(ListogramSkeleton, null), !error && filteredValues.length === 0 && !isLoading && /*#__PURE__*/React.createElement("div", {
     className: sharedStyles.emptyMessage
-  }, "No values available"), (values.length > 0 || isLoading) && /*#__PURE__*/React.createElement("div", {
+  }, "No values available"), filteredValues.length > 0 && /*#__PURE__*/React.createElement("div", {
     className: styles.container
   }, displayValues.map(({
     value,
@@ -88,7 +97,7 @@ function ListogramInputInner({
     type: "button",
     className: styles.row,
     onClick: () => setIsExpanded(true)
-  }, "View all (", values.length, ")")));
+  }, "View all (", filteredValues.length, ")")));
 }
 export const ListogramInput = /*#__PURE__*/memo(ListogramInputInner);
 //# sourceMappingURL=ListogramInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ListogramInput.js","names":["Button","classnames","React","memo","useCallback","useMemo","useState","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":[]}
+{"version":3,"file":"ListogramInput.js","names":["Button","classnames","React","memo","useCallback","useMemo","useState","filterValuesBySearch","styles","ListogramSkeleton","sharedStyles","useStaleData","ListogramInputInner","values","maxCount","isLoading","error","selectedValues","onChange","colorMap","displayMode","className","style","maxVisibleItems","searchQuery","isExpanded","setIsExpanded","stableValues","selectedSet","Set","toggleValue","value","has","filter","v","filteredValues","displayValues","slice","hasMore","length","createElement","listogram","errorMessage","message","emptyMessage","container","map","count","percentage","perRowColor","key","row","onClick","undefined","label","bar","barFill","toLocaleString","type","ListogramInput"],"sources":["ListogramInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport { filterValuesBySearch } from \"../../utils/filterValues.js\";\nimport styles from \"./ListogramInput.module.css\";\nimport { ListogramSkeleton } from \"./ListogramSkeleton.js\";\nimport sharedStyles from \"./shared.module.css\";\nimport { useStaleData } from \"./useStaleData.js\";\n\nexport type ListogramDisplayMode = \"full\" | \"count\" | \"minimal\";\n\ninterface ListogramInputProps {\n  values: PropertyAggregationValue[];\n  maxCount: number;\n  isLoading: boolean;\n  error: Error | null;\n  selectedValues: string[];\n  onChange: (values: string[]) => void;\n  colorMap?: Record<string, string>;\n  displayMode?: ListogramDisplayMode;\n  className?: string;\n  style?: React.CSSProperties;\n  maxVisibleItems?: number;\n  searchQuery?: string;\n}\n\nfunction ListogramInputInner({\n  values,\n  maxCount,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  colorMap,\n  displayMode = \"full\",\n  className,\n  style,\n  maxVisibleItems,\n  searchQuery,\n}: ListogramInputProps): React.ReactElement {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const stableValues = useStaleData(values, isLoading);\n\n  const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);\n\n  const toggleValue = useCallback(\n    (value: string) => {\n      if (selectedSet.has(value)) {\n        onChange(selectedValues.filter((v) => v !== value));\n      } else {\n        onChange([...selectedValues, value]);\n      }\n    },\n    [selectedValues, selectedSet, onChange],\n  );\n\n  const filteredValues = useMemo(() => {\n    if (searchQuery) {\n      return filterValuesBySearch(stableValues, searchQuery, (v) => v.value);\n    }\n    return stableValues;\n  }, [stableValues, searchQuery]);\n\n  const displayValues = useMemo(() => {\n    if (isExpanded || !maxVisibleItems) return filteredValues;\n    return filteredValues.slice(0, maxVisibleItems);\n  }, [filteredValues, maxVisibleItems, isExpanded]);\n\n  const hasMore = maxVisibleItems != null\n    && filteredValues.length > maxVisibleItems;\n\n  return (\n    <div\n      className={classnames(styles.listogram, className)}\n      style={style}\n      data-loading={isLoading && filteredValues.length > 0}\n    >\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading values: {error.message}\n        </div>\n      )}\n\n      {!error && filteredValues.length === 0 && isLoading && (\n        <ListogramSkeleton />\n      )}\n      {!error && filteredValues.length === 0 && !isLoading && (\n        <div className={sharedStyles.emptyMessage}>\n          No values available\n        </div>\n      )}\n\n      {filteredValues.length > 0 && (\n        <div className={styles.container}>\n          {displayValues.map(({ value, count }) => {\n            const percentage = maxCount > 0 ? (count / maxCount) * 100 : 0;\n            const perRowColor = colorMap?.[value];\n\n            return (\n              <Button\n                key={value}\n                className={styles.row}\n                onClick={() => toggleValue(value)}\n                aria-pressed={selectedSet.has(value)}\n                style={perRowColor || percentage > 0\n                  ? {\n                    \"--osdk-filter-listogram-bar-fill-scale\": percentage / 100,\n                    ...(perRowColor\n                      ? {\n                        \"--osdk-filter-listogram-row-bar-color\": perRowColor,\n                      }\n                      : undefined),\n                  } as React.CSSProperties\n                  : undefined}\n              >\n                <span className={styles.label}>{value}</span>\n                {displayMode === \"full\" && (\n                  <span className={styles.bar}>\n                    <span className={styles.barFill} />\n                  </span>\n                )}\n                {displayMode !== \"minimal\" && (\n                  <span className={styles.count}>\n                    {count.toLocaleString()}\n                  </span>\n                )}\n              </Button>\n            );\n          })}\n\n          {hasMore && !isExpanded && (\n            <Button\n              type=\"button\"\n              className={styles.row}\n              onClick={() => setIsExpanded(true)}\n            >\n              View all ({filteredValues.length})\n            </Button>\n          )}\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const ListogramInput = memo(\n  ListogramInputInner,\n) as typeof ListogramInputInner;\n"],"mappings":"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","ignoreList":[]}

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

@@ -17,6 +17,17 @@
 .listogram {
   display: flex;
   flex-direction: column;
+  transition: opacity var(--osdk-filter-content-fade-duration);
+}
+
+.listogram[data-loading="true"] {
+  opacity: 0.5;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .listogram {
+    transition: none;
+  }
 }
 
 .container {
@@ -63,7 +74,8 @@
 }
 
 .bar {
-  flex: 2;
+  width: var(--osdk-filter-listogram-bar-width);
+  flex-shrink: 0;
   height: var(--osdk-filter-listogram-bar-height);
   background: var(--osdk-filter-listogram-bar-bg);
   border-radius: var(--osdk-filter-listogram-bar-border-radius);

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

@@ -0,0 +1,45 @@
+/*
+ * 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 React from "react";
+import { SkeletonBar } from "../../../base-components/skeleton/SkeletonBar.js";
+import styles from "./ListogramSkeleton.module.css.js";
+const SKELETON_ROWS = [{
+  textWidth: "50%"
+}, {
+  textWidth: "35%"
+}, {
+  textWidth: "60%"
+}];
+export function ListogramSkeleton() {
+  return /*#__PURE__*/React.createElement("div", {
+    className: styles.container
+  }, SKELETON_ROWS.map((row, index) => /*#__PURE__*/React.createElement("div", {
+    key: index,
+    className: styles.row
+  }, /*#__PURE__*/React.createElement(SkeletonBar, {
+    height: "var(--osdk-filter-skeleton-text-height)",
+    maxWidth: row.textWidth,
+    className: styles.flexBar
+  }), /*#__PURE__*/React.createElement(SkeletonBar, {
+    width: "var(--osdk-filter-listogram-bar-width)",
+    height: "var(--osdk-filter-listogram-bar-height)"
+  }), /*#__PURE__*/React.createElement(SkeletonBar, {
+    width: "var(--osdk-filter-skeleton-count-width)",
+    height: "var(--osdk-filter-skeleton-text-height)"
+  }))));
+}
+//# sourceMappingURL=ListogramSkeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListogramSkeleton.js","names":["React","SkeletonBar","styles","SKELETON_ROWS","textWidth","ListogramSkeleton","createElement","className","container","map","row","index","key","height","maxWidth","flexBar","width"],"sources":["ListogramSkeleton.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 from \"react\";\nimport { SkeletonBar } from \"../../../base-components/skeleton/SkeletonBar.js\";\nimport styles from \"./ListogramSkeleton.module.css\";\n\nconst SKELETON_ROWS = [\n  { textWidth: \"50%\" },\n  { textWidth: \"35%\" },\n  { textWidth: \"60%\" },\n];\n\nexport function ListogramSkeleton(): React.ReactElement {\n  return (\n    <div className={styles.container}>\n      {SKELETON_ROWS.map((row, index) => (\n        <div key={index} className={styles.row}>\n          <SkeletonBar\n            height=\"var(--osdk-filter-skeleton-text-height)\"\n            maxWidth={row.textWidth}\n            className={styles.flexBar}\n          />\n          <SkeletonBar\n            width=\"var(--osdk-filter-listogram-bar-width)\"\n            height=\"var(--osdk-filter-listogram-bar-height)\"\n          />\n          <SkeletonBar\n            width=\"var(--osdk-filter-skeleton-count-width)\"\n            height=\"var(--osdk-filter-skeleton-text-height)\"\n          />\n        </div>\n      ))}\n    </div>\n  );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,WAAW,QAAQ,kDAAkD;AAC9E,OAAOC,MAAM,MAAM,gCAAgC;AAEnD,MAAMC,aAAa,GAAG,CACpB;EAAEC,SAAS,EAAE;AAAM,CAAC,EACpB;EAAEA,SAAS,EAAE;AAAM,CAAC,EACpB;EAAEA,SAAS,EAAE;AAAM,CAAC,CACrB;AAED,OAAO,SAASC,iBAAiBA,CAAA,EAAuB;EACtD,oBACEL,KAAA,CAAAM,aAAA;IAAKC,SAAS,EAAEL,MAAM,CAACM;EAAU,GAC9BL,aAAa,CAACM,GAAG,CAAC,CAACC,GAAG,EAAEC,KAAK,kBAC5BX,KAAA,CAAAM,aAAA;IAAKM,GAAG,EAAED,KAAM;IAACJ,SAAS,EAAEL,MAAM,CAACQ;EAAI,gBACrCV,KAAA,CAAAM,aAAA,CAACL,WAAW;IACVY,MAAM,EAAC,yCAAyC;IAChDC,QAAQ,EAAEJ,GAAG,CAACN,SAAU;IACxBG,SAAS,EAAEL,MAAM,CAACa;EAAQ,CAC3B,CAAC,eACFf,KAAA,CAAAM,aAAA,CAACL,WAAW;IACVe,KAAK,EAAC,wCAAwC;IAC9CH,MAAM,EAAC;EAAyC,CACjD,CAAC,eACFb,KAAA,CAAAM,aAAA,CAACL,WAAW;IACVe,KAAK,EAAC,yCAAyC;IAC/CH,MAAM,EAAC;EAAyC,CACjD,CACE,CACN,CACE,CAAC;AAEV","ignoreList":[]}

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

@@ -0,0 +1,32 @@
+/*
+ * 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.
+ */
+
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: var(--osdk-filter-listogram-gap);
+}
+
+.row {
+  display: flex;
+  align-items: center;
+  gap: var(--osdk-filter-listogram-row-gap);
+  padding: var(--osdk-filter-listogram-row-padding);
+}
+
+.flexBar {
+  flex: 1;
+}

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

@@ -0,0 +1,8 @@
+// CSS Module proxy for ListogramSkeleton.module.css
+const styles = {
+  "container": "ListogramSkeleton-module__container___OhztnRu9",
+  "row": "ListogramSkeleton-module__row___-JgFlzSX",
+  "flexBar": "ListogramSkeleton-module__flexBar___ohU5Nawa"
+};
+
+export default styles;

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

@@ -72,7 +72,7 @@ function MultiSelectInputInner({
     className: sharedStyles.tag
   }, "+", remainingCount, " more")), /*#__PURE__*/React.createElement("div", {
     className: styles.inputRow
-  }, /*#__PURE__*/React.createElement(Combobox.Input, {
+  }, /*#__PURE__*/React.createElement(Combobox.SearchInput, {
     placeholder: selectedValues.length > 0 ? `${selectedValues.length} selected` : placeholder,
     "aria-label": ariaLabel
   }), showClearAll && selectedValues.length > 0 && /*#__PURE__*/React.createElement(Combobox.Clear, {

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

@@ -1 +1 @@
-{"version":3,"file":"MultiSelectInput.js","names":["Button","classnames","React","memo","useCallback","Combobox","styles","sharedStyles","MultiSelectInputInner","values","isLoading","error","selectedValues","onChange","className","style","placeholder","maxDisplayedTags","showClearAll","ariaLabel","handleValueChange","newValues","removeValue","value","filter","v","clearAll","displayedTags","slice","remainingCount","length","createElement","multiSelect","errorMessage","message","emptyMessage","Root","multiple","onValueChange","loadingMessage","tagContainer","map","key","tag","type","tagRemove","onClick","inputRow","Input","Clear","clearButton","Portal","Positioner","Popup","Empty","count","Item","itemCount","toLocaleString","MultiSelectInput"],"sources":["MultiSelectInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport { Combobox } from \"../../../base-components/combobox/Combobox.js\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport styles from \"./MultiSelectInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\ninterface MultiSelectInputProps {\n  values: PropertyAggregationValue[];\n  isLoading: boolean;\n  error: Error | null;\n  selectedValues: string[];\n  onChange: (values: string[]) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  placeholder?: string;\n  maxDisplayedTags?: number;\n  showClearAll?: boolean;\n  ariaLabel?: string;\n}\n\nfunction MultiSelectInputInner({\n  values,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  className,\n  style,\n  placeholder = \"Select values...\",\n  maxDisplayedTags = 3,\n  showClearAll = true,\n  ariaLabel = \"Search values\",\n}: MultiSelectInputProps): React.ReactElement {\n  const handleValueChange = useCallback(\n    (newValues: string[] | null) => {\n      onChange(newValues ?? []);\n    },\n    [onChange],\n  );\n\n  const removeValue = useCallback(\n    (value: string) => {\n      onChange(selectedValues.filter((v) => v !== value));\n    },\n    [selectedValues, onChange],\n  );\n\n  const clearAll = useCallback(() => {\n    onChange([]);\n  }, [onChange]);\n\n  const displayedTags = selectedValues.slice(0, maxDisplayedTags);\n  const remainingCount = selectedValues.length - maxDisplayedTags;\n\n  return (\n    <div\n      className={classnames(styles.multiSelect, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading options: {error.message}\n        </div>\n      )}\n\n      {!error && values.length === 0 && (\n        <div className={sharedStyles.emptyMessage}>\n          {isLoading ? \"Loading options...\" : \"No options available\"}\n        </div>\n      )}\n\n      {(values.length > 0 || isLoading) && (\n        <Combobox.Root<string, true>\n          multiple\n          value={selectedValues}\n          onValueChange={handleValueChange}\n        >\n          {isLoading && (\n            <div className={sharedStyles.loadingMessage}>\n              Updating...\n            </div>\n          )}\n\n          {selectedValues.length > 0 && (\n            <div className={sharedStyles.tagContainer}>\n              {displayedTags.map((value) => (\n                <span key={value} className={sharedStyles.tag}>\n                  {value}\n                  <Button\n                    type=\"button\"\n                    className={sharedStyles.tagRemove}\n                    onClick={() =>\n                      removeValue(value)}\n                    aria-label={`Remove ${value}`}\n                  >\n                    ×\n                  </Button>\n                </span>\n              ))}\n              {remainingCount > 0 && (\n                <span className={sharedStyles.tag}>\n                  +{remainingCount} more\n                </span>\n              )}\n            </div>\n          )}\n\n          <div className={styles.inputRow}>\n            <Combobox.Input\n              placeholder={selectedValues.length > 0\n                ? `${selectedValues.length} selected`\n                : placeholder}\n              aria-label={ariaLabel}\n            />\n            {showClearAll && selectedValues.length > 0 && (\n              <Combobox.Clear\n                className={styles.clearButton}\n                onClick={clearAll}\n                aria-label=\"Clear all selections\"\n              />\n            )}\n          </div>\n\n          <Combobox.Portal>\n            <Combobox.Positioner>\n              <Combobox.Popup>\n                {values.length === 0\n                  ? <Combobox.Empty>No options available</Combobox.Empty>\n                  : values.map(({ value, count }) => (\n                    <Combobox.Item key={value} value={value}>\n                      <span>{value}</span>\n                      <span className={styles.itemCount}>\n                        ({count.toLocaleString()})\n                      </span>\n                    </Combobox.Item>\n                  ))}\n              </Combobox.Popup>\n            </Combobox.Positioner>\n          </Combobox.Portal>\n        </Combobox.Root>\n      )}\n    </div>\n  );\n}\n\nexport const MultiSelectInput = memo(\n  MultiSelectInputInner,\n) as typeof MultiSelectInputInner;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MultiSelectInput.js","names":["Button","classnames","React","memo","useCallback","Combobox","styles","sharedStyles","MultiSelectInputInner","values","isLoading","error","selectedValues","onChange","className","style","placeholder","maxDisplayedTags","showClearAll","ariaLabel","handleValueChange","newValues","removeValue","value","filter","v","clearAll","displayedTags","slice","remainingCount","length","createElement","multiSelect","errorMessage","message","emptyMessage","Root","multiple","onValueChange","loadingMessage","tagContainer","map","key","tag","type","tagRemove","onClick","inputRow","SearchInput","Clear","clearButton","Portal","Positioner","Popup","Empty","count","Item","itemCount","toLocaleString","MultiSelectInput"],"sources":["MultiSelectInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback } from \"react\";\nimport { Combobox } from \"../../../base-components/combobox/Combobox.js\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport styles from \"./MultiSelectInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\ninterface MultiSelectInputProps {\n  values: PropertyAggregationValue[];\n  isLoading: boolean;\n  error: Error | null;\n  selectedValues: string[];\n  onChange: (values: string[]) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  placeholder?: string;\n  maxDisplayedTags?: number;\n  showClearAll?: boolean;\n  ariaLabel?: string;\n}\n\nfunction MultiSelectInputInner({\n  values,\n  isLoading,\n  error,\n  selectedValues,\n  onChange,\n  className,\n  style,\n  placeholder = \"Select values...\",\n  maxDisplayedTags = 3,\n  showClearAll = true,\n  ariaLabel = \"Search values\",\n}: MultiSelectInputProps): React.ReactElement {\n  const handleValueChange = useCallback(\n    (newValues: string[] | null) => {\n      onChange(newValues ?? []);\n    },\n    [onChange],\n  );\n\n  const removeValue = useCallback(\n    (value: string) => {\n      onChange(selectedValues.filter((v) => v !== value));\n    },\n    [selectedValues, onChange],\n  );\n\n  const clearAll = useCallback(() => {\n    onChange([]);\n  }, [onChange]);\n\n  const displayedTags = selectedValues.slice(0, maxDisplayedTags);\n  const remainingCount = selectedValues.length - maxDisplayedTags;\n\n  return (\n    <div\n      className={classnames(styles.multiSelect, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {error && (\n        <div className={sharedStyles.errorMessage}>\n          Error loading options: {error.message}\n        </div>\n      )}\n\n      {!error && values.length === 0 && (\n        <div className={sharedStyles.emptyMessage}>\n          {isLoading ? \"Loading options...\" : \"No options available\"}\n        </div>\n      )}\n\n      {(values.length > 0 || isLoading) && (\n        <Combobox.Root<string, true>\n          multiple\n          value={selectedValues}\n          onValueChange={handleValueChange}\n        >\n          {isLoading && (\n            <div className={sharedStyles.loadingMessage}>\n              Updating...\n            </div>\n          )}\n\n          {selectedValues.length > 0 && (\n            <div className={sharedStyles.tagContainer}>\n              {displayedTags.map((value) => (\n                <span key={value} className={sharedStyles.tag}>\n                  {value}\n                  <Button\n                    type=\"button\"\n                    className={sharedStyles.tagRemove}\n                    onClick={() =>\n                      removeValue(value)}\n                    aria-label={`Remove ${value}`}\n                  >\n                    ×\n                  </Button>\n                </span>\n              ))}\n              {remainingCount > 0 && (\n                <span className={sharedStyles.tag}>\n                  +{remainingCount} more\n                </span>\n              )}\n            </div>\n          )}\n\n          <div className={styles.inputRow}>\n            <Combobox.SearchInput\n              placeholder={selectedValues.length > 0\n                ? `${selectedValues.length} selected`\n                : placeholder}\n              aria-label={ariaLabel}\n            />\n            {showClearAll && selectedValues.length > 0 && (\n              <Combobox.Clear\n                className={styles.clearButton}\n                onClick={clearAll}\n                aria-label=\"Clear all selections\"\n              />\n            )}\n          </div>\n\n          <Combobox.Portal>\n            <Combobox.Positioner>\n              <Combobox.Popup>\n                {values.length === 0\n                  ? <Combobox.Empty>No options available</Combobox.Empty>\n                  : values.map(({ value, count }) => (\n                    <Combobox.Item key={value} value={value}>\n                      <span>{value}</span>\n                      <span className={styles.itemCount}>\n                        ({count.toLocaleString()})\n                      </span>\n                    </Combobox.Item>\n                  ))}\n              </Combobox.Popup>\n            </Combobox.Positioner>\n          </Combobox.Portal>\n        </Combobox.Root>\n      )}\n    </div>\n  );\n}\n\nexport const MultiSelectInput = memo(\n  MultiSelectInputInner,\n) as typeof MultiSelectInputInner;\n"],"mappings":"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","ignoreList":[]}

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

@@ -21,7 +21,7 @@ import { debounce } from "lodash-es";
 import React, { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import { createHistogramBuckets, getMaxBucketCount } from "./createHistogramBuckets.js";
 import styles from "./RangeInput.module.css.js";
-import sharedStyles from "./shared.module.css.js";
+import { useStaleData } from "./useStaleData.js";
 const DEBOUNCE_MS = 300;
 function RangeInputInner({
   valueCountPairs,
@@ -66,31 +66,32 @@ function RangeInputInner({
       debouncedMaxChange.cancel();
     };
   }, [debouncedMinChange, debouncedMaxChange]);
+  const displayPairs = useStaleData(valueCountPairs, isLoading);
   const computedRange = useMemo(() => {
-    if (valueCountPairs.length === 0) return {
+    if (displayPairs.length === 0) return {
       min: undefined,
       max: undefined
     };
-    const min = valueCountPairs.reduce((acc, p) => Math.min(acc, config.toNumber(p.value)), Infinity);
-    const max = valueCountPairs.reduce((acc, p) => Math.max(acc, config.toNumber(p.value)), -Infinity);
+    const min = displayPairs.reduce((acc, p) => Math.min(acc, config.toNumber(p.value)), Infinity);
+    const max = displayPairs.reduce((acc, p) => Math.max(acc, config.toNumber(p.value)), -Infinity);
     return {
       min: config.fromNumber(min),
       max: config.fromNumber(max)
     };
-  }, [valueCountPairs, config]);
+  }, [displayPairs, config]);
   const dataRange = useMemo(() => ({
     dataMin: computedRange.min,
     dataMax: computedRange.max
   }), [computedRange.min, computedRange.max]);
   const buckets = useMemo(() => {
-    if (!showHistogram || valueCountPairs.length === 0 || computedRange.min === undefined || computedRange.max === undefined) {
+    if (!showHistogram || displayPairs.length === 0 || computedRange.min === undefined || computedRange.max === undefined) {
       return [];
     }
-    return createHistogramBuckets(valueCountPairs, {
+    return createHistogramBuckets(displayPairs, {
       min: computedRange.min,
       max: computedRange.max
     }, config.toNumber, config.fromNumber);
-  }, [showHistogram, valueCountPairs, computedRange, config]);
+  }, [showHistogram, displayPairs, computedRange, config]);
   const maxBucketCount = useMemo(() => getMaxBucketCount(buckets), [buckets]);
   const handleMinChange = useCallback(e => {
     const newValue = e.target.value;
@@ -106,8 +107,9 @@ function RangeInputInner({
     className: classnames(styles.rangeInput, className),
     style: style,
     "data-loading": isLoading
-  }, showHistogram && buckets.length > 0 && /*#__PURE__*/React.createElement("div", {
-    className: styles.histogramContainer
+  }, showHistogram && /*#__PURE__*/React.createElement("div", {
+    className: styles.histogramContainer,
+    "data-empty": buckets.length === 0
   }, buckets.map((bucket, index) => {
     const height = bucket.count / maxBucketCount * 100;
     const isInRange = (minValue === undefined || config.toNumber(bucket.max) >= config.toNumber(minValue)) && (maxValue === undefined || config.toNumber(bucket.min) <= config.toNumber(maxValue));
@@ -149,9 +151,7 @@ function RangeInputInner({
     value: localMax,
     onChange: handleMaxChange,
     placeholder: dataRange.dataMax !== undefined && config.formatPlaceholder ? config.formatPlaceholder(dataRange.dataMax) : undefined
-  }, config.inputProps)))), isLoading && /*#__PURE__*/React.createElement("div", {
-    className: sharedStyles.loadingMessage
-  }, "Loading..."));
+  }, config.inputProps)))));
 }
 export const RangeInput = /*#__PURE__*/memo(RangeInputInner);
 //# sourceMappingURL=RangeInput.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"RangeInput.js","names":["Input","classnames","debounce","React","memo","useCallback","useEffect","useId","useMemo","useRef","useState","createHistogramBuckets","getMaxBucketCount","styles","sharedStyles","DEBOUNCE_MS","RangeInputInner","valueCountPairs","isLoading","minValue","maxValue","onChange","showHistogram","className","style","config","minInputId","maxInputId","localMin","setLocalMin","formatValue","localMax","setLocalMax","onChangeRef","current","minValueRef","maxValueRef","debouncedMinChange","newValue","parsed","parseValue","debouncedMaxChange","cancel","computedRange","length","min","undefined","max","reduce","acc","p","Math","toNumber","value","Infinity","fromNumber","dataRange","dataMin","dataMax","buckets","maxBucketCount","handleMinChange","e","target","handleMaxChange","createElement","rangeInput","histogramContainer","map","bucket","index","height","count","isInRange","key","histogramBar","title","formatTooltip","rangeInputs","inputWrapper","htmlFor","inputLabel","minLabel","_extends","id","type","inputType","input","placeholder","formatPlaceholder","inputProps","separator","maxLabel","loadingMessage","RangeInput"],"sources":["RangeInput.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 { Input } from \"@base-ui/react/input\";\nimport classnames from \"classnames\";\nimport { debounce } from \"lodash-es\";\nimport React, {\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  createHistogramBuckets,\n  getMaxBucketCount,\n  type HistogramBucket,\n} from \"./createHistogramBuckets.js\";\nimport styles from \"./RangeInput.module.css\";\nimport sharedStyles from \"./shared.module.css\";\n\nconst DEBOUNCE_MS = 300;\n\nexport interface RangeInputConfig<T> {\n  inputType: \"number\" | \"date\";\n  formatValue: (value: T | undefined) => string;\n  parseValue: (value: string) => T | undefined;\n  toNumber: (value: T) => number;\n  fromNumber: (value: number) => T;\n  minLabel: string;\n  maxLabel: string;\n  formatTooltip: (min: T, max: T, count: number) => string;\n  formatPlaceholder?: (value: T) => string;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n\nexport interface RangeInputProps<T> {\n  valueCountPairs: Array<{ value: T; count: number }>;\n  isLoading: boolean;\n  minValue: T | undefined;\n  maxValue: T | undefined;\n  onChange: (min: T | undefined, max: T | undefined) => void;\n  showHistogram?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  config: RangeInputConfig<T>;\n}\n\nfunction RangeInputInner<T>({\n  valueCountPairs,\n  isLoading,\n  minValue,\n  maxValue,\n  onChange,\n  showHistogram = true,\n  className,\n  style,\n  config,\n}: RangeInputProps<T>): React.ReactElement {\n  const minInputId = useId();\n  const maxInputId = useId();\n\n  const [localMin, setLocalMin] = useState<string>(\n    config.formatValue(minValue),\n  );\n  const [localMax, setLocalMax] = useState<string>(\n    config.formatValue(maxValue),\n  );\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n  const minValueRef = useRef(minValue);\n  minValueRef.current = minValue;\n  const maxValueRef = useRef(maxValue);\n  maxValueRef.current = maxValue;\n\n  const debouncedMinChange = useMemo(\n    () =>\n      debounce((newValue: string) => {\n        const parsed = config.parseValue(newValue);\n        onChangeRef.current(parsed, maxValueRef.current);\n      }, DEBOUNCE_MS),\n    [config],\n  );\n\n  const debouncedMaxChange = useMemo(\n    () =>\n      debounce((newValue: string) => {\n        const parsed = config.parseValue(newValue);\n        onChangeRef.current(minValueRef.current, parsed);\n      }, DEBOUNCE_MS),\n    [config],\n  );\n\n  useEffect(() => {\n    setLocalMin(config.formatValue(minValue));\n    debouncedMinChange.cancel();\n  }, [minValue, config, debouncedMinChange]);\n\n  useEffect(() => {\n    setLocalMax(config.formatValue(maxValue));\n    debouncedMaxChange.cancel();\n  }, [maxValue, config, debouncedMaxChange]);\n\n  useEffect(() => {\n    return () => {\n      debouncedMinChange.cancel();\n      debouncedMaxChange.cancel();\n    };\n  }, [debouncedMinChange, debouncedMaxChange]);\n\n  const computedRange = useMemo(() => {\n    if (valueCountPairs.length === 0) return { min: undefined, max: undefined };\n    const min = valueCountPairs.reduce(\n      (acc, p) => Math.min(acc, config.toNumber(p.value)),\n      Infinity,\n    );\n    const max = valueCountPairs.reduce(\n      (acc, p) => Math.max(acc, config.toNumber(p.value)),\n      -Infinity,\n    );\n    return {\n      min: config.fromNumber(min),\n      max: config.fromNumber(max),\n    };\n  }, [valueCountPairs, config]);\n\n  const dataRange = useMemo(() => ({\n    dataMin: computedRange.min,\n    dataMax: computedRange.max,\n  }), [computedRange.min, computedRange.max]);\n\n  const buckets = useMemo<Array<HistogramBucket<T>>>(() => {\n    if (\n      !showHistogram\n      || valueCountPairs.length === 0\n      || computedRange.min === undefined\n      || computedRange.max === undefined\n    ) {\n      return [];\n    }\n\n    return createHistogramBuckets(\n      valueCountPairs,\n      { min: computedRange.min, max: computedRange.max },\n      config.toNumber,\n      config.fromNumber,\n    );\n  }, [showHistogram, valueCountPairs, computedRange, config]);\n\n  const maxBucketCount = useMemo(() => getMaxBucketCount(buckets), [buckets]);\n\n  const handleMinChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setLocalMin(newValue);\n      debouncedMinChange(newValue);\n    },\n    [debouncedMinChange],\n  );\n\n  const handleMaxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setLocalMax(newValue);\n      debouncedMaxChange(newValue);\n    },\n    [debouncedMaxChange],\n  );\n\n  return (\n    <div\n      className={classnames(styles.rangeInput, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {showHistogram && buckets.length > 0 && (\n        <div className={styles.histogramContainer}>\n          {buckets.map((bucket, index) => {\n            const height = (bucket.count / maxBucketCount) * 100;\n            const isInRange = (minValue === undefined\n              || config.toNumber(bucket.max) >= config.toNumber(minValue))\n              && (maxValue === undefined\n                || config.toNumber(bucket.min) <= config.toNumber(maxValue));\n\n            return (\n              <div\n                key={index}\n                className={styles.histogramBar}\n                data-in-range={isInRange}\n                style={{ height: `${Math.max(height, 2)}%` }}\n                title={config.formatTooltip(\n                  bucket.min,\n                  bucket.max,\n                  bucket.count,\n                )}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      <div className={styles.rangeInputs}>\n        <div className={styles.inputWrapper}>\n          <label htmlFor={minInputId} className={styles.inputLabel}>\n            {config.minLabel}\n          </label>\n          <Input\n            id={minInputId}\n            type={config.inputType}\n            className={styles.input}\n            value={localMin}\n            onChange={handleMinChange}\n            placeholder={dataRange.dataMin !== undefined\n                && config.formatPlaceholder\n              ? config.formatPlaceholder(dataRange.dataMin)\n              : undefined}\n            {...config.inputProps}\n          />\n        </div>\n\n        <span className={styles.separator} aria-hidden=\"true\">\n          –\n        </span>\n\n        <div className={styles.inputWrapper}>\n          <label htmlFor={maxInputId} className={styles.inputLabel}>\n            {config.maxLabel}\n          </label>\n          <Input\n            id={maxInputId}\n            type={config.inputType}\n            className={styles.input}\n            value={localMax}\n            onChange={handleMaxChange}\n            placeholder={dataRange.dataMax !== undefined\n                && config.formatPlaceholder\n              ? config.formatPlaceholder(dataRange.dataMax)\n              : undefined}\n            {...config.inputProps}\n          />\n        </div>\n      </div>\n\n      {isLoading && (\n        <div className={sharedStyles.loadingMessage}>\n          Loading...\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const RangeInput = memo(RangeInputInner) as typeof RangeInputInner;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"RangeInput.js","names":["Input","classnames","debounce","React","memo","useCallback","useEffect","useId","useMemo","useRef","useState","createHistogramBuckets","getMaxBucketCount","styles","useStaleData","DEBOUNCE_MS","RangeInputInner","valueCountPairs","isLoading","minValue","maxValue","onChange","showHistogram","className","style","config","minInputId","maxInputId","localMin","setLocalMin","formatValue","localMax","setLocalMax","onChangeRef","current","minValueRef","maxValueRef","debouncedMinChange","newValue","parsed","parseValue","debouncedMaxChange","cancel","displayPairs","computedRange","length","min","undefined","max","reduce","acc","p","Math","toNumber","value","Infinity","fromNumber","dataRange","dataMin","dataMax","buckets","maxBucketCount","handleMinChange","e","target","handleMaxChange","createElement","rangeInput","histogramContainer","map","bucket","index","height","count","isInRange","key","histogramBar","title","formatTooltip","rangeInputs","inputWrapper","htmlFor","inputLabel","minLabel","_extends","id","type","inputType","input","placeholder","formatPlaceholder","inputProps","separator","maxLabel","RangeInput"],"sources":["RangeInput.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 { Input } from \"@base-ui/react/input\";\nimport classnames from \"classnames\";\nimport { debounce } from \"lodash-es\";\nimport React, {\n  memo,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  createHistogramBuckets,\n  getMaxBucketCount,\n  type HistogramBucket,\n} from \"./createHistogramBuckets.js\";\nimport styles from \"./RangeInput.module.css\";\nimport { useStaleData } from \"./useStaleData.js\";\n\nconst DEBOUNCE_MS = 300;\n\nexport interface RangeInputConfig<T> {\n  inputType: \"number\" | \"date\";\n  formatValue: (value: T | undefined) => string;\n  parseValue: (value: string) => T | undefined;\n  toNumber: (value: T) => number;\n  fromNumber: (value: number) => T;\n  minLabel: string;\n  maxLabel: string;\n  formatTooltip: (min: T, max: T, count: number) => string;\n  formatPlaceholder?: (value: T) => string;\n  inputProps?: React.InputHTMLAttributes<HTMLInputElement>;\n}\n\nexport interface RangeInputProps<T> {\n  valueCountPairs: Array<{ value: T; count: number }>;\n  isLoading: boolean;\n  minValue: T | undefined;\n  maxValue: T | undefined;\n  onChange: (min: T | undefined, max: T | undefined) => void;\n  showHistogram?: boolean;\n  className?: string;\n  style?: React.CSSProperties;\n  config: RangeInputConfig<T>;\n}\n\nfunction RangeInputInner<T>({\n  valueCountPairs,\n  isLoading,\n  minValue,\n  maxValue,\n  onChange,\n  showHistogram = true,\n  className,\n  style,\n  config,\n}: RangeInputProps<T>): React.ReactElement {\n  const minInputId = useId();\n  const maxInputId = useId();\n\n  const [localMin, setLocalMin] = useState<string>(\n    config.formatValue(minValue),\n  );\n  const [localMax, setLocalMax] = useState<string>(\n    config.formatValue(maxValue),\n  );\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n  const minValueRef = useRef(minValue);\n  minValueRef.current = minValue;\n  const maxValueRef = useRef(maxValue);\n  maxValueRef.current = maxValue;\n\n  const debouncedMinChange = useMemo(\n    () =>\n      debounce((newValue: string) => {\n        const parsed = config.parseValue(newValue);\n        onChangeRef.current(parsed, maxValueRef.current);\n      }, DEBOUNCE_MS),\n    [config],\n  );\n\n  const debouncedMaxChange = useMemo(\n    () =>\n      debounce((newValue: string) => {\n        const parsed = config.parseValue(newValue);\n        onChangeRef.current(minValueRef.current, parsed);\n      }, DEBOUNCE_MS),\n    [config],\n  );\n\n  useEffect(() => {\n    setLocalMin(config.formatValue(minValue));\n    debouncedMinChange.cancel();\n  }, [minValue, config, debouncedMinChange]);\n\n  useEffect(() => {\n    setLocalMax(config.formatValue(maxValue));\n    debouncedMaxChange.cancel();\n  }, [maxValue, config, debouncedMaxChange]);\n\n  useEffect(() => {\n    return () => {\n      debouncedMinChange.cancel();\n      debouncedMaxChange.cancel();\n    };\n  }, [debouncedMinChange, debouncedMaxChange]);\n\n  const displayPairs = useStaleData(valueCountPairs, isLoading);\n\n  const computedRange = useMemo(() => {\n    if (displayPairs.length === 0) return { min: undefined, max: undefined };\n    const min = displayPairs.reduce(\n      (acc, p) => Math.min(acc, config.toNumber(p.value)),\n      Infinity,\n    );\n    const max = displayPairs.reduce(\n      (acc, p) => Math.max(acc, config.toNumber(p.value)),\n      -Infinity,\n    );\n    return {\n      min: config.fromNumber(min),\n      max: config.fromNumber(max),\n    };\n  }, [displayPairs, config]);\n\n  const dataRange = useMemo(() => ({\n    dataMin: computedRange.min,\n    dataMax: computedRange.max,\n  }), [computedRange.min, computedRange.max]);\n\n  const buckets = useMemo<Array<HistogramBucket<T>>>(() => {\n    if (\n      !showHistogram\n      || displayPairs.length === 0\n      || computedRange.min === undefined\n      || computedRange.max === undefined\n    ) {\n      return [];\n    }\n\n    return createHistogramBuckets(\n      displayPairs,\n      { min: computedRange.min, max: computedRange.max },\n      config.toNumber,\n      config.fromNumber,\n    );\n  }, [showHistogram, displayPairs, computedRange, config]);\n\n  const maxBucketCount = useMemo(() => getMaxBucketCount(buckets), [buckets]);\n\n  const handleMinChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setLocalMin(newValue);\n      debouncedMinChange(newValue);\n    },\n    [debouncedMinChange],\n  );\n\n  const handleMaxChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      const newValue = e.target.value;\n      setLocalMax(newValue);\n      debouncedMaxChange(newValue);\n    },\n    [debouncedMaxChange],\n  );\n\n  return (\n    <div\n      className={classnames(styles.rangeInput, className)}\n      style={style}\n      data-loading={isLoading}\n    >\n      {showHistogram && (\n        <div\n          className={styles.histogramContainer}\n          data-empty={buckets.length === 0}\n        >\n          {buckets.map((bucket, index) => {\n            const height = (bucket.count / maxBucketCount) * 100;\n            const isInRange = (minValue === undefined\n              || config.toNumber(bucket.max) >= config.toNumber(minValue))\n              && (maxValue === undefined\n                || config.toNumber(bucket.min) <= config.toNumber(maxValue));\n\n            return (\n              <div\n                key={index}\n                className={styles.histogramBar}\n                data-in-range={isInRange}\n                style={{ height: `${Math.max(height, 2)}%` }}\n                title={config.formatTooltip(\n                  bucket.min,\n                  bucket.max,\n                  bucket.count,\n                )}\n              />\n            );\n          })}\n        </div>\n      )}\n\n      <div className={styles.rangeInputs}>\n        <div className={styles.inputWrapper}>\n          <label htmlFor={minInputId} className={styles.inputLabel}>\n            {config.minLabel}\n          </label>\n          <Input\n            id={minInputId}\n            type={config.inputType}\n            className={styles.input}\n            value={localMin}\n            onChange={handleMinChange}\n            placeholder={dataRange.dataMin !== undefined\n                && config.formatPlaceholder\n              ? config.formatPlaceholder(dataRange.dataMin)\n              : undefined}\n            {...config.inputProps}\n          />\n        </div>\n\n        <span className={styles.separator} aria-hidden=\"true\">\n          –\n        </span>\n\n        <div className={styles.inputWrapper}>\n          <label htmlFor={maxInputId} className={styles.inputLabel}>\n            {config.maxLabel}\n          </label>\n          <Input\n            id={maxInputId}\n            type={config.inputType}\n            className={styles.input}\n            value={localMax}\n            onChange={handleMaxChange}\n            placeholder={dataRange.dataMax !== undefined\n                && config.formatPlaceholder\n              ? config.formatPlaceholder(dataRange.dataMax)\n              : undefined}\n            {...config.inputProps}\n          />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport const RangeInput = memo(RangeInputInner) as typeof RangeInputInner;\n"],"mappings":"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","ignoreList":[]}

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

@@ -18,6 +18,12 @@
   display: flex;
   flex-direction: column;
   gap: var(--osdk-filter-range-gap);
+  min-width: 0;
+  transition: opacity var(--osdk-filter-content-fade-duration);
+}
+
+.rangeInput[data-loading="true"] {
+  opacity: 0.5;
 }
 
 .histogramContainer {
@@ -25,6 +31,13 @@
   align-items: flex-end;
   height: var(--osdk-filter-range-histogram-height);
   gap: var(--osdk-filter-range-histogram-bar-gap);
+  overflow: hidden;
+  opacity: 0;
+  transition: opacity var(--osdk-filter-content-fade-duration);
+}
+
+.histogramContainer:not([data-empty="true"]) {
+  opacity: 1;
 }
 
 .histogramBar {
@@ -42,6 +55,7 @@
   display: flex;
   align-items: flex-end;
   gap: var(--osdk-filter-range-inputs-gap);
+  min-width: 0;
 }
 
 .inputWrapper {
@@ -49,6 +63,7 @@
   display: flex;
   flex-direction: column;
   gap: var(--osdk-filter-range-input-wrapper-gap);
+  min-width: 0;
 }
 
 .inputLabel {
@@ -65,6 +80,7 @@
   border-radius: var(--osdk-filter-input-border-radius);
   background: var(--osdk-filter-input-bg);
   color: var(--osdk-filter-input-color);
+  min-width: 0;
 
   &:focus {
     border-color: var(--osdk-filter-input-focus-border);
@@ -81,3 +97,10 @@
   padding-bottom: calc(var(--osdk-filter-range-inputs-gap) * 0.75);
   color: var(--osdk-filter-range-separator-color);
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .histogramContainer,
+  .rangeInput {
+    transition: none;
+  }
+}

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

@@ -113,7 +113,7 @@ function TextTagsInputInner({
     key: tag,
     tag: tag,
     onRemove: removeTag
-  }))), /*#__PURE__*/React.createElement(Combobox.Input, {
+  }))), /*#__PURE__*/React.createElement(Combobox.SearchInput, {
     className: styles.input,
     placeholder: tags.length > 0 ? "" : placeholder,
     onKeyDown: handleKeyDown,