avo 4.0.0.beta.42 → 4.0.0.beta.44

data/app/assets/stylesheets/css/components/header_menu.css

@@ -10,7 +10,7 @@
   overflow-clip-margin: 4px;
 
   > a {
-    @apply text-sm font-medium rounded-md px-2 py-1;
+    @apply text-sm font-medium rounded-md outline-offset-2;
   }
 }
 
@@ -18,11 +18,6 @@
   @apply whitespace-nowrap shrink-0;
 }
 
-.header-menu__row > a:focus-visible {
-  @apply relative z-10;
-  outline-offset: var(--focus-outline-offset-inset);
-}
-
 /* The last visible item may be truncated to fill leftover space. */
 .header-menu__row > .header-menu__item--truncated {
   @apply overflow-hidden text-ellipsis min-w-0;

data/app/assets/stylesheets/css/components/hotkey.css

@@ -1,3 +1,15 @@
+.hotkey__search {
+  @apply sticky top-0 z-10 relative flex items-center px-6 py-4 bg-primary border-b border-tertiary;
+}
+
+.hotkey__search-icon {
+  @apply pointer-events-none absolute z-20 size-4 text-content-secondary start-9;
+}
+
+.hotkey__search-input {
+  @apply ps-9;
+}
+
 .hotkey__grid {
   @apply p-6;
 
@@ -9,6 +21,10 @@
   }
 }
 
+.hotkey__empty {
+  @apply px-6 pb-8 text-sm text-content-secondary;
+}
+
 .hotkey__section {
   @apply min-w-0 mb-10;
 

data/app/assets/stylesheets/css/layout.css

@@ -307,6 +307,12 @@ button[data-sidebar-toggle-icon] {
     --btn-text-color: var(--top-navbar-content-hover);
     background-color: var(--top-navbar-control-background);
   }
+
+  /* The icons are nested inside `.button__label`, so the button's own
+     `items-center` doesn't reach them — center them within the label. */
+  .button__label {
+    @apply flex items-center;
+  }
 }
 
 /* Default hidden state - LTR: sidebar slides in from left.

data/app/components/avo/keyboard_shortcuts_component.html.erb

@@ -4,25 +4,47 @@
   width: :xl,
   behavior: :persistent
 ) do %>
-  <div class="hotkey__grid">
-    <% sections.each do |section| %>
-      <section class="hotkey__section" aria-labelledby="<%= section[:id] %>">
-        <h3 class="hotkey__section-title" id="<%= section[:id] %>">
-          <%= section[:title] %>
-        </h3>
+  <div data-controller="keyboard-shortcuts-search">
+    <div class="hotkey__search">
+      <%= helpers.svg "tabler/outline/search", class: "hotkey__search-icon" %>
+      <%= tag.input(
+        type: "search",
+        class: "hotkey__search-input",
+        placeholder: t("avo.search.placeholder"),
+        autocomplete: "off",
+        spellcheck: "false",
+        aria: {label: "Search keyboard shortcuts"},
+        data: {
+          "keyboard-shortcuts-search-target": "input",
+          action: "input->keyboard-shortcuts-search#filter keydown.esc->keyboard-shortcuts-search#clearOnEscape"
+        }
+      ) %>
+    </div>
 
-        <ul class="hotkey__section-body">
-          <% section[:shortcuts].each do |shortcut| %>
-            <li class="hotkey__row">
-              <span class="hotkey__action"><%= shortcut[:action] %></span>
+    <div class="hotkey__grid">
+      <% sections.each do |section| %>
+        <section class="hotkey__section" aria-labelledby="<%= section[:id] %>" data-keyboard-shortcuts-search-target="section">
+          <h3 class="hotkey__section-title" id="<%= section[:id] %>">
+            <%= section[:title] %>
+          </h3>
 
-              <%= tag.span class: "hotkey__keys", **(shortcut[:keys_aria_label].present? ? {aria: {label: shortcut[:keys_aria_label]}} : {}) do %>
-                <%= render_shortcut_keys(shortcut) %>
-              <% end %>
-            </li>
-          <% end %>
-        </ul>
-      </section>
-    <% end %>
+          <ul class="hotkey__section-body">
+            <% section[:shortcuts].each do |shortcut| %>
+              <li class="hotkey__row" data-keyboard-shortcuts-search-target="row">
+                <span class="hotkey__action"><%= shortcut[:action] %></span>
+
+                <%= tag.span class: "hotkey__keys", **(shortcut[:keys_aria_label].present? ? {aria: {label: shortcut[:keys_aria_label]}} : {}) do %>
+                  <%= render_shortcut_keys(shortcut) %>
+                <% end %>
+              </li>
+            <% end %>
+          </ul>
+        </section>
+      <% end %>
+    </div>
+
+    <p class="hotkey__empty" data-keyboard-shortcuts-search-target="empty" hidden>
+      <%= t("avo.global_search.empty_state.no_results_found") %>
+    </p>
   </div>
 <% end %>

data/app/javascript/js/controllers/keyboard_shortcuts_search_controller.js

@@ -0,0 +1,78 @@
+import { Controller } from '@hotwired/stimulus'
+
+// Filters the rows inside the keyboard shortcuts modal as the user types.
+// Hides non-matching rows and any section left empty, and reveals an empty
+// state when nothing matches. Focus is handed to the input whenever the modal
+// (a popover) opens, and the query is reset on close so each visit starts fresh.
+export default class extends Controller {
+  static targets = ['input', 'section', 'row', 'empty']
+
+  connect() {
+    this.modal = this.element.closest('.modal')
+    if (this.modal) {
+      this.handleToggle = this.onModalToggle.bind(this)
+      this.modal.addEventListener('toggle', this.handleToggle)
+    }
+  }
+
+  disconnect() {
+    if (this.modal) this.modal.removeEventListener('toggle', this.handleToggle)
+  }
+
+  onModalToggle(event) {
+    if (event.newState === 'open') {
+      this.reset()
+      // Defer focus until the popover is painted and focusable.
+      requestAnimationFrame(() => this.inputTarget.focus())
+    } else {
+      this.reset()
+    }
+  }
+
+  filter() {
+    const query = this.inputTarget.value.trim().toLowerCase()
+
+    let anyVisible = false
+
+    this.sectionTargets.forEach((section) => {
+      let sectionHasMatch = false
+
+      this.rowsFor(section).forEach((row) => {
+        const match = query === '' || this.searchText(row).includes(query)
+        row.hidden = !match
+        if (match) sectionHasMatch = true
+      })
+
+      section.hidden = !sectionHasMatch
+      if (sectionHasMatch) anyVisible = true
+    })
+
+    if (this.hasEmptyTarget) this.emptyTarget.hidden = anyVisible || query === ''
+  }
+
+  // Escape clears a non-empty query before the modal handles it as a close.
+  clearOnEscape(event) {
+    if (this.inputTarget.value === '') return
+
+    event.stopPropagation()
+    this.reset()
+    this.inputTarget.focus()
+  }
+
+  reset() {
+    this.inputTarget.value = ''
+    this.filter()
+  }
+
+  rowsFor(section) {
+    return this.rowTargets.filter((row) => section.contains(row))
+  }
+
+  searchText(row) {
+    if (!row.dataset.searchText) {
+      row.dataset.searchText = row.textContent.replace(/\s+/g, ' ').trim().toLowerCase()
+    }
+
+    return row.dataset.searchText
+  }
+}

data/app/javascript/js/controllers.js

@@ -30,6 +30,7 @@ import IndexRowNavigatorController from './controllers/index_row_navigator_contr
 import InputAutofocusController from './controllers/input_autofocus_controller'
 import ItemSelectAllController from './controllers/item_select_all_controller'
 import ItemSelectorController from './controllers/item_selector_controller'
+import KeyboardShortcutsSearchController from './controllers/keyboard_shortcuts_search_controller'
 import KeyValueController from './controllers/fields/key_value_controller'
 import LoadingButtonController from './controllers/loading_button_controller'
 import MapDarkModeController from './controllers/map_dark_mode_controller'
@@ -90,6 +91,7 @@ application.register('header-menu', HeaderMenuController)
 application.register('hidden-input', HiddenInputController)
 application.register('index-row-navigator', IndexRowNavigatorController)
 application.register('input-autofocus', InputAutofocusController)
+application.register('keyboard-shortcuts-search', KeyboardShortcutsSearchController)
 application.register('item-select-all', ItemSelectAllController)
 application.register('item-selector', ItemSelectorController)
 application.register('loading-button', LoadingButtonController)

data/lib/avo/fields/belongs_to_field.rb

@@ -119,11 +119,7 @@ module Avo
         resource = target_resource
         resource = Avo.resource_manager.get_resource_by_model_class model if model.present?
 
-        query = resource.query_scope
-
-        if attach_scope.present?
-          query = Avo::ExecutionContext.new(target: attach_scope, query: query, parent: get_record).handle
-        end
+        query = scoped_target_query(resource, get_record)
 
         query.all.limit(Avo.configuration.associations_lookup_list_limit).map do |record|
           [resource.new(record: record).record_title, record.to_param]
@@ -212,12 +208,18 @@ module Avo
           if valid_model_class.blank? || id_from_param.blank?
             record.send(:"#{polymorphic_as}_id=", nil)
           else
-            record_id = target_resource(record:, polymorphic_model_class: value.safe_constantize).find_record(id_from_param).id
+            target = target_resource(record:, polymorphic_model_class: value.safe_constantize)
+            record_id = target.find_record(id_from_param, query: scoped_target_query(target, record, for_find: true)).id
 
             record.send(:"#{polymorphic_as}_id=", record_id)
           end
         else
-          record_id = value.blank? ? value : target_resource(record:).find_record(value).send(reflection.association_primary_key)
+          target = target_resource(record:)
+          record_id = if value.blank?
+            value
+          else
+            target.find_record(value, query: scoped_target_query(target, record, for_find: true)).send(reflection.association_primary_key)
+          end
 
           record.send(:"#{key}=", record_id)
         end
@@ -325,6 +327,15 @@ module Avo
 
       private
 
+      def scoped_target_query(resource, parent_record, for_find: false)
+        resource_class = resource.is_a?(Class) ? resource : resource.class
+        query = for_find ? resource_class.find_scope : resource_class.query_scope
+
+        return query if attach_scope.blank?
+
+        Avo::ExecutionContext.new(target: attach_scope, query: query, parent: parent_record).handle
+      end
+
       def get_model_class(record)
         if record.nil?
           @resource.model_class

data/lib/avo/version.rb

@@ -1,3 +1,3 @@
 module Avo
-  VERSION = "4.0.0.beta.42" unless const_defined?(:VERSION)
+  VERSION = "4.0.0.beta.44" unless const_defined?(:VERSION)
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: avo
 version: !ruby/object:Gem::Version
-  version: 4.0.0.beta.42
+  version: 4.0.0.beta.44
 platform: ruby
 authors:
 - Adrian Marin
@@ -783,6 +783,7 @@ files:
 - app/javascript/js/controllers/input_autofocus_controller.js
 - app/javascript/js/controllers/item_select_all_controller.js
 - app/javascript/js/controllers/item_selector_controller.js
+- app/javascript/js/controllers/keyboard_shortcuts_search_controller.js
 - app/javascript/js/controllers/loading_button_controller.js
 - app/javascript/js/controllers/map_dark_mode_controller.js
 - app/javascript/js/controllers/media_library_attach_controller.js