dce-reactkit 3.5.9 → 3.5.11

package/dist/cjs/types/components/AutoscrollToBottomContainer.d.ts

@@ -12,6 +12,8 @@ type Props = {
     itemsName?: string;
     items: AutoScrollItem[];
     jumpToBottomButtonVariant?: Variant;
+    messageBeforeItems?: React.ReactNode;
+    messageAfterItems?: React.ReactNode;
 };
 type AutoScrollItem = {
     id: string | number;

package/dist/esm/index.js

@@ -40811,7 +40811,7 @@ const AutoscrollToBottomContainer = (props) => {
     /*------------------------------------------------------------------------*/
     /* -------------- Props ------------- */
     // Destructure all props
-    const { itemsName, items, jumpToBottomButtonVariant = Variant$1.Danger, } = props;
+    const { itemsName, items, jumpToBottomButtonVariant = Variant$1.Danger, messageBeforeItems, messageAfterItems, } = props;
     /* -------------- State ------------- */
     // Initial state
     const initialState = {
@@ -40825,7 +40825,7 @@ const AutoscrollToBottomContainer = (props) => {
     // Initialize refs
     const lastItemIds = useRef([]);
     const container = useRef(null);
-    const wasScrolledToBottomBeforeItemsUpdate = useRef(true);
+    const wasLastScrolledToBottom = useRef(true);
     /*------------------------------------------------------------------------*/
     /* ------------------------- Component Functions ------------------------ */
     /*------------------------------------------------------------------------*/
@@ -40848,7 +40848,10 @@ const AutoscrollToBottomContainer = (props) => {
         const rootFontSizePx = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10);
         const distanceToBottomRems = Math.abs((scrollTop + clientHeight - scrollHeight) / rootFontSizePx);
         // Figure out if we're scrolled to the bottom
-        return (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
+        const atBottom = (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
+        // Remember if we scrolled to the bottom
+        wasLastScrolledToBottom.current = atBottom;
+        return atBottom;
     };
     /**
      * Scroll the user to the bottom of the container
@@ -40864,7 +40867,10 @@ const AutoscrollToBottomContainer = (props) => {
             type: ActionType.HideJumpToBottomButton,
         });
         // Scroll to bottom
-        container.current.scrollTop = container.current.scrollHeight;
+        container.current.scrollTop = (container.current.scrollHeight
+            - container.current.clientHeight);
+        // Remember that we scrolled to the bottom
+        wasLastScrolledToBottom.current = true;
     };
     /*----------------------------------------*/
     /* -------------- Handlers -------------- */
@@ -40878,8 +40884,9 @@ const AutoscrollToBottomContainer = (props) => {
         if (!container.current) {
             return;
         }
-        // If scrolled to bottom, hide the button
+        // If scrolled to bottom, hide the button and remember position
         if (isScrolledToBottom()) {
+            // Hide button
             dispatch({
                 type: ActionType.HideJumpToBottomButton,
             });
@@ -40904,15 +40911,19 @@ const AutoscrollToBottomContainer = (props) => {
         // Check if new content appeared
         const currentItemIds = getItemIds(items);
         // Check if new content appeared at bottom
-        const newContentAppeared = (currentItemIds.length > 0
-            && (currentItemIds[currentItemIds.length - 1]
-                !== lastItemIds.current[lastItemIds.current.length - 1]));
+        const newContentAppeared = (
+        // There are items
+        currentItemIds.length > 0
+            // The last item is new
+            && !lastItemIds.current.includes(currentItemIds[currentItemIds.length - 1]));
+        // Update last item ids
+        lastItemIds.current = currentItemIds;
         // Do nothing if no new content
         if (!newContentAppeared) {
             return;
         }
         // Check if used to be scrolled to the bottom
-        if (wasScrolledToBottomBeforeItemsUpdate.current) {
+        if (wasLastScrolledToBottom.current) {
             // Was scrolled to the bottom! Autoscroll.
             scrollToBottom();
         }
@@ -40922,12 +40933,6 @@ const AutoscrollToBottomContainer = (props) => {
                 type: ActionType.ShowJumpToBottomButton,
             });
         }
-        // Update last item ids
-        lastItemIds.current = currentItemIds;
-        // Remember if we were scrolled to the bottom before the update
-        return () => {
-            wasScrolledToBottomBeforeItemsUpdate.current = isScrolledToBottom();
-        };
     }, [items]);
     /*------------------------------------------------------------------------*/
     /* ------------------------------- Render ------------------------------- */
@@ -40948,11 +40953,14 @@ const AutoscrollToBottomContainer = (props) => {
     return (React__default.createElement("div", { className: "AutoscrollToBottomContainer-outer-container" },
         React__default.createElement("style", null, style),
         jumpToBottomButton,
-        React__default.createElement("div", { className: "AutoscrollToBottomContainer-scrollable-container", onScroll: handleScroll, ref: container }, items
-            // Render each item with a key
-            .map((item) => {
-            return (React__default.createElement("div", { className: "AutoscrollToBottomContainer-item-container", key: item.id }, item.item));
-        }))));
+        React__default.createElement("div", { className: "AutoscrollToBottomContainer-scrollable-container", onScroll: handleScroll, ref: container },
+            messageBeforeItems,
+            items
+                // Render each item with a key
+                .map((item) => {
+                return (React__default.createElement("div", { className: "AutoscrollToBottomContainer-item-container", key: item.id }, item.item));
+            }),
+            messageAfterItems)));
 };
 
 /**