-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.DropDownMenu
  ( -- ** Props
    DropdownMenuProps (..)
  , defaultDropdownMenuProps
    -- ** Views
  , dropdownMenu_
  , menuItem_
  , menuCheckboxItem_
  , menuRadioItem_
  , menuGroup_
  , menuSeparator_
  , menuShortcut_
    -- ** Samples
  , dropdownMenuUsage
  , dropdownMenuSample
  , dropdownMenuCodeSample
  , dropdownMenuPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
import           Miso.UI.Icons
import           Miso.UI.Types
-----------------------------------------------------------------------------
-- | Props for 'dropdownMenu_'
data DropdownMenuProps model action
  = DropdownMenuProps
  { forall model action. DropdownMenuProps model action -> MisoString
dropdownMenuId :: MisoString
    -- ^ Base id; trigger\/popover\/menu ids are derived from it (required)
  , forall model action.
DropdownMenuProps model action -> [View model action]
dropdownMenuTrigger :: [View model action]
    -- ^ Content of the trigger button (nests other views)
  , forall model action. DropdownMenuProps model action -> [MisoString]
dropdownMenuTriggerClasses :: [MisoString]
    -- ^ Classes of the trigger button (defaults to @btn-outline@)
  , forall model action. DropdownMenuProps model action -> Align
dropdownMenuAlign :: Align
    -- ^ Popover alignment (@data-align@)
  , forall model action. DropdownMenuProps model action -> [MisoString]
dropdownMenuPopoverClasses :: [MisoString]
    -- ^ Extra classes for the popover (e.g. @min-w-56@)
  , forall model action.
DropdownMenuProps model action -> [Attribute action]
dropdownMenuAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor: outline trigger button, no alignment override
defaultDropdownMenuProps :: DropdownMenuProps model action
defaultDropdownMenuProps :: forall model action. DropdownMenuProps model action
defaultDropdownMenuProps
  = DropdownMenuProps
  { dropdownMenuId :: MisoString
dropdownMenuId = MisoString
"dropdown-menu"
  , dropdownMenuTrigger :: [View model action]
dropdownMenuTrigger = []
  , dropdownMenuTriggerClasses :: [MisoString]
dropdownMenuTriggerClasses = [ MisoString
"btn-outline" ]
  , dropdownMenuAlign :: Align
dropdownMenuAlign = Align
CenterAlign
  , dropdownMenuPopoverClasses :: [MisoString]
dropdownMenuPopoverClasses = [ MisoString
"min-w-56" ]
  , dropdownMenuAttrs :: [Attribute action]
dropdownMenuAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/dropdown-menu/ Dropdown Menu>.
-- Children are 'menuItem_' \/ 'menuGroup_' \/ 'menuSeparator_' views.
dropdownMenu_
  :: DropdownMenuProps model action
  -> [View model action]
  -> View model action
dropdownMenu_ :: forall model action.
DropdownMenuProps model action
-> [View model action] -> View model action
dropdownMenu_ DropdownMenuProps model action
cfg [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
  ( MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"dropdown-menu"
  Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (DropdownMenuProps model action -> MisoString
forall model action. DropdownMenuProps model action -> MisoString
dropdownMenuId DropdownMenuProps model action
cfg)
  Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: DropdownMenuProps model action -> [Attribute action]
forall model action.
DropdownMenuProps model action -> [Attribute action]
dropdownMenuAttrs DropdownMenuProps model action
cfg
  )
  [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.button_
    [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (DropdownMenuProps model action -> [MisoString]
forall model action. DropdownMenuProps model action -> [MisoString]
dropdownMenuTriggerClasses DropdownMenuProps model action
cfg)
    , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"expanded" MisoString
"false"
    , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"controls" (DropdownMenuProps model action -> MisoString
forall model action. DropdownMenuProps model action -> MisoString
dropdownMenuId DropdownMenuProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-menu")
    , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"haspopup" MisoString
"menu"
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (DropdownMenuProps model action -> MisoString
forall model action. DropdownMenuProps model action -> MisoString
dropdownMenuId DropdownMenuProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-trigger")
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"button"
    ]
    (DropdownMenuProps model action -> [View model action]
forall model action.
DropdownMenuProps model action -> [View model action]
dropdownMenuTrigger DropdownMenuProps model action
cfg)
  , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
    ( [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
      [ [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (DropdownMenuProps model action -> [MisoString]
forall model action. DropdownMenuProps model action -> [MisoString]
dropdownMenuPopoverClasses DropdownMenuProps model action
cfg)
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"hidden" MisoString
"true"
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"popover" MisoString
""
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (DropdownMenuProps model action -> MisoString
forall model action. DropdownMenuProps model action -> MisoString
dropdownMenuId DropdownMenuProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-popover")
        ]
      , [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"align" (Align -> MisoString
alignText (DropdownMenuProps model action -> Align
forall model action. DropdownMenuProps model action -> Align
dropdownMenuAlign DropdownMenuProps model action
cfg))
        | DropdownMenuProps model action -> Align
forall model action. DropdownMenuProps model action -> Align
dropdownMenuAlign DropdownMenuProps model action
cfg Align -> Align -> Bool
forall a. Eq a => a -> a -> Bool
/= Align
CenterAlign
        ]
      ]
    )
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
      [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"labelledby" (DropdownMenuProps model action -> MisoString
forall model action. DropdownMenuProps model action -> MisoString
dropdownMenuId DropdownMenuProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-trigger")
      , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (DropdownMenuProps model action -> MisoString
forall model action. DropdownMenuProps model action -> MisoString
dropdownMenuId DropdownMenuProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-menu")
      , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"menu"
      ]
      [View model action]
kids
    ]
  ]
-----------------------------------------------------------------------------
menuItem_
  :: [Attribute action]
  -> [View model action]
  -> View model action
menuItem_ :: forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [Attribute action]
attrs [View model action]
kids = [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_ (MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"menuitem" Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs) [View model action]
kids
-----------------------------------------------------------------------------
-- | Checkable menu item; the 'Bool' is the checked state
menuCheckboxItem_
  :: Bool
  -> [Attribute action]
  -> [View model action]
  -> View model action
menuCheckboxItem_ :: forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuCheckboxItem_ Bool
checked [Attribute action]
attrs [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
    ( MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"group"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"checked" (if Bool
checked then MisoString
"true" else MisoString
"false")
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"menuitemcheckbox"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs
    )
    ( [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
checkIcon
      [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"hidden" MisoString
"true"
      , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"invisible group-aria-checked:visible"
      ]
    View model action -> [View model action] -> [View model action]
forall a. a -> [a] -> [a]
: [View model action]
kids
    )
-----------------------------------------------------------------------------
-- | Radio menu item; the 'Bool' is the selected state
menuRadioItem_
  :: Bool
  -> [Attribute action]
  -> [View model action]
  -> View model action
menuRadioItem_ :: forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuRadioItem_ Bool
checked [Attribute action]
attrs [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
    ( MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"group"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"checked" (if Bool
checked then MisoString
"true" else MisoString
"false")
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"menuitemradio"
    Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: [Attribute action]
attrs
    )
    ( [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
      [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"size-4 flex items-center justify-center" ]
      [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
        [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"hidden" MisoString
"true"
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"size-2 rounded-full bg-foreground invisible group-aria-checked:visible"
        ]
        []
      ]
    View model action -> [View model action] -> [View model action]
forall a. a -> [a] -> [a]
: [View model action]
kids
    )
-----------------------------------------------------------------------------
-- | Labelled group of menu items
menuGroup_
  :: MisoString
  -- ^ heading id
  -> MisoString
  -- ^ heading text
  -> [View model action]
  -> View model action
menuGroup_ :: forall model action.
MisoString
-> MisoString -> [View model action] -> View model action
menuGroup_ MisoString
headingId MisoString
heading [View model action]
kids =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
  [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"labelledby" MisoString
headingId
  , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"group"
  ]
  ( [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ MisoString
headingId, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"heading" ] [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
heading ]
  View model action -> [View model action] -> [View model action]
forall a. a -> [a] -> [a]
: [View model action]
kids
  )
-----------------------------------------------------------------------------
menuSeparator_ :: View model action
menuSeparator_ :: forall model action. View model action
menuSeparator_ = [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
H.hr_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"separator" ]
-----------------------------------------------------------------------------
-- | Right-aligned keyboard shortcut inside a menu item
menuShortcut_ :: MisoString -> View model action
menuShortcut_ :: forall model action. MisoString -> View model action
menuShortcut_ MisoString
s =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.span_
  [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"text-muted-foreground ml-auto text-xs tracking-widest" ]
  [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
s ]
-----------------------------------------------------------------------------
-- | Compact usage example (source of the kitchen sink "Code" tab)
dropdownMenuUsage :: View model action
dropdownMenuUsage :: forall model action. View model action
dropdownMenuUsage =
  DropdownMenuProps model action
-> [View model action] -> View model action
forall model action.
DropdownMenuProps model action
-> [View model action] -> View model action
dropdownMenu_ DropdownMenuProps (ZonkAny 0) action
forall model action. DropdownMenuProps model action
defaultDropdownMenuProps
  { dropdownMenuId = "my-dropdown"
  , dropdownMenuTrigger = [ "Open" ]
  }
  [ MisoString
-> MisoString -> [View model action] -> View model action
forall model action.
MisoString
-> MisoString -> [View model action] -> View model action
menuGroup_ MisoString
"my-account-options" MisoString
"My Account"
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Profile", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⇧⌘P" ]
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Billing", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⌘B" ]
    ]
  , View model action
forall model action. View model action
menuSeparator_
  , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"GitHub" ]
  , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"disabled" MisoString
"true" ] [ View model action
"API" ]
  , View model action
forall model action. View model action
menuSeparator_
  , Bool
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuCheckboxItem_ Bool
True [] [ View model action
"Status Bar" ]
  , Bool
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuRadioItem_ Bool
True [] [ View model action
"Activity Bar" ]
  ]
-----------------------------------------------------------------------------
dropdownMenuSample :: View model action
dropdownMenuSample :: forall model action. View model action
dropdownMenuSample =
  [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
  [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex flex-wrap items-start gap-4" ]
  [ DropdownMenuProps model action
-> [View model action] -> View model action
forall model action.
DropdownMenuProps model action
-> [View model action] -> View model action
dropdownMenu_ DropdownMenuProps (ZonkAny 1) action
forall model action. DropdownMenuProps model action
defaultDropdownMenuProps
    { dropdownMenuId = "dropdown-menu-default"
    , dropdownMenuTrigger = [ "Open" ]
    }
    [ MisoString
-> MisoString -> [View model action] -> View model action
forall model action.
MisoString
-> MisoString -> [View model action] -> View model action
menuGroup_ MisoString
"account-options" MisoString
"My Account"
      [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Profile", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⇧⌘P" ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Billing", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⌘B" ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Settings", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⌘S" ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Keyboard shortcuts", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⌘K" ]
      ]
    , View model action
forall model action. View model action
menuSeparator_
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"GitHub" ]
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Support" ]
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"disabled" MisoString
"true" ] [ View model action
"API" ]
    , View model action
forall model action. View model action
menuSeparator_
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Logout", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⇧⌘P" ]
    ]
  , DropdownMenuProps model action
-> [View model action] -> View model action
forall model action.
DropdownMenuProps model action
-> [View model action] -> View model action
dropdownMenu_ DropdownMenuProps (ZonkAny 2) action
forall model action. DropdownMenuProps model action
defaultDropdownMenuProps
    { dropdownMenuId = "dropdown-menu-checkboxes"
    , dropdownMenuTrigger = [ "Checkboxes" ]
    }
    [ MisoString
-> MisoString -> [View model action] -> View model action
forall model action.
MisoString
-> MisoString -> [View model action] -> View model action
menuGroup_ MisoString
"appearance-options" MisoString
"Appearance"
      [ Bool
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuCheckboxItem_ Bool
True [] [ View model action
"Status Bar", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⇧⌘P" ]
      , Bool
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuCheckboxItem_ Bool
False [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"disabled" MisoString
"true" ]
        [ View model action
"Activity Bar", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⌘B" ]
      , Bool
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuCheckboxItem_ Bool
False [] [ View model action
"Panel", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⌘S" ]
      ]
    ]
  , DropdownMenuProps model action
-> [View model action] -> View model action
forall model action.
DropdownMenuProps model action
-> [View model action] -> View model action
dropdownMenu_ DropdownMenuProps (ZonkAny 3) action
forall model action. DropdownMenuProps model action
defaultDropdownMenuProps
    { dropdownMenuId = "dropdown-menu-radio-group"
    , dropdownMenuTrigger = [ "Radio Group" ]
    }
    [ MisoString
-> MisoString -> [View model action] -> View model action
forall model action.
MisoString
-> MisoString -> [View model action] -> View model action
menuGroup_ MisoString
"position-options" MisoString
"Panel Position"
      [ View model action
forall model action. View model action
menuSeparator_
      , Bool
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuRadioItem_ Bool
False [] [ View model action
"Status Bar", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⇧⌘P" ]
      , Bool
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuRadioItem_ Bool
True [] [ View model action
"Activity Bar", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⌘B" ]
      , Bool
-> [Attribute action] -> [View model action] -> View model action
forall action model.
Bool
-> [Attribute action] -> [View model action] -> View model action
menuRadioItem_ Bool
False [] [ View model action
"Panel", MisoString -> View model action
forall model action. MisoString -> View model action
menuShortcut_ MisoString
"⌘S" ]
      ]
    ]
  , DropdownMenuProps model action
-> [View model action] -> View model action
forall model action.
DropdownMenuProps model action
-> [View model action] -> View model action
dropdownMenu_ DropdownMenuProps (ZonkAny 4) action
forall model action. DropdownMenuProps model action
defaultDropdownMenuProps
    { dropdownMenuId = "dropdown-menu-profile"
    , dropdownMenuTriggerClasses =
      [ "btn-outline", "h-12", "justify-start", "px-2", "md:max-w-[200px]" ]
    , dropdownMenuTrigger =
      [ H.img_
        [ P.class_ "size-8 shrink-0 rounded-full"
        , P.src_ "https://github.com/dmjio.png"
        , P.alt_ "@dmjio"
        ]
      , H.div_
        [ P.class_ "grid flex-1 text-left text-sm leading-tight" ]
        [ H.span_ [ P.class_ "truncate font-medium" ] [ "dmjio" ]
        , H.span_ [ P.class_ "text-muted-foreground truncate text-xs" ]
          [ "dmjio@example.com" ]
        ]
      , chevronsUpDownIcon [ P.class_ "text-muted-foreground ml-auto" ]
      ]
    }
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
      [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex items-center gap-2 px-1 py-1.5 text-left text-sm" ]
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
H.img_
        [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"size-8 shrink-0 rounded-full"
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.src_ MisoString
"https://github.com/dmjio.png"
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.alt_ MisoString
"@dmjio"
        ]
      , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
        [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"grid flex-1 text-left text-sm leading-tight" ]
        [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.span_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"truncate font-medium" ] [ View model action
"dmjio" ]
        , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.span_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"text-muted-foreground truncate text-xs" ]
          [ View model action
"dmjio@example.com" ]
        ]
      ]
    , View model action
forall model action. View model action
menuSeparator_
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Upgrade to Pro" ]
    , View model action
forall model action. View model action
menuSeparator_
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Account" ]
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Billing" ]
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Notifications" ]
    , View model action
forall model action. View model action
menuSeparator_
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Signout" ]
    ]
  , DropdownMenuProps model action
-> [View model action] -> View model action
forall model action.
DropdownMenuProps model action
-> [View model action] -> View model action
dropdownMenu_ DropdownMenuProps (ZonkAny 5) action
forall model action. DropdownMenuProps model action
defaultDropdownMenuProps
    { dropdownMenuId = "dropdown-menu-dots"
    , dropdownMenuTriggerClasses = [ "btn-icon-ghost" ]
    , dropdownMenuTrigger = [ dotsIcon [] ]
    , dropdownMenuPopoverClasses = [ "min-w-32" ]
    }
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Edit" ]
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_ [] [ View model action
"Share" ]
    , View model action
forall model action. View model action
menuSeparator_
    , [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
menuItem_
      [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"text-destructive hover:bg-destructive/10 dark:hover:bg-destructive/20 focus:bg-destructive/10 dark:focus:bg-destructive/20 focus:text-destructive [&_svg]:!text-destructive" ]
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
trashIcon [], View model action
"Delete" ]
    ]
  ]
-----------------------------------------------------------------------------
dropdownMenuCodeSample :: View model action
dropdownMenuCodeSample :: forall model action. View model action
dropdownMenuCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyDropdownMenu (dropdownMenuUsage) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html.Element as H
  import qualified Miso.Html.Property as P
  import           Miso.UI.Icons
  import           Miso.UI.Types
  import           Miso.UI.DropDownMenu
  -----------------------------------------------------------------------------
  dropdownMenuUsage :: View model action
  dropdownMenuUsage =
    dropdownMenu_ defaultDropdownMenuProps
    { dropdownMenuId = "my-dropdown"
    , dropdownMenuTrigger = [ "Open" ]
    }
    [ menuGroup_ "my-account-options" "My Account"
      [ menuItem_ [] [ "Profile", menuShortcut_ "⇧⌘P" ]
      , menuItem_ [] [ "Billing", menuShortcut_ "⌘B" ]
      ]
    , menuSeparator_
    , menuItem_ [] [ "GitHub" ]
    , menuItem_ [ P.aria_ "disabled" "true" ] [ "API" ]
    , menuSeparator_
    , menuCheckboxItem_ True [] [ "Status Bar" ]
    , menuRadioItem_ True [] [ "Activity Bar" ]
    ]
  """
-----------------------------------------------------------------------------
dropdownMenuPropsApi :: View model action
dropdownMenuPropsApi :: forall model action. View model action
dropdownMenuPropsApi =
  View model action
"""
  -- | Props for 'dropdownMenu_'
  data DropdownMenuProps model action
    = DropdownMenuProps
    { dropdownMenuId :: MisoString
      -- ^ Base id; trigger\\/popover\\/menu ids are derived from it (required)
    , dropdownMenuTrigger :: [View model action]
      -- ^ Content of the trigger button (nests other views)
    , dropdownMenuTriggerClasses :: [MisoString]
      -- ^ Classes of the trigger button (defaults to @btn-outline@)
    , dropdownMenuAlign :: Align
      -- ^ Popover alignment (@data-align@)
    , dropdownMenuPopoverClasses :: [MisoString]
      -- ^ Extra classes for the popover (e.g. @min-w-56@)
    , dropdownMenuAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: outline trigger button, no alignment override
  defaultDropdownMenuProps :: DropdownMenuProps model action
  defaultDropdownMenuProps
    = DropdownMenuProps
    { dropdownMenuId = "dropdown-menu"
    , dropdownMenuTrigger = []
    , dropdownMenuTriggerClasses = [ "btn-outline" ]
    , dropdownMenuAlign = CenterAlign
    , dropdownMenuPopoverClasses = [ "min-w-56" ]
    , dropdownMenuAttrs = []
    }
  """
-----------------------------------------------------------------------------