@osdk/react-components 0.2.0-beta.27 → 0.2.0-beta.28
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/README.md +58 -3
- package/build/browser/base-components/checkbox/Checkbox.js +6 -2
- package/build/browser/base-components/checkbox/Checkbox.js.map +1 -1
- package/build/browser/base-components/checkbox/Checkbox.module.css +7 -2
- package/build/browser/filter-list/FilterListApi.js.map +1 -1
- package/build/browser/filter-list/FilterListItemApi.js.map +1 -1
- package/build/browser/filter-list/base/ExcludeDropdown.js +4 -3
- package/build/browser/filter-list/base/ExcludeDropdown.js.map +1 -1
- package/build/browser/filter-list/base/FilterIcons.js +7 -1
- package/build/browser/filter-list/base/FilterIcons.js.map +1 -1
- package/build/browser/filter-list/base/FilterList.module.css +0 -3
- package/build/browser/filter-list/base/FilterListContent.js +38 -17
- package/build/browser/filter-list/base/FilterListContent.js.map +1 -1
- package/build/browser/filter-list/base/FilterListItem.js +33 -1
- package/build/browser/filter-list/base/FilterListItem.js.map +1 -1
- package/build/browser/filter-list/base/FilterListItem.module.css +9 -6
- package/build/browser/filter-list/base/FilterListItem.module.css.js +1 -1
- package/build/browser/filter-list/base/SortableFilterListItem.js +3 -2
- package/build/browser/filter-list/base/SortableFilterListItem.js.map +1 -1
- package/build/browser/filter-list/base/inputs/ListogramInput.js +25 -10
- package/build/browser/filter-list/base/inputs/ListogramInput.js.map +1 -1
- package/build/browser/filter-list/base/inputs/ListogramInput.module.css +8 -0
- package/build/browser/filter-list/base/inputs/ListogramInput.module.css.js +1 -0
- package/build/browser/filter-list/base/inputs/NullValueWrapper.js +1 -1
- package/build/browser/filter-list/base/inputs/NullValueWrapper.js.map +1 -1
- package/build/browser/filter-list/base/inputs/RangeInput.js +5 -3
- package/build/browser/filter-list/base/inputs/RangeInput.js.map +1 -1
- package/build/browser/filter-list/base/inputs/RangeInput.module.css +0 -6
- package/build/browser/filter-list/base/inputs/index.js +0 -1
- package/build/browser/filter-list/base/inputs/index.js.map +1 -1
- package/build/browser/filter-list/hooks/useFilterListState.js +7 -11
- package/build/browser/filter-list/hooks/useFilterListState.js.map +1 -1
- package/build/browser/filter-list/hooks/usePropertyAggregation.js +7 -2
- package/build/browser/filter-list/hooks/usePropertyAggregation.js.map +1 -1
- package/build/browser/filter-list/inputs/LinkedPropertyInput.js +0 -35
- package/build/browser/filter-list/inputs/LinkedPropertyInput.js.map +1 -1
- package/build/browser/filter-list/inputs/ListogramFilterInput.js +5 -2
- package/build/browser/filter-list/inputs/ListogramFilterInput.js.map +1 -1
- package/build/browser/filter-list/inputs/PropertyFilterInput.js +0 -13
- package/build/browser/filter-list/inputs/PropertyFilterInput.js.map +1 -1
- package/build/browser/filter-list/utils/filterStateToWhereClause.js +2 -7
- package/build/browser/filter-list/utils/filterStateToWhereClause.js.map +1 -1
- package/build/browser/styles.css +24 -120
- package/build/cjs/public/experimental.cjs +1353 -1457
- package/build/cjs/public/experimental.cjs.map +1 -1
- package/build/cjs/public/experimental.css +133 -189
- package/build/cjs/public/experimental.css.map +1 -1
- package/build/cjs/public/experimental.d.cts +6 -14
- package/build/esm/base-components/checkbox/Checkbox.js +6 -2
- package/build/esm/base-components/checkbox/Checkbox.js.map +1 -1
- package/build/esm/base-components/checkbox/Checkbox.module.css +7 -2
- package/build/esm/filter-list/FilterListApi.js.map +1 -1
- package/build/esm/filter-list/FilterListItemApi.js.map +1 -1
- package/build/esm/filter-list/base/ExcludeDropdown.js +4 -3
- package/build/esm/filter-list/base/ExcludeDropdown.js.map +1 -1
- package/build/esm/filter-list/base/FilterIcons.js +7 -1
- package/build/esm/filter-list/base/FilterIcons.js.map +1 -1
- package/build/esm/filter-list/base/FilterList.module.css +0 -3
- package/build/esm/filter-list/base/FilterListContent.js +38 -17
- package/build/esm/filter-list/base/FilterListContent.js.map +1 -1
- package/build/esm/filter-list/base/FilterListItem.js +33 -1
- package/build/esm/filter-list/base/FilterListItem.js.map +1 -1
- package/build/esm/filter-list/base/FilterListItem.module.css +9 -6
- package/build/esm/filter-list/base/SortableFilterListItem.js +3 -2
- package/build/esm/filter-list/base/SortableFilterListItem.js.map +1 -1
- package/build/esm/filter-list/base/inputs/ListogramInput.js +25 -10
- package/build/esm/filter-list/base/inputs/ListogramInput.js.map +1 -1
- package/build/esm/filter-list/base/inputs/ListogramInput.module.css +8 -0
- package/build/esm/filter-list/base/inputs/NullValueWrapper.js +1 -1
- package/build/esm/filter-list/base/inputs/NullValueWrapper.js.map +1 -1
- package/build/esm/filter-list/base/inputs/RangeInput.js +5 -3
- package/build/esm/filter-list/base/inputs/RangeInput.js.map +1 -1
- package/build/esm/filter-list/base/inputs/RangeInput.module.css +0 -6
- package/build/esm/filter-list/base/inputs/index.js +0 -1
- package/build/esm/filter-list/base/inputs/index.js.map +1 -1
- package/build/esm/filter-list/hooks/useFilterListState.js +7 -11
- package/build/esm/filter-list/hooks/useFilterListState.js.map +1 -1
- package/build/esm/filter-list/hooks/usePropertyAggregation.js +7 -2
- package/build/esm/filter-list/hooks/usePropertyAggregation.js.map +1 -1
- package/build/esm/filter-list/inputs/LinkedPropertyInput.js +0 -35
- package/build/esm/filter-list/inputs/LinkedPropertyInput.js.map +1 -1
- package/build/esm/filter-list/inputs/ListogramFilterInput.js +5 -2
- package/build/esm/filter-list/inputs/ListogramFilterInput.js.map +1 -1
- package/build/esm/filter-list/inputs/PropertyFilterInput.js +0 -13
- package/build/esm/filter-list/inputs/PropertyFilterInput.js.map +1 -1
- package/build/esm/filter-list/utils/filterStateToWhereClause.js +2 -7
- package/build/esm/filter-list/utils/filterStateToWhereClause.js.map +1 -1
- package/build/types/base-components/checkbox/Checkbox.d.ts +2 -1
- package/build/types/base-components/checkbox/Checkbox.d.ts.map +1 -1
- package/build/types/filter-list/FilterListApi.d.ts +0 -7
- package/build/types/filter-list/FilterListApi.d.ts.map +1 -1
- package/build/types/filter-list/FilterListItemApi.d.ts +6 -7
- package/build/types/filter-list/FilterListItemApi.d.ts.map +1 -1
- package/build/types/filter-list/base/ExcludeDropdown.d.ts.map +1 -1
- package/build/types/filter-list/base/FilterIcons.d.ts +1 -0
- package/build/types/filter-list/base/FilterIcons.d.ts.map +1 -1
- package/build/types/filter-list/base/FilterListContent.d.ts.map +1 -1
- package/build/types/filter-list/base/FilterListItem.d.ts.map +1 -1
- package/build/types/filter-list/base/SortableFilterListItem.d.ts +2 -1
- package/build/types/filter-list/base/SortableFilterListItem.d.ts.map +1 -1
- package/build/types/filter-list/base/inputs/ListogramInput.d.ts +2 -1
- package/build/types/filter-list/base/inputs/ListogramInput.d.ts.map +1 -1
- package/build/types/filter-list/base/inputs/RangeInput.d.ts.map +1 -1
- package/build/types/filter-list/base/inputs/index.d.ts +0 -1
- package/build/types/filter-list/base/inputs/index.d.ts.map +1 -1
- package/build/types/filter-list/hooks/usePropertyAggregation.d.ts +1 -0
- package/build/types/filter-list/hooks/usePropertyAggregation.d.ts.map +1 -1
- package/build/types/filter-list/inputs/LinkedPropertyInput.d.ts.map +1 -1
- package/build/types/filter-list/inputs/ListogramFilterInput.d.ts.map +1 -1
- package/build/types/filter-list/inputs/PropertyFilterInput.d.ts.map +1 -1
- package/build/types/filter-list/utils/filterStateToWhereClause.d.ts +1 -1
- package/build/types/filter-list/utils/filterStateToWhereClause.d.ts.map +1 -1
- package/package.json +5 -5
- package/build/browser/filter-list/base/inputs/CheckboxListInput.js +0 -83
- package/build/browser/filter-list/base/inputs/CheckboxListInput.js.map +0 -1
- package/build/browser/filter-list/base/inputs/CheckboxListInput.module.css +0 -65
- package/build/browser/filter-list/base/inputs/CheckboxListInput.module.css.js +0 -10
- package/build/browser/filter-list/base/inputs/CheckboxListSkeleton.js +0 -46
- package/build/browser/filter-list/base/inputs/CheckboxListSkeleton.js.map +0 -1
- package/build/browser/filter-list/base/inputs/CheckboxListSkeleton.module.css +0 -32
- package/build/browser/filter-list/base/inputs/CheckboxListSkeleton.module.css.js +0 -8
- package/build/browser/filter-list/inputs/CheckboxListFilterInput.js +0 -66
- package/build/browser/filter-list/inputs/CheckboxListFilterInput.js.map +0 -1
- package/build/esm/filter-list/base/inputs/CheckboxListInput.js +0 -83
- package/build/esm/filter-list/base/inputs/CheckboxListInput.js.map +0 -1
- package/build/esm/filter-list/base/inputs/CheckboxListInput.module.css +0 -65
- package/build/esm/filter-list/base/inputs/CheckboxListSkeleton.js +0 -46
- package/build/esm/filter-list/base/inputs/CheckboxListSkeleton.js.map +0 -1
- package/build/esm/filter-list/base/inputs/CheckboxListSkeleton.module.css +0 -32
- package/build/esm/filter-list/inputs/CheckboxListFilterInput.js +0 -66
- package/build/esm/filter-list/inputs/CheckboxListFilterInput.js.map +0 -1
- package/build/types/filter-list/base/inputs/CheckboxListInput.d.ts +0 -16
- package/build/types/filter-list/base/inputs/CheckboxListInput.d.ts.map +0 -1
- package/build/types/filter-list/base/inputs/CheckboxListSkeleton.d.ts +0 -2
- package/build/types/filter-list/base/inputs/CheckboxListSkeleton.d.ts.map +0 -1
- package/build/types/filter-list/inputs/CheckboxListFilterInput.d.ts +0 -17
- package/build/types/filter-list/inputs/CheckboxListFilterInput.d.ts.map +0 -1
|
@@ -24,6 +24,37 @@ import { supportsExcluding, supportsSearch } from "../utils/filterValues.js";
|
|
|
24
24
|
import { DragHandleIcon } from "./DragHandleIcon.js";
|
|
25
25
|
import { OverflowMenuIcon, RemoveIcon, SearchIcon } from "./FilterIcons.js";
|
|
26
26
|
import styles from "./FilterListItem.module.css.js";
|
|
27
|
+
function hasActiveSelection(filterState) {
|
|
28
|
+
if (filterState == null) {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
switch (filterState.type) {
|
|
32
|
+
case "EXACT_MATCH":
|
|
33
|
+
return filterState.values.length > 0;
|
|
34
|
+
case "SELECT":
|
|
35
|
+
return filterState.selectedValues.length > 0;
|
|
36
|
+
case "CONTAINS_TEXT":
|
|
37
|
+
return filterState.value != null && filterState.value.length > 0;
|
|
38
|
+
case "NUMBER_RANGE":
|
|
39
|
+
return filterState.minValue != null || filterState.maxValue != null;
|
|
40
|
+
case "DATE_RANGE":
|
|
41
|
+
return filterState.minValue != null || filterState.maxValue != null;
|
|
42
|
+
case "TIMELINE":
|
|
43
|
+
return filterState.startDate != null || filterState.endDate != null;
|
|
44
|
+
case "TOGGLE":
|
|
45
|
+
return filterState.enabled;
|
|
46
|
+
case "keywordSearch":
|
|
47
|
+
return filterState.searchTerm.length > 0;
|
|
48
|
+
case "hasLink":
|
|
49
|
+
return filterState.hasLink;
|
|
50
|
+
case "linkedProperty":
|
|
51
|
+
return hasActiveSelection(filterState.linkedFilterState);
|
|
52
|
+
case "custom":
|
|
53
|
+
return true;
|
|
54
|
+
default:
|
|
55
|
+
return false;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
27
58
|
function FilterListItemInner({
|
|
28
59
|
definition,
|
|
29
60
|
filterKey,
|
|
@@ -82,7 +113,8 @@ function FilterListItemInner({
|
|
|
82
113
|
const searchQueryForInput = searchState.type === "open" ? searchState.query : undefined;
|
|
83
114
|
return /*#__PURE__*/React.createElement("div", {
|
|
84
115
|
className: classnames(styles.filterItem, className),
|
|
85
|
-
style: style
|
|
116
|
+
style: style,
|
|
117
|
+
"data-has-selection": hasActiveSelection(filterState) || undefined
|
|
86
118
|
}, /*#__PURE__*/React.createElement("div", {
|
|
87
119
|
className: styles.itemHeader
|
|
88
120
|
}, dragHandleAttributes && /*#__PURE__*/React.createElement(Button, _extends({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FilterListItem.js","names":["Button","Input","classnames","React","memo","useCallback","useState","ErrorBoundary","supportsExcluding","supportsSearch","DragHandleIcon","OverflowMenuIcon","RemoveIcon","SearchIcon","styles","FilterListItemInner","definition","filterKey","label","filterState","onFilterStateChanged","onFilterRemoved","renderInput","dragHandleAttributes","dragHandleListeners","className","style","searchState","setSearchState","type","excludeRowOpen","setExcludeRowOpen","handleFilterStateChanged","newState","handleToggleSearch","prev","query","handleSearchChange","e","target","value","handleSearchClear","handleRemove","handleToggleExcludeRow","searchInputRef","element","focus","preventScroll","showExcludeDropdown","showSearch","searchOpen","searchQuery","searchQueryForInput","undefined","createElement","filterItem","itemHeader","_extends","dragHandle","itemLabel","headerActionButton","onClick","searchRow","searchInput","onChange","placeholder","ref","searchClearButton","itemContent","errorMessage","FilterListItem"],"sources":["FilterListItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport { Input } from \"@base-ui/react/input\";\nimport type {\n DraggableAttributes,\n DraggableSyntheticListeners,\n} from \"@dnd-kit/core\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useState } from \"react\";\nimport { ErrorBoundary } from \"../../shared/ErrorBoundary.js\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { supportsExcluding, supportsSearch } from \"../utils/filterValues.js\";\nimport type { RenderFilterInput } from \"./BaseFilterListApi.js\";\nimport { DragHandleIcon } from \"./DragHandleIcon.js\";\nimport { OverflowMenuIcon, RemoveIcon, SearchIcon } from \"./FilterIcons.js\";\nimport styles from \"./FilterListItem.module.css\";\n\ninterface FilterListItemProps<D> {\n definition: D;\n filterKey: string;\n label: string;\n filterState: FilterState | undefined;\n onFilterStateChanged: (\n filterKey: string,\n state: FilterState,\n ) => void;\n onFilterRemoved?: (filterKey: string) => void;\n renderInput: RenderFilterInput<D>;\n dragHandleAttributes?: DraggableAttributes;\n dragHandleListeners?: DraggableSyntheticListeners;\n className?: string;\n style?: React.CSSProperties;\n}\n\nfunction FilterListItemInner<D>({\n definition,\n filterKey,\n label,\n filterState,\n onFilterStateChanged,\n onFilterRemoved,\n renderInput,\n dragHandleAttributes,\n dragHandleListeners,\n className,\n style,\n}: FilterListItemProps<D>): React.ReactElement {\n const [searchState, setSearchState] = useState<\n { type: \"closed\" } | { type: \"open\"; query: string }\n >({ type: \"closed\" });\n const [excludeRowOpen, setExcludeRowOpen] = useState(false);\n\n const handleFilterStateChanged = useCallback(\n (newState: FilterState) => {\n onFilterStateChanged(filterKey, newState);\n },\n [filterKey, onFilterStateChanged],\n );\n\n const handleToggleSearch = useCallback(() => {\n setSearchState((prev) =>\n prev.type === \"closed\" ? { type: \"open\", query: \"\" } : { type: \"closed\" }\n );\n }, []);\n\n const handleSearchChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n setSearchState({ type: \"open\", query: e.target.value });\n },\n [],\n );\n\n const handleSearchClear = useCallback(() => {\n setSearchState({ type: \"open\", query: \"\" });\n }, []);\n\n const handleRemove = useCallback(() => {\n onFilterRemoved?.(filterKey);\n }, [filterKey, onFilterRemoved]);\n\n const handleToggleExcludeRow = useCallback(() => {\n setExcludeRowOpen((prev) => !prev);\n }, []);\n\n const searchInputRef = useCallback((element: HTMLInputElement | null) => {\n element?.focus({ preventScroll: true });\n }, []);\n\n const showExcludeDropdown = supportsExcluding(filterState);\n const showSearch = supportsSearch(filterState);\n const hasOverflowActions = showExcludeDropdown;\n\n const searchOpen = searchState.type === \"open\";\n const searchQuery = searchState.type === \"open\" ? searchState.query : \"\";\n const searchQueryForInput = searchState.type === \"open\"\n ? searchState.query\n : undefined;\n\n return (\n <div\n className={classnames(styles.filterItem, className)}\n style={style}\n >\n <div className={styles.itemHeader}>\n {dragHandleAttributes && (\n <Button\n className={styles.dragHandle}\n aria-label={`Reorder ${label}`}\n {...dragHandleAttributes}\n {...dragHandleListeners}\n >\n <DragHandleIcon />\n </Button>\n )}\n <span className={styles.itemLabel}>{label}</span>\n {showSearch && (\n <Button\n className={styles.headerActionButton}\n onClick={handleToggleSearch}\n aria-label=\"Search values\"\n aria-pressed={searchOpen}\n >\n <SearchIcon />\n </Button>\n )}\n {onFilterRemoved && (\n <Button\n className={styles.headerActionButton}\n onClick={handleRemove}\n aria-label={`Remove ${label} filter`}\n >\n <RemoveIcon />\n </Button>\n )}\n {hasOverflowActions && (\n <Button\n className={styles.headerActionButton}\n onClick={handleToggleExcludeRow}\n aria-label=\"More actions\"\n aria-pressed={excludeRowOpen}\n >\n <OverflowMenuIcon />\n </Button>\n )}\n </div>\n\n {searchOpen && (\n <div className={styles.searchRow}>\n <Input\n type=\"text\"\n className={styles.searchInput}\n value={searchQuery}\n onChange={handleSearchChange}\n placeholder=\"Search property values...\"\n aria-label=\"Search property values\"\n ref={searchInputRef}\n />\n {searchQuery && (\n <Button\n type=\"button\"\n className={styles.searchClearButton}\n onClick={handleSearchClear}\n aria-label=\"Clear search\"\n >\n <RemoveIcon />\n </Button>\n )}\n </div>\n )}\n\n <div className={styles.itemContent}>\n <ErrorBoundary errorMessage=\"Error loading filter\">\n {renderInput({\n definition,\n filterKey,\n filterState,\n onFilterStateChanged: handleFilterStateChanged,\n searchQuery: searchQueryForInput,\n excludeRowOpen,\n })}\n </ErrorBoundary>\n </div>\n </div>\n );\n}\n\nexport const FilterListItem = memo(\n FilterListItemInner,\n) as typeof FilterListItemInner;\n"],"mappings":"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","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"FilterListItem.js","names":["Button","Input","classnames","React","memo","useCallback","useState","ErrorBoundary","supportsExcluding","supportsSearch","DragHandleIcon","OverflowMenuIcon","RemoveIcon","SearchIcon","styles","hasActiveSelection","filterState","type","values","length","selectedValues","value","minValue","maxValue","startDate","endDate","enabled","searchTerm","hasLink","linkedFilterState","FilterListItemInner","definition","filterKey","label","onFilterStateChanged","onFilterRemoved","renderInput","dragHandleAttributes","dragHandleListeners","className","style","searchState","setSearchState","excludeRowOpen","setExcludeRowOpen","handleFilterStateChanged","newState","handleToggleSearch","prev","query","handleSearchChange","e","target","handleSearchClear","handleRemove","handleToggleExcludeRow","searchInputRef","element","focus","preventScroll","showExcludeDropdown","showSearch","searchOpen","searchQuery","searchQueryForInput","undefined","createElement","filterItem","itemHeader","_extends","dragHandle","itemLabel","headerActionButton","onClick","searchRow","searchInput","onChange","placeholder","ref","searchClearButton","itemContent","errorMessage","FilterListItem"],"sources":["FilterListItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport { Input } from \"@base-ui/react/input\";\nimport type {\n DraggableAttributes,\n DraggableSyntheticListeners,\n} from \"@dnd-kit/core\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useState } from \"react\";\nimport { ErrorBoundary } from \"../../shared/ErrorBoundary.js\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport { supportsExcluding, supportsSearch } from \"../utils/filterValues.js\";\nimport type { RenderFilterInput } from \"./BaseFilterListApi.js\";\nimport { DragHandleIcon } from \"./DragHandleIcon.js\";\nimport { OverflowMenuIcon, RemoveIcon, SearchIcon } from \"./FilterIcons.js\";\nimport styles from \"./FilterListItem.module.css\";\n\nfunction hasActiveSelection(filterState: FilterState | undefined): boolean {\n if (filterState == null) {\n return false;\n }\n switch (filterState.type) {\n case \"EXACT_MATCH\":\n return filterState.values.length > 0;\n case \"SELECT\":\n return filterState.selectedValues.length > 0;\n case \"CONTAINS_TEXT\":\n return filterState.value != null && filterState.value.length > 0;\n case \"NUMBER_RANGE\":\n return filterState.minValue != null || filterState.maxValue != null;\n case \"DATE_RANGE\":\n return filterState.minValue != null || filterState.maxValue != null;\n case \"TIMELINE\":\n return filterState.startDate != null || filterState.endDate != null;\n case \"TOGGLE\":\n return filterState.enabled;\n case \"keywordSearch\":\n return filterState.searchTerm.length > 0;\n case \"hasLink\":\n return filterState.hasLink;\n case \"linkedProperty\":\n return hasActiveSelection(filterState.linkedFilterState);\n case \"custom\":\n return true;\n default:\n return false;\n }\n}\n\ninterface FilterListItemProps<D> {\n definition: D;\n filterKey: string;\n label: string;\n filterState: FilterState | undefined;\n onFilterStateChanged: (\n filterKey: string,\n state: FilterState,\n ) => void;\n onFilterRemoved?: (filterKey: string) => void;\n renderInput: RenderFilterInput<D>;\n dragHandleAttributes?: DraggableAttributes;\n dragHandleListeners?: DraggableSyntheticListeners;\n className?: string;\n style?: React.CSSProperties;\n}\n\nfunction FilterListItemInner<D>({\n definition,\n filterKey,\n label,\n filterState,\n onFilterStateChanged,\n onFilterRemoved,\n renderInput,\n dragHandleAttributes,\n dragHandleListeners,\n className,\n style,\n}: FilterListItemProps<D>): React.ReactElement {\n const [searchState, setSearchState] = useState<\n { type: \"closed\" } | { type: \"open\"; query: string }\n >({ type: \"closed\" });\n const [excludeRowOpen, setExcludeRowOpen] = useState(false);\n\n const handleFilterStateChanged = useCallback(\n (newState: FilterState) => {\n onFilterStateChanged(filterKey, newState);\n },\n [filterKey, onFilterStateChanged],\n );\n\n const handleToggleSearch = useCallback(() => {\n setSearchState((prev) =>\n prev.type === \"closed\" ? { type: \"open\", query: \"\" } : { type: \"closed\" }\n );\n }, []);\n\n const handleSearchChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n setSearchState({ type: \"open\", query: e.target.value });\n },\n [],\n );\n\n const handleSearchClear = useCallback(() => {\n setSearchState({ type: \"open\", query: \"\" });\n }, []);\n\n const handleRemove = useCallback(() => {\n onFilterRemoved?.(filterKey);\n }, [filterKey, onFilterRemoved]);\n\n const handleToggleExcludeRow = useCallback(() => {\n setExcludeRowOpen((prev) => !prev);\n }, []);\n\n const searchInputRef = useCallback((element: HTMLInputElement | null) => {\n element?.focus({ preventScroll: true });\n }, []);\n\n const showExcludeDropdown = supportsExcluding(filterState);\n const showSearch = supportsSearch(filterState);\n const hasOverflowActions = showExcludeDropdown;\n\n const searchOpen = searchState.type === \"open\";\n const searchQuery = searchState.type === \"open\" ? searchState.query : \"\";\n const searchQueryForInput = searchState.type === \"open\"\n ? searchState.query\n : undefined;\n\n return (\n <div\n className={classnames(styles.filterItem, className)}\n style={style}\n data-has-selection={hasActiveSelection(filterState) || undefined}\n >\n <div className={styles.itemHeader}>\n {dragHandleAttributes && (\n <Button\n className={styles.dragHandle}\n aria-label={`Reorder ${label}`}\n {...dragHandleAttributes}\n {...dragHandleListeners}\n >\n <DragHandleIcon />\n </Button>\n )}\n <span\n className={styles.itemLabel}\n >\n {label}\n </span>\n {showSearch && (\n <Button\n className={styles.headerActionButton}\n onClick={handleToggleSearch}\n aria-label=\"Search values\"\n aria-pressed={searchOpen}\n >\n <SearchIcon />\n </Button>\n )}\n {onFilterRemoved && (\n <Button\n className={styles.headerActionButton}\n onClick={handleRemove}\n aria-label={`Remove ${label} filter`}\n >\n <RemoveIcon />\n </Button>\n )}\n {hasOverflowActions && (\n <Button\n className={styles.headerActionButton}\n onClick={handleToggleExcludeRow}\n aria-label=\"More actions\"\n aria-pressed={excludeRowOpen}\n >\n <OverflowMenuIcon />\n </Button>\n )}\n </div>\n\n {searchOpen && (\n <div className={styles.searchRow}>\n <Input\n type=\"text\"\n className={styles.searchInput}\n value={searchQuery}\n onChange={handleSearchChange}\n placeholder=\"Search property values...\"\n aria-label=\"Search property values\"\n ref={searchInputRef}\n />\n {searchQuery && (\n <Button\n type=\"button\"\n className={styles.searchClearButton}\n onClick={handleSearchClear}\n aria-label=\"Clear search\"\n >\n <RemoveIcon />\n </Button>\n )}\n </div>\n )}\n\n <div className={styles.itemContent}>\n <ErrorBoundary errorMessage=\"Error loading filter\">\n {renderInput({\n definition,\n filterKey,\n filterState,\n onFilterStateChanged: handleFilterStateChanged,\n searchQuery: searchQueryForInput,\n excludeRowOpen,\n })}\n </ErrorBoundary>\n </div>\n </div>\n );\n}\n\nexport const FilterListItem = memo(\n FilterListItemInner,\n) as typeof FilterListItemInner;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -20,6 +20,15 @@
|
|
|
20
20
|
gap: var(--osdk-filter-item-gap);
|
|
21
21
|
border-radius: var(--osdk-filter-item-border-radius);
|
|
22
22
|
padding: var(--osdk-filter-item-padding);
|
|
23
|
+
border: 1px solid transparent;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.filterItem[data-has-selection] {
|
|
27
|
+
border-color: var(--osdk-intent-primary-rest);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.filterItem[data-has-selection] .searchRow {
|
|
31
|
+
border-color: transparent;
|
|
23
32
|
}
|
|
24
33
|
|
|
25
34
|
.itemHeader {
|
|
@@ -118,11 +127,6 @@
|
|
|
118
127
|
border-radius: var(--osdk-filter-input-border-radius);
|
|
119
128
|
padding: var(--osdk-filter-input-padding);
|
|
120
129
|
gap: var(--osdk-filter-input-gap);
|
|
121
|
-
|
|
122
|
-
&:focus-within {
|
|
123
|
-
outline: var(--osdk-filter-input-focus-outline-width) solid var(--osdk-filter-input-focus-outline-color);
|
|
124
|
-
outline-offset: var(--osdk-filter-input-focus-outline-offset);
|
|
125
|
-
}
|
|
126
130
|
}
|
|
127
131
|
|
|
128
132
|
.searchInput {
|
|
@@ -183,7 +187,6 @@
|
|
|
183
187
|
}
|
|
184
188
|
}
|
|
185
189
|
|
|
186
|
-
.filterItem:hover [data-exclude-row],
|
|
187
190
|
.excludeRowVisible {
|
|
188
191
|
opacity: 1;
|
|
189
192
|
height: auto;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
// CSS Module proxy for FilterListItem.module.css
|
|
2
2
|
const styles = {
|
|
3
3
|
"filterItem": "FilterListItem-module__filterItem___fDBkbb7u",
|
|
4
|
+
"searchRow": "FilterListItem-module__searchRow___4fUrAgAm",
|
|
4
5
|
"itemHeader": "FilterListItem-module__itemHeader___jp4epXg-",
|
|
5
6
|
"itemLabel": "FilterListItem-module__itemLabel___cEnbqE59",
|
|
6
7
|
"itemContent": "FilterListItem-module__itemContent___PfVHHhIy",
|
|
7
8
|
"dragHandle": "FilterListItem-module__dragHandle___BwFrILWs",
|
|
8
9
|
"headerActionButton": "FilterListItem-module__headerActionButton___x10Z2Kx0",
|
|
9
|
-
"searchRow": "FilterListItem-module__searchRow___4fUrAgAm",
|
|
10
10
|
"searchInput": "FilterListItem-module__searchInput___v-qwznpk",
|
|
11
11
|
"searchClearButton": "FilterListItem-module__searchClearButton___HXHweIEa",
|
|
12
12
|
"excludeRow": "FilterListItem-module__excludeRow___6hctgE28",
|
|
@@ -17,10 +17,10 @@
|
|
|
17
17
|
import { useSortable } from "@dnd-kit/sortable";
|
|
18
18
|
import { CSS } from "@dnd-kit/utilities";
|
|
19
19
|
import classnames from "classnames";
|
|
20
|
-
import React, { useMemo } from "react";
|
|
20
|
+
import React, { memo, useMemo } from "react";
|
|
21
21
|
import { FilterListItem } from "./FilterListItem.js";
|
|
22
22
|
import styles from "./FilterListItem.module.css.js";
|
|
23
|
-
|
|
23
|
+
function SortableFilterListItemInner({
|
|
24
24
|
id,
|
|
25
25
|
definition,
|
|
26
26
|
filterKey,
|
|
@@ -60,4 +60,5 @@ export function SortableFilterListItem({
|
|
|
60
60
|
dragHandleListeners: listeners
|
|
61
61
|
}));
|
|
62
62
|
}
|
|
63
|
+
export const SortableFilterListItem = /*#__PURE__*/memo(SortableFilterListItemInner);
|
|
63
64
|
//# sourceMappingURL=SortableFilterListItem.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SortableFilterListItem.js","names":["useSortable","CSS","classnames","React","useMemo","FilterListItem","styles","
|
|
1
|
+
{"version":3,"file":"SortableFilterListItem.js","names":["useSortable","CSS","classnames","React","memo","useMemo","FilterListItem","styles","SortableFilterListItemInner","id","definition","filterKey","label","filterState","onFilterStateChanged","onFilterRemoved","renderInput","attributes","listeners","setNodeRef","transform","transition","isDragging","style","Transform","toString","undefined","createElement","ref","className","dragging","dragHandleAttributes","dragHandleListeners","SortableFilterListItem"],"sources":["SortableFilterListItem.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useSortable } from \"@dnd-kit/sortable\";\nimport { CSS } from \"@dnd-kit/utilities\";\nimport classnames from \"classnames\";\nimport React, { memo, useMemo } from \"react\";\nimport type { FilterState } from \"../FilterListItemApi.js\";\nimport type { RenderFilterInput } from \"./BaseFilterListApi.js\";\nimport { FilterListItem } from \"./FilterListItem.js\";\nimport styles from \"./FilterListItem.module.css\";\n\ninterface SortableFilterListItemProps<D> {\n id: string;\n definition: D;\n filterKey: string;\n label: string;\n filterState: FilterState | undefined;\n onFilterStateChanged: (\n filterKey: string,\n state: FilterState,\n ) => void;\n onFilterRemoved?: (filterKey: string) => void;\n renderInput: RenderFilterInput<D>;\n}\n\nfunction SortableFilterListItemInner<D>({\n id,\n definition,\n filterKey,\n label,\n filterState,\n onFilterStateChanged,\n onFilterRemoved,\n renderInput,\n}: SortableFilterListItemProps<D>): React.ReactElement {\n const {\n attributes,\n listeners,\n setNodeRef,\n transform,\n transition,\n isDragging,\n } = useSortable({ id });\n\n const style = useMemo<React.CSSProperties>(() => ({\n transform: CSS.Transform.toString(transform),\n transition: transition ?? undefined,\n }), [transform, transition]);\n\n return (\n <div\n ref={setNodeRef}\n style={style}\n className={classnames(isDragging && styles.dragging)}\n >\n <FilterListItem\n definition={definition}\n filterKey={filterKey}\n label={label}\n filterState={filterState}\n onFilterStateChanged={onFilterStateChanged}\n onFilterRemoved={onFilterRemoved}\n renderInput={renderInput}\n dragHandleAttributes={attributes}\n dragHandleListeners={listeners}\n />\n </div>\n );\n}\n\nexport const SortableFilterListItem = memo(\n SortableFilterListItemInner,\n) as typeof SortableFilterListItemInner;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,WAAW,QAAQ,mBAAmB;AAC/C,SAASC,GAAG,QAAQ,oBAAoB;AACxC,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,OAAO,QAAQ,OAAO;AAG5C,SAASC,cAAc,QAAQ,qBAAqB;AACpD,OAAOC,MAAM,MAAM,6BAA6B;AAgBhD,SAASC,2BAA2BA,CAAI;EACtCC,EAAE;EACFC,UAAU;EACVC,SAAS;EACTC,KAAK;EACLC,WAAW;EACXC,oBAAoB;EACpBC,eAAe;EACfC;AAC8B,CAAC,EAAsB;EACrD,MAAM;IACJC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,UAAU;IACVC;EACF,CAAC,GAAGtB,WAAW,CAAC;IAAES;EAAG,CAAC,CAAC;EAEvB,MAAMc,KAAK,GAAGlB,OAAO,CAAsB,OAAO;IAChDe,SAAS,EAAEnB,GAAG,CAACuB,SAAS,CAACC,QAAQ,CAACL,SAAS,CAAC;IAC5CC,UAAU,EAAEA,UAAU,IAAIK;EAC5B,CAAC,CAAC,EAAE,CAACN,SAAS,EAAEC,UAAU,CAAC,CAAC;EAE5B,oBACElB,KAAA,CAAAwB,aAAA;IACEC,GAAG,EAAET,UAAW;IAChBI,KAAK,EAAEA,KAAM;IACbM,SAAS,EAAE3B,UAAU,CAACoB,UAAU,IAAIf,MAAM,CAACuB,QAAQ;EAAE,gBAErD3B,KAAA,CAAAwB,aAAA,CAACrB,cAAc;IACbI,UAAU,EAAEA,UAAW;IACvBC,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA,WAAY;IACzBC,oBAAoB,EAAEA,oBAAqB;IAC3CC,eAAe,EAAEA,eAAgB;IACjCC,WAAW,EAAEA,WAAY;IACzBe,oBAAoB,EAAEd,UAAW;IACjCe,mBAAmB,EAAEd;EAAU,CAChC,CACE,CAAC;AAEV;AAEA,OAAO,MAAMe,sBAAsB,gBAAG7B,IAAI,CACxCI,2BACF,CAAuC","ignoreList":[]}
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
import { Button } from "@base-ui/react/button";
|
|
18
18
|
import classnames from "classnames";
|
|
19
19
|
import React, { memo, useCallback, useMemo, useState } from "react";
|
|
20
|
+
import { Checkbox } from "../../../base-components/checkbox/Checkbox.js";
|
|
20
21
|
import { filterValuesBySearch } from "../../utils/filterValues.js";
|
|
21
22
|
import styles from "./ListogramInput.module.css.js";
|
|
22
23
|
import { ListogramSkeleton } from "./ListogramSkeleton.js";
|
|
@@ -31,6 +32,7 @@ function ListogramInputInner({
|
|
|
31
32
|
onChange,
|
|
32
33
|
colorMap,
|
|
33
34
|
displayMode = "full",
|
|
35
|
+
isExcluding,
|
|
34
36
|
className,
|
|
35
37
|
style,
|
|
36
38
|
maxVisibleItems,
|
|
@@ -52,11 +54,16 @@ function ListogramInputInner({
|
|
|
52
54
|
}
|
|
53
55
|
return stableValues;
|
|
54
56
|
}, [stableValues, searchQuery]);
|
|
57
|
+
const sortedValues = useMemo(() => {
|
|
58
|
+
const selected = filteredValues.filter(v => selectedSet.has(v.value));
|
|
59
|
+
const unselected = filteredValues.filter(v => !selectedSet.has(v.value));
|
|
60
|
+
return [...selected, ...unselected];
|
|
61
|
+
}, [filteredValues, selectedSet]);
|
|
55
62
|
const displayValues = useMemo(() => {
|
|
56
|
-
if (isExpanded || !maxVisibleItems) return
|
|
57
|
-
return
|
|
58
|
-
}, [
|
|
59
|
-
const hasMore = maxVisibleItems != null &&
|
|
63
|
+
if (isExpanded || !maxVisibleItems) return sortedValues;
|
|
64
|
+
return sortedValues.slice(0, maxVisibleItems);
|
|
65
|
+
}, [sortedValues, maxVisibleItems, isExpanded]);
|
|
66
|
+
const hasMore = maxVisibleItems != null && sortedValues.length > maxVisibleItems;
|
|
60
67
|
return /*#__PURE__*/React.createElement("div", {
|
|
61
68
|
className: classnames(styles.listogram, className),
|
|
62
69
|
style: style,
|
|
@@ -85,19 +92,27 @@ function ListogramInputInner({
|
|
|
85
92
|
} : undefined)
|
|
86
93
|
} : undefined
|
|
87
94
|
}, /*#__PURE__*/React.createElement("span", {
|
|
88
|
-
className: styles.
|
|
89
|
-
|
|
95
|
+
className: styles.checkbox,
|
|
96
|
+
onClick: e => e.stopPropagation()
|
|
97
|
+
}, /*#__PURE__*/React.createElement(Checkbox, {
|
|
98
|
+
checked: selectedSet.has(value),
|
|
99
|
+
onCheckedChange: () => toggleValue(value),
|
|
100
|
+
isExcluding: isExcluding
|
|
101
|
+
})), /*#__PURE__*/React.createElement("span", {
|
|
102
|
+
className: styles.label,
|
|
103
|
+
"data-excluding": isExcluding && selectedSet.has(value) || undefined
|
|
104
|
+
}, value), displayMode !== "minimal" && /*#__PURE__*/React.createElement("span", {
|
|
105
|
+
className: styles.count
|
|
106
|
+
}, count.toLocaleString()), displayMode === "full" && /*#__PURE__*/React.createElement("span", {
|
|
90
107
|
className: styles.bar
|
|
91
108
|
}, /*#__PURE__*/React.createElement("span", {
|
|
92
109
|
className: styles.barFill
|
|
93
|
-
}))
|
|
94
|
-
className: styles.count
|
|
95
|
-
}, count.toLocaleString()));
|
|
110
|
+
})));
|
|
96
111
|
}), hasMore && !isExpanded && /*#__PURE__*/React.createElement(Button, {
|
|
97
112
|
type: "button",
|
|
98
113
|
className: styles.row,
|
|
99
114
|
onClick: () => setIsExpanded(true)
|
|
100
|
-
}, "View all (",
|
|
115
|
+
}, "View all (", sortedValues.length, ")")));
|
|
101
116
|
}
|
|
102
117
|
export const ListogramInput = /*#__PURE__*/memo(ListogramInputInner);
|
|
103
118
|
//# sourceMappingURL=ListogramInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListogramInput.js","names":["Button","classnames","React","memo","useCallback","useMemo","useState","filterValuesBySearch","styles","ListogramSkeleton","sharedStyles","useStableData","ListogramInputInner","values","maxCount","isLoading","error","selectedValues","onChange","colorMap","displayMode","className","style","maxVisibleItems","searchQuery","isExpanded","setIsExpanded","stableValues","selectedSet","Set","toggleValue","value","has","filter","v","filteredValues","displayValues","slice","hasMore","length","createElement","listogram","errorMessage","message","emptyMessage","container","map","count","percentage","perRowColor","key","row","onClick","undefined","label","bar","barFill","toLocaleString","type","ListogramInput"],"sources":["ListogramInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport { filterValuesBySearch } from \"../../utils/filterValues.js\";\nimport styles from \"./ListogramInput.module.css\";\nimport { ListogramSkeleton } from \"./ListogramSkeleton.js\";\nimport sharedStyles from \"./shared.module.css\";\nimport { useStableData } from \"./useStableData.js\";\n\nexport type ListogramDisplayMode = \"full\" | \"count\" | \"minimal\";\n\ninterface ListogramInputProps {\n values: PropertyAggregationValue[];\n maxCount: number;\n isLoading: boolean;\n error: Error | null;\n selectedValues: string[];\n onChange: (values: string[]) => void;\n colorMap?: Record<string, string>;\n displayMode?: ListogramDisplayMode;\n className?: string;\n style?: React.CSSProperties;\n maxVisibleItems?: number;\n searchQuery?: string;\n}\n\nfunction ListogramInputInner({\n values,\n maxCount,\n isLoading,\n error,\n selectedValues,\n onChange,\n colorMap,\n displayMode = \"full\",\n className,\n style,\n maxVisibleItems,\n searchQuery,\n}: ListogramInputProps): React.ReactElement {\n const [isExpanded, setIsExpanded] = useState(false);\n\n const stableValues = useStableData(values, isLoading);\n\n const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);\n\n const toggleValue = useCallback(\n (value: string) => {\n if (selectedSet.has(value)) {\n onChange(selectedValues.filter((v) => v !== value));\n } else {\n onChange([...selectedValues, value]);\n }\n },\n [selectedValues, selectedSet, onChange],\n );\n\n const filteredValues = useMemo(() => {\n if (searchQuery) {\n return filterValuesBySearch(stableValues, searchQuery, (v) => v.value);\n }\n return stableValues;\n }, [stableValues, searchQuery]);\n\n const displayValues = useMemo(() => {\n if (isExpanded || !maxVisibleItems) return filteredValues;\n return filteredValues.slice(0, maxVisibleItems);\n }, [filteredValues, maxVisibleItems, isExpanded]);\n\n const hasMore = maxVisibleItems != null\n && filteredValues.length > maxVisibleItems;\n\n return (\n <div\n className={classnames(styles.listogram, className)}\n style={style}\n data-loading={isLoading && filteredValues.length > 0}\n >\n {error && (\n <div className={sharedStyles.errorMessage}>\n Error loading values: {error.message}\n </div>\n )}\n\n {!error && filteredValues.length === 0 && isLoading && (\n <ListogramSkeleton />\n )}\n {!error && filteredValues.length === 0 && !isLoading && (\n <div className={sharedStyles.emptyMessage}>\n No values available\n </div>\n )}\n\n {filteredValues.length > 0 && (\n <div className={styles.container}>\n {displayValues.map(({ value, count }) => {\n const percentage = maxCount > 0 ? (count / maxCount) * 100 : 0;\n const perRowColor = colorMap?.[value];\n\n return (\n <Button\n key={value}\n className={styles.row}\n onClick={() => toggleValue(value)}\n aria-pressed={selectedSet.has(value)}\n style={perRowColor || percentage > 0\n ? {\n \"--osdk-filter-listogram-bar-fill-scale\": percentage / 100,\n ...(perRowColor\n ? {\n \"--osdk-filter-listogram-row-bar-color\": perRowColor,\n }\n : undefined),\n } as React.CSSProperties\n : undefined}\n >\n <span className={styles.label}>{value}</span>\n {displayMode === \"full\" && (\n <span className={styles.bar}>\n <span className={styles.barFill} />\n </span>\n )}\n {displayMode !== \"minimal\" && (\n <span className={styles.count}>\n {count.toLocaleString()}\n </span>\n )}\n </Button>\n );\n })}\n\n {hasMore && !isExpanded && (\n <Button\n type=\"button\"\n className={styles.row}\n onClick={() => setIsExpanded(true)}\n >\n View all ({filteredValues.length})\n </Button>\n )}\n </div>\n )}\n </div>\n );\n}\n\nexport const ListogramInput = memo(\n ListogramInputInner,\n) as typeof ListogramInputInner;\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,MAAM,QAAQ,uBAAuB;AAC9C,OAAOC,UAAU,MAAM,YAAY;AACnC,OAAOC,KAAK,IAAIC,IAAI,EAAEC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAEnE,SAASC,oBAAoB,QAAQ,6BAA6B;AAClE,OAAOC,MAAM,MAAM,6BAA6B;AAChD,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,OAAOC,YAAY,MAAM,qBAAqB;AAC9C,SAASC,aAAa,QAAQ,oBAAoB;AAmBlD,SAASC,mBAAmBA,CAAC;EAC3BC,MAAM;EACNC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,cAAc;EACdC,QAAQ;EACRC,QAAQ;EACRC,WAAW,GAAG,MAAM;EACpBC,SAAS;EACTC,KAAK;EACLC,eAAe;EACfC;AACmB,CAAC,EAAsB;EAC1C,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAGpB,QAAQ,CAAC,KAAK,CAAC;EAEnD,MAAMqB,YAAY,GAAGhB,aAAa,CAACE,MAAM,EAAEE,SAAS,CAAC;EAErD,MAAMa,WAAW,GAAGvB,OAAO,CAAC,MAAM,IAAIwB,GAAG,CAACZ,cAAc,CAAC,EAAE,CAACA,cAAc,CAAC,CAAC;EAE5E,MAAMa,WAAW,GAAG1B,WAAW,CAC5B2B,KAAa,IAAK;IACjB,IAAIH,WAAW,CAACI,GAAG,CAACD,KAAK,CAAC,EAAE;MAC1Bb,QAAQ,CAACD,cAAc,CAACgB,MAAM,CAAEC,CAAC,IAAKA,CAAC,KAAKH,KAAK,CAAC,CAAC;IACrD,CAAC,MAAM;MACLb,QAAQ,CAAC,CAAC,GAAGD,cAAc,EAAEc,KAAK,CAAC,CAAC;IACtC;EACF,CAAC,EACD,CAACd,cAAc,EAAEW,WAAW,EAAEV,QAAQ,CACxC,CAAC;EAED,MAAMiB,cAAc,GAAG9B,OAAO,CAAC,MAAM;IACnC,IAAImB,WAAW,EAAE;MACf,OAAOjB,oBAAoB,CAACoB,YAAY,EAAEH,WAAW,EAAGU,CAAC,IAAKA,CAAC,CAACH,KAAK,CAAC;IACxE;IACA,OAAOJ,YAAY;EACrB,CAAC,EAAE,CAACA,YAAY,EAAEH,WAAW,CAAC,CAAC;EAE/B,MAAMY,aAAa,GAAG/B,OAAO,CAAC,MAAM;IAClC,IAAIoB,UAAU,IAAI,CAACF,eAAe,EAAE,OAAOY,cAAc;IACzD,OAAOA,cAAc,CAACE,KAAK,CAAC,CAAC,EAAEd,eAAe,CAAC;EACjD,CAAC,EAAE,CAACY,cAAc,EAAEZ,eAAe,EAAEE,UAAU,CAAC,CAAC;EAEjD,MAAMa,OAAO,GAAGf,eAAe,IAAI,IAAI,IAClCY,cAAc,CAACI,MAAM,GAAGhB,eAAe;EAE5C,oBACErB,KAAA,CAAAsC,aAAA;IACEnB,SAAS,EAAEpB,UAAU,CAACO,MAAM,CAACiC,SAAS,EAAEpB,SAAS,CAAE;IACnDC,KAAK,EAAEA,KAAM;IACb,gBAAcP,SAAS,IAAIoB,cAAc,CAACI,MAAM,GAAG;EAAE,GAEpDvB,KAAK,iBACJd,KAAA,CAAAsC,aAAA;IAAKnB,SAAS,EAAEX,YAAY,CAACgC;EAAa,GAAC,wBACnB,EAAC1B,KAAK,CAAC2B,OAC1B,CACN,EAEA,CAAC3B,KAAK,IAAImB,cAAc,CAACI,MAAM,KAAK,CAAC,IAAIxB,SAAS,iBACjDb,KAAA,CAAAsC,aAAA,CAAC/B,iBAAiB,MAAE,CACrB,EACA,CAACO,KAAK,IAAImB,cAAc,CAACI,MAAM,KAAK,CAAC,IAAI,CAACxB,SAAS,iBAClDb,KAAA,CAAAsC,aAAA;IAAKnB,SAAS,EAAEX,YAAY,CAACkC;EAAa,GAAC,qBAEtC,CACN,EAEAT,cAAc,CAACI,MAAM,GAAG,CAAC,iBACxBrC,KAAA,CAAAsC,aAAA;IAAKnB,SAAS,EAAEb,MAAM,CAACqC;EAAU,GAC9BT,aAAa,CAACU,GAAG,CAAC,CAAC;IAAEf,KAAK;IAAEgB;EAAM,CAAC,KAAK;IACvC,MAAMC,UAAU,GAAGlC,QAAQ,GAAG,CAAC,GAAIiC,KAAK,GAAGjC,QAAQ,GAAI,GAAG,GAAG,CAAC;IAC9D,MAAMmC,WAAW,GAAG9B,QAAQ,GAAGY,KAAK,CAAC;IAErC,oBACE7B,KAAA,CAAAsC,aAAA,CAACxC,MAAM;MACLkD,GAAG,EAAEnB,KAAM;MACXV,SAAS,EAAEb,MAAM,CAAC2C,GAAI;MACtBC,OAAO,EAAEA,CAAA,KAAMtB,WAAW,CAACC,KAAK,CAAE;MAClC,gBAAcH,WAAW,CAACI,GAAG,CAACD,KAAK,CAAE;MACrCT,KAAK,EAAE2B,WAAW,IAAID,UAAU,GAAG,CAAC,GAChC;QACA,wCAAwC,EAAEA,UAAU,GAAG,GAAG;QAC1D,IAAIC,WAAW,GACX;UACA,uCAAuC,EAAEA;QAC3C,CAAC,GACCI,SAAS;MACf,CAAC,GACCA;IAAU,gBAEdnD,KAAA,CAAAsC,aAAA;MAAMnB,SAAS,EAAEb,MAAM,CAAC8C;IAAM,GAAEvB,KAAY,CAAC,EAC5CX,WAAW,KAAK,MAAM,iBACrBlB,KAAA,CAAAsC,aAAA;MAAMnB,SAAS,EAAEb,MAAM,CAAC+C;IAAI,gBAC1BrD,KAAA,CAAAsC,aAAA;MAAMnB,SAAS,EAAEb,MAAM,CAACgD;IAAQ,CAAE,CAC9B,CACP,EACApC,WAAW,KAAK,SAAS,iBACxBlB,KAAA,CAAAsC,aAAA;MAAMnB,SAAS,EAAEb,MAAM,CAACuC;IAAM,GAC3BA,KAAK,CAACU,cAAc,CAAC,CAClB,CAEF,CAAC;EAEb,CAAC,CAAC,EAEDnB,OAAO,IAAI,CAACb,UAAU,iBACrBvB,KAAA,CAAAsC,aAAA,CAACxC,MAAM;IACL0D,IAAI,EAAC,QAAQ;IACbrC,SAAS,EAAEb,MAAM,CAAC2C,GAAI;IACtBC,OAAO,EAAEA,CAAA,KAAM1B,aAAa,CAAC,IAAI;EAAE,GACpC,YACW,EAACS,cAAc,CAACI,MAAM,EAAC,GAC3B,CAEP,CAEJ,CAAC;AAEV;AAEA,OAAO,MAAMoB,cAAc,gBAAGxD,IAAI,CAChCS,mBACF,CAA+B","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"ListogramInput.js","names":["Button","classnames","React","memo","useCallback","useMemo","useState","Checkbox","filterValuesBySearch","styles","ListogramSkeleton","sharedStyles","useStableData","ListogramInputInner","values","maxCount","isLoading","error","selectedValues","onChange","colorMap","displayMode","isExcluding","className","style","maxVisibleItems","searchQuery","isExpanded","setIsExpanded","stableValues","selectedSet","Set","toggleValue","value","has","filter","v","filteredValues","sortedValues","selected","unselected","displayValues","slice","hasMore","length","createElement","listogram","errorMessage","message","emptyMessage","container","map","count","percentage","perRowColor","key","row","onClick","undefined","checkbox","e","stopPropagation","checked","onCheckedChange","label","toLocaleString","bar","barFill","type","ListogramInput"],"sources":["ListogramInput.tsx"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Button } from \"@base-ui/react/button\";\nimport classnames from \"classnames\";\nimport React, { memo, useCallback, useMemo, useState } from \"react\";\nimport { Checkbox } from \"../../../base-components/checkbox/Checkbox.js\";\nimport type { PropertyAggregationValue } from \"../../types/AggregationTypes.js\";\nimport { filterValuesBySearch } from \"../../utils/filterValues.js\";\nimport styles from \"./ListogramInput.module.css\";\nimport { ListogramSkeleton } from \"./ListogramSkeleton.js\";\nimport sharedStyles from \"./shared.module.css\";\nimport { useStableData } from \"./useStableData.js\";\n\nexport type ListogramDisplayMode = \"full\" | \"count\" | \"minimal\";\n\ninterface ListogramInputProps {\n values: PropertyAggregationValue[];\n maxCount: number;\n isLoading: boolean;\n error: Error | null;\n selectedValues: string[];\n onChange: (values: string[]) => void;\n colorMap?: Record<string, string>;\n displayMode?: ListogramDisplayMode;\n isExcluding?: boolean;\n className?: string;\n style?: React.CSSProperties;\n maxVisibleItems?: number;\n searchQuery?: string;\n}\n\nfunction ListogramInputInner({\n values,\n maxCount,\n isLoading,\n error,\n selectedValues,\n onChange,\n colorMap,\n displayMode = \"full\",\n isExcluding,\n className,\n style,\n maxVisibleItems,\n searchQuery,\n}: ListogramInputProps): React.ReactElement {\n const [isExpanded, setIsExpanded] = useState(false);\n\n const stableValues = useStableData(values, isLoading);\n\n const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);\n\n const toggleValue = useCallback(\n (value: string) => {\n if (selectedSet.has(value)) {\n onChange(selectedValues.filter((v) => v !== value));\n } else {\n onChange([...selectedValues, value]);\n }\n },\n [selectedValues, selectedSet, onChange],\n );\n\n const filteredValues = useMemo(() => {\n if (searchQuery) {\n return filterValuesBySearch(stableValues, searchQuery, (v) => v.value);\n }\n return stableValues;\n }, [stableValues, searchQuery]);\n\n const sortedValues = useMemo(() => {\n const selected = filteredValues.filter(v => selectedSet.has(v.value));\n const unselected = filteredValues.filter(v => !selectedSet.has(v.value));\n return [...selected, ...unselected];\n }, [filteredValues, selectedSet]);\n\n const displayValues = useMemo(() => {\n if (isExpanded || !maxVisibleItems) return sortedValues;\n return sortedValues.slice(0, maxVisibleItems);\n }, [sortedValues, maxVisibleItems, isExpanded]);\n\n const hasMore = maxVisibleItems != null\n && sortedValues.length > maxVisibleItems;\n\n return (\n <div\n className={classnames(styles.listogram, className)}\n style={style}\n data-loading={isLoading && filteredValues.length > 0}\n >\n {error && (\n <div className={sharedStyles.errorMessage}>\n Error loading values: {error.message}\n </div>\n )}\n\n {!error && filteredValues.length === 0 && isLoading && (\n <ListogramSkeleton />\n )}\n {!error && filteredValues.length === 0 && !isLoading && (\n <div className={sharedStyles.emptyMessage}>\n No values available\n </div>\n )}\n\n {filteredValues.length > 0 && (\n <div className={styles.container}>\n {displayValues.map(({ value, count }) => {\n const percentage = maxCount > 0 ? (count / maxCount) * 100 : 0;\n const perRowColor = colorMap?.[value];\n\n return (\n <Button\n key={value}\n className={styles.row}\n onClick={() => toggleValue(value)}\n aria-pressed={selectedSet.has(value)}\n style={perRowColor || percentage > 0\n ? {\n \"--osdk-filter-listogram-bar-fill-scale\": percentage / 100,\n ...(perRowColor\n ? {\n \"--osdk-filter-listogram-row-bar-color\": perRowColor,\n }\n : undefined),\n } as React.CSSProperties\n : undefined}\n >\n <span\n className={styles.checkbox}\n onClick={(e) => e.stopPropagation()}\n >\n <Checkbox\n checked={selectedSet.has(value)}\n onCheckedChange={() => toggleValue(value)}\n isExcluding={isExcluding}\n />\n </span>\n <span\n className={styles.label}\n data-excluding={(isExcluding && selectedSet.has(value))\n || undefined}\n >\n {value}\n </span>\n {displayMode !== \"minimal\" && (\n <span className={styles.count}>\n {count.toLocaleString()}\n </span>\n )}\n {displayMode === \"full\" && (\n <span className={styles.bar}>\n <span className={styles.barFill} />\n </span>\n )}\n </Button>\n );\n })}\n\n {hasMore && !isExpanded && (\n <Button\n type=\"button\"\n className={styles.row}\n onClick={() => setIsExpanded(true)}\n >\n View all ({sortedValues.length})\n </Button>\n )}\n </div>\n )}\n </div>\n );\n}\n\nexport const ListogramInput = memo(\n ListogramInputInner,\n) as typeof ListogramInputInner;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -73,6 +73,10 @@
|
|
|
73
73
|
white-space: nowrap;
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
+
.label[data-excluding] {
|
|
77
|
+
text-decoration: line-through;
|
|
78
|
+
}
|
|
79
|
+
|
|
76
80
|
.bar {
|
|
77
81
|
width: var(--osdk-filter-listogram-bar-width);
|
|
78
82
|
flex-shrink: 0;
|
|
@@ -96,6 +100,10 @@
|
|
|
96
100
|
background: var(--osdk-filter-listogram-row-bar-color, var(--osdk-filter-listogram-selected-color));
|
|
97
101
|
}
|
|
98
102
|
|
|
103
|
+
.checkbox {
|
|
104
|
+
display: flex;
|
|
105
|
+
}
|
|
106
|
+
|
|
99
107
|
.count {
|
|
100
108
|
font-family: var(--osdk-filter-listogram-count-font-family);
|
|
101
109
|
font-size: var(--osdk-filter-listogram-count-font-size);
|
|
@@ -6,6 +6,7 @@ const styles = {
|
|
|
6
6
|
"label": "ListogramInput-module__label___hQ3nLEpx",
|
|
7
7
|
"bar": "ListogramInput-module__bar___iUqTfYSm",
|
|
8
8
|
"barFill": "ListogramInput-module__barFill___za7KWtcm",
|
|
9
|
+
"checkbox": "ListogramInput-module__checkbox___M-faPyIy",
|
|
9
10
|
"count": "ListogramInput-module__count___81M2s4eq"
|
|
10
11
|
};
|
|
11
12
|
|
|
@@ -47,7 +47,7 @@ function NullValueWrapperInner({
|
|
|
47
47
|
onCheckedChange: handleToggle
|
|
48
48
|
}), /*#__PURE__*/React.createElement("span", {
|
|
49
49
|
className: styles.nullLabelText
|
|
50
|
-
}, "No value")), showNullCount && !error &&
|
|
50
|
+
}, "No value")), showNullCount && !error && /*#__PURE__*/React.createElement("span", {
|
|
51
51
|
className: styles.count
|
|
52
52
|
}, nullCount.toLocaleString())), error && /*#__PURE__*/React.createElement("div", {
|
|
53
53
|
className: sharedStyles.errorMessage
|
|
@@ -1 +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 &&
|
|
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":[]}
|
|
@@ -21,6 +21,7 @@ import { debounce } from "lodash-es";
|
|
|
21
21
|
import React, { memo, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
|
|
22
22
|
import { createHistogramBuckets, getMaxBucketCount } from "./createHistogramBuckets.js";
|
|
23
23
|
import styles from "./RangeInput.module.css.js";
|
|
24
|
+
import sharedStyles from "./shared.module.css.js";
|
|
24
25
|
import { useStableData } from "./useStableData.js";
|
|
25
26
|
const DEBOUNCE_MS = 300;
|
|
26
27
|
function RangeInputInner({
|
|
@@ -107,9 +108,10 @@ function RangeInputInner({
|
|
|
107
108
|
className: classnames(styles.rangeInput, className),
|
|
108
109
|
style: style,
|
|
109
110
|
"data-loading": isLoading
|
|
110
|
-
}, showHistogram && /*#__PURE__*/React.createElement("div", {
|
|
111
|
-
className:
|
|
112
|
-
|
|
111
|
+
}, showHistogram && buckets.length === 0 && !isLoading && /*#__PURE__*/React.createElement("div", {
|
|
112
|
+
className: sharedStyles.emptyMessage
|
|
113
|
+
}, "No values available"), showHistogram && buckets.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
114
|
+
className: styles.histogramContainer
|
|
113
115
|
}, buckets.map((bucket, index) => {
|
|
114
116
|
const height = bucket.count / maxBucketCount * 100;
|
|
115
117
|
const isInRange = (minValue === undefined || config.toNumber(bucket.max) >= config.toNumber(minValue)) && (maxValue === undefined || config.toNumber(bucket.min) <= config.toNumber(maxValue));
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RangeInput.js","names":["Input","classnames","debounce","React","memo","useCallback","useEffect","useId","useMemo","useRef","useState","createHistogramBuckets","getMaxBucketCount","styles","useStableData","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 { useStableData } from \"./useStableData.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 = useStableData(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":";AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,KAAK,QAAQ,sBAAsB;AAC5C,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,QAAQ,QAAQ,WAAW;AACpC,OAAOC,KAAK,IACVC,IAAI,EACJC,WAAW,EACXC,SAAS,EACTC,KAAK,EACLC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACH,OAAO;AACd,SACEC,sBAAsB,EACtBC,iBAAiB,QAEZ,6BAA6B;AACpC,OAAOC,MAAM,MAAM,yBAAyB;AAC5C,SAASC,aAAa,QAAQ,oBAAoB;AAElD,MAAMC,WAAW,GAAG,GAAG;AA2BvB,SAASC,eAAeA,CAAI;EAC1BC,eAAe;EACfC,SAAS;EACTC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,aAAa,GAAG,IAAI;EACpBC,SAAS;EACTC,KAAK;EACLC;AACkB,CAAC,EAAsB;EACzC,MAAMC,UAAU,GAAGnB,KAAK,CAAC,CAAC;EAC1B,MAAMoB,UAAU,GAAGpB,KAAK,CAAC,CAAC;EAE1B,MAAM,CAACqB,QAAQ,EAAEC,WAAW,CAAC,GAAGnB,QAAQ,CACtCe,MAAM,CAACK,WAAW,CAACX,QAAQ,CAC7B,CAAC;EACD,MAAM,CAACY,QAAQ,EAAEC,WAAW,CAAC,GAAGtB,QAAQ,CACtCe,MAAM,CAACK,WAAW,CAACV,QAAQ,CAC7B,CAAC;EACD,MAAMa,WAAW,GAAGxB,MAAM,CAACY,QAAQ,CAAC;EACpCY,WAAW,CAACC,OAAO,GAAGb,QAAQ;EAC9B,MAAMc,WAAW,GAAG1B,MAAM,CAACU,QAAQ,CAAC;EACpCgB,WAAW,CAACD,OAAO,GAAGf,QAAQ;EAC9B,MAAMiB,WAAW,GAAG3B,MAAM,CAACW,QAAQ,CAAC;EACpCgB,WAAW,CAACF,OAAO,GAAGd,QAAQ;EAE9B,MAAMiB,kBAAkB,GAAG7B,OAAO,CAChC,MACEN,QAAQ,CAAEoC,QAAgB,IAAK;IAC7B,MAAMC,MAAM,GAAGd,MAAM,CAACe,UAAU,CAACF,QAAQ,CAAC;IAC1CL,WAAW,CAACC,OAAO,CAACK,MAAM,EAAEH,WAAW,CAACF,OAAO,CAAC;EAClD,CAAC,EAAEnB,WAAW,CAAC,EACjB,CAACU,MAAM,CACT,CAAC;EAED,MAAMgB,kBAAkB,GAAGjC,OAAO,CAChC,MACEN,QAAQ,CAAEoC,QAAgB,IAAK;IAC7B,MAAMC,MAAM,GAAGd,MAAM,CAACe,UAAU,CAACF,QAAQ,CAAC;IAC1CL,WAAW,CAACC,OAAO,CAACC,WAAW,CAACD,OAAO,EAAEK,MAAM,CAAC;EAClD,CAAC,EAAExB,WAAW,CAAC,EACjB,CAACU,MAAM,CACT,CAAC;EAEDnB,SAAS,CAAC,MAAM;IACduB,WAAW,CAACJ,MAAM,CAACK,WAAW,CAACX,QAAQ,CAAC,CAAC;IACzCkB,kBAAkB,CAACK,MAAM,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACvB,QAAQ,EAAEM,MAAM,EAAEY,kBAAkB,CAAC,CAAC;EAE1C/B,SAAS,CAAC,MAAM;IACd0B,WAAW,CAACP,MAAM,CAACK,WAAW,CAACV,QAAQ,CAAC,CAAC;IACzCqB,kBAAkB,CAACC,MAAM,CAAC,CAAC;EAC7B,CAAC,EAAE,CAACtB,QAAQ,EAAEK,MAAM,EAAEgB,kBAAkB,CAAC,CAAC;EAE1CnC,SAAS,CAAC,MAAM;IACd,OAAO,MAAM;MACX+B,kBAAkB,CAACK,MAAM,CAAC,CAAC;MAC3BD,kBAAkB,CAACC,MAAM,CAAC,CAAC;IAC7B,CAAC;EACH,CAAC,EAAE,CAACL,kBAAkB,EAAEI,kBAAkB,CAAC,CAAC;EAE5C,MAAME,YAAY,GAAG7B,aAAa,CAACG,eAAe,EAAEC,SAAS,CAAC;EAE9D,MAAM0B,aAAa,GAAGpC,OAAO,CAAC,MAAM;IAClC,IAAImC,YAAY,CAACE,MAAM,KAAK,CAAC,EAAE,OAAO;MAAEC,GAAG,EAAEC,SAAS;MAAEC,GAAG,EAAED;IAAU,CAAC;IACxE,MAAMD,GAAG,GAAGH,YAAY,CAACM,MAAM,CAC7B,CAACC,GAAG,EAAEC,CAAC,KAAKC,IAAI,CAACN,GAAG,CAACI,GAAG,EAAEzB,MAAM,CAAC4B,QAAQ,CAACF,CAAC,CAACG,KAAK,CAAC,CAAC,EACnDC,QACF,CAAC;IACD,MAAMP,GAAG,GAAGL,YAAY,CAACM,MAAM,CAC7B,CAACC,GAAG,EAAEC,CAAC,KAAKC,IAAI,CAACJ,GAAG,CAACE,GAAG,EAAEzB,MAAM,CAAC4B,QAAQ,CAACF,CAAC,CAACG,KAAK,CAAC,CAAC,EACnD,CAACC,QACH,CAAC;IACD,OAAO;MACLT,GAAG,EAAErB,MAAM,CAAC+B,UAAU,CAACV,GAAG,CAAC;MAC3BE,GAAG,EAAEvB,MAAM,CAAC+B,UAAU,CAACR,GAAG;IAC5B,CAAC;EACH,CAAC,EAAE,CAACL,YAAY,EAAElB,MAAM,CAAC,CAAC;EAE1B,MAAMgC,SAAS,GAAGjD,OAAO,CAAC,OAAO;IAC/BkD,OAAO,EAAEd,aAAa,CAACE,GAAG;IAC1Ba,OAAO,EAAEf,aAAa,CAACI;EACzB,CAAC,CAAC,EAAE,CAACJ,aAAa,CAACE,GAAG,EAAEF,aAAa,CAACI,GAAG,CAAC,CAAC;EAE3C,MAAMY,OAAO,GAAGpD,OAAO,CAA4B,MAAM;IACvD,IACE,CAACc,aAAa,IACXqB,YAAY,CAACE,MAAM,KAAK,CAAC,IACzBD,aAAa,CAACE,GAAG,KAAKC,SAAS,IAC/BH,aAAa,CAACI,GAAG,KAAKD,SAAS,EAClC;MACA,OAAO,EAAE;IACX;IAEA,OAAOpC,sBAAsB,CAC3BgC,YAAY,EACZ;MAAEG,GAAG,EAAEF,aAAa,CAACE,GAAG;MAAEE,GAAG,EAAEJ,aAAa,CAACI;IAAI,CAAC,EAClDvB,MAAM,CAAC4B,QAAQ,EACf5B,MAAM,CAAC+B,UACT,CAAC;EACH,CAAC,EAAE,CAAClC,aAAa,EAAEqB,YAAY,EAAEC,aAAa,EAAEnB,MAAM,CAAC,CAAC;EAExD,MAAMoC,cAAc,GAAGrD,OAAO,CAAC,MAAMI,iBAAiB,CAACgD,OAAO,CAAC,EAAE,CAACA,OAAO,CAAC,CAAC;EAE3E,MAAME,eAAe,GAAGzD,WAAW,CAChC0D,CAAsC,IAAK;IAC1C,MAAMzB,QAAQ,GAAGyB,CAAC,CAACC,MAAM,CAACV,KAAK;IAC/BzB,WAAW,CAACS,QAAQ,CAAC;IACrBD,kBAAkB,CAACC,QAAQ,CAAC;EAC9B,CAAC,EACD,CAACD,kBAAkB,CACrB,CAAC;EAED,MAAM4B,eAAe,GAAG5D,WAAW,CAChC0D,CAAsC,IAAK;IAC1C,MAAMzB,QAAQ,GAAGyB,CAAC,CAACC,MAAM,CAACV,KAAK;IAC/BtB,WAAW,CAACM,QAAQ,CAAC;IACrBG,kBAAkB,CAACH,QAAQ,CAAC;EAC9B,CAAC,EACD,CAACG,kBAAkB,CACrB,CAAC;EAED,oBACEtC,KAAA,CAAA+D,aAAA;IACE3C,SAAS,EAAEtB,UAAU,CAACY,MAAM,CAACsD,UAAU,EAAE5C,SAAS,CAAE;IACpDC,KAAK,EAAEA,KAAM;IACb,gBAAcN;EAAU,GAEvBI,aAAa,iBACZnB,KAAA,CAAA+D,aAAA;IACE3C,SAAS,EAAEV,MAAM,CAACuD,kBAAmB;IACrC,cAAYR,OAAO,CAACf,MAAM,KAAK;EAAE,GAEhCe,OAAO,CAACS,GAAG,CAAC,CAACC,MAAM,EAAEC,KAAK,KAAK;IAC9B,MAAMC,MAAM,GAAIF,MAAM,CAACG,KAAK,GAAGZ,cAAc,GAAI,GAAG;IACpD,MAAMa,SAAS,GAAG,CAACvD,QAAQ,KAAK4B,SAAS,IACpCtB,MAAM,CAAC4B,QAAQ,CAACiB,MAAM,CAACtB,GAAG,CAAC,IAAIvB,MAAM,CAAC4B,QAAQ,CAAClC,QAAQ,CAAC,MACvDC,QAAQ,KAAK2B,SAAS,IACrBtB,MAAM,CAAC4B,QAAQ,CAACiB,MAAM,CAACxB,GAAG,CAAC,IAAIrB,MAAM,CAAC4B,QAAQ,CAACjC,QAAQ,CAAC,CAAC;IAEhE,oBACEjB,KAAA,CAAA+D,aAAA;MACES,GAAG,EAAEJ,KAAM;MACXhD,SAAS,EAAEV,MAAM,CAAC+D,YAAa;MAC/B,iBAAeF,SAAU;MACzBlD,KAAK,EAAE;QAAEgD,MAAM,EAAE,GAAGpB,IAAI,CAACJ,GAAG,CAACwB,MAAM,EAAE,CAAC,CAAC;MAAI,CAAE;MAC7CK,KAAK,EAAEpD,MAAM,CAACqD,aAAa,CACzBR,MAAM,CAACxB,GAAG,EACVwB,MAAM,CAACtB,GAAG,EACVsB,MAAM,CAACG,KACT;IAAE,CACH,CAAC;EAEN,CAAC,CACE,CACN,eAEDtE,KAAA,CAAA+D,aAAA;IAAK3C,SAAS,EAAEV,MAAM,CAACkE;EAAY,gBACjC5E,KAAA,CAAA+D,aAAA;IAAK3C,SAAS,EAAEV,MAAM,CAACmE;EAAa,gBAClC7E,KAAA,CAAA+D,aAAA;IAAOe,OAAO,EAAEvD,UAAW;IAACH,SAAS,EAAEV,MAAM,CAACqE;EAAW,GACtDzD,MAAM,CAAC0D,QACH,CAAC,eACRhF,KAAA,CAAA+D,aAAA,CAAClE,KAAK,EAAAoF,QAAA;IACJC,EAAE,EAAE3D,UAAW;IACf4D,IAAI,EAAE7D,MAAM,CAAC8D,SAAU;IACvBhE,SAAS,EAAEV,MAAM,CAAC2E,KAAM;IACxBlC,KAAK,EAAE1B,QAAS;IAChBP,QAAQ,EAAEyC,eAAgB;IAC1B2B,WAAW,EAAEhC,SAAS,CAACC,OAAO,KAAKX,SAAS,IACrCtB,MAAM,CAACiE,iBAAiB,GAC3BjE,MAAM,CAACiE,iBAAiB,CAACjC,SAAS,CAACC,OAAO,CAAC,GAC3CX;EAAU,GACVtB,MAAM,CAACkE,UAAU,CACtB,CACE,CAAC,eAENxF,KAAA,CAAA+D,aAAA;IAAM3C,SAAS,EAAEV,MAAM,CAAC+E,SAAU;IAAC,eAAY;EAAM,GAAC,QAEhD,CAAC,eAEPzF,KAAA,CAAA+D,aAAA;IAAK3C,SAAS,EAAEV,MAAM,CAACmE;EAAa,gBAClC7E,KAAA,CAAA+D,aAAA;IAAOe,OAAO,EAAEtD,UAAW;IAACJ,SAAS,EAAEV,MAAM,CAACqE;EAAW,GACtDzD,MAAM,CAACoE,QACH,CAAC,eACR1F,KAAA,CAAA+D,aAAA,CAAClE,KAAK,EAAAoF,QAAA;IACJC,EAAE,EAAE1D,UAAW;IACf2D,IAAI,EAAE7D,MAAM,CAAC8D,SAAU;IACvBhE,SAAS,EAAEV,MAAM,CAAC2E,KAAM;IACxBlC,KAAK,EAAEvB,QAAS;IAChBV,QAAQ,EAAE4C,eAAgB;IAC1BwB,WAAW,EAAEhC,SAAS,CAACE,OAAO,KAAKZ,SAAS,IACrCtB,MAAM,CAACiE,iBAAiB,GAC3BjE,MAAM,CAACiE,iBAAiB,CAACjC,SAAS,CAACE,OAAO,CAAC,GAC3CZ;EAAU,GACVtB,MAAM,CAACkE,UAAU,CACtB,CACE,CACF,CACF,CAAC;AAEV;AAEA,OAAO,MAAMG,UAAU,gBAAG1F,IAAI,CAACY,eAAe,CAA2B","ignoreList":[]}
|
|
1
|
+
{"version":3,"file":"RangeInput.js","names":["Input","classnames","debounce","React","memo","useCallback","useEffect","useId","useMemo","useRef","useState","createHistogramBuckets","getMaxBucketCount","styles","sharedStyles","useStableData","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","emptyMessage","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 sharedStyles from \"./shared.module.css\";\nimport { useStableData } from \"./useStableData.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 = useStableData(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 && buckets.length === 0 && !isLoading && (\n <div className={sharedStyles.emptyMessage}>\n No values available\n </div>\n )}\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 </div>\n );\n}\n\nexport const RangeInput = memo(RangeInputInner) as typeof RangeInputInner;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -32,12 +32,6 @@
|
|
|
32
32
|
height: var(--osdk-filter-range-histogram-height);
|
|
33
33
|
gap: var(--osdk-filter-range-histogram-bar-gap);
|
|
34
34
|
overflow: hidden;
|
|
35
|
-
opacity: 0;
|
|
36
|
-
transition: opacity var(--osdk-filter-content-fade-duration);
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.histogramContainer:not([data-empty="true"]) {
|
|
40
|
-
opacity: 1;
|
|
41
35
|
}
|
|
42
36
|
|
|
43
37
|
.histogramBar {
|
|
@@ -15,7 +15,6 @@
|
|
|
15
15
|
*/
|
|
16
16
|
|
|
17
17
|
export { formatDateForDisplay, formatDateForInput, parseDateFromInput } from "../../../shared/dateUtils.js";
|
|
18
|
-
export { CheckboxListInput } from "./CheckboxListInput.js";
|
|
19
18
|
export { ContainsTextInput } from "./ContainsTextInput.js";
|
|
20
19
|
export { DateRangeInput } from "./DateRangeInput.js";
|
|
21
20
|
export { NullValueWrapper } from "./NullValueWrapper.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":["formatDateForDisplay","formatDateForInput","parseDateFromInput","
|
|
1
|
+
{"version":3,"file":"index.js","names":["formatDateForDisplay","formatDateForInput","parseDateFromInput","ContainsTextInput","DateRangeInput","NullValueWrapper","NumberRangeInput","RangeInput","ToggleInput"],"sources":["index.ts"],"sourcesContent":["/*\n * Copyright 2025 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nexport {\n formatDateForDisplay,\n formatDateForInput,\n parseDateFromInput,\n} from \"../../../shared/dateUtils.js\";\nexport { ContainsTextInput } from \"./ContainsTextInput.js\";\nexport { DateRangeInput } from \"./DateRangeInput.js\";\nexport { NullValueWrapper } from \"./NullValueWrapper.js\";\nexport { NumberRangeInput } from \"./NumberRangeInput.js\";\nexport { RangeInput } from \"./RangeInput.js\";\nexport { ToggleInput } from \"./ToggleInput.js\";\n"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SACEA,oBAAoB,EACpBC,kBAAkB,EAClBC,kBAAkB,QACb,8BAA8B;AACrC,SAASC,iBAAiB,QAAQ,wBAAwB;AAC1D,SAASC,cAAc,QAAQ,qBAAqB;AACpD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,gBAAgB,QAAQ,uBAAuB;AACxD,SAASC,UAAU,QAAQ,iBAAiB;AAC5C,SAASC,WAAW,QAAQ,kBAAkB","ignoreList":[]}
|
|
@@ -71,7 +71,6 @@ export function useFilterListState(props) {
|
|
|
71
71
|
const {
|
|
72
72
|
objectSet,
|
|
73
73
|
filterDefinitions,
|
|
74
|
-
filterOperator = "and",
|
|
75
74
|
onFilterStateChanged,
|
|
76
75
|
onFilterClauseChanged,
|
|
77
76
|
initialFilterStates
|
|
@@ -108,7 +107,7 @@ export function useFilterListState(props) {
|
|
|
108
107
|
setFilterStates(prev => {
|
|
109
108
|
const next = new Map(prev);
|
|
110
109
|
next.set(filterKey, state);
|
|
111
|
-
newWhereClause = buildWhereClause(filterDefinitions, next,
|
|
110
|
+
newWhereClause = buildWhereClause(filterDefinitions, next, propertyTypes);
|
|
112
111
|
return next;
|
|
113
112
|
});
|
|
114
113
|
if (newWhereClause !== undefined) {
|
|
@@ -118,22 +117,19 @@ export function useFilterListState(props) {
|
|
|
118
117
|
if (definition) {
|
|
119
118
|
onFilterStateChanged?.(definition, state);
|
|
120
119
|
}
|
|
121
|
-
}, [filterDefinitions,
|
|
122
|
-
const whereClause = useMemo(() => buildWhereClause(filterDefinitions, filterStates,
|
|
120
|
+
}, [filterDefinitions, propertyTypes, onFilterClauseChanged, onFilterStateChanged]);
|
|
121
|
+
const whereClause = useMemo(() => buildWhereClause(filterDefinitions, filterStates, propertyTypes), [filterDefinitions, filterStates, propertyTypes]);
|
|
123
122
|
const perFilterWhereClauses = useMemo(() => {
|
|
124
123
|
const map = new Map();
|
|
125
124
|
if (!filterDefinitions) {
|
|
126
125
|
return map;
|
|
127
126
|
}
|
|
128
|
-
if (filterOperator === "or") {
|
|
129
|
-
return map;
|
|
130
|
-
}
|
|
131
127
|
for (const definition of filterDefinitions) {
|
|
132
128
|
const key = getFilterKey(definition);
|
|
133
|
-
map.set(key, buildWhereClause(filterDefinitions, filterStates,
|
|
129
|
+
map.set(key, buildWhereClause(filterDefinitions, filterStates, propertyTypes, key));
|
|
134
130
|
}
|
|
135
131
|
return map;
|
|
136
|
-
}, [filterDefinitions, filterStates,
|
|
132
|
+
}, [filterDefinitions, filterStates, propertyTypes]);
|
|
137
133
|
const activeFilterCount = useMemo(() => {
|
|
138
134
|
let count = 0;
|
|
139
135
|
for (const state of filterStates.values()) {
|
|
@@ -146,9 +142,9 @@ export function useFilterListState(props) {
|
|
|
146
142
|
const reset = useCallback(() => {
|
|
147
143
|
const initialStates = buildInitialStates(filterDefinitions);
|
|
148
144
|
setFilterStates(initialStates);
|
|
149
|
-
const newWhereClause = buildWhereClause(filterDefinitions, initialStates,
|
|
145
|
+
const newWhereClause = buildWhereClause(filterDefinitions, initialStates, propertyTypes);
|
|
150
146
|
onFilterClauseChanged?.(newWhereClause);
|
|
151
|
-
}, [filterDefinitions,
|
|
147
|
+
}, [filterDefinitions, propertyTypes, onFilterClauseChanged]);
|
|
152
148
|
return useMemo(() => ({
|
|
153
149
|
filterStates,
|
|
154
150
|
setFilterState,
|