react-resizable-panels 0.0.43 → 0.0.45

package/dist/react-resizable-panels.module.js

@@ -12,7 +12,6 @@ const { createElement: $ef07efbe5fa7d87e$export$c8a8987d4410bf2d , createContext
 const $ef07efbe5fa7d87e$export$f680877a34711e37 = $jhddX$react["useId".toString()];
 
 
-
 const $3f95d3e171760903$var$canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
 const $3f95d3e171760903$var$useIsomorphicLayoutEffect = $3f95d3e171760903$var$canUseEffectHooks ? (0, $ef07efbe5fa7d87e$export$e5c5a5f917a5871c) : ()=>{};
 var $3f95d3e171760903$export$2e2bcd8739ae039 = $3f95d3e171760903$var$useIsomorphicLayoutEffect;
@@ -30,6 +29,7 @@ function $e504a2438473eda9$export$2e2bcd8739ae039(idFromParams = null) {
 
 
 
+
 const $af466b485b9d515d$export$7d8c6d083caec74a = (0, $ef07efbe5fa7d87e$export$fd42f52fd3ae1109)(null);
 // Workaround for Parcel scope hoisting (which renames objects/functions).
 // Casting to :any is required to avoid corrupting the generated TypeScript types.
@@ -61,37 +61,40 @@ function $c33df6d7c39fd3ee$var$PanelWithForwardedRef({ children: children = null
             defaultSize = minSize;
         }
     }
+    const style = getPanelStyle(panelId, defaultSize);
+    const committedValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        size: $c33df6d7c39fd3ee$var$parseSizeFromStyle(style)
+    });
+    const panelDataRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
+        callbacksRef: callbacksRef,
+        collapsible: collapsible,
+        defaultSize: defaultSize,
+        id: panelId,
+        maxSize: maxSize,
+        minSize: minSize,
+        order: order
+    });
     (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
-        const panel = {
-            callbacksRef: callbacksRef,
-            collapsible: collapsible,
-            defaultSize: defaultSize,
-            id: panelId,
-            maxSize: maxSize,
-            minSize: minSize,
-            order: order
-        };
-        registerPanel(panelId, panel);
+        committedValuesRef.current.size = $c33df6d7c39fd3ee$var$parseSizeFromStyle(style);
+        panelDataRef.current.callbacksRef = callbacksRef;
+        panelDataRef.current.collapsible = collapsible;
+        panelDataRef.current.defaultSize = defaultSize;
+        panelDataRef.current.id = panelId;
+        panelDataRef.current.maxSize = maxSize;
+        panelDataRef.current.minSize = minSize;
+        panelDataRef.current.order = order;
+    });
+    (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
+        registerPanel(panelId, panelDataRef);
         return ()=>{
             unregisterPanel(panelId);
         };
     }, [
-        collapsible,
-        defaultSize,
-        panelId,
-        maxSize,
-        minSize,
         order,
+        panelId,
         registerPanel,
         unregisterPanel
     ]);
-    const style = getPanelStyle(panelId);
-    const committedValuesRef = (0, $ef07efbe5fa7d87e$export$b8f5890fc79d6aca)({
-        size: $c33df6d7c39fd3ee$var$parseSizeFromStyle(style)
-    });
-    (0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
-        committedValuesRef.current.size = $c33df6d7c39fd3ee$var$parseSizeFromStyle(style);
-    });
     (0, $ef07efbe5fa7d87e$export$d5a552a76deda3c2)(forwardedRef, ()=>({
             collapse: ()=>collapsePanel(panelId),
             expand: ()=>expandPanel(panelId),
@@ -166,7 +169,7 @@ function $d6f7e4c3aa9e02d7$export$f50bae335f53943c(event, panels, idBefore, idAf
     // Max-bounds check the panel being expanded first.
     {
         const pivotId = delta < 0 ? idAfter : idBefore;
-        const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+        const index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
         const panel = panelsArray[index];
         const baseSize = baseSizes[index];
         const nextSize = $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, Math.abs(delta), baseSize, event);
@@ -178,14 +181,14 @@ function $d6f7e4c3aa9e02d7$export$f50bae335f53943c(event, panels, idBefore, idAf
         }
     }
     let pivotId = delta < 0 ? idBefore : idAfter;
-    let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    let index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
     while(true){
         const panel = panelsArray[index];
         const baseSize = baseSizes[index];
         const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
         const nextSize = $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, 0 - deltaRemaining, baseSize, event);
         if (baseSize !== nextSize) {
-            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(panel.id, baseSize);
+            if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(panel.current.id, baseSize);
             deltaApplied += baseSize - nextSize;
             nextSizes[index] = nextSize;
             if (deltaApplied.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)), undefined, {
@@ -203,7 +206,7 @@ function $d6f7e4c3aa9e02d7$export$f50bae335f53943c(event, panels, idBefore, idAf
     if (deltaApplied === 0) return baseSizes;
     // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
     pivotId = delta < 0 ? idAfter : idBefore;
-    index = panelsArray.findIndex((panel)=>panel.id === pivotId);
+    index = panelsArray.findIndex((panel)=>panel.current.id === pivotId);
     nextSizes[index] = baseSizes[index] + deltaApplied;
     return nextSizes;
 }
@@ -211,7 +214,7 @@ function $d6f7e4c3aa9e02d7$export$b8e48269e4faa934(panelsArray, prevSizes, nextS
     nextSizes.forEach((nextSize, index)=>{
         const prevSize = prevSizes[index];
         if (prevSize !== nextSize) {
-            const { callbacksRef: callbacksRef , collapsible: collapsible  } = panelsArray[index];
+            const { callbacksRef: callbacksRef , collapsible: collapsible  } = panelsArray[index].current;
             const { onCollapse: onCollapse , onResize: onResize  } = callbacksRef.current;
             if (onResize) onResize(nextSize);
             if (collapsible && onCollapse) {
@@ -228,14 +231,14 @@ function $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b(id, panelsArray) {
         null,
         null
     ];
-    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const index = panelsArray.findIndex((panel)=>panel.current.id === id);
     if (index < 0) return [
         null,
         null
     ];
     const isLastPanel = index === panelsArray.length - 1;
-    const idBefore = isLastPanel ? panelsArray[index - 1].id : id;
-    const idAfter = isLastPanel ? id : panelsArray[index + 1].id;
+    const idBefore = isLastPanel ? panelsArray[index - 1].current.id : id;
+    const idAfter = isLastPanel ? id : panelsArray[index + 1].current.id;
     return [
         idBefore,
         idAfter
@@ -244,7 +247,7 @@ function $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b(id, panelsArray) {
 function $d6f7e4c3aa9e02d7$export$6f43503e166de6fb(panels, id, sizes) {
     if (panels.size === 1) return "100";
     const panelsArray = $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels);
-    const index = panelsArray.findIndex((panel)=>panel.id === id);
+    const index = panelsArray.findIndex((panel)=>panel.current.id === id);
     const size = sizes[index];
     if (size == null) return "0";
     return size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879));
@@ -276,14 +279,14 @@ function $d6f7e4c3aa9e02d7$export$ae14931f0a0256a3(groupId) {
     return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
 }
 function $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
-    var _panelsArray_index, _panelsArray_;
+    var _panelsArray_index, _panelsArray_index_current, _panelsArray_, _panelsArray__current;
     const handle = $d6f7e4c3aa9e02d7$export$2e27d3a347680388(handleId);
     const handles = $d6f7e4c3aa9e02d7$export$ae14931f0a0256a3(groupId);
     const index = handle ? handles.indexOf(handle) : -1;
-    var _panelsArray_index_id;
-    const idBefore = (_panelsArray_index_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : _panelsArray_index.id) !== null && _panelsArray_index_id !== void 0 ? _panelsArray_index_id : null;
-    var _panelsArray__id;
-    const idAfter = (_panelsArray__id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : _panelsArray_.id) !== null && _panelsArray__id !== void 0 ? _panelsArray__id : null;
+    var _panelsArray_index_current_id;
+    const idBefore = (_panelsArray_index_current_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : (_panelsArray_index_current = _panelsArray_index.current) === null || _panelsArray_index_current === void 0 ? void 0 : _panelsArray_index_current.id) !== null && _panelsArray_index_current_id !== void 0 ? _panelsArray_index_current_id : null;
+    var _panelsArray__current_id;
+    const idAfter = (_panelsArray__current_id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : (_panelsArray__current = _panelsArray_.current) === null || _panelsArray__current === void 0 ? void 0 : _panelsArray__current.id) !== null && _panelsArray__current_id !== void 0 ? _panelsArray__current_id : null;
     return [
         idBefore,
         idAfter
@@ -291,8 +294,8 @@ function $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27(groupId, handleId, panelsArra
 }
 function $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels) {
     return Array.from(panels.values()).sort((panelA, panelB)=>{
-        const orderA = panelA.order;
-        const orderB = panelB.order;
+        const orderA = panelA.current.order;
+        const orderB = panelB.current.order;
         if (orderA == null && orderB == null) return 0;
         else if (orderA == null) return -1;
         else if (orderB == null) return 1;
@@ -301,7 +304,7 @@ function $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels) {
 }
 function $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, delta, prevSize, event) {
     const nextSizeUnsafe = prevSize + delta;
-    if (panel.collapsible) {
+    if (panel.current.collapsible) {
         if (prevSize > 0) {
             if (nextSizeUnsafe <= 0) return 0;
         } else {
@@ -311,11 +314,11 @@ function $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, delta, prevSize, event) {
                 // Keyboard events should expand a collapsed panel to the min size,
                 // but mouse events should wait until the panel has reached its min size
                 // to avoid a visual flickering when dragging between collapsed and min size.
-                if (nextSizeUnsafe < panel.minSize) return 0;
+                if (nextSizeUnsafe < panel.current.minSize) return 0;
             }
         }
     }
-    const nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSizeUnsafe));
+    const nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSizeUnsafe));
     return nextSize;
 }
 
@@ -345,12 +348,12 @@ function $4a90471e7083b52f$export$d9fcbe062527d159({ committedValuesRef: committ
             let totalMaxSize = 0;
             // A panel's effective min/max sizes also need to account for other panel's sizes.
             panelsArray.forEach((panelData)=>{
-                if (panelData.id === idBefore) {
-                    maxSize = panelData.maxSize;
-                    minSize = panelData.minSize;
+                if (panelData.current.id === idBefore) {
+                    maxSize = panelData.current.maxSize;
+                    minSize = panelData.current.minSize;
                 } else {
-                    totalMinSize += panelData.minSize;
-                    totalMaxSize += panelData.maxSize;
+                    totalMinSize += panelData.current.minSize;
+                    totalMaxSize += panelData.current.maxSize;
                 }
             });
             const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
@@ -365,13 +368,13 @@ function $4a90471e7083b52f$export$d9fcbe062527d159({ committedValuesRef: committ
                     case "Enter":
                         {
                             event.preventDefault();
-                            const index = panelsArray.findIndex((panel)=>panel.id === idBefore);
+                            const index = panelsArray.findIndex((panel)=>panel.current.id === idBefore);
                             if (index >= 0) {
                                 const panelData = panelsArray[index];
                                 const size = sizes[index];
                                 if (size != null) {
                                     let delta = 0;
-                                    if (size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
+                                    if (size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) <= panelData.current.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
                                     else delta = -(direction === "horizontal" ? width : height);
                                     const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
                                     if (sizes !== nextSizes) setSizes(nextSizes);
@@ -511,11 +514,11 @@ function $8f51c2d77bf1da88$export$354b17c0684607ed(event, groupId, handleId, pan
         // If expanding from collapsed, they should snap back to their minSize.
         const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
         const targetPanelId = movement < 0 ? idBefore : idAfter;
-        const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
+        const targetPanelIndex = panelsArray.findIndex((panel)=>panel.current.id === targetPanelId);
         const targetPanel = panelsArray[targetPanelIndex];
-        if (targetPanel.collapsible) {
+        if (targetPanel.current.collapsible) {
             const baseSize = baseSizes[targetPanelIndex];
-            if (baseSize === 0 || baseSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
+            if (baseSize === 0 || baseSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) === targetPanel.current.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.current.minSize * groupSizeInPixels : targetPanel.current.minSize * groupSizeInPixels;
         }
         return movement;
     } else return $8f51c2d77bf1da88$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
@@ -587,7 +590,7 @@ function $f7d932e9304c1581$export$2e2bcd8739ae039(callback, durationMs = 10) {
 // Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
 function $6889c3a3ed41cfd1$var$getSerializationKey(panels) {
     return panels.map((panel)=>{
-        const { minSize: minSize , order: order  } = panel;
+        const { minSize: minSize , order: order  } = panel.current;
         return order ? `${order}:${minSize}` : `${minSize}`;
     }).sort((a, b)=>a.localeCompare(b)).join(",");
 }
@@ -622,6 +625,14 @@ function $6889c3a3ed41cfd1$export$af183b313c61be4f(autoSaveId, panels, sizes, st
 }
 
 
+function $88f8826b36ffc83f$export$1aa6024f7a345313() {
+    try {
+        return window, false;
+    } catch (error) {}
+    return true;
+}
+
+
 const $3daa5d4c086ea816$var$debounceMap = {};
 function $3daa5d4c086ea816$var$throwServerError() {
     throw new Error('PanelGroup "storage" prop required for server rendering.');
@@ -730,15 +741,15 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
             // e.g. if Panel A has a maxSize of 40 then Panels A and B can't both have an implicit default size of 50.
             // For now, these logic edge cases are left to the user to handle via props.
             panelsArray.forEach((panel)=>{
-                totalMinSize += panel.minSize;
-                if (panel.defaultSize === null) panelsWithNullDefaultSize++;
-                else totalDefaultSize += panel.defaultSize;
+                totalMinSize += panel.current.minSize;
+                if (panel.current.defaultSize === null) panelsWithNullDefaultSize++;
+                else totalDefaultSize += panel.current.defaultSize;
             });
             if (totalDefaultSize > 100) throw new Error(`The sum of the defaultSize of all panels in a group cannot exceed 100.`);
             else if (totalMinSize > 100) throw new Error(`The sum of the minSize of all panels in a group cannot exceed 100.`);
             setSizes(panelsArray.map((panel)=>{
-                if (panel.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
-                return panel.defaultSize;
+                if (panel.current.defaultSize === null) return (100 - totalDefaultSize) / panelsWithNullDefaultSize;
+                return panel.current.defaultSize;
             }));
         }
     }, [
@@ -761,18 +772,21 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         sizes,
         storage
     ]);
-    const getPanelStyle = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id)=>{
+    const getPanelStyle = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id, defaultSize)=>{
         const { panels: panels  } = committedValuesRef.current;
         // Before mounting, Panels will not yet have registered themselves.
         // This includes server rendering.
         // At this point the best we can do is render everything with the same size.
-        if (panels.size === 0) return {
-            flexBasis: "auto",
-            flexGrow: 1,
-            flexShrink: 1,
-            // Without this, Panel sizes may be unintentionally overridden by their content.
-            overflow: "hidden"
-        };
+        if (panels.size === 0) {
+            if ((0, $88f8826b36ffc83f$export$1aa6024f7a345313)() && defaultSize == null) console.warn(`WARNING: Panel defaultSize prop recommended to avoid layout shift after server rendering`);
+            return {
+                flexBasis: 0,
+                flexGrow: defaultSize != null ? defaultSize : undefined,
+                flexShrink: 1,
+                // Without this, Panel sizes may be unintentionally overridden by their content.
+                overflow: "hidden"
+            };
+        }
         const flexGrow = (0, $d6f7e4c3aa9e02d7$export$6f43503e166de6fb)(panels, id, sizes);
         return {
             flexBasis: 0,
@@ -789,11 +803,11 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         disablePointerEventsDuringResize,
         sizes
     ]);
-    const registerPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id, panel)=>{
+    const registerPanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id, panelRef)=>{
         setPanels((prevPanels)=>{
             if (prevPanels.has(id)) return prevPanels;
             const nextPanels = new Map(prevPanels);
-            nextPanels.set(id, panel);
+            nextPanels.set(id, panelRef);
             return nextPanels;
         });
     }, []);
@@ -804,11 +818,13 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
             const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
             const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
             if (idBefore == null || idAfter == null) return;
-            const movement = (0, $8f51c2d77bf1da88$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
+            let movement = (0, $8f51c2d77bf1da88$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
             if (movement === 0) return;
             const groupElement = (0, $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c)(groupId);
             const rect = groupElement.getBoundingClientRect();
             const isHorizontal = direction === "horizontal";
+            // Support RTL layouts
+            if (document.dir === "rtl" && isHorizontal) movement = -movement;
             const size = isHorizontal ? rect.width : rect.height;
             const delta = movement / size * 100;
             const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, initialDragStateRef.current);
@@ -851,7 +867,7 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
     const collapsePanel = (0, $ef07efbe5fa7d87e$export$35808ee640e87ca7)((id)=>{
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
-        if (panel == null || !panel.collapsible) return;
+        if (panel == null || !panel.current.collapsible) return;
         const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
         const index = panelsArray.indexOf(panel);
         if (index < 0) return;
@@ -874,7 +890,7 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         const { panels: panels , sizes: prevSizes  } = committedValuesRef.current;
         const panel = panels.get(id);
         if (panel == null) return;
-        const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.minSize;
+        const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.current.minSize;
         if (!sizeBeforeCollapse) return;
         const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
         const index = panelsArray.indexOf(panel);
@@ -902,8 +918,8 @@ function $3daa5d4c086ea816$var$PanelGroupWithForwardedRef({ autoSaveId: autoSave
         if (index < 0) return;
         const currentSize = prevSizes[index];
         if (currentSize === nextSize) return;
-        if (panel.collapsible && nextSize === 0) ;
-        else nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
+        if (panel.current.collapsible && nextSize === 0) ;
+        else nextSize = Math.min(panel.current.maxSize, Math.max(panel.current.minSize, nextSize));
         const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b)(id, panelsArray);
         if (idBefore == null || idAfter == null) return;
         const isLastPanel = index === panelsArray.length - 1;