polaris_view_components 0.6.0 → 0.7.0

data/app/assets/javascripts/polaris_view_components.js

@@ -1,21 +1,125 @@
 import { Controller } from "@hotwired/stimulus";
 
+import { get } from "@rails/request.js";
+
+class Autocomplete extends Controller {
+  static targets=[ "popover", "input", "results", "option", "emptyState" ];
+  static values={
+    url: String
+  };
+  connect() {
+    this.inputTarget.addEventListener("input", this.onInputChange);
+  }
+  disconnect() {
+    this.inputTarget.removeEventListener("input", this.onInputChange);
+  }
+  toggle() {
+    if (this.visibleOptions.length > 0) {
+      this.hideEmptyState();
+      this.popoverController.show();
+    } else if (this.value.length > 0 && this.hasEmptyStateTarget) {
+      this.showEmptyState();
+    } else {
+      this.popoverController.forceHide();
+    }
+  }
+  select(event) {
+    const input = event.currentTarget;
+    const label = input.closest("li").dataset.label;
+    const changeEvent = new CustomEvent("polaris-autocomplete:change", {
+      detail: {
+        value: input.value,
+        label: label,
+        selected: input.checked
+      }
+    });
+    this.element.dispatchEvent(changeEvent);
+  }
+  onInputChange=debounce$1((() => {
+    if (this.isRemote) {
+      this.fetchResults();
+    } else {
+      this.filterOptions();
+    }
+  }), 200);
+  get isRemote() {
+    return this.urlValue.length > 0;
+  }
+  get popoverController() {
+    return this.application.getControllerForElementAndIdentifier(this.popoverTarget, "polaris-popover");
+  }
+  get value() {
+    return this.inputTarget.value;
+  }
+  get visibleOptions() {
+    return this.optionTargets.filter((option => !option.classList.contains("Polaris--hidden")));
+  }
+  filterOptions() {
+    if (this.value === "") {
+      this.optionTargets.forEach((option => {
+        option.classList.remove("Polaris--hidden");
+      }));
+    } else {
+      const filterRegex = new RegExp(this.value, "i");
+      this.optionTargets.forEach((option => {
+        if (option.dataset.label.match(filterRegex)) {
+          option.classList.remove("Polaris--hidden");
+        } else {
+          option.classList.add("Polaris--hidden");
+        }
+      }));
+    }
+    this.toggle();
+  }
+  async fetchResults() {
+    const response = await get(this.urlValue, {
+      query: {
+        q: this.value
+      }
+    });
+    if (response.ok) {
+      const results = await response.html;
+      this.resultsTarget.innerHTML = results;
+      this.toggle();
+    }
+  }
+  showEmptyState() {
+    if (this.hasEmptyStateTarget) {
+      this.resultsTarget.classList.add("Polaris--hidden");
+      this.emptyStateTarget.classList.remove("Polaris--hidden");
+    }
+  }
+  hideEmptyState() {
+    if (this.hasEmptyStateTarget) {
+      this.emptyStateTarget.classList.add("Polaris--hidden");
+      this.resultsTarget.classList.remove("Polaris--hidden");
+    }
+  }
+}
+
+const debounce$1 = (fn, delay = 10) => {
+  let timeoutId = null;
+  return (...args) => {
+    clearTimeout(timeoutId);
+    timeoutId = setTimeout(fn, delay);
+  };
+};
+
 class Button extends Controller {
   disable(event) {
-    if (this.button.dataset.disabled) {
+    if (this.button.disabled) {
       event.preventDefault();
     } else {
-      this.button.dataset.disabled = true;
+      this.button.disabled = true;
       this.button.classList.add("Polaris-Button--disabled", "Polaris-Button--loading");
       this.buttonContent.insertAdjacentHTML("afterbegin", this.spinnerHTML);
     }
   }
   enable() {
-    if (this.button.dataset.disabled) {
+    if (this.button.disabled) {
       this.button.disabled = false;
-      delete this.button.dataset.disabled;
       this.button.classList.remove("Polaris-Button--disabled", "Polaris-Button--loading");
-      this.spinner.remove();
+      if (this.spinner) this.spinner.remove();
     }
   }
   get button() {
@@ -32,6 +136,196 @@ class Button extends Controller {
   }
 }
 
+const alpineNames = {
+  enterFromClass: "enter",
+  enterActiveClass: "enterStart",
+  enterToClass: "enterEnd",
+  leaveFromClass: "leave",
+  leaveActiveClass: "leaveStart",
+  leaveToClass: "leaveEnd"
+};
+
+const defaultOptions = {
+  transitioned: false,
+  hiddenClass: "hidden",
+  preserveOriginalClass: true,
+  removeToClasses: true
+};
+
+const useTransition = (controller, options = {}) => {
+  var _a, _b, _c;
+  const targetName = controller.element.dataset.transitionTarget;
+  let targetFromAttribute;
+  if (targetName) {
+    targetFromAttribute = controller[`${targetName}Target`];
+  }
+  const targetElement = (options === null || options === void 0 ? void 0 : options.element) || targetFromAttribute || controller.element;
+  if (!(targetElement instanceof HTMLElement || targetElement instanceof SVGElement)) return;
+  const dataset = targetElement.dataset;
+  const leaveAfter = parseInt(dataset.leaveAfter || "") || options.leaveAfter || 0;
+  const {transitioned: transitioned, hiddenClass: hiddenClass, preserveOriginalClass: preserveOriginalClass, removeToClasses: removeToClasses} = Object.assign(defaultOptions, options);
+  const controllerEnter = (_a = controller.enter) === null || _a === void 0 ? void 0 : _a.bind(controller);
+  const controllerLeave = (_b = controller.leave) === null || _b === void 0 ? void 0 : _b.bind(controller);
+  const controllerToggleTransition = (_c = controller.toggleTransition) === null || _c === void 0 ? void 0 : _c.bind(controller);
+  async function enter(event) {
+    if (controller.transitioned) return;
+    controller.transitioned = true;
+    controllerEnter && controllerEnter(event);
+    const enterFromClasses = getAttribute("enterFrom", options, dataset);
+    const enterActiveClasses = getAttribute("enterActive", options, dataset);
+    const enterToClasses = getAttribute("enterTo", options, dataset);
+    const leaveToClasses = getAttribute("leaveTo", options, dataset);
+    if (!!hiddenClass) {
+      targetElement.classList.remove(hiddenClass);
+    }
+    if (!removeToClasses) {
+      removeClasses(targetElement, leaveToClasses);
+    }
+    await transition(targetElement, enterFromClasses, enterActiveClasses, enterToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+    if (leaveAfter > 0) {
+      setTimeout((() => {
+        leave(event);
+      }), leaveAfter);
+    }
+  }
+  async function leave(event) {
+    if (!controller.transitioned) return;
+    controller.transitioned = false;
+    controllerLeave && controllerLeave(event);
+    const leaveFromClasses = getAttribute("leaveFrom", options, dataset);
+    const leaveActiveClasses = getAttribute("leaveActive", options, dataset);
+    const leaveToClasses = getAttribute("leaveTo", options, dataset);
+    const enterToClasses = getAttribute("enterTo", options, dataset);
+    if (!removeToClasses) {
+      removeClasses(targetElement, enterToClasses);
+    }
+    await transition(targetElement, leaveFromClasses, leaveActiveClasses, leaveToClasses, hiddenClass, preserveOriginalClass, removeToClasses);
+    if (!!hiddenClass) {
+      targetElement.classList.add(hiddenClass);
+    }
+  }
+  function toggleTransition(event) {
+    controllerToggleTransition && controllerToggleTransition(event);
+    if (controller.transitioned) {
+      leave();
+    } else {
+      enter();
+    }
+  }
+  async function transition(element, initialClasses, activeClasses, endClasses, hiddenClass, preserveOriginalClass, removeEndClasses) {
+    const stashedClasses = [];
+    if (preserveOriginalClass) {
+      initialClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
+      activeClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
+      endClasses.forEach((cls => element.classList.contains(cls) && cls !== hiddenClass && stashedClasses.push(cls)));
+    }
+    addClasses(element, initialClasses);
+    removeClasses(element, stashedClasses);
+    addClasses(element, activeClasses);
+    await nextAnimationFrame();
+    removeClasses(element, initialClasses);
+    addClasses(element, endClasses);
+    await afterTransition(element);
+    removeClasses(element, activeClasses);
+    if (removeEndClasses) {
+      removeClasses(element, endClasses);
+    }
+    addClasses(element, stashedClasses);
+  }
+  function initialState() {
+    controller.transitioned = transitioned;
+    if (transitioned) {
+      if (!!hiddenClass) {
+        targetElement.classList.remove(hiddenClass);
+      }
+      enter();
+    } else {
+      if (!!hiddenClass) {
+        targetElement.classList.add(hiddenClass);
+      }
+      leave();
+    }
+  }
+  function addClasses(element, classes) {
+    if (classes.length > 0) {
+      element.classList.add(...classes);
+    }
+  }
+  function removeClasses(element, classes) {
+    if (classes.length > 0) {
+      element.classList.remove(...classes);
+    }
+  }
+  initialState();
+  Object.assign(controller, {
+    enter: enter,
+    leave: leave,
+    toggleTransition: toggleTransition
+  });
+  return [ enter, leave, toggleTransition ];
+};
+
+function getAttribute(name, options, dataset) {
+  const datasetName = `transition${name[0].toUpperCase()}${name.substr(1)}`;
+  const datasetAlpineName = alpineNames[name];
+  const classes = options[name] || dataset[datasetName] || dataset[datasetAlpineName] || " ";
+  return isEmpty(classes) ? [] : classes.split(" ");
+}
+
+async function afterTransition(element) {
+  return new Promise((resolve => {
+    const duration = Number(getComputedStyle(element).transitionDuration.split(",")[0].replace("s", "")) * 1e3;
+    setTimeout((() => {
+      resolve(duration);
+    }), duration);
+  }));
+}
+
+async function nextAnimationFrame() {
+  return new Promise((resolve => {
+    requestAnimationFrame((() => {
+      requestAnimationFrame(resolve);
+    }));
+  }));
+}
+
+function isEmpty(str) {
+  return str.length === 0 || !str.trim();
+}
+
+class Frame extends Controller {
+  static targets=[ "navigationOverlay", "navigation", "saveBar" ];
+  connect() {
+    if (!this.hasNavigationTarget) {
+      return;
+    }
+    useTransition(this, {
+      element: this.navigationTarget,
+      enterFrom: "Polaris-Frame__Navigation--enter",
+      enterTo: "Polaris-Frame__Navigation--visible Polaris-Frame__Navigation--enterActive",
+      leaveActive: "Polaris-Frame__Navigation--exitActive",
+      leaveFrom: "Polaris-Frame__Navigation--exit",
+      leaveTo: "",
+      removeToClasses: false,
+      hiddenClass: false
+    });
+  }
+  openMenu() {
+    this.enter();
+    this.navigationOverlayTarget.classList.add("Polaris-Backdrop", "Polaris-Backdrop--belowNavigation");
+  }
+  closeMenu() {
+    this.leave();
+    this.navigationOverlayTarget.classList.remove("Polaris-Backdrop", "Polaris-Backdrop--belowNavigation");
+  }
+  showSaveBar() {
+    this.saveBarTarget.classList.add("Polaris-Frame-CSSAnimation--endFade");
+  }
+  hideSaveBar() {
+    this.saveBarTarget.classList.remove("Polaris-Frame-CSSAnimation--endFade");
+  }
+}
+
 class Modal extends Controller {
   static classes=[ "hidden", "backdrop" ];
   static values={
@@ -53,6 +347,38 @@ class Modal extends Controller {
   }
 }
 
+class OptionList extends Controller {
+  static targets=[ "radioButton" ];
+  static classes=[ "selected" ];
+  connect() {
+    this.updateSelected();
+  }
+  update(event) {
+    const target = event.currentTarget;
+    target.classList.add(this.selectedClass);
+    this.deselectAll(target);
+  }
+  updateSelected() {
+    this.radioButtonTargets.forEach((element => {
+      const input = element.querySelector("input[type=radio]");
+      if (input.checked) {
+        element.classList.add(this.selectedClass);
+      } else {
+        element.classList.remove(this.selectedClass);
+      }
+    }));
+  }
+  deselectAll(target) {
+    this.radioButtonTargets.forEach((element => {
+      if (!element.isEqualNode(target)) {
+        const input = element.querySelector("input[type=radio]");
+        input.checked = false;
+        element.classList.remove(this.selectedClass);
+      }
+    }));
+  }
+}
+
 class Polaris extends Controller {
   openModal() {
     this.findElement("modal").open();
@@ -63,6 +389,9 @@ class Polaris extends Controller {
   enableButton() {
     this.findElement("button").enable();
   }
+  showToast() {
+    this.findElement("toast").show();
+  }
   findElement(type) {
     const targetId = this.element.dataset.target.replace("#", "");
     const target = document.getElementById(targetId);
@@ -279,7 +608,7 @@ function contains(parent, child) {
   return false;
 }
 
-function getComputedStyle(element) {
+function getComputedStyle$1(element) {
   return getWindow(element).getComputedStyle(element);
 }
 
@@ -299,7 +628,7 @@ function getParentNode(element) {
 }
 
 function getTrueOffsetParent(element) {
-  if (!isHTMLElement(element) || getComputedStyle(element).position === "fixed") {
+  if (!isHTMLElement(element) || getComputedStyle$1(element).position === "fixed") {
     return null;
   }
   return element.offsetParent;
@@ -309,14 +638,14 @@ function getContainingBlock(element) {
   var isFirefox = navigator.userAgent.toLowerCase().indexOf("firefox") !== -1;
   var isIE = navigator.userAgent.indexOf("Trident") !== -1;
   if (isIE && isHTMLElement(element)) {
-    var elementCss = getComputedStyle(element);
+    var elementCss = getComputedStyle$1(element);
     if (elementCss.position === "fixed") {
       return null;
     }
   }
   var currentNode = getParentNode(element);
   while (isHTMLElement(currentNode) && [ "html", "body" ].indexOf(getNodeName(currentNode)) < 0) {
-    var css = getComputedStyle(currentNode);
+    var css = getComputedStyle$1(currentNode);
     if (css.transform !== "none" || css.perspective !== "none" || css.contain === "paint" || [ "transform", "perspective" ].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === "filter" || isFirefox && css.filter && css.filter !== "none") {
       return currentNode;
     } else {
@@ -329,10 +658,10 @@ function getContainingBlock(element) {
 function getOffsetParent(element) {
   var window = getWindow(element);
   var offsetParent = getTrueOffsetParent(element);
-  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === "static") {
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle$1(offsetParent).position === "static") {
     offsetParent = getTrueOffsetParent(offsetParent);
   }
-  if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle(offsetParent).position === "static")) {
+  if (offsetParent && (getNodeName(offsetParent) === "html" || getNodeName(offsetParent) === "body" && getComputedStyle$1(offsetParent).position === "static")) {
     return window;
   }
   return offsetParent || getContainingBlock(element) || window;
@@ -473,7 +802,7 @@ function mapToStyles(_ref2) {
     var widthProp = "clientWidth";
     if (offsetParent === getWindow(popper)) {
       offsetParent = getDocumentElement(popper);
-      if (getComputedStyle(offsetParent).position !== "static" && position === "absolute") {
+      if (getComputedStyle$1(offsetParent).position !== "static" && position === "absolute") {
         heightProp = "scrollHeight";
         widthProp = "scrollWidth";
       }
@@ -651,7 +980,7 @@ function getDocumentRect(element) {
   var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
   var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
   var y = -winScroll.scrollTop;
-  if (getComputedStyle(body || html).direction === "rtl") {
+  if (getComputedStyle$1(body || html).direction === "rtl") {
     x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
   }
   return {
@@ -663,7 +992,7 @@ function getDocumentRect(element) {
 }
 
 function isScrollParent(element) {
-  var _getComputedStyle = getComputedStyle(element), overflow = _getComputedStyle.overflow, overflowX = _getComputedStyle.overflowX, overflowY = _getComputedStyle.overflowY;
+  var _getComputedStyle = getComputedStyle$1(element), overflow = _getComputedStyle.overflow, overflowX = _getComputedStyle.overflowX, overflowY = _getComputedStyle.overflowY;
   return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
 }
 
@@ -718,7 +1047,7 @@ function getClientRectFromMixedType(element, clippingParent) {
 
 function getClippingParents(element) {
   var clippingParents = listScrollParents(getParentNode(element));
-  var canEscapeClipping = [ "absolute", "fixed" ].indexOf(getComputedStyle(element).position) >= 0;
+  var canEscapeClipping = [ "absolute", "fixed" ].indexOf(getComputedStyle$1(element).position) >= 0;
   var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
   if (!isElement(clipperElement)) {
     return [];
@@ -1469,10 +1798,13 @@ class Popover extends Controller {
   }
   hide(event) {
     if (!this.element.contains(event.target) && !this.popoverTarget.classList.contains(this.closedClass)) {
-      this.popoverTarget.classList.remove(this.openClass);
-      this.popoverTarget.classList.add(this.closedClass);
+      this.forceHide();
     }
   }
+  forceHide() {
+    this.popoverTarget.classList.remove(this.openClass);
+    this.popoverTarget.classList.add(this.closedClass);
+  }
 }
 
 class ResourceItem extends Controller {
@@ -1622,20 +1954,85 @@ class TextField extends Controller {
       return;
     }
     const decimalPlaces = Math.max(dpl(numericValue), dpl(this.stepValue));
+    const oldValue = this.value;
     const newValue = Math.min(Number(this.maxValue), Math.max(numericValue + steps * this.stepValue, Number(this.minValue)));
     this.value = String(newValue.toFixed(decimalPlaces));
+    if (this.value != oldValue) {
+      this.inputTarget.dispatchEvent(new Event("change"));
+    }
+  }
+}
+
+class Toast extends Controller {
+  static activeClass="Polaris-Frame-ToastManager--toastWrapperEnterDone";
+  static defaultDuration=5e3;
+  static defaultDurationWithAction=1e4;
+  static values={
+    hidden: Boolean,
+    duration: Number,
+    hasAction: Boolean
+  };
+  connect() {
+    if (!this.hiddenValue) {
+      this.show();
+    }
+  }
+  show=() => {
+    this.element.dataset.position = this.position;
+    this.element.style.cssText = this.getStyle(this.position);
+    this.element.classList.add(this.constructor.activeClass);
+    setTimeout(this.close, this.timeoutDuration);
+  };
+  close=() => {
+    this.element.classList.remove(this.constructor.activeClass);
+    this.element.addEventListener("transitionend", this.updatePositions, false);
+  };
+  updatePositions=() => {
+    this.visibleToasts.sort(((a, b) => parseInt(a.dataset.position) - parseInt(b.dataset.position))).forEach(((toast, index) => {
+      const position = index + 1;
+      toast.dataset.position = position;
+      toast.style.cssText = this.getStyle(position);
+    }));
+    this.element.removeEventListener("transitionend", this.updatePositions, false);
+  };
+  getStyle(position) {
+    const translateIn = -80 * position;
+    const translateOut = 150 - 80 * position;
+    return `--toast-translate-y-in: ${translateIn}px; --toast-translate-y-out: ${translateOut}px;`;
+  }
+  get timeoutDuration() {
+    if (this.durationValue > 0) {
+      return this.durationValue;
+    } else if (this.hasActionValue) {
+      return this.constructor.defaultDurationWithAction;
+    } else {
+      return this.constructor.defaultDuration;
+    }
+  }
+  get toastManager() {
+    return this.element.closest(".Polaris-Frame-ToastManager");
+  }
+  get visibleToasts() {
+    return [ ...this.toastManager.querySelectorAll(`.${this.constructor.activeClass}`) ];
+  }
+  get position() {
+    return this.visibleToasts.filter((el => !this.element.isEqualNode(el))).length + 1;
   }
 }
 
 function registerPolarisControllers(application) {
+  application.register("polaris-autocomplete", Autocomplete);
   application.register("polaris-button", Button);
+  application.register("polaris-frame", Frame);
   application.register("polaris-modal", Modal);
+  application.register("polaris-option-list", OptionList);
   application.register("polaris", Polaris);
   application.register("polaris-popover", Popover);
   application.register("polaris-resource-item", ResourceItem);
   application.register("polaris-scrollable", Scrollable);
   application.register("polaris-select", Select);
   application.register("polaris-text-field", TextField);
+  application.register("polaris-toast", Toast);
 }
 
-export { Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField, registerPolarisControllers };
+export { Frame, Modal, Polaris, Popover, ResourceItem, Scrollable, Select, TextField, registerPolarisControllers };

data/app/assets/stylesheets/polaris_view_components/custom.css

@@ -66,3 +66,44 @@ a.Polaris-Tag__Button {
   visibility: hidden;
   pointer-events: none;
 }
+
+/* Filters */
+
+.Polaris-Filters-ConnectedFilterControl__RightContainer {
+  .Polaris-Filters-ConnectedFilterControl__Item {
+    & > div > div > button {
+      margin-right: var(--p-button-group-item-spacing);
+      border-radius: 0;
+    }
+
+    &:first-of-type > div > div > button {
+      border-top-left-radius: var(--p-border-radius-base);
+      border-bottom-left-radius: var(--p-border-radius-base);
+    }
+  }
+
+  &.Polaris-Filters-ConnectedFilterControl--queryFieldHidden {
+    .Polaris-Filters-ConnectedFilterControl__Item:first-of-type > div > div > button {
+      border-top-left-radius: var(--p-border-radius-base);
+      border-bottom-left-radius: var(--p-border-radius-base);
+    }
+  }
+}
+
+.Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters {
+  .Polaris-Filters-ConnectedFilterControl__Item:last-child > div > div > button {
+    border-top-right-radius: var(--p-border-radius-base);
+    border-bottom-right-radius: var(--p-border-radius-base);
+  }
+}
+
+/* Toast */
+.Polaris-Frame-ToastManager {
+  bottom: 0;
+}
+
+/* Autocomplete */
+
+.Polaris-Autocomplete__EmptyState {
+  padding: 0.8rem 1.6rem;
+}

data/app/assets/stylesheets/polaris_view_components.css

@@ -2232,3 +2232,28 @@ a.Polaris-Tag__Button {
   visibility: hidden;
   pointer-events: none;
 }
+/* Filters */
+.Polaris-Filters-ConnectedFilterControl__RightContainer .Polaris-Filters-ConnectedFilterControl__Item > div > div > button {
+      margin-right: var(--p-button-group-item-spacing);
+      border-radius: 0;
+    }
+.Polaris-Filters-ConnectedFilterControl__RightContainer .Polaris-Filters-ConnectedFilterControl__Item:first-of-type > div > div > button {
+      border-top-left-radius: var(--p-border-radius-base);
+      border-bottom-left-radius: var(--p-border-radius-base);
+    }
+.Polaris-Filters-ConnectedFilterControl__RightContainer.Polaris-Filters-ConnectedFilterControl--queryFieldHidden .Polaris-Filters-ConnectedFilterControl__Item:first-of-type > div > div > button {
+      border-top-left-radius: var(--p-border-radius-base);
+      border-bottom-left-radius: var(--p-border-radius-base);
+    }
+.Polaris-Filters-ConnectedFilterControl__RightContainerWithoutMoreFilters .Polaris-Filters-ConnectedFilterControl__Item:last-child > div > div > button {
+    border-top-right-radius: var(--p-border-radius-base);
+    border-bottom-right-radius: var(--p-border-radius-base);
+  }
+/* Toast */
+.Polaris-Frame-ToastManager {
+  bottom: 0;
+}
+/* Autocomplete */
+.Polaris-Autocomplete__EmptyState {
+  padding: 0.8rem 1.6rem;
+}

data/app/components/polaris/autocomplete/action_component.rb

@@ -0,0 +1,7 @@
+module Polaris
+  class Autocomplete::ActionComponent < NewComponent
+    def initialize(**system_arguments)
+      @system_arguments = system_arguments
+    end
+  end
+end

data/app/components/polaris/autocomplete/option_component.rb

@@ -0,0 +1,35 @@
+module Polaris
+  class Autocomplete::OptionComponent < NewComponent
+    def initialize(
+      label:,
+      multiple: false,
+      **system_arguments
+    )
+      @label = label
+      @multiple = multiple
+      @system_arguments = system_arguments
+    end
+
+    def system_arguments
+      @system_arguments.tap do |args|
+        args[:label] = @label
+
+        args[:wrapper_arguments] ||= {}
+        args[:wrapper_arguments][:data] ||= {}
+        args[:wrapper_arguments][:data][:polaris_autocomplete_target] = "option"
+        args[:wrapper_arguments][:data][:label] = @label
+
+        args[:data] ||= {}
+        prepend_option(args[:data], :action, "polaris-autocomplete#select")
+      end
+    end
+
+    def call
+      if @multiple
+        render OptionList::CheckboxComponent.new(**system_arguments)
+      else
+        render OptionList::RadioButtonComponent.new(**system_arguments)
+      end
+    end
+  end
+end

data/app/components/polaris/autocomplete/section_component.html.erb

@@ -0,0 +1,9 @@
+<%= render(Polaris::OptionList::SectionComponent.new(**@system_arguments)) do %>
+  <% if options.present? %>
+    <% options.each do |option| %>
+      <%= option %>
+    <% end %>
+  <% else %>
+    <%= content %>
+  <% end %>
+<% end %>