IBX-11413: Use design-system dropdown component

composer.json

@@ -27,6 +27,7 @@
         "ibexa/content-forms": "~6.0.x-dev",
         "ibexa/core": "~6.0.x-dev",
         "ibexa/design-engine": "~6.0.x-dev",
+        "ibexa/design-system-twig": "~6.0.x-dev",
         "ibexa/rest": "~6.0.x-dev",
         "ibexa/search": "~6.0.x-dev",
         "ibexa/twig-components": "~6.0.x-dev",
@@ -97,5 +98,11 @@
         "branch-alias": {
             "dev-main": "6.0.x-dev"
         }
-    }
+    },
+    "repositories": [
+        {
+            "type": "vcs",
+            "url": "https://github.com/ibexa/design-system-twig"
+        }
+    ]
 }

src/bundle/Resources/encore/ibexa.css.config.js

@@ -5,6 +5,7 @@ module.exports = (Encore) => {
         path.resolve(__dirname, '../public/scss/ibexa-bootstrap.scss'),
         path.resolve(__dirname, '../public/scss/ibexa.scss'),
         path.resolve(__dirname, '../public/scss/ui/ibexa-modules.scss'),
+        path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/ids-assets/dist/css/styles.css'),
         path.resolve('./vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/flatpickr.min.css'),
         path.resolve(
             './vendor/ibexa/admin-ui-assets/src/bundle/Resources/public/vendors/flatpickr/dist/plugins/confirmDate/confirmDate.css',

src/bundle/Resources/encore/ibexa.js.config.js

@@ -7,6 +7,10 @@ const layout = [
     path.resolve(__dirname, '../public/js/scripts/admin.format.date.js'),
     path.resolve(__dirname, '../public/js/scripts/core/draggable.js'),
     path.resolve(__dirname, '../public/js/scripts/core/dropdown.js'),
+    path.resolve(
+        __dirname,
+        '../../../../../design-system-twig/src/bundle/Resources/public/ts/init_components.ts',
+    ),
     path.resolve(__dirname, '../public/js/scripts/core/backdrop.js'),
     path.resolve(__dirname, '../public/js/scripts/core/custom.tooltip.js'),
     path.resolve(__dirname, '../public/js/scripts/core/base.chart.js'),

src/bundle/Resources/public/js/scripts/admin.contenttype.edit.js

@@ -1,3 +1,5 @@
+import { DropdownMultiInput, DropdownSingleInput } from '../../../../../../../design-system-twig/src/bundle/Resources/public/ts/components/dropdown';
+
 (function (global, doc, ibexa, Routing, Translator, bootstrap) {
     const SELECTOR_INPUTS_TO_VALIDATE = '.ibexa-input[required]:not([disabled]):not([hidden])';
     const SELETOR_FIELD_INPUTS =
@@ -102,6 +104,35 @@
         return fieldNode;
     };
     const attachFieldDefinitionNodeEvents = (fieldNode, { targetContainer }) => {
+        const initDropdown = (dropdownContainer) => {
+            const dropdownAlreadyInitialized = !!ibexa.helpers.objectInstances.getInstance(dropdownContainer);
+
+            if (dropdownAlreadyInitialized) {
+                return;
+            }
+
+            if (dropdownContainer.classList.contains('ids-dropdown--multi')) {
+                const dropdown = new DropdownMultiInput(dropdownContainer);
+
+                dropdown.init();
+
+                return;
+            }
+
+            if (dropdownContainer.classList.contains('ids-dropdown--single')) {
+                const dropdown = new DropdownSingleInput(dropdownContainer);
+
+                dropdown.init();
+
+                return;
+            }
+
+            const dropdown = new ibexa.core.Dropdown({
+                container: dropdownContainer,
+            });
+
+            dropdown.init();
+        };
         const fieldGroupInput = fieldNode.querySelector('.ibexa-input--field-group');
         const fieldDefinitionsInputs = fieldNode.querySelectorAll(SELETOR_FIELD_INPUTS);
         const removeFieldBtns = fieldNode.querySelectorAll('.ibexa-collapse__extra-action-button--remove-field-definitions');
@@ -122,20 +153,10 @@
             });
         }
 
-        const dropdowns = fieldNode.querySelectorAll('.ibexa-dropdown');
+        const dropdowns = fieldNode.querySelectorAll('.ibexa-dropdown, .ids-dropdown');
 
         dropdowns.forEach((dropdownContainer) => {
-            const dropdownAlreadyInitialized = !!ibexa.helpers.objectInstances.getInstance(dropdownContainer);
-
-            if (dropdownAlreadyInitialized) {
-                return;
-            }
-
-            const dropdown = new ibexa.core.Dropdown({
-                container: dropdownContainer,
-            });
-
-            dropdown.init();
+            initDropdown(dropdownContainer);
         });
 
         draggableGroups.forEach((group) => {

src/bundle/Resources/public/js/scripts/admin.location.add.custom_url.js

@@ -18,11 +18,21 @@
         };
         const toggleSiteAccessSelect = (event) => {
             const isChecked = event.target.checked;
-            const siteAccessSelect = modal.querySelector('.ibexa-custom-url-from__item--siteacces .ibexa-dropdown');
+            const siteAccessSelect = modal.querySelector('.ibexa-custom-url-from__item--siteacces .ibexa-dropdown, .ibexa-custom-url-from__item--siteacces .ids-dropdown');
+            const sourceSelect = siteAccessSelect?.querySelector('.ibexa-input--select, .ids-dropdown__source select');
 
-            siteAccessSelect.classList.toggle('ibexa-dropdown--is-disabled', isChecked);
+            if (siteAccessSelect?.classList.contains('ibexa-dropdown')) {
+                siteAccessSelect.classList.toggle('ibexa-dropdown--disabled', isChecked);
+            } else if (siteAccessSelect?.classList.contains('ids-dropdown')) {
+                siteAccessSelect.classList.toggle('ids-dropdown--disabled', isChecked);
+            }
+
+            if (sourceSelect) {
+                sourceSelect.disabled = isChecked;
+            }
         };
 
+        toggleSiteAccessSelect({ target: siteRootCheckbox });
         input.addEventListener('input', toggleButtonState, false);
         siteRootCheckbox.addEventListener('change', toggleSiteAccessSelect, false);
         discardBtns.forEach((btn) => btn.addEventListener('click', clearValues, false));

src/bundle/Resources/public/js/scripts/admin.notifications.filters.js

@@ -12,7 +12,9 @@
             return;
         }
 
-        const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select');
+        const sourceSelect = filterNode.querySelector(
+            '.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select, .ibexa-list-filters__item-content .ids-dropdown__source select',
+        );
         const checkboxes = filterNode.querySelectorAll(
             '.ibexa-list-filters__item-content .ibexa-input--checkbox:not([name="dropdown-checkbox"])',
         );
@@ -57,7 +59,9 @@
             return;
         }
 
-        const sourceSelect = filterNode.querySelector('.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select');
+        const sourceSelect = filterNode.querySelector(
+            '.ibexa-list-filters__item-content .ibexa-dropdown__source .ibexa-input--select, .ibexa-list-filters__item-content .ids-dropdown__source select',
+        );
 
         sourceSelect?.addEventListener('change', filterChange, false);
     };
@@ -79,7 +83,7 @@
             return;
         }
 
-        const select = filterNode.querySelector('.ibexa-dropdown__source .ibexa-input--select');
+        const select = filterNode.querySelector('.ibexa-dropdown__source .ibexa-input--select, .ids-dropdown__source select');
         const checkedCheckboxes = filterNode.querySelectorAll('.ibexa-input--checkbox:checked');
 
         if (isNodeDatePicker(filterNode)) {

src/bundle/Resources/public/js/scripts/admin.search.filters.js

@@ -10,9 +10,16 @@
     const clearBtn = filters.querySelector('.ibexa-btn--clear');
     const applyBtn = filters.querySelector('.ibexa-btn--apply');
     const contentTypeSelect = doc.querySelector('.ibexa-filters__item--content-type .ibexa-filters__select');
-    const sectionSelect = doc.querySelector('.ibexa-filters__item--section .ibexa-filters__select');
-    const lastModifiedSelectNode = doc.querySelector('.ibexa-filters__item--modified .ibexa-filters__select');
-    const lastModifiedSelect = getInstance(lastModifiedSelectNode);
+    const sectionSelect = filters.querySelector(
+        '.ibexa-filters__item--section .ibexa-input--select, .ibexa-filters__item--section .ids-dropdown__source select',
+    );
+    const lastModifiedDropdownNode = filters.querySelector(
+        '.ibexa-filters__item--modified .ibexa-dropdown, .ibexa-filters__item--modified .ids-dropdown',
+    );
+    const lastModifiedSelectNode = filters.querySelector(
+        '.ibexa-filters__item--modified .ibexa-input--select, .ibexa-filters__item--modified .ids-dropdown__source select',
+    );
+    const lastModifiedSelect = getInstance(lastModifiedDropdownNode);
     const lastModifiedDateRangeNode = doc.querySelector('.ibexa-filters__item--modified .ibexa-date-time-range-single');
     const lastModifiedDateRange = getInstance(lastModifiedDateRangeNode);
     const {
@@ -23,8 +30,13 @@
     const lastModifiedPeriod = doc.querySelector(lastModifiedPeriodSelector);
     const lastModifiedStartDate = doc.querySelector(lastModifiedStartSelector);
     const lastModifiedEndDate = doc.querySelector(lastModifiedEndSelector);
-    const lastCreatedSelectNode = doc.querySelector('.ibexa-filters__item--created .ibexa-filters__select');
-    const lastCreatedSelect = getInstance(lastCreatedSelectNode);
+    const lastCreatedDropdownNode = filters.querySelector(
+        '.ibexa-filters__item--created .ibexa-dropdown, .ibexa-filters__item--created .ids-dropdown',
+    );
+    const lastCreatedSelectNode = filters.querySelector(
+        '.ibexa-filters__item--created .ibexa-input--select, .ibexa-filters__item--created .ids-dropdown__source select',
+    );
+    const lastCreatedSelect = getInstance(lastCreatedDropdownNode);
     const lastCreatedDateRangeNode = doc.querySelector('.ibexa-filters__item--created .ibexa-date-time-range-single');
     const lastCreatedDateRange = getInstance(lastCreatedDateRangeNode);
     const {
@@ -63,9 +75,8 @@
             sectionSelect[0].selected = true;
         }
 
-        lastModifiedSelectNode[0].selected = true;
-        lastCreatedSelectNode[0].selected = true;
-        lastModifiedSelectNode.querySelector('option').selected = true;
+        lastModifiedSelect.selectFirstOption();
+        lastCreatedSelect.selectFirstOption();
         lastModifiedPeriod.value = '';
         lastModifiedEnd.value = '';
         lastCreatedPeriod.value = '';
@@ -240,7 +251,10 @@
         removeSearchTag(event);
     };
     const clearSection = (event) => {
-        sectionSelect[0].selected = true;
+        if (sectionSelect) {
+            sectionSelect[0].selected = true;
+        }
+
         removeSearchTag(event);
     };
     const clearSubtree = (event) => {

src/bundle/Resources/public/js/scripts/filters.action.btns.js

@@ -4,7 +4,7 @@
     containers.forEach((container) => {
         const clearBtn = container.querySelector('.ibexa-adaptive-filters__clear-btn');
         const applyBtn = container.querySelector('.ibexa-adaptive-filters__submit-btn');
-        const dropdownNodes = [...container.querySelectorAll('.ibexa-dropdown')];
+        const dropdownNodes = [...container.querySelectorAll('.ibexa-dropdown, .ids-dropdown')];
         const textInputNodes = [...container.querySelectorAll('.ibexa-input--text')];
         const dateInputNodes = [...container.querySelectorAll('.ibexa-input--date')];
         const originalValuesMap = new Map();
@@ -40,8 +40,8 @@
             return (
                 textInputNodes.every((textInputNode) => textInputNode.disabled || textInputNode.value === '') &&
                 dropdownNodes.every((dropdownNode) => {
-                    const isDisabled = dropdownNode.classList.contains('ibexa-dropdown--disabled');
-                    const selectNode = dropdownNode.querySelector('.ibexa-input--select');
+                    const isDisabled = dropdownNode.classList.contains('ibexa-dropdown--disabled') || dropdownNode.classList.contains('ids-dropdown--disabled');
+                    const selectNode = dropdownNode.querySelector('.ibexa-input--select, .ids-dropdown__source select');
                     const dropdown = dropdownNode.ibexaInstance;
 
                     return isDisabled || (dropdown.canSelectOnlyOne ? selectNode.selectedIndex === 0 : selectNode.selectedIndex === -1);
@@ -78,7 +78,7 @@
                 }
             });
             dropdownNodes.forEach((dropdownNode) => {
-                const isDisabled = dropdownNode.classList.contains('ibexa-dropdown--disabled');
+                const isDisabled = dropdownNode.classList.contains('ibexa-dropdown--disabled') || dropdownNode.classList.contains('ids-dropdown--disabled');
 
                 if (!isDisabled) {
                     const dropdown = dropdownNode.ibexaInstance;
@@ -135,7 +135,7 @@
         }
 
         dropdownNodes.forEach((dropdownNode) => {
-            const select = dropdownNode.querySelector('.ibexa-input--select');
+            const select = dropdownNode.querySelector('.ibexa-input--select, .ids-dropdown__source select');
 
             select.addEventListener('change', handleInputChange, false);
         });

src/bundle/Resources/public/js/scripts/helpers/icon.helper.js

@@ -1,9 +1,9 @@
 import { getAdminUiConfig } from './context.helper';
 
-const getIconPath = (aliasPath, iconSet) => {
+const getIconPath = (iconName, iconSet, useLegacyNames = true) => {
     const adminUiConfig = getAdminUiConfig();
     const { defaultIconSet, iconSets, iconAliases } = adminUiConfig.iconPaths;
-    const path = iconAliases[aliasPath] || aliasPath;
+    const path = useLegacyNames ? iconAliases[iconName] || iconName : iconName;
 
     if (!iconSet) {
         iconSet = defaultIconSet;

src/bundle/Resources/public/js/scripts/sidebar/extra.actions.js

@@ -36,7 +36,7 @@ import { getInstance } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scri
 
                 node.checked = value;
             } else if (node.tagName === 'SELECT') {
-                const dropdownContainer = node.closest('.ibexa-dropdown');
+                const dropdownContainer = node.closest('.ibexa-dropdown, .ids-dropdown');
 
                 if (dropdownContainer) {
                     const dropdownInstance = getInstance(dropdownContainer);

src/bundle/Resources/public/scss/_dropdown.scss

@@ -561,6 +561,14 @@
     }
 }
 
+.ids-dropdown {
+    &__selection-info,
+    &__selection-info-items,
+    .ids-overflow-list {
+        min-width: 0;
+    }
+}
+
 .form-inline {
     .ibexa-dropdown {
         margin: calculateRem(5px) calculateRem(8px);

src/bundle/Resources/views/themes/admin/content/tab/content.html.twig

@@ -36,12 +36,12 @@
                 </select>
             {% endset %}
 
-            {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with {
+            {% include '@ibexadesign/ui/component/dropdown/dropdown_ds.html.twig' with {
                 source: source,
                 choices: choices,
                 value: value,
                 is_small: true,
-            } %}
+            } only %}
         </form>
     {% endif %}
 {% endblock %}

src/bundle/Resources/views/themes/admin/content_type/tab/view.html.twig

@@ -79,12 +79,12 @@
                 </select>
             {% endset %}
 
-            {% include '@ibexadesign/ui/component/dropdown/dropdown.html.twig' with {
+            {% include '@ibexadesign/ui/component/dropdown/dropdown_ds.html.twig' with {
                 source: source,
                 choices: choices,
                 value: value,
                 is_small: true,
-            } %}
+            } only %}
         </form>
     {% endif %}
 {% endset %}