HallPicker

HallPicker selects one hall or all halls. It composes Menu. The parent supplies options and selection.

import HallPicker, { type HallOption } from "@haloid/azucar/hall-picker";

Value

Pass an option ID as value. Use null for all halls. onChange reports the next selection. Options belong to the selected facility. Change them together with the selection when the facility changes.

This example shows a controlled selection from two options.

function ScopePicker() {
const [value, setValue] = useState("a");
return (
  <HallPicker
    halls={[{ id: "a", label: "Option A" }, { id: "b", label: "Option B" }]}
    value={value}
    onChange={setValue}
  />
);
}

render(<ScopePicker />);

Placement

Place HallPicker beside FacilityPicker in the same row. Both use the existing menu trigger. The parent owns spacing. Options use the existing menu's keyboard navigation and dismissal. An empty option list shows No halls available. An unknown selected ID shows Select hall.

API

interface HallOption {
  id: string;
  label: string;
}

interface Props {
  halls: readonly HallOption[];
  value: string | null;
  onChange: (value: string | null) => void;
}

Use in north

Power Mapping supplies options for its selected facility. A facility change selects that facility's first hall. The picker does not fetch data. North supplies the option list.