-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.Combobox
  ( -- ** Props
    ComboboxProps (..)
  , defaultComboboxProps
    -- ** Views
  , combobox_
  , comboboxOption_
  , comboboxGroup_
    -- ** Samples
  , comboboxUsage
  , comboboxSample
  , comboboxCodeSample
  , comboboxPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import qualified Miso.Svg           as S
import qualified Miso.Svg.Property  as SP
-----------------------------------------------------------------------------
import           Miso.UI.Icons
-----------------------------------------------------------------------------
-- | Props for 'combobox_'
data ComboboxProps model action
  = ComboboxProps
  { forall model action. ComboboxProps model action -> MisoString
comboboxId :: MisoString
    -- ^ Base id; trigger\/popover\/listbox ids are derived from it (required)
  , forall model action.
ComboboxProps model action -> [View model action]
comboboxLabel :: [View model action]
    -- ^ Content of the trigger button (current selection)
  , forall model action. ComboboxProps model action -> MisoString
comboboxValue :: MisoString
    -- ^ Currently selected value (kept in a hidden input)
  , forall model action. ComboboxProps model action -> MisoString
comboboxSearchPlaceholder :: MisoString
  , forall model action. ComboboxProps model action -> MisoString
comboboxEmptyText :: MisoString
    -- ^ Shown when the search yields nothing (@data-empty@)
  , forall model action. ComboboxProps model action -> [MisoString]
comboboxPopoverClasses :: [MisoString]
    -- ^ Extra classes for the popover (e.g. @w-48@)
  , forall model action. ComboboxProps model action -> [MisoString]
comboboxTriggerClasses :: [MisoString]
    -- ^ Extra classes for the trigger button
  , forall model action.
ComboboxProps model action -> [Attribute action]
comboboxAttrs :: [Attribute action]
  }
-----------------------------------------------------------------------------
-- | Smart constructor
defaultComboboxProps :: ComboboxProps model action
defaultComboboxProps :: forall model action. ComboboxProps model action
defaultComboboxProps
  = ComboboxProps
  { comboboxId :: MisoString
comboboxId = MisoString
"combobox"
  , comboboxLabel :: [View model action]
comboboxLabel = []
  , comboboxValue :: MisoString
comboboxValue = MisoString
""
  , comboboxSearchPlaceholder :: MisoString
comboboxSearchPlaceholder = MisoString
"Search entries..."
  , comboboxEmptyText :: MisoString
comboboxEmptyText = MisoString
"No results found."
  , comboboxPopoverClasses :: [MisoString]
comboboxPopoverClasses = [ MisoString
"w-48" ]
  , comboboxTriggerClasses :: [MisoString]
comboboxTriggerClasses = []
  , comboboxAttrs :: [Attribute action]
comboboxAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/combobox/ Combobox>: searchable select.
-- Children are 'comboboxOption_' \/ 'comboboxGroup_' views.
combobox_
  :: ComboboxProps model action
  -> [View model action]
  -> View model action
combobox_ :: forall model action.
ComboboxProps model action
-> [View model action] -> View model action
combobox_ ComboboxProps 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
"select"
  Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxId ComboboxProps model action
cfg)
  Attribute action -> [Attribute action] -> [Attribute action]
forall a. a -> [a] -> [a]
: ComboboxProps model action -> [Attribute action]
forall model action.
ComboboxProps model action -> [Attribute action]
comboboxAttrs ComboboxProps 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.type_ MisoString
"button"
    , [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_
      ( MisoString
"btn-outline" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: MisoString
"justify-between" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: MisoString
"font-normal"
      MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: ComboboxProps model action -> [MisoString]
forall model action. ComboboxProps model action -> [MisoString]
comboboxTriggerClasses ComboboxProps model action
cfg
      )
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxId ComboboxProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-trigger")
    , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"haspopup" MisoString
"listbox"
    , 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" (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxId ComboboxProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-listbox")
    ]
    [ [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" ] (ComboboxProps model action -> [View model action]
forall model action.
ComboboxProps model action -> [View model action]
comboboxLabel ComboboxProps model action
cfg)
    , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
chevronsUpDownIcon
      [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"text-muted-foreground opacity-50 shrink-0" ]
    ]
  , [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.classes_ (ComboboxProps model action -> [MisoString]
forall model action. ComboboxProps model action -> [MisoString]
comboboxPopoverClasses ComboboxProps 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_ (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxId ComboboxProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-popover")
    ]
    [ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.header_ []
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
searchIcon []
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
H.input_
        [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"text"
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.placeholder_ (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxSearchPlaceholder ComboboxProps model action
cfg)
        , Bool -> Attribute action
forall action. Bool -> Attribute action
P.autocomplete_ Bool
False
        , Bool -> Attribute action
forall action. Bool -> Attribute action
P.autocorrect_ Bool
False
        , Bool -> Attribute action
forall action. Bool -> Attribute action
P.spellcheck_ Bool
False
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"autocomplete" MisoString
"list"
        , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"combobox"
        , 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" (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxId ComboboxProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-listbox")
        , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"labelledby" (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxId ComboboxProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-trigger")
        ]
      ]
    , [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
"listbox"
      , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxId ComboboxProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-listbox")
      , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"orientation" MisoString
"vertical"
      , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"labelledby" (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxId ComboboxProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-trigger")
      , MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.data_ MisoString
"empty" (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxEmptyText ComboboxProps model action
cfg)
      ]
      [View model action]
kids
    ]
  , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
H.input_
    [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"hidden"
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.name_ (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxId ComboboxProps model action
cfg MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-value")
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.value_ (ComboboxProps model action -> MisoString
forall model action. ComboboxProps model action -> MisoString
comboboxValue ComboboxProps model action
cfg)
    ]
  ]
-----------------------------------------------------------------------------
-- | Option inside 'combobox_'; the 'Bool' marks the current selection
comboboxOption_
  :: Bool
  -> MisoString
  -> [View model action]
  -> View model action
comboboxOption_ :: forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
selected MisoString
value [View model action]
kids =
  ([Attribute action] -> [View model action] -> View model action)
-> [Attribute action]
-> Bool
-> [Attribute action]
-> [View model action]
-> View model action
forall action model.
([Attribute action] -> [View model action] -> View model action)
-> [Attribute action]
-> Bool
-> [Attribute action]
-> [View model action]
-> View model action
optionalAttrs
    [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.data_ MisoString
"value" MisoString
value
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"option"
    ]
    Bool
selected
    [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"selected" MisoString
"true" ]
    [View model action]
kids
-----------------------------------------------------------------------------
-- | Labelled group of options inside 'combobox_'
comboboxGroup_
  :: MisoString
  -- ^ group heading id
  -> MisoString
  -- ^ heading text
  -> [View model action]
  -> View model action
comboboxGroup_ :: forall model action.
MisoString
-> MisoString -> [View model action] -> View model action
comboboxGroup_ 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.span_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"heading", MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ MisoString
headingId ] [ 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
  )
-----------------------------------------------------------------------------
-- | Compact usage example (source of the kitchen sink "Code" tab)
comboboxUsage :: View model action
comboboxUsage :: forall model action. View model action
comboboxUsage =
  ComboboxProps model action
-> [View model action] -> View model action
forall model action.
ComboboxProps model action
-> [View model action] -> View model action
combobox_ ComboboxProps (ZonkAny 0) action
forall model action. ComboboxProps model action
defaultComboboxProps
  { comboboxId = "my-combobox"
  , comboboxLabel = [ "Next.js" ]
  , comboboxValue = "Next.js"
  , comboboxSearchPlaceholder = "Search framework..."
  , comboboxEmptyText = "No framework found."
  }
  [ Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
True MisoString
"Next.js" [ View model action
"Next.js" ]
  , Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
"SvelteKit" [ View model action
"SvelteKit" ]
  , Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
"Nuxt.js" [ View model action
"Nuxt.js" ]
  , Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
"Remix" [ View model action
"Remix" ]
  , Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
"Astro" [ View model action
"Astro" ]
  ]
-----------------------------------------------------------------------------
comboboxSample :: View model action
comboboxSample :: forall model action. View model action
comboboxSample =
  [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" ]
  [ ComboboxProps model action
-> [View model action] -> View model action
forall model action.
ComboboxProps model action
-> [View model action] -> View model action
combobox_ ComboboxProps (ZonkAny 1) action
forall model action. ComboboxProps model action
defaultComboboxProps
    { comboboxId = "combobox-frameworks"
    , comboboxLabel = [ "Next.js" ]
    , comboboxValue = "Next.js"
    , comboboxEmptyText = "No framework found."
    }
    [ Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
True MisoString
"Next.js" [ View model action
"Next.js" ]
    , Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
"SvelteKit" [ View model action
"SvelteKit" ]
    , Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
"Nuxt.js" [ View model action
"Nuxt.js" ]
    , Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
"Remix" [ View model action
"Remix" ]
    , Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
"Astro" [ View model action
"Astro" ]
    ]
  , ComboboxProps model action
-> [View model action] -> View model action
forall model action.
ComboboxProps model action
-> [View model action] -> View model action
combobox_ ComboboxProps (ZonkAny 2) action
forall model action. ComboboxProps model action
defaultComboboxProps
    { comboboxId = "combobox-timezones"
    , comboboxLabel = [ "(GMT-5) New York" ]
    , comboboxValue = "America/New_York"
    , comboboxEmptyText = "No timezone found."
    , comboboxPopoverClasses = [ "w-72" ]
    }
    [ [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
"max-h-64 overflow-y-auto scrollbar" ]
      [ MisoString
-> MisoString -> [View model action] -> View model action
forall model action.
MisoString
-> MisoString -> [View model action] -> View model action
comboboxGroup_ MisoString
"demo-combobox-timezones-group-0" MisoString
"Americas"
        [ Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ (MisoString
tz MisoString -> MisoString -> Bool
forall a. Eq a => a -> a -> Bool
== MisoString
"America/New_York") MisoString
tz [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
label ]
        | (MisoString
tz, MisoString
label) <- [(MisoString, MisoString)]
americas
        ]
      , MisoString
-> MisoString -> [View model action] -> View model action
forall model action.
MisoString
-> MisoString -> [View model action] -> View model action
comboboxGroup_ MisoString
"demo-combobox-timezones-group-1" MisoString
"Europe"
        [ Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
tz [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
label ] | (MisoString
tz, MisoString
label) <- [(MisoString, MisoString)]
europe ]
      , MisoString
-> MisoString -> [View model action] -> View model action
forall model action.
MisoString
-> MisoString -> [View model action] -> View model action
comboboxGroup_ MisoString
"demo-combobox-timezones-group-2" MisoString
"Asia/Pacific"
        [ Bool -> MisoString -> [View model action] -> View model action
forall model action.
Bool -> MisoString -> [View model action] -> View model action
comboboxOption_ Bool
False MisoString
tz [ MisoString -> View model action
forall model action. MisoString -> View model action
text MisoString
label ] | (MisoString
tz, MisoString
label) <- [(MisoString, MisoString)]
asiaPacific ]
      ]
    , [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" ]
    , [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
"option" ]
      [ View model action
forall model action. View model action
plusIcon, View model action
"Create timezone" ]
    ]
  ]
  where
    americas :: [(MisoString, MisoString)]
americas =
      [ (MisoString
"America/New_York", MisoString
"(GMT-5) New York")
      , (MisoString
"America/Los_Angeles", MisoString
"(GMT-8) Los Angeles")
      , (MisoString
"America/Chicago", MisoString
"(GMT-6) Chicago")
      , (MisoString
"America/Toronto", MisoString
"(GMT-5) Toronto")
      , (MisoString
"America/Vancouver", MisoString
"(GMT-8) Vancouver")
      , (MisoString
"America/Sao_Paulo", MisoString
"(GMT-3) São Paulo")
      ]
    europe :: [(MisoString, MisoString)]
europe =
      [ (MisoString
"Europe/London", MisoString
"(GMT+0) London")
      , (MisoString
"Europe/Paris", MisoString
"(GMT+1) Paris")
      , (MisoString
"Europe/Berlin", MisoString
"(GMT+1) Berlin")
      , (MisoString
"Europe/Rome", MisoString
"(GMT+1) Rome")
      , (MisoString
"Europe/Madrid", MisoString
"(GMT+1) Madrid")
      , (MisoString
"Europe/Amsterdam", MisoString
"(GMT+1) Amsterdam")
      ]
    asiaPacific :: [(MisoString, MisoString)]
asiaPacific =
      [ (MisoString
"Asia/Tokyo", MisoString
"(GMT+9) Tokyo")
      , (MisoString
"Asia/Shanghai", MisoString
"(GMT+8) Shanghai")
      , (MisoString
"Asia/Singapore", MisoString
"(GMT+8) Singapore")
      , (MisoString
"Asia/Dubai", MisoString
"(GMT+4) Dubai")
      , (MisoString
"Australia/Sydney", MisoString
"(GMT+11) Sydney")
      , (MisoString
"Asia/Seoul", MisoString
"(GMT+9) Seoul")
      ]
    plusIcon :: View model action
plusIcon = [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
lucide_ []
      [ [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.circle_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.cx_ MisoString
"12", MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.cy_ MisoString
"12", MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.r_ MisoString
"10" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M8 12h8" ]
      , [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
S.path_ [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
SP.d_ MisoString
"M12 8v8" ]
      ]
-----------------------------------------------------------------------------
comboboxCodeSample :: View model action
comboboxCodeSample :: forall model action. View model action
comboboxCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyCombobox (comboboxUsage) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.Html.Element as H
  import qualified Miso.Html.Property as P
  import qualified Miso.Svg           as S
  import qualified Miso.Svg.Property  as SP
  import           Miso.UI.Icons
  import           Miso.UI.Combobox
  -----------------------------------------------------------------------------
  comboboxUsage :: View model action
  comboboxUsage =
    combobox_ defaultComboboxProps
    { comboboxId = "my-combobox"
    , comboboxLabel = [ "Next.js" ]
    , comboboxValue = "Next.js"
    , comboboxSearchPlaceholder = "Search framework..."
    , comboboxEmptyText = "No framework found."
    }
    [ comboboxOption_ True "Next.js" [ "Next.js" ]
    , comboboxOption_ False "SvelteKit" [ "SvelteKit" ]
    , comboboxOption_ False "Nuxt.js" [ "Nuxt.js" ]
    , comboboxOption_ False "Remix" [ "Remix" ]
    , comboboxOption_ False "Astro" [ "Astro" ]
    ]
  """
-----------------------------------------------------------------------------
comboboxPropsApi :: View model action
comboboxPropsApi :: forall model action. View model action
comboboxPropsApi =
  View model action
"""
  -- | Props for 'combobox_'
  data ComboboxProps model action
    = ComboboxProps
    { comboboxId :: MisoString
      -- ^ Base id; trigger\\/popover\\/listbox ids are derived from it (required)
    , comboboxLabel :: [View model action]
      -- ^ Content of the trigger button (current selection)
    , comboboxValue :: MisoString
      -- ^ Currently selected value (kept in a hidden input)
    , comboboxSearchPlaceholder :: MisoString
    , comboboxEmptyText :: MisoString
      -- ^ Shown when the search yields nothing (@data-empty@)
    , comboboxPopoverClasses :: [MisoString]
      -- ^ Extra classes for the popover (e.g. @w-48@)
    , comboboxTriggerClasses :: [MisoString]
      -- ^ Extra classes for the trigger button
    , comboboxAttrs :: [Attribute action]
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor
  defaultComboboxProps :: ComboboxProps model action
  defaultComboboxProps
    = ComboboxProps
    { comboboxId = "combobox"
    , comboboxLabel = []
    , comboboxValue = ""
    , comboboxSearchPlaceholder = "Search entries..."
    , comboboxEmptyText = "No results found."
    , comboboxPopoverClasses = [ "w-48" ]
    , comboboxTriggerClasses = []
    , comboboxAttrs = []
    }
  """
-----------------------------------------------------------------------------