@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

package/dist/es/components/menu/daikin-menu.js

@@ -1,233 +1,193 @@
-import { offset, flip, shift } from "@floating-ui/dom";
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-import { queryAssignedElements, state } from "lit/decorators.js";
-import { guard } from "lit/directives/guard.js";
 import { DDSElement } from "../../base/dds-element.js";
-import "../../base/dds-form-element.js";
-import { property, oneOf } from "../../base/dds-property.js";
+import { oneOf, property as property$1 } from "../../base/dds-property.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
 import { ddsElement } from "../../base/decorators.js";
-import "../../base/define.js";
-import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
-import { isClient } from "../../is-client.js";
-import tailwindStyles from "../../tailwind.css.js";
-import { reDispatch } from "../../utils/re-dispatch.js";
+import "../../base/index.js";
+import tailwind_default from "../../tailwind.css.js";
 import { DaikinAvatar } from "../avatar/daikin-avatar.js";
+import "../avatar/index.js";
 import { DaikinBreadcrumbItem } from "../breadcrumb-item/daikin-breadcrumb-item.js";
+import "../breadcrumb-item/index.js";
 import { DaikinButton } from "../button/daikin-button.js";
+import "../button/index.js";
 import { DaikinIconButton } from "../icon-button/daikin-icon-button.js";
-import DaikinListItem from "../list-item/daikin-list-item.js";
+import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-auto-update.js";
+import { reDispatch } from "../../utils/re-dispatch.js";
+import "../icon-button/index.js";
+import daikin_list_item_default from "../list-item/daikin-list-item.js";
+import { isClient } from "../../is-client.js";
 import { DaikinNavigationItem } from "../navigation-item/daikin-navigation-item.js";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const cvaMenu = cva([
-  "left-(--floating-x,0)",
-  "top-(--floating-y,0)",
-  "w-max",
-  "py-(--dds-padding-20)",
-  "border",
-  "rounded-lg",
-  "absolute",
-  "floating-unready:hidden",
-  "bg-ddt-color-common-background-default",
-  "border-ddt-color-divider"
+import "../navigation-item/index.js";
+import { css, html, unsafeCSS } from "lit";
+import { queryAssignedElements, state } from "lit/decorators.js";
+import { cva } from "class-variance-authority";
+import { flip, offset, shift } from "@floating-ui/dom";
+import { guard } from "lit/directives/guard.js";
+//#region src/components/menu/daikin-menu.ts
+var cvaMenu = cva([
+	"left-(--floating-x,0)",
+	"top-(--floating-y,0)",
+	"w-max",
+	"py-(--dds-padding-20)",
+	"border",
+	"rounded-lg",
+	"absolute",
+	"floating-unready:hidden",
+	"bg-ddt-color-common-background-default",
+	"border-ddt-color-divider"
 ]);
-const cvaWrapper = cva(["relative"], {
-  variants: {
-    isLayoutTransparent: {
-      true: ["inline-flex"],
-      false: [
-        "inline-block",
-        "text-ddt-color-common-text-primary",
-        "font-daikinSerif"
-      ]
-    }
-  }
-});
-const cvaTrigger = cva([], {
-  variants: {
-    isLayoutTransparent: {
-      true: ["flex"],
-      false: []
-    }
-  }
-});
-const DEFAULT_MENU_SPACING = "0px";
-let DaikinMenu = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this._autoUpdateController = new FloatingUIAutoUpdateController(this);
-    this._hostStyles = isClient ? window.getComputedStyle(this) : null;
-    this._originalDisplayStyle = null;
-    this._staticPlacement = false;
-    this._isLayoutTransparent = false;
-  }
-  static registerCSSCustomProperties() {
-    if (!isClient) {
-      return;
-    }
-    window.CSS.registerProperty({
-      name: "--ddc-menu-spacing",
-      syntax: "<length>",
-      inherits: true,
-      initialValue: "0px"
-    });
-  }
-  /**
-   * Exposes the trigger element contained within the menu to the outside of the component.
-   *
-   * Supported trigger elements:
-   * - `<daikin-button>`
-   * - `<daikin-icon-button>`
-   * - `<daikin-avatar>`
-   * - `<daikin-breadcrumb-item>`
-   * - `<daikin-navigation-item>`
-   *
-   * Returns the first matching element from the slot.
-   */
-  get triggerElement() {
-    for (const control of this._controls) {
-      if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button" || control instanceof DaikinAvatar && control.type === "button" || control instanceof DaikinBreadcrumbItem || control instanceof DaikinNavigationItem && control.type === "menu") {
-        return control;
-      }
-    }
-    return null;
-  }
-  /**
-   * Reflects static attributes (e.g. ARIA roles) to slot components.
-   * These are typically set once when the slot changes and do not change frequently.
-   */
-  _reflectStaticProperties() {
-    this._staticPlacement = false;
-    this._isLayoutTransparent = false;
-    if (this._originalDisplayStyle !== null) {
-      this.style.display = this._originalDisplayStyle;
-      this._originalDisplayStyle = null;
-    }
-    for (const control of this._controls) {
-      if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button") {
-        control.buttonAriaHaspopup = "menu";
-      } else if (control instanceof DaikinAvatar && control.type === "button") {
-        control.avatarAriaHaspopup = "menu";
-      } else if (control instanceof DaikinNavigationItem && control.type === "menu") {
-        control.navigationItemAriaHaspopup = "menu";
-      } else if (control instanceof DaikinBreadcrumbItem) {
-        control.breadcrumbAriaHaspopup = "menu";
-      }
-    }
-    if (this.triggerElement instanceof DaikinNavigationItem && this.triggerElement.type === "menu") {
-      this._staticPlacement = true;
-      this._isLayoutTransparent = true;
-      this._originalDisplayStyle = this.style.display;
-      this.style.display = "contents";
-    }
-    for (const daikinList of this._lists) {
-      daikinList.listRole = "menu";
-    }
-  }
-  /**
-   * Reflects dynamic attributes (e.g. `open`, `disabled`) to slot components.
-   * These may changed when properties are updated.
-   */
-  _reflectDynamicProperties() {
-    for (const control of this._controls) {
-      if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button") {
-        control.buttonAriaExpanded = `${this.open}`;
-      } else if (control instanceof DaikinAvatar && control.type === "button") {
-        control.avatarAriaExpanded = `${this.open}`;
-      } else if (control instanceof DaikinNavigationItem && control.type === "menu") {
-        control.navigationItemAriaExpanded = `${this.open}`;
-      } else if (control instanceof DaikinBreadcrumbItem) {
-        control.breadcrumbAriaExpanded = `${this.open}`;
-      }
-    }
-  }
-  _handleSlotChange() {
-    this._reflectStaticProperties();
-  }
-  _toggleOpenState() {
-    this.open = !this.open;
-    if (this.open) {
-      setTimeout(() => {
-        var _a;
-        (_a = this._lists[0]) == null ? void 0 : _a.focusFirstItem();
-      });
-    }
-  }
-  _isElementDisabled(element) {
-    const maybeDisabled = element;
-    if (typeof maybeDisabled.disabled === "boolean" && maybeDisabled.disabled) {
-      return true;
-    }
-    if (element.hasAttribute("disabled")) {
-      return true;
-    }
-    return element.getAttribute("aria-disabled") === "true";
-  }
-  _isTriggerDisabled(event) {
-    if (event) {
-      for (const target of event.composedPath()) {
-        if (target === this || target === this.renderRoot || target === window) {
-          continue;
-        }
-        if (target instanceof Element && this._isElementDisabled(target)) {
-          return true;
-        }
-      }
-    }
-    const trigger = this.triggerElement;
-    return trigger instanceof Element ? this._isElementDisabled(trigger) : false;
-  }
-  _handleTriggerPointerUp(event) {
-    if (this.trigger !== "click") return;
-    if (!event.isPrimary || event.button !== 0) return;
-    if (this._isTriggerDisabled(event)) return;
-    event.preventDefault();
-    this._toggleOpenState();
-  }
-  _handleTriggerClick(event) {
-    if (this.trigger !== "click") return;
-    if (this._isTriggerDisabled(event)) return;
-    if (event.detail !== 0) {
-      event.preventDefault();
-      return;
-    }
-    event.preventDefault();
-    this._toggleOpenState();
-  }
-  /**
-   * Handles click events on the menu-item.
-   * When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.
-   */
-  _handleClick(event) {
-    if (event.target instanceof DaikinListItem && !event.target.disabled && this.popoverValue === "auto") {
-      this.open = false;
+var cvaWrapper = cva(["relative"], { variants: { isLayoutTransparent: {
+	true: ["inline-flex"],
+	false: [
+		"inline-block",
+		"text-ddt-color-common-text-primary",
+		"font-daikinSerif"
+	]
+} } });
+var cvaTrigger = cva([], { variants: { isLayoutTransparent: {
+	true: ["flex"],
+	false: []
+} } });
+var DEFAULT_MENU_SPACING = "0px";
+var DaikinMenu = class DaikinMenu extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this._autoUpdateController = new FloatingUIAutoUpdateController(this);
+		this._hostStyles = isClient ? window.getComputedStyle(this) : null;
+		this._originalDisplayStyle = null;
+		this._staticPlacement = false;
+		this._isLayoutTransparent = false;
+	}
+	static registerCSSCustomProperties() {
+		if (!isClient) return;
+		window.CSS.registerProperty({
+			name: "--ddc-menu-spacing",
+			syntax: "<length>",
+			inherits: true,
+			initialValue: "0px"
+		});
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: inline-block;
+
+      --ddc-menu-spacing: ${unsafeCSS(DEFAULT_MENU_SPACING)};
     }
-  }
-  _handleBeforeToggle(event) {
-    reDispatch(this, event, new ToggleEvent("beforetoggle", event));
-  }
-  _handleToggle(event) {
-    if (reDispatch(this, event, new ToggleEvent("toggle", event))) {
-      this.open = event.newState === "open";
+
+    :host([open]) ::slotted(daikin-navigation-item) {
+      --chevron-rotation: 180deg;
     }
-  }
-  render() {
-    var _a;
-    const spacing = parseInt(
-      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--ddc-menu-spacing")) || DEFAULT_MENU_SPACING,
-      10
-    );
-    return html`<div
+  `;
+	}
+	/**
+	* Exposes the trigger element contained within the menu to the outside of the component.
+	*
+	* Supported trigger elements:
+	* - `<daikin-button>`
+	* - `<daikin-icon-button>`
+	* - `<daikin-avatar>`
+	* - `<daikin-breadcrumb-item>`
+	* - `<daikin-navigation-item>`
+	*
+	* Returns the first matching element from the slot.
+	*/
+	get triggerElement() {
+		for (const control of this._controls) if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button" || control instanceof DaikinAvatar && control.type === "button" || control instanceof DaikinBreadcrumbItem || control instanceof DaikinNavigationItem && control.type === "menu") return control;
+		return null;
+	}
+	/**
+	* Reflects static attributes (e.g. ARIA roles) to slot components.
+	* These are typically set once when the slot changes and do not change frequently.
+	*/
+	_reflectStaticProperties() {
+		this._staticPlacement = false;
+		this._isLayoutTransparent = false;
+		if (this._originalDisplayStyle !== null) {
+			this.style.display = this._originalDisplayStyle;
+			this._originalDisplayStyle = null;
+		}
+		for (const control of this._controls) if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button") control.buttonAriaHaspopup = "menu";
+		else if (control instanceof DaikinAvatar && control.type === "button") control.avatarAriaHaspopup = "menu";
+		else if (control instanceof DaikinNavigationItem && control.type === "menu") control.navigationItemAriaHaspopup = "menu";
+		else if (control instanceof DaikinBreadcrumbItem) control.breadcrumbAriaHaspopup = "menu";
+		if (this.triggerElement instanceof DaikinNavigationItem && this.triggerElement.type === "menu") {
+			this._staticPlacement = true;
+			this._isLayoutTransparent = true;
+			this._originalDisplayStyle = this.style.display;
+			this.style.display = "contents";
+		}
+		for (const daikinList of this._lists) daikinList.listRole = "menu";
+	}
+	/**
+	* Reflects dynamic attributes (e.g. `open`, `disabled`) to slot components.
+	* These may changed when properties are updated.
+	*/
+	_reflectDynamicProperties() {
+		for (const control of this._controls) if (control instanceof DaikinButton || control instanceof DaikinIconButton && control.type === "button") control.buttonAriaExpanded = `${this.open}`;
+		else if (control instanceof DaikinAvatar && control.type === "button") control.avatarAriaExpanded = `${this.open}`;
+		else if (control instanceof DaikinNavigationItem && control.type === "menu") control.navigationItemAriaExpanded = `${this.open}`;
+		else if (control instanceof DaikinBreadcrumbItem) control.breadcrumbAriaExpanded = `${this.open}`;
+	}
+	_handleSlotChange() {
+		this._reflectStaticProperties();
+	}
+	_toggleOpenState() {
+		this.open = !this.open;
+		if (this.open) setTimeout(() => {
+			this._lists[0]?.focusFirstItem();
+		});
+	}
+	_isElementDisabled(element) {
+		const maybeDisabled = element;
+		if (typeof maybeDisabled.disabled === "boolean" && maybeDisabled.disabled) return true;
+		if (element.hasAttribute("disabled")) return true;
+		return element.getAttribute("aria-disabled") === "true";
+	}
+	_isTriggerDisabled(event) {
+		if (event) for (const target of event.composedPath()) {
+			if (target === this || target === this.renderRoot || target === window) continue;
+			if (target instanceof Element && this._isElementDisabled(target)) return true;
+		}
+		const trigger = this.triggerElement;
+		return trigger instanceof Element ? this._isElementDisabled(trigger) : false;
+	}
+	_handleTriggerPointerUp(event) {
+		if (this.trigger !== "click") return;
+		if (!event.isPrimary || event.button !== 0) return;
+		if (this._isTriggerDisabled(event)) return;
+		event.preventDefault();
+		this._toggleOpenState();
+	}
+	_handleTriggerClick(event) {
+		if (this.trigger !== "click") return;
+		if (this._isTriggerDisabled(event)) return;
+		if (event.detail !== 0) {
+			event.preventDefault();
+			return;
+		}
+		event.preventDefault();
+		this._toggleOpenState();
+	}
+	/**
+	* Handles click events on the menu-item.
+	* When the popoverValue is manual, the logic for closing the popover should be entirely controlled by the developer and not be the responsibility of the component.
+	*/
+	_handleClick(event) {
+		if (event.target instanceof daikin_list_item_default && !event.target.disabled && this.popoverValue === "auto") this.open = false;
+	}
+	_handleBeforeToggle(event) {
+		reDispatch(this, event, new ToggleEvent("beforetoggle", event));
+	}
+	_handleToggle(event) {
+		if (reDispatch(this, event, new ToggleEvent("toggle", event))) this.open = event.newState === "open";
+	}
+	render() {
+		const spacing = parseInt(this._hostStyles?.getPropertyValue("--ddc-menu-spacing") || DEFAULT_MENU_SPACING, 10);
+		return html`<div
       id="wrapper"
       class=${cvaWrapper({ isLayoutTransparent: this._isLayoutTransparent })}
     >
@@ -254,101 +214,71 @@ let DaikinMenu = class extends DDSElement {
       >
         <slot name="menu" @slotchange=${this._handleSlotChange}></slot>
       </span>
-      ${// Activate auto update only when the menu is open.
-    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
-    guard(
-      [this.open, this.placement, spacing, this._staticPlacement],
-      () => this._autoUpdateController.directive(
-        {
-          placement: this.placement,
-          // flip() and shift() are disabled when the trigger is a daikin-navigation-item
-          // (see _staticPlacement for the full explanation).
-          middleware: this._staticPlacement ? [offset({ mainAxis: spacing })] : [offset({ mainAxis: spacing }), flip(), shift()]
-        },
-        this.open
-      )
-    )}
+      ${guard([
+			this.open,
+			this.placement,
+			spacing,
+			this._staticPlacement
+		], () => this._autoUpdateController.directive({
+			placement: this.placement,
+			middleware: this._staticPlacement ? [offset({ mainAxis: spacing })] : [
+				offset({ mainAxis: spacing }),
+				flip(),
+				shift()
+			]
+		}, this.open))}
     </div>`;
-  }
-  updated(changedProperties) {
-    var _a;
-    if (changedProperties.has("open")) {
-      this._reflectDynamicProperties();
-      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(this.open);
-    }
-  }
-};
-DaikinMenu.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: inline-block;
-
-      --ddc-menu-spacing: ${unsafeCSS(DEFAULT_MENU_SPACING)};
-    }
-
-    :host([open]) ::slotted(daikin-navigation-item) {
-      --chevron-rotation: 180deg;
-    }
-  `;
-__decorateClass([
-  queryAssignedElements({ slot: "menu", selector: "daikin-list" })
-], DaikinMenu.prototype, "_lists", 2);
-__decorateClass([
-  queryAssignedElements({
-    selector: "daikin-button,daikin-icon-button,daikin-avatar,daikin-breadcrumb-item,daikin-navigation-item"
-  })
-], DaikinMenu.prototype, "_controls", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "bottom",
-    isAllowedValue: oneOf([
-      "top",
-      "top-start",
-      "top-end",
-      "bottom",
-      "bottom-start",
-      "bottom-end",
-      "left",
-      "left-start",
-      "left-end",
-      "right",
-      "right-start",
-      "right-end"
-    ])
-  })
-], DaikinMenu.prototype, "placement", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinMenu.prototype, "open", 2);
-__decorateClass([
-  property({
-    type: String,
-    attribute: "popover-value",
-    reflect: true,
-    fallbackValue: "auto",
-    isAllowedValue: oneOf(["auto", "manual"])
-  })
-], DaikinMenu.prototype, "popoverValue", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "click",
-    isAllowedValue: oneOf(["click", "manual"])
-  })
-], DaikinMenu.prototype, "trigger", 2);
-__decorateClass([
-  state()
-], DaikinMenu.prototype, "_staticPlacement", 2);
-__decorateClass([
-  state()
-], DaikinMenu.prototype, "_isLayoutTransparent", 2);
-DaikinMenu = __decorateClass([
-  ddsElement("daikin-menu")
-], DaikinMenu);
-export {
-  DaikinMenu
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) {
+			this._reflectDynamicProperties();
+			this._autoUpdateController.floatingElement?.togglePopover(this.open);
+		}
+	}
 };
+__decorate([queryAssignedElements({
+	slot: "menu",
+	selector: "daikin-list"
+})], DaikinMenu.prototype, "_lists", void 0);
+__decorate([queryAssignedElements({ selector: "daikin-button,daikin-icon-button,daikin-avatar,daikin-breadcrumb-item,daikin-navigation-item" })], DaikinMenu.prototype, "_controls", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "bottom",
+	isAllowedValue: oneOf([
+		"top",
+		"top-start",
+		"top-end",
+		"bottom",
+		"bottom-start",
+		"bottom-end",
+		"left",
+		"left-start",
+		"left-end",
+		"right",
+		"right-start",
+		"right-end"
+	])
+})], DaikinMenu.prototype, "placement", void 0);
+__decorate([property$1({
+	type: Boolean,
+	reflect: true
+})], DaikinMenu.prototype, "open", void 0);
+__decorate([property$1({
+	type: String,
+	attribute: "popover-value",
+	reflect: true,
+	fallbackValue: "auto",
+	isAllowedValue: oneOf(["auto", "manual"])
+})], DaikinMenu.prototype, "popoverValue", void 0);
+__decorate([property$1({
+	type: String,
+	reflect: true,
+	fallbackValue: "click",
+	isAllowedValue: oneOf(["click", "manual"])
+})], DaikinMenu.prototype, "trigger", void 0);
+__decorate([state()], DaikinMenu.prototype, "_staticPlacement", void 0);
+__decorate([state()], DaikinMenu.prototype, "_isLayoutTransparent", void 0);
+DaikinMenu = __decorate([ddsElement("daikin-menu")], DaikinMenu);
+//#endregion
+export { DaikinMenu };

package/dist/es/components/menu/index.js

@@ -1,4 +1,2 @@
 import { DaikinMenu } from "./daikin-menu.js";
-export {
-  DaikinMenu
-};
+export { DaikinMenu };