npm - @daikin-oss/design-system-web-components - Versions diffs - 1.5.2-next.0 → 1.6.0-next.0 - Mend

@daikin-oss/design-system-web-components 1.5.2-next.0 → 1.6.0-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (483) hide show

package/dist/es/controllers/block-scroll.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+import { ReactiveControllerHost } from 'lit';
+/**
+ * CSS custom property set on `<html>` while any scroll lock is active.
+ * To enable scroll locking, add the following CSS. If you use a custom scroll container instead of `body`, replace the selector accordingly:
+ *
+ * ```css
+ * body {
+ *   overflow: var(--ddc-scroll-lock, auto);
+ * }
+ * ```
+ *
+ * When no lock is active, the property is removed and the fallback value (`auto`) takes effect automatically.
+ */
+export declare const DDS_SCROLL_LOCK_VAR = "--ddc-scroll-lock";
+/**
+ * A reactive controller that prevents `document.body` from scrolling while
+ * one or more overlay components (e.g. drawers, modals) are open.
+ *
+ * Usage: call `directive(this.open)` inside a `guard` in the component's
+ * `render()`. The directive acquires the lock on connect and releases it
+ * automatically on disconnect — including when the host is removed from the
+ * DOM — so no manual cleanup is needed.
+ *
+ * @example
+ *
+ * ```ts
+ * class MyOverlay extends DDSElement {
+ *   private readonly _blockScroll = new BlockScrollController(this);
+ *
+ *   override render() {
+ *     return html`
+ *       ...
+ *       ${guard([this.open], () => this._blockScroll.directive(this.open))}
+ *     `;
+ *   }
+ * }
+ * ```
+ */
+export declare class BlockScrollController<T extends ReactiveControllerHost & HTMLElement> {
+    private readonly _host;
+    constructor(_host: T);
+    /**
+     * Returns the directive result when `enabled` is `true`, or `nothing` when
+     * `false`. Placing this inside a `guard([open], ...)` in the template ensures
+     * the lock is acquired/released exactly when `open` changes.
+     */
+    directive(enabled?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
+}

package/dist/es/controllers/block-scroll.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { nothing } from "lit";
+import { createControllerDirective } from "./helpers/controller-directive.js";
+const ATTR_COUNT = "data-dds-scroll-lock-count";
+const DDS_SCROLL_LOCK_VAR = "--ddc-scroll-lock";
+const blockScrollDirective = createControllerDirective(
+  // The host element is accepted as an argument to ensure a non-empty type
+  // parameter tuple, which is required for TypeScript to correctly resolve
+  // the return type of the directive at call sites.
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  (_host) => {
+    const count = Number(document.body.getAttribute(ATTR_COUNT) ?? 0);
+    if (count === 0) {
+      document.documentElement.style.setProperty(DDS_SCROLL_LOCK_VAR, "hidden");
+    }
+    document.body.setAttribute(ATTR_COUNT, String(count + 1));
+    return () => {
+      const currentCount = Number(document.body.getAttribute(ATTR_COUNT) ?? 0);
+      if (currentCount <= 1) {
+        document.body.removeAttribute(ATTR_COUNT);
+        document.documentElement.style.removeProperty(DDS_SCROLL_LOCK_VAR);
+      } else {
+        document.body.setAttribute(ATTR_COUNT, String(currentCount - 1));
+      }
+    };
+  }
+);
+class BlockScrollController {
+  constructor(_host) {
+    this._host = _host;
+  }
+  /**
+   * Returns the directive result when `enabled` is `true`, or `nothing` when
+   * `false`. Placing this inside a `guard([open], ...)` in the template ensures
+   * the lock is acquired/released exactly when `open` changes.
+   */
+  directive(enabled = true) {
+    return enabled ? blockScrollDirective(this._host) : nothing;
+  }
+}
+export {
+  BlockScrollController,
+  DDS_SCROLL_LOCK_VAR
+};

package/dist/es/controllers/focus-trap.d.ts CHANGED Viewed

@@ -6,5 +6,5 @@ export declare class FocusTrapController<T extends ReactiveControllerHost & HTML
     private readonly _refCallbackContainer;
     constructor(_host: T, _onDeactivate: () => void);
     refContainer(): import('lit-html/directive.js').DirectiveResult<typeof import('lit-html/directives/ref.js').RefDirective>;
-    directive(open?: boolean, persistent?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
+    directive(open?: boolean, persistent?: boolean, enableOutsideClickDeactivation?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
 }

package/dist/es/controllers/focus-trap.js CHANGED Viewed

@@ -2,21 +2,32 @@ import { createFocusTrap } from "focus-trap";
 import { nothing } from "lit";
 import { ref } from "lit/directives/ref.js";
 import { createControllerDirective } from "./helpers/controller-directive.js";
-const focusTrapDirective = createControllerDirective((container, persistent, onDeactivate) => {
-  const trap = createFocusTrap(container, {
-    escapeDeactivates: !persistent,
-    fallbackFocus: container,
-    tabbableOptions: {
-      getShadowRoot: (node) => node.shadowRoot ?? void 0
-    },
-    clickOutsideDeactivates: !persistent,
-    onDeactivate
-  });
-  trap.activate();
-  return () => {
-    trap.deactivate();
-  };
-});
+const focusTrapDirective = createControllerDirective(
+  (container, persistent, enableOutsideClickDeactivation, onDeactivate) => {
+    const trap = createFocusTrap(container, {
+      escapeDeactivates: !persistent,
+      fallbackFocus: container,
+      preventScroll: true,
+      tabbableOptions: {
+        getShadowRoot: (node) => node.shadowRoot ?? void 0
+      },
+      // When the consumer handles outside clicks itself (e.g. via a backdrop
+      // click handler), disable focus-trap's own outside-click detection.
+      // On iOS Safari, focus-trap's pointerdown listener calls deactivate()
+      // which moves focus before the synthesized `click` fires, causing the
+      // browser to redirect the tap away from the backdrop element.
+      clickOutsideDeactivates: !persistent && enableOutsideClickDeactivation,
+      // Prevent focus-trap from calling event.preventDefault() on any outside
+      // click when the consumer is responsible for closing.
+      ...enableOutsideClickDeactivation ? {} : { allowOutsideClick: () => true },
+      onDeactivate
+    });
+    trap.activate();
+    return () => {
+      trap.deactivate();
+    };
+  }
+);
 class FocusTrapController {
   constructor(_host, _onDeactivate) {
     this._host = _host;
@@ -30,11 +41,16 @@ class FocusTrapController {
   refContainer() {
     return ref(this._refCallbackContainer);
   }
-  directive(open = true, persistent = false) {
+  directive(open = true, persistent = false, enableOutsideClickDeactivation = true) {
     if (!open || !this._container) {
       return nothing;
     }
-    return focusTrapDirective(this._container, persistent, this._onDeactivate);
+    return focusTrapDirective(
+      this._container,
+      persistent,
+      enableOutsideClickDeactivation,
+      this._onDeactivate
+    );
   }
 }
 export {

package/dist/es/index.js CHANGED Viewed

@@ -16,6 +16,10 @@ import { DaikinCheckboxGroup } from "./components/checkbox-group/daikin-checkbox
 import { DaikinChip } from "./components/chip/daikin-chip.js";
 import { DaikinCombobox, defaultFilterFn } from "./components/combobox/daikin-combobox.js";
 import { DaikinDatePicker } from "./components/date-picker/daikin-date-picker.js";
+import { DaikinDivider } from "./components/divider/daikin-divider.js";
+import { DaikinDrawer } from "./components/drawer/daikin-drawer.js";
+import { DaikinDrawerFooter } from "./components/drawer-footer/daikin-drawer-footer.js";
+import { DaikinDrawerHeader } from "./components/drawer-header/daikin-drawer-header.js";
 import { DaikinDropdown } from "./components/dropdown/daikin-dropdown.js";
 import { DaikinDropdownItem } from "./components/dropdown-item/daikin-dropdown-item.js";
 import { DaikinEmptyState } from "./components/empty-state/daikin-empty-state.js";
@@ -61,6 +65,9 @@ import { DaikinTooltip } from "./components/tooltip/daikin-tooltip.js";
 import { DaikinTree } from "./components/tree/daikin-tree.js";
 import { DaikinTreeItem, cvaTreeChildren } from "./components/tree-item/daikin-tree-item.js";
 import { DaikinTreeSection } from "./components/tree-section/daikin-tree-section.js";
+import { DaikinVerticalNavigation } from "./components/vertical-navigation/daikin-vertical-navigation.js";
+import { DaikinVerticalNavigationItem } from "./components/vertical-navigation-item/daikin-vertical-navigation-item.js";
+import { DaikinVerticalNavigationMenuItem } from "./components/vertical-navigation-menu-item/daikin-vertical-navigation-menu-item.js";
 import { IconRegistry, iconRegistry } from "./icon-registry.js";
 import { getNavigationTarget, getSPANavigationURL, isInternalNavigation, shouldSPANavigate } from "./navigation.js";
 export {
@@ -82,6 +89,10 @@ export {
   DaikinChip,
   DaikinCombobox,
   DaikinDatePicker,
+  DaikinDivider,
+  DaikinDrawer,
+  DaikinDrawerFooter,
+  DaikinDrawerHeader,
   DaikinDropdown,
   DaikinDropdownItem,
   DaikinEmptyState,
@@ -127,6 +138,9 @@ export {
   DaikinTree,
   DaikinTreeItem,
   DaikinTreeSection,
+  DaikinVerticalNavigation,
+  DaikinVerticalNavigationItem,
+  DaikinVerticalNavigationMenuItem,
   IconRegistry,
   calcDigitInput,
   cvaTreeChildren,