@jsenv/dom 0.7.0 → 0.7.2

package/dist/jsenv_dom.js

@@ -544,6 +544,9 @@ const normalizeNumber = (value, { unit, propertyName, preferedType }) => {
   if (typeof value === "string") {
     // Keep strings as-is (including %, em, rem, auto, none, etc.)
     if (preferedType === "string") {
+      if (unit && !value.endsWith(unit)) {
+        return `${value}${unit}`;
+      }
       return value;
     }
     // convert to number if possible (font-size: "12px" -> fontSize:12, opacity: "0.5" -> opacity: 0.5)
@@ -570,14 +573,21 @@ const normalizeNumber = (value, { unit, propertyName, preferedType }) => {
 };
 
 // Normalize styles for DOM application
-const normalizeStyles = (styles, context = "js") => {
+const normalizeStyles = (styles, context = "js", mutate = false) => {
   if (!styles) {
-    return {};
+    return mutate ? styles : {};
   }
   if (typeof styles === "string") {
     styles = parseStyleString(styles);
     return styles;
   }
+  if (mutate) {
+    for (const key of Object.keys(styles)) {
+      const value = styles[key];
+      styles[key] = normalizeStyle(value, key, context);
+    }
+    return styles;
+  }
   const normalized = {};
   for (const key of Object.keys(styles)) {
     const value = styles[key];
@@ -8317,7 +8327,7 @@ const createTransition = ({
       transition.value = value;
       transition.timing = isLast ? "end" : isFirstUpdate ? "start" : "progress";
       isFirstUpdate = false;
-      executionLifecycle.update(transition);
+      executionLifecycle.update?.(transition);
       executeUpdateCallbacks(transition);
     },
 
@@ -8339,8 +8349,8 @@ const createTransition = ({
     cancel: () => {
       if (executionLifecycle) {
         lifecycle.cancel(transition);
-        executionLifecycle.teardown();
-        executionLifecycle.restore();
+        executionLifecycle.teardown?.();
+        executionLifecycle.restore?.();
       }
       resume = null;
       playState = "idle";
@@ -8357,7 +8367,7 @@ const createTransition = ({
       }
       // "running" or "paused"
       lifecycle.finish(transition);
-      executionLifecycle.teardown();
+      executionLifecycle.teardown?.();
       resume = null;
       playState = "finished";
       executeFinishCallbacks();
@@ -8589,9 +8599,6 @@ const createHeightTransition = (element, to, options) => {
           teardown: () => {
             transitionStyleController.delete(element, "height");
           },
-          restore: () => {
-            transitionStyleController.delete(element, "height");
-          },
         };
       },
     },
@@ -8616,9 +8623,6 @@ const createWidthTransition = (element, to, options) => {
           teardown: () => {
             transitionStyleController.delete(element, "width");
           },
-          restore: () => {
-            transitionStyleController.delete(element, "width");
-          },
         };
       },
     },
@@ -8643,9 +8647,6 @@ const createOpacityTransition = (element, to, options = {}) => {
           teardown: () => {
             transitionStyleController.delete(element, "opacity");
           },
-          restore: () => {
-            transitionStyleController.delete(element, "opacity");
-          },
         };
       },
     },
@@ -8653,9 +8654,10 @@ const createOpacityTransition = (element, to, options = {}) => {
   return opacityTransition;
 };
 
-const createTranslateXTransition = (element, to, options) => {
+const createTranslateXTransition = (element, to, options = {}) => {
+  const { setup, ...rest } = options;
   const translateXTransition = createTimelineTransition({
-    ...options,
+    ...rest,
     constructor: createTranslateXTransition,
     key: element,
     to,
@@ -8663,6 +8665,7 @@ const createTranslateXTransition = (element, to, options) => {
     isVisual: true,
     lifecycle: {
       setup: () => {
+        const teardown = setup?.();
         return {
           from: getTranslateX(element),
           update: ({ value }) => {
@@ -8673,9 +8676,7 @@ const createTranslateXTransition = (element, to, options) => {
             });
           },
           teardown: () => {
-            transitionStyleController.delete(element, "transform.translateX");
-          },
-          restore: () => {
+            teardown?.();
             transitionStyleController.delete(element, "transform.translateX");
           },
         };
@@ -10276,15 +10277,26 @@ const useResizeStatus = (elementRef, { as = "number" } = {}) => {
 
 installImportMetaCss(import.meta);
 import.meta.css = /* css */ `
+  .ui_transition_container[data-transition-overflow] {
+    overflow: hidden;
+  }
+
   .ui_transition_container,
   .ui_transition_outer_wrapper,
   .ui_transition_measure_wrapper,
   .ui_transition_slot,
   .ui_transition_phase_overlay,
   .ui_transition_content_overlay {
-    display: inline-flex;
-    width: 100%;
-    height: 100%;
+    display: flex;
+    width: fit-content;
+    min-width: 100%;
+    height: fit-content;
+    min-height: 100%;
+    flex-direction: inherit;
+    align-items: inherit;
+    justify-content: inherit;
+    border-radius: inherit;
+    cursor: inherit;
   }
 
   .ui_transition_measure_wrapper[data-transition-translate-x] {
@@ -10376,6 +10388,39 @@ const initUITransition = (container) => {
     return { cleanup: () => {} };
   }
 
+  const [teardown, addTeardown] = createPubSub();
+
+  {
+    const transitionOverflowSet = new Set();
+    const updateTransitionOverflowAttribute = () => {
+      if (transitionOverflowSet.size > 0) {
+        container.setAttribute("data-transition-overflow", "");
+      } else {
+        container.removeAttribute("data-transition-overflow");
+      }
+    };
+    const onOverflowStart = (event) => {
+      transitionOverflowSet.add(event.detail.transitionId);
+      updateTransitionOverflowAttribute();
+    };
+    const onOverflowEnd = (event) => {
+      transitionOverflowSet.delete(event.detail.transitionId);
+      updateTransitionOverflowAttribute();
+    };
+    container.addEventListener("ui_transition_overflow_start", onOverflowStart);
+    container.addEventListener("ui_transition_overflow_end", onOverflowEnd);
+    addTeardown(() => {
+      container.removeEventListener(
+        "ui_transition_overflow_start",
+        onOverflowStart,
+      );
+      container.removeEventListener(
+        "ui_transition_overflow_end",
+        onOverflowEnd,
+      );
+    });
+  }
+
   const transitionController = createGroupTransitionController();
 
   // Transition state
@@ -11312,6 +11357,7 @@ const initUITransition = (container) => {
     slot,
 
     cleanup: () => {
+      teardown();
       mutationObserver.disconnect();
       stopResizeObserver();
       if (sizeTransition) {
@@ -11443,6 +11489,8 @@ const slideLeft = {
 
       return [
         createTranslateXTransition(oldElement, to, {
+          setup: () =>
+            notifyTransitionOverflow(newElement, "slide_out_old_content"),
           from,
           duration,
           startProgress,
@@ -11464,6 +11512,8 @@ const slideLeft = {
       debug("transition", "Slide in from empty:", { from, to });
       return [
         createTranslateXTransition(newElement, to, {
+          setup: () =>
+            notifyTransitionOverflow(newElement, "slice_in_new_content"),
           from,
           duration,
           startProgress,
@@ -11516,6 +11566,8 @@ const slideLeft = {
     // Slide old content out
     transitions.push(
       createTranslateXTransition(oldElement, -containerWidth, {
+        setup: () =>
+          notifyTransitionOverflow(newElement, "slide_out_old_content"),
         from: oldContentPosition,
         duration,
         startProgress,
@@ -11528,6 +11580,8 @@ const slideLeft = {
     // Slide new content in
     transitions.push(
       createTranslateXTransition(newElement, naturalNewPosition, {
+        setup: () =>
+          notifyTransitionOverflow(newElement, "slide_in_new_content"),
         from: effectiveFromPosition,
         duration,
         startProgress,
@@ -11651,4 +11705,29 @@ const crossFade = {
   },
 };
 
-export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, addWillChange, allowWheelThrough, appendStyles, canInterceptKeys, captureScrollState, createDragGestureController, createDragToMoveGestureController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findFocusable, getAvailableHeight, getAvailableWidth, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getInnerHeight, getInnerWidth, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateY, getVisuallyVisibleInfo, getWidth, initFlexDetailsSet, initFocusGroup, initPositionSticky, initUITransition, isScrollable, mergeStyles, normalizeStyles, parseCSSColor, pickLightOrDark, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, resolveCSSColor, resolveCSSSize, setAttribute, setAttributes, setStyles, startDragToResizeGesture, stickyAsRelativeCoords, stringifyCSSColor, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };
+const dispatchTransitionOverflowStartCustomEvent = (element, transitionId) => {
+  const customEvent = new CustomEvent("ui_transition_overflow_start", {
+    bubbles: true,
+    detail: {
+      transitionId,
+    },
+  });
+  element.dispatchEvent(customEvent);
+};
+const dispatchTransitionOverflowEndCustomEvent = (element, transitionId) => {
+  const customEvent = new CustomEvent("ui_transition_overflow_end", {
+    bubbles: true,
+    detail: {
+      transitionId,
+    },
+  });
+  element.dispatchEvent(customEvent);
+};
+const notifyTransitionOverflow = (element, transitionId) => {
+  dispatchTransitionOverflowStartCustomEvent(element, transitionId);
+  return () => {
+    dispatchTransitionOverflowEndCustomEvent(element, transitionId);
+  };
+};
+
+export { EASING, activeElementSignal, addActiveElementEffect, addAttributeEffect, addWillChange, allowWheelThrough, appendStyles, canInterceptKeys, captureScrollState, createDragGestureController, createDragToMoveGestureController, createHeightTransition, createIterableWeakSet, createOpacityTransition, createPubSub, createStyleController, createTimelineTransition, createTransition, createTranslateXTransition, createValueEffect, createWidthTransition, cubicBezier, dragAfterThreshold, elementIsFocusable, elementIsVisibleForFocus, elementIsVisuallyVisible, findAfter, findAncestor, findBefore, findDescendant, findFocusable, getAvailableHeight, getAvailableWidth, getBorderSizes, getContrastRatio, getDefaultStyles, getDragCoordinates, getDropTargetInfo, getElementSignature, getFirstVisuallyVisibleAncestor, getFocusVisibilityInfo, getHeight, getInnerHeight, getInnerWidth, getMarginSizes, getMaxHeight, getMaxWidth, getMinHeight, getMinWidth, getOpacity, getPaddingSizes, getPositionedParent, getPreferedColorScheme, getScrollContainer, getScrollContainerSet, getScrollRelativeRect, getSelfAndAncestorScrolls, getStyle, getTranslateX, getTranslateY, getVisuallyVisibleInfo, getWidth, initFlexDetailsSet, initFocusGroup, initPositionSticky, initUITransition, isScrollable, mergeStyles, normalizeStyle, normalizeStyles, parseCSSColor, pickLightOrDark, pickPositionRelativeTo, prefersDarkColors, prefersLightColors, preventFocusNav, preventFocusNavViaKeyboard, resolveCSSColor, resolveCSSSize, setAttribute, setAttributes, setStyles, startDragToResizeGesture, stickyAsRelativeCoords, stringifyCSSColor, trapFocusInside, trapScrollInside, useActiveElement, useAvailableHeight, useAvailableWidth, useMaxHeight, useMaxWidth, useResizeStatus, visibleRectEffect };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/dom",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "description": "DOM utilities for writing frontend code",
   "repository": {
     "type": "git",