stargazer-ui 1.5.13 → 1.5.14

package/src/NavDropdown/NavDropdown.tsx

@@ -1,93 +0,0 @@
-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

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

package/src/NavDropdown/index.ts

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

package/src/Overlay/Overlay.tsx

@@ -1,309 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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/src/Popout/Popout.tsx

@@ -1,155 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

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

package/src/Spinner/Spinner.tsx

@@ -1,15 +0,0 @@
-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

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

package/src/Spinner/index.ts

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