@lynx-js/web-elements 0.11.3 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @lynx-js/web-elements
 
+## 0.12.0
+
+### Minor Changes
+
+- feat: add `willchange` event to `x-viewpager-ng` ([#2305](https://github.com/lynx-family/lynx-stack/pull/2305))
+
+### Patch Changes
+
+- fix: firefox `@supports(width:1rex)` ([#2288](https://github.com/lynx-family/lynx-stack/pull/2288))
+
+- fix: check computed overflow style in `getTheMostScrollableKid` to avoid treating `overflow: visible` elements as scroll containers ([#2309](https://github.com/lynx-family/lynx-stack/pull/2309))
+
+- fix: the inline-truncation should only work as a direct child of x-text ([#2287](https://github.com/lynx-family/lynx-stack/pull/2287))
+
+- fix: getVisibleCells cannot work in firefox due to contentvisibilityautostatechange not propagate list-item ([#2308](https://github.com/lynx-family/lynx-stack/pull/2308))
+
+- fix: foldview stuck issue ([#2304](https://github.com/lynx-family/lynx-stack/pull/2304))
+
 ## 0.11.3
 
 ### Patch Changes

package/dist/elements/XFoldViewNg/XFoldviewSlotNgTouchEventsHandler.js

@@ -25,9 +25,27 @@ export class XFoldviewSlotNgTouchEventsHandler {
             passive: false,
         });
     }
+    #isScrollContainer(element) {
+        let overflowY;
+        if (typeof element.computedStyleMap === 'function') {
+            try {
+                overflowY = element.computedStyleMap().get('overflow-y')?.toString()
+                    ?? 'visible';
+            }
+            catch {
+                overflowY = getComputedStyle(element).overflowY || 'visible';
+            }
+        }
+        else {
+            overflowY = getComputedStyle(element).overflowY || 'visible';
+        }
+        return overflowY === 'auto' || overflowY === 'scroll'
+            || overflowY === 'hidden' || overflowY === 'overlay';
+    }
     #getTheMostScrollableKid(delta) {
         const scrollableKid = this.#elements?.find((element) => {
-            if (element.scrollHeight > element.clientHeight) {
+            if (this.#isScrollContainer(element)
+                && element.scrollHeight > element.clientHeight) {
                 const couldScrollNear = delta < 0
                     && element.scrollTop !== 0;
                 const couldScrollFar = delta > 0
@@ -74,7 +92,8 @@ export class XFoldviewSlotNgTouchEventsHandler {
         if (Math.abs(event.deltaY) <= Math.abs(event.deltaX)) {
             return;
         }
-        const pathElements = event.composedPath().filter((element) => element instanceof Element && this.#dom.contains(element));
+        const pathElements = event.composedPath().filter((element) => element instanceof Element && this.#dom.contains(element)
+            && element !== this.#dom);
         const { clientX, clientY } = event;
         const pointElements = document.elementsFromPoint(clientX, clientY).filter(e => this.#dom.contains(e));
         this.#elements = [...new Set([...pathElements, ...pointElements])];
@@ -97,7 +116,7 @@ export class XFoldviewSlotNgTouchEventsHandler {
     }
     #touchStart = (event) => {
         const { pageX, pageY } = event.touches.item(0);
-        this.#elements = document.elementsFromPoint(pageX, pageY).filter(e => this.#dom.contains(e));
+        this.#elements = document.elementsFromPoint(pageX, pageY).filter(e => this.#dom.contains(e) && e !== this.#dom);
         this.#previousPageY = pageY;
         this.#previousPageX = pageX;
         this.#parentScrollTop = this.#getParentElement()?.scrollTop ?? 0;

package/dist/elements/XList/XList.js

@@ -174,11 +174,22 @@ let XList = (() => {
             };
         }
         getVisibleCells = () => {
-            const cells = Object.values(this.#cellsMap);
-            const children = Array.from(this.children).filter(node => {
+            let cells = Object.values(this.#cellsMap);
+            const children = Array.from(this.children).filter((node) => {
                 return node.tagName === 'LIST-ITEM';
             });
-            return cells.map(cell => {
+            // firfox cannot triiger contentvisibilityautostatechange event of list-item
+            if (cells.length === 0) {
+                const listRect = this.#getListContainer().getBoundingClientRect();
+                cells = children.filter((cell) => {
+                    const rect = cell.getBoundingClientRect();
+                    return (rect.bottom >= listRect.top
+                        && rect.top <= listRect.bottom
+                        && rect.right >= listRect.left
+                        && rect.left <= listRect.right);
+                });
+            }
+            return cells.map((cell) => {
                 const rect = cell.getBoundingClientRect();
                 return {
                     id: cell.getAttribute('id'),

package/dist/elements/XText/InlineTruncation.js

@@ -21,7 +21,7 @@ let InlineTruncation = (() => {
         }
         static XEnableCustomTruncation = 'x-text-custom-overflow';
         connectedCallback() {
-            if (!CSS.supports('selector(:has(inline-truncation))')) {
+            if (!CSS.supports('selector(:has(>inline-truncation))')) {
                 if (this.parentElement?.tagName === 'X-TEXT'
                     && !this.matches('inline-truncation ~ inline-truncation')) {
                     this.parentElement.setAttribute(InlineTruncation.XEnableCustomTruncation, '');

package/dist/elements/XText/XTextTruncation.js

@@ -45,16 +45,10 @@ let XTextTruncation = (() => {
             return !this.#hasInlineTruncation && !this.#tailColorConvert;
         }
         get #hasInlineTruncation() {
-            if (CSS.supports('selector(:has(inline-truncation))')) {
-                return this.#dom.matches(':has(inline-truncation)');
-            }
-            else {
-                const candidateElement = this.#dom.querySelector('inline-truncation');
-                if (candidateElement?.parentElement === this.#dom) {
-                    return true;
-                }
-            }
-            return false;
+            return !!this.#findValidInlineTruncation();
+        }
+        #findValidInlineTruncation() {
+            return this.#dom.querySelector(':scope > inline-truncation');
         }
         get #doExpensiveLineLayoutCalculation() {
             return (!isNaN(this.#maxLine)
@@ -139,7 +133,7 @@ let XTextTruncation = (() => {
                 const currentLineText = end - start;
                 if (this.#hasInlineTruncation) {
                     this.#dom.setAttribute(XTextTruncation.showInlineTruncation, '');
-                    const inlineTruncation = this.#dom.querySelector('inline-truncation');
+                    const inlineTruncation = this.#findValidInlineTruncation();
                     const inlineTruncationBoundingRect = inlineTruncation
                         .getBoundingClientRect();
                     const parentWidth = parentBondingRect.width;

package/dist/elements/XViewpagerNg/XViewpagerNgEvents.d.ts

@@ -5,6 +5,7 @@ export declare class XViewpagerNgEvents implements InstanceType<AttributeReactiv
     static observedAttributes: never[];
     constructor(dom: XViewpagerNg);
     _enableChangeEvent(status: boolean): void;
+    _enableWillChangeEvent(status: boolean): void;
     _enableOffsetChangeEvent(status: boolean): void;
     connectedCallback(): void;
     dispose(): void;

package/dist/elements/XViewpagerNg/XViewpagerNgEvents.js

@@ -11,13 +11,16 @@ import { registerEventEnableStatusChangeHandler } from '../../element-reactive/i
 let XViewpagerNgEvents = (() => {
     let _instanceExtraInitializers = [];
     let __enableChangeEvent_decorators;
+    let __enableWillChangeEvent_decorators;
     let __enableOffsetChangeEvent_decorators;
     return class XViewpagerNgEvents {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
             __enableChangeEvent_decorators = [registerEventEnableStatusChangeHandler('change')];
+            __enableWillChangeEvent_decorators = [registerEventEnableStatusChangeHandler('willchange')];
             __enableOffsetChangeEvent_decorators = [registerEventEnableStatusChangeHandler('offsetchange')];
             __esDecorate(this, null, __enableChangeEvent_decorators, { kind: "method", name: "_enableChangeEvent", static: false, private: false, access: { has: obj => "_enableChangeEvent" in obj, get: obj => obj._enableChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, __enableWillChangeEvent_decorators, { kind: "method", name: "_enableWillChangeEvent", static: false, private: false, access: { has: obj => "_enableWillChangeEvent" in obj, get: obj => obj._enableWillChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, null, __enableOffsetChangeEvent_decorators, { kind: "method", name: "_enableOffsetChangeEvent", static: false, private: false, access: { has: obj => "_enableOffsetChangeEvent" in obj, get: obj => obj._enableOffsetChangeEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
         }
@@ -70,12 +73,29 @@ let XViewpagerNgEvents = (() => {
         };
         #touchEndHandler = () => {
             this.#isDragging = false;
+            if (this.#enableWillChange) {
+                const scrollContainer = this.#getScrollContainer();
+                const oneItemWidth = this.#dom.clientWidth;
+                if (oneItemWidth > 0) {
+                    const scrollLeft = scrollContainer.scrollLeft;
+                    let targetIndex = Math.round(scrollLeft / oneItemWidth);
+                    targetIndex = Math.max(0, Math.min(targetIndex, this.#dom.children.length - 1));
+                    this.#dom.dispatchEvent(new CustomEvent('willchange', {
+                        ...commonComponentEventSetting,
+                        detail: { index: targetIndex },
+                    }));
+                }
+            }
         };
         #enableChange = false;
         _enableChangeEvent(status) {
             this.#enableChange = status;
             this.#enableScrollEventListener();
         }
+        #enableWillChange = false;
+        _enableWillChangeEvent(status) {
+            this.#enableWillChange = status;
+        }
         #enableOffsetChange = false;
         _enableOffsetChangeEvent(status) {
             this.#enableOffsetChange = status;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements",
-  "version": "0.11.3",
+  "version": "0.12.0",
   "private": false,
   "repository": {
     "type": "git",

package/src/compat/LinearContainer/linear-compat.css

@@ -26,7 +26,7 @@
   */
 @supports not
   ((content-visibility: auto) and (transition-behavior: allow-discrete) and
-    (width: 1rex)) {
+    (-webkit-box-reflect: above)) {
   * {
     --lynx-display: linear;
     --lynx-linear-weight-sum: 1;
@@ -47,6 +47,7 @@
     --flex-wrap: nowrap;
     --align-self: auto;
   }
+
   [lynx-computed-display="linear"] {
     flex-wrap: nowrap !important;
     flex-direction: column;
@@ -61,11 +62,9 @@
 
   [lynx-computed-display="flex"] > *,
   [lynx-computed-display="flex"] > lynx-wrapper > * {
-    flex: var(
-      --flex,
-      var(--flex-grow) var(--flex-shrink) var(--flex-basis)
-    );
+    flex: var(--flex, var(--flex-grow) var(--flex-shrink) var(--flex-basis));
   }
+
   [lynx-computed-display="linear"] > *,
   [lynx-computed-display="linear"] > lynx-wrapper > * {
     flex-shrink: 0 !important;
@@ -111,6 +110,7 @@
     > * {
     align-self: var(--align-self-column);
   }
+
   [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"] > *,
   [lynx-computed-display="linear"][lynx-linear-orientation="horizontal-reverse"],
   [lynx-computed-display="linear"][lynx-linear-orientation="horizontal"]

package/src/elements/XText/x-text.css

@@ -12,7 +12,8 @@ x-text {
   color: initial;
 }
 
-x-text > x-text, x-text > lynx-wrapper > x-text {
+x-text > x-text,
+x-text > lynx-wrapper > x-text {
   color: inherit;
 }
 
@@ -33,11 +34,17 @@ x-text > x-text::part(inner-box),
 x-text > lynx-wrapper > x-text::part(inner-box) {
   display: contents !important;
 }
-x-text::part(inner-box), inline-text, x-text::part(slot) {
+
+x-text::part(inner-box),
+inline-text,
+x-text::part(slot) {
   background-clip: inherit;
   -webkit-background-clip: inherit;
 }
-inline-text, inline-image, inline-truncation {
+
+inline-text,
+inline-image,
+inline-truncation {
   display: none;
 }
 
@@ -73,15 +80,19 @@ inline-text > lynx-wrapper > inline-image,
 inline-text > lynx-wrapper > x-image {
   display: contents !important;
 }
-x-text > x-view, x-text > lynx-wrapper > x-view {
+
+x-text > x-view,
+x-text > lynx-wrapper > x-view {
   display: inline-flex !important;
 }
+
 x-text > x-view,
 x-text[x-show-inline-truncation] > inline-truncation,
 x-text > lynx-wrapper > x-view,
 x-text[x-show-inline-truncation] > lynx-wrapper > inline-truncation {
   display: inline-flex;
 }
+
 x-text > inline-truncation:first-child,
 x-text > lynx-wrapper > inline-truncation:first-child {
   max-width: 100%;
@@ -125,7 +136,10 @@ inline-truncation > lynx-wrapper > x-image::part(img) {
 
 /* attribute text-selection */
 
-x-text, inline-text, inline-image, inline-truncation {
+x-text,
+inline-text,
+inline-image,
+inline-truncation {
   -webkit-user-select: none;
   user-select: none;
 }
@@ -154,6 +168,7 @@ x-text[text-selection] > lynx-wrapper > inline-truncation {
   -webkit-user-select: auto;
   user-select: auto;
 }
+
 x-text[x-text-clipped] > [x-text-clipped]:not(inline-truncation),
 x-text[x-text-clipped]
   > lynx-wrapper
@@ -166,9 +181,9 @@ x-text[x-text-clipped]:not([tail-color-convert="false"])::part(inner-box)::after
   content: "...";
 }
 
-x-text[x-text-clipped]:has(inline-truncation)::part(inner-box):after,
+x-text[x-text-clipped]:has(> inline-truncation)::part(inner-box):after,
 x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box):after,
-x-text[x-text-clipped]:has(inline-truncation)::part(inner-box)::after,
+x-text[x-text-clipped]:has(> inline-truncation)::part(inner-box)::after,
 x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box)::after {
   content: "" !important;
 }
@@ -198,41 +213,45 @@ x-text[text-maxline="0"] {
   display: none;
 }
 
-@supports not selector(:has(inline-truncation)) {
+@supports not selector(:has(> inline-truncation)) {
   x-text[text-maxline="1"]:not([tail-color-convert="false"]):not([x-text-custom-overflow])::part(inner-box) {
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
 
-@supports selector(:has(inline-truncation)) {
+@supports selector(:has(> inline-truncation)) {
   /* text-wrap  chrome 114, firefox 121, safari 17.4*/
-  x-text[text-maxline="1"]:not([tail-color-convert="false"], :has(inline-truncation))::part(inner-box) {
+  x-text[text-maxline="1"]:not([tail-color-convert="false"], :has(> inline-truncation))::part(inner-box) {
     text-wrap: nowrap;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
+
 x-text[text-maxline="1"] {
   /* This is the stretch size */
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/max-width */
   max-width: -moz-available;
   max-width: -webkit-fill-available;
 }
+
 x-text[text-maxline="1"]:not([tail-color-convert="false"])::part(inner-box) {
   display: block;
 }
 
 x-text[text-maxline][x-text-custom-overflow]::part(inner-box),
-x-text[text-maxline]:has(inline-truncation)::part(inner-box),
+x-text[text-maxline]:has(> inline-truncation)::part(inner-box),
 x-text[text-maxline][tail-color-convert="false"]::part(inner-box) {
   display: block !important;
 }
 
 raw-text {
-  display: none; /* raw-text only works in x-text */
+  display: none;
+  /* raw-text only works in x-text */
   white-space-collapse: preserve-breaks;
 }
+
 x-text > raw-text,
 inline-text > raw-text,
 x-text > lynx-wrapper > raw-text,

package/src/elements/common-css/linear.css

@@ -7,51 +7,61 @@
   inherits: false;
   initial-value: linear;
 }
+
 @property --lynx-linear-weight-sum {
   syntax: "<number>";
   inherits: false;
   initial-value: 1;
 }
+
 @property --lynx-linear-weight {
   syntax: "<number>";
   inherits: false;
   initial-value: 0;
 }
+
 @property --justify-content-column {
   syntax: "flex-start|flex-end|center|space-between|space-around";
   inherits: false;
   initial-value: flex-start;
 }
+
 @property --justify-content-column-reverse {
   syntax: "flex-start|flex-end|center|space-between|space-around";
   inherits: false;
   initial-value: flex-start;
 }
+
 @property --justify-content-row {
   syntax: "flex-start|flex-end|center|space-between|space-around";
   inherits: false;
   initial-value: flex-start;
 }
+
 @property --justify-content-row-reverse {
   syntax: "flex-start|flex-end|center|space-between|space-around";
   inherits: false;
   initial-value: flex-start;
 }
+
 @property --align-self-row {
   syntax: "start|end|center|stretch|auto";
   inherits: false;
   initial-value: auto;
 }
+
 @property --align-self-column {
   syntax: "start|end|center|stretch|auto";
   inherits: false;
   initial-value: auto;
 }
+
 @property --lynx-linear-weight-basis {
   syntax: "auto|<number>|<length>";
   inherits: false;
   initial-value: auto;
 }
+
 @property --lynx-linear-orientation {
   syntax: "<custom-ident>";
   inherits: false;
@@ -62,29 +72,35 @@
   syntax: "*";
   inherits: false;
 }
+
 @property --flex-wrap {
   syntax: "*";
   inherits: false;
 }
+
 @property --flex-grow {
   syntax: "<number>";
   inherits: false;
   initial-value: 0;
 }
+
 @property --flex-shrink {
   syntax: "<number>";
   inherits: false;
   initial-value: 1;
 }
+
 @property --flex-basis {
   syntax: "*";
   inherits: false;
   initial-value: auto;
 }
+
 @property --flex-value {
   syntax: "*";
   inherits: false;
 }
+
 @property --flex {
   syntax: "*";
   inherits: false;
@@ -189,6 +205,7 @@ list-item {
     var(--justify-content-column-reverse)
   );
 }
+
 x-view,
 x-foldview-header-ng,
 x-foldview-ng,
@@ -203,15 +220,9 @@ x-viewpager-item-ng,
 x-viewpager-ng,
 list-item {
   flex-wrap: var(--lynx-display-linear, nowrap)
-    var(
-      --lynx-display-flex,
-      var(--flex-wrap)
-    );
+    var(--lynx-display-flex, var(--flex-wrap));
   flex-direction: var(--lynx-display-linear, var(--linear-flex-direction))
-    var(
-      --lynx-display-flex,
-      var(--flex-direction)
-    );
+    var(--lynx-display-flex, var(--flex-direction));
   justify-content: var(--lynx-display-linear, var(--linear-justify-content));
 }
 
@@ -250,8 +261,8 @@ list-item {
  * it fixed in 116.0.5806.0, detail: https://issues.chromium.org/issues/40270007
  *
  * so we limit this feature to chrome 117, safari 18, firefox no:
- * rex unit: chrome 111, safari 17.2, firefox no
- *  https://developer.mozilla.org/en-US/docs/Web/CSS/length
+ * -webkit-box-reflect: chrome 4, safari 4, firefox no
+ *  https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/-webkit-box-reflect
  * transition-behavior:allow-discrete: chrome 117, safari 18, firefox 125
  *  https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior
  *  https://caniuse.com/mdn-css_properties_display_is_transitionable
@@ -260,7 +271,7 @@ list-item {
  * 
  */
 @supports (content-visibility: auto) and
-  (transition-behavior: allow-discrete) and (width: 1rex) {
+  (transition-behavior: allow-discrete) and (-webkit-box-reflect: above) {
   @container style(--lynx-display: linear) {
     x-view,
     x-blur-view,
@@ -333,10 +344,7 @@ list-item {
     x-textarea,
     x-list,
     list-item {
-      flex: var(
-        --flex,
-        var(--flex-grow) var(--flex-shrink) var(--flex-basis)
-      );
+      flex: var(--flex, var(--flex-grow) var(--flex-shrink) var(--flex-basis));
     }
   }