@gitlab/ui 111.8.1 → 111.9.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [111.9.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.8.1...v111.9.0) (2025-03-27)
+
+
+### Features
+
+* **GlTooltip:** add custom global container selector ([691e2b0](https://gitlab.com/gitlab-org/gitlab-ui/commit/691e2b0a7dda4135f2c8b0a665952edb51ec046e))
+
 ## [111.8.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v111.8.0...v111.8.1) (2025-03-27)
 
 

package/dist/components/base/breadcrumb/breadcrumb.js

@@ -2,7 +2,7 @@ import debounce from 'lodash/debounce';
 import { translate } from '../../../utils/i18n';
 import GlAvatar from '../avatar/avatar';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { breadCrumbSizeOptions } from '../../../utils/constants';
 import GlBreadcrumbItem from './breadcrumb_item';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/components/base/daterange_picker/daterange_picker.js

@@ -1,5 +1,5 @@
 import uniqueId from 'lodash/uniqueId';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { getDateInPast, getDateInFuture, getDayDifference } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker';
 import GlIcon from '../icon/icon';

package/dist/components/base/filtered_search/filtered_search.js

@@ -1,7 +1,7 @@
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import { PortalTarget } from 'portal-vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlIcon from '../icon/icon';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click';
 import GlFilteredSearchTerm from './filtered_search_term';

package/dist/components/base/search_box_by_click/search_box_by_click.js

@@ -1,4 +1,4 @@
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button';
 import GlButton from '../button/button';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown';

package/dist/components/base/sorting/sorting.js

@@ -1,4 +1,4 @@
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../button/button';
 import GlButtonGroup from '../button_group/button_group';
 import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox';

package/dist/components/base/tooltip/tooltip.js

@@ -1,6 +1,7 @@
 import { BTooltip } from '../../../vendor/bootstrap-vue/src/components/tooltip/tooltip';
 import { tooltipDelay } from '../../../utils/constants';
 import tooltipMixin from '../../mixins/tooltip_mixin';
+import { getGlTooltipDefaultContainer } from '../../../directives/tooltip/container';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
@@ -13,14 +14,15 @@ var script = {
   },
   mixins: [tooltipMixin(tooltipRefName)],
   inheritAttrs: false,
-  tooltipRefName
+  tooltipRefName,
+  getGlTooltipDefaultContainer
 };
 
 /* script */
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tooltip',_vm._g(_vm._b({ref:_vm.$options.tooltipRefName,attrs:{"delay":_vm.$options.tooltipDelay}},'b-tooltip',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-tooltip',_vm._g(_vm._b({ref:_vm.$options.tooltipRefName,attrs:{"container":_vm.$attrs.container || _vm.$options.getGlTooltipDefaultContainer(),"delay":_vm.$options.tooltipDelay}},'b-tooltip',_vm.$attrs,false),_vm.$listeners),[_vm._t("default")],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/shared_components/clear_icon_button/clear_icon_button.js

@@ -1,4 +1,4 @@
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../../base/button/button';
 import { translate } from '../../../utils/i18n';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/components/utilities/truncate/truncate.js

@@ -1,4 +1,4 @@
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { POSITION, ZERO_WIDTH_SPACE } from './constants';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/directives/tooltip/container.js

@@ -0,0 +1,7 @@
+let containerSelector;
+const setGlTooltipDefaultContainer = selector => {
+  containerSelector = selector;
+};
+const getGlTooltipDefaultContainer = () => containerSelector;
+
+export { getGlTooltipDefaultContainer, setGlTooltipDefaultContainer };

package/dist/directives/tooltip/tooltip.js

@@ -0,0 +1,18 @@
+import { VBTooltip } from '../../vendor/bootstrap-vue/src/directives/tooltip';
+import { getGlTooltipDefaultContainer } from './container';
+
+const patchHook = hook => (el, bindings, vnode) => {
+  hook(el, {
+    ...bindings,
+    arg: bindings.arg || getGlTooltipDefaultContainer()
+  }, vnode);
+};
+const bind = patchHook(VBTooltip.bind);
+const componentUpdated = patchHook(VBTooltip.componentUpdated);
+const GlTooltipDirective = {
+  ...VBTooltip,
+  bind,
+  componentUpdated
+};
+
+export { GlTooltipDirective };

package/dist/index.js

@@ -104,7 +104,8 @@ export { default as GlSprintf } from './components/utilities/sprintf/sprintf';
 export { default as GlTruncate } from './components/utilities/truncate/truncate';
 export { default as GlTruncateText } from './components/utilities/truncate_text/truncate_text';
 export { GlModalDirective } from './directives/modal';
-export { GlTooltipDirective } from './directives/tooltip';
+export { GlTooltipDirective } from './directives/tooltip/tooltip';
+export { setGlTooltipDefaultContainer } from './directives/tooltip/container';
 export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
 export { GlCollapseToggleDirective } from './directives/collapse_toggle';
 export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';

package/dist/tokens/tokens_story.js

@@ -1,5 +1,5 @@
 import { colorFromBackground } from '../utils/utils';
-import { GlTooltipDirective } from '../directives/tooltip';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import GlBadge from '../components/base/badge/badge';
 import GlColorContrast from '../internal/color_contrast/color_contrast';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/dist/tokens/tokens_table.js

@@ -6,7 +6,7 @@ import GlSearchBoxByType from '../components/base/search_box_by_type/search_box_
 import GlLink from '../components/base/link/link';
 import GlTable from '../components/base/table/table';
 import GlPagination from '../components/base/pagination/pagination';
-import { GlTooltipDirective } from '../directives/tooltip';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import TOKENS_DEFAULT from './build/json/tokens.json';
 import TOKENS_DARK from './build/json/tokens.dark.json';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "111.8.1",
+  "version": "111.9.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -4,7 +4,7 @@ import debounce from 'lodash/debounce';
 import { translate } from '../../../utils/i18n';
 import GlAvatar from '../avatar/avatar.vue';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { breadCrumbSizeOptions } from '../../../utils/constants';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 

package/src/components/base/daterange_picker/daterange_picker.vue

@@ -1,6 +1,6 @@
 <script>
 import uniqueId from 'lodash/uniqueId';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { getDayDifference, getDateInPast, getDateInFuture } from '../../../utils/datetime_utility';
 import GlDatepicker from '../datepicker/datepicker.vue';
 import GlIcon from '../icon/icon.vue';

package/src/components/base/filtered_search/filtered_search.vue

@@ -2,7 +2,7 @@
 import isEqual from 'lodash/isEqual';
 import cloneDeep from 'lodash/cloneDeep';
 import { PortalTarget } from 'portal-vue';
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlIcon from '../icon/icon.vue';
 import GlSearchBoxByClick from '../search_box_by_click/search_box_by_click.vue';
 import GlFilteredSearchTerm from './filtered_search_term.vue';

package/src/components/base/search_box_by_click/search_box_by_click.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlClearIconButton from '../../shared_components/clear_icon_button/clear_icon_button.vue';
 import GlButton from '../button/button.vue';
 import GlDisclosureDropdown from '../new_dropdowns/disclosure/disclosure_dropdown.vue';

package/src/components/base/sorting/sorting.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../button/button.vue';
 import GlButtonGroup from '../button_group/button_group.vue';
 import GlCollapsibleListbox from '../new_dropdowns/listbox/listbox.vue';

package/src/components/base/tooltip/tooltip.vue

@@ -3,6 +3,7 @@
 import { BTooltip } from '../../../vendor/bootstrap-vue/src/components/tooltip/tooltip';
 import { tooltipDelay } from '../../../utils/constants';
 import tooltipMixin from '../../mixins/tooltip_mixin';
+import { getGlTooltipDefaultContainer } from '../../../directives/tooltip/container';
 
 const tooltipRefName = 'bvTooltip';
 
@@ -15,6 +16,7 @@ export default {
   mixins: [tooltipMixin(tooltipRefName)],
   inheritAttrs: false,
   tooltipRefName,
+  getGlTooltipDefaultContainer,
 };
 </script>
 
@@ -22,6 +24,7 @@ export default {
   <b-tooltip
     :ref="$options.tooltipRefName"
     v-bind="$attrs"
+    :container="$attrs.container || $options.getGlTooltipDefaultContainer()"
     :delay="$options.tooltipDelay"
     v-on="$listeners"
   >

package/src/components/shared_components/clear_icon_button/clear_icon_button.vue

@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import GlButton from '../../base/button/button.vue';
 import { translate } from '../../../utils/i18n';
 

package/src/components/utilities/truncate/truncate.vue

@@ -1,6 +1,6 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
-import { GlTooltipDirective } from '../../../directives/tooltip';
+import { GlTooltipDirective } from '../../../directives/tooltip/tooltip';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
 import { POSITION, ZERO_WIDTH_SPACE } from './constants';
 

package/src/directives/tooltip/container.js

@@ -0,0 +1,7 @@
+let containerSelector;
+
+export const setGlTooltipDefaultContainer = (selector) => {
+  containerSelector = selector;
+};
+
+export const getGlTooltipDefaultContainer = () => containerSelector;

package/src/directives/tooltip/tooltip.js

@@ -0,0 +1,22 @@
+import { VBTooltip } from '../../vendor/bootstrap-vue/src/directives/tooltip';
+import { getGlTooltipDefaultContainer } from './container';
+
+const patchHook = (hook) => (el, bindings, vnode) => {
+  hook(
+    el,
+    {
+      ...bindings,
+      arg: bindings.arg || getGlTooltipDefaultContainer(),
+    },
+    vnode
+  );
+};
+
+const bind = patchHook(VBTooltip.bind);
+const componentUpdated = patchHook(VBTooltip.componentUpdated);
+
+export const GlTooltipDirective = {
+  ...VBTooltip,
+  bind,
+  componentUpdated,
+};

package/src/index.js

@@ -120,7 +120,8 @@ export { default as GlTruncateText } from './components/utilities/truncate_text/
 
 // Directives
 export { GlModalDirective } from './directives/modal';
-export { GlTooltipDirective } from './directives/tooltip';
+export { GlTooltipDirective } from './directives/tooltip/tooltip';
+export { setGlTooltipDefaultContainer } from './directives/tooltip/container';
 export { GlResizeObserverDirective } from './directives/resize_observer/resize_observer';
 export { GlCollapseToggleDirective } from './directives/collapse_toggle';
 export { SafeLinkDirective as GlSafeLinkDirective } from './directives/safe_link/safe_link';

package/src/tokens/tokens_story.vue

@@ -1,6 +1,6 @@
 <script>
 import { colorFromBackground } from '../utils/utils';
-import { GlTooltipDirective } from '../directives/tooltip';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import GlBadge from '../components/base/badge/badge.vue';
 import GlColorContrast from '../internal/color_contrast/color_contrast.vue';
 

package/src/tokens/tokens_table.vue

@@ -7,7 +7,7 @@ import GlSearchBoxByType from '../components/base/search_box_by_type/search_box_
 import GlLink from '../components/base/link/link.vue';
 import GlTable from '../components/base/table/table.vue';
 import GlPagination from '../components/base/pagination/pagination.vue';
-import { GlTooltipDirective } from '../directives/tooltip';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
 import TOKENS_DEFAULT from './build/json/tokens.json';
 import TOKENS_DARK from './build/json/tokens.dark.json';
 

package/dist/directives/tooltip.js

@@ -1 +0,0 @@
-export { VBTooltip as GlTooltipDirective } from '../vendor/bootstrap-vue/src/directives/tooltip/tooltip';

package/src/directives/tooltip.js

@@ -1 +0,0 @@
-export { VBTooltip as GlTooltipDirective } from '../vendor/bootstrap-vue/src/directives/tooltip/tooltip';