dce-reactkit 3.5.7 → 3.5.9

package/dist/esm/index.js

@@ -40724,17 +40724,11 @@ const style = `
 
   .AutoscrollToBottomContainer-scrollable-container {
     /* Take up max 100% height, don't take it up if not needed */
-    /* (so column-reverse layout doesn't start at the bottom) */
     max-height: 100%;
     overflow-y: auto;
 
     /* Allow children to position */
     position: relative;
-
-    /* Reverse order of children so scroll starts at bottom */
-    /* (but children will have to be rendered in reverse order) */
-    display: flex;
-    flex-direction: column-reverse;
   }
 
   .AutoscrollToBottomContainer-jump-to-bottom-container {
@@ -40765,7 +40759,7 @@ const style = `
 /*------------------------------------------------------------------------*/
 // Scrolled to bottom threshold
 // (how close you have to be to the bottom for it to count as the bottom)
-const SCROLLED_TO_BOTTOM_THRESHOLD_REMS = 2;
+const SCROLLED_TO_BOTTOM_THRESHOLD_REMS = 1.5;
 /*------------------------------------------------------------------------*/
 /* -------------------------- Static Functions -------------------------- */
 /*------------------------------------------------------------------------*/
@@ -40784,12 +40778,10 @@ const getItemIds = (items) => {
 // Types of actions
 var ActionType;
 (function (ActionType) {
-    // Identify that the user is now scrolled to the bottom
-    ActionType["NowScrolledToBottom"] = "NowScrolledToBottom";
-    // Identify that the user scrolled away from the bottom
-    ActionType["NowScrolledAwayFromBottom"] = "NowScrolledAwayFromBottom";
-    // Identify that new content appeared at the bottom but is not visible
-    ActionType["NewContentAtBottom"] = "NewContentAtBottom";
+    // Hide the "jump to bottom" button
+    ActionType["HideJumpToBottomButton"] = "HideJumpToBottomButton";
+    // Show the "jump to bottom" button
+    ActionType["ShowJumpToBottomButton"] = "ShowJumpToBottomButton";
 })(ActionType || (ActionType = {}));
 /**
  * Reducer that executes actions
@@ -40799,24 +40791,11 @@ var ActionType;
  */
 const reducer = (state, action) => {
     switch (action.type) {
-        case ActionType.NowScrolledToBottom: {
-            return Object.assign(Object.assign({}, state), { 
-                // Store the event
-                wasScrolledToBottom: true, 
-                // Hide the "jump to bottom" button
-                jumpToBottomButtonVisible: false });
-        }
-        case ActionType.NowScrolledAwayFromBottom: {
-            return Object.assign(Object.assign({}, state), { 
-                // Store the event
-                wasScrolledToBottom: false });
+        case ActionType.HideJumpToBottomButton: {
+            return Object.assign(Object.assign({}, state), { jumpToBottomButtonVisible: false });
         }
-        case ActionType.NewContentAtBottom: {
-            return Object.assign(Object.assign({}, state), { 
-                // Store the event
-                wasScrolledToBottom: false, 
-                // Show the "jump to bottom" button
-                jumpToBottomButtonVisible: true });
+        case ActionType.ShowJumpToBottomButton: {
+            return Object.assign(Object.assign({}, state), { jumpToBottomButtonVisible: true });
         }
         default: {
             return state;
@@ -40836,17 +40815,17 @@ const AutoscrollToBottomContainer = (props) => {
     /* -------------- State ------------- */
     // Initial state
     const initialState = {
-        wasScrolledToBottom: true,
         jumpToBottomButtonVisible: false,
     };
     // Initialize state
     const [state, dispatch] = useReducer(reducer, initialState);
     // Destructure common state
-    const { wasScrolledToBottom, jumpToBottomButtonVisible, } = state;
+    const { jumpToBottomButtonVisible, } = state;
     /* -------------- Refs -------------- */
     // Initialize refs
     const lastItemIds = useRef([]);
     const container = useRef(null);
+    const wasScrolledToBottomBeforeItemsUpdate = useRef(true);
     /*------------------------------------------------------------------------*/
     /* ------------------------- Component Functions ------------------------ */
     /*------------------------------------------------------------------------*/
@@ -40864,10 +40843,10 @@ const AutoscrollToBottomContainer = (props) => {
             return true;
         }
         // Get info about container
-        const { scrollTop, } = container.current;
+        const { scrollTop, scrollHeight, clientHeight, } = container.current;
         // Distance to bottom
         const rootFontSizePx = Number.parseInt(getComputedStyle(document.documentElement).fontSize, 10);
-        const distanceToBottomRems = Math.abs(scrollTop / rootFontSizePx);
+        const distanceToBottomRems = Math.abs((scrollTop + clientHeight - scrollHeight) / rootFontSizePx);
         // Figure out if we're scrolled to the bottom
         return (distanceToBottomRems < SCROLLED_TO_BOTTOM_THRESHOLD_REMS);
     };
@@ -40882,10 +40861,10 @@ const AutoscrollToBottomContainer = (props) => {
         }
         // Update state
         dispatch({
-            type: ActionType.NowScrolledToBottom,
+            type: ActionType.HideJumpToBottomButton,
         });
         // Scroll to bottom
-        container.current.scrollTop = 0;
+        container.current.scrollTop = container.current.scrollHeight;
     };
     /*----------------------------------------*/
     /* -------------- Handlers -------------- */
@@ -40899,17 +40878,10 @@ const AutoscrollToBottomContainer = (props) => {
         if (!container.current) {
             return;
         }
-        // Check if now scrolled to bottom
-        const nowScrolledToBottom = isScrolledToBottom();
-        // Remember if now no longer scrolled to bottom
-        if (nowScrolledToBottom) {
+        // If scrolled to bottom, hide the button
+        if (isScrolledToBottom()) {
             dispatch({
-                type: ActionType.NowScrolledToBottom,
-            });
-        }
-        else {
-            dispatch({
-                type: ActionType.NowScrolledAwayFromBottom,
+                type: ActionType.HideJumpToBottomButton,
             });
         }
     };
@@ -40925,33 +40897,37 @@ const AutoscrollToBottomContainer = (props) => {
         scrollToBottom();
     }, []);
     /**
-     * Update (also called on mount)
+     * Update (also called on mount): autoscroll
      * @author Gabe Abrams
      */
     useEffect(() => {
         // Check if new content appeared
         const currentItemIds = getItemIds(items);
         // Check if new content appeared at bottom
-        const newContentAtBottom = (currentItemIds.length > 0
+        const newContentAppeared = (currentItemIds.length > 0
             && (currentItemIds[currentItemIds.length - 1]
                 !== lastItemIds.current[lastItemIds.current.length - 1]));
         // Do nothing if no new content
-        if (!newContentAtBottom) {
+        if (!newContentAppeared) {
             return;
         }
         // Check if used to be scrolled to the bottom
-        if (wasScrolledToBottom) {
+        if (wasScrolledToBottomBeforeItemsUpdate.current) {
             // Was scrolled to the bottom! Autoscroll.
             scrollToBottom();
         }
         else {
             // Not scrolled to bottom. Show "jump to bottom" button.
             dispatch({
-                type: ActionType.NewContentAtBottom,
+                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 ------------------------------- */
@@ -40972,15 +40948,11 @@ 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
+        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));
-        })
-            // Reverse order because flex column is reverse
-            .reverse())));
+        }))));
 };
 
 /**