📦 store-dropdown-utils

A utility + React component package to manage multi-select dropdowns for sites and stores. It helps you build grouped options (Sites → Stores) and automatically handles selection logic like:

• ✅ Select a site → all its stores are selected
• ✅ Unselect a site → all its stores are unselected
• ✅ Select all stores → site auto-checks itself
• ✅ Works seamlessly with react-multi-select-component

✨ Installation

Install with npm:

npm install store-dropdown-utils react react-dom react-multi-select-component

Or with yarn:

yarn add store-dropdown-utils react react-dom react-multi-select-component

🚀 Usage

1. Import the component

import React, { useState } from "react";
import { MultiSelectStores, Option } from "store-dropdown-utils";

const sites = [
  { siteId: "site-1", siteName: "Punjab" },
  { siteId: "site-2", siteName: "Sindh" },
  { siteId: "site-3", siteName: "Balochistan" },
];

const stores = [
  { storeId: "store-1", storeName: "Lahore Store", siteId: "site-1" },
  { storeId: "store-2", storeName: "Faisalabad Store", siteId: "site-1" },
  { storeId: "store-5", storeName: "Karachi Store", siteId: "site-2" },
  { storeId: "store-8", storeName: "Quetta Store", siteId: "site-3" },
];

export default function App() {
  const [selectedStores, setSelectedStores] = useState<Option[]>([]);

  return (
    <div>
      <h2>Store Selector</h2>
      <MultiSelectStores
        sites={sites}
        stores={stores}
        value={selectedStores}
        onChange={setSelectedStores}
        labelledBy="Select Stores"
      />
      <pre>{JSON.stringify(selectedStores, null, 2)}</pre>
    </div>
  );
}

2. Utility Functions

You can also use the pure utility functions without React:

import {
  buildGroupedOptions,
  handleStoreSelectionWrapper,
  Option,
} from "store-dropdown-utils";

const grouped = buildGroupedOptions(sites, stores);
console.log(grouped);

const selected = handleStoreSelectionWrapper([], "storeIds", [], sites, stores);
console.log(selected);

⚙️ API

<MultiSelectStores /> Props

| Prop | Type | Default | Description | | ------------ | ---------------------------------------------------------- | ----------------- | ------------------------------------ | | sites | { siteId: string; siteName: string }[] | required | List of sites (regions/categories). | | stores | { storeId: string; storeName: string; siteId: string }[] | required | List of stores under each site. | | value | Option[] | [] | Currently selected items. | | onChange | (selected: Option[]) => void | undefined | Callback when selected items change. | | labelledBy | string | "Select Stores" | Label for accessibility. | | className | string | undefined | Extra Tailwind/CSS classes. |

Utility Functions

buildGroupedOptions(sites, stores)

• Builds a grouped list of site headings + stores, formatted for react-multi-select-component.

handleStoreSelectionWrapper(nextSelected, key, prevSelected, sites, stores)

• Manages selection logic:

  • Site selected → adds all stores
  • Site unselected → removes all stores
  • Auto-manages site checkmarks if all stores are selected

📜 License

MIT © 2025 \Mehroz Farooq