@onekeyfe/react-native-native-list 6.7.0-alpha.378 → 6.7.0-alpha.383

package/lib/module/NativeList.js

@@ -8,10 +8,16 @@ import { Platform, View } from 'react-native';
 import { callback, getHostComponent } from 'react-native-nitro-modules';
 import { isSelectableRow } from "./selection.js";
 import { normalizeIndexScroll, normalizeKeyScroll, normalizePositionScroll, resolveLocationIndex, scrollFailure, validateOffset } from "./scrolling.js";
-import { applyRowPatches, containNativeListInput, emptyNativeListSnapshot, serializePatches, validatePatches, validateSnapshot } from "./validation.js";
+import { applyOwnedNativePatches, captureNativeListInput, containNativeListInput, emptyNativeListSnapshot, ownValidatedNativeSnapshot, validateSnapshot } from "./validation.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const NativeListConfig = require('../nitrogen/generated/shared/json/NativeListConfig.json');
 const NativeListHost = getHostComponent('NativeList', () => NativeListConfig);
+const clearedStructuralTransitionSettled = {
+  f: undefined
+};
+const disclosureSlotMeasurementStyle = {
+  alignSelf: 'stretch'
+};
 export function preloadNativeListAvatarImages(sources) {
   return OneKeyImageCache.preload(sources.map(source => ({
     uri: source.uri,
@@ -31,6 +37,10 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
   listHeader,
   listFooter,
   listEmpty,
+  listSidecar,
+  listExpandedContent,
+  listStructureToggle,
+  sidecarLayout,
   topOverlay,
   topScrollEdgeEffect,
   scrollPositionThresholds,
@@ -46,6 +56,7 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
   onReorder,
   onEndReached,
   onVisibleRangeChanged,
+  onStructuralTransitionSettled,
   onScrollPositionThresholdChange,
   onRefresh,
   onScrollToIndexFailed,
@@ -56,21 +67,118 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
   ...viewProps
 }, forwardedRef) {
   const snapshotRef = useRef(emptyNativeListSnapshot());
+  const renderedSnapshotRef = useRef(undefined);
   const initializedSnapshot = useRef(false);
-  const hasContainerSlots = Boolean(listHeader || listEmpty || listFooter);
-  const prepareSnapshot = useCallback(next => {
-    const accepted = validateSnapshot(next);
+  const pendingDisclosureSnapshotRef = useRef(undefined);
+  const previousPropInputRef = useRef(inputSnapshot);
+  const [pendingDisclosureRevision, setPendingDisclosureRevision] = useState(0);
+  const disclosureSlotMounts = useRef({
+    expandedPresent: false,
+    togglePresent: false,
+    expandedEpoch: 0,
+    toggleEpoch: 0
+  });
+  const expandedPresent = listExpandedContent != null;
+  const togglePresent = listStructureToggle != null;
+  if (disclosureSlotMounts.current.expandedPresent !== expandedPresent) {
+    disclosureSlotMounts.current.expandedPresent = expandedPresent;
+    disclosureSlotMounts.current.expandedEpoch += 1;
+  }
+  if (disclosureSlotMounts.current.togglePresent !== togglePresent) {
+    disclosureSlotMounts.current.togglePresent = togglePresent;
+    disclosureSlotMounts.current.toggleEpoch += 1;
+  }
+  const expandedEpoch = disclosureSlotMounts.current.expandedEpoch;
+  const toggleEpoch = disclosureSlotMounts.current.toggleEpoch;
+  const [slotMeasurements, setSlotMeasurements] = useState({
+    heights: [0, 0, 0, 0, 0, 0],
+    readyEpochs: [-1, -1, -1, -1, -1, -1]
+  });
+  const hasSidecar = listSidecar !== undefined;
+  const sidecarWidth = sidecarLayout?.width;
+  const sidecarGap = sidecarLayout?.gap;
+  const sidecarMaxContentWidth = sidecarLayout?.maxContentWidth;
+  const hasContainerSlots = Boolean(listHeader || listEmpty || listFooter || listSidecar || listExpandedContent || listStructureToggle);
+  const validateContainerConfiguration = useCallback(accepted => {
     if (hasContainerSlots && accepted.layout.orientation === 'horizontal') throw new Error('NativeList container slots require vertical orientation');
-    return accepted;
-  }, [hasContainerSlots]);
-  const snapshot = useMemo(() => containNativeListInput(() => prepareSnapshot(inputSnapshot)) ?? snapshotRef.current, [inputSnapshot, prepareSnapshot]);
+    if (hasSidecar !== (sidecarWidth !== undefined)) throw new Error('listSidecar and sidecarLayout must be supplied together');
+    if (sidecarWidth !== undefined) {
+      const width = sidecarWidth;
+      const gap = sidecarGap ?? NaN;
+      const maxContentWidth = sidecarMaxContentWidth ?? NaN;
+      if (accepted.layout.kind !== 'linear' || !Number.isFinite(width) || width <= 0 || !Number.isFinite(gap) || gap < 0 || !Number.isFinite(maxContentWidth) || maxContentWidth <= width + gap) throw new Error('Invalid NativeList sidecar layout');
+    }
+  }, [hasContainerSlots, hasSidecar, sidecarWidth, sidecarGap, sidecarMaxContentWidth]);
+  const prepareSnapshot = useCallback(next => {
+    const accepted = validateSnapshot(captureNativeListInput(next));
+    validateContainerConfiguration(accepted);
+    return ownValidatedNativeSnapshot(accepted);
+  }, [validateContainerConfiguration]);
+  const expandedReadyEpoch = slotMeasurements.readyEpochs[4];
+  const toggleReadyEpoch = slotMeasurements.readyEpochs[5];
+  const snapshot = useMemo(() => {
+    // Imperative pending snapshots use this revision to retry the readiness gate.
+    // eslint-disable-next-line no-void -- Reading this revision invalidates the readiness memo.
+    void pendingDisclosureRevision;
+    const propReplaced = previousPropInputRef.current !== inputSnapshot;
+    previousPropInputRef.current = inputSnapshot;
+    const pending = pendingDisclosureSnapshotRef.current;
+    const retained = pending && !propReplaced && (pending.source === 'imperative' || pending.input === inputSnapshot) && pending.expandedEpoch === expandedEpoch && pending.toggleEpoch === toggleEpoch ? pending : undefined;
+    const candidate = retained?.owned ?? (!propReplaced && initializedSnapshot.current ? renderedSnapshotRef.current ?? snapshotRef.current : containNativeListInput(() => prepareSnapshot(inputSnapshot)) ?? snapshotRef.current);
+    const acceptedCandidate = !propReplaced && initializedSnapshot.current ? containNativeListInput(() => {
+      validateContainerConfiguration(candidate);
+      return candidate;
+    }) : candidate;
+    if (!acceptedCandidate) {
+      pendingDisclosureSnapshotRef.current = undefined;
+      return renderedSnapshotRef.current ?? snapshotRef.current;
+    }
+    const transitionId = acceptedCandidate.structuralTransition?.id;
+    const newDisclosureCommand = initializedSnapshot.current && acceptedCandidate.disclosure !== undefined && transitionId !== undefined && transitionId !== snapshotRef.current.structuralTransition?.id;
+    if (newDisclosureCommand && (expandedPresent && expandedReadyEpoch !== expandedEpoch || togglePresent && toggleReadyEpoch !== toggleEpoch)) {
+      pendingDisclosureSnapshotRef.current = retained ?? {
+        source: 'prop',
+        input: inputSnapshot,
+        owned: acceptedCandidate,
+        expandedEpoch,
+        toggleEpoch
+      };
+      return snapshotRef.current;
+    }
+    pendingDisclosureSnapshotRef.current = undefined;
+    return acceptedCandidate;
+  }, [inputSnapshot, prepareSnapshot, validateContainerConfiguration, expandedPresent, togglePresent, expandedEpoch, toggleEpoch, expandedReadyEpoch, toggleReadyEpoch, pendingDisclosureRevision]);
+  renderedSnapshotRef.current = snapshot;
   const fontFamiliesJson = useNativeListFontFamiliesJson();
-  const [slotHeights, setSlotHeights] = useState([0, 0, 0]);
+  const slotHeights = slotMeasurements.heights;
+  const [viewportWidth, setViewportWidth] = useState(0);
   const [topOverlayHeight, setTopOverlayHeight] = useState(0);
   const hasTopOverlay = Platform?.OS === 'ios' && parseInt(String(Platform.Version), 10) >= 26 && (topScrollEdgeEffect === 'hard' || topScrollEdgeEffect === 'soft') && topOverlay != null;
   const containerSlotHeightsJson = JSON.stringify(slotHeights);
-  const slotInset = snapshot.layout.contentPaddingHorizontal ?? snapshot.layout.contentPadding ?? 0;
-  const slotContents = [listHeader, listEmpty, listFooter];
+  const defaultSlotInset = snapshot.layout.contentPaddingHorizontal ?? snapshot.layout.contentPadding ?? 0;
+  const bandWidth = sidecarLayout ? Math.min(viewportWidth, sidecarLayout.maxContentWidth) : 0;
+  const slotInset = sidecarLayout ? Math.max(0, (viewportWidth - bandWidth) / 2) + defaultSlotInset : defaultSlotInset;
+  const sidecarSpace = sidecarLayout ? sidecarLayout.width + sidecarLayout.gap : 0;
+  const slotContents = [listHeader, listEmpty, listFooter, listSidecar, listExpandedContent, listStructureToggle];
+  const recordSlotLayout = (index, height, epoch) => {
+    if (index === 4 && epoch !== disclosureSlotMounts.current.expandedEpoch || index === 5 && epoch !== disclosureSlotMounts.current.toggleEpoch) {
+      return;
+    }
+    setSlotMeasurements(previous => {
+      if (previous.heights[index] === height && previous.readyEpochs[index] === epoch) {
+        return previous;
+      }
+      const heights = [...previous.heights];
+      const readyEpochs = [...previous.readyEpochs];
+      heights[index] = height;
+      readyEpochs[index] = epoch;
+      return {
+        heights,
+        readyEpochs
+      };
+    });
+  };
+  const sidecarLayoutJson = sidecarLayout ? JSON.stringify(sidecarLayout) : '';
   const normalizedKeyboardShouldPersistTaps = keyboardShouldPersistTaps === true ? 'always' : keyboardShouldPersistTaps === false ? 'never' : keyboardShouldPersistTaps;
   const nativeRef = useRef(null);
   const callbacksRef = useRef({
@@ -80,6 +188,7 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
     onReorder,
     onEndReached,
     onVisibleRangeChanged,
+    onStructuralTransitionSettled,
     onScrollPositionThresholdChange,
     onRefresh,
     onScrollToIndexFailed
@@ -91,6 +200,7 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
     onReorder,
     onEndReached,
     onVisibleRangeChanged,
+    onStructuralTransitionSettled,
     onScrollPositionThresholdChange,
     onRefresh,
     onScrollToIndexFailed
@@ -191,6 +301,20 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
     applySnapshot(nextSnapshot) {
       const accepted = containNativeListInput(() => prepareSnapshot(nextSnapshot));
       if (!accepted) return;
+      const transitionId = accepted.structuralTransition?.id;
+      const waitsForSlots = accepted.disclosure !== undefined && transitionId !== undefined && transitionId !== snapshotRef.current.structuralTransition?.id && (expandedPresent && slotMeasurements.readyEpochs[4] !== expandedEpoch || togglePresent && slotMeasurements.readyEpochs[5] !== toggleEpoch);
+      if (waitsForSlots) {
+        pendingDisclosureSnapshotRef.current = {
+          source: 'imperative',
+          input: nextSnapshot,
+          owned: accepted,
+          expandedEpoch,
+          toggleEpoch
+        };
+        setPendingDisclosureRevision(value => value + 1);
+        return;
+      }
+      pendingDisclosureSnapshotRef.current = undefined;
       const nextSnapshotJson = JSON.stringify(accepted);
       nativeRef.current?.applySnapshot(nextSnapshotJson);
       snapshotRef.current = accepted;
@@ -200,16 +324,17 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
       }
     },
     applyPatches(patches) {
-      const accepted = containNativeListInput(() => {
-        const normalized = validatePatches(patches);
-        return {
-          patches: normalized,
-          snapshot: applyRowPatches(snapshotRef.current, normalized),
-          json: serializePatches(normalized)
-        };
-      });
+      const pending = pendingDisclosureSnapshotRef.current;
+      const accepted = containNativeListInput(() => applyOwnedNativePatches(pending?.owned ?? snapshotRef.current, patches));
       if (!accepted || accepted.patches.length === 0) return;
       const nextSnapshot = accepted.snapshot;
+      if (pending) {
+        pendingDisclosureSnapshotRef.current = {
+          ...pending,
+          owned: nextSnapshot
+        };
+        return;
+      }
       const native = nativeRef.current;
       const dispatch = native ? () => {
         native.applyPatches(accepted.json);
@@ -222,16 +347,22 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
       if (avatarModelRef.current?.applyPatches(accepted.patches, dispatch)) updateAvatarPrefetchRef.current();
     },
     reconcileSelection(selectedKeys) {
-      nativeRef.current?.reconcileSelection(JSON.stringify(selectedKeys));
-      const current = snapshotRef.current;
-      if (current.selection && (current.selection.mode !== 'single' || selectedKeys.length <= 1) && selectedKeys.every(key => current.rows.some(row => row.key === key && isSelectableRow(row)))) {
-        snapshotRef.current = {
+      const capturedKeys = captureNativeListInput(selectedKeys);
+      const pending = pendingDisclosureSnapshotRef.current;
+      if (!pending) nativeRef.current?.reconcileSelection(JSON.stringify(capturedKeys));
+      const current = pending?.owned ?? snapshotRef.current;
+      if (current.selection && (current.selection.mode !== 'single' || capturedKeys.length <= 1) && capturedKeys.every(key => current.rows.some(row => row.key === key && isSelectableRow(row)))) {
+        const next = {
           ...current,
           selection: {
             ...current.selection,
-            selectedKeys
+            selectedKeys: capturedKeys
           }
         };
+        if (pending) pendingDisclosureSnapshotRef.current = {
+          ...pending,
+          owned: next
+        };else snapshotRef.current = next;
       }
     },
     scrollToKey(paramsOrKey, animated, alignment) {
@@ -338,14 +469,23 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
       };
       updateAvatarPrefetchRef.current();
       callbacksRef.current.onVisibleRangeChanged?.(payload);
+    }),
+    onStructuralTransitionSettled: callback(payloadJson => {
+      callbacksRef.current.onStructuralTransitionSettled?.(parsePayload(payloadJson));
     })
   }), []);
   return /*#__PURE__*/_jsxs(NativeListHost, {
     ...viewProps,
+    onLayout: event => {
+      setViewportWidth(event.nativeEvent.layout.width);
+      viewProps.onLayout?.(event);
+    },
     ...nativeCallbacks,
+    onStructuralTransitionSettled: onStructuralTransitionSettled ? nativeCallbacks.onStructuralTransitionSettled : clearedStructuralTransitionSettled,
     fontFamiliesJson: fontFamiliesJson,
     snapshotJson: snapshotJson,
     containerSlotHeightsJson: containerSlotHeightsJson,
+    sidecarLayoutJson: sidecarLayoutJson,
     topScrollEdgeEffect: hasTopOverlay ? topScrollEdgeEffect ?? 'none' : 'none',
     topOverlayHeight: hasTopOverlay ? topOverlayHeight : 0,
     scrollPositionThresholdsJson: scrollPositionThresholdsJson,
@@ -355,15 +495,22 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
       collapsable: false,
       style: {
         position: 'absolute',
-        left: slotInset,
-        right: slotInset,
+        start: index === 3 ? 0 : slotInset,
+        end: index === 3 ? undefined : slotInset + sidecarSpace,
+        width: index === 3 ? sidecarLayout?.width : undefined,
         top: 0
       },
       onLayout: event => {
-        const height = Math.ceil(event.nativeEvent.layout.height);
-        setSlotHeights(previous => previous[index] === height ? previous : previous.map((value, slot) => slot === index ? height : value));
+        if (index < 4) {
+          recordSlotLayout(index, Math.ceil(event.nativeEvent.layout.height), 0);
+        }
       },
-      children: content
+      children: index >= 4 ? /*#__PURE__*/_jsx(View, {
+        collapsable: false,
+        style: disclosureSlotMeasurementStyle,
+        onLayout: event => recordSlotLayout(index, Math.ceil(event.nativeEvent.layout.height), index === 4 ? expandedEpoch : toggleEpoch),
+        children: content
+      }, index === 4 ? `expanded-${expandedEpoch}` : `toggle-${toggleEpoch}`) : content
     }, index)), hasTopOverlay ? /*#__PURE__*/_jsx(View, {
       collapsable: false,
       style: {

package/lib/module/NativeList.web.js

@@ -8,6 +8,9 @@ import { applyRowPatches, containNativeListInput, emptyNativeListSnapshot, valid
 import { NativeListWebEngine } from "./web/NativeListWebEngine.js";
 import { acquireNativeListAvatar, canonicalNativeListAvatarUri } from "./web/NativeListWebAvatarCache.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const collapsedExpandedContentStyle = {
+  display: 'none'
+};
 export function preloadNativeListAvatarImages(sources) {
   if (typeof document === 'undefined') return Promise.resolve(false);
   const uris = [...new Set(sources.map(source => canonicalNativeListAvatarUri(source.uri)).filter(uri => uri !== undefined))];
@@ -26,6 +29,10 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
   listHeader,
   listEmpty,
   listFooter,
+  listExpandedContent,
+  listStructureToggle,
+  listSidecar,
+  sidecarLayout,
   topOverlay: _topOverlay,
   topScrollEdgeEffect: _topScrollEdgeEffect,
   webScrollHost,
@@ -42,6 +49,7 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
   onReorder,
   onEndReached,
   onVisibleRangeChanged,
+  onStructuralTransitionSettled: _onStructuralTransitionSettled,
   onRefresh,
   onScrollToIndexFailed,
   initialScrollIndex,
@@ -56,7 +64,14 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
     if (!Number.isFinite(inputStickyInset) || inputStickyInset < 0) throw new Error('webStickyInset must be finite and non-negative');
     return inputStickyInset;
   }) ?? 0, [inputStickyInset]);
-  const preparedSnapshot = useMemo(() => containNativeListInput(() => validateSnapshot(inputSnapshot)), [inputSnapshot]);
+  // Freshness is limited to this component invocation; later renders revalidate.
+  let freshlyValidatedSnapshot;
+  const preparedSnapshot = useMemo(() => {
+    const prepared = containNativeListInput(() => validateSnapshot(inputSnapshot));
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- The value is intentionally render-local.
+    freshlyValidatedSnapshot = prepared;
+    return prepared;
+  }, [inputSnapshot]);
   const snapshot = preparedSnapshot ?? acceptedSnapshotRef.current;
   const fontFamiliesJson = useNativeListFontFamiliesJson();
   const fontFamiliesJsonRef = useRef(fontFamiliesJson);
@@ -64,29 +79,18 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
   const hasEmptySlot = listEmpty !== undefined;
   const hasEmptySlotRef = useRef(hasEmptySlot);
   hasEmptySlotRef.current = hasEmptySlot;
-  const [slotState, setSlotState] = useState(() => ({
-    hasRows: snapshot.rows.length > 0,
-    emptyBottomPadding: !snapshot.rows.length && hasEmptySlot ? snapshot.layout.contentPaddingBottom ?? snapshot.layout.contentPadding ?? 0 : 0,
-    padding: snapshot.layout.contentPaddingHorizontal ?? snapshot.layout.contentPadding ?? 0
-  }));
-  const synchronizeSlots = next => {
-    const hasRows = next.rows.length > 0;
-    const padding = next.layout.contentPaddingHorizontal ?? next.layout.contentPadding ?? 0;
-    const emptyBottomPadding = !hasRows && hasEmptySlotRef.current ? next.layout.contentPaddingBottom ?? next.layout.contentPadding ?? 0 : 0;
-    setSlotState(previous => previous.hasRows === hasRows && previous.padding === padding && previous.emptyBottomPadding === emptyBottomPadding ? previous : {
-      hasRows,
-      padding,
-      emptyBottomPadding
-    });
-  };
-  const normalizeWebSnapshot = (next, hasReactEmpty = hasEmptySlotRef.current, hasSlotLayout = useSlotLayoutRef.current) => {
+  const [viewportWidth, setViewportWidth] = useState(0);
+  const [sidecarHeight, setSidecarHeight] = useState(0);
+  const normalizeWebSnapshot = (next, hasReactEmpty = hasEmptySlotRef.current, hasSlotLayout = useSlotLayoutRef.current, validatedInThisRender = false) => {
     if (hasSlotLayout && next.layout.orientation === 'horizontal') throw new Error('Web parent scrolling and container slots support vertical lists only');
     const emptySlot = hasReactEmpty && next.rows.length === 0;
-    const validated = validateSnapshot(emptySlot ? {
+    const normalized = emptySlot && next.emptyState !== undefined ? {
       ...next,
       emptyState: undefined
-    } : next);
-    return emptySlot ? {
+    } : next;
+    const validated = validatedInThisRender ? normalized : validateSnapshot(normalized);
+    // Preserve an already normalized fallback's identity across rerenders.
+    return emptySlot && validated.layout.contentPaddingBottom !== 0 ? {
       ...validated,
       layout: {
         ...validated.layout,
@@ -99,12 +103,56 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
   const [ownedScrollHost, setOwnedScrollHost] = useState(null);
   const useSlotLayoutRef = useRef(false);
   useSlotLayoutRef.current ||= webScrollHost !== undefined || listHeader !== undefined || listEmpty !== undefined || listFooter !== undefined;
+  useSlotLayoutRef.current ||= listSidecar !== undefined;
+  useSlotLayoutRef.current ||= listExpandedContent !== undefined || listStructureToggle !== undefined;
   const useSlotLayout = useSlotLayoutRef.current;
   const resolvedScrollHost = webScrollHost === undefined ? useSlotLayout ? ownedScrollHost : undefined : webScrollHost;
   const engineRef = useRef(undefined);
   const webVirtualizationEnabledRef = useRef(webVirtualizationEnabled);
   webVirtualizationEnabledRef.current = webVirtualizationEnabled;
-  const validatedSnapshot = useMemo(() => containNativeListInput(() => normalizeWebSnapshot(snapshot, hasEmptySlot, useSlotLayout)) ?? acceptedSnapshotRef.current, [snapshot, hasEmptySlot, useSlotLayout]);
+  const validatedSnapshot = useMemo(() => containNativeListInput(() => {
+    if (listSidecar !== undefined !== (sidecarLayout !== undefined)) throw new Error('listSidecar and sidecarLayout must be supplied together');
+    if (sidecarLayout) {
+      const {
+        width,
+        gap,
+        maxContentWidth
+      } = sidecarLayout;
+      if (snapshot.layout.kind !== 'linear' || !Number.isFinite(width) || width <= 0 || !Number.isFinite(gap) || gap < 0 || !Number.isFinite(maxContentWidth) || maxContentWidth <= width + gap) throw new Error('Invalid NativeList sidecar layout');
+    }
+    return normalizeWebSnapshot(snapshot, hasEmptySlot, useSlotLayout, preparedSnapshot !== undefined && preparedSnapshot === freshlyValidatedSnapshot);
+  }) ?? acceptedSnapshotRef.current,
+  // eslint-disable-next-line react-hooks/exhaustive-deps -- Preserve the existing memo dependencies; freshness is render-local.
+  [snapshot, hasEmptySlot, useSlotLayout, listSidecar, sidecarLayout]);
+  const [slotState, setSlotState] = useState(() => ({
+    hasRows: validatedSnapshot.rows.length > 0,
+    emptyBottomPadding: !validatedSnapshot.rows.length && hasEmptySlot ? validatedSnapshot.layout.contentPaddingBottom ?? validatedSnapshot.layout.contentPadding ?? 0 : 0,
+    padding: validatedSnapshot.layout.contentPaddingHorizontal ?? validatedSnapshot.layout.contentPadding ?? 0,
+    disclosurePresent: validatedSnapshot.disclosure !== undefined,
+    disclosureExpanded: validatedSnapshot.disclosure?.expanded === true,
+    hasExpandedContent: validatedSnapshot.disclosure?.expanded === true,
+    expandedTrailingInset: validatedSnapshot.disclosure?.expandedTrailingInset ?? 0
+  }));
+  const synchronizeSlots = next => {
+    const hasRows = next.rows.length > 0;
+    const padding = next.layout.contentPaddingHorizontal ?? next.layout.contentPadding ?? 0;
+    const emptyBottomPadding = !hasRows && hasEmptySlotRef.current ? next.layout.contentPaddingBottom ?? next.layout.contentPadding ?? 0 : 0;
+    const disclosurePresent = next.disclosure !== undefined;
+    const disclosureExpanded = next.disclosure?.expanded === true;
+    const expandedTrailingInset = next.disclosure?.expandedTrailingInset ?? 0;
+    setSlotState(previous => {
+      const hasExpandedContent = previous.hasExpandedContent || disclosureExpanded;
+      return previous.hasRows === hasRows && previous.padding === padding && previous.emptyBottomPadding === emptyBottomPadding && previous.disclosurePresent === disclosurePresent && previous.disclosureExpanded === disclosureExpanded && previous.hasExpandedContent === hasExpandedContent && previous.expandedTrailingInset === expandedTrailingInset ? previous : {
+        hasRows,
+        padding,
+        emptyBottomPadding,
+        disclosurePresent,
+        disclosureExpanded,
+        hasExpandedContent,
+        expandedTrailingInset
+      };
+    });
+  };
   const snapshotRef = useRef(validatedSnapshot);
   const snapshotPropRef = useRef(validatedSnapshot);
   // An imperative snapshot survives host mounting until the snapshot prop changes.
@@ -112,7 +160,7 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
     snapshotPropRef.current = validatedSnapshot;
     snapshotRef.current = validatedSnapshot;
     acceptedSnapshotRef.current = validatedSnapshot;
-    synchronizeSlots(snapshot);
+    synchronizeSlots(validatedSnapshot);
   }
   if (!initializedSnapshot.current) {
     acceptedSnapshotRef.current = validatedSnapshot;
@@ -296,8 +344,15 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
     ref: setHostRef
   });
   const padding = slotState.padding;
+  const footerBandStyle = {
+    paddingHorizontal: padding
+  };
+  const trailingInsetStyle = {
+    height: slotState.disclosureExpanded ? slotState.expandedTrailingInset : 0
+  };
+  const hasFooterBand = listFooter !== undefined || listExpandedContent !== undefined || listStructureToggle !== undefined;
   const content = /*#__PURE__*/_jsxs(View, {
-    ref: setBoundsRef,
+    ref: sidecarLayout ? undefined : setBoundsRef,
     style: {
       position: 'relative',
       flexShrink: 0,
@@ -320,15 +375,59 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
         paddingBottom: slotState.emptyBottomPadding
       },
       children: listEmpty
-    }) : null, listFooter !== undefined ? /*#__PURE__*/_jsx(View, {
-      style: {
-        paddingHorizontal: padding
-      },
-      children: listFooter
+    }) : null, hasFooterBand ? /*#__PURE__*/_jsxs(View, {
+      testID: "native-list-footer-slot",
+      style: footerBandStyle,
+      children: [listExpandedContent !== undefined && slotState.hasExpandedContent ? /*#__PURE__*/_jsx(View, {
+        testID: "native-list-expanded-content-slot",
+        "aria-hidden": !slotState.disclosureExpanded,
+        pointerEvents: slotState.disclosureExpanded ? 'auto' : 'none',
+        style: slotState.disclosureExpanded ? undefined : collapsedExpandedContentStyle,
+        children: listExpandedContent
+      }) : null, listStructureToggle !== undefined ? /*#__PURE__*/_jsx(View, {
+        testID: "native-list-structure-toggle-slot",
+        "aria-hidden": !slotState.disclosurePresent,
+        pointerEvents: slotState.disclosurePresent ? 'auto' : 'none',
+        style: slotState.disclosurePresent ? undefined : collapsedExpandedContentStyle,
+        children: listStructureToggle
+      }) : null, slotState.expandedTrailingInset > 0 && (listExpandedContent !== undefined || listStructureToggle !== undefined) ? /*#__PURE__*/_jsx(View, {
+        testID: "native-list-trailing-inset-slot",
+        style: trailingInsetStyle
+      }) : null, listFooter]
     }) : null]
   });
+  const bandWidth = sidecarLayout ? Math.min(viewportWidth, sidecarLayout.maxContentWidth) : 0;
+  const sidecarMargin = Math.max(0, (viewportWidth - bandWidth) / 2);
+  const leftWidth = Math.max(0, bandWidth - (sidecarLayout?.width ?? 0) - (sidecarLayout?.gap ?? 0));
+  const scrollContent = sidecarLayout ? /*#__PURE__*/_jsxs(View, {
+    ref: setBoundsRef,
+    style: {
+      position: 'relative',
+      minHeight: sidecarHeight
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        marginStart: sidecarMargin,
+        width: leftWidth
+      },
+      children: content
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: 'absolute',
+        end: sidecarMargin,
+        top: 0,
+        width: sidecarLayout.width
+      },
+      onLayout: event => setSidecarHeight(event.nativeEvent.layout.height),
+      children: listSidecar
+    })]
+  }) : content;
   return /*#__PURE__*/_jsx(View, {
     ...viewProps,
+    onLayout: event => {
+      setViewportWidth(event.nativeEvent.layout.width);
+      viewProps.onLayout?.(event);
+    },
     style: [viewProps.style, {
       position: 'relative',
       minHeight: 0
@@ -340,8 +439,8 @@ export const NativeList = /*#__PURE__*/forwardRef(function NativeList({
         inset: 0,
         overflow: 'scroll'
       },
-      children: content
-    }) : content
+      children: scrollContent
+    }) : scrollContent
   });
 });
 //# sourceMappingURL=NativeList.web.js.map

package/lib/module/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 export { NativeList, preloadNativeListAvatarImages } from './NativeList';
-export { applyRowPatches, serializePatches, serializeSnapshot, validatePatches, validateSnapshot } from "./validation.js";
+export { applyRowPatches, planNativeListPatches, serializePatches, serializeSnapshot, validatePatches, validateSnapshot } from "./validation.js";
 export { checkboxStateForKeys, checkboxStateForSection, isSelectableRow, reduceSelection, selectionStateFromSnapshot } from "./selection.js";
 export { configureNativeListFonts } from "./fonts.js";
 export { ScrollEdgeEffect } from "./ScrollEdgeEffect.js";

package/lib/module/models.js

@@ -24,6 +24,7 @@ export const ROW_BOX_STYLE_KEYS_BY_TYPE = {
   metricCard: ['horizontalPadding', 'verticalPadding', 'leadingGap', 'lineGap', 'image'],
   sectionHeader: ['horizontalPadding', 'verticalPadding', 'lineGap', 'trailingGap'],
   action: ['horizontalPadding', 'verticalPadding', 'leadingGap', 'trailingGap', 'image'],
+  buttonGroup: [],
   system: ['horizontalPadding', 'verticalPadding', 'lineGap']
 };
 

package/lib/module/selection.js

@@ -4,7 +4,7 @@ export function isSelectableRow(row) {
   return !row.disabled && (row.type === 'identity' || row.type === 'rail' || row.type === 'activity' || row.type === 'message' || row.type === 'dataRow' || row.type === 'mediaTile' || row.type === 'metricCard');
 }
 export function isRowPressEnabled(row) {
-  return !row.disabled && !row.pressDisabled && (row.type !== 'system' || row.variant === 'retry');
+  return !row.disabled && !row.pressDisabled && row.type !== 'buttonGroup' && (row.type !== 'system' || row.variant === 'retry');
 }
 function deltaBetween(before, after, source, sourceKey) {
   return {