@lynx-js/web-elements-canary 0.8.9 → 0.8.10-canary-20251103-fece7d0a

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @lynx-js/web-elements
 
+## 0.8.10-canary-20251103115041-fece7d0a92fa76948488373757a27dff52a90437
+
+### Patch Changes
+
+- feat: 1. Added support for the list `estimated-main-axis-size-px` property; the width and height of `list-item` are no longer required. ([#1911](https://github.com/lynx-family/lynx-stack/pull/1911))
+
+  2. Fixed an issue where the list `lower-threshold-item-count` event would not trigger when using a horizontal layout under a waterfall layout.
+
+  3. Fixed an issue where calling the list `autoScroll` method in `useEffect` might not scroll.
+
+  4. Fixed an issue where the `scrolltolower` event might not be triggered in waterfall, because the lower styles was not updated in `registerEventEnableStatusChangeHandler`.
+
+- Updated dependencies []:
+  - @lynx-js/web-elements-template@0.8.10-canary-20251103115041-fece7d0a92fa76948488373757a27dff52a90437
+
 ## 0.8.9
 
 ### Patch Changes
@@ -634,8 +649,8 @@
   For compating usage, `@lynx-js/web-elements-compat/LinearContainer` is provided.
 
   ```javascript
-  import '@lynx-js/web-elements-compat/LinearContainer';
-  import '@lynx-js/web-elements/all';
+  import "@lynx-js/web-elements-compat/LinearContainer";
+  import "@lynx-js/web-elements/all";
   ```
 
 - f8d1d98: break: rename the `blur` and `focus` event to `lynxblur` and `lynxfocus` for x-input element
@@ -657,11 +672,11 @@
   There is also a simple way to use this feature
 
   ```javascript
-  import { LynxCard } from '@lynx-js/web-core';
-  import { loadElement } from '@lynx-js/web-elements/lazy';
-  import '@lynx-js/web-elements/index.css';
-  import '@lynx-js/web-core/index.css';
-  import './index.css';
+  import { LynxCard } from "@lynx-js/web-core";
+  import { loadElement } from "@lynx-js/web-elements/lazy";
+  import "@lynx-js/web-elements/index.css";
+  import "@lynx-js/web-core/index.css";
+  import "./index.css";
 
   const lynxcard = new LynxCard({
     ...beforeConfigs,

package/dist/XList/ListItem.js

@@ -6,8 +6,12 @@ import { __esDecorate, __runInitializers } from "tslib";
 */
 import { Component } from '@lynx-js/web-elements-reactive';
 import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+import { ListItemAttributes } from './ListItemAttributes.js';
 let ListItem = (() => {
-    let _classDecorators = [Component('list-item', [CommonEventsAndMethods])];
+    let _classDecorators = [Component('list-item', [
+            CommonEventsAndMethods,
+            ListItemAttributes,
+        ])];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;

package/dist/XList/ListItemAttributes.d.ts

@@ -0,0 +1,7 @@
+import { type AttributeReactiveClass } from '@lynx-js/web-elements-reactive';
+import type { ListItem } from './ListItem.js';
+export declare class ListItemAttributes implements InstanceType<AttributeReactiveClass<typeof HTMLElement>> {
+    #private;
+    static observedAttributes: string[];
+    constructor(dom: ListItem);
+}

package/dist/XList/ListItemAttributes.js

@@ -0,0 +1,32 @@
+import { __esDecorate, __runInitializers } from "tslib";
+/*
+// Copyright 2024 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+*/
+import { Component, registerAttributeHandler, bindToStyle, } from '@lynx-js/web-elements-reactive';
+import { CommonEventsAndMethods } from '../common/CommonEventsAndMethods.js';
+let ListItemAttributes = (() => {
+    let _private_handlerEstimatedMainAxisSizePx_decorators;
+    let _private_handlerEstimatedMainAxisSizePx_initializers = [];
+    let _private_handlerEstimatedMainAxisSizePx_extraInitializers = [];
+    return class ListItemAttributes {
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handlerEstimatedMainAxisSizePx_decorators = [registerAttributeHandler('estimated-main-axis-size-px', true)];
+            __esDecorate(null, null, _private_handlerEstimatedMainAxisSizePx_decorators, { kind: "field", name: "#handlerEstimatedMainAxisSizePx", static: false, private: true, access: { has: obj => #handlerEstimatedMainAxisSizePx in obj, get: obj => obj.#handlerEstimatedMainAxisSizePx, set: (obj, value) => { obj.#handlerEstimatedMainAxisSizePx = value; } }, metadata: _metadata }, _private_handlerEstimatedMainAxisSizePx_initializers, _private_handlerEstimatedMainAxisSizePx_extraInitializers);
+            if (_metadata) Object.defineProperty(this, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static observedAttributes = [
+            'estimated-main-axis-size-px',
+        ];
+        #dom;
+        #handlerEstimatedMainAxisSizePx = __runInitializers(this, _private_handlerEstimatedMainAxisSizePx_initializers, bindToStyle(() => this.#dom, '--estimated-main-axis-size-px', (v) => `${parseFloat(v)}px`));
+        constructor(dom) {
+            __runInitializers(this, _private_handlerEstimatedMainAxisSizePx_extraInitializers);
+            this.#dom = dom;
+        }
+    };
+})();
+export { ListItemAttributes };
+//# sourceMappingURL=ListItemAttributes.js.map

package/dist/XList/XList.js

@@ -94,6 +94,8 @@ let XList = (() => {
             }
             if (!this.#autoScrollOptions.lastTimestamp) {
                 this.#autoScrollOptions.lastTimestamp = timestamp;
+                requestAnimationFrame(this.#autoScroll);
+                return;
             }
             const scrollContainer = this.#getListContainer();
             const deltaTime = timestamp - this.#autoScrollOptions.lastTimestamp;
@@ -101,13 +103,26 @@ let XList = (() => {
             scrollContainer.scrollBy({
                 left: tickDistance,
                 top: tickDistance,
-                behavior: 'smooth',
+                // smooth might cause lag when scrolling.
+                behavior: 'auto',
             });
             this.#autoScrollOptions.lastTimestamp = timestamp;
-            if (scrollContainer.scrollTop + scrollContainer.clientHeight
-                >= scrollContainer.scrollHeight && this.#autoScrollOptions.autoStop) {
-                scrollContainer.scrollTop = scrollContainer.scrollHeight
-                    - scrollContainer.clientHeight;
+            const isScrollVertical = (this.getAttribute('scroll-orientation')
+                || 'vertical') === 'vertical';
+            const isContainerScrollable = isScrollVertical
+                ? scrollContainer.scrollTop + scrollContainer.clientHeight
+                    >= scrollContainer.scrollHeight
+                : scrollContainer.scrollLeft + scrollContainer.clientWidth
+                    >= scrollContainer.scrollWidth;
+            if (isContainerScrollable && this.#autoScrollOptions.autoStop) {
+                if (isScrollVertical) {
+                    scrollContainer.scrollTop = scrollContainer.scrollHeight
+                        - scrollContainer.clientHeight;
+                }
+                else {
+                    scrollContainer.scrollLeft = scrollContainer.scrollWidth
+                        - scrollContainer.clientWidth;
+                }
                 this.#autoScrollOptions.isScrolling = false;
             }
             else {
@@ -125,7 +140,20 @@ let XList = (() => {
                     isScrolling: true,
                     autoStop: params.autoStop !== false ? true : false,
                 };
-                requestAnimationFrame(this.#autoScroll);
+                const scrollContainer = this.#getListContainer();
+                const isScrollVertical = (this.getAttribute('scroll-orientation')
+                    || 'vertical') === 'vertical';
+                const isContainerScrollable = isScrollVertical
+                    ? scrollContainer.clientHeight <= scrollContainer.scrollHeight
+                    : scrollContainer.clientWidth <= scrollContainer.scrollWidth;
+                this.#autoScrollOptions.lastTimestamp = 0;
+                if (isContainerScrollable) {
+                    // During the initial render, there might be instances in raq where scrollContainer hasn't fully expanded (rendering hasn't succeeded yet), so use setTimeout.
+                    setTimeout(() => requestAnimationFrame(this.#autoScroll), 0);
+                }
+                else {
+                    requestAnimationFrame(this.#autoScroll);
+                }
             }
             else {
                 this.#autoScrollOptions.isScrolling = false;

package/dist/XList/XListWaterfall.js

@@ -4,17 +4,48 @@ import { __esDecorate, __runInitializers, __setFunctionName } from "tslib";
 // Licensed under the Apache License Version 2.0 that can be found in the
 // LICENSE file in the root directory of this source tree.
 */
-import { genDomGetter, registerAttributeHandler, } from '@lynx-js/web-elements-reactive';
+import { genDomGetter, registerAttributeHandler, registerEventEnableStatusChangeHandler, } from '@lynx-js/web-elements-reactive';
 const WATERFALL_SLOT = 'waterfall-slot';
 const WATERFALL_STYLE = 'waterfall-style';
 let XListWaterfall = (() => {
     let _instanceExtraInitializers = [];
+    let _private_handleXEnableHeaderOffsetEvent_decorators;
+    let _private_handleXEnableHeaderOffsetEvent_descriptor;
     let _private_handlerListType_decorators;
     let _private_handlerListType_descriptor;
     return class XListWaterfall {
         static {
             const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _private_handleXEnableHeaderOffsetEvent_decorators = [registerEventEnableStatusChangeHandler('scrolltolower')];
             _private_handlerListType_decorators = [registerAttributeHandler('list-type', true)];
+            __esDecorate(this, _private_handleXEnableHeaderOffsetEvent_descriptor = { value: __setFunctionName(function (enableScrollToLower) {
+                    enableScrollToLower
+                        ? this.#dom.setAttribute('x-enable-scrolltolower-event', '')
+                        : this.#dom.removeAttribute('x-enable-scrolltolower-event'); // css needs this;
+                    if (enableScrollToLower) {
+                        const lower = this.#getLowerThresholdObserver();
+                        const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
+                            || 'vertical';
+                        const listContent = this.#getListContainer();
+                        // under waterfall, and when the list-item does not have a specified height, obtaining the correct scrollable value takes some time.
+                        setTimeout(() => {
+                            if (scrollOrientation === 'vertical') {
+                                lower.style.setProperty('top', 
+                                // Firefox cannot trigger the bottom IntersectionObserver
+                                `${String(listContent.scrollHeight - 1)}px`, 'important');
+                                // Firefox needs this
+                                lower.style.setProperty('bottom', 'unset', 'important');
+                            }
+                            else {
+                                lower.style.setProperty('left', 
+                                // Firefox cannot trigger the bottom IntersectionObserver
+                                `${String(listContent.scrollWidth - 1)}px`, 'important');
+                                // Firefox needs this
+                                lower.style.setProperty('right', 'unset', 'important');
+                            }
+                        }, 100);
+                    }
+                }, "#handleXEnableHeaderOffsetEvent") }, _private_handleXEnableHeaderOffsetEvent_decorators, { kind: "method", name: "#handleXEnableHeaderOffsetEvent", static: false, private: true, access: { has: obj => #handleXEnableHeaderOffsetEvent in obj, get: obj => obj.#handleXEnableHeaderOffsetEvent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(this, _private_handlerListType_descriptor = { value: __setFunctionName(function (newVal) {
                     if (newVal === 'waterfall') {
                         this.#createWaterfallContainer();
@@ -54,6 +85,7 @@ let XListWaterfall = (() => {
         #getLowerThresholdObserver = genDomGetter(() => this.#dom.shadowRoot, 'div[part="lower-threshold-observer"]');
         #resizeObserver;
         #childrenObserver;
+        get #handleXEnableHeaderOffsetEvent() { return _private_handleXEnableHeaderOffsetEvent_descriptor.value; }
         #createWaterfallContainer = () => {
             const waterfallSlot = document.createElement('slot');
             waterfallSlot.setAttribute('name', `${WATERFALL_SLOT}`);
@@ -122,29 +154,6 @@ let XListWaterfall = (() => {
                 listItem.style.setProperty('top', listItem.getAttribute(`${WATERFALL_STYLE}-top`));
                 listItem.setAttribute('slot', WATERFALL_SLOT);
             }
-            // The reasons why it is not unified in #updateScrollToLowerEventSwitches is:
-            // It is impossible to ensure that list-item is not rendered, so it will cause incorrect listContent.scrollHeight/scrollWidth as height/width.
-            const enableScrollToLower = this.#dom.getAttribute('x-enable-scrolltolower-event');
-            if (enableScrollToLower !== null && enableScrollToLower !== 'false') {
-                const lower = this.#getLowerThresholdObserver();
-                const scrollOrientation = this.#dom.getAttribute('scroll-orientation')
-                    || 'vertical';
-                const listContent = this.#getListContainer();
-                if (scrollOrientation === 'vertical') {
-                    lower.style.setProperty('top', 
-                    // Firefox cannot trigger the bottom IntersectionObserver
-                    `${String(listContent.scrollHeight - 1)}px`, 'important');
-                    // Firefox needs this
-                    lower.style.setProperty('bottom', 'unset', 'important');
-                }
-                else {
-                    lower.style.setProperty('left', 
-                    // Firefox cannot trigger the bottom IntersectionObserver
-                    `${String(listContent.scrollHeight - 1)}px`);
-                    // Firefox needs this
-                    lower.style.setProperty('right', 'unset');
-                }
-            }
         };
         constructor(dom) {
             this.#dom = dom;

package/dist/all.d.ts

@@ -14,3 +14,4 @@ import './XTextarea/index.js';
 import './XView/index.js';
 import './XViewpagerNg/index.js';
 import './XList/index.js';
+import './XList/ListItem.js';

package/dist/all.js

@@ -14,4 +14,5 @@ import './XTextarea/index.js';
 import './XView/index.js';
 import './XViewpagerNg/index.js';
 import './XList/index.js';
+import './XList/ListItem.js';
 //# sourceMappingURL=all.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-js/web-elements-canary",
-  "version": "0.8.9",
+  "version": "0.8.10-canary-20251103-fece7d0a",
   "private": false,
   "repository": {
     "type": "git",
@@ -101,7 +101,7 @@
   ],
   "dependencies": {
     "@lynx-js/web-elements-reactive": "npm:@lynx-js/web-elements-reactive-canary@0.2.2",
-    "@lynx-js/web-elements-template": "npm:@lynx-js/web-elements-template-canary@0.8.9"
+    "@lynx-js/web-elements-template": "npm:@lynx-js/web-elements-template-canary@0.8.10-canary-20251103-fece7d0a"
   },
   "devDependencies": {
     "tslib": "^2.8.1"

package/src/XList/x-list.css

@@ -60,6 +60,8 @@ list-item {
   content-visibility: auto;
   flex: 0 0 auto !important;
   position: static;
+  contain: size;
+  contain-intrinsic-size: auto var(--estimated-main-axis-size-px);
 }
 
 x-list > list-item, x-list > lynx-wrapper > list-item {
@@ -266,5 +268,6 @@ x-list[list-type="waterfall"]::part(lower-threshold-observer) {
 }
 
 x-list[list-type="waterfall"][scroll-orientation="horizontal"]::part(lower-threshold-observer) {
+  bottom: unset;
   right: -999px;
 }