stargazer-ui 1.5.12 → 1.5.13

package/src/NavDropdown/NavDropdown.tsx

@@ -0,0 +1,93 @@
+import React, { forwardRef, useCallback, useMemo, useState } from "react";
+
+import { NavDropdownType } from "./NavDropdown.types";
+
+import Dropdown, { DropdownContextProvider } from "../Dropdown/Dropdown";
+
+const getDropdownMenuPlacement = (alignEnd: boolean, dropDirection: string, isRTL:boolean = false) => {
+    const topStart = isRTL ? 'top-end' : 'top-start';
+    const topEnd = isRTL ? 'top-start' : 'top-end';
+    const bottomStart = isRTL ? 'bottom-end' : 'bottom-start';
+    const bottomEnd = isRTL ? 'bottom-start' : 'bottom-end';
+    const leftStart = isRTL ? 'right-start' : 'left-start';
+    const leftEnd = isRTL ? 'right-end' : 'left-end';
+    const rightStart = isRTL ? 'left-start' : 'right-start';
+    const rightEnd = isRTL ? 'left-end' : 'right-end';
+    let placement = alignEnd ? bottomEnd : bottomStart;
+    if (dropDirection === 'up') 
+        {
+            placement = alignEnd ? topEnd : topStart
+        }
+    else if (dropDirection === 'end') {
+        placement = alignEnd ? rightEnd : rightStart
+    } else if (dropDirection === 'start') {
+        placement = alignEnd ? leftEnd : leftStart
+    } else if (dropDirection === 'down-centered') {
+        placement = 'bottom'
+    } else if (dropDirection === 'up-centered') {
+        placement = 'top'
+    }
+    return placement;
+}
+
+const NavDropdown = forwardRef<HTMLDivElement, NavDropdownType>((
+        {
+            children, className, onSelect, onToggle, controlId, toggleProps, title, menuProps,
+            drop="down", align="start", autoClose=true, show="default", ...restProps
+        }, ref) => {
+    const [showInternal, setShowInternal] = useState<boolean>(show === "default" ? false : show as boolean)
+
+    // this is an object like {index: string} because we need it to rerender even if the case is the same
+    // aka we use a "next/previous" case to navigate through the dropdown menu so need to rerender consecutive "next" cases
+    const [activeDescendant, setActiveDescendant] = useState({case:""})
+
+    const internalOnToggle = useCallback((event: MouseEvent) => {
+        event.stopPropagation()
+        setShowInternal(prev => !prev)
+    }, [])
+
+    const alignEnd = align === "end"
+    const placement = getDropdownMenuPlacement(alignEnd, drop )
+
+    const controlIdcomputed = controlId
+    const contextValue  = useMemo(() => ({
+        align, 
+        drop, 
+        showInternal: show != "default" && onToggle ? show as boolean : showInternal, 
+        handleToggle: show != "default" && onToggle ? onToggle : internalOnToggle, 
+        placement, 
+        directionClasses: {
+            down: "dropdown",
+            'down-centered': `dropdown-center`,
+            up: 'dropup',
+            'up-centered': 'dropup-center dropup',
+            end: 'dropend',
+            start: 'dropstart'
+        },
+        controlId: controlIdcomputed, 
+        activeDescendant, 
+        setActiveDescendant,
+        navDropdown: false
+    }), [align, drop, show, showInternal, onToggle, internalOnToggle, placement, controlId, activeDescendant, setActiveDescendant])
+    
+    return (
+        <div ref={ref} id={controlId+"-wrapper"} className={`sg-dropdown${className? " "+className:""} sg-nav-item`} {...restProps} >
+            <DropdownContextProvider value={contextValue}>
+                <Dropdown.Toggle navDropdown={true} {...toggleProps}>
+                    {title}
+                </Dropdown.Toggle>
+                <Dropdown.Menu {...menuProps}>
+                    {children}
+                </Dropdown.Menu>
+            </DropdownContextProvider>
+        </div>
+    )
+})
+NavDropdown.displayName = "NavDropdown"
+
+export default  Object.assign(NavDropdown, {
+    Toggle: Dropdown.Toggle,
+    Menu: Dropdown.Menu,
+    Item: Dropdown.Item,
+    Divider: Dropdown.Divider
+})

package/src/NavDropdown/NavDropdown.types.ts

@@ -0,0 +1,6 @@
+import { DropdownType } from "../Dropdown/Dropdown.types"
+
+export type NavDropdownType = {
+    toggleProps?: any,
+    menuProps?:any
+} & DropdownType

package/src/NavDropdown/index.ts

@@ -0,0 +1,3 @@
+import NavDropdown from "./NavDropdown"
+export default NavDropdown
+export type { NavDropdownType } from "./NavDropdown.types"

package/src/Overlay/Overlay.tsx

@@ -0,0 +1,309 @@
+import React, { useEffect, useRef, useState, cloneElement, forwardRef, ReactNode, useLayoutEffect, ReactElement } from "react";
+import { createPortal } from "react-dom";
+import { OverlayType, PositionObject } from "./Overlay.types";
+
+import mergeRefs from "../utils/MergeRefs";
+import mergeClassnames from "../utils/MergeClassnames";
+
+
+const setPosition = (referenceElement:any, overlayElement:any, position:string, arrowElement: any, isArrow: boolean=false, boundaryCorrection: PositionObject = {top:0, left:0, bottom: 0, right: 0}) => {
+    if(!overlayElement.current) return {top:0, left:0}
+    const refCurrent = referenceElement.current as HTMLElement 
+    const overlayCurrent = overlayElement.current as HTMLElement 
+    const arrowCurrent = arrowElement.current as HTMLElement 
+
+    const refTop = refCurrent.getBoundingClientRect().top
+    const refHeight = refCurrent.offsetHeight
+    const refLeft = refCurrent.getBoundingClientRect().left
+    const refWidth = refCurrent.offsetWidth
+
+    const overlayHeight = overlayCurrent.getBoundingClientRect().height
+    const overlayWidth = overlayCurrent.getBoundingClientRect().width
+
+    const arrowHeight = arrowCurrent.getBoundingClientRect().height
+    const arrowWidth = arrowCurrent.getBoundingClientRect().width
+    //console.log(refTop, arrowHeight, arrowWidth)
+
+    const overlayBorderWidth = parseFloat(getComputedStyle(overlayCurrent).borderWidth.split("px")[0])
+    const arrowOffsetHeight = isArrow ? arrowHeight/2 : arrowHeight - overlayBorderWidth
+    const arrowOffsetWidth = isArrow ? arrowWidth/2 : arrowWidth - overlayBorderWidth
+
+    const correctPosition = (position:string, offset:number, boundary:number) => {
+        const positionKey = position as keyof typeof tempPos
+        if(overlayCurrent.getBoundingClientRect()[positionKey]<= boundary) {
+            return offset
+        }
+        else {
+            return tempPos[positionKey]
+        }
+    }
+
+    let tempPos: PositionObject
+    switch(position) {
+        case "top": 
+            tempPos = { 
+                top: refTop - overlayHeight - arrowOffsetHeight, 
+                left: refLeft + refWidth/2 - (isArrow ? arrowOffsetWidth/2 : overlayWidth/2) 
+            }
+            //tempPos.right = correctPosition("right", 12, 0)
+            //tempPos.left = correctPosition("left", 0, 0)
+            return tempPos
+        case "right":
+            tempPos = { 
+                top: refTop + refHeight/2 - overlayHeight/2, 
+                left: refLeft + refWidth + arrowOffsetWidth
+            }
+            //tempPos.bottom = correctPosition("bottom", window.scrollY + window.innerHeight, 0)
+            //tempPos.top = correctPosition("top", window.scrollY, 48)
+            return tempPos
+        case "bottom":
+            tempPos = { 
+                top: refTop + refHeight  + arrowOffsetHeight, 
+                left: refLeft + refWidth/2 - overlayWidth/2 
+            }
+            //tempPos.right = correctPosition("right", 12, 0)
+            //tempPos.left = correctPosition("left", 0, 0)
+            return tempPos
+        case "left":
+            tempPos = { 
+                top: refTop + refHeight/2 - overlayHeight/2, 
+                left: refLeft - overlayWidth - arrowOffsetWidth
+            }
+            //tempPos.bottom = correctPosition("bottom", window.scrollY + window.innerHeight, 0)
+            //tempPos.top = correctPosition("top", window.scrollY, 48)
+            return tempPos
+        default:
+            //this is just top
+            return { top: refTop - overlayHeight - arrowHeight, left: refLeft + refWidth/2 - overlayWidth/2 }
+    }
+}
+
+const updateAutoPosition = (autoPositionRef:any, positionRef:any, overlayRef:any, arrowRef:any) => {
+    let topDistance = positionRef.current.getBoundingClientRect().top
+    let bottomDistance = window.innerHeight - positionRef.current.getBoundingClientRect().bottom
+    let leftDistance = positionRef.current.getBoundingClientRect().left
+    let rightDistance = window.innerWidth - positionRef.current.getBoundingClientRect().right
+
+    let totalOverlayWidth = overlayRef.current.clientWidth + arrowRef.current.clientWidth + 48
+    let totalOverlayHeight = overlayRef.current.clientHeight + arrowRef.current.clientHeight + 48
+    //console.log(autoPositionRef.current, positionRef.current, overlayRef.current, arrowRef.current)
+
+    if(topDistance >= totalOverlayHeight) {
+        return "top"
+    } else if(topDistance >= totalOverlayHeight/2) {
+        return rightDistance >= totalOverlayWidth ? "right" : "left"
+    } else if(bottomDistance >= totalOverlayHeight) {
+        return "bottom"
+    } else {
+        return autoPositionRef.current
+    }
+}
+
+const Overlay = forwardRef<HTMLDivElement, OverlayType>( ({
+        children, overlay, tooltip, show=false, onToggle, 
+        position="auto", trigger="click", defaultShow=false,
+        tooltipClassname, tooltipStyle, arrowClassname, arrowStyle}, ref
+    ) => {
+    if(Array.isArray(children)) {
+        throw new Error(
+            "Overlay can only wrap a single element, either introduce a wrapper or remove all but one trigger element!"
+        )
+    }
+    
+    const positionRef = useRef<typeof children | null>(null)
+    const overlayRef = useRef<HTMLDivElement | null>(null)
+    const arrowRef = useRef<HTMLDivElement>(null)
+    const [arrowPosition, setArrowPosition] = useState<PositionObject>({top:0, left:0})
+    const [overlayPosition, setOverlayPosition] = useState<PositionObject>({top:0, left:0})
+    const [internalShow, setInternalShow] = useState(defaultShow)
+    const internalShowRef = useRef(internalShow)
+    const setInternalShowRef = (updatedValue: boolean) => {
+        internalShowRef.current = updatedValue
+        setInternalShow(updatedValue)
+    }
+    if(show && show != internalShow) {
+        console.log("show")
+        setInternalShowRef(show)
+    }
+
+    //const positionsList = ["top", "right", "bottom", "left"]
+    const [autoPosition, setAutoPosition] = useState(position === "auto" ? "top" : position)
+    const autoPositionRef = useRef(autoPosition)
+    const setAutoPositionRef = (updatedValue: any) => {
+        autoPositionRef.current = updatedValue
+        setAutoPosition(updatedValue)
+    }
+
+    const [isHovering, setIsHovering] = useState(false)
+    const [isFocused, setIsFocused] = useState(false)
+    const [firstClick, setFirstClick] = useState(true)
+    const triggerArray = Array.isArray(trigger) ? trigger : [trigger]
+
+    const positionSetter = (positionRef:any , overlayRef: any, arrowRef: any) => {
+        setOverlayPosition( setPosition(positionRef, overlayRef, autoPositionRef.current, arrowRef) )
+        setArrowPosition( setPosition(positionRef, arrowRef, autoPositionRef.current, arrowRef, true) )
+    }
+    const handleScroll = () => {
+        if(internalShowRef.current) {
+            positionSetter(positionRef, overlayRef, arrowRef)
+        }
+        if(internalShowRef.current && position === "auto") {
+            let updatedPosition = updateAutoPosition(autoPositionRef, positionRef, overlayRef, arrowRef)
+            setAutoPositionRef(updatedPosition)
+        }
+    }
+    const resizeHandler = () => {
+        if(internalShowRef.current) {
+            positionSetter(positionRef, overlayRef, arrowRef)
+        }
+        if(!internalShowRef.current && position === "auto") {
+            //setAutoPosition(detectAutoPostition(overlayRef, autoPositionRef))
+        }
+    }
+    const { onClick, onHover, onFocus, onBlur, onMouseOver, onMouseLeave} = (children as ReactElement)!.props
+    //console.log(children)
+    /* Event handler funtions */
+    const handleClick = (event: MouseEvent) => {
+        
+        if(isFocused && firstClick) {
+            //this is needed in case both "focus" and "click" are triggers, otherwise there's weird behaviour
+            setFirstClick(false) 
+            return
+        }
+        setInternalShowRef(!internalShow)
+        if(onToggle) {
+            onToggle(!internalShow)
+        }
+        if(onClick) {
+            onClick(event)
+        }
+    }
+    const handleHover = (event: MouseEvent) => {
+        setInternalShowRef(true)
+        if(!isHovering) {
+            setIsHovering(true)
+            if(onToggle) {
+                onToggle(true)
+            }
+        }
+        if(onHover) {
+            onHover(event)
+        }
+    }
+    const handleFocus = (event: MouseEvent) => {
+        //console.log("focus")
+        setInternalShowRef(true)
+        setIsFocused(true)
+        if(onToggle) {
+            onToggle(true)
+        }
+        if(onFocus) {
+            onFocus(event)
+        }
+    }
+    const handleBlur = (event: MouseEvent) => {
+        //console.log("blur")
+        if(isHovering) {
+            setIsHovering(false)
+        } else if(isFocused) {
+            setIsFocused(false)
+            setFirstClick(true)
+        }
+        setInternalShowRef(false)
+        if(onToggle) {
+            onToggle(false)
+        }
+        if(onBlur) {
+            onBlur(event)
+        }
+    }
+    useLayoutEffect(() => {
+        if(overlayRef.current && arrowRef.current) {
+            positionSetter(positionRef, overlayRef, arrowRef)
+        }
+    }, [])
+
+    useEffect(() => {
+        if(overlayRef.current && arrowRef.current) {
+            positionSetter(positionRef, overlayRef, arrowRef)
+        }
+        //setInternalShowRef(show)
+    },[internalShow, overlayRef, positionRef, autoPosition])
+
+
+    useEffect(() => {
+        window.addEventListener("scroll", handleScroll, true)
+        window.addEventListener("resize", resizeHandler, true)
+        return function cleanup() {
+            window.removeEventListener("scroll", handleScroll, true)
+            window.removeEventListener("resize", resizeHandler, true)
+        }
+    }, [])
+
+    const checkRefPositionStyle = (positionRef: any) => {
+        let elementComputedPositionStyle = getComputedStyle(positionRef.current)["position"]
+        if(elementComputedPositionStyle === "fixed") {
+            return "fixed"
+        } else if(elementComputedPositionStyle === "sticky") {
+            return "sticky"
+        } else {
+            return "absolute"
+        }
+    }
+    const tooltipClassnames = mergeClassnames("sg-overlay-wrapper", "sg-tooltip-wrapper", tooltipClassname)
+    const arrowClassnames = mergeClassnames(
+        "sg-overlay-arrow", 
+        autoPosition ? " overlay-position-"+autoPosition : "",
+        tooltip ? "sg-tooltip-arrow":"",
+        arrowClassname
+    )
+    
+    return (
+        <>
+            {
+                cloneElement(children as any, {
+                    ref: mergeRefs([positionRef, (children as any).ref]),
+                    onClick: triggerArray.find(trigger => trigger === "click") ? handleClick : onClick,
+                    onMouseOver: triggerArray.find(trigger => trigger === "hover") ? handleHover : onMouseOver,
+                    onMouseLeave: triggerArray.find(trigger => trigger === "hover") ? handleBlur : onMouseLeave,
+                    onFocus: triggerArray.find(trigger => trigger === "focus") ? handleFocus : onFocus,
+                    onBlur: triggerArray.find(trigger => trigger === "focus") ? handleBlur : onBlur,
+                })
+            }
+            {internalShow ? createPortal(
+                <>
+                    {overlay ?
+                        <>
+                            <div className="sg-overlay-wrapper"
+                                ref={mergeRefs([ref,overlayRef])}
+                                style={{ position:checkRefPositionStyle(positionRef), top:overlayPosition!.top, left:overlayPosition!.left }}
+                            >{overlay}</div>
+                            <div
+                                ref={arrowRef} aria-hidden
+                                className={arrowClassnames} 
+                                style={{...arrowStyle, position:checkRefPositionStyle(positionRef), top:arrowPosition!.top, left:arrowPosition!.left,}}>
+                            </div>
+                        </>
+                    : null}
+                    {tooltip ? 
+                        <>
+                            <div className={tooltipClassnames}
+                                ref={mergeRefs([ref,overlayRef])}
+                                style={{...tooltipStyle, position:checkRefPositionStyle(positionRef), top:overlayPosition!.top, left:overlayPosition!.left }}
+                            >{tooltip}</div>
+                            <div
+                                ref={arrowRef} aria-hidden
+                                className={arrowClassnames} 
+                                style={{...arrowStyle, position:checkRefPositionStyle(positionRef), top:arrowPosition!.top, left:arrowPosition!.left,}}>
+                            </div>
+                        </>
+                        :
+                    null}
+                </>
+            , document.body) : null}
+        </>
+    )
+})
+Overlay.displayName = "Overlay"
+
+export default Overlay

package/src/Overlay/Overlay.types.ts

@@ -0,0 +1,24 @@
+import { ReactNode, CSSProperties } from "react"
+import { BaseDivType } from "../utils/BaseTypes"
+
+export type OverlayType = {
+    children: ReactNode,
+    overlay?: React.JSX.Element,
+    tooltip?: React.JSX.Element | string,
+    show?: boolean,
+    onToggle?: Function,
+    position?: "auto" | "top" | "bottom" | "right" | "left",
+    trigger?: string | string[],
+    defaultShow?: boolean,
+    tooltipClassname?: string,
+    tooltipStyle?: CSSProperties, 
+    arrowClassname?: string,
+    arrowStyle?: CSSProperties
+} & BaseDivType
+
+export type PositionObject = {
+    top?: number, 
+    bottom?: number, 
+    left?: number, 
+    right?:number
+}

package/{Overlay/index.d.ts → src/Overlay/index.ts}

@@ -1,3 +1,3 @@
-import Overlay from "./Overlay";
-export default Overlay;
-export type { OverlayType, PositionObject } from "./Overlay.types";
+import Overlay from "./Overlay";
+export default Overlay
+export type { OverlayType, PositionObject } from "./Overlay.types"

package/src/Popout/Popout.tsx

@@ -0,0 +1,155 @@
+import { createPortal } from "react-dom";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+
+import mergeRefs from "../utils/MergeRefs";
+
+import { PopoutType, PopoutBodyType, PopoutFooterType, PopoutHeaderType, PopoutTextType, PopoutTitleType } from "./Popout.types";
+/*
+export const useEventListener = (eventType: keyof HTMLElementEventMap, callback: EventListenerOrEventListenerObject, options: boolean | AddEventListenerOptions | undefined, customOptions: {element: HTMLElement}) => {
+    const element = customOptions ? customOptions.element : document.body
+    useEffect(() => {
+        if(element) {
+            element.addEventListener(eventType, callback, options)
+            return function cleanup() {
+                element.removeEventListener(eventType, callback, options)
+            }
+        }
+    }, [callback, element])
+}
+*/
+
+const Popout = forwardRef<HTMLDialogElement, PopoutType>(({children, initialPosition={top:0, left:0}, id, resize=false, move=false, className, style, ...restProps}, ref) => {
+    const [coordinates, setCoordinates] = useState<{ top?: number, bottom?: number, right?: number, left?: number, offSetTop:number, offSetLeft:number }>({offSetTop:0, offSetLeft:0, ...initialPosition})
+    const resizeComputed = resize ? "true":"false"
+    const moveComputed = move ? "true":"false"
+    
+    const passedRef = useRef(ref)
+    const popupRef = useRef<HTMLDialogElement>(null)
+    const [ isMouseDown, setIsMouseDown ] = useState<boolean>(false)
+    const isMouseDownRef = useRef(isMouseDown)
+    useEffect(() => {
+        isMouseDownRef.current = isMouseDown
+    }, [isMouseDown])
+
+    const onMouseDown = (event: React.PointerEvent<HTMLDialogElement>) => {
+        const eventTarget = event.target as HTMLElement
+        if(move && eventTarget.className.includes("sg-popout-title") || eventTarget.className.includes("sg-popout-header")) {
+            const { top, left} = popupRef.current!.getBoundingClientRect();
+            setCoordinates(prev => ({
+                ...prev,
+                offSetTop:event.clientY - top,
+                offSetLeft:event.clientX - left
+            }))
+            popupRef.current!.style.setProperty("user-select", "none")
+            popupRef.current!.setPointerCapture(event.pointerId)//event.pointerId)//"moveable-popup-"+id);
+            setIsMouseDown(true)
+        }
+    }
+    const onMouseUp = () => {
+        if(move) {
+            popupRef.current!.style.removeProperty("user-select")
+            setIsMouseDown(false)
+        }
+    }
+    const onMouseMove = (event: React.PointerEvent<HTMLDialogElement>) => {
+        if( move && isMouseDownRef.current && popupRef.current ) {
+            const isTopOver = event.clientY - coordinates.offSetTop < 0
+            const isBottomOver = window.innerHeight - (event.clientY - coordinates.offSetTop + popupRef.current.offsetHeight) < 0
+            const isLeftOver = event.clientX - coordinates.offSetLeft < 0
+            const isRightOver = window.innerWidth - (event.clientX - coordinates.offSetLeft + popupRef.current.offsetWidth) < 0
+
+            let topCoordinate = isTopOver ? 0 : event.clientY - coordinates.offSetTop
+            topCoordinate = isBottomOver ? window.innerHeight - popupRef.current.offsetHeight : topCoordinate
+
+            let leftCoordinate = isLeftOver ? 0 : event.clientX - coordinates.offSetLeft
+            leftCoordinate = isRightOver ? window.innerWidth - popupRef.current.offsetWidth : leftCoordinate
+
+            //console.log(event.clientX - coordinates.offSetLeft, event.clientY - coordinates.offSetTop)
+            setCoordinates(prev => ({
+                ...prev,
+                top:topCoordinate,
+                left:leftCoordinate
+            }))
+        }
+    }
+
+    useEffect(() => {
+        document.body.addEventListener("pointerup", () => onMouseUp(), true)
+        return function cleanup() {
+            document.body.removeEventListener("pointerup", () => onMouseUp(), true)
+        }
+    }, [])
+    return (
+        createPortal(
+            <dialog data-resize={resizeComputed} data-move={moveComputed} data-passedref={passedRef}
+                ref={mergeRefs([ref,popupRef])} id={id} className={`sg-moveable-popout${className ? " "+className : ""}`}
+                style={{...style, top:coordinates.top, left:coordinates.left, bottom:coordinates.bottom, right:coordinates.right}}
+                onPointerDown={onMouseDown} onPointerMove={(event) => onMouseMove(event)} {...restProps}
+            >
+                {children}
+            </dialog>
+            , document.body
+        )
+    )
+})
+Popout.displayName = "Popout"
+
+const Header = forwardRef<HTMLDivElement | HTMLSpanElement | HTMLHeadingElement, PopoutHeaderType>(
+        ({ children, className, as = "div", ...restProps}, ref) => 
+    {
+    let validAs = ["div", "span", "h1", "h2", "h3", "h4", "h5", "h6"]
+    let Component = validAs.find(valid => valid === as) ? as : "div"
+    return (
+        <Component ref={ref} className={`sg-popout-header ${className}`} {...restProps}>
+            {children}
+        </Component>
+    )
+})
+Header.displayName = "PopoutHeader"
+
+const Title = forwardRef<HTMLHeadingElement, PopoutTitleType>( ({as="h4", className, children, ...restProps}, ref) => {
+    let validAs = ["h1", "h2", "h3", "h4", "h5", "h6"]
+    let Component = validAs.find(valid => valid === as) ? as : "h5"
+    return (
+        <Component ref={ref} className={`sg-popout-title ${className}`} {...restProps}>
+            {children}
+        </Component>
+    )
+})
+Title.displayName = "PopoutTitle"
+
+const Body = forwardRef<HTMLDivElement, PopoutBodyType>( ({children, className, ...restProps}, ref) => {
+    return (
+        <div ref={ref} className={`sg-popout-body ${className}`} {...restProps}>
+            {children}
+        </div>
+    )
+})
+Body.displayName = "PopoutBody"
+
+const Text = forwardRef<HTMLParagraphElement, PopoutTextType>( ({children, className, ...restProps}, ref) => {
+    return (
+        <p ref={ref} className={`sg-popout-text ${className}`} {...restProps}>
+            {children}
+        </p>
+    )
+})
+Text.displayName = "PopoutText"
+
+const Footer = forwardRef<HTMLDivElement, PopoutFooterType>( ({children, className, ...restProps}, ref) => {
+    return (
+        <div ref={ref} className={`sg-popout-footer ${className}`} {...restProps}>
+            {children}
+        </div>
+    )
+})
+Footer.displayName = "PopoutFooter"
+
+export default  Object.assign(Popout, {
+    Header: Header,
+    Title: Title,
+    Body: Body,
+    Text: Text,
+    Footer: Footer
+})
+

package/src/Popout/Popout.types.ts

@@ -0,0 +1,42 @@
+import { ReactNode } from "react"
+import { BaseDialogType, BaseDivType, BaseHeadingType, BaseParagraphType, BaseSpanType } from "../utils/BaseTypes"
+
+export type PopoutType = {
+    children: ReactNode,
+    initialPosition?: {
+        top?: number,
+        bottom?: number,
+        right?: number,
+        left?: number
+    },
+    id?: string,
+    resize?: boolean,
+    move?: boolean,
+} & BaseDialogType
+
+export type PopoutHeaderType = {
+    children: ReactNode,
+    className?: string,
+    as?: React.ElementType
+} & (BaseDivType | BaseHeadingType | BaseSpanType)
+
+export type PopoutTitleType = {
+    children: ReactNode,
+    className?: string,
+    as?: React.ElementType
+} & BaseHeadingType
+
+export type PopoutBodyType = {
+    children: ReactNode,
+    className?: string,
+} & BaseDivType
+
+export type PopoutTextType = {
+    children: ReactNode,
+    className?: string,
+} & BaseParagraphType
+
+export type PopoutFooterType = {
+    children: ReactNode,
+    className?: string,
+} & BaseDivType

package/src/Popout/index.ts

@@ -0,0 +1,3 @@
+import Popout from "./Popout"
+export default Popout
+export type {PopoutBodyType, PopoutFooterType, PopoutHeaderType, PopoutTextType, PopoutTitleType, PopoutType} from "./Popout.types"

package/src/Spinner/Spinner.tsx

@@ -0,0 +1,15 @@
+import React, { forwardRef } from "react";
+
+import { SpinnerType } from "./Spinner.types";
+
+const Spinner = forwardRef<HTMLDivElement, SpinnerType>( ({size="1em", color="white", label, className, controlId, ...restProps}, ref) => {
+    return (
+        <>
+            <div aria-labelledby={controlId} role="status" ref={ref} className={`sg-spinner${className ? " "+className : ""}`} style={{width:size, height:size, borderColor:color}} {...restProps}></div>
+            <label id={controlId} className="sg-visually-hidden">{label}</label>
+        </>
+    )
+})
+Spinner.displayName = "Spinner"
+
+export default Spinner

package/src/Spinner/Spinner.types.ts

@@ -0,0 +1,7 @@
+export type SpinnerType = {
+    label: string,
+    size?: string,
+    color?: string,
+    className?: string,
+    controlId?: string,
+}

package/src/Spinner/index.ts

@@ -0,0 +1,3 @@
+import Spinner from "./Spinner"
+export default Spinner
+export type { SpinnerType } from "./Spinner.types"