@defra/interactive-map 0.0.41-alpha → 0.0.42-alpha

package/src/App/renderer/mapPanels.test.js

@@ -170,6 +170,50 @@ describe('mapPanels', () => {
     expect(logger.warn).toHaveBeenCalledWith(expect.stringContaining('p1'))
   })
 
+  it('orders multiple injected controls even when the panel has no render (regression: previously returned mapControls output unordered)', () => {
+    mapControls.mockReturnValue([
+      { id: 'first', order: 2, element: <span>first</span> },
+      { id: 'second', order: 1, element: <span>second</span> }
+    ])
+    defaultAppState.panelConfig = ({ p1: { desktop: { slot: 'header' }, includeModes: ['view'] } })
+    const result = map()
+    expect(result[0].element.props.items.map(i => i.id)).toEqual(['second', 'first'])
+  })
+
+  describe('tabs', () => {
+    it('does not build a tabs list when everything shares one (or no) tab', () => {
+      const renderFn = () => <div>child</div>
+      mapControls.mockReturnValue([{ id: 'injected1', order: 0, element: <span>injected</span> }])
+      defaultAppState.panelConfig = ({ p1: { ...baseConfig, render: renderFn } })
+      const result = map()
+      expect(result[0].element.props.tabs).toBeUndefined()
+      expect(result[0].element.props.items).toBeDefined()
+    })
+
+    it('groups the panel\'s own content and an injected control into separate tabs', () => {
+      const renderFn = () => <div>child</div>
+      mapControls.mockReturnValue([{ id: 'injected1', order: 0, tab: 'Injected', element: <span>injected</span> }])
+      defaultAppState.panelConfig = ({
+        p1: { ...baseConfig, render: renderFn, desktop: { slot: 'header', order: 1, tab: 'Own' } }
+      })
+      const result = map()
+      expect(result[0].element.props.items).toBeUndefined()
+      const tabNames = result[0].element.props.tabs.map(t => t.name)
+      expect(tabNames.sort()).toEqual(['Injected', 'Own'])
+    })
+
+    it('falls back to the panel\'s own label for its content\'s implicit tab', () => {
+      const renderFn = () => <div>child</div>
+      mapControls.mockReturnValue([{ id: 'injected1', order: 0, tab: 'Injected', element: <span>injected</span> }])
+      defaultAppState.panelConfig = ({
+        p1: { ...baseConfig, render: renderFn, label: 'Map styles' }
+      })
+      const result = map()
+      const tabNames = result[0].element.props.tabs.map(t => t.name)
+      expect(tabNames).toContain('Map styles')
+    })
+  })
+
   it('returns correct structure and defaults', () => {
     defaultAppState.panelConfig = ({ p1: { desktop: { slot: 'header' }, includeModes: ['view'] } })
     const result = map()

package/src/config/appConfig.js

@@ -74,7 +74,7 @@ export const defaultAppConfig = {
     desktop: buttonSlots
   }, {
     id: 'zoomIn',
-    group: { name: 'zoom', label: 'Zoom controls', order: 0 },
+    group: { label: 'Zoom controls', slotOrder: 0 },
     label: 'Zoom in',
     iconId: 'plus',
     keepFocus: true,
@@ -86,7 +86,7 @@ export const defaultAppConfig = {
     desktop: buttonSlots
   }, {
     id: 'zoomOut',
-    group: { name: 'zoom', label: 'Zoom controls', order: 0 },
+    group: { label: 'Zoom controls', slotOrder: 0 },
     label: 'Zoom out',
     iconId: 'minus',
     keepFocus: true,

package/src/types.js

@@ -40,6 +40,15 @@
  * different plugin. The panel's own content and every control targeting it are ordered together
  * via `order`. Only supported by panels with a `render` component — a panel using static `html`
  * can't host injected controls, since `dangerouslySetInnerHTML` owns its body's children.
+ *
+ * @property {string} [tab]
+ * Groups this item into a tab within its target panel. Two items share a tab by giving it the
+ * same `tab` string (case/whitespace-insensitive — compared kebab-cased); items with no `tab`
+ * share one implicit tab, labelled with the panel's own `label`. Tabs only render once this
+ * produces more than one distinct group — a panel with zero or one tab renders flat, with no
+ * tab UI at all. A tab's position and displayed label both come from whichever member ends up
+ * first once its own members are ordered by `order`, so there's no separate tab-order property
+ * to set. Like `order`, only respected for controls with a `render` component.
  */
 
 /**
@@ -67,6 +76,11 @@
  * @property {string} slot
  * Slot identifier.
  *
+ * @property {string} [tab]
+ * Groups the panel's own content into a tab alongside any controls injected into it — see
+ * `ControlBreakpointConfig.tab`. Optional even once tabs are active: the panel's own content
+ * falls back to an implicit tab labelled with the panel's `label` when omitted.
+ *
  * @property {string} [width]
  * Panel width.
  */
@@ -156,8 +170,12 @@
  * @property {(context: PluginContext) => boolean} [excludeWhen]
  * Callback to determine if the button should be excluded from rendering.
  *
- * @property {string} [group]
- * Button group label for grouping related buttons.
+ * @property {{ label: string, slotOrder?: number }} [group]
+ * Groups this button with any other button sharing the same `label` (kebab-cased) into one
+ * `role="group"` container, rendered as a single item in the slot. `label` is also the
+ * group's accessible name (aria-label) — buttons whose labels differ only by case/whitespace
+ * still merge into one group. `slotOrder` positions the group itself within the slot (defaults
+ * to 0); each button's own breakpoint `order` controls its position *within* the group.
  *
  * @property {(context: PluginContext) => boolean} [hiddenWhen]
  * Callback to determine if the button should be hidden. Sets display: none if true.