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

package/dist/es-dev/components/tooltip/daikin-tooltip.js

@@ -1,125 +1,102 @@
-import { offset, flip, shift } from "@floating-ui/dom";
-import { cva } from "class-variance-authority";
-import { unsafeCSS, css, html } from "lit";
-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 } 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 "../../base/index.js";
+import tailwind_default from "../../tailwind.css.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";
-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 cvaTooltip = cva(
-  [
-    "left-(--floating-x,0)",
-    "top-(--floating-y,0)",
-    "w-max",
-    "text-(length:--dds-font-size-350)",
-    "p-2",
-    "border",
-    "rounded-sm",
-    "absolute",
-    "floating-unready:hidden"
-  ],
-  {
-    variants: {
-      color: {
-        default: [
-          "text-ddt-color-common-text-primary",
-          "bg-ddt-color-common-background-default",
-          "border-ddt-color-common-neutral-default"
-        ],
-        inverse: [
-          "text-ddt-color-common-text-inverse",
-          "bg-ddt-color-common-surface-inverse",
-          "border-transparent"
-        ]
-      }
-    }
-  }
-);
-const DEFAULT_TOOLTIP_SPACING = "20px";
-let DaikinTooltip = class extends DDSElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this._willBeFocusedByPress = false;
-    this._autoUpdateController = new FloatingUIAutoUpdateController(this);
-    this._hostStyles = isClient ? window.getComputedStyle(this) : null;
-  }
-  static registerCSSCustomProperties() {
-    if (!isClient) {
-      return;
-    }
-    window.CSS.registerProperty({
-      name: "--ddc-tooltip-spacing",
-      syntax: "<length>",
-      inherits: true,
-      initialValue: "0px"
-    });
-  }
-  _handleClick(event) {
-    if (this.trigger === "click") {
-      event.preventDefault();
-      this.open = !this.open;
-    }
-  }
-  _handleFocusIn() {
-    if (this.trigger !== "manual" && !this._willBeFocusedByPress) {
-      this.open = true;
-    }
-  }
-  _handleFocusOut() {
-    if (this.trigger !== "manual") {
-      this.open = false;
-    }
-  }
-  _handlePointerEnter(event) {
-    if (this.trigger === "hover" && event.pointerType === "mouse") {
-      this.open = true;
-    }
-  }
-  _handlePointerLeave(event) {
-    if (this.trigger === "hover" && event.pointerType === "mouse") {
-      this.open = false;
-    }
-  }
-  _handlePointerDown() {
-    this._willBeFocusedByPress = this.trigger === "click" && !this.matches(":focus-within");
-  }
-  _handlePointerUp(event) {
-    this._willBeFocusedByPress = false;
-    if (this.trigger === "hover" && event.pointerType === "touch") {
-      this.open = !this.open;
-    }
-  }
-  _handleBeforeToggle(event) {
-    reDispatch(this, event, new ToggleEvent("beforetoggle", event));
-  }
-  _handleToggle(event) {
-    if (reDispatch(this, event, new ToggleEvent("toggle", event))) {
-      this.open = event.newState === "open";
+import { isClient } from "../../is-client.js";
+import { css, html, unsafeCSS } from "lit";
+import { cva } from "class-variance-authority";
+import { flip, offset, shift } from "@floating-ui/dom";
+import { guard } from "lit/directives/guard.js";
+//#region src/components/tooltip/daikin-tooltip.ts
+var cvaTooltip = cva([
+	"left-(--floating-x,0)",
+	"top-(--floating-y,0)",
+	"w-max",
+	"text-(length:--dds-font-size-350)",
+	"p-2",
+	"border",
+	"rounded-sm",
+	"absolute",
+	"floating-unready:hidden"
+], { variants: { color: {
+	default: [
+		"text-ddt-color-common-text-primary",
+		"bg-ddt-color-common-background-default",
+		"border-ddt-color-common-neutral-default"
+	],
+	inverse: [
+		"text-ddt-color-common-text-inverse",
+		"bg-ddt-color-common-surface-inverse",
+		"border-transparent"
+	]
+} } });
+var DEFAULT_TOOLTIP_SPACING = "var(--dds-space-300,12px)";
+var DaikinTooltip = class DaikinTooltip extends DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this._willBeFocusedByPress = false;
+		this._autoUpdateController = new FloatingUIAutoUpdateController(this);
+		this._hostStyles = isClient ? window.getComputedStyle(this) : null;
+	}
+	static registerCSSCustomProperties() {
+		if (!isClient) return;
+		window.CSS.registerProperty({
+			name: "--ddc-tooltip-spacing",
+			syntax: "<length>",
+			inherits: true,
+			initialValue: "0px"
+		});
+	}
+	static {
+		this.styles = css`
+    ${unsafeCSS(tailwind_default)}
+
+    :host {
+      display: inline-block;
+
+      --ddc-tooltip-spacing: ${unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
     }
-  }
-  render() {
-    var _a;
-    const spacing = parseInt(
-      ((_a = this._hostStyles) == null ? void 0 : _a.getPropertyValue("--ddc-tooltip-spacing")) || DEFAULT_TOOLTIP_SPACING,
-      10
-    );
-    return html`<div
+  `;
+	}
+	_handleClick(event) {
+		if (this.trigger === "click") {
+			event.preventDefault();
+			this.open = !this.open;
+		}
+	}
+	_handleFocusIn() {
+		if (this.trigger !== "manual" && !this._willBeFocusedByPress) this.open = true;
+	}
+	_handleFocusOut() {
+		if (this.trigger !== "manual") this.open = false;
+	}
+	_handlePointerEnter(event) {
+		if (this.trigger === "hover" && event.pointerType === "mouse") this.open = true;
+	}
+	_handlePointerLeave(event) {
+		if (this.trigger === "hover" && event.pointerType === "mouse") this.open = false;
+	}
+	_handlePointerDown() {
+		this._willBeFocusedByPress = this.trigger === "click" && !this.matches(":focus-within");
+	}
+	_handlePointerUp(event) {
+		this._willBeFocusedByPress = false;
+		if (this.trigger === "hover" && event.pointerType === "touch") this.open = !this.open;
+	}
+	_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-tooltip-spacing") || DEFAULT_TOOLTIP_SPACING, 10);
+		return html`<div
       class="relative inline-block text-ddt-color-common-text-primary"
     >
       <div
@@ -153,87 +130,67 @@ let DaikinTooltip = class extends DDSElement {
           <span class="whitespace-pre-line">${this.description}</span>
         </slot>
       </span>
-      ${// Activate auto update only when the tooltip is open.
-    // TODO(DDS-1226): refactor here with CSS Anchor Positioning instead of using floating-ui
-    guard(
-      [this.open, this.placement, spacing],
-      () => this._autoUpdateController.directive(
-        {
-          placement: this.placement,
-          middleware: [offset({ mainAxis: spacing }), flip(), shift()]
-        },
-        this.open
-      )
-    )}
+      ${guard([
+			this.open,
+			this.placement,
+			spacing
+		], () => this._autoUpdateController.directive({
+			placement: this.placement,
+			middleware: [
+				offset({ mainAxis: spacing }),
+				flip(),
+				shift()
+			]
+		}, this.open))}
     </div>`;
-  }
-  updated(changedProperties) {
-    var _a;
-    if (changedProperties.has("open")) {
-      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(this.open);
-    }
-  }
-};
-DaikinTooltip.styles = css`
-    ${unsafeCSS(tailwindStyles)}
-
-    :host {
-      display: inline-block;
-
-      --ddc-tooltip-spacing: ${unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
-    }
-  `;
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "bottom",
-    isAllowedValue: oneOf([
-      "top",
-      "bottom",
-      "left",
-      "right"
-    ])
-  })
-], DaikinTooltip.prototype, "placement", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "default",
-    isAllowedValue: oneOf(["default", "inverse"])
-  })
-], DaikinTooltip.prototype, "color", 2);
-__decorateClass([
-  property({ type: Boolean, reflect: true })
-], DaikinTooltip.prototype, "open", 2);
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "" })
-], DaikinTooltip.prototype, "description", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    attribute: "popover-value",
-    fallbackValue: "auto",
-    isAllowedValue: oneOf(["auto", "manual"])
-  })
-], DaikinTooltip.prototype, "popoverValue", 2);
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    fallbackValue: "hover",
-    isAllowedValue: oneOf([
-      "hover",
-      "click",
-      "manual"
-    ])
-  })
-], DaikinTooltip.prototype, "trigger", 2);
-DaikinTooltip = __decorateClass([
-  ddsElement("daikin-tooltip")
-], DaikinTooltip);
-export {
-  DaikinTooltip
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) this._autoUpdateController.floatingElement?.togglePopover(this.open);
+	}
 };
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: "top",
+	isAllowedValue: oneOf([
+		"top",
+		"bottom",
+		"left",
+		"right"
+	])
+})], DaikinTooltip.prototype, "placement", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: "default",
+	isAllowedValue: oneOf(["default", "inverse"])
+})], DaikinTooltip.prototype, "color", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], DaikinTooltip.prototype, "open", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinTooltip.prototype, "description", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "popover-value",
+	fallbackValue: "auto",
+	isAllowedValue: oneOf(["auto", "manual"])
+})], DaikinTooltip.prototype, "popoverValue", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: "hover",
+	isAllowedValue: oneOf([
+		"hover",
+		"click",
+		"manual"
+	])
+})], DaikinTooltip.prototype, "trigger", void 0);
+DaikinTooltip = __decorate([ddsElement("daikin-tooltip")], DaikinTooltip);
+//#endregion
+export { DaikinTooltip };

package/dist/es-dev/components/tooltip/index.js

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

package/dist/es-dev/components/tree/common.js

@@ -1,90 +1,89 @@
+//#region src/components/tree/common.ts
+/**
+* Get direction from key name.
+* @param key `event.key` where `event` is `KeyboardEvent`
+* @returns direction
+*/
 function getDirectionFromKey(key) {
-  return {
-    ArrowUp: "up",
-    ArrowDown: "down",
-    ArrowLeft: "left",
-    ArrowRight: "right"
-  }[key];
+	return {
+		ArrowUp: "up",
+		ArrowDown: "down",
+		ArrowLeft: "left",
+		ArrowRight: "right"
+	}[key];
 }
+/**
+* Common `tree-move-focus` event handler for `daikin-tree` and `daikin-tree-section`.
+* Moves the focus up or down among the children.
+* If it reaches the end, it returns `false` without moving the focus.
+*
+* @param event `TreeMoveFocusEvent`
+* @param children Children in the slot.
+* @returns `true` if moved focus. `false` if not moved focus because reached the end. `undefined` if not processed.
+*/
 function handleTreeMoveFocusCommon(event, children) {
-  const moveOffset = {
-    up: -1,
-    down: 1,
-    left: 0
-  }[event.detail.direction];
-  if (!moveOffset) {
-    return;
-  }
-  const target = event.target;
-  const enabledChildren = children.filter(({ disabled }) => !disabled);
-  const focusedItemIndex = enabledChildren.findIndex((item) => item === target);
-  if (focusedItemIndex < 0) {
-    return;
-  }
-  event.stopPropagation();
-  const child = enabledChildren[focusedItemIndex + moveOffset];
-  if (!child) {
-    return false;
-  }
-  if (moveOffset > 0) {
-    child.focus();
-  } else {
-    child.focusLastItem();
-  }
-  return true;
+	const moveOffset = {
+		up: -1,
+		down: 1,
+		left: 0
+	}[event.detail.direction];
+	if (!moveOffset) return;
+	const target = event.target;
+	const enabledChildren = children.filter(({ disabled }) => !disabled);
+	const focusedItemIndex = enabledChildren.findIndex((item) => item === target);
+	if (focusedItemIndex < 0) return;
+	event.stopPropagation();
+	const child = enabledChildren[focusedItemIndex + moveOffset];
+	if (!child) return false;
+	if (moveOffset > 0) child.focus();
+	else child.focusLastItem();
+	return true;
 }
+/**
+* `tree-move-focus` event handler for `daikin-tree-section`.
+*
+* @param section `daikin-tree-section`
+* @param event `TreeMoveFocusEvent`
+* @param children Children in the slot.
+*/
 function handleTreeMoveFocusSection(section, event, children) {
-  const { direction } = event.detail;
-  if (direction === "left") {
-    event.stopPropagation();
-    section.focus();
-  } else {
-    const result = handleTreeMoveFocusCommon(event, children);
-    if (result === false) {
-      if (direction === "up") {
-        section.focus();
-      } else {
-        emitTreeMoveFocus(section, "down");
-      }
-    }
-  }
+	const { direction } = event.detail;
+	if (direction === "left") {
+		event.stopPropagation();
+		section.focus();
+	} else if (handleTreeMoveFocusCommon(event, children) === false) {
+		if (direction === "up") section.focus();
+		else emitTreeMoveFocus(section, "down");
+	}
 }
+/**
+* `tree-move-focus` event handler for `daikin-tree`.
+*
+* @param event `TreeMoveFocusEvent`
+* @param children Children in the slot.
+*/
 function handleTreeMoveFocusRoot(event, children) {
-  event.stopPropagation();
-  handleTreeMoveFocusCommon(event, children);
+	event.stopPropagation();
+	handleTreeMoveFocusCommon(event, children);
 }
 function emitTreeMoveFocus(target, direction) {
-  target.dispatchEvent(
-    new CustomEvent("tree-move-focus", {
-      detail: {
-        direction
-      },
-      composed: true,
-      bubbles: true
-    })
-  );
+	target.dispatchEvent(new CustomEvent("tree-move-focus", {
+		detail: { direction },
+		composed: true,
+		bubbles: true
+	}));
 }
 function emitTreeSelect(target) {
-  target.dispatchEvent(
-    new Event("tree-select", {
-      composed: true,
-      bubbles: true
-    })
-  );
+	target.dispatchEvent(new Event("tree-select", {
+		composed: true,
+		bubbles: true
+	}));
 }
 function emitTreeUnselect(target) {
-  target.dispatchEvent(
-    new Event("tree-unselect", {
-      composed: true,
-      bubbles: true
-    })
-  );
+	target.dispatchEvent(new Event("tree-unselect", {
+		composed: true,
+		bubbles: true
+	}));
 }
-export {
-  emitTreeMoveFocus,
-  emitTreeSelect,
-  emitTreeUnselect,
-  getDirectionFromKey,
-  handleTreeMoveFocusRoot,
-  handleTreeMoveFocusSection
-};
+//#endregion
+export { emitTreeMoveFocus, emitTreeSelect, emitTreeUnselect, getDirectionFromKey, handleTreeMoveFocusRoot, handleTreeMoveFocusSection };