primer_view_components 0.1.4 → 0.1.5

data/app/components/primer/focus_group.js

@@ -0,0 +1,144 @@
+var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
+    if (kind === "m") throw new TypeError("Private method is not writable");
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
+    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
+};
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
+var _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
+import '@oddbird/popover-polyfill';
+const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
+const popoverSelector = (() => {
+    try {
+        document.querySelector(':open');
+        return ':open';
+    }
+    catch (_a) {
+        return '.\\:open';
+    }
+})();
+const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
+const printable = /^\S$/;
+export default class FocusGroupElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _FocusGroupElement_instances.add(this);
+        _FocusGroupElement_abortController.set(this, null);
+    }
+    get nowrap() {
+        return this.hasAttribute('nowrap');
+    }
+    set nowrap(value) {
+        this.toggleAttribute('nowrap', value);
+    }
+    get direction() {
+        if (this.getAttribute('direction') === 'horizontal')
+            return 'horizontal';
+        return 'vertical';
+    }
+    set direction(value) {
+        this.setAttribute('direction', `${value}`);
+    }
+    get retain() {
+        return this.hasAttribute('retain');
+    }
+    set retain(value) {
+        this.toggleAttribute('retain', value);
+    }
+    get mnemonics() {
+        return this.hasAttribute('mnemonics');
+    }
+    connectedCallback() {
+        __classPrivateFieldSet(this, _FocusGroupElement_abortController, new AbortController(), "f");
+        const { signal } = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f");
+        this.addEventListener('keydown', this, { signal });
+        this.addEventListener('click', this, { signal });
+        this.addEventListener('mouseover', this, { signal });
+        this.addEventListener('focusin', this, { signal });
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    handleEvent(event) {
+        const { direction, nowrap } = this;
+        if (event.type === 'focusin') {
+            if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+                for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
+                    item.setAttribute('tabindex', item === event.target ? '0' : '-1');
+                }
+            }
+        }
+        else if (event instanceof KeyboardEvent) {
+            const items = Array.from(__classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get));
+            let index = items.indexOf(event.target);
+            const key = event.key;
+            if (key === 'Up' || key === 'ArrowUp') {
+                if (direction === 'vertical' || direction === 'both') {
+                    index -= index < 0 ? 0 : 1;
+                }
+            }
+            else if (key === 'Down' || key === 'ArrowDown') {
+                if (direction === 'vertical' || direction === 'both') {
+                    index += 1;
+                }
+            }
+            else if (event.key === 'Left' || event.key === 'ArrowLeft') {
+                if (direction === 'horizontal' || direction === 'both') {
+                    index -= 1;
+                }
+            }
+            else if (event.key === 'Right' || event.key === 'ArrowRight') {
+                if (direction === 'horizontal' || direction === 'both') {
+                    index += 1;
+                }
+            }
+            else if (event.key === 'Home' || event.key === 'PageUp') {
+                index = 0;
+            }
+            else if (event.key === 'End' || event.key === 'PageDown') {
+                index = items.length - 1;
+            }
+            else if (this.mnemonics && printable.test(key)) {
+                const mnemonic = key.toLowerCase();
+                const offset = index > 0 && getMnemonicFor(event.target) === mnemonic ? index : 0;
+                index = items.findIndex((item, i) => i > offset && getMnemonicFor(item) === mnemonic);
+                if (index < 0 && !nowrap) {
+                    index = items.findIndex(item => getMnemonicFor(item) === mnemonic);
+                }
+            }
+            else {
+                return;
+            }
+            if (nowrap && index < 0)
+                index = 0;
+            if (!nowrap && index >= items.length)
+                index = 0;
+            const focusEl = items.at(Math.min(index, items.length - 1));
+            {
+                let el = focusEl;
+                do {
+                    el = el.closest(`[popover]:not(${popoverSelector})`);
+                    if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
+                        el.showPopover();
+                    }
+                    else {
+                        el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
+                    }
+                } while (el);
+            }
+            focusEl === null || focusEl === void 0 ? void 0 : focusEl.focus();
+        }
+    }
+}
+_FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
+    return this.querySelectorAll(menuItemSelector);
+};
+if (!customElements.get('focus-group')) {
+    window.FocusGroupElement = FocusGroupElement;
+    customElements.define('focus-group', FocusGroupElement);
+}

data/app/components/primer/focus_group.ts

@@ -0,0 +1,137 @@
+import '@oddbird/popover-polyfill'
+
+const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
+
+const popoverSelector = (() => {
+  try {
+    document.querySelector(':open')
+    return ':open'
+  } catch {
+    return '.\\:open'
+  }
+})()
+
+const getMnemonicFor = (item: Element) => item.textContent?.trim()[0].toLowerCase()
+
+const printable = /^\S$/
+
+export default class FocusGroupElement extends HTMLElement {
+  get nowrap(): boolean {
+    return this.hasAttribute('nowrap')
+  }
+
+  set nowrap(value: boolean) {
+    this.toggleAttribute('nowrap', value)
+  }
+
+  get direction(): 'horizontal' | 'vertical' | 'both' {
+    if (this.getAttribute('direction') === 'horizontal') return 'horizontal'
+    return 'vertical'
+  }
+
+  set direction(value: 'horizontal' | 'vertical' | 'both') {
+    this.setAttribute('direction', `${value}`)
+  }
+
+  get retain() {
+    return this.hasAttribute('retain')
+  }
+
+  set retain(value: boolean) {
+    this.toggleAttribute('retain', value)
+  }
+
+  get mnemonics() {
+    return this.hasAttribute('mnemonics')
+  }
+
+  #abortController: AbortController | null = null
+  connectedCallback() {
+    this.#abortController = new AbortController()
+    const {signal} = this.#abortController
+
+    this.addEventListener('keydown', this, {signal})
+    this.addEventListener('click', this, {signal})
+    this.addEventListener('mouseover', this, {signal})
+    this.addEventListener('focusin', this, {signal})
+  }
+
+  disconnectedCallback() {
+    this.#abortController?.abort()
+  }
+
+  get #items() {
+    return this.querySelectorAll(menuItemSelector)
+  }
+
+  handleEvent(event: Event) {
+    const {direction, nowrap} = this
+    if (event.type === 'focusin') {
+      if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+        for (const item of this.#items) {
+          item.setAttribute('tabindex', item === event.target ? '0' : '-1')
+        }
+      }
+    } else if (event instanceof KeyboardEvent) {
+      const items = Array.from(this.#items)
+      let index = items.indexOf(event.target as Element)
+      const key = event.key
+      if (key === 'Up' || key === 'ArrowUp') {
+        if (direction === 'vertical' || direction === 'both') {
+          index -= index < 0 ? 0 : 1
+        }
+      } else if (key === 'Down' || key === 'ArrowDown') {
+        if (direction === 'vertical' || direction === 'both') {
+          index += 1
+        }
+      } else if (event.key === 'Left' || event.key === 'ArrowLeft') {
+        if (direction === 'horizontal' || direction === 'both') {
+          index -= 1
+        }
+      } else if (event.key === 'Right' || event.key === 'ArrowRight') {
+        if (direction === 'horizontal' || direction === 'both') {
+          index += 1
+        }
+      } else if (event.key === 'Home' || event.key === 'PageUp') {
+        index = 0
+      } else if (event.key === 'End' || event.key === 'PageDown') {
+        index = items.length - 1
+      } else if (this.mnemonics && printable.test(key)) {
+        const mnemonic = key.toLowerCase()
+        const offset = index > 0 && getMnemonicFor(event.target as Element) === mnemonic ? index : 0
+        index = items.findIndex((item, i) => i > offset && getMnemonicFor(item) === mnemonic)
+        if (index < 0 && !nowrap) {
+          index = items.findIndex(item => getMnemonicFor(item) === mnemonic)
+        }
+      } else {
+        return
+      }
+      if (nowrap && index < 0) index = 0
+      if (!nowrap && index >= items.length) index = 0
+      const focusEl = items.at(Math.min(index, items.length - 1)) as HTMLElement
+      {
+        let el: HTMLElement | null = focusEl
+        do {
+          el = el.closest(`[popover]:not(${popoverSelector})`)
+          if (el?.popover === 'auto') {
+            el.showPopover()
+          } else {
+            el = el?.parentElement || null
+          }
+        } while (el)
+      }
+      focusEl?.focus()
+    }
+  }
+}
+
+if (!customElements.get('focus-group')) {
+  window.FocusGroupElement = FocusGroupElement
+  customElements.define('focus-group', FocusGroupElement)
+}
+
+declare global {
+  interface Window {
+    FocusGroupElement: typeof FocusGroupElement
+  }
+}

data/app/components/primer/icon_button.rb

@@ -33,7 +33,7 @@ module Primer
     # @example In a BorderBox
     #
     #   <%= render(Primer::Beta::BorderBox.new) do |component| %>
-    #     <% component.body do %>
+    #     <% component.with_body do %>
     #       <%= render(Primer::Beta::Text.new(pr: 2)) { "Body" } %>
     #       <%= render(Primer::IconButton.new(icon: :pencil, box: true, "aria-label": "Edit")) %>
     #     <% end %>

data/app/components/primer/primer.d.ts

@@ -1,6 +1,7 @@
 import '@oddbird/popover-polyfill';
 import './alpha/dropdown';
 import './anchored_position';
+import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './alpha/nav_list';
@@ -15,3 +16,4 @@ import './alpha/tab_container';
 import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
+import './alpha/action_menu/action_menu_element';

data/app/components/primer/primer.js

@@ -1,6 +1,7 @@
 import '@oddbird/popover-polyfill';
 import './alpha/dropdown';
 import './anchored_position';
+import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './alpha/nav_list';
@@ -15,3 +16,4 @@ import './alpha/tab_container';
 import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
+import './alpha/action_menu/action_menu_element';

data/app/components/primer/primer.ts

@@ -1,6 +1,7 @@
 import '@oddbird/popover-polyfill'
 import './alpha/dropdown'
 import './anchored_position'
+import './focus_group'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './alpha/nav_list'
@@ -15,3 +16,4 @@ import './alpha/tab_container'
 import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'
 import '../../../lib/primer/forms/toggle_switch_input'
+import './alpha/action_menu/action_menu_element'

data/app/components/primer/truncate.css.json

@@ -9,12 +9,5 @@
     ".css-truncate.expandable.zeroclipboard-is-hover .css-truncate-target",
     ".css-truncate.expandable.zeroclipboard-is-hover.css-truncate-target",
     ".css-truncate.expandable:hover .css-truncate-target"
-  ],
-  "classes": [
-    "css-truncate",
-    "css-truncate-overflow",
-    "css-truncate-target",
-    "expandable",
-    "zeroclipboard-is-hover"
   ]
 }

data/app/lib/primer/css/layout.css.json

@@ -312,268 +312,5 @@
     ".Stack--dir-inline-whenWide>.Stack-item>.Stack-divider",
     ".Stack-item--expand-whenWide",
     ".Stack-item--keepSize-whenWide"
-  ],
-  "classes": [
-    "AppFrame",
-    "AppFrame-a11yNav",
-    "AppFrame-a11yLink",
-    "AppFrame-main",
-    "AppFrame-header-wrapper",
-    "AppFrame-header",
-    "AppFrame-subheader",
-    "AppFrame-body",
-    "AppFrame-footer",
-    "container-sm",
-    "container-md",
-    "container-lg",
-    "container-xl",
-    "col-1",
-    "col-2",
-    "col-3",
-    "col-4",
-    "col-5",
-    "col-6",
-    "col-7",
-    "col-8",
-    "col-9",
-    "col-10",
-    "col-11",
-    "col-12",
-    "col-sm-1",
-    "col-sm-2",
-    "col-sm-3",
-    "col-sm-4",
-    "col-sm-5",
-    "col-sm-6",
-    "col-sm-7",
-    "col-sm-8",
-    "col-sm-9",
-    "col-sm-10",
-    "col-sm-11",
-    "col-sm-12",
-    "col-md-1",
-    "col-md-2",
-    "col-md-3",
-    "col-md-4",
-    "col-md-5",
-    "col-md-6",
-    "col-md-7",
-    "col-md-8",
-    "col-md-9",
-    "col-md-10",
-    "col-md-11",
-    "col-md-12",
-    "col-lg-1",
-    "col-lg-2",
-    "col-lg-3",
-    "col-lg-4",
-    "col-lg-5",
-    "col-lg-6",
-    "col-lg-7",
-    "col-lg-8",
-    "col-lg-9",
-    "col-lg-10",
-    "col-lg-11",
-    "col-lg-12",
-    "col-xl-1",
-    "col-xl-2",
-    "col-xl-3",
-    "col-xl-4",
-    "col-xl-5",
-    "col-xl-6",
-    "col-xl-7",
-    "col-xl-8",
-    "col-xl-9",
-    "col-xl-10",
-    "col-xl-11",
-    "col-xl-12",
-    "gutter",
-    "col-",
-    "gutter-condensed",
-    "gutter-spacious",
-    "gutter-sm",
-    "gutter-sm-condensed",
-    "gutter-sm-spacious",
-    "gutter-md",
-    "gutter-md-condensed",
-    "gutter-md-spacious",
-    "gutter-lg",
-    "gutter-lg-condensed",
-    "gutter-lg-spacious",
-    "gutter-xl",
-    "gutter-xl-condensed",
-    "gutter-xl-spacious",
-    "offset-1",
-    "offset-2",
-    "offset-3",
-    "offset-4",
-    "offset-5",
-    "offset-6",
-    "offset-7",
-    "offset-8",
-    "offset-9",
-    "offset-10",
-    "offset-11",
-    "offset-sm-1",
-    "offset-sm-2",
-    "offset-sm-3",
-    "offset-sm-4",
-    "offset-sm-5",
-    "offset-sm-6",
-    "offset-sm-7",
-    "offset-sm-8",
-    "offset-sm-9",
-    "offset-sm-10",
-    "offset-sm-11",
-    "offset-md-1",
-    "offset-md-2",
-    "offset-md-3",
-    "offset-md-4",
-    "offset-md-5",
-    "offset-md-6",
-    "offset-md-7",
-    "offset-md-8",
-    "offset-md-9",
-    "offset-md-10",
-    "offset-md-11",
-    "offset-lg-1",
-    "offset-lg-2",
-    "offset-lg-3",
-    "offset-lg-4",
-    "offset-lg-5",
-    "offset-lg-6",
-    "offset-lg-7",
-    "offset-lg-8",
-    "offset-lg-9",
-    "offset-lg-10",
-    "offset-lg-11",
-    "offset-xl-1",
-    "offset-xl-2",
-    "offset-xl-3",
-    "offset-xl-4",
-    "offset-xl-5",
-    "offset-xl-6",
-    "offset-xl-7",
-    "offset-xl-8",
-    "offset-xl-9",
-    "offset-xl-10",
-    "offset-xl-11",
-    "PageLayout",
-    "PageLayout--panePos-start",
-    "PageLayout--panePos-end",
-    "PageLayout-header--hasDivider",
-    "PageLayout-footer--hasDivider",
-    "PageLayout--hasPaneDivider",
-    "PageLayout-pane",
-    "PageLayout-content",
-    "PageLayout-pane--sticky",
-    "PageLayout-content-centered-",
-    "container-",
-    "PageLayout-content-centered-sm",
-    "PageLayout-content-centered-md",
-    "PageLayout-content-centered-lg",
-    "PageLayout-content-centered-xl",
-    "PageLayout--paneWidth-narrow",
-    "PageLayout--paneWidth-wide",
-    "PageLayout--responsive-stackRegions",
-    "PageLayout--responsive-panePos-start",
-    "PageLayout--responsive-separateRegions",
-    "PageLayout--responsive-primary-content",
-    "PageLayout--responsive-primary-pane",
-    "PageLayout-region--dividerNarrow-line-before",
-    "PageLayout-region--dividerNarrow-line-after",
-    "PageLayout-region--dividerNarrow-filled-before",
-    "PageLayout-region--dividerNarrow-filled-after",
-    "PageLayout-wrapper",
-    "PageLayout-columns",
-    "PageLayout--outerSpacing-normal",
-    "PageLayout--outerSpacing-condensed",
-    "PageLayout--innerSpacing-normal",
-    "PageLayout--innerSpacing-condensed",
-    "PageLayout--columnGap-normal",
-    "PageLayout--columnGap-condensed",
-    "PageLayout--columnGap-none",
-    "PageLayout--rowGap-normal",
-    "PageLayout--rowGap-none",
-    "PageLayout--rowGap-condensed",
-    "PageLayout-header",
-    "PageLayout-footer",
-    "Stack",
-    "Stack-divider",
-    "Stack-item",
-    "Stack--dir-inline-whenNarrow",
-    "Stack--dir-block-whenNarrow",
-    "Stack--gap-none-whenNarrow",
-    "Stack--gap-condensed-whenNarrow",
-    "Stack--gap-normal-whenNarrow",
-    "Stack--align-start-whenNarrow",
-    "Stack--align-center-whenNarrow",
-    "Stack--align-end-whenNarrow",
-    "Stack--align-baseline-whenNarrow",
-    "Stack--alignWrap-start-whenNarrow",
-    "Stack--alignWrap-center-whenNarrow",
-    "Stack--alignWrap-end-whenNarrow",
-    "Stack--alignWrap-distribute-whenNarrow",
-    "Stack--alignWrap-distributeEvenly-whenNarrow",
-    "Stack--spread-start-whenNarrow",
-    "Stack--spread-center-whenNarrow",
-    "Stack--spread-end-whenNarrow",
-    "Stack--spread-distribute-whenNarrow",
-    "Stack--spread-distributeEvenly-whenNarrow",
-    "Stack--wrap-whenNarrow",
-    "Stack--nowrap-whenNarrow",
-    "Stack--showDividers-whenNarrow",
-    "Stack-item--expand-whenNarrow",
-    "Stack-item--keepSize-whenNarrow",
-    "Stack--dir-inline-whenRegular",
-    "Stack--dir-block-whenRegular",
-    "Stack--gap-none-whenRegular",
-    "Stack--gap-condensed-whenRegular",
-    "Stack--gap-normal-whenRegular",
-    "Stack--gap-spacious-whenRegular",
-    "Stack--align-start-whenRegular",
-    "Stack--align-center-whenRegular",
-    "Stack--align-end-whenRegular",
-    "Stack--align-baseline-whenRegular",
-    "Stack--alignWrap-start-whenRegular",
-    "Stack--alignWrap-center-whenRegular",
-    "Stack--alignWrap-end-whenRegular",
-    "Stack--alignWrap-distribute-whenRegular",
-    "Stack--alignWrap-distributeEvenly-whenRegular",
-    "Stack--spread-start-whenRegular",
-    "Stack--spread-center-whenRegular",
-    "Stack--spread-end-whenRegular",
-    "Stack--spread-distribute-whenRegular",
-    "Stack--spread-distributeEvenly-whenRegular",
-    "Stack--wrap-whenRegular",
-    "Stack--nowrap-whenRegular",
-    "Stack--showDividers-whenRegular",
-    "Stack-item--expand-whenRegular",
-    "Stack-item--keepSize-whenRegular",
-    "Stack--dir-inline-whenWide",
-    "Stack--dir-block-whenWide",
-    "Stack--gap-none-whenWide",
-    "Stack--gap-condensed-whenWide",
-    "Stack--gap-normal-whenWide",
-    "Stack--gap-spacious-whenWide",
-    "Stack--align-start-whenWide",
-    "Stack--align-center-whenWide",
-    "Stack--align-end-whenWide",
-    "Stack--align-baseline-whenWide",
-    "Stack--alignWrap-start-whenWide",
-    "Stack--alignWrap-center-whenWide",
-    "Stack--alignWrap-end-whenWide",
-    "Stack--alignWrap-distribute-whenWide",
-    "Stack--alignWrap-distributeEvenly-whenWide",
-    "Stack--spread-start-whenWide",
-    "Stack--spread-center-whenWide",
-    "Stack--spread-end-whenWide",
-    "Stack--spread-distribute-whenWide",
-    "Stack--spread-distributeEvenly-whenWide",
-    "Stack--wrap-whenWide",
-    "Stack--nowrap-whenWide",
-    "Stack--showDividers-whenWide",
-    "Stack-item--expand-whenWide",
-    "Stack-item--keepSize-whenWide"
   ]
 }