fomantic-ui 2.10.0-beta.1 → 2.10.0-beta.10

package/src/definitions/modules/dropdown.less

@@ -439,18 +439,6 @@ select.ui.dropdown {
         opacity: @selectionIconOpacity;
         transition: @selectionIconTransition;
     }
-    & when (@variationDropdownCompact) {
-        /* Compact */
-        .ui.compact.selection.dropdown {
-            min-width: 0;
-            & > .menu {
-                width: auto;
-                &:not(.multiline) {
-                    width: max-content;
-                }
-            }
-        }
-    }
 
     /* Selection Menu */
     .ui.selection.dropdown@{notUnlimited} .menu {
@@ -628,14 +616,20 @@ select.ui.dropdown {
         .ui.ui.selection.dropdown@{notInverted}:has(> input:focus) {
             border-color: @selectionFocusBorderColor;
             box-shadow: none;
-            & > i.icon {
-                opacity: @selectionIconFocusOpacity;
+        }
+
+        .ui.ui.selection.dropdown {
+            &:focus,
+            &:has(> input:focus) {
+                & > i.icon:not(.remove) {
+                    opacity: @selectionIconFocusOpacity;
+                }
+                & > i.icon.remove:not(:hover) {
+                    opacity: @actionIconFocusOpacity;
+                }
             }
         }
     }
-    .ui.ui.selection.dropdown:focus > i.icon {
-        opacity: @selectionIconFocusOpacity;
-    }
 
     /* Visible */
     .ui.selection.visible.dropdown > .text:not(.default) {
@@ -712,7 +706,21 @@ select.ui.dropdown {
         }
     }
 }
-
+& when (@variationDropdownCompact) {
+    /* Compact */
+    .ui.compact.dropdown {
+        min-width: 0;
+        & > .menu {
+            width: auto;
+            &:not(.multiline) {
+                width: max-content;
+            }
+        }
+        & .menu > .item {
+            white-space: normal;
+        }
+    }
+}
 & when (@variationDropdownSearch) {
     /* --------------
        Searchable
@@ -1395,15 +1403,6 @@ select.ui.dropdown {
     .ui.dropdown > .visible.menu .scrolling.menu {
         display: block;
     }
-    & when (@supportIE) {
-        /* Scrollbar in IE */
-        @media all and (-ms-high-contrast: none) {
-            .ui.scrolling.dropdown .menu,
-            .ui.dropdown .scrolling.menu {
-                min-width: e(%("calc(100%% - %d)", @scrollbarWidth));
-            }
-        }
-    }
     @media only screen and (max-width: @largestMobileScreen) {
         .ui.scrolling.dropdown .menu,
         .ui.dropdown .scrolling.menu {
@@ -1519,12 +1518,6 @@ select.ui.dropdown {
     }
     .ui.simple.dropdown .menu {
         position: absolute;
-        & when (@supportIE) {
-            /* IE hack to make dropdown icons appear inline */
-            // stylelint-disable-next-line value-no-vendor-prefix
-            display: -ms-inline-flexbox !important;
-        }
-
         display: block;
         overflow: hidden;
         top: -9999px;
@@ -1814,15 +1807,15 @@ select.ui.dropdown {
     }
 
     /* Upward pointing */
-    .ui.pointing.upward.dropdown .menu,
-    .ui.top.pointing.upward.dropdown .menu {
+    .ui.pointing.upward.dropdown > .menu,
+    .ui.top.pointing.upward.dropdown > .menu {
         top: auto !important;
         bottom: 100% !important;
         margin: 0 0 @pointingMenuDistance;
         border-radius: @pointingUpwardMenuBorderRadius;
     }
-    .ui.pointing.upward.dropdown .menu::after,
-    .ui.top.pointing.upward.dropdown .menu::after {
+    .ui.pointing.upward.dropdown > .menu::after,
+    .ui.top.pointing.upward.dropdown > .menu::after {
         top: 100% !important;
         bottom: auto !important;
         box-shadow: @pointingUpwardArrowBoxShadow;
@@ -2075,16 +2068,7 @@ select.ui.dropdown {
         .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover {
             background: @thumbInvertedHoverBackground;
         }
-        & when (@supportIE) {
-            .ui.dropdown .inverted.menu,
-            .ui.inverted.dropdown .menu {
-                /* IE11 */
-                scrollbar-face-color: @thumbInvertedBackgroundHex;
-                scrollbar-shadow-color: @thumbInvertedBackgroundHex;
-                scrollbar-track-color: @trackInvertedBackgroundHex;
-                scrollbar-arrow-color: @trackInvertedBackgroundHex;
-            }
-        }
+
         @supports (-moz-appearance: none) {
             .ui.dropdown .inverted.menu,
             .ui.inverted.dropdown .menu {

package/src/definitions/modules/embed.js

@@ -20,45 +20,41 @@
         : globalThis;
 
     $.fn.embed = function (parameters) {
-        var
-            $allModules     = $(this),
+        let $allModules = $(this);
 
-            time            = Date.now(),
-            performance     = [],
+        let time = Date.now();
+        let performance = [];
 
-            query           = arguments[0],
-            methodInvoked   = typeof query === 'string',
-            queryArguments  = [].slice.call(arguments, 1),
+        let query = arguments[0];
+        let methodInvoked = typeof query === 'string';
+        let queryArguments = [].slice.call(arguments, 1);
 
-            returnedValue
-        ;
+        let returnedValue;
 
         $allModules.each(function () {
-            var
-                settings        = $.isPlainObject(parameters)
-                    ? $.extend(true, {}, $.fn.embed.settings, parameters)
-                    : $.extend({}, $.fn.embed.settings),
-
-                selector        = settings.selector,
-                className       = settings.className,
-                sources         = settings.sources,
-                error           = settings.error,
-                metadata        = settings.metadata,
-                namespace       = settings.namespace,
-                templates       = settings.templates,
-
-                eventNamespace  = '.' + namespace,
-                moduleNamespace = 'module-' + namespace,
-
-                $module         = $(this),
-                $placeholder    = $module.find(selector.placeholder),
-                $icon           = $module.find(selector.icon),
-                $embed          = $module.find(selector.embed),
-
-                element         = this,
-                instance        = $module.data(moduleNamespace),
-                module
-            ;
+            let settings = $.isPlainObject(parameters)
+                ? $.extend(true, {}, $.fn.embed.settings, parameters)
+                : $.extend({}, $.fn.embed.settings);
+
+            let selector = settings.selector;
+            let className = settings.className;
+            let sources = settings.sources;
+            let error = settings.error;
+            let metadata = settings.metadata;
+            let namespace = settings.namespace;
+            let templates = settings.templates;
+
+            let eventNamespace = '.' + namespace;
+            let moduleNamespace = 'module-' + namespace;
+
+            let $module = $(this);
+            let $placeholder = $module.find(selector.placeholder);
+            let $icon = $module.find(selector.icon);
+            let $embed = $module.find(selector.embed);
+
+            let element = this;
+            let instance = $module.data(moduleNamespace);
+            let module;
 
             module = {
 
@@ -74,8 +70,7 @@
                     module.verbose('Storing instance of module', module);
                     instance = module;
                     $module
-                        .data(moduleNamespace, module)
-                    ;
+                        .data(moduleNamespace, module);
                 },
 
                 destroy: function () {
@@ -83,8 +78,7 @@
                     module.reset();
                     $module
                         .removeData(moduleNamespace)
-                        .off(eventNamespace)
-                    ;
+                        .off(eventNamespace);
                 },
 
                 refresh: function () {
@@ -100,16 +94,13 @@
                             module.debug('Adding placeholder events');
                             $module
                                 .on('click' + eventNamespace, selector.placeholder, module.createAndShow)
-                                .on('click' + eventNamespace, selector.icon, module.createAndShow)
-                            ;
+                                .on('click' + eventNamespace, selector.icon, module.createAndShow);
                         }
                     },
                 },
 
                 create: function () {
-                    var
-                        placeholder = module.get.placeholder()
-                    ;
+                    let placeholder = module.get.placeholder();
                     if (placeholder) {
                         module.createPlaceholder();
                     } else {
@@ -118,10 +109,8 @@
                 },
 
                 createPlaceholder: function (placeholder) {
-                    var
-                        icon  = module.get.icon(),
-                        alt   = module.get.alt()
-                    ;
+                    let icon = module.get.icon();
+                    let alt = module.get.alt();
                     placeholder = placeholder || module.get.placeholder();
                     $module.html(templates.placeholder(placeholder, icon, alt));
                     module.debug('Creating placeholder for embed', placeholder, icon, alt);
@@ -133,16 +122,14 @@
                     $embed = $('<div/>')
                         .addClass(className.embed)
                         .html(module.generate.embed(url))
-                        .appendTo($module)
-                    ;
+                        .appendTo($module);
                     settings.onCreate.call(element, url);
                     module.debug('Creating embed object', $embed);
                 },
 
                 changeEmbed: function (url) {
                     $embed
-                        .html(module.generate.embed(url))
-                    ;
+                        .html(module.generate.embed(url));
                 },
 
                 createAndShow: function () {
@@ -155,8 +142,7 @@
                     module.debug('Changing video to ', source, id, url);
                     $module
                         .data(metadata.source, source)
-                        .data(metadata.id, id)
-                    ;
+                        .data(metadata.id, id);
                     if (url) {
                         $module.data(metadata.url, url);
                     } else {
@@ -169,7 +155,7 @@
                     }
                 },
 
-                // clears embed
+                // clear embed
                 reset: function () {
                     module.debug('Clearing embed and showing placeholder');
                     module.remove.data();
@@ -218,7 +204,7 @@
                             : module.determine.source());
                     },
                     type: function () {
-                        var source = module.get.source();
+                        let source = module.get.source();
 
                         return sources[source] !== undefined
                             ? sources[source].type
@@ -238,9 +224,7 @@
                         }
                     },
                     source: function (url) {
-                        var
-                            matchedSource = false
-                        ;
+                        let matchedSource = false;
                         url = url || module.get.url();
                         if (url) {
                             $.each(sources, function (name, source) {
@@ -255,20 +239,16 @@
                         return matchedSource;
                     },
                     icon: function () {
-                        var
-                            source = module.get.source()
-                        ;
+                        let source = module.get.source();
 
                         return sources[source] !== undefined
                             ? sources[source].icon
                             : false;
                     },
                     url: function () {
-                        var
-                            id     = settings.id || $module.data(metadata.id),
-                            source = settings.source || $module.data(metadata.source),
-                            url
-                        ;
+                        let id = settings.id || $module.data(metadata.id);
+                        let source = settings.source || $module.data(metadata.source);
+                        let url;
                         url = sources[source] !== undefined
                             ? sources[source].url.replace('{id}', id)
                             : false;
@@ -294,8 +274,7 @@
                             .removeData(metadata.placeholder)
                             .removeData(metadata.alt)
                             .removeData(metadata.source)
-                            .removeData(metadata.url)
-                        ;
+                            .removeData(metadata.url);
                     },
                     active: function () {
                         $module.removeClass(className.active);
@@ -307,10 +286,8 @@
 
                 encode: {
                     parameters: function (parameters) {
-                        var
-                            urlString = [],
-                            index
-                        ;
+                        let urlString = [];
+                        let index;
                         for (index in parameters) {
                             urlString.push(encodeURIComponent(index) + '=' + encodeURIComponent(parameters[index]));
                         }
@@ -322,11 +299,9 @@
                 generate: {
                     embed: function (url) {
                         module.debug('Generating embed html');
-                        var
-                            source = module.get.source(),
-                            html,
-                            parameters
-                        ;
+                        let source = module.get.source();
+                        let html;
+                        let parameters;
                         url = module.get.url(url);
                         if (url) {
                             parameters = module.generate.parameters(source);
@@ -338,11 +313,9 @@
                         return html;
                     },
                     parameters: function (source, extraParameters) {
-                        var
-                            parameters = sources[source] && sources[source].parameters !== undefined
-                                ? sources[source].parameters(settings)
-                                : {}
-                        ;
+                        let parameters = sources[source] && sources[source].parameters !== undefined
+                            ? sources[source].parameters(settings)
+                            : {};
                         extraParameters = extraParameters || settings.parameters;
                         if (extraParameters) {
                             parameters = $.extend({}, parameters, extraParameters);
@@ -427,11 +400,9 @@
                 },
                 performance: {
                     log: function (message) {
-                        var
-                            currentTime,
-                            executionTime,
-                            previousTime
-                        ;
+                        let currentTime;
+                        let executionTime;
+                        let previousTime;
                         if (settings.performance) {
                             currentTime = Date.now();
                             previousTime = time || currentTime;
@@ -450,10 +421,8 @@
                         }, 500);
                     },
                     display: function () {
-                        var
-                            title = settings.name + ':',
-                            totalTime = 0
-                        ;
+                        let title = settings.name + ':';
+                        let totalTime = 0;
                         time = false;
                         clearTimeout(module.performance.timer);
                         $.each(performance, function (index, data) {
@@ -478,22 +447,19 @@
                     },
                 },
                 invoke: function (query, passedArguments, context) {
-                    var
-                        object = instance,
-                        maxDepth,
-                        found,
-                        response
-                    ;
+                    let object = instance;
+                    let maxDepth;
+                    let found;
+                    let response;
                     passedArguments = passedArguments || queryArguments;
                     context = context || element;
                     if (typeof query === 'string' && object !== undefined) {
                         query = query.split(/[ .]/);
                         maxDepth = query.length - 1;
                         $.each(query, function (depth, value) {
-                            var camelCaseValue = depth !== maxDepth
+                            let camelCaseValue = depth !== maxDepth
                                 ? value + query[depth + 1].charAt(0).toUpperCase() + query[depth + 1].slice(1)
-                                : query
-                            ;
+                                : query;
                             if ($.isPlainObject(object[camelCaseValue]) && (depth !== maxDepth)) {
                                 object = object[camelCaseValue];
                             } else if (object[camelCaseValue] !== undefined) {
@@ -645,33 +611,38 @@
         },
 
         templates: {
-            deQuote: function (string, encode) {
-                return String(string).replace(/"/g, encode ? '&quot;' : '');
+            escape: function (string) {
+                const badChars = /["'<>]|&(?![\d#A-Za-z]{1,12};)/g;
+                const escape = {
+                    '"': '&quot;',
+                    '&': '&amp;',
+                    "'": '&apos;',
+                    '<': '&lt;',
+                    '>': '&gt;',
+                };
+
+                return String(string).replace(badChars, (chr) => escape[chr]);
             },
             iframe: function (url, parameters) {
-                var
-                    src = url,
-                    deQuote = $.fn.embed.settings.templates.deQuote
-                ;
+                let src = url;
+                let escape = $.fn.embed.settings.templates.escape;
                 if (parameters) {
                     src += '?' + parameters;
                 }
 
                 return ''
-                    + '<iframe src="' + deQuote(src) + '"'
+                    + '<iframe src="' + escape(src) + '"'
                     + ' width="100%" height="100%"'
                     + ' msallowFullScreen allowFullScreen></iframe>';
             },
             placeholder: function (image, icon, alt) {
-                var
-                    html = '',
-                    deQuote = $.fn.embed.settings.templates.deQuote
-                ;
+                let html = '';
+                let escape = $.fn.embed.settings.templates.escape;
                 if (icon) {
-                    html += '<i class="' + deQuote(icon) + ' icon"></i>';
+                    html += '<i class="' + escape(icon) + ' icon"></i>';
                 }
                 if (image) {
-                    html += '<img class="placeholder" src="' + deQuote(image) + (alt ? '" alt="' + deQuote(alt) : '') + '">';
+                    html += '<img class="placeholder" src="' + escape(image) + '"' + (alt ? ' alt="' + escape(alt) + '"' : '') + '>';
                 }
 
                 return html;