Show All and Solo selection buttons for MultiSelect. (#4723)

* Show All and Solo selection buttons for MultiSelect.

Similar to previous behavior of viewing events for single camera with 1 click, or All.

* Fix visual bug with MultiSelect when selecting similar named options.
   eg. options like frontdoor, frontside, backdoor, etc

* fix key prop for lint

* Change MultiSelect onSolo to onSelectSingle

* cosmetic changes on MultiSelect

* Different look for SelectSingle buttons

* Show All button is aligned with the items below it, no matter the popup size

* MultiSelect ShowAll unfocused by default

web/src/routes/Events.jsx

@@ -301,6 +301,8 @@ export default function Events({ path, ...props }) {
           options={filterValues.cameras}
           selection={searchParams.cameras}
           onToggle={(item) => onToggleNamedFilter("cameras", item)}
+          onShowAll={() => onFilter("cameras", ["all"])}
+          onSelectSingle={(item) => onFilter("cameras", item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@@ -308,6 +310,8 @@ export default function Events({ path, ...props }) {
           options={filterValues.labels}
           selection={searchParams.labels}
           onToggle={(item) => onToggleNamedFilter("labels", item) }
+          onShowAll={() => onFilter("labels", ["all"])}
+          onSelectSingle={(item) => onFilter("labels", item)}
         />
         <MultiSelect
           className="basis-1/5 cursor-pointer rounded dark:bg-slate-800"
@@ -315,6 +319,8 @@ export default function Events({ path, ...props }) {
           options={filterValues.zones}
           selection={searchParams.zones}
           onToggle={(item) => onToggleNamedFilter("zones", item) }
+          onShowAll={() => onFilter("zones", ["all"])}
+          onSelectSingle={(item) => onFilter("zones", item)}
         />
         {
           filterValues.sub_labels.length > 0 && (
@@ -324,6 +330,8 @@ export default function Events({ path, ...props }) {
               options={filterValues.sub_labels}
               selection={searchParams.sub_labels}
               onToggle={(item) => onToggleNamedFilter("sub_labels", item) }
+              onShowAll={() => onFilter("sub_labels", ["all"])}
+              onSelectSingle={(item) => onFilter("sub_labels", item)}
             />
           )}
         <div ref={datePicker} className="ml-auto">