@wirekyt/react 0.0.1 → 0.0.2

package/dist/field-Cy1E02DH.js

@@ -0,0 +1,349 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { c as createSplitProps, l as useComposedRefs, n as useSafeLayoutEffect, u as createContext$1 } from "./utils-CqLmqrgj.js";
+import { n as useEnvironmentContext } from "./environment-BTgKwk5E.js";
+import { t as mergeProps$1 } from "./core-CEYOEcVI.js";
+import { n as wire } from "./factory-Nm__-4xn.js";
+import "./providers-FEHnDTvb.js";
+import { n as useFieldsetContext } from "./use-context-CITa6pn9.js";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { mergeProps } from "@wirekyt/dom";
+import { jsx } from "react/jsx-runtime";
+import { ariaAttr, dataAttr } from "@wirekyt/dom/dom-query";
+import { createAnatomy } from "@wirekyt/dom/anatomy";
+import { autoresizeTextarea } from "@wirekyt/dom/auto-resize";
+//#region src/components/field/use-context.ts
+const [FieldProvider, useFieldContext] = createContext$1({
+	name: "FieldContext",
+	hookName: "useFieldContext",
+	providerName: "<FieldProvider />",
+	strict: false
+});
+//#endregion
+//#region src/components/field/context.tsx
+const FieldContext = (props) => props.children(useFieldContext());
+//#endregion
+//#region src/components/field/error-text.tsx
+const FieldErrorText = forwardRef((props, ref) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(field.getErrorTextProps(), props);
+	if (field?.invalid) return /* @__PURE__ */ jsx(wire.span, {
+		...mergedProps,
+		ref
+	});
+	return null;
+});
+FieldErrorText.displayName = "FieldErrorText";
+//#endregion
+//#region src/components/field/helper-text.tsx
+const FieldHelperText = forwardRef((props, ref) => {
+	const mergedProps = mergeProps$1(useFieldContext()?.getHelperTextProps(), props);
+	return /* @__PURE__ */ jsx(wire.span, {
+		...mergedProps,
+		ref
+	});
+});
+FieldHelperText.displayName = "FieldHelperText";
+//#endregion
+//#region src/components/field/input.tsx
+const FieldInput = forwardRef((props, ref) => {
+	const mergedProps = mergeProps$1(useFieldContext()?.getInputProps(), props);
+	return /* @__PURE__ */ jsx(wire.input, {
+		...mergedProps,
+		ref
+	});
+});
+FieldInput.displayName = "FieldInput";
+//#endregion
+//#region src/components/field/anatomy.ts
+const fieldAnatomy = createAnatomy("field").parts("root", "errorText", "helperText", "input", "label", "select", "textarea", "requiredIndicator");
+const parts = fieldAnatomy.build();
+//#endregion
+//#region src/components/field/item.tsx
+const FieldItem = (props) => {
+	const { value, children } = props;
+	const parentField = useFieldContext();
+	return /* @__PURE__ */ jsx(FieldProvider, {
+		value: useMemo(() => {
+			if (!parentField) throw new Error("Field.Item must be used within Field.Root");
+			const controlId = `field::${parentField.ids.control}::item::${value}`;
+			const labelId = `${controlId}::label`;
+			const getControlProps = () => ({
+				...parentField.getInputProps(),
+				id: controlId
+			});
+			return {
+				...parentField,
+				ids: {
+					...parentField.ids,
+					control: controlId,
+					label: labelId
+				},
+				getLabelProps: () => ({
+					...parentField.getLabelProps(),
+					id: labelId,
+					htmlFor: controlId
+				}),
+				getInputProps: () => ({
+					...getControlProps(),
+					...parts.input.attrs
+				}),
+				getSelectProps: () => ({
+					...getControlProps(),
+					...parts.select.attrs
+				}),
+				getTextareaProps: () => ({
+					...getControlProps(),
+					...parts.textarea.attrs
+				})
+			};
+		}, [parentField, value]),
+		children
+	});
+};
+FieldItem.displayName = "FieldItem";
+//#endregion
+//#region src/components/field/label.tsx
+const FieldLabel = forwardRef((props, ref) => {
+	const mergedProps = mergeProps$1(useFieldContext()?.getLabelProps(), props);
+	return /* @__PURE__ */ jsx(wire.label, {
+		...mergedProps,
+		ref
+	});
+});
+FieldLabel.displayName = "FieldLabel";
+//#endregion
+//#region src/components/field/required-indicator.tsx
+const FieldRequiredIndicator = forwardRef(({ fallback, ...props }, ref) => {
+	const field = useFieldContext();
+	if (!field.required) return fallback;
+	const mergedProps = mergeProps(field.getRequiredIndicatorProps(), props);
+	return /* @__PURE__ */ jsx(wire.span, {
+		...mergedProps,
+		ref,
+		children: props.children ?? "*"
+	});
+});
+FieldRequiredIndicator.displayName = "FieldRequiredIndicator";
+//#endregion
+//#region src/components/field/use.ts
+const useField = (props = {}) => {
+	const fieldset = useFieldsetContext();
+	const env = useEnvironmentContext();
+	const { ids, target, disabled = Boolean(fieldset?.disabled), invalid = false, readOnly = false, required = false } = props;
+	const [hasErrorText, setHasErrorText] = useState(false);
+	const [hasHelperText, setHasHelperText] = useState(false);
+	const uid = useId();
+	const id = props.id ?? uid;
+	const rootRef = useRef(null);
+	const rootId = ids?.control ?? `field::${id}`;
+	const errorTextId = ids?.errorText ?? `field::${id}::error-text`;
+	const helperTextId = ids?.helperText ?? `field::${id}::helper-text`;
+	const labelId = ids?.label ?? `field::${id}::label`;
+	useSafeLayoutEffect(() => {
+		const rootNode = rootRef.current;
+		if (!rootNode) return;
+		const checkTextElements = () => {
+			const docOrShadowRoot = env.getRootNode();
+			setHasErrorText(!!docOrShadowRoot.getElementById(errorTextId));
+			setHasHelperText(!!docOrShadowRoot.getElementById(helperTextId));
+		};
+		checkTextElements();
+		const observer = new (env.getWindow()).MutationObserver(checkTextElements);
+		observer.observe(rootNode, {
+			childList: true,
+			subtree: true
+		});
+		return () => observer.disconnect();
+	}, [
+		env,
+		errorTextId,
+		helperTextId
+	]);
+	const getRootProps = useMemo(() => () => ({
+		...parts.root.attrs,
+		id: rootId,
+		ref: rootRef,
+		role: "group",
+		"data-disabled": dataAttr(disabled),
+		"data-invalid": dataAttr(invalid),
+		"data-readonly": dataAttr(readOnly)
+	}), [
+		disabled,
+		invalid,
+		readOnly,
+		rootId
+	]);
+	const targetControlId = target ? `field::${id}::item::${target}` : void 0;
+	const getLabelProps = useMemo(() => () => ({
+		...parts.label.attrs,
+		id: labelId,
+		"data-disabled": dataAttr(disabled),
+		"data-invalid": dataAttr(invalid),
+		"data-readonly": dataAttr(readOnly),
+		"data-required": dataAttr(required),
+		htmlFor: targetControlId ?? id
+	}), [
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		id,
+		labelId,
+		targetControlId
+	]);
+	const errorMessageId = hasErrorText && invalid ? errorTextId : void 0;
+	const getControlProps = useMemo(() => () => ({
+		"aria-describedby": hasHelperText ? helperTextId : void 0,
+		"aria-errormessage": errorMessageId,
+		"aria-invalid": ariaAttr(invalid),
+		"data-invalid": dataAttr(invalid),
+		"data-required": dataAttr(required),
+		"data-readonly": dataAttr(readOnly),
+		id,
+		required,
+		disabled,
+		readOnly
+	}), [
+		hasHelperText,
+		helperTextId,
+		invalid,
+		required,
+		readOnly,
+		id,
+		errorMessageId,
+		disabled
+	]);
+	const getInputProps = useMemo(() => () => ({
+		...getControlProps(),
+		...parts.input.attrs
+	}), [getControlProps]);
+	const getTextareaProps = useMemo(() => () => ({
+		...getControlProps(),
+		...parts.textarea.attrs
+	}), [getControlProps]);
+	const getSelectProps = useMemo(() => () => ({
+		...getControlProps(),
+		...parts.select.attrs
+	}), [getControlProps]);
+	const getHelperTextProps = useMemo(() => () => ({
+		id: helperTextId,
+		...parts.helperText.attrs,
+		"data-disabled": dataAttr(disabled)
+	}), [disabled, helperTextId]);
+	const getErrorTextProps = useMemo(() => () => ({
+		id: errorTextId,
+		...parts.errorText.attrs,
+		"aria-live": "polite"
+	}), [errorTextId]);
+	const getRequiredIndicatorProps = useMemo(() => () => ({
+		"aria-hidden": true,
+		...parts.requiredIndicator.attrs
+	}), []);
+	return {
+		ariaDescribedby: hasHelperText ? helperTextId : void 0,
+		ids: {
+			root: rootId,
+			control: id,
+			label: labelId,
+			errorText: errorTextId,
+			helperText: helperTextId
+		},
+		refs: { rootRef },
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		getLabelProps,
+		getRootProps,
+		getInputProps,
+		getTextareaProps,
+		getSelectProps,
+		getHelperTextProps,
+		getErrorTextProps,
+		getRequiredIndicatorProps
+	};
+};
+//#endregion
+//#region src/components/field/root.tsx
+const splitRootProps = createSplitProps();
+const FieldRoot = forwardRef((props, ref) => {
+	const [useFieldProps, localProps] = splitRootProps(props, [
+		"id",
+		"ids",
+		"disabled",
+		"invalid",
+		"readOnly",
+		"required",
+		"target"
+	]);
+	const field = useField(useFieldProps);
+	const mergedProps = mergeProps$1(field.getRootProps(), localProps);
+	const composedRefs = useComposedRefs(ref, field.refs.rootRef);
+	return /* @__PURE__ */ jsx(FieldProvider, {
+		value: field,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref: composedRefs
+		})
+	});
+});
+FieldRoot.displayName = "FieldRoot";
+//#endregion
+//#region src/components/field/root-provider.tsx
+const splitRootProviderProps = createSplitProps();
+const FieldRootProvider = forwardRef((props, ref) => {
+	const [{ value: field }, localProps] = splitRootProviderProps(props, ["value"]);
+	const mergedProps = mergeProps$1(field.getRootProps(), localProps);
+	return /* @__PURE__ */ jsx(FieldProvider, {
+		value: field,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+FieldRootProvider.displayName = "FieldRootProvider";
+//#endregion
+//#region src/components/field/select.tsx
+const FieldSelect = forwardRef((props, ref) => {
+	const mergedProps = mergeProps$1(useFieldContext()?.getSelectProps(), props);
+	return /* @__PURE__ */ jsx(wire.select, {
+		...mergedProps,
+		ref
+	});
+});
+FieldSelect.displayName = "FieldSelect";
+//#endregion
+//#region src/components/field/textarea.tsx
+const FieldTextarea = forwardRef((props, ref) => {
+	const { autoresize, ...textareaProps } = props;
+	const textareaRef = useRef(null);
+	const mergedProps = mergeProps$1(useFieldContext()?.getTextareaProps(), { style: { resize: autoresize ? "none" : void 0 } }, textareaProps);
+	const composedRefs = useComposedRefs(ref, textareaRef);
+	useEffect(() => {
+		if (!autoresize) return;
+		return autoresizeTextarea(textareaRef.current);
+	}, [autoresize]);
+	return /* @__PURE__ */ jsx(wire.textarea, {
+		...mergedProps,
+		ref: composedRefs
+	});
+});
+FieldTextarea.displayName = "FieldTextarea";
+//#endregion
+//#region src/components/field/field.ts
+var field_exports = /* @__PURE__ */ __exportAll({
+	Context: () => FieldContext,
+	ErrorText: () => FieldErrorText,
+	HelperText: () => FieldHelperText,
+	Input: () => FieldInput,
+	Item: () => FieldItem,
+	Label: () => FieldLabel,
+	RequiredIndicator: () => FieldRequiredIndicator,
+	Root: () => FieldRoot,
+	RootProvider: () => FieldRootProvider,
+	Select: () => FieldSelect,
+	Textarea: () => FieldTextarea
+});
+//#endregion
+export { FieldRoot as a, FieldLabel as c, FieldInput as d, FieldHelperText as f, useFieldContext as h, FieldRootProvider as i, FieldItem as l, FieldContext as m, FieldTextarea as n, useField as o, FieldErrorText as p, FieldSelect as r, FieldRequiredIndicator as s, field_exports as t, fieldAnatomy as u };