Merge pull request #482 from yext/dev/filter-search-disable-builtin-classes

k-gerner · web-flow · commit 6a7ae5ac1a18 · 2025-01-10T16:25:50.000-05:00
Allow disabling built-in CSS classes for FilterSearch component
diff --git a/.gitignore b/.gitignore
@@ -11,4 +11,7 @@ dist/
 
 .env
 test-site/.env
-.idea/
+.idea/
+
+# misc
+.DS_Store
diff --git a/.storybook/snapshots/__snapshots__/mapboxmap--multiple-pins.png b/.storybook/snapshots/__snapshots__/mapboxmap--multiple-pins.png
diff --git a/docs/search-ui-react.filtersearch.md b/docs/search-ui-react.filtersearch.md
@@ -9,14 +9,14 @@ A component which allows a user to search for filters associated with specific e
 **Signature:**
 
 ```typescript
-declare function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
+declare function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses, disableBuiltInClasses }: FilterSearchProps): JSX.Element;
 ```
 
 ## Parameters
 
 |  Parameter | Type | Description |
 |  --- | --- | --- |
-|  { searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses } | [FilterSearchProps](./search-ui-react.filtersearchprops.md) |  |
+|  { searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses, disableBuiltInClasses } | [FilterSearchProps](./search-ui-react.filtersearchprops.md) |  |
 
 **Returns:**
 
diff --git a/docs/search-ui-react.filtersearchprops.disablebuiltinclasses.md b/docs/search-ui-react.filtersearchprops.disablebuiltinclasses.md
@@ -0,0 +1,13 @@
+<!-- Do not edit this file. It is automatically generated by API Documenter. -->
+
+[Home](./index.md) &gt; [@yext/search-ui-react](./search-ui-react.md) &gt; [FilterSearchProps](./search-ui-react.filtersearchprops.md) &gt; [disableBuiltInClasses](./search-ui-react.filtersearchprops.disablebuiltinclasses.md)
+
+## FilterSearchProps.disableBuiltInClasses property
+
+Whether to disable the default CSS classes entirely
+
+**Signature:**
+
+```typescript
+disableBuiltInClasses?: boolean;
+```
diff --git a/docs/search-ui-react.filtersearchprops.md b/docs/search-ui-react.filtersearchprops.md
@@ -18,6 +18,7 @@ interface FilterSearchProps
 |  --- | --- | --- | --- |
 |  [afterDropdownInputFocus?](./search-ui-react.filtersearchprops.afterdropdowninputfocus.md) |  | (params: [AfterDropdownInputFocusProps](./search-ui-react.afterdropdowninputfocusprops.md)<!-- -->) =&gt; void | _(Optional)_ A function which is called immediately after the input gains focus. It does not replace the default focus behavior. |
 |  [customCssClasses?](./search-ui-react.filtersearchprops.customcssclasses.md) |  | [FilterSearchCssClasses](./search-ui-react.filtersearchcssclasses.md) | _(Optional)_ CSS classes for customizing the component styling. |
+|  [disableBuiltInClasses?](./search-ui-react.filtersearchprops.disablebuiltinclasses.md) |  | boolean | _(Optional)_ Whether to disable the default CSS classes entirely |
 |  [label?](./search-ui-react.filtersearchprops.label.md) |  | string | _(Optional)_ The display label for the component. |
 |  [onDropdownInputChange?](./search-ui-react.filtersearchprops.ondropdowninputchange.md) |  | (params: [OnDropdownInputChangeProps](./search-ui-react.ondropdowninputchangeprops.md)<!-- -->) =&gt; void | _(Optional)_ A function which is called when the input element's value changes. Replaces the default behavior. |
 |  [onSelect?](./search-ui-react.filtersearchprops.onselect.md) |  | (params: [OnSelectParams](./search-ui-react.onselectparams.md)<!-- -->) =&gt; void | _(Optional)_ A function which is called when a filter is selected. |
diff --git a/docs/search-ui-react.md b/docs/search-ui-react.md
@@ -18,7 +18,7 @@
 |  [executeSearch(searchActions)](./search-ui-react.executesearch.md) | Executes a universal/vertical search. |
 |  [Facets(props)](./search-ui-react.facets.md) | A component that displays all facets applicable to the current vertical search. |
 |  [FilterDivider({ className })](./search-ui-react.filterdivider.md) | A divider component used to separate NumericalFacets, HierarchicalFacets, StandardFacets, and StaticFilters. |
-|  [FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses })](./search-ui-react.filtersearch.md) | A component which allows a user to search for filters associated with specific entities and fields. |
+|  [FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses, disableBuiltInClasses })](./search-ui-react.filtersearch.md) | A component which allows a user to search for filters associated with specific entities and fields. |
 |  [Geolocation\_2({ geolocationOptions, radius, label, GeolocationIcon, handleClick, customCssClasses, })](./search-ui-react.geolocation_2.md) | A React Component which collects location information to create a location filter and perform a new search. |
 |  [getSearchIntents(searchActions)](./search-ui-react.getsearchintents.md) | Get search intents of the current query stored in headless using autocomplete request. |
 |  [getUserLocation(geolocationOptions)](./search-ui-react.getuserlocation.md) | Retrieves user's location using navigator.geolocation API. |
@@ -45,7 +45,7 @@
 |  [useAnalytics()](./search-ui-react.useanalytics.md) | Returns a service that can be used to report analytics events. |
 |  [useCardAnalyticsCallback(result, analyticsType)](./search-ui-react.usecardanalyticscallback.md) | Creates a memoized function for reporting card analytics. |
 |  [useCardFeedbackCallback(result)](./search-ui-react.usecardfeedbackcallback.md) | Creates a memoized function for reporting card feedback analytics. |
-|  [useComposedCssClasses(builtInClasses, customClasses)](./search-ui-react.usecomposedcssclasses.md) | useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes. |
+|  [useComposedCssClasses(builtInClasses, customClasses, disableBuiltInClasses)](./search-ui-react.usecomposedcssclasses.md) | useComposedCssClasses merges a component's built-in tailwind classes with custom tailwind classes. |
 |  [VerticalResults(props)](./search-ui-react.verticalresults.md) | A component that renders search results for a vertical page. |
 
 ## Interfaces
diff --git a/docs/search-ui-react.usecomposedcssclasses.md b/docs/search-ui-react.usecomposedcssclasses.md
@@ -9,7 +9,7 @@ useComposedCssClasses merges a component's built-in tailwind classes with custom
 **Signature:**
 
 ```typescript
-declare function useComposedCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface & string, string>>>(builtInClasses: Readonly<ClassInterface>, customClasses?: Partial<ClassInterface>): ClassInterface;
+declare function useComposedCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface & string, string>>>(builtInClasses: Readonly<ClassInterface>, customClasses?: Partial<ClassInterface>, disableBuiltInClasses?: boolean): ClassInterface;
 ```
 
 ## Parameters
@@ -18,6 +18,7 @@ declare function useComposedCssClasses<ClassInterface extends Partial<Record<key
 |  --- | --- | --- |
 |  builtInClasses | Readonly&lt;ClassInterface&gt; | The component's built-in tailwind classes |
 |  customClasses | Partial&lt;ClassInterface&gt; | _(Optional)_ The custom tailwind classes to merge with the built-in ones |
+|  disableBuiltInClasses | boolean | _(Optional)_ If set to true, the customClasses with replace (not merge with) the builtInClasses |
 
 **Returns:**
 
diff --git a/etc/search-ui-react.api.md b/etc/search-ui-react.api.md
@@ -273,7 +273,7 @@ export interface FilterOptionConfig {
 }
 
 // @public
-export function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses }: FilterSearchProps): JSX.Element;
+export function FilterSearch({ searchFields, label, placeholder, searchOnSelect, onSelect, onDropdownInputChange, afterDropdownInputFocus, sectioned, customCssClasses, disableBuiltInClasses }: FilterSearchProps): JSX.Element;
 
 // @public
 export interface FilterSearchCssClasses extends AutocompleteResultCssClasses {
@@ -295,6 +295,7 @@ export interface FilterSearchCssClasses extends AutocompleteResultCssClasses {
 export interface FilterSearchProps {
     afterDropdownInputFocus?: (params: AfterDropdownInputFocusProps) => void;
     customCssClasses?: FilterSearchCssClasses;
+    disableBuiltInClasses?: boolean;
     label?: string;
     onDropdownInputChange?: (params: OnDropdownInputChangeProps) => void;
     onSelect?: (params: OnSelectParams) => void;
@@ -869,7 +870,7 @@ export function useCardAnalyticsCallback<T = DefaultRawDataType>(result: CardAna
 export function useCardFeedbackCallback<T = DefaultRawDataType>(result: CardAnalyticsDataType<T>): (analyticsType: FeedbackType) => void;
 
 // @public
-export function useComposedCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface & string, string>>>(builtInClasses: Readonly<ClassInterface>, customClasses?: Partial<ClassInterface>): ClassInterface;
+export function useComposedCssClasses<ClassInterface extends Partial<Record<keyof ClassInterface & string, string>>>(builtInClasses: Readonly<ClassInterface>, customClasses?: Partial<ClassInterface>, disableBuiltInClasses?: boolean): ClassInterface;
 
 // @public
 export interface VerticalConfig<T = DefaultRawDataType> {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@yext/search-ui-react",
-  "version": "1.6.7",
+  "version": "1.7.0",
   "description": "A library of React Components for powering Yext Search integrations",
   "author": "slapshot@yext.com",
   "license": "BSD-3-Clause",
diff --git a/src/components/FilterSearch.tsx b/src/components/FilterSearch.tsx
@@ -110,7 +110,9 @@ export interface FilterSearchProps {
   /** Determines whether or not the results of the filter search are separated by field. Defaults to false. */
   sectioned?: boolean,
   /** CSS classes for customizing the component styling. */
-  customCssClasses?: FilterSearchCssClasses
+  customCssClasses?: FilterSearchCssClasses,
+  /** Whether to disable the default CSS classes entirely  */
+  disableBuiltInClasses?: boolean
 }
 
 /**
@@ -130,7 +132,8 @@ export function FilterSearch({
   onDropdownInputChange,
   afterDropdownInputFocus,
   sectioned = false,
-  customCssClasses
+  customCssClasses,
+  disableBuiltInClasses = false
 }: FilterSearchProps): JSX.Element {
   const searchActions = useSearchActions();
   const searchParamFields = searchFields.map((searchField) => {
@@ -144,7 +147,7 @@ export function FilterSearch({
     return fieldIds;
   }, [searchFields]);
 
-  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses);
+  const cssClasses = useComposedCssClasses(builtInCssClasses, customCssClasses, disableBuiltInClasses);
   const [currentFilter, setCurrentFilter] = useState<StaticFilter>();
   const [filterQuery, setFilterQuery] = useState<string>();
   const staticFilters = useSearchState(state => state.filters.static);
diff --git a/src/hooks/useComposedCssClasses.tsx b/src/hooks/useComposedCssClasses.tsx
@@ -44,15 +44,20 @@ export const twMerge = extendTailwindMerge({
  *
  * @param builtInClasses - The component's built-in tailwind classes
  * @param customClasses - The custom tailwind classes to merge with the built-in ones
+ * @param disableBuiltInClasses - If set to true, the customClasses with replace (not merge with) the builtInClasses
  * @returns The composed CSS classes
  */
 export function useComposedCssClasses<
   ClassInterface extends Partial<Record<keyof ClassInterface & string, string>>
 >(
   builtInClasses: Readonly<ClassInterface>,
-  customClasses?: Partial<ClassInterface>
+  customClasses?: Partial<ClassInterface>,
+  disableBuiltInClasses: boolean = false
 ): ClassInterface {
   return useMemo(() => {
+    if (disableBuiltInClasses && customClasses) {
+      return customClasses as Readonly<ClassInterface>;
+    }
     const mergedCssClasses = { ...builtInClasses };
     if (!customClasses) {
       return mergedCssClasses;
@@ -67,5 +72,5 @@ export function useComposedCssClasses<
       }
     });
     return mergedCssClasses;
-  }, [builtInClasses, customClasses]);
+  }, [builtInClasses, customClasses, disableBuiltInClasses]);
 }
diff --git a/test-site/src/pages/PeoplePage.tsx b/test-site/src/pages/PeoplePage.tsx
@@ -49,7 +49,7 @@ export function PeoplePage() {
    * This example function that's being used for onDropdownInputChange allows for clearing the filter in the search state when the input is empty.
    * This is especially useful for implementations that have multiple FilterSearch components.
    * Ex. a user can search using both inputs initially, but then wants to clear one of the FilterSearch inputs and re-run a search.
-   */  
+   */
   const removeAssociatedFilterWhenInputIsEmpty = (searchFields: { fieldApiName: string; entityType: string; }[]) => (params: OnDropdownInputChangeProps) => {
     const { value, executeFilterSearch } = params;
     // If there is still an input value, execute the filter search as normal

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@yext/search-ui-react",`
`3`		`- "version": "1.6.7",`
	`3`	`+ "version": "1.7.0",`
`4`	`4`	`"description": "A library of React Components for powering Yext Search integrations",`
`5`	`5`	`"author": "slapshot@yext.com",`
`6`	`6`	`"license": "BSD-3-Clause",`