Class: Shadcn::Select::Content::Component

Inherits:
ApplicationViewComponent show all
Defined in:
app/components/shadcn/select/content/component.rb

Overview

SelectContent — the viewport and the two scroll buttons are part of the markup shadcn emits, so they are reproduced here.

Constant Summary collapse

SCROLL_BUTTON_CLASSES =

shrink-0 mirrors the flexShrink: 0 Radix sets inline (vendor/radix/ui/select.tsx:1691): the buttons keep their height while the viewport takes the rest, which is what pins them to the edges.

"flex shrink-0 cursor-default items-center justify-center py-1"

Constants inherited from ApplicationViewComponent

ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from ApplicationViewComponent

#attributes

Instance Method Summary collapse

Methods inherited from ApplicationViewComponent

#css_classes, default_tag, #merged_style, #render_element, #shadcn_t, slot_name, #tag_name

Constructor Details

#initialize(position: :"item-aligned", searchable: false, **attributes) ⇒ Component

Returns a new instance of Component.



45
46
47
48
49
 
# File 'app/components/shadcn/select/content/component.rb', line 45

def initialize(position: :"item-aligned", searchable: false, **attributes)
  @position = position&.to_sym || :"item-aligned"
  @searchable = searchable
  super(**attributes)
end

Instance Attribute Details

#position ⇒ Object (readonly)

Returns the value of attribute position.



43
44
45
 
# File 'app/components/shadcn/select/content/component.rb', line 43

def position
  @position
end

#searchable ⇒ Object (readonly)

Returns the value of attribute searchable.



43
44
45
 
# File 'app/components/shadcn/select/content/component.rb', line 43

def searchable
  @searchable
end

Instance Method Details

#call ⇒ Object 



75
76
77
78
79
80
81
 
# File 'app/components/shadcn/select/content/component.rb', line 75

def call
  render_element(body: safe_join([
    scroll_button("select-scroll-up-button", "chevron-up", "scrollUpButton"),
    viewport,
    scroll_button("select-scroll-down-button", "chevron-down", "scrollDownButton")
  ]))
end

#element_attributes(**defaults) ⇒ Object 



55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
# File 'app/components/shadcn/select/content/component.rb', line 55

def element_attributes(**defaults)
  super(**{
    # A searchable popover holds a text field *and* a list, so it
    # cannot be the list: a textbox is not an allowed child of a
    # listbox. The role moves to Select::List and this becomes the
    # dialog that contains both, which is what axe accepts and what
    # shadcn's aria variant emits.
    role: (searchable ? "dialog" : "listbox"),
    "aria-label" => (shadcn_t("select.dialog_label") if searchable),
    tabindex: "-1",
    "data-state" => "closed",
    hidden: true,
    "data-shadcn--select-target" => "content",
    # `scroll` does not bubble, but Stimulus binds the action to this
    # element itself, so it fires. Which element actually scrolls
    # differs by mode — see the controller's `scrollContainer`.
    "data-action" => "keydown->shadcn--select#contentKeydown"
  }.merge(defaults))
end

#style_variants ⇒ Object 



51
52
53
 
# File 'app/components/shadcn/select/content/component.rb', line 51

def style_variants
  { position: }
end