diff --git a/src/components/Filters/CheckboxOption.tsx b/src/components/Filters/CheckboxOption.tsx index a8070eb29..87843d2d0 100644 --- a/src/components/Filters/CheckboxOption.tsx +++ b/src/components/Filters/CheckboxOption.tsx @@ -78,7 +78,6 @@ export function CheckboxOption(props: CheckboxOptionProps): JSX.Element | null { displayName = props.value, resultsCount } = props; - const cssClasses = useComposedCssClasses(builtInCssClasses, props.customCssClasses); const optionId = useId(); const { selectFilter, filters, applyFilters } = useFiltersContext(); diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts index f9f5e1e91..daa443db8 100644 --- a/src/hooks/useId.ts +++ b/src/hooks/useId.ts @@ -7,14 +7,14 @@ import { useLayoutEffect } from "./useLayoutEffect"; let serverHandoffComplete = false; let id = 0; function genId(): string { - ++id; - return id.toString(); + ++id; + return id.toString(); } // Workaround for https://github.com/webpack/webpack/issues/14814 // https://github.com/eps1lon/material-ui/blob/8d5f135b4d7a58253a99ab56dce4ac8de61f5dc1/packages/mui-utils/src/useId.ts#L21 const maybeReactUseId: undefined | (() => string) = (React as any)[ - "useId".toString() + "useId".toString() ]; /** @@ -29,33 +29,33 @@ const maybeReactUseId: undefined | (() => string) = (React as any)[ */ export function useId(): string { - if (maybeReactUseId !== undefined) { - return maybeReactUseId(); - } - - // If this instance isn't part of the initial render, we don't have to do the - // double render/patch-up dance. We can just generate the ID and return it. - const initialId = (serverHandoffComplete ? genId() : ''); - const [id, setId] = useState(initialId); - - useLayoutEffect(() => { - if (id === '') { - // Patch the ID after render. We do this in `useLayoutEffect` to avoid any - // rendering flicker, though it'll make the first render slower (unlikely - // to matter, but you're welcome to measure your app and let us know if - // it's a problem). - setId(genId()); - } - }, [id]); - - useEffect(() => { - if (serverHandoffComplete === false) { - // Flag all future uses of `useId` to skip the update dance. This is in - // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't - // accidentally bail out of the patch-up dance prematurely. - serverHandoffComplete = true; - } - }, []); - - return id; + if (maybeReactUseId !== undefined) { + return maybeReactUseId(); + } + + // If this instance isn't part of the initial render, we don't have to do the + // double render/patch-up dance. We can just generate the ID and return it. + const initialId = (serverHandoffComplete ? genId() : ''); + const [id, setId] = useState(initialId); + + useLayoutEffect(() => { + if (id === '') { + // Patch the ID after render. We do this in `useLayoutEffect` to avoid any + // rendering flicker, though it'll make the first render slower (unlikely + // to matter, but you're welcome to measure your app and let us know if + // it's a problem). + setId(genId()); + } + }, [id]); + + useEffect(() => { + if (serverHandoffComplete === false) { + // Flag all future uses of `useId` to skip the update dance. This is in + // `useEffect` because it goes after `useLayoutEffect`, ensuring we don't + // accidentally bail out of the patch-up dance prematurely. + serverHandoffComplete = true; + } + }, []); + + return id; } diff --git a/src/hooks/useLayoutEffect.ts b/src/hooks/useLayoutEffect.ts index 6610006c9..1a9214b83 100644 --- a/src/hooks/useLayoutEffect.ts +++ b/src/hooks/useLayoutEffect.ts @@ -1,5 +1,5 @@ import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect'; export const useLayoutEffect = typeof useIsomorphicLayoutEffect === 'function' - ? useIsomorphicLayoutEffect - : useIsomorphicLayoutEffect['default']; + ? useIsomorphicLayoutEffect + : useIsomorphicLayoutEffect['default']; diff --git a/tests/components/FilterSearch.test.tsx b/tests/components/FilterSearch.test.tsx index f74745eab..9f67f251f 100644 --- a/tests/components/FilterSearch.test.tsx +++ b/tests/components/FilterSearch.test.tsx @@ -1,7 +1,7 @@ import { FilterSearch, FilterSearchProps } from '../../src/components/FilterSearch'; import { render, RenderResult, screen } from '@testing-library/react'; -import * as searchOperations from '../../src/utils/search-operations'; import userEvent from '@testing-library/user-event'; +import * as searchOperations from '../../src/utils/search-operations'; import { labeledFilterSearchResponse, unlabeledFilterSearchResponse, diff --git a/yext-search-ui-react-1.5.0.tgz b/yext-search-ui-react-1.5.0.tgz index 8abcf5593..7effeb8a5 100644 Binary files a/yext-search-ui-react-1.5.0.tgz and b/yext-search-ui-react-1.5.0.tgz differ