primer_view_components 0.0.91 → 0.0.92

data/app/components/primer/alpha/modal-dialog-element.d.ts

@@ -0,0 +1,18 @@
+export declare class ModalDialogElement extends HTMLElement {
+    #private;
+    get open(): boolean;
+    set open(value: boolean);
+    get showButtons(): NodeList;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    show(): void;
+    close(closed?: boolean): void;
+}
+declare global {
+    interface Window {
+        ModalDialogElement: typeof ModalDialogElement;
+    }
+    interface HTMLElementTagNameMap {
+        'modal-dialog': ModalDialogElement;
+    }
+}

data/app/components/primer/alpha/modal-dialog-element.js

@@ -0,0 +1,143 @@
+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 __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 _ModalDialogElement_instances, _ModalDialogElement_focusAbortController, _ModalDialogElement_abortController, _ModalDialogElement_openButton, _ModalDialogElement_shouldTryLoadingFragment, _ModalDialogElement_overlayBackdrop_get, _ModalDialogElement_keydown;
+import { focusTrap } from '@primer/behaviors';
+import { getFocusableChild } from '@primer/behaviors/utils';
+function focusIfNeeded(elem) {
+    if (document.activeElement !== elem) {
+        elem === null || elem === void 0 ? void 0 : elem.focus();
+    }
+}
+export class ModalDialogElement extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        _ModalDialogElement_instances.add(this);
+        //TODO: Do we remove the abortController from focusTrap?
+        _ModalDialogElement_focusAbortController.set(this, new AbortController());
+        _ModalDialogElement_abortController.set(this, null);
+        _ModalDialogElement_openButton.set(this, void 0);
+        _ModalDialogElement_shouldTryLoadingFragment.set(this, true);
+    }
+    get open() {
+        return this.hasAttribute('open');
+    }
+    set open(value) {
+        var _a, _b, _c, _d;
+        if (value) {
+            if (this.open)
+                return;
+            this.setAttribute('open', '');
+            (_a = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _a === void 0 ? void 0 : _a.classList.remove('Overlay--hidden');
+            document.body.style.overflow = 'hidden';
+            if (__classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal.aborted) {
+                __classPrivateFieldSet(this, _ModalDialogElement_focusAbortController, new AbortController(), "f");
+            }
+            focusTrap(this, undefined, __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").signal);
+        }
+        else {
+            if (!this.open)
+                return;
+            this.removeAttribute('open');
+            (_b = __classPrivateFieldGet(this, _ModalDialogElement_instances, "a", _ModalDialogElement_overlayBackdrop_get)) === null || _b === void 0 ? void 0 : _b.classList.add('Overlay--hidden');
+            document.body.style.overflow = 'initial';
+            __classPrivateFieldGet(this, _ModalDialogElement_focusAbortController, "f").abort();
+            // if #openButton is a child of a menu, we need to focus a suitable child of the menu
+            // element since it is expected for the menu to close on click
+            const menu = ((_c = __classPrivateFieldGet(this, _ModalDialogElement_openButton, "f")) === null || _c === void 0 ? void 0 : _c.closest('details')) || ((_d = __classPrivateFieldGet(this, _ModalDialogElement_openButton, "f")) === null || _d === void 0 ? void 0 : _d.closest('action-menu'));
+            if (menu) {
+                focusIfNeeded(getFocusableChild(menu));
+            }
+            else {
+                focusIfNeeded(__classPrivateFieldGet(this, _ModalDialogElement_openButton, "f"));
+            }
+            __classPrivateFieldSet(this, _ModalDialogElement_openButton, undefined, "f");
+        }
+    }
+    get showButtons() {
+        // Dialogs may also be opened from any arbitrary button with a matching show-dialog-id data attribute
+        return document.querySelectorAll(`button[data-show-dialog-id='${this.id}']`);
+    }
+    connectedCallback() {
+        if (!this.hasAttribute('role'))
+            this.setAttribute('role', 'dialog');
+        const { signal } = (__classPrivateFieldSet(this, _ModalDialogElement_abortController, new AbortController(), "f"));
+        this.ownerDocument.addEventListener('click', event => {
+            const target = event.target;
+            const clickOutsideDialog = target.closest(this.tagName) !== this;
+            const button = target === null || target === void 0 ? void 0 : target.closest('button');
+            // go over this logic:
+            if (!button) {
+                if (clickOutsideDialog) {
+                    // This click is outside the dialog
+                    this.close();
+                }
+                return;
+            }
+            let dialogId = button.getAttribute('data-close-dialog-id');
+            if (dialogId === this.id) {
+                this.close();
+            }
+            dialogId = button.getAttribute('data-submit-dialog-id');
+            if (dialogId === this.id) {
+                this.close(true);
+            }
+            dialogId = button.getAttribute('data-show-dialog-id');
+            if (dialogId === this.id) {
+                //TODO: see if I can remove this
+                event.stopPropagation();
+                __classPrivateFieldSet(this, _ModalDialogElement_openButton, button, "f");
+                this.show();
+            }
+        }, { signal });
+        this.addEventListener('keydown', e => __classPrivateFieldGet(this, _ModalDialogElement_instances, "m", _ModalDialogElement_keydown).call(this, e));
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = __classPrivateFieldGet(this, _ModalDialogElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+    }
+    show() {
+        this.open = true;
+    }
+    close(closed = false) {
+        if (this.open === false)
+            return;
+        const eventType = closed ? 'close' : 'cancel';
+        const dialogEvent = new Event(eventType);
+        this.dispatchEvent(dialogEvent);
+        this.open = false;
+    }
+}
+_ModalDialogElement_focusAbortController = new WeakMap(), _ModalDialogElement_abortController = new WeakMap(), _ModalDialogElement_openButton = new WeakMap(), _ModalDialogElement_shouldTryLoadingFragment = new WeakMap(), _ModalDialogElement_instances = new WeakSet(), _ModalDialogElement_overlayBackdrop_get = function _ModalDialogElement_overlayBackdrop_get() {
+    var _a;
+    if ((_a = this.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-modal-dialog-overlay')) {
+        return this.parentElement;
+    }
+    return null;
+}, _ModalDialogElement_keydown = function _ModalDialogElement_keydown(event) {
+    if (!(event instanceof KeyboardEvent))
+        return;
+    if (event.isComposing)
+        return;
+    switch (event.key) {
+        case 'Escape':
+            if (this.open) {
+                this.close();
+                event.preventDefault();
+                event.stopPropagation();
+            }
+            break;
+    }
+};
+if (!window.customElements.get('modal-dialog')) {
+    window.ModalDialogElement = ModalDialogElement;
+    window.customElements.define('modal-dialog', ModalDialogElement);
+}

data/app/components/primer/alpha/toggle-switch-element.d.ts

@@ -0,0 +1,28 @@
+export declare class ToggleSwitchElement extends HTMLElement {
+    switch: HTMLElement;
+    loadingSpinner: HTMLElement;
+    errorIcon: HTMLElement;
+    get src(): string | null;
+    get csrf(): string | null;
+    get csrfField(): string;
+    isRemote(): boolean;
+    toggle(): void;
+    turnOn(): void;
+    turnOff(): void;
+    isOn(): boolean;
+    isOff(): boolean;
+    isDisabled(): boolean;
+    disable(): void;
+    enable(): void;
+    private performToggle;
+    private setLoadingState;
+    private setSuccessState;
+    private setErrorState;
+    private setFinishedState;
+    private check;
+}
+declare global {
+    interface Window {
+        ToggleSwitchElement: typeof ToggleSwitchElement;
+    }
+}

data/app/components/primer/alpha/toggle-switch-element.js

@@ -0,0 +1,135 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+/* eslint-disable custom-elements/define-tag-after-class-definition */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { controller, target } from '@github/catalyst';
+import { debounce } from '@github/mini-throttle/decorators';
+let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
+    get src() {
+        const src = this.getAttribute('src');
+        if (!src)
+            return null;
+        const link = this.ownerDocument.createElement('a');
+        link.href = src;
+        return link.href;
+    }
+    get csrf() {
+        const csrfElement = this.querySelector('[data-csrf]');
+        return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null;
+    }
+    get csrfField() {
+        // the authenticity token is passed into the element and is not generated in js land
+        return this.getAttribute('csrf-field') || 'authenticity_token';
+    }
+    isRemote() {
+        return this.src != null;
+    }
+    toggle() {
+        if (this.isRemote()) {
+            this.setLoadingState();
+            this.check();
+        }
+        else {
+            this.performToggle();
+        }
+    }
+    turnOn() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-checked', 'true');
+        this.classList.add('ToggleSwitch--checked');
+    }
+    turnOff() {
+        if (this.isDisabled()) {
+            return;
+        }
+        this.switch.setAttribute('aria-checked', 'false');
+        this.classList.remove('ToggleSwitch--checked');
+    }
+    isOn() {
+        return this.switch.getAttribute('aria-checked') === 'true';
+    }
+    isOff() {
+        return !this.isOn();
+    }
+    isDisabled() {
+        return this.switch.getAttribute('aria-disabled') === 'true';
+    }
+    disable() {
+        this.switch.setAttribute('aria-disabled', 'true');
+    }
+    enable() {
+        this.switch.setAttribute('aria-disabled', 'false');
+    }
+    performToggle() {
+        if (this.isOn()) {
+            this.turnOff();
+        }
+        else {
+            this.turnOn();
+        }
+    }
+    setLoadingState() {
+        this.disable();
+        this.errorIcon.setAttribute('hidden', 'hidden');
+        this.loadingSpinner.removeAttribute('hidden');
+    }
+    setSuccessState() {
+        this.setFinishedState(false);
+    }
+    setErrorState() {
+        this.setFinishedState(true);
+    }
+    setFinishedState(error) {
+        if (error) {
+            this.errorIcon.removeAttribute('hidden');
+        }
+        this.loadingSpinner.setAttribute('hidden', 'hidden');
+        this.enable();
+    }
+    async check() {
+        const body = new FormData();
+        if (this.csrf) {
+            body.append(this.csrfField, this.csrf);
+        }
+        body.append('value', this.isOn() ? '1' : '0');
+        try {
+            const response = await fetch(this.src, {
+                credentials: 'same-origin',
+                method: 'POST',
+                body
+            });
+            if (response.ok) {
+                this.setSuccessState();
+                this.performToggle();
+            }
+            else {
+                this.setErrorState();
+            }
+        }
+        catch (error) {
+            this.setErrorState();
+        }
+    }
+};
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "switch", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "loadingSpinner", void 0);
+__decorate([
+    target
+], ToggleSwitchElement.prototype, "errorIcon", void 0);
+__decorate([
+    debounce(300)
+], ToggleSwitchElement.prototype, "check", null);
+ToggleSwitchElement = __decorate([
+    controller
+], ToggleSwitchElement);
+export { ToggleSwitchElement };

data/app/components/primer/alpha/toggle-switch-element.ts

@@ -0,0 +1,147 @@
+/* eslint-disable custom-elements/expose-class-on-global */
+/* eslint-disable custom-elements/define-tag-after-class-definition */
+
+import {controller, target} from '@github/catalyst'
+import {debounce} from '@github/mini-throttle/decorators'
+
+@controller
+export class ToggleSwitchElement extends HTMLElement {
+  @target switch: HTMLElement
+  @target loadingSpinner: HTMLElement
+  @target errorIcon: HTMLElement
+
+  get src(): string | null {
+    const src = this.getAttribute('src')
+    if (!src) return null
+
+    const link = this.ownerDocument.createElement('a')
+    link.href = src
+    return link.href
+  }
+
+  get csrf(): string | null {
+    const csrfElement = this.querySelector('[data-csrf]')
+    return this.getAttribute('csrf') || (csrfElement instanceof HTMLInputElement && csrfElement.value) || null
+  }
+
+  get csrfField(): string {
+    // the authenticity token is passed into the element and is not generated in js land
+
+    return this.getAttribute('csrf-field') || 'authenticity_token'
+  }
+
+  isRemote(): boolean {
+    return this.src != null
+  }
+
+  toggle() {
+    if (this.isRemote()) {
+      this.setLoadingState()
+      this.check()
+    } else {
+      this.performToggle()
+    }
+  }
+
+  turnOn(): void {
+    if (this.isDisabled()) {
+      return
+    }
+
+    this.switch.setAttribute('aria-checked', 'true')
+    this.classList.add('ToggleSwitch--checked')
+  }
+
+  turnOff(): void {
+    if (this.isDisabled()) {
+      return
+    }
+
+    this.switch.setAttribute('aria-checked', 'false')
+    this.classList.remove('ToggleSwitch--checked')
+  }
+
+  isOn(): boolean {
+    return this.switch.getAttribute('aria-checked') === 'true'
+  }
+
+  isOff(): boolean {
+    return !this.isOn()
+  }
+
+  isDisabled(): boolean {
+    return this.switch.getAttribute('aria-disabled') === 'true'
+  }
+
+  disable(): void {
+    this.switch.setAttribute('aria-disabled', 'true')
+  }
+
+  enable(): void {
+    this.switch.setAttribute('aria-disabled', 'false')
+  }
+
+  private performToggle(): void {
+    if (this.isOn()) {
+      this.turnOff()
+    } else {
+      this.turnOn()
+    }
+  }
+
+  private setLoadingState(): void {
+    this.disable()
+    this.errorIcon.setAttribute('hidden', 'hidden')
+    this.loadingSpinner.removeAttribute('hidden')
+  }
+
+  private setSuccessState(): void {
+    this.setFinishedState(false)
+  }
+
+  private setErrorState(): void {
+    this.setFinishedState(true)
+  }
+
+  private setFinishedState(error: boolean): void {
+    if (error) {
+      this.errorIcon.removeAttribute('hidden')
+    }
+
+    this.loadingSpinner.setAttribute('hidden', 'hidden')
+    this.enable()
+  }
+
+  @debounce(300)
+  private async check() {
+    const body = new FormData()
+
+    if (this.csrf) {
+      body.append(this.csrfField, this.csrf)
+    }
+
+    body.append('value', this.isOn() ? '1' : '0')
+
+    try {
+      const response = await fetch(this.src!, {
+        credentials: 'same-origin',
+        method: 'POST',
+        body
+      })
+      if (response.ok) {
+        this.setSuccessState()
+        this.performToggle()
+      } else {
+        this.setErrorState()
+      }
+    } catch (error) {
+      this.setErrorState()
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ToggleSwitchElement: typeof ToggleSwitchElement
+  }
+}

data/app/components/primer/alpha/toggle_switch.html.erb

@@ -0,0 +1,44 @@
+<%= render(Primer::BaseComponent.new(tag: "toggle-switch", **@system_arguments)) do %>
+  <%= render(Primer::OcticonComponent.new(size: :small, color: :danger, icon: :alert, hidden: "true", data: { target: "toggle-switch.errorIcon" })) %>
+  <%= render(Primer::SpinnerComponent.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
+  <%= render(Primer::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %>
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content("On")) %>
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content("Off")) %>
+  <% end %>
+
+  <%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", role: "switch", data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, aria: { checked: on?, disabled: disabled?, label: "Switch" })) do %>
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-icons", aria: { hidden: true })) do %>
+      <%= render(Primer::Box.new(classes: "ToggleSwitch-lineIcon")) do %>
+        <%= render(Primer::BaseComponent.new(
+          tag: :svg,
+          width: @size == :small ? 12 : 16,
+          height: @size == :small ? 12 : 16,
+          viewBox: "0 0 16 16",
+          fill: "currentColor",
+          xmlns: "http://www.w3.org/2000/svg",
+          aria: { hidden: true },
+          focusable: false
+        )) do %>
+          <path fill-rule="evenodd" d="M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z" />
+        <% end %>
+      <% end %>
+
+      <%= render(Primer::Box.new(classes: "ToggleSwitch-circleIcon")) do %>
+        <%= render(Primer::BaseComponent.new(
+          tag: :svg,
+          width: @size == :small ? 12 : 16,
+          height: @size == :small ? 12 : 16,
+          viewBox: "0 0 16 16",
+          fill: "currentColor",
+          xmlns: "http://www.w3.org/2000/svg",
+          aria: { hidden: true },
+          focusable: false
+        )) do %>
+          <path fill-rule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
+        <% end %>
+      <% end %>
+    <% end %>
+
+    <%= render(Primer::Box.new(classes: "ToggleSwitch-knob")) %>
+  <% end %>
+<% end %>

data/app/components/primer/alpha/toggle_switch.rb

@@ -0,0 +1,89 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # The ToggleSwitch component is a button that toggles between two boolean states. It is meant to be used for
+    # settings that should cause an immediate update. If configured with a "src" attribute, the component will
+    # make a POST request containing data of the form "value: 0 | 1".
+    class ToggleSwitch < Primer::Component
+      SIZE_DEFAULT = :medium
+      SIZE_MAPPINGS = {
+        SIZE_DEFAULT => nil,
+        :small => "ToggleSwitch--small"
+      }.freeze
+      SIZE_OPTIONS = SIZE_MAPPINGS.keys.freeze
+
+      STATUS_LABEL_POSITION_DEFAULT = :start
+      STATUS_LABEL_POSITION_MAPPINGS = {
+        STATUS_LABEL_POSITION_DEFAULT => nil,
+        :end => "ToggleSwitch--statusAtEnd"
+      }.freeze
+      STATUS_LABEL_POSITION_OPTIONS = STATUS_LABEL_POSITION_MAPPINGS.keys.freeze
+
+      # @example Default
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo")) %>
+      #
+      # @example Checked
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", checked: true)) %>
+      #
+      # @example Disabled
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", enabled: false)) %>
+      #
+      # @example Checked and Disabled
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", checked: true, enabled: false)) %>
+      #
+      # @example Small
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", size: :small)) %>
+      #
+      # @example With status label positioned at the end
+      #   <%= render(Primer::Alpha::ToggleSwitch.new(src: "/foo", status_label_position: :end)) %>
+      #
+      # @param src [String] The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests.
+      # @param csrf_token [String] A CSRF token that will be sent to the server as "authenticity_token" when the toggle switch is toggled. Unused if `src` is `nil`.
+      # @param checked [Boolean] Whether the toggle switch is on or off.
+      # @param enabled [Boolean] Whether or not the toggle switch responds to user input.
+      # @param size [Symbol] What size toggle switch to render. <%= one_of(Primer::Alpha::ToggleSwitch::STATUS_LABEL_POSITION_OPTIONS) %>
+      # @param status_label_position [Symbol] Which side of the toggle switch to render the status label. <%= one_of(Primer::Alpha::ToggleSwitch::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(src: nil, csrf_token: nil, checked: false, enabled: true, size: SIZE_DEFAULT, status_label_position: STATUS_LABEL_POSITION_DEFAULT, **system_arguments)
+        @src = src
+        @csrf_token = csrf_token
+        @checked = checked
+        @enabled = enabled
+        @system_arguments = system_arguments
+
+        @size = fetch_or_fallback(SIZE_OPTIONS, size, SIZE_DEFAULT)
+        @status_label_position = fetch_or_fallback(
+          STATUS_LABEL_POSITION_OPTIONS, status_label_position, STATUS_LABEL_POSITION_DEFAULT
+        )
+
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "ToggleSwitch",
+          on? ? "ToggleSwitch--checked" : nil,
+          enabled? ? nil : "ToggleSwitch--disabled",
+          STATUS_LABEL_POSITION_MAPPINGS[@status_label_position],
+          SIZE_MAPPINGS[@size]
+        )
+
+        @system_arguments[:src] = @src if @src
+
+        return unless @src && @csrf_token
+
+        @system_arguments[:csrf] = @csrf_token
+      end
+
+      def on?
+        @checked
+      end
+
+      def enabled?
+        @enabled
+      end
+
+      def disabled?
+        !enabled?
+      end
+    end
+  end
+end

data/app/components/primer/alpha/tool-tip-element.d.ts

@@ -9,6 +9,8 @@ declare class ToolTipElement extends HTMLElement {
     get direction(): Direction;
     set direction(value: Direction);
     get control(): HTMLElement | null;
+    set hiddenFromView(value: true | false);
+    get hiddenFromView(): true | false;
     connectedCallback(): void;
     disconnectedCallback(): void;
     handleEvent(event: Event): void;