@trackunit/filters-filter-bar 2.10.6 → 2.10.7

package/index.cjs.js

@@ -1192,7 +1192,7 @@ const HierarchicalCheckboxFilter = ({ filterDefinition, filterBarActions, option
     const currentSetSearchText = isServerSearch ? customSearch.onChange : setLocalSearchText;
     const searchHeaderProps = {
         searchEnabled: true,
-        searchProps: { value: currentSearchText, onChange: currentSetSearchText },
+        searchProps: { value: currentSearchText, onChange: currentSetSearchText, onClear: customSearch?.onClear },
     };
     const optionsMap = react.useMemo(() => {
         const map = new Map();
@@ -2325,6 +2325,25 @@ const useFilterBarsAsLink = (filterBarLinkConfig) => {
     }, [getFilterBarLink]);
 };
 
+/** How long a filter waits after the last keystroke before it searches. */
+const FILTER_SEARCH_DEBOUNCE_MS = 500;
+/**
+ * Owns the search box of a filter that searches on the server or in its own data: the text as typed,
+ * and the debounced copy to search with.
+ *
+ * @example
+ * const { debouncedSearch, customSearch } = useFilterSearch();
+ * const { data, loading } = useQuery(MyOptionsDocument, { variables: { search: debouncedSearch } });
+ * return <DefaultCheckboxFilter {...props} customSearch={customSearch} loading={loading} options={toOptions(data)} />;
+ * @returns {object} `customSearch` to hand to the filter component, and `debouncedSearch` to query or match with
+ */
+const useFilterSearch = () => {
+    const [searchText, setSearchText] = react.useState("");
+    const debouncedSearch = reactComponents.useDebounce(searchText, { delay: FILTER_SEARCH_DEBOUNCE_MS });
+    const customSearch = react.useMemo(() => ({ value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }), [searchText]);
+    return react.useMemo(() => ({ debouncedSearch, customSearch }), [debouncedSearch, customSearch]);
+};
+
 /**
  * Handles the application of a URL search parameter as a filter in the system.
  * The parameter is validated using the provided Zod schema.
@@ -2407,6 +2426,7 @@ exports.DefaultDateRangeFilter = DefaultDateRangeFilter;
 exports.DefaultMinMaxFilter = DefaultMinMaxFilter;
 exports.DefaultRadioFilter = DefaultRadioFilter;
 exports.DynamicFilterList = DynamicFilterList;
+exports.FILTER_SEARCH_DEBOUNCE_MS = FILTER_SEARCH_DEBOUNCE_MS;
 exports.FilterBar = FilterBar;
 exports.FilterButtonTooltipLabel = FilterButtonTooltipLabel;
 exports.FilterComponent = FilterComponent;
@@ -2444,6 +2464,7 @@ exports.toggleFilterValue = toggleFilterValue;
 exports.useFilterBar = useFilterBar;
 exports.useFilterBarAsync = useFilterBarAsync;
 exports.useFilterBarsAsLink = useFilterBarsAsLink;
+exports.useFilterSearch = useFilterSearch;
 exports.useFiltersMenu = useFiltersMenu;
 exports.useSearchParamAsFilter = useSearchParamAsFilter;
 exports.validateFilter = validateFilter;

package/index.esm.js

@@ -3,7 +3,7 @@ import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-l
 import { useMemo, useState, useEffect, useCallback, useId, Fragment as Fragment$1, useRef } from 'react';
 import { twMerge } from 'tailwind-merge';
 import { Filter, FilterBody, RadioFilterItem, CheckBoxFilterItem, FilterHeader as FilterHeader$1, FilterFooter } from '@trackunit/react-filter-components';
-import { Button, Icon, useList, List, Text, useTextSearch, useMenuSearchField, MenuDivider, MenuContent, ZStack, IconButton, Badge, useViewportBreakpoints, MenuTree, Popover, PopoverTrigger, Tooltip, PopoverContent, useCustomEncoding, useSearchParamSync, useStorageKey, useWatch } from '@trackunit/react-components';
+import { Button, Icon, useList, List, Text, useTextSearch, useMenuSearchField, MenuDivider, MenuContent, ZStack, IconButton, Badge, useViewportBreakpoints, MenuTree, Popover, PopoverTrigger, Tooltip, PopoverContent, useCustomEncoding, useSearchParamSync, useStorageKey, useWatch, useDebounce } from '@trackunit/react-components';
 import { useAnalytics, useCurrentUser } from '@trackunit/react-core-hooks';
 import { capitalize } from 'string-ts';
 import { createEvent } from '@trackunit/iris-app-runtime-core-api';
@@ -1190,7 +1190,7 @@ const HierarchicalCheckboxFilter = ({ filterDefinition, filterBarActions, option
     const currentSetSearchText = isServerSearch ? customSearch.onChange : setLocalSearchText;
     const searchHeaderProps = {
         searchEnabled: true,
-        searchProps: { value: currentSearchText, onChange: currentSetSearchText },
+        searchProps: { value: currentSearchText, onChange: currentSetSearchText, onClear: customSearch?.onClear },
     };
     const optionsMap = useMemo(() => {
         const map = new Map();
@@ -2323,6 +2323,25 @@ const useFilterBarsAsLink = (filterBarLinkConfig) => {
     }, [getFilterBarLink]);
 };
 
+/** How long a filter waits after the last keystroke before it searches. */
+const FILTER_SEARCH_DEBOUNCE_MS = 500;
+/**
+ * Owns the search box of a filter that searches on the server or in its own data: the text as typed,
+ * and the debounced copy to search with.
+ *
+ * @example
+ * const { debouncedSearch, customSearch } = useFilterSearch();
+ * const { data, loading } = useQuery(MyOptionsDocument, { variables: { search: debouncedSearch } });
+ * return <DefaultCheckboxFilter {...props} customSearch={customSearch} loading={loading} options={toOptions(data)} />;
+ * @returns {object} `customSearch` to hand to the filter component, and `debouncedSearch` to query or match with
+ */
+const useFilterSearch = () => {
+    const [searchText, setSearchText] = useState("");
+    const debouncedSearch = useDebounce(searchText, { delay: FILTER_SEARCH_DEBOUNCE_MS });
+    const customSearch = useMemo(() => ({ value: searchText, onChange: setSearchText, onClear: () => setSearchText("") }), [searchText]);
+    return useMemo(() => ({ debouncedSearch, customSearch }), [debouncedSearch, customSearch]);
+};
+
 /**
  * Handles the application of a URL search parameter as a filter in the system.
  * The parameter is validated using the provided Zod schema.
@@ -2399,4 +2418,4 @@ const mergeFilters = (filterBarDefinition, extraFilters) => {
  */
 setupLibraryTranslations();
 
-export { AppliedFiltersRenderer, DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FilterBar, FilterButtonTooltipLabel, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersMenuContent, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, MultipleFilterTooltipLabel, ResetFiltersButton, TooltipLabel, areaFilterGeoJsonGeometrySchema, booleanSchema, dateRangeSchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, minMaxFilterSchema, mockFilterBar, mockFilterBarActions, numberSchema, stringArraySchema, stringSchema, toggleFilterValue, useFilterBar, useFilterBarAsync, useFilterBarsAsLink, useFiltersMenu, useSearchParamAsFilter, validateFilter, valueNameArraySchema, valueNameSchema };
+export { AppliedFiltersRenderer, DefaultCheckboxFilter, DefaultDateRangeFilter, DefaultMinMaxFilter, DefaultRadioFilter, DynamicFilterList, FILTER_SEARCH_DEBOUNCE_MS, FilterBar, FilterButtonTooltipLabel, FilterComponent, FilterEvents, FilterHeader, FilterResults, FilterTableComponent, FiltersMenu, FiltersMenuContent, FiltersRenderer, GroupedFiltersList, HierarchicalCheckboxFilter, MultipleFilterTooltipLabel, ResetFiltersButton, TooltipLabel, areaFilterGeoJsonGeometrySchema, booleanSchema, dateRangeSchema, isAreaFilterValue, isArrayFilterValue, isBooleanValue, isDateRangeValue, isMinMaxFilterValue, isStringArrayFilterValue, isValueName, isValueNameArray, mergeFilters, minMaxFilterSchema, mockFilterBar, mockFilterBarActions, numberSchema, stringArraySchema, stringSchema, toggleFilterValue, useFilterBar, useFilterBarAsync, useFilterBarsAsLink, useFilterSearch, useFiltersMenu, useSearchParamAsFilter, validateFilter, valueNameArraySchema, valueNameSchema };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/filters-filter-bar",
-  "version": "2.10.6",
+  "version": "2.10.7",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -11,17 +11,17 @@
     "tailwind-merge": "^2.0.0",
     "string-ts": "^2.0.0",
     "zod": "^3.25.76",
-    "@trackunit/iris-app-api": "2.9.3",
-    "@trackunit/react-core-hooks": "1.25.3",
-    "@trackunit/react-filter-components": "2.10.6",
-    "@trackunit/react-date-and-time-components": "2.10.6",
-    "@trackunit/shared-utils": "1.19.3",
-    "@trackunit/react-form-components": "2.10.6",
-    "@trackunit/iris-app-runtime-core-api": "1.21.3",
-    "@trackunit/geo-json-utils": "1.18.3",
-    "@trackunit/i18n-library-translation": "2.8.3",
-    "@trackunit/css-class-variance-utilities": "2.3.3",
-    "@trackunit/react-components": "3.8.0"
+    "@trackunit/iris-app-api": "2.9.4",
+    "@trackunit/react-core-hooks": "1.25.4",
+    "@trackunit/react-filter-components": "2.10.7",
+    "@trackunit/react-date-and-time-components": "2.10.7",
+    "@trackunit/shared-utils": "1.19.4",
+    "@trackunit/react-form-components": "2.10.7",
+    "@trackunit/iris-app-runtime-core-api": "1.21.4",
+    "@trackunit/geo-json-utils": "1.18.4",
+    "@trackunit/i18n-library-translation": "2.8.4",
+    "@trackunit/css-class-variance-utilities": "2.3.4",
+    "@trackunit/react-components": "3.8.1"
   },
   "peerDependencies": {
     "@apollo/client": "^3.13.8",

package/src/index.d.ts

@@ -24,6 +24,7 @@ export * from "./lib/hooks/types";
 export * from "./lib/hooks/useFilterBar";
 export * from "./lib/hooks/useFilterBarAsync";
 export * from "./lib/hooks/useFilterBarsAsLink";
+export * from "./lib/hooks/useFilterSearch";
 export * from "./lib/hooks/useFiltersMenu";
 export * from "./lib/hooks/useSearchParamAsFilter";
 export * from "./lib/types/FilterTypes";

package/src/lib/components/HierarchicalCheckboxFilter/HierarchicalCheckboxFilter.d.ts

@@ -48,6 +48,10 @@ export interface HierarchicalFilterProps extends Omit<DefaultFilterProps<Array<V
          * @param value Updated search string
          */
         onChange: (value: string) => void;
+        /**
+         * Callback when the search is cleared. Without it the clear button leaves the search as is.
+         */
+        onClear?: () => void;
     };
     showCount?: boolean;
 }

package/src/lib/hooks/useFilterSearch.d.ts

@@ -0,0 +1,22 @@
+/** How long a filter waits after the last keystroke before it searches. */
+export declare const FILTER_SEARCH_DEBOUNCE_MS = 500;
+/** The `customSearch` prop of `DefaultCheckboxFilter`, with the clear action always wired. */
+export type FilterCustomSearch = {
+    value: string;
+    onChange: (value: string) => void;
+    onClear: () => void;
+};
+/**
+ * Owns the search box of a filter that searches on the server or in its own data: the text as typed,
+ * and the debounced copy to search with.
+ *
+ * @example
+ * const { debouncedSearch, customSearch } = useFilterSearch();
+ * const { data, loading } = useQuery(MyOptionsDocument, { variables: { search: debouncedSearch } });
+ * return <DefaultCheckboxFilter {...props} customSearch={customSearch} loading={loading} options={toOptions(data)} />;
+ * @returns {object} `customSearch` to hand to the filter component, and `debouncedSearch` to query or match with
+ */
+export declare const useFilterSearch: () => {
+    debouncedSearch: string;
+    customSearch: FilterCustomSearch;
+};

package/migrations/entry.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"entry.js","sourceRoot":"","sources":["../../../../../libs/filters/filter-bar/migrations/entry.ts"],"names":[],"mappings":"","sourcesContent":["export {};\n"]}