fomantic-ui 2.9.3-beta.2 → 2.9.3-beta.21

package/src/definitions/modules/dropdown.js

@@ -102,7 +102,8 @@
                 selectObserver,
                 menuObserver,
                 classObserver,
-                module
+                module,
+                tempDisableApiCache = false
             ;
 
             module = {
@@ -869,11 +870,12 @@
                     if (!$module.api('get request')) {
                         module.setup.api();
                     }
-                    apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings, apiCallbacks);
+                    apiSettings = $.extend(true, {}, apiSettings, settings.apiSettings, apiCallbacks, tempDisableApiCache ? { cache: false } : {});
                     $module
                         .api('setting', apiSettings)
                         .api('query')
                     ;
+                    tempDisableApiCache = false;
                 },
 
                 filterItems: function (query) {
@@ -1405,11 +1407,13 @@
                                     if (settings.allowAdditions) {
                                         module.remove.userAddition();
                                     }
-                                    module.remove.filteredItem();
+                                    if (!settings.keepSearchTerm) {
+                                        module.remove.filteredItem();
+                                        module.remove.searchTerm();
+                                    }
                                     if (!module.is.visible() && $target.length > 0) {
                                         module.show();
                                     }
-                                    module.remove.searchTerm();
                                     if (!module.is.focusedOnSearch() && skipRefocus !== true) {
                                         module.focusSearch(true);
                                     }
@@ -1595,7 +1599,9 @@
                                         module.verbose('Selecting item from keyboard shortcut', $selectedItem);
                                         module.event.item.click.call($selectedItem, event);
                                         if (module.is.searchSelection()) {
-                                            module.remove.searchTerm();
+                                            if (!settings.keepSearchTerm) {
+                                                module.remove.searchTerm();
+                                            }
                                             if (module.is.multiple()) {
                                                 $search.trigger('focus');
                                             }
@@ -1812,7 +1818,7 @@
                             ? value
                             : text;
                         if (module.can.activate($(element))) {
-                            module.set.selected(value, $(element));
+                            module.set.selected(value, $(element), false, settings.keepSearchTerm);
                             if (!module.is.multiple() && !(!settings.collapseOnActionable && $(element).hasClass(className.actionable))) {
                                 module.hideAndClear();
                             }
@@ -2399,6 +2405,11 @@
                     module.set.value('', null, null, preventChangeTrigger);
                 },
 
+                clearCache: function () {
+                    module.debug('Clearing API cache once');
+                    tempDisableApiCache = true;
+                },
+
                 scrollPage: function (direction, $selectedItem) {
                     var
                         $currentItem  = $selectedItem || module.get.selectedItem(),
@@ -2457,7 +2468,7 @@
                             valueIsSet       = searchValue !== ''
                         ;
                         if (isMultiple && hasSearchValue) {
-                            module.verbose('Adjusting input width', searchWidth, settings.glyphWidth);
+                            module.verbose('Adjusting input width', searchWidth);
                             $search.css('width', searchWidth + 'px');
                         }
                         if (hasSearchValue || (isSearchMultiple && valueIsSet)) {
@@ -2756,7 +2767,7 @@
                             return false;
                         }
                         module.debug('Setting selected menu item to', $selectedItem);
-                        if (module.is.multiple()) {
+                        if (module.is.multiple() && !keepSearchTerm) {
                             module.remove.searchWidth();
                         }
                         if (module.is.single()) {
@@ -3449,7 +3460,7 @@
                         return settings.apiSettings && module.can.useAPI();
                     },
                     noApiCache: function () {
-                        return settings.apiSettings && !settings.apiSettings.cache;
+                        return tempDisableApiCache || (settings.apiSettings && !settings.apiSettings.cache);
                     },
                     single: function () {
                         return !module.is.multiple();
@@ -3999,6 +4010,7 @@
         forceSelection: false, // force a choice on blur with search selection
 
         allowAdditions: false, // whether multiple select should allow user added values
+        keepSearchTerm: false, // whether the search value should be kept and menu stays filtered on item selection
         ignoreCase: false, // whether to consider case sensitivity when creating labels
         ignoreSearchCase: true, // whether to consider case sensitivity when filtering items
         hideAdditions: true, // whether or not to hide special message prompting a user they can enter a value
@@ -4018,8 +4030,6 @@
         duration: 200, // duration of transition
         displayType: false, // displayType of transition
 
-        glyphWidth: 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width
-
         headerDivider: true, // whether option headers should have an additional divider line underneath when converted from <select> <optgroup>
 
         collapseOnActionable: true, // whether the dropdown should collapse upon selection of an actionable item

package/src/definitions/modules/dropdown.less

@@ -816,7 +816,7 @@ select.ui.dropdown {
     .ui.dropdown:not(.selection) > .remove.icon ~ .dropdown.icon {
         margin-left: @clearableIconMargin;
     }
-    .ui.dropdown:not(.selection) > .remove.icon {
+    .ui.dropdown:not(.selection):not(.multiple) > .remove.icon {
         margin-top: -@clearableIconMarginTop;
     }
 }
@@ -879,6 +879,18 @@ select.ui.dropdown {
         margin: @imageLabelImageMargin;
         height: @imageLabelHeight;
     }
+    .ui.multiple.dropdown:not(.selection):not(.labeled) {
+        & > .dropdown.icon {
+            right: @dropdownIconMultipleRight;
+        }
+        & > .remove.icon {
+            margin-right: @dropdownIconMultipleRight;
+        }
+        &:not(.search) > .remove.icon ~ .text.default,
+        > .text.default:first-child {
+            overflow: inherit;
+        }
+    }
 
     & when (@variationDropdownSearch) {
         /* -----------------
@@ -919,6 +931,13 @@ select.ui.dropdown {
         .ui.multiple.search.dropdown.button {
             min-width: @selectionMinWidth;
         }
+        .ui.multiple.search.dropdown > span.sizer {
+            display: none;
+        }
+        .ui.multiple.search.dropdown:not(.selection) > .remove.icon + input.search,
+        .ui.multiple.search.dropdown:not(.selection) > input.search:first-child {
+            min-width: @multipleSearchMinWidth;
+        }
     }
 }
 
@@ -1309,8 +1328,8 @@ select.ui.dropdown {
         margin: 0 !important;
         border-top: @menuBorder;
     }
-    .ui.scrolling.dropdown .menu .item.item.item,
-    .ui.dropdown .scrolling.menu > .item.item.item {
+    .ui.ui.ui.scrolling.dropdown .menu .item,
+    .ui.ui.ui.dropdown .scrolling.menu > .item {
         border-top: @scrollingMenuItemBorder;
     }
     .ui.scrolling.dropdown .menu .item:first-child,
@@ -1335,24 +1354,55 @@ select.ui.dropdown {
         .ui.dropdown .scrolling.menu {
             max-height: @scrollingMobileMaxMenuHeight;
         }
+        & when (@variationDropdownResizable) {
+            .ui.scrolling.resizable.dropdown .menu,
+            .ui.dropdown .scrolling.resizable.menu {
+                height: @scrollingMobileMaxMenuHeight;
+            }
+        }
     }
     @media only screen and (min-width: @tabletBreakpoint) {
         .ui.scrolling.dropdown .menu,
         .ui.dropdown .scrolling.menu {
             max-height: @scrollingTabletMaxMenuHeight;
         }
+        & when (@variationDropdownResizable) {
+            .ui.scrolling.resizable.dropdown .menu,
+            .ui.dropdown .scrolling.resizable.menu {
+                height: @scrollingTabletMaxMenuHeight;
+            }
+        }
     }
     @media only screen and (min-width: @computerBreakpoint) {
         .ui.scrolling.dropdown .menu,
         .ui.dropdown .scrolling.menu {
             max-height: @scrollingComputerMaxMenuHeight;
         }
+        & when (@variationDropdownResizable) {
+            .ui.scrolling.resizable.dropdown .menu,
+            .ui.dropdown .scrolling.resizable.menu {
+                height: @scrollingComputerMaxMenuHeight;
+            }
+        }
     }
     @media only screen and (min-width: @widescreenMonitorBreakpoint) {
         .ui.scrolling.dropdown .menu,
         .ui.dropdown .scrolling.menu {
             max-height: @scrollingWidescreenMaxMenuHeight;
         }
+        & when (@variationDropdownResizable) {
+            .ui.scrolling.resizable.dropdown .menu,
+            .ui.dropdown .scrolling.resizable.menu {
+                height: @scrollingWidescreenMaxMenuHeight;
+            }
+        }
+    }
+    & when (@variationDropdownResizable) {
+        .ui.scrolling.resizable.dropdown .menu,
+        .ui.dropdown .scrolling.resizable.menu {
+            resize: @resizableDirection;
+            max-height: none;
+        }
     }
 }
 
@@ -1951,4 +2001,5 @@ select.ui.dropdown {
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/embed.less

@@ -155,4 +155,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/flyout.js

@@ -86,6 +86,7 @@
                 initialBodyMargin    = '',
                 tempBodyMargin       = '',
                 hadScrollbar         = false,
+                windowRefocused      = false,
 
                 elementNamespace,
                 id,
@@ -264,9 +265,13 @@
                         module.setup.heights();
                     },
                     focus: function () {
-                        if (module.is.visible() && settings.autofocus && settings.dimPage) {
+                        windowRefocused = true;
+                    },
+                    click: function (event) {
+                        if (windowRefocused && document.activeElement !== event.target && module.is.visible() && settings.autofocus && settings.dimPage && $(document.activeElement).closest(selector.flyout).length === 0) {
                             requestAnimationFrame(module.set.autofocus);
                         }
+                        windowRefocused = false;
                     },
                     clickaway: function (event) {
                         if (settings.closable) {
@@ -373,6 +378,9 @@
                         $window
                             .on('focus' + elementNamespace, module.event.focus)
                         ;
+                        $context
+                            .on('click' + elementNamespace, module.event.click)
+                        ;
                     },
                     clickaway: function () {
                         module.verbose('Adding clickaway events to context', $context);
@@ -502,11 +510,12 @@
 
                                     return nodes;
                                 },
-                                shouldRefreshInputs = false
+                                shouldRefreshInputs = false,
+                                ignoreAutofocus = true
                             ;
                             mutations.every(function (mutation) {
                                 if (mutation.type === 'attributes') {
-                                    if (observeAttributes && (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input').length > 0)) {
+                                    if (observeAttributes && (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input').filter(':visible').length > 0)) {
                                         shouldRefreshInputs = true;
                                     }
                                 } else {
@@ -516,6 +525,9 @@
                                         $removedInputs = $(collectNodes(mutation.removedNodes)).filter('a[href], [tabindex], :input');
                                     if ($addedInputs.length > 0 || $removedInputs.length > 0) {
                                         shouldRefreshInputs = true;
+                                        if ($addedInputs.filter(':input').length > 0 || $removedInputs.filter(':input').length > 0) {
+                                            ignoreAutofocus = false;
+                                        }
                                     }
                                 }
 
@@ -523,7 +535,7 @@
                             });
 
                             if (shouldRefreshInputs) {
-                                module.refreshInputs();
+                                module.refreshInputs(ignoreAutofocus);
                             }
                         });
                         observer.observe(element, {
@@ -548,7 +560,7 @@
                     $flyouts = $context.children(selector.flyout);
                 },
 
-                refreshInputs: function () {
+                refreshInputs: function (ignoreAutofocus) {
                     if ($inputs) {
                         $inputs
                             .off('keydown' + elementNamespace)
@@ -560,8 +572,8 @@
                     $inputs = $module.find('a[href], [tabindex], :input:enabled').filter(':visible').filter(function () {
                         return $(this).closest('.disabled').length === 0;
                     });
-                    if ($inputs.length === 0) {
-                        $inputs = $module;
+                    if ($inputs.filter(':input').length === 0) {
+                        $inputs = $module.add($inputs);
                         $module.attr('tabindex', -1);
                     } else {
                         $module.removeAttr('tabindex');
@@ -572,7 +584,7 @@
                     $inputs.last()
                         .on('keydown' + elementNamespace, module.event.inputKeyDown.last)
                     ;
-                    if (settings.autofocus && $inputs.filter(':focus').length === 0) {
+                    if (!ignoreAutofocus && settings.autofocus && $inputs.filter(':focus').length === 0) {
                         module.set.autofocus();
                     }
                 },
@@ -850,20 +862,14 @@
                         var
                             $autofocus = $inputs.filter('[autofocus]'),
                             $rawInputs = $inputs.filter(':input'),
-                            $input     = $autofocus.length > 0
-                                ? $autofocus.first()
+                            $input     = ($autofocus.length > 0
+                                ? $autofocus
                                 : ($rawInputs.length > 0
                                     ? $rawInputs
-                                    : $inputs.filter(':not(i.close)')
-                                ).first()
+                                    : $module)
+                            ).first()
                         ;
-                        // check if only the close icon is remaining
-                        if ($input.length === 0 && $inputs.length > 0) {
-                            $input = $inputs.first();
-                        }
-                        if ($input.length > 0) {
-                            $input.trigger('focus');
-                        }
+                        $input.trigger('focus');
                     },
                     dimmerStyles: function () {
                         if (settings.blurring) {

package/src/definitions/modules/flyout.less

@@ -645,4 +645,5 @@ body.pushable > .pusher {
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/modal.js

@@ -88,6 +88,7 @@
                 tempBodyMargin = '',
                 keepScrollingClass = false,
                 hadScrollbar = false,
+                windowRefocused = false,
 
                 elementEventNamespace,
                 id,
@@ -251,6 +252,7 @@
                         .off(eventNamespace)
                     ;
                     $window.off(elementEventNamespace);
+                    $context.off(elementEventNamespace);
                     $dimmer.off(elementEventNamespace);
                     $closeIcon.off(elementEventNamespace);
                     if ($inputs) {
@@ -272,11 +274,12 @@
                                     return nodes;
                                 },
                                 shouldRefresh = false,
-                                shouldRefreshInputs = false
+                                shouldRefreshInputs = false,
+                                ignoreAutofocus = true
                             ;
                             mutations.every(function (mutation) {
                                 if (mutation.type === 'attributes') {
-                                    if (observeAttributes && (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input').length > 0)) {
+                                    if (observeAttributes && (mutation.attributeName === 'disabled' || $(mutation.target).find(':input').addBack(':input').filter(':visible').length > 0)) {
                                         shouldRefreshInputs = true;
                                     }
                                 } else {
@@ -287,6 +290,9 @@
                                         $removedInputs = $(collectNodes(mutation.removedNodes)).filter('a[href], [tabindex], :input');
                                     if ($addedInputs.length > 0 || $removedInputs.length > 0) {
                                         shouldRefreshInputs = true;
+                                        if ($addedInputs.filter(':input').length > 0 || $removedInputs.filter(':input').length > 0) {
+                                            ignoreAutofocus = false;
+                                        }
                                     }
                                 }
 
@@ -298,7 +304,7 @@
                                 module.refresh();
                             }
                             if (shouldRefreshInputs) {
-                                module.refreshInputs();
+                                module.refreshInputs(ignoreAutofocus);
                             }
                         });
                         observer.observe(element, {
@@ -326,7 +332,7 @@
                     $allModals = $otherModals.add($module);
                 },
 
-                refreshInputs: function () {
+                refreshInputs: function (ignoreAutofocus) {
                     if ($inputs) {
                         $inputs
                             .off('keydown' + elementEventNamespace)
@@ -335,8 +341,8 @@
                     $inputs = $module.find('a[href], [tabindex], :input:enabled').filter(':visible').filter(function () {
                         return $(this).closest('.disabled').length === 0;
                     });
-                    if ($inputs.length === 0) {
-                        $inputs = $module;
+                    if ($inputs.filter(':input').length === 0) {
+                        $inputs = $module.add($inputs);
                         $module.attr('tabindex', -1);
                     } else {
                         $module.removeAttr('tabindex');
@@ -347,7 +353,7 @@
                     $inputs.last()
                         .on('keydown' + elementEventNamespace, module.event.inputKeyDown.last)
                     ;
-                    if (settings.autofocus && $inputs.filter(':focus').length === 0) {
+                    if (!ignoreAutofocus && settings.autofocus && $inputs.filter(':focus').length === 0) {
                         module.set.autofocus();
                     }
                 },
@@ -385,6 +391,9 @@
                             .on('resize' + elementEventNamespace, module.event.resize)
                             .on('focus' + elementEventNamespace, module.event.focus)
                         ;
+                        $context
+                            .on('click' + elementEventNamespace, module.event.click)
+                        ;
                     },
                     scrollLock: function () {
                         // touch events default to passive, due to changes in chrome to optimize mobile perf
@@ -542,9 +551,13 @@
                         }
                     },
                     focus: function () {
-                        if ($dimmable.dimmer('is active') && module.is.active() && settings.autofocus) {
+                        windowRefocused = true;
+                    },
+                    click: function (event) {
+                        if (windowRefocused && document.activeElement !== event.target && $dimmable.dimmer('is active') && module.is.active() && settings.autofocus && $(document.activeElement).closest(selector.modal).length === 0) {
                             requestAnimationFrame(module.set.autofocus);
                         }
+                        windowRefocused = false;
                     },
                 },
 
@@ -609,7 +622,7 @@
                             ignoreRepeatedEvents = false;
                             if (settings.allowMultiple) {
                                 if (module.others.active()) {
-                                    $otherModals.filter('.' + className.active).find(selector.dimmer).addClass('active');
+                                    $otherModals.filter('.' + className.active).find(selector.dimmer).removeClass('out').addClass('transition fade in active');
                                 }
 
                                 if (settings.detachable) {
@@ -681,6 +694,8 @@
                                     onStart: function () {
                                         if (!module.others.active() && !module.others.animating() && !keepDimmed) {
                                             module.hideDimmer();
+                                        } else if (settings.allowMultiple) {
+                                            (hideOthersToo ? $allModals : $previousModal).find(selector.dimmer).removeClass('in').addClass('out');
                                         }
                                         if (settings.keyboardShortcuts && !module.others.active()) {
                                             module.remove.keyboardShortcuts();
@@ -693,11 +708,7 @@
                                             $previousModal.addClass(className.front);
                                             $module.removeClass(className.front);
 
-                                            if (hideOthersToo) {
-                                                $allModals.find(selector.dimmer).removeClass('active');
-                                            } else {
-                                                $previousModal.find(selector.dimmer).removeClass('active');
-                                            }
+                                            (hideOthersToo ? $allModals : $previousModal).find(selector.dimmer).removeClass('active');
                                         }
                                         if (isFunction(settings.onHidden)) {
                                             settings.onHidden.call(element);
@@ -1054,20 +1065,14 @@
                         var
                             $autofocus = $inputs.filter('[autofocus]'),
                             $rawInputs = $inputs.filter(':input'),
-                            $input     = $autofocus.length > 0
-                                ? $autofocus.first()
+                            $input     = ($autofocus.length > 0
+                                ? $autofocus
                                 : ($rawInputs.length > 0
                                     ? $rawInputs
-                                    : $inputs.filter(':not(i.close)')
-                                ).first()
+                                    : $module)
+                            ).first()
                         ;
-                        // check if only the close icon is remaining
-                        if ($input.length === 0 && $inputs.length > 0) {
-                            $input = $inputs.first();
-                        }
-                        if ($input.length > 0) {
-                            $input.trigger('focus');
-                        }
+                        $input.trigger('focus');
                     },
                     bodyMargin: function () {
                         var position = module.can.leftBodyScrollbar() ? 'left' : 'right';

package/src/definitions/modules/modal.less

@@ -437,19 +437,22 @@
         overflow: hidden;
     }
     .scrolling.dimmable > .dimmer {
-        justify-content: flex-start;
+        justify-content: center;
         position: fixed;
     }
     .scrolling.dimmable:not(body) > .dimmer {
-        justify-content: center;
         position: absolute;
     }
     .scrolling.dimmable.dimmed > .dimmer {
         overflow: auto;
         overscroll-behavior: @overscrollBehavior;
     }
+    .modals.dimmer .ui.scrolling.modal.fullscreen {
+        top: 0;
+    }
     .modals.dimmer .ui.scrolling.modal:not(.fullscreen) {
         margin: @scrollingMargin auto;
+        top: @scrollingTop;
     }
 
     /* Fix for Firefox, Edge, IE11 */
@@ -478,6 +481,12 @@
         overflow: auto;
         overscroll-behavior: @overscrollBehavior;
     }
+    & when (@variationTableResizable) {
+        .ui.modal > .resizable.scrolling.content {
+            resize: @resizableDirection;
+            max-height: none;
+        }
+    }
 }
 
 & when (@variationModalOverlay) {
@@ -620,4 +629,5 @@
     }
 }
 
-.loadUIOverrides();
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/nag.less

@@ -207,4 +207,6 @@ a.ui.nag {
         border-radius: @borderRadius;
     }
 }
-.loadUIOverrides();
+
+// stylelint-disable no-invalid-position-at-import-rule
+@import (multiple, optional) "../../overrides.less";

package/src/definitions/modules/popup.js

@@ -248,9 +248,11 @@
                 // generates popup html from metadata
                 create: function () {
                     var
+                        targetSibling = $target.next(selector.popup),
+                        contentFallback = !settings.popup && targetSibling.length === 0 ? $module.attr('title') : false,
                         html      = module.get.html(),
                         title     = module.get.title(),
-                        content   = module.get.content()
+                        content   = module.get.content(contentFallback)
                     ;
 
                     if (html || content || title) {
@@ -291,10 +293,10 @@
                         if (settings.hoverable) {
                             module.bind.popup();
                         }
-                    } else if ($target.next(selector.popup).length > 0) {
+                    } else if (targetSibling.length > 0) {
                         module.verbose('Pre-existing popup found');
                         settings.inline = true;
-                        settings.popup = $target.next(selector.popup).data(metadata.activator, $module);
+                        settings.popup = targetSibling.data(metadata.activator, $module);
                         module.refresh();
                         if (settings.hoverable) {
                             module.bind.popup();
@@ -484,10 +486,10 @@
 
                         return $module.data(metadata.title) || settings.title;
                     },
-                    content: function () {
+                    content: function (fallback) {
                         $module.removeData(metadata.content);
 
-                        return $module.data(metadata.content) || settings.content || $module.attr('title');
+                        return $module.data(metadata.content) || settings.content || fallback;
                     },
                     variation: function () {
                         $module.removeData(metadata.variation);