@faststore/components 2.0.85-alpha.0 → 2.0.88-alpha.0

package/dist/molecules/SkuSelector/useDefineVariant.d.ts

@@ -0,0 +1,3 @@
+import { SkuOption } from './SkuSelector';
+export type Variant = 'image' | 'color' | 'label';
+export declare const useDefineVariant: (options: SkuOption[], variant?: Variant) => Variant;

package/dist/molecules/SkuSelector/useDefineVariant.js

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+const getImageName = (src) => {
+    const sourcePath = new URL(src).pathname;
+    const imageName = sourcePath.split('/').at(-1);
+    return imageName;
+};
+export const useDefineVariant = (options, variant) => useMemo(() => {
+    if (variant)
+        return variant;
+    const allOptionsHaveHexColor = options.every((option) => option.hexColor);
+    if (allOptionsHaveHexColor) {
+        return 'color';
+    }
+    const firstImageName = options[0]?.src && getImageName(options[0].src);
+    const areSourcesEqualsOrNull = options.every((option) => {
+        if (!option.src) {
+            return true;
+        }
+        const optionImageName = getImageName(option.src);
+        return optionImageName === firstImageName;
+    });
+    if (!areSourcesEqualsOrNull) {
+        return 'image';
+    }
+    return 'label';
+}, [options, variant]);
+//# sourceMappingURL=useDefineVariant.js.map

package/dist/molecules/SkuSelector/useDefineVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDefineVariant.js","sourceRoot":"","sources":["../../../src/molecules/SkuSelector/useDefineVariant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAK/B,MAAM,YAAY,GAAG,CAAC,GAAW,EAAE,EAAE;IACnC,MAAM,UAAU,GAAG,IAAI,GAAG,CAAC,GAAG,CAAC,CAAC,QAAQ,CAAA;IACxC,MAAM,SAAS,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IAC9C,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAG,CAAC,OAAoB,EAAE,OAAiB,EAAW,EAAE,CACnF,OAAO,CAAC,GAAG,EAAE;IACX,IAAG,OAAO;QAAE,OAAO,OAAO,CAAA;IAE1B,MAAM,sBAAsB,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAA;IACzE,IAAI,sBAAsB,EAAE;QAC1B,OAAO,OAAO,CAAA;KACf;IAED,MAAM,cAAc,GAAG,OAAO,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,YAAY,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAA;IAEtE,MAAM,sBAAsB,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,EAAE;QACtD,IAAI,CAAC,MAAM,CAAC,GAAG,EAAE;YACf,OAAO,IAAI,CAAA;SACZ;QACD,MAAM,eAAe,GAAG,YAAY,CAAC,MAAM,CAAC,GAAG,CAAC,CAAA;QAChD,OAAO,eAAe,KAAK,cAAc,CAAA;IAC3C,CAAC,CAAC,CAAA;IAEF,IAAI,CAAC,sBAAsB,EAAE;QAC3B,OAAO,OAAO,CAAA;KACf;IAED,OAAO,OAAO,CAAA;AAChB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAA"}

package/dist/molecules/SkuSelector/useSkuSlug.d.ts

@@ -0,0 +1,6 @@
+import { SkuOption } from './SkuSelector';
+export declare const useSkuSlug: (activeVariations: Record<string, string>, slugsMap: Record<string, string>, skuPropertyName: string, getItemHrefProp?: ((option: SkuOption) => string) | undefined) => {
+    getItemHref: (option: SkuOption) => string | {
+        getItemHrefProp: (option: SkuOption) => string;
+    };
+};

package/dist/molecules/SkuSelector/useSkuSlug.js

@@ -0,0 +1,23 @@
+import { useCallback } from 'react';
+function getSkuSlug(slugsMap, selectedVariations, dominantVariation) {
+    const slugsMapKey = Object.entries(selectedVariations).flat().join('-');
+    if (slugsMapKey in slugsMap) {
+        return slugsMap[slugsMapKey];
+    }
+    const possibleVariants = Object.keys(slugsMap);
+    const firstVariationForDominantValue = possibleVariants.find((slug) => slug.includes(`${dominantVariation}-${selectedVariations[dominantVariation]}`));
+    return slugsMap[firstVariationForDominantValue ?? possibleVariants[0]];
+}
+export const useSkuSlug = (activeVariations, slugsMap, skuPropertyName, getItemHrefProp) => {
+    const getItemHref = useCallback((option) => {
+        if (getItemHrefProp)
+            return { getItemHrefProp };
+        const currentItemHref = `/${getSkuSlug(slugsMap, {
+            ...activeVariations,
+            [skuPropertyName]: option.value,
+        }, skuPropertyName)}/p`;
+        return currentItemHref;
+    }, [activeVariations, getItemHrefProp, slugsMap, skuPropertyName]);
+    return { getItemHref };
+};
+//# sourceMappingURL=useSkuSlug.js.map

package/dist/molecules/SkuSelector/useSkuSlug.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSkuSlug.js","sourceRoot":"","sources":["../../../src/molecules/SkuSelector/useSkuSlug.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAGnC,SAAS,UAAU,CACjB,QAAgC,EAChC,kBAA0C,EAC1C,iBAAyB;IAEzB,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,IAAI,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAEvE,IAAI,WAAW,IAAI,QAAQ,EAAE;QAC3B,OAAO,QAAQ,CAAC,WAAW,CAAC,CAAA;KAC7B;IAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAE9C,MAAM,8BAA8B,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CACpE,IAAI,CAAC,QAAQ,CACX,GAAG,iBAAiB,IAAI,kBAAkB,CAAC,iBAAiB,CAAC,EAAE,CAChE,CACF,CAAA;IAED,OAAO,QAAQ,CAAC,8BAA8B,IAAI,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAA;AACxE,CAAC;AAED,MAAM,CAAC,MAAM,UAAU,GAAG,CACxB,gBAAwC,EACxC,QAAgC,EAChC,eAAuB,EACvB,eAA+C,EAC/C,EAAE;IACF,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,MAAiB,EAAE,EAAE;QACpB,IAAG,eAAe;YAAE,OAAO,EAAE,eAAe,EAAE,CAAA;QAE9C,MAAM,eAAe,GAAG,IAAI,UAAU,CACpC,QAAQ,EACR;YACE,GAAG,gBAAgB;YACnB,CAAC,eAAe,CAAC,EAAE,MAAM,CAAC,KAAK;SAChC,EACD,eAAe,CAChB,IAAI,CAAA;QACL,OAAO,eAAe,CAAA;IACxB,CAAC,EACD,CAAC,gBAAgB,EAAE,eAAe,EAAE,QAAQ,EAAE,eAAe,CAAC,CAC/D,CAAA;IACD,OAAO,EAAE,WAAW,EAAE,CAAA;AACxB,CAAC,CAAA"}

package/dist/organisms/SearchInput/SearchInput.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { HTMLAttributes } from 'react';
+import { SearchProviderContextValue } from '../../molecules/SearchProvider';
+export type SearchInputProps = {
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string;
+    /**
+     * The current status of the Search Dropdown.
+     */
+    visibleDropdown: boolean;
+} & HTMLAttributes<HTMLDivElement> & SearchProviderContextValue;
+declare const SearchInput: React.ForwardRefExoticComponent<{
+    /**
+     * ID to find this component in testing tools (e.g.: cypress,
+     * testing-library, and jest).
+     */
+    testId?: string | undefined;
+    /**
+     * The current status of the Search Dropdown.
+     */
+    visibleDropdown: boolean;
+} & React.HTMLAttributes<HTMLDivElement> & SearchProviderContextValue & React.RefAttributes<HTMLDivElement>>;
+export default SearchInput;

package/dist/organisms/SearchInput/SearchInput.js

@@ -0,0 +1,8 @@
+import React, { forwardRef } from 'react';
+import SearchProvider from '../../molecules/SearchProvider';
+const SearchInput = forwardRef(function SearchInput({ children, visibleDropdown = false, testId = 'fs-search-input', isLoading, products, term, terms, onSearchSelection, ...otherProps }, ref) {
+    return (React.createElement("div", { ref: ref, "data-fs-search-input": true, "data-fs-search-input-dropdown-visible": visibleDropdown, "data-testid": testId, ...otherProps },
+        React.createElement(SearchProvider, { onSearchSelection: onSearchSelection, isLoading: isLoading, term: term, products: products, terms: terms }, children)));
+});
+export default SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/dist/organisms/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../src/organisms/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,cAA8C,MAAM,gCAAgC,CAAA;AAe3F,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,QAAQ,EACR,eAAe,GAAG,KAAK,EACvB,MAAM,GAAG,iBAAiB,EAC1B,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,iBAAiB,EACjB,GAAG,UAAU,EACd,EACD,GAAG;IAEH,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,yEAE+B,eAAe,iBACzC,MAAM,KACf,UAAU;QAEd,oBAAC,cAAc,IACb,iBAAiB,EAAE,iBAAiB,EACpC,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,IAEX,QAAQ,CACM,CACb,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/organisms/SearchInput/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchInput';
+export type { SearchInputProps } from './SearchInput';

package/dist/organisms/SearchInput/index.js

@@ -0,0 +1,2 @@
+export { default } from './SearchInput';
+//# sourceMappingURL=index.js.map

package/dist/organisms/SearchInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/organisms/SearchInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/components",
-  "version": "2.0.85-alpha.0",
+  "version": "2.0.88-alpha.0",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",
   "author": "Emerson Laurentino @emersonlaurentino",
@@ -30,5 +30,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "24590eae428eae6be0b7c43cbec9fe236270794e"
+  "gitHead": "a9aa7a6572c08e0bd26e384bb66464e633f1ad84"
 }

package/src/assets/MagnifyingGlass.tsx

@@ -1,38 +1,21 @@
 import React from 'react'
-import type { FC } from 'react'
+import { IconProps } from './IconProps'
 
 // Icon from Phosphor Icons
-const MagnifyingGlass: FC = () => (
+const MagnifyingGlass = ({ size = 24 }: IconProps) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    viewBox="0 0 256 256"
-    strokeWidth="16"
-    width={24}
-    height={24}
+    width={size}
+    height={size}
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
   >
-    <rect width="256" height="256" fill="none"></rect>
-    <circle
-      cx="116"
-      cy="116"
-      r="84"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="16"
-    ></circle>
-    <line
-      x1="175.4"
-      y1="175.4"
-      x2="224"
-      y2="224"
-      fill="none"
-      stroke="currentColor"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="16"
-    ></line>
+    <circle cx="11" cy="11" r="8" />
+    <line x1="21" y1="21" x2="16.65" y2="16.65" />
   </svg>
 )
 

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export { default as UIProvider, Toast as ToastProps, useUI } from './UIProvider'
 export { useFadeEffect } from './useFadeEffect'
 export { useTrapFocus } from './useTrapFocus'
+export { useSearch } from './useSearch'

package/src/hooks/useSearch.ts

@@ -0,0 +1,12 @@
+import { SearchContext } from "../molecules/SearchProvider/SearchProvider"
+import { useContext } from "react"
+
+export const useSearch = () => {
+    const context = useContext(SearchContext)
+
+    if (!context) {
+        return { inContext: false as const }
+    }
+
+    return { inContext: true as const, values: context }
+}

package/src/index.ts

@@ -116,6 +116,17 @@ export { default as RadioGroup, RadioOption } from './molecules/RadioGroup'
 export type { RadioGroupProps, RadioOptionProps } from './molecules/RadioGroup'
 export { default as Rating } from './molecules/Rating'
 export type { RatingProps } from './molecules/Rating'
+
+export { default as SearchProvider } from './molecules/SearchProvider'
+export type {
+  SearchProviderContextValue,
+} from './molecules/SearchProvider'
+
+export { default as SearchInputField } from './molecules/SearchInputField'
+export type {
+  SearchInputFieldProps,
+  SearchInputFieldRef,
+} from './molecules/SearchInputField'
 export {
   default as SearchAutoComplete,
   SearchAutoCompleteTerm,
@@ -124,6 +135,10 @@ export type {
   SearchAutoCompleteProps,
   SearchAutoCompleteTermProps,
 } from './molecules/SearchAutoComplete'
+export {
+  default as SearchDropdown,
+  SearchDropdownProps,
+} from './molecules/SearchDropdown'
 export {
   default as SearchHistory,
   SearchHistoryTerm,
@@ -148,6 +163,8 @@ export { default as SearchTop, SearchTopTerm } from './molecules/SearchTop'
 export type { SearchTopProps, SearchTopTermProps } from './molecules/SearchTop'
 export { default as SelectField } from './molecules/SelectField'
 export type { SelectFieldProps } from './molecules/SelectField'
+export { default as SkuSelector } from './molecules/SkuSelector'
+export type { SkuSelectorProps, SkuOption } from './molecules/SkuSelector'
 export {
   Table,
   TableBody,
@@ -188,6 +205,9 @@ export type { PaymentMethodsProps } from './organisms/PaymentMethods'
 export { default as PriceRange } from './organisms/PriceRange'
 export type { PriceRangeProps } from './organisms/PriceRange'
 
+export { default as SearchInput } from './organisms/SearchInput'
+export type { SearchInputProps } from './organisms/SearchInput'
+
 export { default as SlideOver, SlideOverHeader } from './organisms/SlideOver'
 export type {
   SlideOverProps,

package/src/molecules/SearchAutoComplete/SearchAutoComplete.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { List } from '../..'
+import { List, useSearch } from '../..'
 
 export interface SearchAutoCompleteProps
   extends HTMLAttributes<HTMLDivElement> {
@@ -14,6 +14,13 @@ const SearchAutoComplete = ({
   children,
   ...otherProps
 }: SearchAutoCompleteProps) => {
+
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.terms.length <= 0 || values.term.length <= 0)) {
+    return null
+  }
+
   return (
     <section data-testid={testId} data-fs-search-auto-complete {...otherProps}>
       <List as="ol">{children}</List>

package/src/molecules/SearchDropdown/SearchDropdown.tsx

@@ -0,0 +1,45 @@
+import type { HTMLAttributes, ReactNode, PropsWithChildren } from 'react'
+import React, { forwardRef } from 'react'
+import { useSearch } from '../../hooks'
+
+export interface SearchDropdownProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress,
+   * testing-library, and jest).
+   */
+  testId?: string
+  children?: ReactNode
+}
+
+const SearchLoading = () => {
+  const { inContext, values } = useSearch()
+
+  return (
+    <>
+      { (inContext && values.isLoading) && <p data-fs-search-dropdown-loading-text>Loading...</p> }
+    </>
+  )
+}
+
+const SearchDropdown = forwardRef<
+  HTMLDivElement,
+  PropsWithChildren<SearchDropdownProps>
+>(function SearchDropdown(
+  {
+    testId = 'fs-search-dropdown',
+    children,
+    ...otherProps
+  },
+  ref
+) {
+  return (
+    <div ref={ref} data-fs-search-dropdown data-testid={testId} {...otherProps}>
+      <section>
+        <SearchLoading/>
+        {children}
+      </section>
+    </div>
+  )
+})
+
+export default SearchDropdown

package/src/molecules/SearchDropdown/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchDropdown'
+export type { SearchDropdownProps } from './SearchDropdown'

package/src/molecules/SearchHistory/SearchHistory.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { List, Button } from '../..'
+import { List, Button, useSearch } from '../..'
 
 export interface SearchHistoryProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -28,6 +28,13 @@ const SearchHistory = ({
   children,
   ...otherProps
 }: SearchHistoryProps) => {
+
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.term.length !== 0 || values.isLoading)) {
+    return null
+  }
+
   return (
     <section data-testid={testId} data-fs-search-history {...otherProps}>
       <header data-fs-search-history-header>

package/src/molecules/SearchInputField/SearchInputField.tsx

@@ -0,0 +1,100 @@
+import type {
+  AriaAttributes,
+  FormEvent,
+  InputHTMLAttributes,
+  ReactNode,
+} from 'react'
+import React, { forwardRef, useImperativeHandle, useRef } from 'react'
+
+import { IconButton, Input, MagnifyingGlass } from '../..'
+
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onSubmit'>
+
+type ButtonProps = {
+  onClick?: () => void
+  testId?: string
+}
+export interface SearchInputFieldProps extends InputProps {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Props for the submit button inside the input.
+   */
+  buttonProps?: ButtonProps
+  /**
+   * A React component that will be rendered as an icon (submit button).
+   * @default <MagnifyingGlass />
+   */
+  buttonIcon?: ReactNode
+  /**
+   * Custom aria-label for input and button.
+   */
+  'aria-label'?: AriaAttributes['aria-label']
+  /**
+   * Callback function when submitted.
+   */
+  onSubmit: (value: string) => void
+}
+
+export interface SearchInputFieldRef {
+  inputRef?: HTMLInputElement | null
+  formRef?: HTMLFormElement | null
+}
+
+const SearchInputField = forwardRef<
+  SearchInputFieldRef | null,
+  SearchInputFieldProps
+>(function SearchInputField(
+  {
+    onSubmit,
+    buttonIcon,
+    'aria-label': ariaLabel = 'search',
+    testId = 'fs-search-input',
+    buttonProps,
+    ...otherProps
+  },
+  ref
+) {
+  const inputRef = useRef<HTMLInputElement>(null)
+  const formRef = useRef<HTMLFormElement>(null)
+
+  const handleSubmit = (event: FormEvent) => {
+    event.preventDefault()
+
+    if (inputRef.current?.value !== '') {
+      onSubmit(inputRef.current!.value)
+    }
+  }
+
+  useImperativeHandle(ref, () => ({
+    inputRef: inputRef.current,
+    formRef: formRef.current,
+  }))
+
+  return (
+    <form
+      ref={formRef}
+      data-fs-search-input-field
+      data-testid={testId}
+      onSubmit={handleSubmit}
+      role="search"
+    >
+      <Input
+        ref={inputRef}
+        aria-label={ariaLabel}
+        data-fs-search-input-field-input
+        {...otherProps}
+      />
+      <IconButton
+        type="submit"
+        aria-label="Submit Search"
+        icon={buttonIcon ?? <MagnifyingGlass />}
+        {...buttonProps}
+      />
+    </form>
+  )
+})
+
+export default SearchInputField

package/src/molecules/SearchInputField/index.ts

@@ -0,0 +1,5 @@
+export { default } from './SearchInputField'
+export type {
+  SearchInputFieldProps,
+  SearchInputFieldRef,
+} from './SearchInputField'

package/src/molecules/SearchProducts/SearchProductItemContent.tsx

@@ -8,7 +8,7 @@ interface Price {
   formatter: PriceFormatter
 }
 
-export type SearchProductItemContentProps = {
+export interface SearchProductItemContentProps {
   /**
    * Specifies the product's title.
    */

package/src/molecules/SearchProducts/SearchProducts.tsx

@@ -1,5 +1,5 @@
 import React, { HTMLAttributes } from 'react'
-import { List } from '../..'
+import { List, useSearch } from '../..'
 
 export interface SearchProductsProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -18,6 +18,11 @@ const SearchProductsProps = ({
   children,
   ...otherProps
 }: SearchProductsProps) => {
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.products.length <= 0)) {
+    return null
+  }
   return (
     <section data-testid={testId} data-fs-search-products {...otherProps}>
       <header data-fs-search-products-header>

package/src/molecules/SearchProvider/SearchProvider.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import type { PropsWithChildren } from 'react'
+import { createContext } from 'react'
+
+export interface SearchProviderContextValue {
+  /**
+   * Term to be researched.
+   */
+  term: string
+  /**
+   * Enables a loading state.
+   */
+  isLoading: boolean
+  /**
+   * List of Suggestion terms.
+   */
+  terms: Array<{ value: string }>
+  /**
+   * List of Suggested products.
+   */
+  products: {}[]
+  /**
+   * Callback function when a search term is selected.
+   */
+  onSearchSelection?: (term: string, path: string) => void
+}
+
+export const SearchContext = createContext<SearchProviderContextValue | null>(
+  null
+)
+
+function SearchProvider({
+  onSearchSelection,
+  children,
+  term,
+  terms,
+  products,
+  isLoading,
+}: PropsWithChildren<SearchProviderContextValue>) {
+  return (
+    <SearchContext.Provider
+      value={{ onSearchSelection, term, terms, products, isLoading }}
+    >
+      {children}
+    </SearchContext.Provider>
+  )
+}
+
+export default SearchProvider

package/src/molecules/SearchProvider/index.ts

@@ -0,0 +1,2 @@
+export { default } from './SearchProvider'
+export type { SearchProviderContextValue } from './SearchProvider'

package/src/molecules/SearchTop/SearchTop.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { forwardRef } from 'react'
 import type { HTMLAttributes } from 'react'
 
-import { List } from '../../'
+import { List, useSearch } from '../../'
 
 export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
   /**
@@ -13,39 +13,30 @@ export interface SearchTopProps extends HTMLAttributes<HTMLDivElement> {
    * Title attribute for the <section> tag rendered by this component.
    */
   title: string
-  /**
-   * Defines the the message displayed while loading.
-   */
-  loadingMessage?: string
-  /**
-   * Enables a loading state.
-   */
-  isLoading?: boolean
 }
 
 const SearchTop = forwardRef<HTMLDivElement, SearchTopProps>(function SearchTop(
   {
     testId = 'fs-top-search',
     title = 'Top Search',
-    loadingMessage = 'Loading...',
-    isLoading,
     children,
     ...otherProps
   },
   ref
 ) {
+
+  const { inContext, values } = useSearch()
+
+  if (inContext && (values.term.length !== 0 || values.isLoading)) {
+    return null
+  }
+
   return (
     <section ref={ref} data-testid={testId} data-fs-search-top {...otherProps}>
-      {isLoading ? (
-        <p data-fs-search-top-input-loading-text>{loadingMessage}</p>
-      ) : (
-        <>
-          <header data-fs-search-top-header>
-            <p data-fs-search-top-title>{title}</p>
-          </header>
-          <List as="ol">{children}</List>
-        </>
-      )}
+        <header data-fs-search-top-header>
+          <p data-fs-search-top-title>{title}</p>
+        </header>
+        <List as="ol">{children}</List>
     </section>
   )
 })