How to create headers and dividers in a Dropdown?

[jakubsob]

In the documentation there's an example of a dropdown which options have headers and a divider. How can this be implemented using shiny.fluent? The following example doesn't work as expected:

library(shiny)
library(shiny.fluent)

ui <- fluentPage(
  Dropdown(
    "dropdown",
    label = "Test multiple",
    multiSelect = TRUE,
    options = list(
      list(key = "fruitsHeader", text = "Fruits", itemType = "DropdownMenuItemType.Header"),
      list(key = "apple", text = "Apple" ),
      list(key = "banana", text = "Banana" ),
      list(key = "orange", text = "Orange", disabled = TRUE),
      list(key = "grape", text = "Grape" ),
      list(key = "divider_1", text = "-", itemType = "DropdownMenuItemType.Divider"),
      list(key = "vegetablesHeader", text = "Vegetables", itemType = "DropdownMenuItemType.Header"),
      list(key = "broccoli", text = "Broccoli" ),
      list(key = "carrot", text = "Carrot" ),
      list(key = "lettuce", text = "Lettuce" )
    )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)

[jakubsob]

Header and Divider are enums, not strings. In order for Header and Divider to appear we need to import them from Fluent module. We can create a helper function DropdownMenuItemType which accesses the desired field:

library(shiny)
library(shiny.fluent)

DropdownMenuItemType <- function(type) {
  JS(paste0("jsmodule['@fluentui/react'].DropdownMenuItemType."), type)
}

ui <- fluentPage(
  Dropdown(
    "dropdown",
    label = "Test multiple",
    multiSelect = TRUE,
    options = list(
      list(key = "fruitsHeader", text = "Fruits", itemType = DropdownMenuItemType("Header")),
      list(key = "apple", text = "Apple" ),
      list(key = "banana", text = "Banana" ),
      list(key = "orange", text = "Orange", disabled = TRUE),
      list(key = "grape", text = "Grape" ),
      list(key = "divider_1", text = "-", itemType = DropdownMenuItemType("Divider")),
      list(key = "vegetablesHeader", text = "Vegetables", itemType = DropdownMenuItemType("Header")),
      list(key = "broccoli", text = "Broccoli" ),
      list(key = "carrot", text = "Carrot" ),
      list(key = "lettuce", text = "Lettuce" )
    )
  )
)

server <- function(input, output, session) {
  
}

shinyApp(ui, server)