@getflip/swirl-components-react 0.62.0 → 0.63.0

package/dist/swirl-menu.entry.e27311ef.js

@@ -0,0 +1,167 @@
+import { r as d, c as r, h as o, H as v, g as p } from "./index.49b68312.js";
+import { c as b, a as f, o as w, f as g } from "./floating-ui.dom.esm-ac7cc24e.79b318e4.js";
+import { c as M } from "./index-d280dafb.186cdb0e.js";
+import { q as n, c as l, p as u, i as x, g as _ } from "./utils-bc84f36e.9f3a93b6.js";
+import "react";
+import "react-dom";
+const y = ":host{display:block}:host *{box-sizing:border-box}.menu{width:100%;--swirl-ghost-button-background-default:var(--s-surface-overlay-default);--swirl-ghost-button-background-hovered:var(--s-surface-overlay-hovered);--swirl-ghost-button-background-pressed:var(--s-surface-overlay-pressed)}.menu--mobile.menu--root{position:relative}.menu--mobile.menu--root .menu__menu{top:3.5rem;transition:left 0.2s}.menu--mobile.menu--active .menu__menu{display:block}.menu--mobile .menu__menu{position:absolute;top:0;left:0;display:none;width:100%}:not(.menu--mobile).menu--root{position:relative}:not(.menu--mobile).menu--root .menu__menu{position:relative;padding-top:0;padding-bottom:0}:not(.menu--mobile):not(.menu--root) .menu__menu{z-index:1;max-width:22.5rem;border-radius:var(--s-border-radius-sm);box-shadow:var(--s-shadow-level-1)}:not(.menu--mobile).menu--active .menu__menu{display:block}:not(.menu--mobile) .menu__menu{position:fixed;display:none}.menu__mobile-header{display:flex;height:3.5rem;padding-right:var(--s-space-16);padding-left:var(--s-space-16);justify-content:space-between;align-items:center;border-bottom:var(--s-border-width-default) solid var(--s-border-default);gap:var(--s-space-8)}.menu__mobile-header>*{display:inline-flex;flex-shrink:0}.menu__title{min-width:0;flex-grow:1;flex-shrink:1}.menu__title swirl-heading{min-width:0}.menu__done-button{margin-right:calc(-1 * var(--s-space-8))}.menu__menu{padding-top:var(--s-space-8);padding-bottom:var(--s-space-8);background-color:var(--s-surface-overlay-default)}", I = class {
+  constructor(t) {
+    d(this, t), this.done = r(this, "done", 7), this.valueChange = r(this, "valueChange", 7), this.mobileMediaQuery = window.matchMedia("(min-width: 768px)"), this.mediaQueryHandler = () => {
+      this.updateMobileState();
+    }, this.resetMenu = () => {
+      this.items.forEach((e) => {
+        e.tabIndex = -1;
+      }), !(this.level > 0) && setTimeout(() => {
+        this.activeLevel = 0, n(this.el, "swirl-menu").forEach((i) => {
+          i.active = !1, i.parentElement.expanded = !1;
+        });
+      }, this.mobile ? 200 : 60);
+    }, this.closeMenu = () => {
+      this.disableAutoUpdate && this.disableAutoUpdate(), this.popover.close(), this.resetMenu();
+    }, this.reposition = async () => {
+      if (this.mobile || this.level === 0) {
+        this.position = void 0;
+        return;
+      }
+      const e = this.el.parentElement;
+      !Boolean(e) || !Boolean(this.menuContainer) || (this.position = await b(e, this.menuContainer, {
+        placement: "right-start",
+        strategy: "fixed",
+        middleware: [w({ mainAxis: -10, crossAxis: 0 }), g()]
+      }));
+    }, this.onKeyDown = (e) => {
+      if (e.code === "ArrowDown")
+        e.preventDefault(), e.stopPropagation(), this.focusNextItem();
+      else if (e.code === "ArrowUp")
+        e.preventDefault(), e.stopPropagation(), this.focusPreviousItem();
+      else if (e.code === "ArrowLeft")
+        e.preventDefault(), e.stopPropagation(), this.rootMenu.goBack();
+      else if (e.code === "ArrowRight") {
+        e.preventDefault();
+        const i = l(this.items[this.getActiveItemIndex()], "swirl-menu-item");
+        if (!Boolean(i))
+          return;
+        this.rootMenu.activateMenuItem(i);
+      }
+    }, this.onClose = () => {
+      this.closeMenu();
+    }, this.onDone = () => {
+      this.closeMenu(), this.done.emit();
+    }, this.onGoBack = () => {
+      this.rootMenu.goBack();
+    }, this.active = !0, this.label = void 0, this.level = 0, this.mobileBackButtonLabel = "Back", this.mobileCloseMenuButtonLabel = "Close menu", this.mobileDoneButtonLabel = "Done", this.value = void 0, this.variant = "action", this.activeLevel = 0, this.mobile = void 0, this.position = void 0;
+  }
+  componentWillLoad() {
+    this.updateMobileState(), this.updateLevel(), this.observeSlotChanges();
+  }
+  componentDidLoad() {
+    var t, e;
+    (e = (t = this.mobileMediaQuery).addEventListener) === null || e === void 0 || e.call(t, "change", this.mediaQueryHandler), this.parentMenu = l(this.el.parentElement, "swirl-menu"), this.popover = l(this.el, "swirl-popover"), this.rootMenu = u(this.el, "swirl-menu").pop(), Boolean(this.parentMenu) && queueMicrotask(() => {
+      this.active = !1;
+    }), this.popover.addEventListener("popoverClose", this.resetMenu), this.updateItems();
+  }
+  disconnectedCallback() {
+    var t, e, i;
+    this.popover.removeEventListener("popoverClose", this.resetMenu), (e = (t = this.mobileMediaQuery).removeEventListener) === null || e === void 0 || e.call(t, "change", this.mediaQueryHandler), (i = this.observer) === null || i === void 0 || i.disconnect();
+  }
+  watchActive() {
+    this.reposition(), this.disableAutoUpdate && this.disableAutoUpdate(), this.disableAutoUpdate = f(this.el.parentElement, this.menuContainer, this.reposition);
+  }
+  async activateMenuItem(t) {
+    if (Boolean(this.parentMenu))
+      return;
+    const e = await t.getParentMenu();
+    n(this.el, "swirl-menu").filter((s) => s.level >= e.level && s !== e).forEach((s) => {
+      s.active = !1, s.parentElement.expanded = !1;
+    });
+    const a = await t.getSubMenu();
+    !Boolean(a) || (t.expanded = !0, a.active = !0, this.activeLevel = a.level, setTimeout(() => {
+      a.focusFirstItem();
+    }, this.mobile ? 200 : 60));
+  }
+  async close() {
+    this.closeMenu();
+  }
+  async goBack() {
+    if (Boolean(this.parentMenu) || this.activeLevel === 0)
+      return;
+    const e = (n(this.el, "swirl-menu").find((s) => s.level === this.activeLevel && s.active) || this.rootMenu).parentElement;
+    e.expanded = !1, this.activeLevel = Math.max(this.activeLevel - 1, 0), n(this.el, "swirl-menu").filter((s) => s.level > this.activeLevel).forEach((s) => {
+      s.active = !1;
+    }), (n(this.el, "swirl-menu").find((s) => s.level === this.activeLevel && s.active) || this.rootMenu).focusItemAtIndex(Array.from(e.parentElement.children).indexOf(e));
+  }
+  async focusFirstItem() {
+    this.focusItem(this.items[0]);
+  }
+  async focusItemAtIndex(t) {
+    this.focusItem(this.items[t]);
+  }
+  async updateSelection(t) {
+    this.valueChange.emit(t.value);
+  }
+  observeSlotChanges() {
+    this.observer = new MutationObserver(() => {
+      this.updateItems();
+    }), this.observer.observe(this.el, { childList: !0 });
+  }
+  updateMobileState() {
+    const t = x();
+    t !== this.mobile && (this.mobile = t);
+  }
+  updateItems() {
+    this.items = [
+      ...n(this.el, '[role="menuitem"]'),
+      ...n(this.el, '[role="menuitemradio"]')
+    ].filter((t) => l(t, "swirl-menu") === this.el);
+  }
+  updateLevel() {
+    const t = u(this.el.parentNode, "swirl-menu");
+    this.level = t.length;
+  }
+  focusItem(t) {
+    [
+      ...n(this.rootMenu, '[role="menuitem"]'),
+      ...n(this.rootMenu, '[role="menuitemradio"]')
+    ].forEach((i) => {
+      i.tabIndex = -1;
+    }), Boolean(t) && (t.tabIndex = 0, t.focus());
+  }
+  focusNextItem() {
+    const e = (this.getActiveItemIndex() + 1) % this.items.length, i = this.items[e];
+    this.focusItem(i);
+  }
+  focusPreviousItem() {
+    const t = this.getActiveItemIndex(), e = t === 0 ? this.items.length - 1 : t - 1, i = this.items[e];
+    this.focusItem(i);
+  }
+  getActiveItemIndex() {
+    const t = _();
+    return this.items.findIndex((e) => e === t || e === (t == null ? void 0 : t.querySelector('[role="menuitem"]')) || e === (t == null ? void 0 : t.querySelector('[role="menuitemradio"]')));
+  }
+  render() {
+    var t, e;
+    const i = !Boolean(this.parentMenu), a = i && this.mobile ? void 0 : this.label, s = i && this.mobile ? "menu-title" : void 0, h = i ? "menubar" : "menu", c = M("menu", `menu--level-${this.level}`, {
+      "menu--active": this.active,
+      "menu--mobile": this.mobile,
+      "menu--root": i
+    });
+    return o(v, null, o("div", { class: c }, this.mobile && i && o("div", { class: "menu__mobile-header" }, this.activeLevel === 0 && o("swirl-button", { hideLabel: !0, icon: "<swirl-icon-close></swirl-icon-close>", label: this.mobileCloseMenuButtonLabel, onClick: this.onClose, variant: "plain" }), this.activeLevel > 0 && o("swirl-button", { hideLabel: !0, icon: "<swirl-icon-chevron-left></swirl-icon-chevron-left>", label: this.mobileBackButtonLabel, onClick: this.onGoBack, variant: "plain" }), o("span", { class: "menu__title", id: "menu-title" }, o("swirl-heading", { align: "center", as: "span", level: 4, text: this.label, truncate: !0 })), o("swirl-button", { class: "menu__done-button", intent: "primary", label: this.mobileDoneButtonLabel, onClick: this.onDone })), o("div", { "aria-label": a, "aria-labelledby": s, "aria-orientation": "vertical", class: "menu__menu", onKeyDown: this.onKeyDown, ref: (m) => this.menuContainer = m, role: h, style: !this.mobile && this.level > 0 ? {
+      top: Boolean(this.position) ? `${(t = this.position) === null || t === void 0 ? void 0 : t.y}px` : "",
+      left: Boolean(this.position) ? `${(e = this.position) === null || e === void 0 ? void 0 : e.x}px` : ""
+    } : this.mobile ? {
+      left: i ? `calc(-100% * ${this.activeLevel})` : "100%"
+    } : void 0 }, o("slot", null))));
+  }
+  get el() {
+    return p(this);
+  }
+  static get watchers() {
+    return {
+      active: ["watchActive"]
+    };
+  }
+};
+I.style = y;
+export {
+  I as swirl_menu
+};

package/dist/{swirl-modal.entry.69d4dde6.js → swirl-modal.entry.c1e50728.js}

@@ -1,4 +1,4 @@
-import { r as ie, c as E, h as m, H as ne, g as se } from "./index.55285fae.js";
+import { r as ie, c as E, h as m, H as ne, g as se } from "./index.49b68312.js";
 import { d as le, e as de } from "./bodyScrollLock.esm-ce6356d8.2c600fb9.js";
 import { c as ce } from "./index-d280dafb.186cdb0e.js";
 import "react";

package/dist/{swirl-option-list-section.entry.72ed8132.js → swirl-option-list-section.entry.d1f6c0e1.js}

@@ -1,4 +1,4 @@
-import { r as s, h as t, H as e } from "./index.55285fae.js";
+import { r as s, h as t, H as e } from "./index.49b68312.js";
 import "react";
 import "react-dom";
 const o = ":host{display:block}:host *{box-sizing:border-box}.option-list-section{background-color:var(--s-surface-overlay-default)}.option-list-section__label{display:block;width:100%;padding:var(--s-space-8) var(--s-space-16);border-bottom:var(--s-border-width-default) solid var(--s-border-default);color:var(--s-text-subdued);font-weight:var(--s-font-weight-medium);line-height:var(--s-line-height-base);text-align:left}@media (min-width: 992px) and (max-width: 1439px) and (hover: hover),(min-width: 1440px){.option-list-section__label{padding:var(--s-space-8) var(--s-space-12);font-size:var(--s-font-size-sm);line-height:var(--s-line-height-sm)}}", l = class {