added sticky section

Author: shaipetel

src/controls/section.tsx

@@ -1,6 +1,7 @@
 import { makeStyles, mergeClasses, Portal, tokens } from '@fluentui/react-components';
-import { isFunction, isNotEmptyArray, isNotEmptyString } from '@kwiz/common';
-import React from 'react';
+import { getScrollParent, isFunction, isNotEmptyArray, isNotEmptyString, isNullOrUndefined } from '@kwiz/common';
+import React, { useEffect, useState } from 'react';
+import { useElementSize, useRefWithState } from '../helpers';
 import { useKWIZFluentContext } from '../helpers/context-internal';
 import { KnownClassNames, mixins, useCommonStyles } from '../styles/styles';
 
@@ -17,6 +18,14 @@ const useStyles = makeStyles({
         float: "right",
         marginLeft: tokens.spacingHorizontalXXL
     },
+    sticky: {
+        ...mixins.box,
+        position: "sticky",
+        top: 0,
+        overflow: "auto",
+        height: "fit-content",
+        maxHeight: "fit-content"
+    },
     selfCentered: {
         alignSelf: "center"
     }
@@ -32,6 +41,8 @@ export interface ISectionProps {
     title?: string;
     left?: boolean;
     right?: boolean;
+    /** set height to match scroll parent's height, and stick to top */
+    sticky?: boolean;
     /** true - will add css position fixed. portal will also wrap it in a portal. */
     fullscreen?: boolean | "portal";
     centerSelf?: boolean;
@@ -55,11 +66,59 @@ export const Section = React.forwardRef<HTMLDivElement, React.PropsWithChildren<
         css.push(cssNames.right);
         css.push(KnownClassNames.right);
     }
+    else if (props.sticky) {
+        css.push(cssNames.sticky);
+    }
+
+    /** need scrollparent if we are sticky */
+    const [scrollParent, setScrollParent] = useState<HTMLElement>(null);
+    const divRef = useRefWithState<HTMLDivElement>();
+
+    //wait for my content to finish loading, it might change scrollparent
+    const mySize = useElementSize(divRef.ref.current);
+
+    useEffect(() => {
+        //setting the forwardRef 
+        if (!isNullOrUndefined(ref)) {
+            if (isFunction(ref)) ref(divRef.ref.current);
+            else (ref as React.MutableRefObject<HTMLDivElement>).current = divRef.ref.current;
+        }
+    }, [divRef.value]);
+
+    useEffect(() => {
+        if (props.sticky) {
+            let scrollParent = getScrollParent(divRef.ref.current ? divRef.ref.current.parentElement : null);
+            setScrollParent(scrollParent);
+        }
+    }, [divRef.value, mySize.height]);
+
+    const parentSize = useElementSize(scrollParent);
+    useEffect(() => {
+        if (props.sticky && divRef.ref.current) {
+            let maxHeight = "fit-content";
+            if (scrollParent) {
+                let height = parseFloat(getComputedStyle(scrollParent).height);
+                let myStyle = getComputedStyle(divRef.ref.current);
+
+                let pTop = parseFloat(myStyle.paddingTop);
+                let pBottom = parseFloat(myStyle.paddingBottom);
+                let mTop = parseFloat(myStyle.marginTop);
+                let mBottom = parseFloat(myStyle.marginBottom);
+                if (pTop > 0) height -= pTop;
+                if (pBottom > 0) height -= pBottom;
+                if (mTop > 0) height -= mTop;
+                if (mBottom > 0) height -= mBottom;
+
+                maxHeight = `${height}px`;
+            }
+            divRef.ref.current.style.maxHeight = maxHeight;
+        }
+    }, [props.sticky, parentSize.height, divRef.value]);
 
     //a css class might have space and  multiuple classes in it
     if (isNotEmptyArray(props.css)) props.css.filter(c => isNotEmptyString(c)).forEach(c => css.push(...c.split(" ")));
     if (props.fullscreen) css.push(commonStyles.fullscreen);
-    const control = <div ref={ref} {...(props.rootProps || {})} title={props.title} style={props.style}
+    const control = <div ref={divRef.set} {...(props.rootProps || {})} title={props.title} style={props.style}
         className={mergeClasses(...css)}
         onClick={props.onClick}>
         {props.children}

src/helpers/hooks.tsx

@@ -132,11 +132,11 @@ export function useRefWithState<T>(initialValue?: T, stateOptions: stateExOption
         setState(newValue);
     }, useEffectOnlyOnMount);
     return {
-        /** pure ref object */
+        /** ref object for getting latest value in handlers */
         ref: asRef,
-        /** use the value in useEffect dependency */
+        /** for useEffect dependency */
         value: asState,
-        /** set it by ref={e.set} */
+        /** for setting on element: ref={e.set} */
         set: setRef
     };
 }

src/styles/styles.ts

@@ -11,7 +11,7 @@ export module mixins {
             cursor: "pointer"
         }
     }
-    const box: GriffelStyle = {
+    export const box: GriffelStyle = {
         padding: tokens.spacingHorizontalM,
         borderRadius: tokens.borderRadiusMedium,
         boxShadow: tokens.shadow4,