@gitlab/ui 92.2.0 → 92.3.0

package/src/vendor/bootstrap-vue/src/components/button-toolbar/button-toolbar.js

@@ -1,117 +0,0 @@
-import { extend } from '../../vue'
-import { NAME_BUTTON_TOOLBAR } from '../../constants/components'
-import { PROP_TYPE_BOOLEAN } from '../../constants/props'
-import { CODE_DOWN, CODE_LEFT, CODE_RIGHT, CODE_UP } from '../../constants/key-codes'
-import { attemptFocus, contains, isVisible, selectAll } from '../../utils/dom'
-import { stopEvent } from '../../utils/events'
-import { makeProp, makePropsConfigurable } from '../../utils/props'
-import { normalizeSlotMixin } from '../../mixins/normalize-slot'
-
-// --- Constants ---
-
-const ITEM_SELECTOR = [
-  '.btn:not(.disabled):not([disabled]):not(.dropdown-item)',
-  '.form-control:not(.disabled):not([disabled])',
-  'select:not(.disabled):not([disabled])',
-  'input[type="checkbox"]:not(.disabled)',
-  'input[type="radio"]:not(.disabled)'
-].join(',')
-
-// --- Props ---
-
-export const props = makePropsConfigurable(
-  {
-    justify: makeProp(PROP_TYPE_BOOLEAN, false),
-    keyNav: makeProp(PROP_TYPE_BOOLEAN, false)
-  },
-  NAME_BUTTON_TOOLBAR
-)
-
-// --- Main component ---
-
-// @vue/component
-export const BButtonToolbar = /*#__PURE__*/ extend({
-  name: NAME_BUTTON_TOOLBAR,
-  mixins: [normalizeSlotMixin],
-  props,
-  mounted() {
-    // Pre-set the tabindexes if the markup does not include
-    // `tabindex="-1"` on the toolbar items
-    if (this.keyNav) {
-      this.getItems()
-    }
-  },
-  methods: {
-    getItems() {
-      const items = selectAll(ITEM_SELECTOR, this.$el)
-      // Ensure `tabindex="-1"` is set on every item
-      items.forEach(item => {
-        item.tabIndex = -1
-      })
-      return items.filter(el => isVisible(el))
-    },
-    focusFirst() {
-      const items = this.getItems()
-      attemptFocus(items[0])
-    },
-    focusPrev(event) {
-      let items = this.getItems()
-      const index = items.indexOf(event.target)
-      if (index > -1) {
-        items = items.slice(0, index).reverse()
-        attemptFocus(items[0])
-      }
-    },
-    focusNext(event) {
-      let items = this.getItems()
-      const index = items.indexOf(event.target)
-      if (index > -1) {
-        items = items.slice(index + 1)
-        attemptFocus(items[0])
-      }
-    },
-    focusLast() {
-      const items = this.getItems().reverse()
-      attemptFocus(items[0])
-    },
-    onFocusin(event) {
-      const { $el } = this
-      if (event.target === $el && !contains($el, event.relatedTarget)) {
-        stopEvent(event)
-        this.focusFirst(event)
-      }
-    },
-    onKeydown(event) {
-      const { keyCode, shiftKey } = event
-      if (keyCode === CODE_UP || keyCode === CODE_LEFT) {
-        stopEvent(event)
-        shiftKey ? this.focusFirst(event) : this.focusPrev(event)
-      } else if (keyCode === CODE_DOWN || keyCode === CODE_RIGHT) {
-        stopEvent(event)
-        shiftKey ? this.focusLast(event) : this.focusNext(event)
-      }
-    }
-  },
-  render(h) {
-    const { keyNav } = this
-
-    return h(
-      'div',
-      {
-        staticClass: 'btn-toolbar',
-        class: { 'justify-content-between': this.justify },
-        attrs: {
-          role: 'toolbar',
-          tabindex: keyNav ? '0' : null
-        },
-        on: keyNav
-          ? {
-              focusin: this.onFocusin,
-              keydown: this.onKeydown
-            }
-          : {}
-      },
-      [this.normalizeSlot()]
-    )
-  }
-})

package/src/vendor/bootstrap-vue/src/components/button-toolbar/button-toolbar.spec.js

@@ -1,185 +0,0 @@
-import { mount } from '@vue/test-utils'
-import { waitNT } from '../../../tests/utils'
-import { BButton } from '../button/button'
-import { BButtonGroup } from '../button-group/button-group'
-import { BButtonToolbar } from './button-toolbar'
-
-describe('button-toolbar', () => {
-  it('toolbar root should be "div"', async () => {
-    const wrapper = mount(BButtonToolbar)
-    expect(wrapper.element.tagName).toBe('DIV')
-    wrapper.destroy()
-  })
-
-  it('toolbar should contain base class', async () => {
-    const wrapper = mount(BButtonToolbar)
-    expect(wrapper.classes()).toContain('btn-toolbar')
-    wrapper.destroy()
-  })
-
-  it('toolbar should not have class "justify-content-between"', async () => {
-    const wrapper = mount(BButtonToolbar)
-    expect(wrapper.classes()).not.toContain('justify-content-between')
-    wrapper.destroy()
-  })
-
-  it('toolbar should have role', async () => {
-    const wrapper = mount(BButtonToolbar)
-    expect(wrapper.attributes('role')).toBe('toolbar')
-    wrapper.destroy()
-  })
-
-  it('toolbar should not have tabindex by default', async () => {
-    const wrapper = mount(BButtonToolbar)
-    expect(wrapper.attributes('tabindex')).toBeUndefined()
-    wrapper.destroy()
-  })
-
-  it('toolbar should have class "justify-content-between" when justify set', async () => {
-    const wrapper = mount(BButtonToolbar, {
-      propsData: {
-        justify: true
-      }
-    })
-    expect(wrapper.classes()).toContain('justify-content-between')
-    expect(wrapper.classes()).toContain('btn-toolbar')
-    wrapper.destroy()
-  })
-
-  it('toolbar should have tabindex when key-nav set', async () => {
-    const wrapper = mount(BButtonToolbar, {
-      propsData: {
-        keyNav: true
-      }
-    })
-    expect(wrapper.attributes('tabindex')).toBeDefined()
-    expect(wrapper.attributes('tabindex')).toBe('0')
-    expect(wrapper.element.tabIndex).toBe(0)
-    wrapper.destroy()
-  })
-
-  // These tests are wrapped in a new describe to limit the scope of the getBCR Mock
-  describe('keyboard navigation', () => {
-    const origGetBCR = Element.prototype.getBoundingClientRect
-
-    beforeEach(() => {
-      // Mock `getBoundingClientRect()` so that the `isVisible(el)` test returns `true`
-      // In our test below, all pagination buttons would normally be visible
-      Element.prototype.getBoundingClientRect = jest.fn(() => ({
-        width: 24,
-        height: 24,
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0
-      }))
-    })
-
-    afterEach(() => {
-      // Restore prototype
-      Element.prototype.getBoundingClientRect = origGetBCR
-    })
-
-    // Test App for keynav
-    const App = {
-      render(h) {
-        return h(BButtonToolbar, { props: { keyNav: true } }, [
-          h(BButtonGroup, [h(BButton, 'a'), h(BButton, 'b')]),
-          h(BButtonGroup, [h(BButton, { props: { disabled: true } }, 'c'), h(BButton, 'd')]),
-          h(BButtonGroup, [h(BButton, 'e'), h(BButton, 'f')])
-        ])
-      }
-    }
-
-    it('has correct structure', async () => {
-      const wrapper = mount(App, {
-        attachTo: document.body
-      })
-
-      await waitNT(wrapper.vm)
-
-      expect(wrapper.find('div.btn-toolbar').exists()).toBe(true)
-      expect(wrapper.attributes('tabindex')).toBe('0')
-
-      const $groups = wrapper.findAllComponents(BButtonGroup)
-      expect($groups).toBeDefined()
-      expect($groups.length).toBe(3)
-
-      const $btns = wrapper.findAll('button')
-      expect($btns).toBeDefined()
-      expect($btns.length).toBe(6)
-      expect($btns.at(0).element.matches('button[tabindex="-1"')).toBe(true)
-      expect($btns.at(1).element.matches('button[tabindex="-1"')).toBe(true)
-      expect($btns.at(2).element.matches('button[tabindex="-1"')).toBe(false) // Disabled button
-      expect($btns.at(3).element.matches('button[tabindex="-1"')).toBe(true)
-      expect($btns.at(4).element.matches('button[tabindex="-1"')).toBe(true)
-      expect($btns.at(5).element.matches('button[tabindex="-1"')).toBe(true)
-
-      wrapper.destroy()
-    })
-
-    it('focuses first button when tabbed into', async () => {
-      const wrapper = mount(App, {
-        attachTo: document.body
-      })
-
-      await waitNT(wrapper.vm)
-
-      expect(wrapper.find('div.btn-toolbar').exists()).toBe(true)
-      expect(wrapper.attributes('tabindex')).toBe('0')
-
-      const $btns = wrapper.findAll('button')
-      expect($btns).toBeDefined()
-      expect($btns.length).toBe(6)
-
-      expect(document.activeElement).not.toBe(wrapper.element)
-      expect(document.activeElement).not.toBe($btns.at(0).element)
-
-      await wrapper.trigger('focusin')
-      expect(document.activeElement).toBe($btns.at(0).element)
-
-      wrapper.destroy()
-    })
-
-    it('keyboard navigation works', async () => {
-      const wrapper = mount(App, {
-        attachTo: document.body
-      })
-
-      await waitNT(wrapper.vm)
-
-      expect(wrapper.find('div.btn-toolbar').exists()).toBe(true)
-      expect(wrapper.attributes('tabindex')).toBe('0')
-
-      const $btns = wrapper.findAll('button')
-      expect($btns).toBeDefined()
-      expect($btns.length).toBe(6)
-
-      // Focus first button
-      $btns.at(0).element.focus()
-      expect(document.activeElement).toBe($btns.at(0).element)
-
-      // Cursor right
-      await $btns.at(0).trigger('keydown.right')
-      expect(document.activeElement).toBe($btns.at(1).element)
-
-      // Cursor right (skips disabled button)
-      await $btns.at(1).trigger('keydown.right')
-      expect(document.activeElement).toBe($btns.at(3).element)
-
-      // Cursor shift-right (focuses last button)
-      await $btns.at(1).trigger('keydown.right', { shiftKey: true })
-      expect(document.activeElement).toBe($btns.at(5).element)
-
-      // Cursor left
-      await $btns.at(5).trigger('keydown.left')
-      expect(document.activeElement).toBe($btns.at(4).element)
-
-      // Cursor shift left (focuses first button)
-      await $btns.at(5).trigger('keydown.left', { shiftKey: true })
-      expect(document.activeElement).toBe($btns.at(0).element)
-
-      wrapper.destroy()
-    })
-  })
-})

package/src/vendor/bootstrap-vue/src/components/button-toolbar/index.d.ts

@@ -1,11 +0,0 @@
-//
-// Button Toolbar
-//
-import Vue from 'vue'
-import { BvPlugin, BvComponent } from '../../'
-
-// Plugin
-export declare const ButtonToolbarPlugin: BvPlugin
-
-// Component: b-button-toolbar
-export declare class BButtonToolbar extends BvComponent {}

package/src/vendor/bootstrap-vue/src/components/button-toolbar/index.js

@@ -1,11 +0,0 @@
-import { BButtonToolbar } from './button-toolbar'
-import { pluginFactory } from '../../utils/plugins'
-
-const ButtonToolbarPlugin = /*#__PURE__*/ pluginFactory({
-  components: {
-    BButtonToolbar,
-    BBtnToolbar: BButtonToolbar
-  }
-})
-
-export { ButtonToolbarPlugin, BButtonToolbar }

package/src/vendor/bootstrap-vue/src/components/button-toolbar/package.json

@@ -1,32 +0,0 @@
-{
-  "name": "@bootstrap-vue/button-toolbar",
-  "version": "1.0.0",
-  "meta": {
-    "title": "Button Toolbar",
-    "description": "Group a series of <b-button-group> and/or <b-input-group> together on a single line, with optional keyboard navigation.",
-    "components": [
-      {
-        "component": "BButtonToolbar",
-        "aliases": [
-          "BBtnToolbar"
-        ],
-        "props": [
-          {
-            "prop": "justify",
-            "description": "Make the toolbar span the maximum available width, by increasing spacing between the button groups, input groups and dropdowns"
-          },
-          {
-            "prop": "keyNav",
-            "description": "When set, enabled keyboard navigation mode for the toolbar. Do not set this prop when the toolbar has inputs"
-          }
-        ],
-        "slots": [
-          {
-            "name": "default",
-            "description": "Content to place in the button toolbar"
-          }
-        ]
-      }
-    ]
-  }
-}