<commit_before><template>

  <div class="dib">
    <!-- Added because the trigger could not be a vue element smh-->
    <div
      ref="buttonContainer"
      class="button-container dib"
    >
      <k-button
        ref="button"
        :text="text"
        :appearance="appearance"
        :primary="primary"
        :disabled="disabled"
        :hasDropdown="true"
      />
    </div>

    <ui-popover
      ref="popover"
      trigger="buttonContainer"
      :containFocus="false"
      :position="position"
      @close="handleClose"
    >
      <ui-menu
        :options="options"
        @select="emitSelection"
      />
    </ui-popover>

  </div>

</template>


<script>

  import kButton from 'kolibri.coreVue.components.kButton';
  import UiPopover from 'keen-ui/src/UiPopover';
  import uiMenu from 'keen-ui/src/UiMenu';

  export default {
    name: 'kDropdownMenu',
    components: {
      kButton,
      UiPopover,
      uiMenu,
    },
    props: {
      text: {
        type: String,
        required: true,
      },
      appearance: {
        type: String,
        required: false,
        default: 'raised-button',
      },
      primary: {
        type: Boolean,
        required: false,
        default: false,
      },
      disabled: {
        type: Boolean,
        required: false,
        default: false,
      },
      options: {
        type: Array,
        required: true,
      },
      position: {
        type: String,
        required: false,
        default: 'bottom right',
      },
    },
    methods: {
      emitSelection(selection) {
        this.$emit('select', selection);
        this.$refs.popover.close();
      },
      handleClose() {
        if (
          document.activeElement.classList.contains('ui-popover') ||
          document.activeElement.classList.contains('ui-popover__focus-redirector')
        ) {
          this.$refs.button.$el.focus();
        }
      },
    },
  };

</script>


<style lang="stylus" scoped>

  .dib
    display: inline-block

  .button-container
    >>>.button
      margin: 0

</style><commit_msg>Handle shift tab better<commit_after><template>

  <div class="dib">
    <!-- Added because the trigger could not be a vue element smh-->
    <div
      ref="buttonContainer"
      class="button-container dib"
    >
      <k-button
        ref="button"
        :text="text"
        :appearance="appearance"
        :primary="primary"
        :disabled="disabled"
        :hasDropdown="true"
      />
    </div>

    <ui-popover
      ref="popover"
      trigger="buttonContainer"
      :containFocus="false"
      :position="position"
      @close="handleClose"
      @open="handleOpen"
    >
      <ui-menu
        :options="options"
        @select="handleSelection"
      />
    </ui-popover>

  </div>

</template>


<script>

  import kButton from 'kolibri.coreVue.components.kButton';
  import UiPopover from 'keen-ui/src/UiPopover';
  import uiMenu from 'keen-ui/src/UiMenu';
  import { validator } from '../buttons-and-links/appearances';

  /**
   * The kDropdownMenu component is used to contain multiple actions
   */
  export default {
    name: 'kDropdownMenu',
    components: {
      kButton,
      UiPopover,
      uiMenu,
    },
    props: {
      /**
       * Button label text
       */
      text: {
        type: String,
        required: true,
      },
      /**
       * Button appearance: 'raised-button', 'flat-button', or 'basic-link'
       */
      appearance: {
        type: String,
        required: false,
        default: 'raised-button',
        validator,
      },
      /**
       * For 'raised-button' and 'flat-button' appearances: show as primary or secondary style
       */
      primary: {
        type: Boolean,
        required: false,
        default: false,
      },
      /**
       * Whether or not button is disabled
       */
      disabled: {
        type: Boolean,
        required: false,
        default: false,
      },
      /**
       * An array of option objects
       */
      options: {
        type: Array,
        required: true,
      },
      /**
       * The position of the dropdown relative to the button
       */
      position: {
        type: String,
        required: false,
        default: 'bottom right',
        validator(val) {
          return [
            'bottom left',
            'bottom center',
            'bottom right',
            'top left',
            'top center',
            'top right',
            'left top',
            'left middle',
            'left bottom',
            'right top',
            'right middle',
            'right bottom',
          ].includes(val);
        },
      },
    },
    beforeDestroy() {
      window.removeEventListener('keyup', this.handleKeyUp, true);
    },
    methods: {
      handleOpen() {
        window.addEventListener('keyup', this.handleKeyUp, true);
      },
      handleClose() {
        const focusedElement = document.activeElement;
        const popover = this.$refs.popover.$el;
        if (
          popover.contains(focusedElement) &&
          (focusedElement.classList.contains('ui-popover') ||
            focusedElement.classList.contains('ui-popover__focus-redirector') ||
            focusedElement.classList.contains('ui-menu-option'))
        ) {
          this.focusOnButton();
        }
        window.removeEventListener('keyup', this.handleKeyUp, true);
      },
      handleKeyUp(event) {
        if (event.shiftKey && event.keyCode == 9) {
          const popover = this.$refs.popover.$el;
          const popoverIsOpen = popover.clientWidth > 0 && popover.clientHeight > 0;
          if (popoverIsOpen && !popover.contains(document.activeElement)) {
            this.closePopover();
            this.focusOnButton();
          }
        }
      },
      handleSelection(selection) {
        this.$emit('select', selection);
        this.closePopover();
      },
      closePopover() {
        this.$refs.popover.close();
      },
      focusOnButton() {
        this.$refs.button.$el.focus();
      },
    },
  };

</script>


<style lang="stylus" scoped>

  .dib
    display: inline-block

  .button-container
    >>>.button
      margin: 0

</style>
{'fraction_non_alphanumeric': 0.13112903225806452, 'fraction_numerical': 0.0008064516129032258, 'mean_word_length': 1.7389575971731448, 'pattern_counts': {'":': 0, '<': 33, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3628774', 'n_tokens_mistral': 1836, 'n_tokens_neox': 1802, 'n_words': 368}