refine-rails 2.9.0

data/app/views/refine/blueprints/clauses/_date_condition.html.erb

@@ -0,0 +1,80 @@
+<% condition_id = condition.try(:id) || condition[:id] %>
+<%# If the condition is not a refinements, it comes from the criterion form object, if it is
+  a refinement it's still a hash %>
+
+<% if ['st', 'nst'].include? input[:clause] %>
+  <!-- render nothing -->
+<% elsif ['exct', 'gt', 'lt'].include? input[:clause] %>
+  <div class="refine-date-condition-days-container">
+    <label for="<%= condition_id %>" class="sr-only"><%= t("refine.refine_blueprints.clauses.date_condition.number_of") %></label>
+    <input
+      class="refine-date-condition-days-input"
+      type="text"
+      value="<%= input[:days] %>"
+      placeholder="<%= t("refine.refine_blueprints.clauses.date_condition.date_number_of_placeholder") %>"
+      data-input-key="days"
+      data-action="input->refine--update#value blur->refine--update#refreshFromServer"
+      data-input-id='<%= input_id if defined? input_id %>'
+    />
+  </div>
+  <div class="refine-date-condition-days-text">
+    <span><%= t("refine.refine_blueprints.clauses.date_condition.days") %></span>
+  </div>
+  <div class="refine-date-condition-days-modifier-container">
+    <select
+      class="refine-date-condition-days-modifier-select"
+      name="modifer"
+      <% if input[:modifier].blank? %>
+      data-controller="refine--defaults"
+      data-refine--defaults-input-value="{ &quot;modifier&quot;: &quot;ago&quot; }"
+      data-refine--defaults-criterion-id-value="<%= criterion_id %>"
+      data-refine--defaults-input-key-value="<%= input_key_value if defined? input_key_value %>"
+      <% end %>
+      data-input-id='<%= input_id if defined? input_id %>'
+      data-input-key="modifier"
+      data-action="change->refine--update#value"
+    >
+      <option
+        <% if input[:modifier] == 'ago' %>selected<% end %>
+        value="ago"
+      >
+        <%= t("refine.refine_blueprints.clauses.date_condition.ago") %>
+      </option>
+      <option
+        <% if input[:modifier] == 'from_now' %>selected<% end %>
+        value="from_now"
+      >
+        <%= t("refine.refine_blueprints.clauses.date_condition.from_now") %>
+      </option>
+    </select>
+    <%= render partial: 'refine/blueprints/criterion_errors', locals: { criterion: criterion } %>
+  </div>
+<% else %>
+  <div
+    class="<%= (input[:clause] == 'btwn' || input[:clause] == 'nbtwn') ? 'refine-date-condition-first-date-container-btwn' : 'refine-date-condition-first-date-container' %>"
+  >
+    <%= render partial: "refine/blueprints/clauses/date_picker", locals: {
+      criterion: criterion,
+      label: t("refine.refine_blueprints.clauses.date_condition.first_date"),
+      condition_id: condition_id,
+      date: input[:date1],
+      input_key: 'date1',
+      input_id: defined?(input_id) && input_id,
+    } %>
+    <%= render partial: 'refine/blueprints/criterion_errors', locals: { criterion: criterion } %>
+  </div>
+  <% if (input[:clause] == 'btwn' || input[:clause] == 'nbtwn') %>
+    <span class="refine-date-condition-and"><%= t("refine.refine_blueprints.clauses.date_condition.and") %></span>
+    <div class="refine-date-condition-second-date-container">
+      <%= render partial: "refine/blueprints/clauses/date_picker", locals: {
+        criterion: criterion,
+        label: t("refine.refine_blueprints.clauses.date_condition.second_date"),
+        condition_id: condition_id,
+        date: input[:date2],
+        input_key: 'date2',
+        input_id: defined?(input_id) && input_id,
+      } %>
+    </div>
+  <% end %>
+<% end %>
+

data/app/views/refine/blueprints/clauses/_date_picker.html.erb

@@ -0,0 +1,26 @@
+<div
+  data-controller="refine--date"
+  class="refine-date-picker-container"
+  data-refine--date-locale-value="<%= I18n.locale %>"
+  data-refine--date-date-format-value="<%=  I18n.t("refine.date.formats.moment") %>"
+  data-refine--date-datetime-format-value="<%= I18n.t("refine.time.formats.moment") %>"
+  data-refine--date-picker-locale-value="<%= I18n.t("refine.daterangepicker").deep_transform_keys { |k| k.to_s.camelize(:lower) }.to_json %>",
+>
+  <label for="<%= condition_id %>" class="sr-only"><%= label %></label>
+
+  <input
+    class="refine--date-picker-input"
+    type="text"
+    value="<%= date&.to_date && I18n.l(date&.to_date, format: I18n.t("refine.date.formats.ruby")) %>"
+    data-refine--date-target="field"
+  />
+  <input
+    type="hidden"
+    name="<%= condition_id %>"
+    value="<%= date&.to_date&.strftime('%Y-%m-%d') %>"
+    data-refine--date-target="hiddenField"
+    data-input-key="<%= input_key %>"
+    data-input-id="<%= defined?(input_id) && input_id %>"
+    data-action="change->refine--update#value"
+  >
+</div>

data/app/views/refine/blueprints/clauses/_filter_condition.html.erb

@@ -0,0 +1,36 @@
+<% selected = input.has_key?(:selected) ? input[:selected] : [] %>
+
+<% if ['st', 'nst'].include? input[:clause] %>
+<!-- Render nothing -->
+<% elsif %>
+  <%= tag.div class: 'refine-filter-condition-container' do %>
+    <%= tag.div data: {
+      action: "$change->refine--update#selected blur->refine--update#refreshFromServer",
+      controller: 'fields--super-select',
+      fields__super_select_enable_search_value: 'true',
+      fields__super_select_container_width_value: 'resolve',
+    } do %>
+      <select
+        class="refine-filter-condition-select"
+        data-fields--super-select-target="select"
+        name="values"
+        data-input-id='<%= input_id if input_id%>'
+      >
+      <% condition.meta[:options].each do |option| %>
+        <option
+          value="<%= option[:id] %>"
+          <% if selected.find { |id|  id == option[:id] } %>selected<% end %>
+        >
+          <%= option[:display] %>
+        </option>
+      <% end %>
+
+      </select>
+    <% end %>
+    <% if meta[:postfix] %>
+      <span class="refine-filter-condition-postfix"><%= meta[:postfix] %></span>
+    <% end %>
+  <% end %>
+<% end %>
+
+

data/app/views/refine/blueprints/clauses/_numeric_condition.html.erb

@@ -0,0 +1,35 @@
+<% condition_id = condition.try(:id) || condition[:id] %>
+<% if ['st', 'nst'].include? input[:clause] %>
+  <!-- render nothing -->
+<% else %>
+    <div class="<%= input[:clause] != 'btwn' ? 'refine-numeric-condition-container' : 'refine-numeric-condition-container-btwn' %>">
+
+      <input
+        class="refine-numeric-condition-input <%="has-error" if criterion.errors.any? %> "
+        name="<%= condition_id %>"
+        type="text"
+        value="<%= input[:value1] %>"
+        data-input-key="value1"
+        data-action="input->refine--update#value blur->refine--update#refreshFromServer"
+        data-input-id="<%= defined?(input_id) && input_id %>"
+      />
+      <%= render partial: 'refine/blueprints/criterion_errors', locals: { criterion: criterion } %>
+    </div>
+
+    <% if ['btwn', 'nbtwn'].include? input[:clause] %>
+      <!-- Add second input for value2 if clause is between or not between -->
+      <span class="refine-numeric-condition-and"><%= t("refine.refine_blueprints.clauses.numeric_condition.and") %></span>
+      <div class="refine-numeric-condition-second-container">
+        <input
+          class="refine-numeric-condition-second-input"
+          name="<%= condition_id %>"
+          type="text"
+          value="<%= input[:value2] %>"
+          data-input-key="value2"
+          data-action="input->refine--update#value blur->refine--update#refreshFromServer"
+          data-input-id="<%= defined?(input_id) && input_id %>"
+        />
+        <%= render partial: 'refine/blueprints/criterion_errors', locals: { criterion: criterion } %>
+      </div>
+    <% end %>
+<% end %>

data/app/views/refine/blueprints/clauses/_option_condition.html.erb

@@ -0,0 +1,37 @@
+<% selected = input.has_key?(:selected) ? input[:selected] : [] %>
+<% multiple = meta_clause[:multiple] ? "multiple" : "" %>
+<% if ['st', 'nst'].include? input[:clause] %>
+<!-- Render nothing -->
+<% elsif %>
+  <div class="refine-option-condition-container <%= "has-error" if criterion.errors.any? %> ">
+    <%= tag.div data: {
+      action: "$change->refine--update#selected blur->refine--update#refreshFromServer",
+      controller: 'fields--super-select',
+      fields__super_select_enable_search_value: 'true',
+      fields__super_select_container_width_value: 'resolve',
+    } do %>
+      <select <%=multiple%>
+        class="refine-option-condition-select"
+        data-fields--super-select-target="select"
+        name="values"
+        data-input-id='<%= input_id if input_id%>'
+      >
+      <% condition.meta[:options].each do |option| %>
+        <option
+          value="<%= option[:id] %>"
+          <% if selected.find { |id|  id == option[:id] } %>selected<% end %>
+        >
+          <%= option[:display].truncate(64) %>
+        </option>
+      <% end %>
+
+      </select>
+    <% end %>
+    <% if meta[:postfix] %>
+      <span class="refine-option-condition-postfix"><%= meta[:postfix] %></span>
+    <% end %>
+    <%= render partial: 'refine/blueprints/criterion_errors', locals: { criterion: criterion } %>
+  </div>
+<% end %>
+
+

data/app/views/refine/blueprints/clauses/_text_condition.html.erb

@@ -0,0 +1,13 @@
+<% unless ['st', 'nst'].include? input[:clause] %>
+  <div class="refine-text-condition-container">
+    <label for="<%= condition.id %>" class="sr-only"><%= condition.display %></label>
+    <input
+      class="refine-text-condition-input <%="has-error" if criterion.errors.any? %> "
+      name="<%= condition.id %>"
+      type="text"
+      value="<%= input[:value] %>"
+      data-action="input->refine--update#updateBlueprint keydown->refine--update#cancelEnter"
+    />
+    <%= render partial: 'refine/blueprints/criterion_errors', locals: { criterion: criterion } %>
+  </div>
+<% end %>

data/app/views/refine/blueprints/create.turbo_stream.erb

@@ -0,0 +1,22 @@
+<% if @filter_submit_success %>
+  <%= turbo_stream.append_all "body" do %>
+    <script>
+      (function() {
+        const formId = <%= @refine_filter_builder.client_id.to_json.html_safe %>
+        const event = new CustomEvent("filter-submit-success", {
+          bubbles: true,
+          detail: {
+            stableId: <%= @stable_id.to_json.html_safe %>,
+            url: <%= @url_for_redirect.to_json.html_safe %>,
+            formId: formId
+          }
+        })
+        document
+          .getElementById(<%= dom_id(@refine_filter_builder, "query").to_json.html_safe %>)
+          .dispatchEvent(event)
+      })()
+    </script>
+  <% end %>
+<% else %>
+  <%= turbo_stream.replace(dom_id(@refine_filter_builder, "query"), partial: "refine/blueprints/query") %>
+<% end %>

data/app/views/refine/blueprints/new.html.erb

@@ -0,0 +1,7 @@
+<%= turbo_frame_tag "refine_filter_modal" do %>
+  <% if @show_stored_filters %>
+    <%= render partial: "stored_filters" %>
+  <% end %>
+
+  <%= render template: "refine/blueprints/show" %>
+<% end %>

data/app/views/refine/blueprints/show.html.erb

@@ -0,0 +1,4 @@
+<%= turbo_frame_tag dom_id(@refine_filter_builder) do %>
+  <%= render partial: 'query' %>
+<% end %>
+

data/app/views/refine/blueprints/show.turbo_stream.erb

@@ -0,0 +1,22 @@
+<%= turbo_stream.replace(dom_id(@refine_filter_builder, "query"), partial: "refine/blueprints/query") %>
+<% if @stable_id %>
+  <%= turbo_stream.append_all "body" do %>
+    <script>
+      (function() {
+        const formId = <%= @refine_filter_builder.client_id.to_json.html_safe %>
+        const event = new CustomEvent("filter-stabilized", {
+          bubbles: true,
+          detail: {
+            stableId: <%= @stable_id.to_json.html_safe %>,
+            formId: formId
+          }
+        })
+        document
+          .getElementById(<%= dom_id(@refine_filter_builder, "query").to_json.html_safe %>)
+          ?.dispatchEvent(event)
+      })()
+    </script>
+  <% end %>
+<% end %>
+
+<%= turbo_stream.replace(dom_id(@refine_filter_builder, "query"), partial: "refine/blueprints/query") %>

data/app/views/refine/inline/criteria/_form_fields.html.erb

@@ -0,0 +1,62 @@
+<%= form.hidden_field :stable_id, form: form_id %>
+<%= form.hidden_field :client_id, form: form_id %>
+<%= form.hidden_field :condition_id, form: form_id %>
+<%= form.hidden_field :conjunction, form: form_id %>
+<%= form.hidden_field :position, form: form_id %>
+
+<%= form.fields :input_attributes, model: @criterion.input do |input_fields| %>
+
+
+  <%# Input Value %>
+  <% unless ['st', 'nst'].include? @criterion.input.clause %>
+    <%= render @criterion.input_partial, criterion: @criterion, form: form, input_fields: input_fields, form_id: form_id %>
+    <div class="refine--separator"></div>
+  <% end %>
+
+  <%# Count Refinement  %>
+  <% if @criterion.condition.has_count_refinement? %>
+    <label style="color: black;"><%= @criterion.condition.get_count_refinement_condition.display %></label>
+    <%= input_fields.fields :count_refinement_attributes, model: @criterion.input.count_refinement do |count_fields| %>
+      <div class="refine--criterion-clause-container">
+        <%= count_fields.collection_select :clause,
+          @criterion.condition.get_count_refinement_condition.clauses,
+          :id,
+          :display,
+          {},
+          class: "refine--clause-select",
+          data: {action: "change->refine--criterion-form#refresh"}
+        %>
+      </div>
+
+      <% unless ['st', 'nst'].include? @criterion.input.count_refinement.clause %>
+        <%= render "refine/inline/inputs/numeric_condition", input_fields: count_fields, form_id: form_id %>
+      <% end %>
+    <% end %>
+
+  <% end %>
+
+
+
+  <%# Clause Select %>
+  <div class="refine--criterion-clause-container">
+    <%= input_fields.label :clause, t('.rule') %>
+    <%= input_fields.collection_select :clause,
+      @criterion.condition.approved_clauses,
+      :id,
+      :display,
+      {},
+      class: "refine--select refine--clause-select",
+      data: {action: "change->refine--criterion-form#refresh"},
+      form: form_id
+    %>
+    <%= form.button t('global.buttons.apply'), class: "refine--apply-button", data: {action: "refine--criterion-form#submit"}, type: "submit", form: form_id %>
+  </div>
+
+
+<% end %>
+
+<% @error_messages&.each do |msg| %>
+  <p class="refine-criterion-error">
+    <%= msg %>
+  </p>
+<% end %>

data/app/views/refine/inline/criteria/create.turbo_stream.erb

@@ -0,0 +1,19 @@
+<%= turbo_stream.append_all "body" do %>
+  <script>
+    (function() {
+      const event = new CustomEvent("filter-submit-success", {
+        bubbles: true,
+        detail: {
+          stableId: <%= @refine_stable_id.to_json.html_safe %>,
+          url: <%= @url_for_redirect.to_json.html_safe %>,
+          formId: <%= @refine_client_id.to_json.html_safe %>
+        }
+      })
+      document
+        .getElementById(<%= "refine-inline-filter-#{@refine_client_id}".to_json.html_safe %>)
+        .dispatchEvent(event)
+    })()
+  </script>
+<% end %>
+
+<%= turbo_stream.replace "refine-inline-filter-#{@refine_client_id}", partial: "refine/inline/filters/show" %>

data/app/views/refine/inline/criteria/edit.turbo_stream.erb

@@ -0,0 +1,26 @@
+<% form_id = dom_id(@criterion, :form) %>
+
+<%= turbo_stream.update dom_id(@criterion) do %>
+  <div class="refine--criterion-fields">
+    <%= fields model: @criterion,
+      data: {
+        controller: "refine--criterion-form",
+        refine__criterion_form_url_value: edit_refine_inline_criterion_url(
+          @criterion.position, @criterion.to_params
+        ),
+        refine__criterion_form_turbo_frame_value: dom_id(@criterion)
+      } do |form|
+    %>
+      <%= render "form_fields", form: form, form_id: form_id %>
+    <% end %>
+  </div>
+<% end %>
+
+
+<%= turbo_stream.append_all "body" do %>
+  <%= form_with url: refine_inline_criterion_path(@criterion.position),
+      method: :put,
+      id: form_id,
+      data: {controller: "refine--turbo-stream-form", action: "submit->refine--turbo-stream-form#submit"}
+   %>
+<% end %>

data/app/views/refine/inline/criteria/index.html.erb

@@ -0,0 +1,64 @@
+<%
+  # a hash mapping Category => [array, of, conditions], sorted by category
+  categorized_conditions = @conditions
+    .group_by {|c| c.meta[:category].presence}
+    .sort_by {|(category, _conditions)| category.to_s.downcase }
+    .to_h
+
+  # an array of uncategorized conditions
+  uncategorized_conditions = categorized_conditions.delete(nil)
+%>
+
+<%= turbo_frame_tag @criterion do %>
+  <div data-controller="refine--inline-conditions">
+
+    <div class="refine--search-box">
+      <span class="material-icons refine--icon-search">search</span>
+      <input class="refine--search-trigger" data-search-target="filterProperties" placeholder="<%= t('.type_to_search') %>..." type="text" data-action="refine--inline-conditions#filterConditions">
+    </div>
+
+    <div class="refine--separator-m0"></div>
+
+    <div class="refine--condition-list">
+      <% uncategorized_conditions.each do |condition| %>
+        <%= link_to condition.display,
+          new_refine_inline_criterion_url(@criterion.to_params.deep_merge(refine_inline_criterion: {condition_id: condition.id})),
+          class: "refine--condition-list-item",
+          data: {
+            controller: "refine--turbo-stream-link",
+            action: "refine--turbo-stream-link#visit",
+            refine__inline_conditions_target: "condition"
+          }
+        %>
+      <% end %>
+
+      <%  categorized_conditions.each do |(category, conditions)| %>
+        <b data-refine--inline-conditions-target="category"><%= category %></b>
+        <% conditions.each do |condition| %>
+          <%= link_to condition.display,
+            new_refine_inline_criterion_url(@criterion.to_params.deep_merge(refine_inline_criterion: {condition_id: condition.id})),
+            class: "refine--condition-list-item",
+            data: {
+              controller: "refine--turbo-stream-link",
+              action: "refine--turbo-stream-link#visit",
+              refine__inline_conditions_target: "condition",
+              category: category
+            }
+          %>
+        <% end %>
+      <% end %>
+    </div>
+
+  </div>
+  <div class="refine--separator"></div>
+  <%= render "refine/inline/filters/popup",
+    frame_id: dom_id(@criterion, :load),
+    src: refine_inline_stored_filters_path(@criterion.to_params),
+    frame_class: "refine--stored-filter-list-popup" do
+  %>
+    <%= link_to "#", class: "refine--stored-filters-link", data: {action: "click->refine--popup#show"} do %>
+      <div class="material-icons-outlined refine--list-icon">save</div>
+      <%= t('.saved_filters') %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/views/refine/inline/criteria/new.turbo_stream.erb

@@ -0,0 +1,24 @@
+<% form_id = dom_id(@criterion, :form) %>
+
+<%= turbo_stream.update dom_id(@criterion) do %>
+  <div class="refine--criterion-fields">
+    <%= fields model: @criterion,
+      class: "refine--criterion-form",
+      data: {
+        controller: "refine--criterion-form",
+        refine__criterion_form_url_value: new_refine_inline_criterion_url(
+          @criterion.to_params),
+        refine__criterion_form_turbo_frame_value: dom_id(@criterion),
+      } do |form|
+    %>
+      <%= render "form_fields", form: form, conjunction: @conjunction, position: @position, form_id: form_id %>
+    <% end %>
+  </div>
+<% end %>
+
+<%# The actual form tag is appended to the end of the body html.  Inputs are attached using the `form` attribute. This allows the query builder to be placed inside an outer form on the page. %>
+<%= turbo_stream.append_all "body" do %>
+  <%= form_with url: refine_inline_criteria_path,
+      method: :post, id: form_id, data: {controller: "refine--turbo-stream-form", action: "submit->refine--turbo-stream-form#submit"} %>
+<% end %>
+

data/app/views/refine/inline/filters/_add_first_condition_button.html.erb

@@ -0,0 +1,19 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    refine_filter: @refine_filter,
+    client_id: @refine_client_id,
+    conjunction: "and",
+    position: position
+  )
+%>
+
+<%= render "refine/inline/filters/popup",
+  frame_id: dom_id(criterion),
+  src: refine_inline_criteria_path(criterion.to_params) do
+%>
+  <button class="refine--add-condition-button refine--add-first-condition-button" href="#" data-action="click->refine--popup#show" type="button">
+    <span class="icon material-icons-outlined refine--icon-sm">add</span>
+    <span><%= t(".filter") %></span>
+  </button>
+<% end %>

data/app/views/refine/inline/filters/_and_button.html.erb

@@ -0,0 +1,26 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    refine_filter: @refine_filter,
+    client_id: @refine_client_id,
+    conjunction: "and",
+    position: position
+  )
+%>
+
+<% if @refine_filter.criteria_limit_reached? %>
+  <button disabled class="refine--add-condition-button" type="button" title="<%= t(".criteria_limit", criteria_limit: @refine_filter.criteria_limit) %>">
+    <span class="icon material-icons-outlined refine--icon-sm">add</span>
+    <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
+  </button>
+<% else %>
+  <%= render "refine/inline/filters/popup",
+    frame_id: dom_id(criterion),
+    src: refine_inline_criteria_path(criterion.to_params) do
+  %>
+    <button class="refine--add-condition-button" type="button" data-action="click->refine--popup#show">
+      <span class="icon material-icons-outlined refine--icon-sm">add</span>
+      <span class="refine--add-button-label"><%= t("refine.inline.filters.and_button.condition") %></span>
+    </button>
+  <% end %>
+<% end %>

data/app/views/refine/inline/filters/_criterion.html.erb

@@ -0,0 +1,23 @@
+<%# Filter Pill partial %>
+
+<%= render "refine/inline/filters/popup",
+  frame_id: dom_id(criterion) do
+%>
+
+  <div class="refine--condition-pill-wrapper">
+    <div class="refine--condition-pill">
+      <%= link_to criterion.condition_display, edit_refine_inline_criterion_path(criterion.position, criterion.to_params), class: "refine--condition-pill-name", data: {controller: "refine--turbo-stream-link", action: "refine--turbo-stream-link#visit"} %>
+      <div class="refine--remove-condition"></div>
+      <%= link_to refine_inline_criterion_path(criterion.position, criterion.to_params), class: "refine--remove-condition", data: {turbo_method: :delete, controller: "refine--turbo-stream-link", action: "refine--turbo-stream-link#visit"} do %>
+      <% end %>
+      <div class="refine--condition-value-wrapper">
+         <div class="refine--condition-value-clause"><%= criterion.clause_display %></div>
+         <div class="refine--condition-value-self">
+            <div><%= criterion.human_readable_value.truncate(64) %></div>
+         </div>
+      </div>
+    </div>
+
+  </div>
+
+<% end %>

data/app/views/refine/inline/filters/_group.html.erb

@@ -0,0 +1,13 @@
+<div class="refine--group">
+  <div class="refine--group-conditions-wrapper">
+    <div class="refine--group-conditions">
+      <% group.each.with_index do |criterion, i| %>
+        <% unless i == 0 %>
+          <div class="refine--condition-join"><%= t(".and") %></div>
+        <% end %>
+        <%= render "refine/inline/filters/criterion", criterion: criterion %>
+      <% end %>
+    </div>
+    <%= render "refine/inline/filters/and_button", position: group.last.position + 1 %>
+  </div>
+</div>

data/app/views/refine/inline/filters/_load_button.html.erb

@@ -0,0 +1,15 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    client_id: @refine_client_id,
+  )
+%>
+
+<%= render "refine/inline/filters/popup",
+  frame_id: dom_id(criterion, :load),
+  src: refine_inline_stored_filters_path(criterion.to_params) do
+%>
+  <button class="refine--inline-btn" type="button" data-action="click->refine--popup#show">
+    <%= t(".load_filter") %>
+  </button>
+<% end %>

data/app/views/refine/inline/filters/_or_button.html.erb

@@ -0,0 +1,26 @@
+<% 
+  criterion = Refine::Inline::Criterion.new(
+    stable_id: @refine_filter.to_stable_id,
+    refine_filter: @refine_filter,
+    client_id: @refine_client_id,
+    conjunction: "or",
+    position: position
+  )
+%>
+
+<% if @refine_filter.criteria_limit_reached? %>
+  <button disabled class="refine--add-group-button" type="button" title="<%= t(".criteria_limit", criteria_limit: @refine_filter.criteria_limit) %>">
+    <span class="icon material-icons-outlined refine--icon-sm">add</span>
+    <span class="refine--add-group-button-label"><%= t(".group") %></span>
+  </button>
+<% else %>
+  <%= render "refine/inline/filters/popup",
+    frame_id: dom_id(criterion),
+    src: refine_inline_criteria_path(criterion.to_params) do
+  %>
+    <button class="refine--add-group-button" type="button" data-action="click->refine--popup#show">
+      <span class="icon material-icons-outlined refine--icon-sm">add</span>
+      <span class="refine--add-group-button-label"><%= t(".group") %></span>
+    </button>
+  <% end %>
+<% end %>

data/app/views/refine/inline/filters/_popup.html.erb

@@ -0,0 +1,26 @@
+<%#
+  Generic partial for placing a button that will load popup content via hotwire.
+  Required params:
+    - frame_id (the DOM ID of the turbo frame)
+
+  Optional class:
+    - src (the URL to load popup content from)
+    - container_class (class attribute of the wrapper div. Defaults to "refine--inline-popup-container")
+    - frame_class (class attribute of the turbo frame. Defaults to "refine--inline-popup")
+
+  somewhere in your yield be sure to include a `data-action="click->refine--popup#show"` to trigger the the popup
+
+  Popup can be hidden with `data-action="click->refine--popup#hide"`
+%>
+
+<%
+  src ||= ""
+  container_class ||= "refine--inline-popup-container"
+  frame_class ||= "refine--inline-popup"
+  is_open ||= false
+%>
+
+<%= tag.div class: container_class, data: {controller: "refine--popup", refine__popup_src_value: src, refine__is_open_value: is_open } do %>
+    <%= yield %>
+  <%= turbo_frame_tag frame_id, class: frame_class, data: {refine__popup_target: "frame"} %>
+<% end %>