StoreCountrySelector

When to use

Host or module store switching. Multi-store mode for district/regional views.

When NOT to use

When store is fixed by route — pass storeId to providers directly. Without store list API access.

Podium primitives composed

• Podium TextField
• Podium Autocomplete

Related stores

• useStoreSelectionStore
• useStoreIds
• useSelectedStore

Common pitfalls

• Tree-shakeable but adds ~5KB gzipped when imported.
• Discriminated props: multiple: true vs false — see props for mode-specific fields.
• Add data-testid on country and store inputs per conventions.

Props

Auto-generated from src/types/storeSelector.types.ts. Do not edit by hand. Run pnpm docs:props after changing source JSDoc.

StoreCountrySelectorSingleProps

Props for single-select mode

Prop	Type	Required	Description
clearable	boolean	No	Show clear option in dropdown (clear value from the menu)
compact	boolean	No	If true, uses compact AutoComplete sizing for dropdown inputs.
defaultStoreId	string	No	Optional initial store ID to pre-select
isProd	boolean	No	Whether running in production mode (affects API endpoints)
multiSelect	false	No	Single-select mode (explicitly false)
onError	(error: string) => void	No	Optional error callback
onMultipleStoresSelect	never	No	Optional callback when multiple stores are selected (not used in single mode)
onStoreIdChange	(storeId: string) => void	No	Optional callback to update host store ID (triggers userStore update in Zustand)
onStoreSelect	(storeId: string, storeNumber: string, country: string, language: string) => void	No	Callback when a store is selected
required	boolean	No	If true, fields are required
stack	boolean	No	If true, dropdowns stack vertically

StoreCountrySelectorMultipleProps

Props for multi-select mode

Prop	Type	Required	Description
clearable	boolean	No	Show clear option in dropdown (clear value from the menu)
compact	boolean	No	If true, uses compact AutoComplete sizing for dropdown inputs.
defaultStoreIds	string[]	No	Optional initial store IDs to pre-select
isProd	boolean	No	Whether running in production mode (affects API endpoints)
multiSelect	true	Yes	Multi-select mode (explicitly true)
onError	(error: string) => void	No	Optional error callback
onMultipleStoresSelect	(stores: SelectedStore[]) => void	No	Callback when multiple stores are selected
onStoreIdChange	never	No	Optional callback when storeId changes (not applicable for multi-select)
onStoreSelect	never	No	Callback when a single store is selected (not used in multi mode)
required	boolean	No	If true, fields are required
stack	boolean	No	If true, dropdowns stack vertically

Examples

Single store mode

import { StoreCountrySelector } from '@nike/whisker-component-library';

<StoreCountrySelector
  multiple={false}
  value={selected}
  onChange={setSelected}
  getAuthToken={() => token}
  isProd={false}
/>;

Live playground