ariadne_view_components 0.0.47-x86_64-linux → 0.0.49-x86_64-linux

data/app/components/ariadne/close_button_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Simple button with X icon to close models and such
+  class CloseButtonComponent < Ariadne::Component
+    DEFAULT_TAG = :button
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = "ariadne-border-none ariadne-bg-transparent ariadne-shadow-none hover:ariadne-bg-transparent"
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::CloseButtonComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(tag: DEFAULT_TAG, classes: "", icon_classes: "", size: :xs, aria_label: nil, scheme: :none, attributes: {})
+      raise ArgumentError, "An 'aria_label' argument is required to use a Close Button. Include as much detail as you can about what the button will be closing." if aria_label.blank?
+
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @attributes = { "aria-label": aria_label }.merge(attributes)
+      @classes = merge_class_names(
+        DEFAULT_CLASSES,
+        classes,
+      )
+
+      @scheme = scheme
+      @size = size
+      @icon_classses = icon_classes
+    end
+  end
+end

data/app/components/ariadne/combobox_component.html.erb

@@ -0,0 +1,14 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+  <%= render Ariadne::BaseComponent.new(tag: :input, classes: @input_classes, attributes: @input_attributes) do %>
+    <% if icon? %>
+      <%= icon %>
+    <% else %>
+      <%= Ariadne::HeroiconComponent.new(icon: :cube, variant: HeroiconsHelper::Icon::VARIANT_OUTLINE) %>
+    <% end %>
+  <% end %>
+  <%= render Ariadne::BaseComponent.new(tag: @options_wrapper_tag, classes: @options_wrapper_classes, attributes: @options_wrapper_attributes) do %>
+    <% options.each do |option| %>
+      <%= option %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/ariadne/combobox_component.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Input with a dropdown selection
+  class ComboboxComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    DEFAULT_OPTIONS_WRAPPER_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group ariadne-w-fit ariadne-relative",
+      options_wrapper: "group-data-[toggleable-state-value=false]:ariadne-hidden ariadne-absolute ariadne-w-full ariadne-z-10",
+      input: "",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {
+        "data-controller": "options toggleable string-match",
+      },
+      options_wrapper: {},
+      input: {
+        type: "text",
+        autocomplete: "off",
+        "data-action": "input->string-match#change focusin->toggleable#on",
+      },
+    }
+
+    renders_many :options
+
+    renders_one :icon, Ariadne::HeroiconComponent
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ComboboxComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      classes: "",
+      attributes: {},
+      options_tag: DEFAULT_OPTIONS_WRAPPER_TAG,
+      options_wrapper_classes: "",
+      options_wrapper_attributes: {},
+      close_on_outside_click: true,
+      close_on_select: false,
+      initially_open: false,
+      single_selection: false,
+      toggleable_options: true, # Do options unselect if clicked a second time
+      input_classes: "",
+      input_attributes: {}
+    )
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper]
+        .merge({
+          "data-options-is-multi-value": !single_selection,
+          "data-options-toggleable-value": toggleable_options,
+          "data-toggleable-close-on-outside-click-value": close_on_outside_click,
+          "data-toggleable-state-value": initially_open,
+
+        })
+        .merge(attributes)
+
+      @input_classes = merge_class_names(DEFAULT_CLASSES[:input], input_classes)
+      @input_attributes = DEFAULT_ATTRIBUTES[:input].merge(input_attributes)
+
+      @options_wrapper_tag = check_incoming_tag(DEFAULT_OPTIONS_WRAPPER_TAG, options_tag)
+      @options_wrapper_classes = merge_class_names(DEFAULT_CLASSES[:options_wrapper], options_wrapper_classes)
+      @options_wrapper_attributes = DEFAULT_ATTRIBUTES[:options_wrapper]
+        .merge({ "data-action": close_on_select ? "click->toggleable#off" : "" })
+        .merge(options_wrapper_attributes)
+    end
+  end
+end

data/app/components/ariadne/dropdown/menu_component.d.ts

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/components/ariadne/dropdown/menu_component.js

@@ -0,0 +1 @@
+import '@github/details-menu-element';

data/app/components/ariadne/events_controller/events_controller.d.ts

@@ -0,0 +1,4 @@
+import { Controller } from '@hotwired/stimulus';
+export default class EventsController extends Controller {
+    stopPropagation(e: Event): void;
+}

data/app/components/ariadne/events_controller/events_controller.js

@@ -0,0 +1,6 @@
+import { Controller } from '@hotwired/stimulus';
+export default class EventsController extends Controller {
+    stopPropagation(e) {
+        e.stopPropagation();
+    }
+}

data/app/components/ariadne/events_controller/events_controller.ts

@@ -0,0 +1,7 @@
+import {Controller} from '@hotwired/stimulus'
+
+export default class EventsController extends Controller {
+  stopPropagation(e: Event) {
+    e.stopPropagation()
+  }
+}

data/app/components/ariadne/layout_component.html.erb

@@ -0,0 +1,21 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+  <% if sidecars? %>
+    <%= render Ariadne::BaseComponent.new(tag: @sidecar_tag, classes: @sidecar_classes, attributes: @sidecar_attributes) do %>
+      <% sidecars.each do |sidecar| %>
+        <%= sidecar %>
+      <% end %>
+    <% end %>
+  <% end %>
+  <%= render Ariadne::BaseComponent.new(tag: @main_tag, classes: @main_classes, attributes: @main_attributes) do %>
+    <% mains.each do |main| %>
+      <%= main %>
+    <% end %>
+  <% end %>
+  <% if asides? %>
+    <%= render Ariadne::BaseComponent.new(tag: @aside_tag, classes: @aside_classes, attributes: @aside_attributes) do %>
+      <% asides.each do |aside| %>
+        <%= aside %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/components/ariadne/layout_component.rb

@@ -0,0 +1,69 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Layout component to control the widths of 1-3 columns
+  class LayoutComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    DEFAULT_SIDECAR_TAG = :div
+    DEFAULT_ASIDE_TAG = :div
+    DEFAULT_MAIN_TAG = :div
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group ariadne-flex ariadne-gap-2 ariadne-flex-col md:ariadne-flex-row",
+      sidecar: "ariadne-w-full md:ariadne-w-1/6",
+      main: "ariadne-grow",
+      aside: "ariadne-w-full md:ariadne-w-1/6",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {},
+      sidecar: {},
+      main: {},
+      aside: {},
+    }
+
+    renders_many :sidecars
+
+    renders_many :mains
+
+    renders_many :asides
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::LayoutComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      classes: "",
+      attributes: {},
+      main_tag: DEFAULT_MAIN_TAG,
+      main_classes: "",
+      main_attributes: {},
+      sidecar_tag: DEFAULT_SIDECAR_TAG,
+      sidecar_classes: "",
+      sidecar_attributes: {},
+      aside_tag: DEFAULT_ASIDE_TAG,
+      aside_classes: "",
+      aside_attributes: {}
+    )
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper].merge(attributes)
+
+      @sidecar_tag = check_incoming_tag(DEFAULT_SIDECAR_TAG, tag)
+      @sidecar_attributes = DEFAULT_ATTRIBUTES[:sidecar].merge(sidecar_attributes)
+      @sidecar_classes = merge_class_names(DEFAULT_CLASSES[:sidecar], sidecar_classes)
+
+      @main_tag = check_incoming_tag(DEFAULT_MAIN_TAG, tag)
+      @main_attributes = DEFAULT_ATTRIBUTES[:main].merge(main_attributes)
+      @main_classes = merge_class_names(DEFAULT_CLASSES[:main], main_classes)
+
+      @aside_tag = check_incoming_tag(DEFAULT_ASIDE_TAG, tag)
+      @aside_attributes = DEFAULT_ATTRIBUTES[:aside].merge(aside_attributes)
+      @aside_classes = merge_class_names(DEFAULT_CLASSES[:aside], aside_classes)
+    end
+  end
+end

data/app/components/ariadne/modal_component.html.erb

@@ -0,0 +1,11 @@
+<%= render Ariadne::BaseComponent.new(tag: @tag, classes: @classes, attributes: @attributes) do %>
+  <%= base %>
+  <%= render Ariadne::BaseComponent.new(tag: @shadow_tag, classes: @shadow_classes, attributes: @shadow_attributes) do %>
+    <div class="<%= @content_classes %>" data-controller="events" data-action="click->events#stopPropagation">
+      <%= render Ariadne::CloseButtonComponent.new(classes: @close_button_classes, aria_label: @close_button_aria_label, attributes: { "data-action": "click->toggleable#toggle" }) %>
+      <% items.each do |item| %>
+        <%= item %>
+      <% end %>
+    </div>
+  <% end %>
+<% end %>

data/app/components/ariadne/modal_component.rb

@@ -0,0 +1,88 @@
+# frozen_string_literal: true
+
+module Ariadne
+  # Renders a full screen modal
+  class ModalComponent < Ariadne::Component
+    DEFAULT_TAG = :div
+    DEFAULT_SHADOW_TAG = :div
+    TAG_OPTIONS = [DEFAULT_TAG].freeze
+
+    DEFAULT_CLASSES = {
+      wrapper: "ariadne-group",
+      shadow: "ariadne-w-screen ariadne-h-screen ariadne-bg-black/20 ariadne-fixed ariadne-top-0 ariadne-left-0 ariadne-flex ariadne-justify-center ariadne-items-center data-[close-on-click=true]:ariadne-cursor-pointer",
+      content: "ariadne-bg-white ariadne-p-2 ariadne-relative ariadne-cursor-default",
+      close_button: "ariadne-absolute ariadne-right-2 ariadne-pt-1 ariadne-pb-1 ariadne-pl-1 ariadne-pr-1",
+    }
+
+    DEFAULT_ATTRIBUTES = {
+      wrapper: {
+        "data-controller": "toggleable",
+        "data-action": "click->toggleable#toggle",
+        "data-toggleable-anti-attrs-value": '["aria-hidden"]',
+      },
+      shadow: {},
+      content: { role: :dialog },
+      close_button: {},
+    }
+
+    SHADOW_VISIBILITY_CLASSES = "group-aria-hidden:ariadne-hidden"
+
+    renders_one :base
+
+    renders_many :items
+
+    # @example Default
+    #
+    #   <%= render(Ariadne::ModalComponent.new) { "Example" } %>
+    #
+    # @param tag [Symbol, String] The rendered tag name.
+    # @param classes [String] <%= link_to_classes_docs %>
+    # @param attributes [Hash] <%= link_to_attributes_docs %>
+    def initialize(
+      tag: DEFAULT_TAG,
+      classes: "",
+      attributes: {},
+      initial_visible: false,
+      shadow_tag: DEFAULT_SHADOW_TAG,
+      shadow_classes: "",
+      shadow_attributes: {},
+      content_classes: "",
+      content_attributes: {},
+      close_button_classes: "",
+      close_button_attributes: {},
+      close_button_aria_label: "Close modal button",
+      close_on_shadow_click: true
+    )
+      @tag = check_incoming_tag(DEFAULT_TAG, tag)
+      @classes = merge_class_names(DEFAULT_CLASSES[:wrapper], classes)
+      @attributes = DEFAULT_ATTRIBUTES[:wrapper]
+        .merge({
+          "aria-hidden": true,
+          "data-toggleable-state-value": false,
+        })
+        .merge(attributes)
+
+      @initial_visible = initial_visible
+      @shadow_tag = check_incoming_tag(DEFAULT_SHADOW_TAG, shadow_tag)
+      @shadow_classes = merge_class_names(
+        DEFAULT_CLASSES[:shadow],
+        SHADOW_VISIBILITY_CLASSES,
+        shadow_classes,
+      )
+      @shadow_attributes = DEFAULT_ATTRIBUTES[:shadow]
+        .merge({
+          "data-controller": "events",
+          "data-close-on-click": close_on_shadow_click,
+          "data-action": close_on_shadow_click ? "" : "click->events#stopPropagation",
+        })
+        .merge(shadow_attributes)
+
+      @content_classes = merge_class_names(DEFAULT_CLASSES[:content], content_classes)
+      @content_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)
+
+      @close_button_aria_label = close_button_aria_label
+      @close_button_classes = merge_class_names(DEFAULT_CLASSES[:close_button], close_button_classes)
+      @close_button_attributes = DEFAULT_ATTRIBUTES[:content].merge(content_attributes)
+    end
+  end
+end

data/app/components/ariadne/options_controller/options_controller.d.ts

@@ -0,0 +1,40 @@
+import { TOutletChangeData } from '../outlet_manager_controller/outlet_manager_controller';
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+type TOptionKey = string | number;
+type TActiveOptions = {
+    [k: TOptionKey]: boolean;
+};
+export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
+    select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
+}
+export default class OptionsController extends SyncedBooleanAttributesController<TActiveOptions> implements OptionsOutlet {
+    #private;
+    static outlets: string[];
+    static targets: string[];
+    static values: {
+        activeOptions: ObjectConstructor;
+        isMulti: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        toggleable: {
+            type: BooleanConstructor;
+            default: boolean;
+        };
+        syncedAttrs: ArrayConstructor;
+        antiAttrs: ArrayConstructor;
+        protectAttrs: BooleanConstructor;
+        outletEvents: ArrayConstructor;
+    };
+    readonly optionTargets: Array<Element>;
+    activeOptionsValue: TActiveOptions;
+    readonly isMultiValue: boolean;
+    readonly toggleableValue: boolean;
+    optionTargetLookup: Map<Element, TOptionKey>;
+    connect(): void;
+    select(event: Event, updateTo?: TOutletChangeData<TActiveOptions>): void;
+    getValueForElement(element: Element): boolean | null;
+    getState(): TActiveOptions;
+    outletUpdate: (event: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void;
+}
+export {};

data/app/components/ariadne/options_controller/options_controller.js

@@ -0,0 +1,98 @@
+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 _OptionsController_instances, _OptionsController_shouldChangeState, _OptionsController_activateIndex, _OptionsController_deactivateIndex, _OptionsController_getElementKey, _OptionsController_buildActiveTargets;
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller';
+class OptionsController extends SyncedBooleanAttributesController {
+    constructor() {
+        super(...arguments);
+        _OptionsController_instances.add(this);
+        this.optionTargetLookup = new Map();
+        this.outletUpdate = this.select;
+    }
+    connect() {
+        __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_buildActiveTargets).call(this);
+        this.syncElementAttributes();
+    }
+    select(event, updateTo = {}) {
+        var _a;
+        const activeOptions = updateTo.data;
+        for (let index in this.optionTargets) {
+            const target = this.optionTargets[index];
+            const wasSelected = target === event.currentTarget;
+            const isCurrentlyActive = (_a = this.getValueForElement(target)) !== null && _a !== void 0 ? _a : false;
+            const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, target);
+            const shouldChangeState = activeOptions !== undefined
+                ? !!activeOptions[optionKey] !== isCurrentlyActive
+                : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_shouldChangeState).call(this, isCurrentlyActive, wasSelected);
+            if (shouldChangeState) {
+                const willBeActive = !isCurrentlyActive;
+                this.updateAttributesForElement(target, willBeActive);
+                willBeActive ? __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateIndex).call(this, optionKey) : __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_deactivateIndex).call(this, optionKey);
+            }
+        }
+        this.sendToOutlets(event, Object.assign(Object.assign({}, updateTo), { data: this.activeOptionsValue }));
+    }
+    getValueForElement(element) {
+        var _a;
+        if (!this.optionTargetLookup.has(element)) {
+            return null;
+        }
+        const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, element);
+        return (_a = this.activeOptionsValue[optionKey]) !== null && _a !== void 0 ? _a : false;
+    }
+    getState() {
+        return this.activeOptionsValue;
+    }
+}
+_OptionsController_instances = new WeakSet(), _OptionsController_shouldChangeState = function _OptionsController_shouldChangeState(isCurrentlyActive, wasSelected) {
+    if (!wasSelected && !isCurrentlyActive) {
+        // Not currently on and wasn't selected, no reason to change
+        return false;
+    }
+    if (!wasSelected && isCurrentlyActive && this.isMultiValue) {
+        // It wasn't selected and it is on. However, multi value is on so just leave it
+        return false;
+    }
+    if (wasSelected && isCurrentlyActive && !this.toggleableValue) {
+        // It was selected and it's on. But toggle isn't on so just leave it
+        return false;
+    }
+    // Wasn't selected and it's active but only one can be active
+    // Was selected and it's active but toggling behavior means it should deactivate
+    // Was selected and it's not on, so it just needs to be turned on
+    return true;
+}, _OptionsController_activateIndex = function _OptionsController_activateIndex(key) {
+    this.activeOptionsValue = Object.assign(Object.assign({}, this.activeOptionsValue), { [key]: true });
+}, _OptionsController_deactivateIndex = function _OptionsController_deactivateIndex(key) {
+    const copy = Object.assign({}, this.activeOptionsValue);
+    delete copy[key];
+    this.activeOptionsValue = copy;
+}, _OptionsController_getElementKey = function _OptionsController_getElementKey(element) {
+    const elementValue = element.getAttribute('data-option-value');
+    if (elementValue) {
+        return elementValue;
+    }
+    return element.innerText.trim();
+}, _OptionsController_buildActiveTargets = function _OptionsController_buildActiveTargets() {
+    this.optionTargetLookup = new Map();
+    for (let index in this.optionTargets) {
+        const target = this.optionTargets[index];
+        const optionKey = __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_getElementKey).call(this, target);
+        this.optionTargetLookup.set(target, optionKey);
+        const onSyncAttr = !!this.syncedAttrsValue.find(attr => target.getAttribute(attr) === 'true');
+        if (onSyncAttr) {
+            __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateIndex).call(this, optionKey);
+        }
+        else {
+            const hasOffAttr = !!this.antiAttrsValue.find(attr => target.getAttribute(attr) === 'false');
+            hasOffAttr && __classPrivateFieldGet(this, _OptionsController_instances, "m", _OptionsController_activateIndex).call(this, optionKey);
+        }
+    }
+};
+OptionsController.outlets = SyncedBooleanAttributesController.outlets;
+OptionsController.targets = ['option'];
+OptionsController.values = Object.assign(Object.assign({}, SyncedBooleanAttributesController.values), { activeOptions: Object, isMulti: { type: Boolean, default: false }, toggleable: { type: Boolean, default: false } });
+export default OptionsController;

data/app/components/ariadne/options_controller/options_controller.ts

@@ -0,0 +1,132 @@
+import {TOutletChangeData} from '../outlet_manager_controller/outlet_manager_controller'
+import SyncedBooleanAttributesController from '../synced_boolean_attributes_controller/synced_boolean_attributes_controller'
+
+type TOptionKey = string | number
+type TActiveOptions = {[k: TOptionKey]: boolean}
+export interface OptionsOutlet extends SyncedBooleanAttributesController<TActiveOptions> {
+  select: (e: Event, updateTo?: TOutletChangeData<TActiveOptions>) => void
+}
+
+export default class OptionsController
+  extends SyncedBooleanAttributesController<TActiveOptions>
+  implements OptionsOutlet
+{
+  static outlets = SyncedBooleanAttributesController.outlets
+  static targets = ['option']
+
+  static values = {
+    ...SyncedBooleanAttributesController.values,
+    activeOptions: Object, // The currently active elements in TActiveOptions format
+    isMulti: {type: Boolean, default: false}, // Allows more than one selection
+    toggleable: {type: Boolean, default: false}, // If true, selecting the same value twice will turn it off. If false, nothing happens
+  }
+
+  // Targets
+  declare readonly optionTargets: Array<Element>
+
+  // Values
+  declare activeOptionsValue: TActiveOptions
+  declare readonly isMultiValue: boolean
+  declare readonly toggleableValue: boolean
+
+  optionTargetLookup: Map<Element, TOptionKey> = new Map()
+
+  connect(): void {
+    this.#buildActiveTargets()
+    this.syncElementAttributes()
+  }
+
+  select(event: Event, updateTo: TOutletChangeData<TActiveOptions> = {}) {
+    const activeOptions = updateTo.data
+    for (let index in this.optionTargets) {
+      const target = this.optionTargets[index]
+      const wasSelected = target === event.currentTarget
+      const isCurrentlyActive = this.getValueForElement(target) ?? false
+      const optionKey = this.#getElementKey(target)
+      const shouldChangeState =
+        activeOptions !== undefined
+          ? !!activeOptions[optionKey] !== isCurrentlyActive
+          : this.#shouldChangeState(isCurrentlyActive, wasSelected)
+
+      if (shouldChangeState) {
+        const willBeActive = !isCurrentlyActive
+        this.updateAttributesForElement(target, willBeActive)
+        willBeActive ? this.#activateIndex(optionKey) : this.#deactivateIndex(optionKey)
+      }
+    }
+
+    this.sendToOutlets(event, {...updateTo, data: this.activeOptionsValue})
+  }
+
+  #shouldChangeState(isCurrentlyActive: boolean, wasSelected: boolean) {
+    if (!wasSelected && !isCurrentlyActive) {
+      // Not currently on and wasn't selected, no reason to change
+      return false
+    }
+
+    if (!wasSelected && isCurrentlyActive && this.isMultiValue) {
+      // It wasn't selected and it is on. However, multi value is on so just leave it
+      return false
+    }
+
+    if (wasSelected && isCurrentlyActive && !this.toggleableValue) {
+      // It was selected and it's on. But toggle isn't on so just leave it
+      return false
+    }
+
+    // Wasn't selected and it's active but only one can be active
+    // Was selected and it's active but toggling behavior means it should deactivate
+    // Was selected and it's not on, so it just needs to be turned on
+    return true
+  }
+
+  #activateIndex(key: TOptionKey) {
+    this.activeOptionsValue = {...this.activeOptionsValue, [key]: true}
+  }
+
+  #deactivateIndex(key: TOptionKey) {
+    const copy = {...this.activeOptionsValue}
+    delete copy[key]
+    this.activeOptionsValue = copy
+  }
+
+  #getElementKey(element: Element) {
+    const elementValue = element.getAttribute('data-option-value')
+    if (elementValue) {
+      return elementValue
+    }
+
+    return (element as HTMLElement).innerText.trim()
+  }
+
+  #buildActiveTargets() {
+    this.optionTargetLookup = new Map()
+    for (let index in this.optionTargets) {
+      const target = this.optionTargets[index]
+      const optionKey = this.#getElementKey(target)
+      this.optionTargetLookup.set(target, optionKey)
+      const onSyncAttr = !!this.syncedAttrsValue.find(attr => target.getAttribute(attr) === 'true')
+      if (onSyncAttr) {
+        this.#activateIndex(optionKey)
+      } else {
+        const hasOffAttr = !!this.antiAttrsValue.find(attr => target.getAttribute(attr) === 'false')
+        hasOffAttr && this.#activateIndex(optionKey)
+      }
+    }
+  }
+
+  getValueForElement(element: Element) {
+    if (!this.optionTargetLookup.has(element)) {
+      return null
+    }
+
+    const optionKey = this.#getElementKey(element)
+    return this.activeOptionsValue[optionKey] ?? false
+  }
+
+  getState() {
+    return this.activeOptionsValue
+  }
+
+  outletUpdate = this.select
+}

data/app/components/ariadne/outlet_manager_controller/outlet_manager_controller.d.ts

@@ -0,0 +1,42 @@
+import { Controller } from '@hotwired/stimulus';
+type TOutletEventLookup = boolean | {
+    [k: string]: TOutletEventLookup;
+};
+export type TOutletChangeData<T> = {
+    eventKey?: string;
+    data?: T;
+} | undefined;
+export default class OutletManagerController<T> extends Controller {
+    #private;
+    static values: {
+        outletEvents: ArrayConstructor;
+    };
+    readonly outletEventsValue: Array<string>;
+    readonly hasOutletEventsValue: boolean;
+    static outlets: string[];
+    readonly toggleableOutlets: Array<OutletManagerController<T>>;
+    readonly hasToggleableOutlet: boolean;
+    readonly optionsOutlets: Array<OutletManagerController<T>>;
+    readonly hasOptionsOutlet: boolean;
+    readonly stringMatchOutlets: Array<OutletManagerController<T>>;
+    readonly hasStringMatchOutlet: boolean;
+    outletEventsLookup: TOutletEventLookup | null;
+    static domEvents: {
+        [k: string]: boolean;
+    };
+    eventRecords: Map<Event, boolean>;
+    getOutlets(): Array<OutletManagerController<T>> | null | void;
+    outletUpdate(event: Event, data: TOutletChangeData<T>): void;
+    getState(): T;
+    connect(): void;
+    syncOutlets(): void;
+    sendToOutlets(event: Event, updateTo?: TOutletChangeData<T>): void;
+    isListeningForOutletEvent(eventTypes: string): boolean;
+    isDOMEventName(eventName: string): boolean;
+    getEventKey(event: Event): string;
+    hasHeardEvent(event: Event): boolean;
+    get event_key_prefix(): string;
+    get event_key_postfix(): string;
+    get outletEvents(): TOutletEventLookup;
+}
+export {};