Refactor search plugin to use manifest.buttons for its open trigger

demo/js/draw-ol.js

@@ -53,15 +53,15 @@ const interactiveMap = new InteractiveMap('map', {
   enableZoomControls: true,
   // readMapText: true,
   plugins: [
-    mapStylesPlugin({
-      mapStyles: [...vtsMapStyles27700, apgbAerialStyle] // ngdMapStyles27700
-    }),
     searchPlugin({
       transformRequest: transformGeocodeRequest,
       osNamesURL: process.env.OS_NAMES_URL,
       width: '300px',
       showMarker: false,
     }),
+    mapStylesPlugin({
+      mapStyles: [...vtsMapStyles27700, apgbAerialStyle] // ngdMapStyles27700
+    }),
     interactPlugin,
     drawPlugin
   ]

demo/js/draw.js

@@ -123,13 +123,6 @@ const interactiveMap = new InteractiveMap('map', {
     backgroundColor: '#f5f5f0'
   },
   plugins: [
-    datasetsPlugin,
-    mapStylesPlugin({
-      mapStyles: vtsMapStyles3857
-    }),
-    // scaleBarPlugin({
-    //   units: 'metric'
-    // }),
     searchPlugin({
       transformRequest: transformGeocodeRequest,
       osNamesURL: process.env.OS_NAMES_URL,
@@ -138,6 +131,13 @@ const interactiveMap = new InteractiveMap('map', {
       showMarker: false,
       // expanded: true
     }),
+    datasetsPlugin,
+    mapStylesPlugin({
+      mapStyles: vtsMapStyles3857
+    }),
+    // scaleBarPlugin({
+    //   units: 'metric'
+    // }),
     interactPlugin,
     drawPlugin
   ]

demo/js/esm.js

@@ -333,13 +333,6 @@ const interactiveMap = new InteractiveMap('map', {
     backgroundColor: '#f5f5f0'
   },
   plugins: [
-    datasetsPlugin,
-    mapStylesPlugin({
-      mapStyles: vtsMapStyles3857
-    }),
-    scaleBarPlugin({
-      units: 'metric'
-    }),
     searchPlugin({
       transformRequest: transformGeocodeRequest,
       osNamesURL: process.env.OS_NAMES_URL,
@@ -348,6 +341,13 @@ const interactiveMap = new InteractiveMap('map', {
       showMarker: true
       // expanded: true
     }),
+    datasetsPlugin,
+    mapStylesPlugin({
+      mapStyles: vtsMapStyles3857
+    }),
+    scaleBarPlugin({
+      units: 'metric'
+    }),
     interactPlugin,
     framePlugin
   ]

demo/js/farming.js

@@ -105,9 +105,6 @@ var interactiveMap = new InteractiveMap('map', {
     backgroundColor: '#f5f5f0'
   },
   plugins: [
-    scaleBarPlugin({
-      units: 'metric'
-    }),
     searchPlugin({
       transformRequest: transformGeocodeRequest,
       osNamesURL: process.env.OS_NAMES_URL,
@@ -116,6 +113,9 @@ var interactiveMap = new InteractiveMap('map', {
       showMarker: false,
       // expanded: true
     }),
+    scaleBarPlugin({
+      units: 'metric'
+    }),
     // useLocationPlugin(),
     datasetsPlugin,
     mapStylesPlugin({

demo/js/gep.js

@@ -36,18 +36,18 @@ const interactiveMap = new InteractiveMap('map', {
   maxZoom: 20,
   containerHeight: '650px',
   plugins: [
-    mapStylesPlugin({
-      mapStyles: [...vtsMapStyles27700, apgbAerialStyle]
-    }),
-    scaleBarPlugin({
-      units: 'metric'
-    }),
     searchPlugin({
       transformRequest: transformGeocodeRequest,
       osNamesURL: process.env.OS_NAMES_URL,
       width: '300px',
       showMarker: true
     }),
+    mapStylesPlugin({
+      mapStyles: [...vtsMapStyles27700, apgbAerialStyle]
+    }),
+    scaleBarPlugin({
+      units: 'metric'
+    }),
     interactPlugin
   ]
 })

demo/js/index.js

@@ -305,13 +305,6 @@ const interactiveMap = new InteractiveMap('map', {
   //   selectedColor: { outdoor: '#ffdd00', dark: '#ffaa00' }
   // },
   plugins: [
-    datasetsPlugin,
-    mapStylesPlugin({
-      mapStyles: vtsMapStyles3857
-    }),
-    scaleBarPlugin({
-      units: 'metric'
-    }),
     searchPlugin({
       transformRequest: transformGeocodeRequest,
       osNamesURL: process.env.OS_NAMES_URL,
@@ -320,6 +313,13 @@ const interactiveMap = new InteractiveMap('map', {
       showMarker: true,
       showLabel: true
     }),
+    datasetsPlugin,
+    mapStylesPlugin({
+      mapStyles: vtsMapStyles3857
+    }),
+    scaleBarPlugin({
+      units: 'metric'
+    }),
     // useLocationPlugin(),
     interactPlugin,
     framePlugin

demo/js/ml-datasets.js

@@ -333,13 +333,6 @@ const interactiveMap = new InteractiveMap('map', {
     backgroundColor: '#f5f5f0'
   },
   plugins: [
-    datasetsPlugin,
-    mapStylesPlugin({
-      mapStyles: vtsMapStyles3857
-    }),
-    scaleBarPlugin({
-      units: 'metric'
-    }),
     searchPlugin({
       transformRequest: transformGeocodeRequest,
       osNamesURL: process.env.OS_NAMES_URL,
@@ -348,6 +341,13 @@ const interactiveMap = new InteractiveMap('map', {
       showMarker: true
       // expanded: true
     }),
+    datasetsPlugin,
+    mapStylesPlugin({
+      mapStyles: vtsMapStyles3857
+    }),
+    scaleBarPlugin({
+      units: 'metric'
+    }),
     interactPlugin,
     framePlugin
   ]

demo/js/planning-ol.js

@@ -46,14 +46,6 @@ const interactiveMap = new InteractiveMap('map', {
   enableFullscreen: false,
   hasExitButton: true,
   plugins: [
-    mapStylesPlugin({
-      mapStyles: vtsMapStyles27700, // ngdMapStyles27700,
-      manifest: {
-        buttons: [{ id: 'mapStyles', desktop: { slot: 'right-top', showLabel: false } }],
-        panels: [{ id: 'mapStyles', desktop: { slot: 'map-styles-button', width: '400px', modal: true } }]
-      }
-    }),
-    scaleBarPlugin({ units: 'metric' }),
     searchPlugin({
       transformRequest: transformGeocodeRequest,
       placeholder: 'Search for a place in England',
@@ -66,6 +58,14 @@ const interactiveMap = new InteractiveMap('map', {
       width: '300px',
       showMarker: true
     }),
+    mapStylesPlugin({
+      mapStyles: vtsMapStyles27700, // ngdMapStyles27700,
+      manifest: {
+        buttons: [{ id: 'mapStyles', desktop: { slot: 'right-top', showLabel: false } }],
+        panels: [{ id: 'mapStyles', desktop: { slot: 'map-styles-button', width: '400px', modal: true } }]
+      }
+    }),
+    scaleBarPlugin({ units: 'metric' }),
     useLocationPlugin(),
     interactPlugin
   ]

demo/js/planning.js

@@ -94,16 +94,6 @@ const interactiveMap = new InteractiveMap('map', {
   enableFullscreen: false,
   hasExitButton: true,
   plugins: [
-    mapStylesPlugin({
-      mapStyles: vtsMapStyles27700,
-      manifest: {
-        buttons: [{ id: 'mapStyles', desktop: { slot: 'right-top', showLabel: false }}],
-        panels: [{ id: 'mapStyles', desktop: { slot: 'map-styles-button', width: '400px', modal: true }}]
-      }
-    }),
-    scaleBarPlugin({
-      units: 'metric'
-    }),
     searchPlugin({
       transformRequest: transformGeocodeRequest,
       placeholder: 'Search for a place in England',
@@ -117,6 +107,16 @@ const interactiveMap = new InteractiveMap('map', {
       showMarker: true,
       // expanded: true
     }),
+    mapStylesPlugin({
+      mapStyles: vtsMapStyles27700,
+      manifest: {
+        buttons: [{ id: 'mapStyles', desktop: { slot: 'right-top', showLabel: false }}],
+        panels: [{ id: 'mapStyles', desktop: { slot: 'map-styles-button', width: '400px', modal: true }}]
+      }
+    }),
+    scaleBarPlugin({
+      units: 'metric'
+    }),
     useLocationPlugin(),
     interactPlugin,
     drawPlugin,

plugins/search/src/Search.jsx

@@ -1,6 +1,5 @@
 // src/plugins/search/Search.jsx
 import { useRef, useEffect } from 'react'
-import { OpenButton } from './components/OpenButton/OpenButton'
 import { Form } from './components/Form/Form'
 import { CloseButton } from './components/CloseButton/CloseButton'
 import { SubmitButton } from './components/SubmitButton/SubmitButton'
@@ -12,11 +11,9 @@ export function Search ({ appConfig, iconRegistry, pluginState, pluginConfig, ap
   const { interfaceType } = appState
   const { expanded: defaultExpanded, customDatasets, osNamesURL, regions, maxSuggestions } = pluginConfig
   const { dispatch, isExpanded, areSuggestionsVisible, suggestions } = pluginState
-  const showLabel = appState?.controlConfig?.search?.[appState?.breakpoint].showLabel || false
   const closeIcon = iconRegistry.close
   const searchIcon = iconRegistry.search
   const searchContainerRef = useRef(null)
-  const buttonRef = useRef(null)
   const inputRef = useRef(null)
   const viewportRef = appState.layoutRefs.viewportRef
 
@@ -79,18 +76,16 @@ export function Search ({ appConfig, iconRegistry, pluginState, pluginConfig, ap
     }
   }, [isExpanded, interfaceType, areSuggestionsVisible, suggestions])
 
+  // The form is only visible when expanded (or default-expanded). When collapsed the
+  // trigger button (a separate slot item) is what shows, so keep this wrapper out of
+  // layout — otherwise its empty box adds a stray flex gap in the slot column.
+  const isFormVisible = defaultExpanded || isExpanded
+
   return (
-    <div className='im-c-search' ref={searchContainerRef}>
-      {!defaultExpanded && (
-        <OpenButton
-          id={id}
-          isExpanded={isExpanded}
-          onClick={() => events.handleOpenClick(appState)}
-          buttonRef={buttonRef}
-          searchIcon={searchIcon}
-          showLabel={showLabel}
-        />
-      )}
+    <div
+      className={`im-c-search${isFormVisible ? '' : ' im-c-search--collapsed'}`}
+      ref={searchContainerRef}
+    >
       <Form
         id={id}
         pluginState={pluginState}
@@ -102,12 +97,11 @@ export function Search ({ appConfig, iconRegistry, pluginState, pluginConfig, ap
       >
         <CloseButton
           defaultExpanded={defaultExpanded}
-          onClick={(e) => events.handleCloseClick(e, buttonRef, appState)}
+          onClick={(e) => events.handleCloseClick(e, appState)}
           closeIcon={closeIcon}
         />
         <SubmitButton
           defaultExpanded={defaultExpanded}
-          onClick={(e) => events.handleCloseClick(e, buttonRef, appState)}
           submitIcon={searchIcon}
         />
       </Form>