@a-type/ui 6.0.8 → 6.0.10

package/src/components/liveUpdateTextField/LiveUpdateTextField.tsx

@@ -1,133 +1,135 @@
-'use client';
-
-import { debounce } from '@a-type/utils';
-import {
-	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 handleValueChange = useCallback(
-		(value: string) => {
-			setDisplayValue(value);
-			debouncedOnChange(value);
-			didChange.current = true;
-		},
-		[debouncedOnChange],
-	);
-
-	if (textArea) {
-		return (
-			<TextArea
-				ref={ref as any}
-				onFocus={handleFocus}
-				onBlur={handleBlur}
-				value={displayValue}
-				onValueChange={handleValueChange}
-				autoSize
-				{...rest}
-			/>
-		);
-	} else {
-		return (
-			<Input
-				ref={ref as any}
-				onFocus={handleFocus}
-				onBlur={handleBlur}
-				value={displayValue}
-				onValueChange={handleValueChange}
-				type={type}
-				{...rest}
-			/>
-		);
-	}
-};
+'use client';
+
+import { debounce } from '@a-type/utils';
+import {
+	CSSProperties,
+	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;
+	style?: CSSProperties;
+	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 handleValueChange = useCallback(
+		(value: string) => {
+			setDisplayValue(value);
+			debouncedOnChange(value);
+			didChange.current = true;
+		},
+		[debouncedOnChange],
+	);
+
+	if (textArea) {
+		return (
+			<TextArea
+				ref={ref as any}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				value={displayValue}
+				onValueChange={handleValueChange}
+				autoSize
+				{...rest}
+			/>
+		);
+	} else {
+		return (
+			<Input
+				ref={ref as any}
+				onFocus={handleFocus}
+				onBlur={handleBlur}
+				value={displayValue}
+				onValueChange={handleValueChange}
+				type={type}
+				{...rest}
+			/>
+		);
+	}
+};

package/src/components/typography/typography.module.css

@@ -25,6 +25,12 @@
 	&[data-strikethrough] {
 		text-decoration: line-through;
 	}
+	&[data-bold] {
+		font-weight: var(--m-typography-weight-bold);
+	}
+	&[data-thin] {
+		font-weight: var(--m-typography-weight-thin);
+	}
 }
 
 @layer components {

package/src/components/typography/typography.tsx

@@ -9,6 +9,8 @@ export interface TypographyProps extends useRender.ComponentProps<'span'> {
 	italic?: boolean;
 	underline?: boolean;
 	strikethrough?: boolean;
+	bold?: boolean;
+	thin?: boolean;
 }
 
 export function Text({
@@ -18,6 +20,8 @@ export function Text({
 	strikethrough,
 	render,
 	className,
+	bold,
+	thin,
 	...rest
 }: TypographyProps) {
 	return useRender({
@@ -32,6 +36,8 @@ export function Text({
 			italic: italic ? true : undefined,
 			underline: underline ? true : undefined,
 			strikethrough: strikethrough ? true : undefined,
+			bold: bold ? true : undefined,
+			thin: thin ? true : undefined,
 		},
 	});
 }
@@ -75,3 +81,9 @@ export const H5 = withProps(Heading, {
 	render: <h5 />,
 	emphasis: 'ambient',
 });
+
+export const TextLink = withProps(Text, {
+	render: <a />,
+	bold: true,
+	underline: true,
+});