django-unfold 0.67.0__py3-none-any.whl → 0.68.0__py3-none-any.whl

unfold/static/unfold/js/app.js

@@ -17,7 +17,9 @@ const sortRecords = (e) => {
   const orderingField = e.from.dataset.orderingField;
 
   const weightInputs = Array.from(
-    e.from.querySelectorAll(`.has_original input[name$=-${orderingField}]`)
+    e.from.querySelectorAll(
+      `.has_original input[name$=-${orderingField}], td.field-${orderingField} input[name$=-${orderingField}]`
+    )
   );
 
   weightInputs.forEach((input, index) => {

unfold/styles.css

@@ -420,6 +420,10 @@ td .inline-deletelink {
   @apply py-1;
 }
 
+.select2-container .select2-results__option--highlighted[aria-selected] {
+    @apply !bg-base-100 dark:!bg-base-800;
+}
+
 .select2-container.select2-container--open .select2-dropdown {
   @apply bg-white border border-base-200 rounded-default shadow-xs dark:border-base-700 dark:bg-base-900;
 }
@@ -505,13 +509,17 @@ fieldset details[open] > summary:after {
 /*******************************************************
  Calendar
  *******************************************************/
+.calendarbox .calendar {
+  @apply min-h-[320px];
+}
+
 .calendarbox,
 .clockbox {
-  @apply bg-white border border-base-200 rounded-default shadow-xs text-base-500 text-sm w-80 z-50 dark:bg-base-800 dark:border-base-700 fixed! left-1/2! top-1/2! -translate-x-1/2 -translate-y-1/2;
+  @apply bg-white border border-base-200 rounded-default shadow-xs w-80 z-50 dark:bg-base-800 dark:border-base-700 fixed! left-1/2! top-1/2! -translate-x-1/2 -translate-y-1/2;
 }
 
 .calendar caption {
-  @apply font-medium mb-3 py-3 text-base-700 dark:text-base-200;
+  @apply font-semibold mb-3 py-3 text-important;
 }
 
 .calendar table {
@@ -519,7 +527,7 @@ fieldset details[open] > summary:after {
 }
 
 .calendar table th {
-  @apply font-medium text-center text-base-700 text-xs dark:text-base-200;
+  @apply font-semibold text-center text-important text-xs;
 }
 
 .calendar table td {
@@ -527,7 +535,7 @@ fieldset details[open] > summary:after {
 }
 
 .calendar table td a {
-  @apply block flex h-8 items-center justify-center rounded-full transition-all w-8 dark:text-base-300;
+  @apply block flex h-8 items-center justify-center rounded-full w-8 dark:text-base-300;
 }
 
 .calendar table td a:hover {
@@ -543,7 +551,7 @@ fieldset details[open] > summary:after {
 }
 
 .calendar-shortcuts a {
-  @apply border border-base-200  font-medium leading-none mx-1 px-2 py-2 rounded-default shadow-xs text-center text-base-500 text-xs transition-all w-1/3 dark:border-base-700 dark:hover:border-base-600 dark:text-base-300 dark:hover:text-base-200;
+  @apply border border-base-200 font-medium leading-none mx-1 px-2 py-2 rounded-default shadow-xs text-center text-base-500 text-xs w-1/3 dark:border-base-700 dark:text-base-300 ;
 }
 
 .calendar-cancel {
@@ -554,28 +562,25 @@ fieldset details[open] > summary:after {
   @apply absolute block ml-2 mt-2 left-0 text-[0px] top-0;
 }
 
-.calendarnav-next:after,
-.calendarnav-previous:after {
-  @apply border border-base-200 flex h-7 items-center justify-center material-symbols-outlined rounded-full text-base-400 transition-all w-7 hover:border-primary-600 hover:text-primary-500 dark:bg-base-800 dark:border-base-700 dark:hover:border-base-800;
+.calendarnav-next,
+.calendarnav-previous {
+  @apply after:border after:border-base-200 after:flex after:h-7 after:items-center after:justify-center after:material-symbols-outlined after:rounded-full after:transition-all after:w-7 dark:after:bg-base-800 dark:after:border-base-700;
+}
 
+.calendarnav-previous:after {
   content: "navigate_before";
   display: flex;
 }
 
-.calendarnav-next:hover:after,
-.calendarnav-previous:hover:after {
-  @apply dark:border-base-600 dark:text-base-200;
+.calendarnav-next:after {
+  content: "navigate_next";
+  display: flex;
 }
 
 .calendarnav-next {
   @apply absolute block mr-2 mt-2 right-0 text-[0px] top-0;
 }
 
-.calendarnav-next:after {
-  content: "navigate_next";
-  display: flex;
-}
-
 /*******************************************************
  Timepicker
  *******************************************************/

unfold/templates/admin/change_form.html

@@ -34,7 +34,7 @@
             {% include adminform.model_admin.change_form_outer_before_template %}
         {% endif %}
 
-        <form {% if adminform.model_admin.conditional_fields %}x-data='{{ adminform|changeform_data }}'{% endif %} {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}"{% else %}x-bind:value="activeTab && activeTab !== 'general' ? '#' + activeTab : ''" {% endif %}method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
+        <form {% if adminform.model_admin.conditional_fields %}x-data='{{ adminform|changeform_data }}'{% endif %} {% if has_file_field %}enctype="multipart/form-data" {% endif %}{% if form_url %}action="{{ form_url }}"{% endif %} x-bind:action="activeTab && activeTab !== 'general' ? window.location.pathname + window.location.search + '#' + activeTab : window.location.pathname + window.location.search" method="post" id="{{ opts.model_name }}_form" {% if adminform.model_admin.warn_unsaved_form %}class="warn-unsaved-form"{% endif %} novalidate>
             {% csrf_token %}
 
             {% if adminform.model_admin.change_form_before_template %}
@@ -99,6 +99,10 @@
             {% endif %}
         </form>
 
+        {% for dataset in datasets %}
+            {{ dataset.contents }}
+        {% endfor %}
+
         {% if adminform.model_admin.change_form_outer_after_template %}
             {% include adminform.model_admin.change_form_outer_after_template %}
         {% endif %}

unfold/templates/admin/change_list_results.html

@@ -8,69 +8,11 @@
 
 {% if results %}
     <div class="{% if cl.search_fields or cl.has_filters %}lg:rounded-b-default{% else %}lg:rounded-default{% endif %} -mx-1 px-1 overflow-x-auto lg:border lg:border-base-200 lg:mx-0 lg:px-0 lg:shadow-xs lg:dark:border-base-800 lg:bg-white lg:dark:bg-base-900 {% if cl.model_admin.list_horizontal_scrollbar_top %}simplebar-horizontal-scrollbar-top{% endif %}" data-simplebar data-simplebar-auto-hide="false">
-        <table id="result_list" class="block border-base-200 border-spacing-none border-separate w-full lg:table">
-            <thead>
-                <tr>
-                    {% if cl.model_admin.list_sections|length > 0 %}
-                        <th></th>
-                    {% endif %}
-
-                    {% for header in result_headers %}
-                        <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}lg:px-3 lg:w-10{% else %}hidden px-3 lg:table-cell{% endif %}" scope="col">
-                            <div class="flex items-center">
-                                <div class="text">
-                                    {% if header.sortable %}
-                                        <a href="{{ header.url_primary }}">
-                                            {{ header.text|capfirst }}
-                                        </a>
-                                    {% else %}
-                                        {% if "action-toggle" in header.text and forloop.counter == 1 %}
-                                            <label class="flex flex-row items-center gap-2">
-                                                {{ header.text|capfirst }}
-
-                                                <span class="block font-normal lg:hidden">
-                                                    {% trans "Select all rows"%}
-                                                </span>
-                                            </label>
-                                        {% else %}
-                                            <span>
-                                                {{ header.text|capfirst }}
-                                            </span>
-                                        {% endif %}
-                                    {% endif %}
-                                </div>
-
-                                {% if header.sortable %}
-                                    {% if header.sort_priority > 0 %}
-                                        <div class="sortoptions flex items-center ml-2">
-                                            <a href="{{ header.url_toggle }}" class="flex items-center leading-none text-base-400 hover:text-base-500 dark:text-base-500 dark:hover:text-base-400 toggle {% if header.ascending %}ascending{% else %}descending{% endif %}" title="{% translate "Toggle sorting" %}">
-                                                {% if header.ascending %}
-                                                    <span class="block material-symbols-outlined">arrow_circle_down</span>
-                                                {% else %}
-                                                    <span class="block material-symbols-outlined">arrow_circle_up</span>
-                                                {% endif %}
-                                            </a>
-
-                                            <a class="sortremove flex items-center leading-none ml-1 text-base-400 dark:text-base-500 transition-all hover:text-red-700 dark:hover:text-red-500" href="{{ header.url_remove }}" title="{% translate "Remove from sorting" %}">
-                                                <span class="block material-symbols-outlined">cancel</span>
-                                            </a>
-                                        </div>
-
-                                        {% if num_sorted_fields > 1 %}
-                                            <span class="sortpriority font-medium ml-2 text-xs" title="{% blocktranslate with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktranslate %}">
-                                                {{ header.sort_priority }}
-                                            </span>
-                                        {% endif %}
-                                    {% endif %}
-                                {% endif %}
-                            </div>
-                        </th>
-                    {% endfor %}
-                </tr>
-            </thead>
+        <table id="result_list" class="block border-base-200 border-spacing-none border-separate w-full lg:table" {% if cl.model_admin.ordering_field %}x-sort.ghost x-on:end="sortRecords"{% endif %} data-ordering-field="{{ cl.model_admin.ordering_field }}">
+            {% include 'unfold/helpers/change_list_headers.html' %}
 
             {% for result in results %}
-                <tbody class="block relative lg:table-row-group lg:hover:shadow-raised lg:dark:hover:shadow-raised-dark lg:hover:z-20 {% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}" x-data="{rowOpen: false}">
+                <tbody class="block relative lg:table-row-group lg:hover:shadow-raised lg:dark:hover:shadow-raised-dark lg:hover:z-20 {% cycle '' 'bg-base-50 dark:bg-white/[.02]' %}" x-data="{rowOpen: false}" {% if cl.model_admin.ordering_field %}x-sort:item{% endif %}>
                     {% if result.form and result.form.non_field_errors %}
                         <tr>
                             <td class="text-left" colspan="{{ result|length }}">
@@ -80,6 +22,12 @@
                     {% endif %}
 
                     <tr class="block border border-base-200 mb-3 relative rounded-default shadow-xs lg:table-row lg:border-none lg:mb-0 lg:rounded-none lg:shadow-none dark:border-base-800">
+                        {% if cl.model_admin.ordering_field %}
+                            <td class="align-middle cursor-move flex border-b border-base-200 font-normal px-2.5 py-2 relative text-left before:font-semibold before:text-font-important-light before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:border-b-0 lg:border-t lg:pl-3 lg:pr-0 lg:py-3 lg:table-cell dark:border-base-800 dark:lg:border-base-800 dark:before:text-font-important-dark lg:w-px" x-sort:handle>
+                                <span class="material-symbols-outlined align-middle cursor-move">drag_indicator</span>
+                            </td>
+                        {% endif %}
+
                         {% if cl.model_admin.list_sections|length > 0 %}
                             <td class="align-middle cursor-pointer flex border-b border-base-200 font-normal px-2.5 py-2 relative text-left before:font-semibold before:text-font-important-light before:block before:capitalize before:content-[attr(data-label)] before:mr-auto lg:before:hidden lg:border-b-0 lg:border-t lg:pl-3 lg:pr-0 lg:py-3 lg:table-cell dark:border-base-800 dark:lg:border-base-800 dark:before:text-font-important-dark lg:w-px"
                                 data-label="{% trans "Expand row" %}"
@@ -100,7 +48,7 @@
 
                     {% if cl.model_admin.list_sections|length > 0 %}
                         <tr class="block mb-3 relative z-30 lg:table-row" x-show="rowOpen">
-                            <td colspan="{{ result|length|add:2 }}" class="border bg-base-200/10 block border-base-200 relative rounded-default p-3 lg:shadow-inner lg:border-0 lg:border-t lg:rounded-none lg:table-cell dark:border-base-800">
+                            <td colspan="100%" class="border bg-base-200/10 block border-base-200 relative rounded-default p-3 lg:shadow-inner lg:border-0 lg:border-t lg:rounded-none lg:table-cell dark:border-base-800">
                                 <div class="absolute bg-primary-600 h-full hidden left-0 top-0 w-0.5 lg:block"></div>
 
                                 <div class="grid gap-3 {{ cl.model_admin.list_sections_classes }}">

unfold/templates/admin/edit_inline/stacked.html

@@ -34,7 +34,7 @@
 
                             {% if inline_admin_formset.opts.ordering_field %}
                                 {% if inline_admin_form.original %}
-                                    <span class="material-symbols-outlined cursor-pointer" x-sort:handle>drag_indicator</span>
+                                    <span class="material-symbols-outlined cursor-move" x-sort:handle>drag_indicator</span>
                                 {% else %}
                                     <span class="-mr-2" x-sort:handle></span>
                                 {% endif %}

unfold/templates/admin/search_form.html

@@ -2,7 +2,7 @@
 
 {% if cl.search_fields %}
     <div id="toolbar">
-        <form id="changelist-search" method="get" role="search" x-data="searchForm()">
+        <form {% if not cl.is_dataset %}id="changelist-search" x-data="searchForm()"{% endif %} method="get" role="search">
             <div class="bg-white border border-base-200 flex flex-row items-center px-3 rounded-default relative shadow-xs w-full focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-primary-600 lg:w-96 dark:bg-base-900 dark:border-base-700">
                 <button type="submit" class="flex items-center focus:outline-hidden" id="searchbar-submit">
                     <span class="material-symbols-outlined md-18 text-base-400 dark:text-base-500">search</span>
@@ -14,10 +14,12 @@
                        class="grow font-medium min-w-0 overflow-hidden p-2 placeholder-font-subtle-light truncate focus:outline-hidden dark:bg-base-900 dark:placeholder-font-subtle-dark dark:text-font-default-dark"
                        name="{{ search_var }}"
                        value="{{ cl.query }}"
-                       id="searchbar"
+                       {% if not cl.is_dataset %}id="searchbar"{% endif %}
                        placeholder="{% if cl.search_help_text %}{{ cl.search_help_text }}{% else %}{% trans "Type to search" %}{% endif %}" />
 
-                {% include "unfold/helpers/shortcut.html" with shortcut="/" %}
+                {% if not cl.is_dataset %}
+                    {% include "unfold/helpers/shortcut.html" with shortcut="/" %}
+                {% endif %}
             </div>
 
             {% for pair in cl.filter_params.items %}

unfold/templates/unfold/helpers/change_list_headers.html

@@ -0,0 +1,65 @@
+{% load i18n %}
+
+<thead>
+    <tr>
+        {% if cl.model_admin.ordering_field %}
+            <th></th>
+        {% endif %}
+
+        {% if cl.model_admin.list_sections|length > 0 %}
+            <th></th>
+        {% endif %}
+
+        {% for header in result_headers %}
+            <th class="align-middle font-semibold py-2 text-left text-font-important-light dark:text-font-important-dark whitespace-nowrap {{ header.class_attrib }} {% if "action-toggle" in header.text and forloop.counter == 1 %}lg:px-3 lg:w-10{% else %}hidden px-3 lg:table-cell{% endif %}" scope="col">
+                <div class="flex items-center">
+                    <div class="text">
+                        {% if header.sortable %}
+                            <a href="{{ header.url_primary }}">
+                                {{ header.text|capfirst }}
+                            </a>
+                        {% else %}
+                            {% if "action-toggle" in header.text and forloop.counter == 1 %}
+                                <label class="flex flex-row items-center gap-2">
+                                    {{ header.text|capfirst }}
+
+                                    <span class="block font-normal lg:hidden">
+                                        {% trans "Select all rows"%}
+                                    </span>
+                                </label>
+                            {% else %}
+                                <span>
+                                    {{ header.text|capfirst }}
+                                </span>
+                            {% endif %}
+                        {% endif %}
+                    </div>
+
+                    {% if header.sortable %}
+                        {% if header.sort_priority > 0 %}
+                            <div class="sortoptions flex items-center ml-2">
+                                <a href="{{ header.url_toggle }}" class="flex items-center leading-none text-base-400 hover:text-base-500 dark:text-base-500 dark:hover:text-base-400 toggle {% if header.ascending %}ascending{% else %}descending{% endif %}" title="{% translate "Toggle sorting" %}">
+                                    {% if header.ascending %}
+                                        <span class="block material-symbols-outlined">arrow_circle_down</span>
+                                    {% else %}
+                                        <span class="block material-symbols-outlined">arrow_circle_up</span>
+                                    {% endif %}
+                                </a>
+
+                                <a class="sortremove flex items-center leading-none ml-1 text-base-400 dark:text-base-500 transition-all hover:text-red-700 dark:hover:text-red-500" href="{{ header.url_remove }}" title="{% translate "Remove from sorting" %}">
+                                    <span class="block material-symbols-outlined">cancel</span>
+                                </a>
+                            </div>
+
+                            {% if num_sorted_fields > 1 %}
+                                <span class="sortpriority font-medium ml-2 text-xs" title="{% blocktranslate with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktranslate %}">
+                                    {{ header.sort_priority }}
+                                </span>
+                            {% endif %}
+                        {% endif %}
+                    {% endif %}
+                </div>
+            </th>
+        {% endfor %}
+    </tr>
+</thead>

unfold/templates/unfold/helpers/dataset.html

@@ -0,0 +1,19 @@
+{% load admin_list unfold_list %}
+
+<div {% if cl.model_admin.tab %}x-show="activeTab == 'dataset-{{ dataset.model_name }}'"{% endif %}>
+    {% if not cl.model_admin.tab %}
+        <h2 class="inline-heading bg-base-100 font-semibold mb-6 px-4 py-3 rounded-default text-font-important-light @min-[1570px]:-mx-4 dark:bg-white/[.02] dark:text-font-important-dark">
+            {{ dataset.model_verbose_name|capfirst }}
+        </h2>
+    {% endif %}
+
+    {% if cl.search_fields %}
+        <div class="flex flex-col gap-4 mb-4  sm:flex-row empty:hidden lg:border lg:border-base-200 lg:dark:border-base-800 lg:-mb-8 lg:p-3 lg:pb-11 lg:rounded-t-default">
+            {% unfold_search_form cl %}
+        </div>
+    {% endif %}
+
+    {% unfold_result_list cl %}
+
+    {% pagination cl %}
+</div>

unfold/templates/unfold/helpers/edit_inline/tabular_field.html

@@ -2,7 +2,7 @@
     {% if forloop.parentloop.counter == 1 and forloop.counter == 1 %}
         {% if inline_admin_formset.opts.ordering_field %}
             {% if inline_admin_form.original %}
-                <span class="material-symbols-outlined cursor-pointer" x-sort:handle>drag_indicator</span>
+                <span class="material-symbols-outlined cursor-move" x-sort:handle>drag_indicator</span>
             {% else %}
                 <span class="-mr-3" x-sort:handle></span>
             {% endif %}

unfold/templates/unfold/helpers/empty_results.html

@@ -3,10 +3,12 @@
 {% url cl.opts|admin_urlname:"add" as add_url %}
 {% blocktranslate with name=cl.opts.verbose_name asvar title %}Add {{ name }}{% endblocktranslate %}
 
-<div class="bg-white border border-base-200 flex flex-col items-center px-8 py-24 rounded-default shadow-xs dark:bg-base-900 dark:border-base-800">
-    <div class="border border-base-300 border-dashed flex h-24 items-center justify-center mb-8 rounded-full w-24 dark:border-base-700">
-        <span class="material-symbols-outlined text-base-500 text-5xl! dark:text-base-400">inbox</span>
-    </div>
+<div class="bg-white border border-base-200 flex flex-col items-center px-8 shadow-xs dark:bg-base-900 dark:border-base-800 {% if cl.search_fields %}rounded-b-default{% else %}rounded-default{% endif %} {% if cl.is_dataset %}py-16{% else %}py-24{% endif %}">
+    {% if not cl.is_dataset %}
+        <div class="border border-base-300 border-dashed flex h-24 items-center justify-center mb-8 rounded-full w-24 dark:border-base-700">
+            <span class="material-symbols-outlined text-base-500 text-5xl! dark:text-base-400">inbox</span>
+        </div>
+    {% endif %}
 
     <h2 class="font-semibold mb-1 text-xl text-font-important-light tracking-tight dark:text-font-important-dark">
         {% trans "No results found" %}

unfold/templates/unfold/helpers/field_readonly_value_file.html

@@ -2,7 +2,7 @@
 
 {% with url=field.url %}
     {% if not url %}
-        <span class="flex items-center">-<span>
+        <span class="flex items-center">-</span>
     {% elif field.is_image %}
         <a href="{{ url }}" target="_blank" class="block max-w-48">
             <img src="{{ url }}" alt="{% trans 'Image preview' %}" class="block rounded-default" />

unfold/templates/unfold/helpers/tab_items.html

@@ -24,6 +24,12 @@
                     {% endif %}
                 </a>
             {% endfor %}
+
+            {% for dataset in datasets_list %}
+                <a href="#dataset-{{ dataset.model_name }}" x-on:click="activeTab = 'dataset-{{ dataset.model_name }}'" x-bind:class="{'active': activeTab == 'dataset-{{ dataset.model_name }}'}">
+                    {{ dataset.model_verbose_name|capfirst }}
+                </a>
+            {% endfor %}
         {% endif %}
     </nav>
 {% endif %}

unfold/templatetags/unfold.py

@@ -1,6 +1,6 @@
 import json
 from collections.abc import Iterable, Mapping
-from typing import Any, Optional, Union
+from typing import Any
 
 from django import template
 from django.contrib.admin.helpers import AdminForm, Fieldset
@@ -27,7 +27,7 @@ register = Library()
 
 
 def _get_tabs_list(
-    context: RequestContext, page: str, opts: Optional[Options] = None
+    context: RequestContext, page: str, opts: Options | None = None
 ) -> list:
     tabs_list = []
     page_id = None
@@ -63,9 +63,9 @@ def _get_tabs_list(
 
 
 @register.simple_tag(name="tab_list", takes_context=True)
-def tab_list(context: RequestContext, page: str, opts: Optional[Options] = None) -> str:
+def tab_list(context: RequestContext, page: str, opts: Options | None = None) -> str:
     inlines_list = []
-
+    datasets_list = []
     data = {
         "nav_global": context.get("nav_global"),
         "actions_detail": context.get("actions_detail"),
@@ -85,6 +85,13 @@ def tab_list(context: RequestContext, page: str, opts: Optional[Options] = None)
         if len(inlines_list) > 0:
             data["inlines_list"] = inlines_list
 
+        for dataset in context.get("datasets", []):
+            if dataset and hasattr(dataset, "tab"):
+                datasets_list.append(dataset)
+
+        if len(datasets_list) > 0:
+            data["datasets_list"] = datasets_list
+
     return render_to_string(
         "unfold/helpers/tab_list.html",
         request=context["request"],
@@ -150,7 +157,7 @@ class CaptureNode(Node):
         self.varname = varname
         self.silent = silent
 
-    def render(self, context: dict[str, Any]) -> Union[str, SafeText]:
+    def render(self, context: dict[str, Any]) -> str | SafeText:
         output = self.nodelist.render(context)
         context[self.varname] = output
         if self.silent:
@@ -219,7 +226,7 @@ class RenderComponentNode(template.Node):
         self,
         template_name: str,
         nodelist: NodeList,
-        extra_context: Optional[dict] = None,
+        extra_context: dict | None = None,
         include_context: bool = False,
         *args,
         **kwargs,
@@ -308,7 +315,7 @@ def do_component(parser: Parser, token: Token) -> str:
 
 
 @register.filter
-def add_css_class(field: Field, classes: Union[list, tuple]) -> Field:
+def add_css_class(field: Field, classes: list | tuple) -> Field:
     if type(classes) in (list, tuple):
         classes = " ".join(classes)
 
@@ -329,8 +336,8 @@ def preserve_changelist_filters(context: Context) -> dict[str, dict[str, str]]:
     """
     Generate hidden input fields to preserve filters for POST forms.
     """
-    request: Optional[HttpRequest] = context.get("request")
-    changelist: Optional[ChangeList] = context.get("cl")
+    request: HttpRequest | None = context.get("request")
+    changelist: ChangeList | None = context.get("cl")
 
     if not request or not changelist:
         return {"params": {}}
@@ -348,7 +355,7 @@ def preserve_changelist_filters(context: Context) -> dict[str, dict[str, str]]:
 @register.simple_tag(takes_context=True)
 def element_classes(context: Context, key: str) -> str:
     if key in context.get("element_classes", {}):
-        if isinstance(context["element_classes"][key], (list, tuple)):
+        if isinstance(context["element_classes"][key], list | tuple):
             return " ".join(context["element_classes"][key])
 
         return context["element_classes"][key]
@@ -585,9 +592,7 @@ def infinite_paginator_url(cl, i):
 
 
 @register.simple_tag
-def elided_page_range(
-    paginator: Paginator, number: int
-) -> Optional[list[Union[int, str]]]:
+def elided_page_range(paginator: Paginator, number: int) -> list[int | str] | None:
     if not paginator or not number:
         return None