stargazer-ui 1.5.13 → 1.5.14

package/src/Table/Table.tsx

@@ -1,16 +0,0 @@
-import React, { forwardRef } from "react";
-
-import { TableType } from "./Table.types";
-
-
-const Table = forwardRef<HTMLTableElement, TableType>( ({children, size="lg", className, ...restProps}, ref) => {
-    let classesComputed = `sg-table${className ? " "+className:""}${size === "sm" ? " "+"sg-table-sm":""}`
-    return (
-        <table ref={ref} className={classesComputed} {...restProps}>
-            {children}
-        </table>
-    )
-})
-Table.displayName = "Table"
-
-export default Table

package/src/Table/Table.types.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from "react";
-
-import { BaseTableType } from "../utils/BaseTypes";
-
-export type TableType = {
-    children: ReactNode,
-    size?: string,
-    className?: string,
-} & BaseTableType

package/src/Table/index.ts

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

package/src/Tabs/Tabs.tsx

@@ -1,233 +0,0 @@
-import React, { createContext, forwardRef, useContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
-
-import { TabsButtonType, TabsContentType, TabsContextType, TabsControlsType, TabsPageType, TabsType, TabsScrollButtonType } from "./Tabs.types"
-
-import mergeClassnames from "../utils/MergeClassnames"
-import mergeRefs from "../utils/MergeRefs"
-import { useScreenSize, useQueryParams } from "../hooks"
-
-const TabsContext = createContext<TabsContextType | null>(null)
-const TabsContextProvider = ({children, value}:{children: React.ReactNode, value: TabsContextType}) => {
-    return (
-        <TabsContext.Provider value={value}>
-            {children}
-        </TabsContext.Provider>
-    )
-}
-const useTabsContext = () => {
-    const context = useContext(TabsContext)
-    if(!context) {
-        throw new Error(
-            "useTabContext has to be used within a TabContextProvider!"
-        )
-    }
-    return context
-}
-
-const Tabs = forwardRef<HTMLDivElement, TabsType>(({children, className, controlId, activeClassName, defaultActive, active, onTabChange, queryParam, setQueryParam, ...restProps}, ref) => {
-    const tabIdsMap = new Map()
-    Array.from(document.querySelectorAll<HTMLElement>('[data-tabd]')).forEach(el => tabIdsMap.set(el.dataset.tabid,1) )
-
-    const isTabId: boolean = tabIdsMap.get(queryParam) && queryParam
-    const [activeTab, setActiveTab] = useState<string>(isTabId ? queryParam! : defaultActive)
-    
-    
-    const activeClass= activeClassName ?? "sg-active"
-    if(active && activeTab != active) {
-        setActiveTab(active)
-    }
-
-    if(active && !onTabChange || !active && onTabChange) {
-        throw new Error(
-            "If you control the tabs externally, you need both an 'active' state and a function 'onTabChange' that controls the 'active' state!"
-        )
-    }
-    if(queryParam && !setQueryParam || !queryParam && setQueryParam) {
-        throw new Error(
-            "If you control the query parameters externally, you need both an 'queryParam' state and a function 'setQueryParam' that controls the 'queryParam' state!"
-        )
-    }
-
-    
-    const contextValue = useMemo(() => ({
-        activeTab,
-        setActiveTab,
-        controlId,
-        activeClass,
-        onTabChange,
-        setQueryParam
-    }), [activeTab, activeClass, controlId, activeClass, onTabChange])
-    return (
-        <TabsContextProvider value={contextValue}>
-            <div ref={ref} id={controlId+"-tab-wrapper"} className={`sg-tabs${className ? " "+className: ""}`} {...restProps}>
-                {children}
-            </div>
-        </TabsContextProvider>
-    )
-})
-Tabs.displayName = "Tabs"
-
-const ScrollButton = forwardRef<HTMLButtonElement, TabsScrollButtonType>( ({className, left = true, controlsRef, style, ...restProps}, ref) => {
-    const internalRef = useRef<HTMLButtonElement>(null)
-
-    const handleScrollBy = () => {
-        if(!controlsRef || !controlsRef.current) return
-
-        const tabControls = controlsRef.current
-        const toScroll = (left ? -1 : 1) * 32
-        tabControls.scrollBy(toScroll, 0)
-    }
- 
-    let scrollIntervalId: NodeJS.Timeout
-    const handlePointerDown = (event: React.MouseEvent<HTMLButtonElement>) => {
-        clearInterval(scrollIntervalId)
-        scrollIntervalId = setInterval(handleScrollBy, 20)
-    }
-    const handlePointerUp = (event: React.MouseEvent<HTMLButtonElement>) => {
-        clearInterval(scrollIntervalId)
-    }
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement> ) => {
-        if(event.key === "Space" || event.key === "Enter") {
-            clearInterval(scrollIntervalId)
-            scrollIntervalId = setInterval(handleScrollBy, 20)
-            return
-        }
-        clearInterval(scrollIntervalId)
-    }
-    const handleKeyUp = (event: React.KeyboardEvent<HTMLButtonElement> ) => {
-        clearInterval(scrollIntervalId)
-    }
-
-
-    
-    return (
-        <button 
-            type="button" ref={mergeRefs([ref, internalRef])} data-position={left ? "left":"right"} 
-            onPointerDown={handlePointerDown} onPointerUp={handlePointerUp} onKeyDown={handleKeyDown} onKeyUp={handleKeyUp}
-            className={mergeClassnames("sg-tabs-button", "sg-tabs-scroll-button", className)}
-            {...restProps} >
-            <span className="visually-hidden">Scroll tab controls {left ? "left":"right"}</span>
-            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
-                <polyline 
-                    points={left ? "144 88 104 128 144 168" : "112 88 152 128 112 168" } //168 64 104 128 168 192
-                    fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="32"
-                />
-            </svg>
-        </button>
-    )
-})
-
-const Controls = forwardRef<HTMLDivElement, TabsControlsType>( ({children, className, ...restProps}, ref) => {
-    const { controlId, activeClass } = useTabsContext()
-    const [ isOverflow, setIsOverflow ] = useState(false)
-    const internalRef = useRef<HTMLDivElement>(null)
-
-    const checkWidthOverflow = () => {
-        if(!internalRef.current) return
-
-        const el = internalRef.current
-        setIsOverflow(el.clientWidth < el.scrollWidth)
-    }
-    useLayoutEffect(() => {
-        //console.log(internalRef.current)
-        checkWidthOverflow()
-    }, [children])
-    useEffect(() => {
-        window.addEventListener("resize", checkWidthOverflow, true)
-        return function cleanup() {
-            window.removeEventListener("resize", checkWidthOverflow, true)
-        }
-    }, [])
-    
-    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-        const key = event.key
-        const tabsControls = internalRef.current
-        if(!tabsControls) return
-        
-        const tabControlsChildren = Array.from(tabsControls.children) as HTMLElement[]
-        let newIndex
-        if(key === "ArrowRight" || key === "ArrowLeft") {
-            event.preventDefault()
-            const activeTab = document.querySelector(".sg-tabs-button"+"."+activeClass) as HTMLElement
-            const activeTabIndex = tabControlsChildren.indexOf(activeTab)
-            const indexChange = key === "ArrowRight" ? 1 : -1
-            const isChangeTooBig = activeTabIndex + indexChange >= tabControlsChildren.length
-            const isChangeNegative = activeTabIndex + indexChange < 0
-            newIndex = isChangeNegative ? tabControlsChildren.length - 1 : (isChangeTooBig ? 0 : activeTabIndex + indexChange)
-        } else if (key === "Home" || key === "End") {
-            event.preventDefault()
-            newIndex = key === "Home" ? 0 : tabControlsChildren.length -1
-        }
-        if(newIndex === undefined || newIndex === null) return
-        tabControlsChildren[newIndex].focus()
-        tabControlsChildren[newIndex].click()
-    }
-//div style={{maxWidth:"100%", display:"flex", overflowX:"auto"}}
-    return (
-        <div tabIndex={-1} onKeyDown={(event) => handleKeyDown(event)} role="tablist" id={controlId+"-tab-controls"} ref={mergeRefs([ref, internalRef])} className={`sg-tabs-controls${className ? " "+className:""}`} {...restProps}>
-            {isOverflow ? <ScrollButton controlsRef={internalRef} /> : null }
-            {children}
-            {isOverflow ? <ScrollButton controlsRef={internalRef} left={false}/> : null }
-        </div>
-    )
-})
-Controls.displayName = "TabsControl"
-
-const Button = forwardRef<HTMLButtonElement, TabsButtonType>( ({children, className, onClick, tabId, id,...restProps}, ref) => {
-    const { activeTab, setActiveTab, setQueryParam, activeClass, onTabChange } = useTabsContext()
-    const isActiveTab = activeTab === tabId
-    const classNameComputed = "sg-tabs-button" + (className ? " "+className:"") + (isActiveTab ? " "+activeClass : "")
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        if(onTabChange) {
-            onTabChange(tabId)
-        }
-        else {
-            setActiveTab(tabId)
-        }
-        if(onClick) {
-            onClick(event)
-        }
-        if(setQueryParam) {
-            setQueryParam(tabId)
-        }
-    }
-    return (
-        <button 
-            role="tab" type="button" id={tabId+"-button"} ref={ref} onClick={event => handleClick(event)} className={classNameComputed} {...restProps}
-            tabIndex={isActiveTab ? 0:-1} aria-selected={isActiveTab ? "true":"false"} aria-controls={tabId+"-page"}
-        >
-            {children}
-        </button>
-    )
-})
-Button.displayName = "TabsButton"
-
-const Content = forwardRef<HTMLDivElement, TabsContentType>( ({children, className, ...restProps}, ref) => {
-    return (
-        <div role="none" ref={ref} className={`sg-tabs-content${className ? " "+className:""}`} {...restProps}>
-            {children}
-        </div>
-    )
-})
-Content.displayName = "TabsContent"
-
-const Page = forwardRef<HTMLDivElement, TabsPageType>( ({children, className, tabId, ...restProps}, ref) => {
-    const { activeTab, activeClass } = useTabsContext()
-    const classNameComputed = "sg-tabs-page" + (className ? " "+className:"") + (activeTab === tabId ? " "+activeClass : "")
-    return (
-        <div 
-            role="tabpanel" id={tabId+"-page"} data-tabid={tabId} aria-labelledby={tabId+"-button"}
-            ref={ref} className={classNameComputed} {...restProps}
-        >
-            {children}
-        </div>
-    )
-})
-Page.displayName = "TabsPage"
-
-export default  Object.assign(Tabs, {
-    Controls: Controls,
-    Button: Button,
-    Content: Content,
-    Page: Page,
-})

package/src/Tabs/Tabs.types.ts

@@ -1,52 +0,0 @@
-import { BaseButtonType, BaseDivType } from "../utils/BaseTypes"
-
-export type TabsContextType = {
-    activeTab: string,
-    setActiveTab: React.Dispatch<React.SetStateAction<string>>,
-    controlId: string,
-    activeClass: string,
-    onTabChange: Function | undefined,
-    setQueryParam?: Function
-}
-
-export type TabsType = {
-    children: React.ReactNode,
-    className?: string,
-    controlId: string,
-    activeClassName?: string,
-    defaultActive: string,
-    active?: string,
-    onTabChange?: Function,
-    queryParam?: string, 
-    setQueryParam?: Function
-} & BaseDivType
-
-export type TabsControlsType = {
-    children: React.ReactNode,
-    className?: string,
-} & BaseDivType
-
-export type TabsScrollButtonType = {
-    className?: string,
-    left?: boolean,
-    controlsRef?: React.RefObject<HTMLDivElement>
-} & BaseButtonType
-
-export type TabsButtonType = {
-    children: React.ReactNode,
-    className?: string,
-    onClick?: Function,
-    tabId: string,
-    id?: string,
-} & BaseButtonType
-
-export type TabsContentType = {
-    children: React.ReactNode,
-    className?: string,
-} & BaseDivType
-
-export type TabsPageType = {
-    children: React.ReactNode,
-    className?: string,
-    tabId: string,
-} & BaseDivType

package/src/Tabs/index.ts

@@ -1,3 +0,0 @@
-import Tabs from "./Tabs"
-export default Tabs
-export type {TabsButtonType, TabsContentType, TabsContextType, TabsControlsType, TabsPageType, TabsType} from "./Tabs.types"

package/src/ToggleButton/ToggleButton.tsx

@@ -1,21 +0,0 @@
-import React, { useState, forwardRef } from "react"
-
-import { ToggleButtonType } from "./ToggleButton.types"
-
-const ToggleButton = forwardRef<HTMLButtonElement, ToggleButtonType>( ({children, toggled="false", onClick, ...restProps}, ref) => {
-    const [ toggledInternal, setToggledInternal ] = useState<boolean>(toggled === "true" ? true : false)
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-        setToggledInternal(prev => !prev)
-        if(onClick) {
-            onClick(event)
-        }
-    }
-    return (
-        <button onClick={(event) => handleClick(event)} data-toggled={toggledInternal} {...restProps}>
-            {children}
-        </button>
-    )
-})
-ToggleButton.displayName = "ToggleButton"
-
-export default ToggleButton

package/src/ToggleButton/ToggleButton.types.ts

@@ -1,8 +0,0 @@
-import { ReactNode } from "react"
-import { BaseButtonType } from "../utils/BaseTypes"
-
-export type ToggleButtonType = {
-    children: ReactNode,
-    toggled?: boolean,
-    onClick?: <T>(event: T) => T
-} & BaseButtonType

package/src/ToggleButton/index.ts

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

package/src/assets/tooltip-pointer.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 10 20"> 
-    <polygon points="1,1 1,19, 9,10" fill="#{$sg-arrow-fill}" stroke-width="2" stroke="#{$sg-arrow-fill}" />   
-    <polyline points="1,1 9,10 1,19" fill="none" stroke="#{$sg-arrow-border}" /> </svg>

package/src/assets/warning.svg

@@ -1,39 +0,0 @@
-<svg viewBox="0 0 256 256" width="256" height="256" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
-    <rect x="0" y="0" width="100%" height="100%" fill="transparent" />
-    <line  
-        x1="128" x2="128" y1="100" y2="165"
-        stroke="transparent" fill="transparent" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
-    />
-    <circle cx="128" cy="200" r="10" fill="transparent"/>
-    <path 
-        d="
-            M32 240 
-            L224 240 
-            C244 240, 240 224, 240 224 
-            L138 20 
-            C133 10, 123 10, 118 20 
-            L16 224 
-            C16 224, 12 240, 32 240 
-            Z
-        " 
-        fill="transparent" stroke="transparent" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-    
-    <line  
-        x1="128" x2="128" y1="83" y2="148"
-        stroke="white" fill="transparent" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"
-    />
-    <circle cx="128" cy="183" r="10" fill="white"/>
-    <path
-        d="
-            M40 223 
-            L216 223 
-            C216 223, 232 191, 232 191
-            L153 33 
-            C153 33, 103 33, 103 33 
-            L24 191 
-            C24 191, 40 223, 40 223
-            Z
-        " 
-        fill="transparent" stroke="white" stroke-width="20" stroke-linecap="round" stroke-linejoin="round"/>
-
-</svg>

package/src/hooks/useClassname.ts

@@ -1,5 +0,0 @@
-const useClassname = (...args: (string | undefined)[]) => {
-    return args.filter(arg => arg != undefined).join(" ")
-}
-
-export default useClassname

package/src/hooks/useDraggable.ts

@@ -1,186 +0,0 @@
-import { useRef, useState, useEffect, RefObject, useLayoutEffect, cloneElement, ReactNode } from "react"
-import { createPortal } from "react-dom"
-
-type Coordinates = {
-    top?: number, 
-    bottom?: number, 
-    right?: number, 
-    left?: number, 
-    offSetTop:number, 
-    offSetLeft:number,
-    width?: number | null
-}
-type Dimensions = {
-    height?: number,
-    width?: number
-}
-type Options = {
-    moveClass?: string,
-    draggable?: boolean
-}
-
-export const insertPhantomElement = (targetElement: HTMLElement, movingElement: HTMLElement, options: {after?:boolean, first?:boolean} = {after: true, first: true}) => {
-    const nextSibling = targetElement.nextElementSibling as HTMLElement
-    const previousSibling = targetElement.previousElementSibling as HTMLElement
-    const phantomData = document.querySelectorAll<HTMLElement>("[data-phantom='before'], [data-phantom='after']")
-    phantomData.forEach(element => {
-        if( targetElement !== element) {
-            element.dataset.phantom = "none"
-            //console.log("equal")
-        }
-    })
-    targetElement.dataset.phantom = options.after ? "after":"before"
-    if(options.after && nextSibling) { nextSibling.dataset.phantom = "before" }
-    if(!options.after && previousSibling) { previousSibling.dataset.phantom = "after" }
-
-    const { width, height } = movingElement.getBoundingClientRect()
-    const parentElement = targetElement.parentElement!
-
-    document.querySelectorAll(".phantom").forEach(phantom => phantom.remove())
-
-    const phantomDiv = document.createElement("li")
-    phantomDiv.classList.add("phantom")
-    phantomDiv.classList.add("sg-sublist")
-    phantomDiv.style.width = options.first ? width.toString()+"px" : ""
-    phantomDiv.style.height = height.toString()+"px"
-    parentElement.insertBefore(phantomDiv, options.after ? targetElement.nextSibling : targetElement)
-}
-
-const insertDraggedElement = () => {
-
-}
-
-/*
-const useDraggable = (movingElementRef: RefObject<HTMLElement>, options: Options = {}) => {
-    const [ dragging, setDragging ] = useState<boolean>(false)
-
-    const onDragStart = (event: React.DragEvent) => {
-        console.log("drag start")
-        insertPhantomElement(movingElementRef.current!)
-    }
-
-    const onDragEnd = (event: React.DragEvent) => {
-        document.querySelectorAll(".phantom").forEach(phantom => phantom.remove())
-    }
-
-    return { onDragStart, onDragEnd }
-}
-*/
-
-const useDraggable = (movingElementRef: RefObject<HTMLElement>, options: Options = {draggable: false}) => {
-    const [coordinates, setCoordinates] = useState<Coordinates>({offSetTop:0, offSetLeft:0})
-    const [ isMouseDown, setIsMouseDown ] = useState<boolean>(false)
-    
-    const elementWithPhantom = useRef<HTMLElement | null>(null)
-    const isMouseDownRef = useRef<boolean>(isMouseDown)
-    const coordinatesRef = useRef<Coordinates>(coordinates)
-    useEffect(() => {
-        isMouseDownRef.current = isMouseDown
-    }, [isMouseDown])
-    useEffect(() => {
-        coordinatesRef.current = coordinates
-    }, [coordinates])
-
-    useEffect(() => {
-        if(movingElementRef && options.draggable) {
-            const movingElement = movingElementRef.current!
-
-            const onPointerDown = (event: PointerEvent) => {      
-                event.stopPropagation()
-                const { width } = (event.target as HTMLElement).getBoundingClientRect()
-
-                insertPhantomElement(movingElement, movingElement, {first: true})
-
-                const { top, left} = movingElement.getBoundingClientRect()
-                //Initial coordinates & setup for moving
-                setCoordinates(prev => ({
-                    ...prev,
-                    top: top,
-                    left: left,
-                    offSetTop:event.clientY - top,
-                    offSetLeft:event.clientX - left,
-                    width: width
-                }))
-                movingElement.style.setProperty("user-select", "none")
-                movingElement.setPointerCapture(event.pointerId)
-                movingElement.classList.add("moving")
-                setIsMouseDown(true)
-            }
-            const onPointerUp = (event: PointerEvent) => {
-                if(isMouseDownRef.current) {
-                    const phantomElement = document.querySelectorAll(".phantom")[0]
-                    const phantomElementParent = phantomElement.parentElement!
-
-                    phantomElementParent.insertBefore(movingElement, phantomElement)
-
-                    document.querySelectorAll(".phantom").forEach(phantom => phantom.remove())
-                    
-                    movingElement.style.removeProperty("user-select")
-                    movingElement.classList.remove("moving")
-                    setCoordinates(prev => ({
-                        ...prev,
-                        width: null
-                    }))
-                    setIsMouseDown(false)
-                }
-            }
-            const onPointerMove = (event: PointerEvent) => {
-                if(isMouseDownRef.current) {
-                    const isTopOver = event.clientY - coordinatesRef.current.offSetTop < 0
-                    const isBottomOver = window.innerHeight - (event.clientY - coordinatesRef.current.offSetTop + movingElement.offsetHeight) < 0
-                    const isLeftOver = event.clientX - coordinatesRef.current.offSetLeft < 0
-                    const isRightOver = window.innerWidth - (event.clientX - coordinatesRef.current.offSetLeft + movingElement.offsetWidth) < 0
-
-                    let topCoordinate = isTopOver ? 0 : event.clientY - coordinatesRef.current.offSetTop
-                    topCoordinate = isBottomOver ? window.innerHeight - movingElement.offsetHeight : topCoordinate
-
-                    let leftCoordinate = isLeftOver ? 0 : event.clientX - coordinatesRef.current.offSetLeft
-                    leftCoordinate = isRightOver ? window.innerWidth - movingElement.offsetWidth : leftCoordinate
-
-                    setCoordinates(prev => ({
-                        ...prev,
-                        top:topCoordinate,
-                        left:leftCoordinate
-                    }))
-
-                    movingElement.hidden = true
-                    const elemBelow = document.elementFromPoint(event.clientX, event.clientY)
-                    movingElement.hidden = false
-                    const isElemeBelowDropable = elemBelow?.classList.contains("sg-list-item") || elemBelow?.classList.contains("sg-sublist")
-                    const elemBelowClosestDroppable = isElemeBelowDropable ? elemBelow as HTMLElement : elemBelow?.closest(".sg-list-item, .sg-sublist") as HTMLElement 
-                    console.log(elemBelow, elemBelowClosestDroppable)
-
-                    if(!elemBelowClosestDroppable || elemBelow?.classList.contains("phantom")) { return }
-
-                    if(elementWithPhantom.current != elemBelowClosestDroppable) {
-                        elementWithPhantom.current = elemBelowClosestDroppable
-                    }
-                    
-                    const {top, left, width, height} = elementWithPhantom.current.getBoundingClientRect()
-                    const phantomPosition = elementWithPhantom.current.dataset.phantom
-
-                    const afterTest = event.clientY - top >= height/2 && phantomPosition != "after"
-                    const beforeTest = event.clientY - top < height/2 && phantomPosition != "before"
-                    if(afterTest || beforeTest) {
-                        insertPhantomElement(elementWithPhantom.current, movingElement, {after: afterTest ? true : false})
-                    }
-                }
-            }
-
-            const bubble = false
-
-            movingElement.addEventListener("pointerdown", onPointerDown, bubble)
-            movingElement.addEventListener("pointerup", onPointerUp, bubble)
-            movingElement.addEventListener("pointermove", onPointerMove, bubble)
-            return function cleanup() {
-                movingElement.removeEventListener("pointerdown", onPointerDown, bubble)
-                movingElement.removeEventListener("pointerup", onPointerUp, bubble)
-                movingElement.removeEventListener("pointermove", onPointerMove, bubble)
-            }
-        }
-    },[])
-
-    return { coordinates, isMouseDown}
-}
-
-export default useDraggable

package/src/hooks/useKeepElementFocused.ts

@@ -1,37 +0,0 @@
-import { useEffect } from "react";
-
-const useKeepElementFocused = (elementRef:any) => {
-    useEffect(() => {
-        const onKeyDown  = (event: React.KeyboardEvent | KeyboardEvent) => {
-            const focusableElements = 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-            const modal = elementRef.current as HTMLElement
-            if(modal) {
-                const firstFocusableElement = modal.querySelectorAll<HTMLElement>(focusableElements)[0]
-                const focusableContent = modal.querySelectorAll<HTMLElement>(focusableElements)
-                const lastFocusableElement = focusableContent[focusableContent.length - 1]
-                let isTabPressed = event.key === 'Tab' || event.keyCode === 9;
-        
-                if (!isTabPressed) {
-                    return;
-                }
-        
-                if (event.shiftKey) {
-                    if (document.activeElement === firstFocusableElement) {
-                        lastFocusableElement.focus()
-                        event.preventDefault()
-                    }
-                } else if (document.activeElement === lastFocusableElement) {
-                    firstFocusableElement.focus();
-                    event.preventDefault()
-                }
-            }
-        }
-        document.addEventListener('keydown', onKeyDown, true )
-
-        return function cleanup() {
-            document.removeEventListener('keydown', onKeyDown, true )
-        }
-    }, [elementRef])
-}
-
-export default useKeepElementFocused

package/src/hooks/useQueryParams.ts

@@ -1,12 +0,0 @@
-
-const useQueryParams = (queryParam: string) => {
-    const url = new URL(window.location.href);
-    const param = url.searchParams.get(queryParam)// ? url.searchParams.get(queryParam) : url; // gremlin
-    const setQuery = (query: string, newParam:string) => {
-        url.searchParams.set(query, newParam)
-        history.replaceState(history.state, '', url);
-    }
-    return [param, setQuery]
-}
-// localhost:3000?name="gremlin"
-export default useQueryParams

package/src/hooks/useScreenSize.ts

@@ -1,24 +0,0 @@
-import { useState, useMemo, useEffect} from "react"
-import { debounce } from "lodash"
-
-const useScreenSize = (debounceTime=25) => {
-    const [size, setSize]= useState({height: window.innerHeight, width: window.innerWidth})
-
-
-    const handleResize = ()=> {
-        setSize({height: window.innerHeight, width: window.innerWidth})
-    }
-    const handleResizeDebounced = useMemo(() => 
-        debounce(handleResize, debounceTime)
-    , [debounceTime] )
-
-	useEffect(() => {
-		window.addEventListener("resize", handleResizeDebounced, true)
-		return function cleanup() {
-			window.removeEventListener("resize", handleResizeDebounced, true)
-		}
-	}, [handleResizeDebounced])
-    return size
-}
-
-export default useScreenSize