@contember/react-utils 1.3.0-alpha.9 → 2.0.0-alpha.1

package/dist/types/hooks/useElementTopOffset.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useElementTopOffset.d.ts","sourceRoot":"","sources":["../../../src/hooks/useElementTopOffset.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAA;AAE5D,wBAAgB,mBAAmB,CAAC,GAAG,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,MAAM,GAAG,SAAS,CAgCpF"}

package/dist/types/hooks/useEventHandler.d.ts

@@ -1,10 +0,0 @@
-import { EventHandler, SyntheticEvent } from 'react';
-/**
- * Similar to useEvent with inferred type for the event parameter according to event type
- *
- * @param type - String, keyof DocumentEventMap, e.g. 'click', 'keydown',...
- * @param callback - EventHandler
- * @returns Stable reference callback
- */
-export declare function useEventHandler<E extends SyntheticEvent<any>>(type: E['type'], callback: EventHandler<E>): EventHandler<E>;
-//# sourceMappingURL=useEventHandler.d.ts.map

package/dist/types/hooks/useEventHandler.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useEventHandler.d.ts","sourceRoot":"","sources":["../../../src/hooks/useEventHandler.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAA;AAEvE;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,cAAc,CAAC,GAAG,CAAC,EAAE,IAAI,EAAE,CAAC,CAAC,MAAM,CAAC,EAAE,QAAQ,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG,YAAY,CAAC,CAAC,CAAC,CAc1H"}

package/dist/types/hooks/useOnElementMutation.d.ts

@@ -1,3 +0,0 @@
-import { RefObjectOrElement } from './unwrapRefValue';
-export declare function useOnElementMutation(refOrElement: RefObjectOrElement<HTMLElement | undefined>, callback: MutationCallback, options?: MutationObserverInit): void;
-//# sourceMappingURL=useOnElementMutation.d.ts.map

package/dist/types/hooks/useOnElementMutation.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOnElementMutation.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOnElementMutation.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,kBAAkB,EAAkB,MAAM,kBAAkB,CAAA;AAErE,wBAAgB,oBAAoB,CACnC,YAAY,EAAE,kBAAkB,CAAC,WAAW,GAAG,SAAS,CAAC,EACzD,QAAQ,EAAE,gBAAgB,EAC1B,OAAO,GAAE,oBAA2E,QAiCpF"}

package/dist/types/hooks/useOnScrollWithin.d.ts

@@ -1,10 +0,0 @@
-import { RefObjectOrElement } from './unwrapRefValue';
-/**
- * Invokes callback on scroll event within the scroll container
- *
- * @param refOrElement - Scroll container
- * @param callback - Callback that is invoked on scroll event
- * @param interval - Specifies how often should scroll event invoke callback
- */
-export declare function useOnScrollWithin(refOrElement: RefObjectOrElement<HTMLElement | null> | null, callback: (event: Event) => void, interval?: number): void;
-//# sourceMappingURL=useOnScrollWithin.d.ts.map

package/dist/types/hooks/useOnScrollWithin.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOnScrollWithin.d.ts","sourceRoot":"","sources":["../../../src/hooks/useOnScrollWithin.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,kBAAkB,EAAkB,MAAM,kBAAkB,CAAA;AAErE;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAChC,YAAY,EAAE,kBAAkB,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,EAC3D,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,EAChC,QAAQ,GAAE,MAAkB,QAqD5B"}

package/dist/types/hooks/useScrollOffsets.d.ts

@@ -1,14 +0,0 @@
-import { RefObjectOrElement } from './unwrapRefValue';
-export type Offsets = {
-    bottom: number;
-    left: number;
-    right: number;
-    top: number;
-};
-export declare function useScrollOffsets(refOrElement: RefObjectOrElement<HTMLElement | null> | null, interval?: number): {
-    bottom: number;
-    left: number;
-    right: number;
-    top: number;
-};
-//# sourceMappingURL=useScrollOffsets.d.ts.map

package/dist/types/hooks/useScrollOffsets.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useScrollOffsets.d.ts","sourceRoot":"","sources":["../../../src/hooks/useScrollOffsets.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,kBAAkB,EAAkB,MAAM,kBAAkB,CAAA;AAIrE,MAAM,MAAM,OAAO,GAAG;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,EAAE,MAAM,CAAC;CACZ,CAAA;AAED,wBAAgB,gBAAgB,CAAC,YAAY,EAAE,kBAAkB,CAAC,WAAW,GAAG,IAAI,CAAC,GAAG,IAAI,EAAE,QAAQ,GAAE,MAAkB;;;;;EAiCzH"}

package/dist/types/theming/ColorSchemeProvider.d.ts

@@ -1,6 +0,0 @@
-export type ColorSchemeProviderProps = {
-    children: React.ReactNode;
-    scheme?: string;
-};
-export declare const ColorSchemeProvider: import("react").MemoExoticComponent<({ children, scheme }: ColorSchemeProviderProps) => import("react/jsx-runtime").JSX.Element>;
-//# sourceMappingURL=ColorSchemeProvider.d.ts.map

package/dist/types/theming/ColorSchemeProvider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ColorSchemeProvider.d.ts","sourceRoot":"","sources":["../../../src/theming/ColorSchemeProvider.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,wBAAwB,GAAG;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;CACf,CAAA;AAED,eAAO,MAAM,mBAAmB,6DAA+B,wBAAwB,6CAMrF,CAAA"}

package/dist/types/theming/GlobalClassNamePrefixContext.d.ts

@@ -1,2 +0,0 @@
-export declare const GlobalClassNamePrefixContext: import("react").Context<string>;
-//# sourceMappingURL=GlobalClassNamePrefixContext.d.ts.map

package/dist/types/theming/GlobalClassNamePrefixContext.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"GlobalClassNamePrefixContext.d.ts","sourceRoot":"","sources":["../../../src/theming/GlobalClassNamePrefixContext.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,4BAA4B,iCAAgC,CAAA"}

package/dist/types/theming/contexts.d.ts

@@ -1,12 +0,0 @@
-export declare const DEFAULT_COLOR_SCHEME = "system";
-/**
- * @group UI
- *
- * @description
- * Provides the current color scheme, possible values are `'light'`, `'dark'` or `'system'`.
- *
- * @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
- *
- */
-export declare const ColorSchemeContext: import("react").Context<string>, useColorScheme: () => string;
-//# sourceMappingURL=contexts.d.ts.map

package/dist/types/theming/contexts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"contexts.d.ts","sourceRoot":"","sources":["../../../src/theming/contexts.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,oBAAoB,WAAW,CAAA;AAG5C;;;;;;;;GAQG;AACH,eAAO,MAAO,kBAAkB,mCAAE,cAAc,cAG/C,CAAA"}

package/dist/types/theming/index.d.ts

@@ -1,8 +0,0 @@
-export * from './ColorSchemeProvider';
-export * from './GlobalClassNamePrefixContext';
-export * from './contexts';
-export * from './useClassName';
-export * from './useClassNameFactory';
-export * from './useThemedClassName';
-export * from './useThemedClassNameFactory';
-//# sourceMappingURL=index.d.ts.map

package/dist/types/theming/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AACrC,cAAc,gCAAgC,CAAA;AAC9C,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,uBAAuB,CAAA;AACrC,cAAc,sBAAsB,CAAA;AACpC,cAAc,6BAA6B,CAAA"}

package/dist/types/theming/useClassName.d.ts

@@ -1,11 +0,0 @@
-import { NestedClassName } from '@contember/utilities';
-/**
- * Hook for component class name accepting outer class name
- *
- * @param componentClassName - Component class name
- * @param additionalClassName - Additional class name
- * @param prefixOverride - Context component prefix override
- * @returns Prefixed component class name.
- */
-export declare function useClassName(componentClassName: NestedClassName, additionalClassName?: NestedClassName, prefixOverride?: string | null | undefined): string;
-//# sourceMappingURL=useClassName.d.ts.map

package/dist/types/theming/useClassName.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useClassName.d.ts","sourceRoot":"","sources":["../../../src/theming/useClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA2C,MAAM,sBAAsB,CAAA;AAI/F;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC3B,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,GAAE,eAAsB,EAC3C,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,UAY1C"}

package/dist/types/theming/useClassNameFactory.d.ts

@@ -1,17 +0,0 @@
-import { NestedClassName } from '@contember/utilities';
-/**
- * Hook for component class name accepting outer class name
- *
- * Returns a reusable function almost that is handy for components
- * with many sub-component parts that should inherit the root component
- * name.
- *
- * Also, product of the factory is a function that can be used outside of rules of hooks.
- *
- * @param componentClassName - Component class name
- * @param glue - String to use to glue component and sub-component suffix
- * @param prefixOverride - Context component prefix override
- * @returns
- */
-export declare function useClassNameFactory(componentClassName: NestedClassName, glue?: string | null, prefixOverride?: string | null | undefined): (suffix?: string | null | undefined, additionalClassName?: NestedClassName) => string;
-//# sourceMappingURL=useClassNameFactory.d.ts.map

package/dist/types/theming/useClassNameFactory.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useClassNameFactory.d.ts","sourceRoot":"","sources":["../../../src/theming/useClassNameFactory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA2C,MAAM,sBAAsB,CAAA;AAK/F;;;;;;;;;;;;;GAaG;AACH,wBAAgB,mBAAmB,CAClC,kBAAkB,EAAE,eAAe,EACnC,IAAI,GAAE,MAAM,GAAG,IAAU,EACzB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,aAUjC,MAAM,GAAG,IAAI,GAAG,SAAS,wBACZ,eAAe,KAClC,MAAM,CAeT"}

package/dist/types/theming/useThemedClassName.d.ts

@@ -1,39 +0,0 @@
-import { NestedClassName } from '@contember/utilities';
-/**
- * Hook for component class name accepting outer class name with theme-* and scheme-* class manes
- *
- * It looks for theme CSS classes in the given class name, deduplicates them and returns final theme class name with scheme CSS class set
- * @internal
- *
- * @param componentClassName - Component class name
- * @param additionalClassName - Additional class name
- * @param prefixOverride - Context component prefix override
- * @returns string
- * @see useColorScheme
- *
- * @example
- * ```tsx
- * function Button({ className }: { className?: string | string[] }) {
- * 	 const [contentThemeClassName, controlsThemeClassName] = useThemedClassName(className)
- *
- * 	 return (
- * 		 <div className={contentThemeClassName}>
- * 			 <button className={controlsThemeClassName}>Click me</button>
- * 		 </div>
- * 	 )
- * }
- *
- * function App() {
- * 	 return (
- * 		 <Button className="theme-default theme-danger:hover" />
- * 	 )
- * }
- *
- * // renders:
- * // <div class="scheme-system theme-default-content theme-danger-content:hover">
- * // 	<button class="scheme-system theme-default-controls theme-danger-controls:hover">Click me</button>
- * // </div>
- * ```
- */
-export declare function useThemedClassName(componentClassName: NestedClassName, additionalClassName: NestedClassName, prefixOverride?: string | null | undefined): string;
-//# sourceMappingURL=useThemedClassName.d.ts.map

package/dist/types/theming/useThemedClassName.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useThemedClassName.d.ts","sourceRoot":"","sources":["../../../src/theming/useThemedClassName.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAA+C,MAAM,sBAAsB,CAAA;AAInG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,kBAAkB,CACjC,kBAAkB,EAAE,eAAe,EACnC,mBAAmB,EAAE,eAAe,EACpC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,GACxC,MAAM,CASR"}

package/dist/types/theming/useThemedClassNameFactory.d.ts

@@ -1,3 +0,0 @@
-import { NestedClassName } from '@contember/utilities';
-export declare function useThemedClassNameFactory(componentClassName: NestedClassName, glue?: string | null, prefixOverride?: string | null | undefined): (suffix?: string | null | undefined, additionalClassName?: NestedClassName) => string;
-//# sourceMappingURL=useThemedClassNameFactory.d.ts.map

package/dist/types/theming/useThemedClassNameFactory.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useThemedClassNameFactory.d.ts","sourceRoot":"","sources":["../../../src/theming/useThemedClassNameFactory.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAwF,MAAM,sBAAsB,CAAA;AAM5I,wBAAgB,yBAAyB,CACxC,kBAAkB,EAAE,eAAe,EACnC,IAAI,GAAE,MAAM,GAAG,IAAU,EACzB,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,GAAG,SAAS,aAYjC,MAAM,GAAG,IAAI,GAAG,SAAS,wBACZ,eAAe,KAClC,MAAM,CAoBT"}

package/src/context/createOptionalContextFactory.ts

@@ -1,13 +0,0 @@
-import type { Context } from 'react'
-import { createContext, useContext } from 'react'
-
-export function createOptionalContextFactory<T>(name: string, initialValue: T): [Context<T>, () => T] {
-  const OptionalContext = createContext<T>(initialValue)
-  OptionalContext.displayName = name
-
-  const useOptionalContext = () => {
-    return useContext(OptionalContext) ?? initialValue
-  }
-
-  return [OptionalContext, useOptionalContext]
-}

package/src/hooks/useAddClassNameDuringResize.ts

@@ -1,56 +0,0 @@
-import { useLayoutEffect, useRef } from 'react'
-import { useReferentiallyStableCallback } from '../referentiallyStable'
-import { useOnWindowResize } from './useOnWindowResize'
-
-function addClassName(
-	className: string,
-	element: HTMLElement,
-) {
-	if (element.classList.contains(className)) {
-		element.classList.remove(className)
-	}
-}
-
-function removeClassName(
-	className: string,
-	element: HTMLElement,
-) {
-	if (!element.classList.contains(className)) {
-		element.classList.add(className)
-	}
-}
-
-/**
- * Adds CSS class during resize event to element
- *
- * - Falls back to document.body when no element is specified
- * - Adds CSS class to element also on the initial load
- * - Uses element.classList directly
- *
- * @param className - CSS class to apply during the resize event
- * @param timeoutToRestore - Timeout in milliseconds to wait before finally removing the CSS class
- * @param element - Optional HTML element to apply CSS class to
- */
-export function useAddClassNameDuringResize(
-	className: string,
-	timeoutToRestore: number = 300,
-	element?: HTMLElement,
-) {
-	const timeoutID = useRef<number>()
-
-	const addTemporaryClassName = useReferentiallyStableCallback(() => {
-		clearTimeout(timeoutID.current)
-		removeClassName(className, element ?? document.body)
-
-		timeoutID.current = setTimeout(() => {
-			addClassName(className, element ?? document.body)
-		}, timeoutToRestore)
-
-		return () => {
-			clearTimeout(timeoutID.current)
-		}
-	})
-
-	useLayoutEffect(addTemporaryClassName, [addTemporaryClassName])
-	useOnWindowResize(addTemporaryClassName)
-}

package/src/hooks/useCloseOnClickOutside.ts

@@ -1,27 +0,0 @@
-import { useEffect } from 'react'
-
-export const useCloseOnClickOutside = ({ isOpen, close, contents, outside }: { isOpen: boolean, close: () => void, contents: (Node | null)[], outside?: HTMLElement | null }) => {
-	useEffect(() => {
-		if (isOpen) {
-			const closeOnClickOutside = (event: Event) => {
-				const target = event.target
-				if (
-					target instanceof Node &&
-					(!document.body.contains(target) ||
-						target === document.body ||
-						contents.some(it => it && it.contains(target)))
-				) {
-					return
-				}
-				if (contents.every(it => it === null)) {
-					return
-				}
-				close()
-			}
-			(outside ?? window).addEventListener('click', closeOnClickOutside)
-			return () => {
-				(outside ?? window).removeEventListener('click', closeOnClickOutside)
-			}
-		}
-	}, [close, isOpen, contents, outside])
-}

package/src/hooks/useCloseOnEscape.ts

@@ -1,18 +0,0 @@
-import { useEffect } from 'react'
-
-export const useCloseOnEscape = ({ isOpen, close }: { isOpen: boolean, close: () => void }) => {
-	useEffect(() => {
-		if (isOpen) {
-			const closeOnEscapeKey = (event: KeyboardEvent) => {
-				if (event.key === 'Escape') {
-					close()
-				}
-			}
-			window.addEventListener('keydown', closeOnEscapeKey)
-
-			return () => {
-				window.removeEventListener('keydown', closeOnEscapeKey)
-			}
-		}
-	}, [close, isOpen])
-}

package/src/hooks/useContainerWidth.ts

@@ -1,13 +0,0 @@
-import { createContext, useContext } from 'react'
-import { useWindowSize } from './useWindowSize'
-
-export type ContainerWidthContextType = number
-export const ContainerWidthContext = createContext<ContainerWidthContextType | null | undefined>(undefined)
-ContainerWidthContext.displayName = 'ContainerWidthContext'
-
-export function useContainerWidth(): number {
-	const maybeContainerWidth = useContext(ContainerWidthContext)
-	const { width: windowWidth } = useWindowSize()
-
-	return maybeContainerWidth ?? windowWidth
-}

package/src/hooks/useElementSize.ts

@@ -1,56 +0,0 @@
-import { getElementDimensionsCallback, getSizeFromResizeObserverEntryFactory } from '@contember/utilities'
-import { useLayoutEffect, useMemo, useState } from 'react'
-import { useScopedConsoleRef } from '../debug-context'
-import { useReferentiallyStableCallback } from '../referentiallyStable'
-import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'
-import { useOnElementResize } from './useOnElementResize'
-
-export type ElementSize = {
-	height: number
-	width: number
-}
-
-/**
- * Measure HTMLElement
- *
- * @param refOrElement - HTMLElement passed directly or indirectly as RefObject
- * @returns Size vector consisting of width and height properties
- */
-export function useElementSize(
-	refOrElement: RefObjectOrElement<HTMLElement>,
-	options: ResizeObserverOptions = {},
-	timeout: number = 300,
-): { height: number | undefined, width: number | undefined } {
-	const { logged } = useScopedConsoleRef('useElementSize').current
-
-	const { box = 'border-box' } = options
-	const getSizeFromResizeObserverEntry = useMemo(() => getSizeFromResizeObserverEntryFactory(box), [box])
-
-	const [width, setWidth] = useState<number | undefined>()
-	const [height, setHeight] = useState<number | undefined>()
-
-	logged('dimensions', { width, height })
-
-	const maybeSetNewDimensions = useReferentiallyStableCallback((dimensions: ElementSize) => {
-		if (width !== dimensions.width) {
-			setWidth(dimensions.width)
-		}
-		if (height !== dimensions.height) {
-			setHeight(dimensions.height)
-		}
-	})
-
-	useOnElementResize(refOrElement, entry => {
-		const dimensions = logged('useOnElementResize => entry:dimensions', getSizeFromResizeObserverEntry(entry))
-		maybeSetNewDimensions(dimensions)
-	}, { box }, timeout)
-
-	useLayoutEffect(() => {
-		const element = unwrapRefValue(refOrElement)
-		if (element) {
-			getElementDimensionsCallback(element, dimensions => maybeSetNewDimensions(dimensions))
-		}
-	})
-
-	return { height, width }
-}

package/src/hooks/useElementTopOffset.ts

@@ -1,35 +0,0 @@
-import { RefObject, useLayoutEffect, useState } from 'react'
-
-export function useElementTopOffset(ref?: RefObject<HTMLElement>): number | undefined {
-	const [offsetTop, setOffsetTop] = useState<number | undefined>(undefined)
-
-	useLayoutEffect(() => {
-		if (!ref?.current) {
-			return
-		}
-
-		const element = ref.current
-
-		function updateTopOffsetCallback() {
-			setOffsetTop(element.offsetTop)
-		}
-
-		function updateTopOffsetHandler() {
-			requestAnimationFrame(updateTopOffsetCallback)
-		}
-
-		updateTopOffsetHandler()
-
-		const observer = new ResizeObserver(() => {
-			requestAnimationFrame(updateTopOffsetCallback)
-		})
-
-		observer.observe(element)
-
-		return () => {
-			observer.unobserve(element)
-		}
-	}, [ref])
-
-	return offsetTop
-}

package/src/hooks/useEventHandler.ts

@@ -1,24 +0,0 @@
-import { EventHandler, SyntheticEvent, useEffect, useRef } from 'react'
-
-/**
- * Similar to useEvent with inferred type for the event parameter according to event type
- *
- * @param type - String, keyof DocumentEventMap, e.g. 'click', 'keydown',...
- * @param callback - EventHandler
- * @returns Stable reference callback
- */
-export function useEventHandler<E extends SyntheticEvent<any>>(type: E['type'], callback: EventHandler<E>): EventHandler<E> {
-	const callbackRef = useRef(callback); callbackRef.current = callback
-
-	const stableHandler = useRef(function (event: any) {
-		return callbackRef.current(event)
-	}).current
-
-	useEffect(() => {
-		return () => {
-			callbackRef.current = () => { }
-		}
-	}, [])
-
-	return stableHandler
-}

package/src/hooks/useOnElementMutation.ts

@@ -1,42 +0,0 @@
-import deepEqual from 'fast-deep-equal/es6/index.js'
-import { useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { useScopedConsoleRef } from '../debug-context'
-import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'
-
-export function useOnElementMutation(
-	refOrElement: RefObjectOrElement<HTMLElement | undefined>,
-	callback: MutationCallback,
-	options: MutationObserverInit = { attributes: true, childList: true, subtree: true },
-) {
-	const scopedConsoleRef = useScopedConsoleRef('useOnElementMutation')
-
-	const callbackRef = useRef(callback); callbackRef.current = callback
-	const optionsRef = useRef<MutationObserverInit>(options); optionsRef.current = options
-
-	const [optionsState, setOptionsState] = useState<MutationObserverInit>(options)
-
-	useEffect(() => {
-		if (!deepEqual(optionsRef.current, options)) {
-			setOptionsState(options)
-		}
-	}, [options])
-
-	useLayoutEffect(() => {
-		const element = unwrapRefValue(refOrElement)
-
-		if (element) {
-			function handler(mutations: MutationRecord[], observer: MutationObserver) {
-				scopedConsoleRef.current.logged('element.mutations', mutations)
-				callbackRef.current(mutations, observer)
-			}
-
-			const observer = new MutationObserver(handler)
-
-			observer.observe(element, optionsState)
-
-			return () => {
-				observer.disconnect()
-			}
-		}
-	}, [optionsState, refOrElement, scopedConsoleRef])
-}

package/src/hooks/useOnScrollWithin.ts

@@ -1,68 +0,0 @@
-import { useLayoutEffect, useRef } from 'react'
-import { useScopedConsoleRef } from '../debug-context'
-import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'
-
-/**
- * Invokes callback on scroll event within the scroll container
- *
- * @param refOrElement - Scroll container
- * @param callback - Callback that is invoked on scroll event
- * @param interval - Specifies how often should scroll event invoke callback
- */
-export function useOnScrollWithin(
-	refOrElement: RefObjectOrElement<HTMLElement | null> | null,
-	callback: (event: Event) => void,
-	interval: number = 1000 / 60,
-) {
-	const scopedConsoleRef = useScopedConsoleRef('useOnScrollWithin')
-
-	const callbackRef = useRef(callback); callbackRef.current = callback
-	const lastTimeStamp = useRef<number>(0)
-
-	useLayoutEffect(() => {
-		const element = unwrapRefValue(refOrElement)
-
-		let timeoutID: number | undefined = undefined
-
-		if (element) {
-			function debouncedHandler(event: Event) {
-				clearTimeout(timeoutID)
-
-				const delta = event.timeStamp - lastTimeStamp.current
-				scopedConsoleRef.current.logged('event:element.scroll:delta', delta)
-
-				if (delta > interval) {
-					scopedConsoleRef.current.warned('event:element.scroll:immediately', event)
-					callbackRef.current(event)
-					lastTimeStamp.current = event.timeStamp
-				} else {
-					timeoutID = setTimeout(() => {
-						scopedConsoleRef.current.warned('event:element.scroll:debounced', event)
-						lastTimeStamp.current = event.timeStamp
-						callbackRef.current(event)
-					}, interval)
-				}
-			}
-
-			if (element instanceof HTMLElement) {
-				if (element instanceof HTMLBodyElement || element instanceof HTMLHtmlElement) {
-					window.addEventListener('scroll', debouncedHandler, { capture: true, passive: true })
-					window.addEventListener('resize', debouncedHandler)
-
-					return () => {
-						window.removeEventListener('scroll', debouncedHandler)
-						window.removeEventListener('resize', debouncedHandler)
-					}
-				} else {
-					element.addEventListener('scroll', debouncedHandler, { passive: true, capture: true })
-
-					return () => {
-						element.removeEventListener('scroll', debouncedHandler)
-					}
-				}
-			} else {
-				throw new Error('Exhaustive error: Expecting element to be instance of HTMLElement')
-			}
-		}
-	}, [interval, refOrElement, scopedConsoleRef])
-}

package/src/hooks/useScrollOffsets.ts

@@ -1,87 +0,0 @@
-import { assert, getElementDimensions } from '@contember/utilities'
-import { useLayoutEffect, useMemo, useState } from 'react'
-import { useScopedConsoleRef } from '../debug-context'
-import { useReferentiallyStableCallback } from '../referentiallyStable'
-import { RefObjectOrElement, unwrapRefValue } from './unwrapRefValue'
-import { useOnScrollWithin } from './useOnScrollWithin'
-import { useOnWindowResize } from './useOnWindowResize'
-
-export type Offsets = {
-	bottom: number;
-	left: number;
-	right: number;
-	top: number;
-}
-
-export function useScrollOffsets(refOrElement: RefObjectOrElement<HTMLElement | null> | null, interval: number = 1000 / 60) {
-	const { logged } = useScopedConsoleRef('useScrollOffsets').current
-
-	const [top, setTop] = useState(0)
-	const [bottom, setBottom] = useState(0)
-	const [left, setLeft] = useState(0)
-	const [right, setRight] = useState(0)
-
-	const updateScrollOffsetsState = useReferentiallyStableCallback((offsets: Offsets) => {
-		logged('Update the offsets:', {
-			previous: { bottom, left, right, top },
-			next: offsets,
-		})
-
-		if (offsets.bottom !== bottom) setBottom(offsets.bottom)
-		if (offsets.left !== left) setLeft(offsets.left)
-		if (offsets.right !== right) setRight(offsets.right)
-		if (offsets.top !== top) setTop(offsets.top)
-	})
-
-	const handler = useReferentiallyStableCallback(() => {
-		const maybeScrollContent = unwrapRefValue(refOrElement) ?? document
-
-		if (maybeScrollContent) {
-			getElementScrollOffsets(maybeScrollContent).then(updateScrollOffsetsState)
-		}
-	})
-
-	useOnScrollWithin(refOrElement, handler, interval)
-	useOnWindowResize(handler)
-	useLayoutEffect(handler, [handler])
-
-	return useMemo(() => ({ bottom, left, right, top }), [bottom, left, right, top])
-}
-
-function isIntrinsicScrollElement(element: unknown): element is Document {
-	return element instanceof HTMLBodyElement
-		|| element instanceof HTMLHtmlElement
-		|| element instanceof DocumentType
-		|| element instanceof Document
-		|| element instanceof HTMLDocument
-}
-
-function getIntrinsicScrollContainer(element: HTMLElement | Document): HTMLElement {
-	const html = document.body.parentElement
-	assert('HTML element exists', html, (value): value is HTMLElement => value instanceof HTMLElement)
-
-	if (isIntrinsicScrollElement(element)) {
-		return html
-	} else {
-		return element
-	}
-}
-
-async function getElementScrollOffsets(element: HTMLElement | Document): Promise<Offsets> {
-	const isIntrinsicScrolling = isIntrinsicScrollElement(element)
-	const scrollContainer = getIntrinsicScrollContainer(element)
-
-	const { scrollLeft, scrollTop, scrollHeight, scrollWidth } = scrollContainer
-	const { height: scrollContainerHeight, width: scrollContainerWidth } = await getElementDimensions(scrollContainer)
-
-	const height = isIntrinsicScrolling ? window.innerHeight : scrollContainerHeight
-	const width = isIntrinsicScrolling ? window.innerWidth : scrollContainerWidth
-
-	const left = Math.round(scrollLeft)
-	const top = Math.round(scrollTop)
-
-	const right = Math.round(scrollWidth - width - left)
-	const bottom = Math.round(scrollHeight - height - top)
-
-	return { bottom, left, right, top }
-}