@a-type/ui 1.3.0 → 1.3.2

package/src/components/infiniteLoadTrigger/InfiniteLoadTrigger.tsx

@@ -1,38 +1,42 @@
-import { ReactNode, forwardRef, useEffect, useRef } from 'react';
-import classNames from 'clsx';
-import useMergedRef from '../../hooks/useMergedRef.js';
-import { useStableCallback } from '../../hooks.js';
-
-export interface InfiniteLoadTriggerProps {
-	className?: string;
-	children?: ReactNode;
-	onVisible?: () => void;
-}
-
-export const InfiniteLoadTrigger = forwardRef<
-	HTMLDivElement,
-	InfiniteLoadTriggerProps
->(function InfiniteLoadTrigger({ className, onVisible, ...rest }, ref) {
-	const innerRef = useRef<HTMLDivElement>(null);
-
-	const stableOnVisible = useStableCallback(onVisible);
-	useEffect(() => {
-		const observer = new IntersectionObserver((entries) => {
-			if (entries[0].isIntersecting) {
-				stableOnVisible();
-			}
-		});
-		observer.observe(innerRef.current!);
-		return () => {
-			observer.disconnect();
-		};
-	}, [stableOnVisible]);
-
-	return (
-		<div
-			ref={useMergedRef(ref, innerRef)}
-			className={classNames('flex flex-col items-center', className)}
-			{...rest}
-		/>
-	);
-});
+import classNames from 'clsx';
+import { ReactNode, useEffect, useRef } from 'react';
+import { useStableCallback } from '../../hooks.js';
+import useMergedRef from '../../hooks/useMergedRef.js';
+
+export interface InfiniteLoadTriggerProps {
+	className?: string;
+	children?: ReactNode;
+	onVisible?: () => void;
+}
+
+export const InfiniteLoadTrigger = function InfiniteLoadTrigger({
+	ref,
+	className,
+	onVisible,
+	...rest
+}: InfiniteLoadTriggerProps & {
+	ref?: React.Ref<HTMLDivElement>;
+}) {
+	const innerRef = useRef<HTMLDivElement>(null);
+
+	const stableOnVisible = useStableCallback(onVisible);
+	useEffect(() => {
+		const observer = new IntersectionObserver((entries) => {
+			if (entries[0].isIntersecting) {
+				stableOnVisible();
+			}
+		});
+		observer.observe(innerRef.current!);
+		return () => {
+			observer.disconnect();
+		};
+	}, [stableOnVisible]);
+
+	return (
+		<div
+			ref={useMergedRef(ref, innerRef)}
+			className={classNames('flex flex-col items-center', className)}
+			{...rest}
+		/>
+	);
+};

package/src/components/input/Input.tsx

@@ -1,81 +1,75 @@
-import { Slot } from '@radix-ui/react-slot';
-import classNames from 'clsx';
-import {
-	ChangeEvent,
-	ComponentProps,
-	FocusEvent,
-	forwardRef,
-	useCallback,
-} from 'react';
-import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
-
-export const inputClassName = classNames(
-	'layer-components:(px-5 py-[5px] text-md font-sans rounded-20px bg-white select-auto min-w-60px color-black border-solid border-1 border-gray-5 shadow-sm-inset)',
-	'layer-components:focus:(outline-none bg-gray-1 ring-4	ring-white)',
-	'layer-components:focus-visible:(outline-none ring-gray-dark-blend)',
-	'layer-components:md:(min-w-120px)',
-);
-
-export interface InputProps extends ComponentProps<'input'> {
-	/** @deprecated */
-	variant?: 'default' | 'primary';
-	autoSelect?: boolean;
-	asChild?: boolean;
-	/** Shuffle between random placeholders */
-	placeholders?: string[];
-	placeholdersIntervalMs?: number;
-	onValueChange?: (value: string) => void;
-}
-
-export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-	{
-		className,
-		autoSelect,
-		onFocus,
-		onChange,
-		onValueChange,
-		variant: _,
-		asChild,
-		placeholders,
-		placeholder,
-		placeholdersIntervalMs = 5000,
-		...props
-	},
-	ref,
-) {
-	const handleFocus = useCallback(
-		(ev: FocusEvent<HTMLInputElement>) => {
-			if (autoSelect) {
-				ev.target.select();
-			}
-			onFocus?.(ev);
-		},
-		[onFocus, autoSelect],
-	);
-
-	const handleChange = useCallback(
-		(ev: ChangeEvent<HTMLInputElement>) => {
-			onValueChange?.(ev.target.value);
-			onChange?.(ev);
-		},
-		[onChange, onValueChange],
-	);
-
-	const randomPlaceholder = useRotatingShuffledValue(
-		placeholders ?? [],
-		placeholdersIntervalMs,
-	);
-
-	const Component = asChild ? Slot : 'input';
-
-	return (
-		<Component
-			{...props}
-			onFocus={handleFocus}
-			onChange={handleChange}
-			className={classNames(inputClassName, className)}
-			ref={ref}
-			placeholder={placeholder ?? randomPlaceholder}
-		/>
-	);
-});
+import { Slot } from '@radix-ui/react-slot';
+import classNames from 'clsx';
+import { ChangeEvent, ComponentProps, FocusEvent, useCallback } from 'react';
+import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
+
+export const inputClassName = classNames(
+	'layer-components:(px-5 py-[5px] text-md font-sans rounded-20px bg-white select-auto min-w-60px color-black border-solid border-1 border-gray-5 shadow-sm-inset)',
+	'layer-components:focus:(outline-none bg-gray-1 ring-4	ring-white)',
+	'layer-components:focus-visible:(outline-none ring-gray-dark-blend)',
+	'layer-components:md:(min-w-120px)',
+);
+
+export interface InputProps extends ComponentProps<'input'> {
+	/** @deprecated */
+	variant?: 'default' | 'primary';
+	autoSelect?: boolean;
+	asChild?: boolean;
+	/** Shuffle between random placeholders */
+	placeholders?: string[];
+	placeholdersIntervalMs?: number;
+	onValueChange?: (value: string) => void;
+}
+
+export const Input = function Input({
+	ref,
+	className,
+	autoSelect,
+	onFocus,
+	onChange,
+	onValueChange,
+	variant: _,
+	asChild,
+	placeholders,
+	placeholder,
+	placeholdersIntervalMs = 5000,
+	...props
+}: InputProps & {
+	ref?: React.Ref<HTMLInputElement>;
+}) {
+	const handleFocus = useCallback(
+		(ev: FocusEvent<HTMLInputElement>) => {
+			if (autoSelect) {
+				ev.target.select();
+			}
+			onFocus?.(ev);
+		},
+		[onFocus, autoSelect],
+	);
+
+	const handleChange = useCallback(
+		(ev: ChangeEvent<HTMLInputElement>) => {
+			onValueChange?.(ev.target.value);
+			onChange?.(ev);
+		},
+		[onChange, onValueChange],
+	);
+
+	const randomPlaceholder = useRotatingShuffledValue(
+		placeholders ?? [],
+		placeholdersIntervalMs,
+	);
+
+	const Component = asChild ? Slot : 'input';
+
+	return (
+		<Component
+			{...props}
+			onFocus={handleFocus}
+			onChange={handleChange}
+			className={classNames(inputClassName, className)}
+			ref={ref}
+			placeholder={placeholder ?? randomPlaceholder}
+		/>
+	);
+};

package/src/components/liveUpdateTextField/LiveUpdateTextField.tsx

@@ -1,138 +1,134 @@
-'use client';
-
-import {
-	ChangeEvent,
-	FocusEvent,
-	forwardRef,
-	KeyboardEventHandler,
-	MouseEventHandler,
-	useCallback,
-	useEffect,
-	useMemo,
-	useRef,
-	useState,
-} from 'react';
-import { debounce } from '@a-type/utils';
-import { Input, InputProps } from '../input/Input.js';
-import { TextArea } from '../textArea/TextArea.js';
-
-export type LiveUpdateTextFieldProps = {
-	value: string;
-	debounceMs?: number;
-	onChange: (value: string) => void;
-	textArea?: boolean;
-	className?: string;
-	onFocus?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-	onBlur?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
-	autoComplete?: InputProps['autoComplete'];
-	autoFocus?: InputProps['autoFocus'];
-	autoSelect?: InputProps['autoSelect'];
-	required?: boolean;
-	placeholder?: string;
-	type?: InputProps['type'];
-	id?: string;
-	onKeyDown?: KeyboardEventHandler;
-	onKeyUp?: KeyboardEventHandler;
-	onClick?: MouseEventHandler;
-};
-
-/**
- * An extension of TextField which keeps a local realtime value in state and
- * periodically reports changes to the parent. Use this to connect
- * to the API and update a value from the field directly.
- *
- * This component is optimistic and will not respond to external changes while focused.
- */
-export const LiveUpdateTextField = forwardRef<
-	HTMLInputElement | HTMLTextAreaElement,
-	LiveUpdateTextFieldProps
->(function LiveUpdateTextField(
-	{
-		value,
-		onChange,
-		debounceMs = 500,
-		onFocus,
-		onBlur,
-		textArea,
-		type,
-		...rest
-	},
-	ref,
-) {
-	const [displayValue, setDisplayValue] = useState(value || '');
-	const ignoreUpdates = useRef(false);
-	const didChange = useRef(false);
-
-	const handleFocus = useCallback(
-		(ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-			onFocus?.(ev);
-			ignoreUpdates.current = true;
-		},
-		[onFocus],
-	);
-
-	const handleBlur = useCallback(
-		(ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
-			onBlur?.(ev);
-			ignoreUpdates.current = false;
-			// immediately send update if the user typed anything.
-			// otherwise pull the latest remote value
-			if (didChange.current) {
-				onChange?.(displayValue);
-			} else {
-				setDisplayValue(value || '');
-			}
-			didChange.current = false;
-		},
-		[onBlur, displayValue, onChange, value],
-	);
-
-	useEffect(() => {
-		if (ignoreUpdates.current) {
-			return;
-		}
-		setDisplayValue(value || '');
-	}, [value]);
-
-	// every once in a while, send an update to parent
-	const debouncedOnChange = useMemo(
-		() => debounce(onChange || (() => {}), debounceMs),
-		[onChange, debounceMs],
-	);
-
-	// update local state instantly and parent eventually
-	const handleChange = useCallback(
-		(ev: ChangeEvent<any>) => {
-			setDisplayValue(ev.target.value);
-			debouncedOnChange(ev.target.value);
-			didChange.current = true;
-		},
-		[debouncedOnChange],
-	);
-
-	if (textArea) {
-		return (
-			<TextArea
-				ref={ref as any}
-				onFocus={handleFocus}
-				onBlur={handleBlur}
-				value={displayValue}
-				onChange={handleChange}
-				autoSize
-				{...rest}
-			/>
-		);
-	} else {
-		return (
-			<Input
-				ref={ref as any}
-				onFocus={handleFocus}
-				onBlur={handleBlur}
-				value={displayValue}
-				onChange={handleChange}
-				type={type}
-				{...rest}
-			/>
-		);
-	}
-});
+'use client';
+
+import { debounce } from '@a-type/utils';
+import {
+	ChangeEvent,
+	FocusEvent,
+	KeyboardEventHandler,
+	MouseEventHandler,
+	Ref,
+	useCallback,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+} from 'react';
+import { Input, InputProps } from '../input/Input.js';
+import { TextArea } from '../textArea/TextArea.js';
+
+export type LiveUpdateTextFieldProps = {
+	value: string;
+	debounceMs?: number;
+	onChange: (value: string) => void;
+	textArea?: boolean;
+	className?: string;
+	onFocus?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+	onBlur?: (ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+	autoComplete?: InputProps['autoComplete'];
+	autoFocus?: InputProps['autoFocus'];
+	autoSelect?: InputProps['autoSelect'];
+	required?: boolean;
+	placeholder?: string;
+	type?: InputProps['type'];
+	id?: string;
+	onKeyDown?: KeyboardEventHandler;
+	onKeyUp?: KeyboardEventHandler;
+	onClick?: MouseEventHandler;
+	ref?: Ref<HTMLInputElement | HTMLTextAreaElement>;
+};
+
+/**
+ * An extension of TextField which keeps a local realtime value in state and
+ * periodically reports changes to the parent. Use this to connect
+ * to the API and update a value from the field directly.
+ *
+ * This component is optimistic and will not respond to external changes while focused.
+ */
+export const LiveUpdateTextField = function LiveUpdateTextField({
+	ref,
+	value,
+	onChange,
+	debounceMs = 500,
+	onFocus,
+	onBlur,
+	textArea,
+	type,
+	...rest
+}: LiveUpdateTextFieldProps) {
+	const [displayValue, setDisplayValue] = useState(value || '');
+	const ignoreUpdates = useRef(false);
+	const didChange = useRef(false);
+
+	const handleFocus = useCallback(
+		(ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+			onFocus?.(ev);
+			ignoreUpdates.current = true;
+		},
+		[onFocus],
+	);
+
+	const handleBlur = useCallback(
+		(ev: FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+			onBlur?.(ev);
+			ignoreUpdates.current = false;
+			// immediately send update if the user typed anything.
+			// otherwise pull the latest remote value
+			if (didChange.current) {
+				onChange?.(displayValue);
+			} else {
+				setDisplayValue(value || '');
+			}
+			didChange.current = false;
+		},
+		[onBlur, displayValue, onChange, value],
+	);
+
+	useEffect(() => {
+		if (ignoreUpdates.current) {
+			return;
+		}
+		setDisplayValue(value || '');
+	}, [value]);
+
+	// every once in a while, send an update to parent
+	const debouncedOnChange = useMemo(
+		() => debounce(onChange || (() => {}), debounceMs),
+		[onChange, debounceMs],
+	);
+
+	// update local state instantly and parent eventually
+	const handleChange = useCallback(
+		(ev: ChangeEvent<any>) => {
+			setDisplayValue(ev.target.value);
+			debouncedOnChange(ev.target.value);
+			didChange.current = true;
+		},
+		[debouncedOnChange],
+	);
+
+	if (textArea) {
+		return (
+			<TextArea
+				ref={ref as any}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				value={displayValue}
+				onChange={handleChange}
+				autoSize
+				{...rest}
+			/>
+		);
+	} else {
+		return (
+			<Input
+				ref={ref as any}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				value={displayValue}
+				onChange={handleChange}
+				type={type}
+				{...rest}
+			/>
+		);
+	}
+};