@sprawlify/react 0.0.5 → 0.0.7

package/dist/field-CGCTFCx2.mjs

@@ -0,0 +1,322 @@
+import { t as __export } from "./chunk-DLP0tNsH.mjs";
+import { t as mergeProps$1 } from "./core-C0F-4KYH.mjs";
+import { t as createContext$1 } from "./create-context-CdjrBhu7.mjs";
+import { n as useEnvironmentContext } from "./environment-BXkWNF2O.mjs";
+import { n as sprawlify, r as composeRefs } from "./factory-DQlmCPH2.mjs";
+import { t as createSplitProps } from "./create-split-props-BJQdOyld.mjs";
+import { r as useFieldsetContext, t as useSafeLayoutEffect } from "./use-safe-layout-effect-BlOhFUAp.mjs";
+import { mergeProps } from "@sprawlify/primitives/core";
+import { forwardRef, useEffect, useId, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+import { ariaAttr, dataAttr } from "@sprawlify/primitives/dom-query";
+import { createAnatomy } from "@sprawlify/primitives/anatomy";
+import { autoresizeTextarea } from "@sprawlify/primitives/auto-resize";
+
+//#region src/components/field/use-field-context.ts
+const [FieldProvider, useFieldContext] = createContext$1({
+	name: "FieldContext",
+	hookName: "useFieldContext",
+	providerName: "<FieldProvider />",
+	strict: false
+});
+
+//#endregion
+//#region src/components/field/field-context.tsx
+const FieldContext = (props) => props.children(useFieldContext());
+
+//#endregion
+//#region src/components/field/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(sprawlify.span, {
+		...mergedProps,
+		ref
+	});
+	return null;
+});
+FieldErrorText.displayName = "FieldErrorText";
+
+//#endregion
+//#region src/components/field/field-helper-text.tsx
+const FieldHelperText = forwardRef((props, ref) => {
+	const mergedProps = mergeProps$1(useFieldContext()?.getHelperTextProps(), props);
+	return /* @__PURE__ */ jsx(sprawlify.span, {
+		...mergedProps,
+		ref
+	});
+});
+FieldHelperText.displayName = "FieldHelperText";
+
+//#endregion
+//#region src/components/field/field-input.tsx
+const FieldInput = forwardRef((props, ref) => {
+	const mergedProps = mergeProps$1(useFieldContext()?.getInputProps(), props);
+	return /* @__PURE__ */ jsx(sprawlify.input, {
+		...mergedProps,
+		ref
+	});
+});
+FieldInput.displayName = "FieldInput";
+
+//#endregion
+//#region src/components/field/field-label.tsx
+const FieldLabel = forwardRef((props, ref) => {
+	const mergedProps = mergeProps$1(useFieldContext()?.getLabelProps(), props);
+	return /* @__PURE__ */ jsx(sprawlify.label, {
+		...mergedProps,
+		ref
+	});
+});
+FieldLabel.displayName = "FieldLabel";
+
+//#endregion
+//#region src/components/field/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(sprawlify.span, {
+		...mergedProps,
+		ref,
+		children: props.children ?? "*"
+	});
+});
+FieldRequiredIndicator.displayName = "FieldRequiredIndicator";
+
+//#endregion
+//#region src/components/field/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/use-field.ts
+const useField = (props = {}) => {
+	const fieldset = useFieldsetContext();
+	const env = useEnvironmentContext();
+	const { ids, 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 labelIds = useMemo(() => {
+		const ids$1 = [];
+		if (hasErrorText && invalid) ids$1.push(errorTextId);
+		if (hasHelperText) ids$1.push(helperTextId);
+		return ids$1.join(" ") || void 0;
+	}, [
+		invalid,
+		errorTextId,
+		helperTextId,
+		hasErrorText,
+		hasHelperText
+	]);
+	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 getLabelProps = useMemo(() => () => ({
+		...parts.label.attrs,
+		id: labelId,
+		"data-disabled": dataAttr(disabled),
+		"data-invalid": dataAttr(invalid),
+		"data-readonly": dataAttr(readOnly),
+		"data-required": dataAttr(required),
+		htmlFor: id
+	}), [
+		disabled,
+		invalid,
+		readOnly,
+		required,
+		id,
+		labelId
+	]);
+	const getControlProps = useMemo(() => () => ({
+		"aria-describedby": labelIds,
+		"aria-invalid": ariaAttr(invalid),
+		"data-invalid": dataAttr(invalid),
+		"data-required": dataAttr(required),
+		"data-readonly": dataAttr(readOnly),
+		id,
+		required,
+		disabled,
+		readOnly
+	}), [
+		labelIds,
+		invalid,
+		required,
+		readOnly,
+		id,
+		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: labelIds,
+		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/field-root.tsx
+const splitRootProps = createSplitProps();
+const FieldRoot = forwardRef((props, ref) => {
+	const [useFieldProps, localProps] = splitRootProps(props, [
+		"id",
+		"ids",
+		"disabled",
+		"invalid",
+		"readOnly",
+		"required"
+	]);
+	const field = useField(useFieldProps);
+	const mergedProps = mergeProps$1(field.getRootProps(), localProps);
+	return /* @__PURE__ */ jsx(FieldProvider, {
+		value: field,
+		children: /* @__PURE__ */ jsx(sprawlify.div, {
+			...mergedProps,
+			ref: composeRefs(ref, field.refs.rootRef)
+		})
+	});
+});
+FieldRoot.displayName = "FieldRoot";
+
+//#endregion
+//#region src/components/field/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(sprawlify.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+FieldRootProvider.displayName = "FieldRootProvider";
+
+//#endregion
+//#region src/components/field/field-select.tsx
+const FieldSelect = forwardRef((props, ref) => {
+	const mergedProps = mergeProps$1(useFieldContext()?.getSelectProps(), props);
+	return /* @__PURE__ */ jsx(sprawlify.select, {
+		...mergedProps,
+		ref
+	});
+});
+FieldSelect.displayName = "FieldSelect";
+
+//#endregion
+//#region src/components/field/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);
+	useEffect(() => {
+		if (!autoresize) return;
+		return autoresizeTextarea(textareaRef.current);
+	}, [autoresize]);
+	return /* @__PURE__ */ jsx(sprawlify.textarea, {
+		...mergedProps,
+		ref: composeRefs(ref, textareaRef)
+	});
+});
+FieldTextarea.displayName = "FieldTextarea";
+
+//#endregion
+//#region src/components/field/field.ts
+var field_exports = /* @__PURE__ */ __export({
+	Context: () => FieldContext,
+	ErrorText: () => FieldErrorText,
+	HelperText: () => FieldHelperText,
+	Input: () => FieldInput,
+	Label: () => FieldLabel,
+	RequiredIndicator: () => FieldRequiredIndicator,
+	Root: () => FieldRoot,
+	RootProvider: () => FieldRootProvider,
+	Select: () => FieldSelect,
+	Textarea: () => FieldTextarea
+});
+
+//#endregion
+export { FieldRoot as a, FieldRequiredIndicator as c, FieldHelperText as d, FieldErrorText as f, FieldRootProvider as i, FieldLabel as l, useFieldContext as m, FieldTextarea as n, useField as o, FieldContext as p, FieldSelect as r, fieldAnatomy as s, field_exports as t, FieldInput as u };