@contember/react-utils 1.3.0-rc.3 → 2.0.0-alpha.10

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 }
-}

package/src/theming/ColorSchemeProvider.tsx

@@ -1,16 +0,0 @@
-import { memo } from 'react'
-import { ColorSchemeContext, useColorScheme } from './contexts'
-
-export type ColorSchemeProviderProps = {
-	children: React.ReactNode
-	scheme?: string
-}
-
-export const ColorSchemeProvider = memo(({ children, scheme }: ColorSchemeProviderProps) => {
-	const inheritedColorScheme = useColorScheme()
-
-	return (
-		<ColorSchemeContext.Provider value={scheme ?? inheritedColorScheme}>{children}</ColorSchemeContext.Provider>
-	)
-})
-ColorSchemeProvider.displayName = 'Interface.ColorSchemeProvider'

package/src/theming/GlobalClassNamePrefixContext.ts

@@ -1,3 +0,0 @@
-import { createContext } from 'react'
-
-export const GlobalClassNamePrefixContext = createContext<string>('cui-')

package/src/theming/contexts.ts

@@ -1,18 +0,0 @@
-import { createContext } from '../context'
-
-export 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 const [ColorSchemeContext, useColorScheme] = createContext<string>(
-	'Interface.ColorScheme',
-	DEFAULT_COLOR_SCHEME,
-)

package/src/theming/index.ts

@@ -1,7 +0,0 @@
-export * from './ColorSchemeProvider'
-export * from './GlobalClassNamePrefixContext'
-export * from './contexts'
-export * from './useClassName'
-export * from './useClassNameFactory'
-export * from './useThemedClassName'
-export * from './useThemedClassNameFactory'

package/src/theming/useClassName.ts

@@ -1,28 +0,0 @@
-import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'
-import { useContext } from 'react'
-import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
-
-/**
- * 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 function useClassName (
-	componentClassName: NestedClassName,
-	additionalClassName: NestedClassName = null,
-	prefixOverride?: string | null | undefined,
-) {
-	const contextPrefix = useContext(GlobalClassNamePrefixContext)
-	const classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix
-
-	const componentClassNameList: string[] = flatClassNameList(componentClassName).map(
-		componentClassName => `${classNamePrefix}${componentClassName}`,
-	)
-
-	return deduplicateClassName(componentClassNameList.concat(
-		flatClassNameList(additionalClassName),
-	)).join(' ')
-}

package/src/theming/useClassNameFactory.ts

@@ -1,50 +0,0 @@
-import { NestedClassName, deduplicateClassName, flatClassNameList } from '@contember/utilities'
-import { useContext } from 'react'
-import { useReferentiallyStableCallback } from '../referentiallyStable'
-import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
-
-/**
- * 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 function useClassNameFactory(
-	componentClassName: NestedClassName,
-	glue: string | null = '-',
-	prefixOverride?: string | null | undefined,
-) {
-	const contextPrefix = useContext(GlobalClassNamePrefixContext)
-	const classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix
-
-	const componentClassNameList: string[] = flatClassNameList(componentClassName).map(
-		componentClassName => `${classNamePrefix}${componentClassName}`,
-	)
-
-	function componentClassNameFor(
-		suffix: string | null | undefined = null,
-		additionalClassName: NestedClassName = null,
-	): string {
-		const classNameSuffix: string = suffix ?? ''
-
-		return deduplicateClassName((classNameSuffix
-			? (classNameSuffix.match(/^[a-zA-Z0-9]/)
-				? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)
-				: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)
-			)
-			: componentClassNameList
-		).concat(
-			flatClassNameList(additionalClassName),
-		)).join(' ')
-	}
-
-	return useReferentiallyStableCallback(componentClassNameFor)
-}

package/src/theming/useThemedClassName.ts

@@ -1,54 +0,0 @@
-import { NestedClassName, colorSchemeClassName, filterThemedClassName } from '@contember/utilities'
-import { useColorScheme } from './contexts'
-import { useClassName } from './useClassName'
-
-/**
- * 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 function useThemedClassName(
-	componentClassName: NestedClassName,
-	additionalClassName: NestedClassName,
-	prefixOverride?: string | null | undefined,
-): string {
-	return useClassName(
-		componentClassName,
-		filterThemedClassName(
-			additionalClassName,
-			colorSchemeClassName(useColorScheme()),
-		),
-		prefixOverride,
-	)
-}

package/src/theming/useThemedClassNameFactory.ts

@@ -1,44 +0,0 @@
-import { NestedClassName, colorSchemeClassName, deduplicateClassName, filterThemedClassName, flatClassNameList } from '@contember/utilities'
-import { useContext } from 'react'
-import { useReferentiallyStableCallback } from '../referentiallyStable'
-import { GlobalClassNamePrefixContext } from './GlobalClassNamePrefixContext'
-import { useColorScheme } from './contexts'
-
-export function useThemedClassNameFactory(
-	componentClassName: NestedClassName,
-	glue: string | null = '-',
-	prefixOverride?: string | null | undefined,
-) {
-	const contextPrefix = useContext(GlobalClassNamePrefixContext)
-	const classNamePrefix: string = prefixOverride === null || prefixOverride === '' ? '' : prefixOverride || contextPrefix
-
-	const componentClassNameList: string[] = flatClassNameList(componentClassName).map(
-		componentClassName => `${classNamePrefix}${componentClassName}`,
-	)
-
-	const colorScheme = colorSchemeClassName(useColorScheme())
-
-	function componentClassNameFor(
-		suffix: string | null | undefined = null,
-		additionalClassName: NestedClassName = null,
-	): string {
-		const classNameSuffix: string = suffix ?? ''
-
-		return deduplicateClassName((classNameSuffix
-			? (classNameSuffix.match(/^[a-zA-Z0-9]/)
-				? componentClassNameList.map(componentClassName => `${componentClassName}${glue}${classNameSuffix}`)
-				: componentClassNameList.map(componentClassName => `${componentClassName}${classNameSuffix}`)
-			)
-			: componentClassNameList
-		).concat(
-			flatClassNameList(
-				filterThemedClassName(
-					additionalClassName,
-					colorScheme,
-				),
-			),
-		)).join(' ')
-	}
-
-	return useReferentiallyStableCallback(componentClassNameFor)
-}