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

package/dist/cjs-dev/components/tooltip/daikin-tooltip.cjs

@@ -1,127 +1,102 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dom = require("@floating-ui/dom");
-const classVarianceAuthority = require("class-variance-authority");
-const lit = require("lit");
-const guard_js = require("lit/directives/guard.js");
-const ddsElement = require("../../base/dds-element.cjs");
-require("../../base/dds-form-element.cjs");
-const ddsProperty = require("../../base/dds-property.cjs");
-const decorators = require("../../base/decorators.cjs");
-require("../../base/define.cjs");
-const floatingUiAutoUpdate = require("../../controllers/floating-ui-auto-update.cjs");
-const isClient = require("../../is-client.cjs");
-const tailwind = require("../../tailwind.css.cjs");
-const reDispatch = require("../../utils/re-dispatch.cjs");
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators2[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const cvaTooltip = classVarianceAuthority.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";
-exports.DaikinTooltip = class DaikinTooltip extends ddsElement.DDSElement {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this._willBeFocusedByPress = false;
-    this._autoUpdateController = new floatingUiAutoUpdate.FloatingUIAutoUpdateController(this);
-    this._hostStyles = isClient.isClient ? window.getComputedStyle(this) : null;
-  }
-  static registerCSSCustomProperties() {
-    if (!isClient.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.reDispatch(this, event, new ToggleEvent("beforetoggle", event));
-  }
-  _handleToggle(event) {
-    if (reDispatch.reDispatch(this, event, new ToggleEvent("toggle", event))) {
-      this.open = event.newState === "open";
+const require_dds_element = require("../../base/dds-element.cjs");
+const require_dds_property = require("../../base/dds-property.cjs");
+const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs");
+const require_decorators = require("../../base/decorators.cjs");
+require("../../base/index.cjs");
+const require_tailwind = require("../../tailwind.css.cjs");
+const require_floating_ui_auto_update = require("../../controllers/floating-ui-auto-update.cjs");
+const require_re_dispatch = require("../../utils/re-dispatch.cjs");
+const require_is_client = require("../../is-client.cjs");
+let lit = require("lit");
+let class_variance_authority = require("class-variance-authority");
+let _floating_ui_dom = require("@floating-ui/dom");
+let lit_directives_guard_js = require("lit/directives/guard.js");
+//#region src/components/tooltip/daikin-tooltip.ts
+var cvaTooltip = (0, class_variance_authority.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 require_dds_element.DDSElement {
+	constructor(..._args) {
+		super(..._args);
+		this.open = false;
+		this._willBeFocusedByPress = false;
+		this._autoUpdateController = new require_floating_ui_auto_update.FloatingUIAutoUpdateController(this);
+		this._hostStyles = require_is_client.isClient ? window.getComputedStyle(this) : null;
+	}
+	static registerCSSCustomProperties() {
+		if (!require_is_client.isClient) return;
+		window.CSS.registerProperty({
+			name: "--ddc-tooltip-spacing",
+			syntax: "<length>",
+			inherits: true,
+			initialValue: "0px"
+		});
+	}
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
+
+    :host {
+      display: inline-block;
+
+      --ddc-tooltip-spacing: ${(0, lit.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 lit.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) {
+		require_re_dispatch.reDispatch(this, event, new ToggleEvent("beforetoggle", event));
+	}
+	_handleToggle(event) {
+		if (require_re_dispatch.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 lit.html`<div
       class="relative inline-block text-ddt-color-common-text-primary"
     >
       <div
@@ -155,84 +130,72 @@ exports.DaikinTooltip = class DaikinTooltip extends ddsElement.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_js.guard(
-      [this.open, this.placement, spacing],
-      () => this._autoUpdateController.directive(
-        {
-          placement: this.placement,
-          middleware: [dom.offset({ mainAxis: spacing }), dom.flip(), dom.shift()]
-        },
-        this.open
-      )
-    )}
+      ${(0, lit_directives_guard_js.guard)([
+			this.open,
+			this.placement,
+			spacing
+		], () => this._autoUpdateController.directive({
+			placement: this.placement,
+			middleware: [
+				(0, _floating_ui_dom.offset)({ mainAxis: spacing }),
+				(0, _floating_ui_dom.flip)(),
+				(0, _floating_ui_dom.shift)()
+			]
+		}, this.open))}
     </div>`;
-  }
-  updated(changedProperties) {
-    var _a;
-    if (changedProperties.has("open")) {
-      (_a = this._autoUpdateController.floatingElement) == null ? void 0 : _a.togglePopover(this.open);
-    }
-  }
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("open")) this._autoUpdateController.floatingElement?.togglePopover(this.open);
+	}
 };
-exports.DaikinTooltip.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: inline-block;
-
-      --ddc-tooltip-spacing: ${lit.unsafeCSS(DEFAULT_TOOLTIP_SPACING)};
-    }
-  `;
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "bottom",
-    isAllowedValue: ddsProperty.oneOf([
-      "top",
-      "bottom",
-      "left",
-      "right"
-    ])
-  })
-], exports.DaikinTooltip.prototype, "placement", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "default",
-    isAllowedValue: ddsProperty.oneOf(["default", "inverse"])
-  })
-], exports.DaikinTooltip.prototype, "color", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinTooltip.prototype, "open", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
-], exports.DaikinTooltip.prototype, "description", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    attribute: "popover-value",
-    fallbackValue: "auto",
-    isAllowedValue: ddsProperty.oneOf(["auto", "manual"])
-  })
-], exports.DaikinTooltip.prototype, "popoverValue", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: "hover",
-    isAllowedValue: ddsProperty.oneOf([
-      "hover",
-      "click",
-      "manual"
-    ])
-  })
-], exports.DaikinTooltip.prototype, "trigger", 2);
-exports.DaikinTooltip = __decorateClass([
-  decorators.ddsElement("daikin-tooltip")
-], exports.DaikinTooltip);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "top",
+	isAllowedValue: require_dds_property.oneOf([
+		"top",
+		"bottom",
+		"left",
+		"right"
+	])
+})], DaikinTooltip.prototype, "placement", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "default",
+	isAllowedValue: require_dds_property.oneOf(["default", "inverse"])
+})], DaikinTooltip.prototype, "color", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinTooltip.prototype, "open", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinTooltip.prototype, "description", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "popover-value",
+	fallbackValue: "auto",
+	isAllowedValue: require_dds_property.oneOf(["auto", "manual"])
+})], DaikinTooltip.prototype, "popoverValue", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: "hover",
+	isAllowedValue: require_dds_property.oneOf([
+		"hover",
+		"click",
+		"manual"
+	])
+})], DaikinTooltip.prototype, "trigger", void 0);
+DaikinTooltip = require_decorate.default([require_decorators.ddsElement("daikin-tooltip")], DaikinTooltip);
+//#endregion
+Object.defineProperty(exports, "DaikinTooltip", {
+	enumerable: true,
+	get: function() {
+		return DaikinTooltip;
+	}
+});

package/dist/cjs-dev/components/tooltip/daikin-tooltip.d.cts

@@ -14,7 +14,7 @@ type TooltipVariantProps = MergeVariantProps<typeof cvaTooltip>;
  * @slot - A slot for the element to which the tooltip is attached (the trigger element).
  * @slot description - A slot for the tooltip description content. Tooltips don't have a prescribed maximum or minimum width. If you plan to use longer text, please note that you'll need to manually implement line breaks.
  *
- * @cssprop [--ddc-tooltip-spacing=20px] - Spacing between the tooltip and the trigger.
+ * @cssprop [--ddc-tooltip-spacing] - Spacing between the tooltip and the trigger. The default value refers to the `--dds-space-300` design token.
  *
  * @csspart tooltip - CSS styles applied to the `tooltip` part target the internal `<span>` element wrapping the content. For instance, setting `max-width: 8rem;` on this part restricts the container's width, causing long text to wrap automatically.
  *
@@ -43,7 +43,7 @@ export declare class DaikinTooltip extends DDSElement {
     /**
      * Specifies the position of the tooltip relative to the trigger.
      *
-     * @default "bottom"
+     * @default "top"
      */
     placement: "top" | "bottom" | "left" | "right";
     /**

package/dist/cjs-dev/components/tooltip/index.cjs

@@ -1,7 +1,8 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinTooltip = require("./daikin-tooltip.cjs");
+const require_daikin_tooltip = require("./daikin-tooltip.cjs");
 Object.defineProperty(exports, "DaikinTooltip", {
-  enumerable: true,
-  get: () => daikinTooltip.DaikinTooltip
+	enumerable: true,
+	get: function() {
+		return require_daikin_tooltip.DaikinTooltip;
+	}
 });

package/dist/cjs-dev/components/tree/common.cjs

@@ -1,87 +1,91 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#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
+	}));
 }
+//#endregion
 exports.emitTreeMoveFocus = emitTreeMoveFocus;
 exports.emitTreeSelect = emitTreeSelect;
 exports.emitTreeUnselect = emitTreeUnselect;