@sprawlify/solid 0.0.14 → 0.0.16

package/dist/field-BRr9Zdes.jsx

@@ -0,0 +1,260 @@
+import { t as __export } from "./chunk-B5so6B0y.jsx";
+import { r as mergeProps$1 } from "./core-DbInRfhI.jsx";
+import { t as createContext$1 } from "./create-context-C3rvZvkc.jsx";
+import { o as useEnvironmentContext } from "./providers-DFaRRd80.jsx";
+import { t as createSplitProps } from "./create-split-props-B8A7_AF7.jsx";
+import { t as sprawlify } from "./factory-Ch5jgk20.jsx";
+import { t as composeRefs } from "./compose-refs-icUeuyHm.jsx";
+import { u as useFieldsetContext } from "./fieldset-B_LyllEa.jsx";
+import { Show, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+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({
+	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 = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field().getErrorTextProps(), props);
+	return <Show when={field?.().invalid}>
+      <sprawlify.span {...mergedProps} />
+    </Show>;
+};
+
+//#endregion
+//#region src/components/field/field-helper-text.tsx
+const FieldHelperText = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field().getHelperTextProps(), props);
+	return <sprawlify.span {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/field/field-input.tsx
+const FieldInput = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field?.().getInputProps(), props);
+	return <sprawlify.input {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/field/field-label.tsx
+const FieldLabel = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field?.().getLabelProps(), props);
+	return <sprawlify.label {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/field/field-required-indicator.tsx
+const FieldRequiredIndicator = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field().getRequiredIndicatorProps(), props);
+	return <Show when={field().required} fallback={props.fallback}>
+      <sprawlify.span {...mergedProps}>{props.children ?? "*"}</sprawlify.span>
+    </Show>;
+};
+
+//#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 fieldProps = mergeProps({
+		disabled: Boolean(fieldset?.().disabled),
+		required: false,
+		invalid: false,
+		readOnly: false
+	}, props);
+	const [hasErrorText, setHasErrorText] = createSignal(false);
+	const [hasHelperText, setHasHelperText] = createSignal(false);
+	const id = fieldProps.id ?? createUniqueId();
+	const [rootRef, setRootRef] = createSignal(void 0);
+	const rootId = fieldProps.ids?.control ?? `field::${id}`;
+	const errorTextId = fieldProps.ids?.errorText ?? `field::${id}::error-text`;
+	const helperTextId = fieldProps.ids?.helperText ?? `field::${id}::helper-text`;
+	const labelId = fieldProps.ids?.label ?? `field::${id}::label`;
+	onMount(() => {
+		const rootNode = rootRef();
+		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
+		});
+		onCleanup(() => observer.disconnect());
+	});
+	const getRootProps = () => ({
+		...parts.root.attrs,
+		id: rootId,
+		role: "group",
+		"data-disabled": dataAttr(fieldProps.disabled),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-readonly": dataAttr(fieldProps.readOnly)
+	});
+	const getLabelProps = () => ({
+		...parts.label.attrs,
+		id: labelId,
+		"data-disabled": dataAttr(fieldProps.disabled),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-readonly": dataAttr(fieldProps.readOnly),
+		"data-required": dataAttr(fieldProps.required),
+		htmlFor: id
+	});
+	const labelIds = createMemo(() => {
+		const ids = [];
+		if (hasErrorText() && fieldProps.invalid) ids.push(errorTextId);
+		if (hasHelperText()) ids.push(helperTextId);
+		return ids;
+	});
+	const getControlProps = () => ({
+		"aria-describedby": labelIds().join(" ") || void 0,
+		"aria-invalid": ariaAttr(fieldProps.invalid),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-required": dataAttr(fieldProps.required),
+		"data-readonly": dataAttr(fieldProps.readOnly),
+		id,
+		required: fieldProps.required,
+		disabled: fieldProps.disabled,
+		readOnly: fieldProps.readOnly || void 0
+	});
+	const getInputProps = () => ({
+		...getControlProps(),
+		...parts.input.attrs
+	});
+	const getTextareaProps = () => ({
+		...getControlProps(),
+		...parts.textarea.attrs
+	});
+	const getSelectProps = () => ({
+		...getControlProps(),
+		...parts.select.attrs
+	});
+	const getHelperTextProps = () => ({
+		id: helperTextId,
+		...parts.helperText.attrs,
+		"data-disabled": dataAttr(fieldProps.disabled)
+	});
+	const getErrorTextProps = () => ({
+		id: errorTextId,
+		...parts.errorText.attrs,
+		"aria-live": "polite"
+	});
+	const getRequiredIndicatorProps = () => ({
+		"aria-hidden": true,
+		...parts.requiredIndicator.attrs
+	});
+	return createMemo(() => ({
+		ariaDescribedby: labelIds().join(" "),
+		ids: {
+			control: id,
+			label: labelId,
+			errorText: errorTextId,
+			helperText: helperTextId
+		},
+		refs: { rootRef: setRootRef },
+		disabled: fieldProps.disabled,
+		invalid: fieldProps.invalid,
+		readOnly: fieldProps.readOnly,
+		required: fieldProps.required,
+		getLabelProps,
+		getRootProps,
+		getInputProps,
+		getTextareaProps,
+		getSelectProps,
+		getHelperTextProps,
+		getErrorTextProps,
+		getRequiredIndicatorProps
+	}));
+};
+
+//#endregion
+//#region src/components/field/field-root.tsx
+const FieldRoot = (props) => {
+	const [useFieldProps, localProps] = createSplitProps()(props, [
+		"id",
+		"ids",
+		"disabled",
+		"invalid",
+		"readOnly",
+		"required"
+	]);
+	const field = useField(useFieldProps);
+	const mergedProps = mergeProps$1(() => field().getRootProps(), localProps);
+	return <FieldProvider value={field}>
+      <sprawlify.div {...mergedProps} ref={composeRefs(field().refs.rootRef, props.ref)} />
+    </FieldProvider>;
+};
+
+//#endregion
+//#region src/components/field/field-root-provider.tsx
+const FieldRootProvider = (props) => {
+	const [{ value: field }, localProps] = createSplitProps()(props, ["value"]);
+	const mergedProps = mergeProps$1(() => field().getRootProps(), localProps);
+	return <FieldProvider value={field}>
+      <sprawlify.div {...mergedProps} />
+    </FieldProvider>;
+};
+
+//#endregion
+//#region src/components/field/field-select.tsx
+const FieldSelect = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$1(() => field?.().getSelectProps(), props);
+	return <sprawlify.select {...mergedProps} />;
+};
+
+//#endregion
+//#region src/components/field/field-textarea.tsx
+const FieldTextarea = (props) => {
+	const field = useFieldContext();
+	let textareaRef;
+	const [autoresizeProps, textareaProps] = splitProps(props, ["autoresize"]);
+	const mergedProps = mergeProps$1(() => field?.().getTextareaProps(), () => ({ style: { resize: autoresizeProps.autoresize ? "none" : void 0 } }), textareaProps);
+	onMount(() => {
+		if (!autoresizeProps.autoresize) return;
+		const cleanup = autoresizeTextarea(textareaRef);
+		onCleanup(() => cleanup?.());
+	});
+	return <sprawlify.textarea {...mergedProps} ref={composeRefs((el) => textareaRef = el, props.ref)} />;
+};
+
+//#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 };

package/dist/field-CoYiA2ek.js

@@ -0,0 +1,288 @@
+import { t as __export } from "./chunk-B93cd-Dz.js";
+import { r as mergeProps$2 } from "./core-oNB2jGcl.js";
+import { t as createContext$1 } from "./create-context-GfQ_MylE.js";
+import { o as useEnvironmentContext } from "./providers-Bo0OFe08.js";
+import { t as createSplitProps } from "./create-split-props-pQu7jijw.js";
+import { t as sprawlify } from "./factory-PGDAvOKb.js";
+import { t as composeRefs } from "./compose-refs-BVVIB7xn.js";
+import { u as useFieldsetContext } from "./fieldset-BrJqMLEd.js";
+import { Show, createMemo, createSignal, createUniqueId, mergeProps, onCleanup, onMount, splitProps } from "solid-js";
+import { createComponent, mergeProps as mergeProps$1 } from "solid-js/web";
+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({
+	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 = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field().getErrorTextProps(), props);
+	return createComponent(Show, {
+		get when() {
+			return field?.().invalid;
+		},
+		get children() {
+			return createComponent(sprawlify.span, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/field/field-helper-text.tsx
+const FieldHelperText = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field().getHelperTextProps(), props);
+	return createComponent(sprawlify.span, mergedProps);
+};
+
+//#endregion
+//#region src/components/field/field-input.tsx
+const FieldInput = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field?.().getInputProps(), props);
+	return createComponent(sprawlify.input, mergedProps);
+};
+
+//#endregion
+//#region src/components/field/field-label.tsx
+const FieldLabel = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field?.().getLabelProps(), props);
+	return createComponent(sprawlify.label, mergedProps);
+};
+
+//#endregion
+//#region src/components/field/field-required-indicator.tsx
+const FieldRequiredIndicator = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field().getRequiredIndicatorProps(), props);
+	return createComponent(Show, {
+		get when() {
+			return field().required;
+		},
+		get fallback() {
+			return props.fallback;
+		},
+		get children() {
+			return createComponent(sprawlify.span, mergeProps$1(mergedProps, { get children() {
+				return props.children ?? "*";
+			} }));
+		}
+	});
+};
+
+//#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 fieldProps = mergeProps({
+		disabled: Boolean(fieldset?.().disabled),
+		required: false,
+		invalid: false,
+		readOnly: false
+	}, props);
+	const [hasErrorText, setHasErrorText] = createSignal(false);
+	const [hasHelperText, setHasHelperText] = createSignal(false);
+	const id = fieldProps.id ?? createUniqueId();
+	const [rootRef, setRootRef] = createSignal(void 0);
+	const rootId = fieldProps.ids?.control ?? `field::${id}`;
+	const errorTextId = fieldProps.ids?.errorText ?? `field::${id}::error-text`;
+	const helperTextId = fieldProps.ids?.helperText ?? `field::${id}::helper-text`;
+	const labelId = fieldProps.ids?.label ?? `field::${id}::label`;
+	onMount(() => {
+		const rootNode = rootRef();
+		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
+		});
+		onCleanup(() => observer.disconnect());
+	});
+	const getRootProps = () => ({
+		...parts.root.attrs,
+		id: rootId,
+		role: "group",
+		"data-disabled": dataAttr(fieldProps.disabled),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-readonly": dataAttr(fieldProps.readOnly)
+	});
+	const getLabelProps = () => ({
+		...parts.label.attrs,
+		id: labelId,
+		"data-disabled": dataAttr(fieldProps.disabled),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-readonly": dataAttr(fieldProps.readOnly),
+		"data-required": dataAttr(fieldProps.required),
+		htmlFor: id
+	});
+	const labelIds = createMemo(() => {
+		const ids = [];
+		if (hasErrorText() && fieldProps.invalid) ids.push(errorTextId);
+		if (hasHelperText()) ids.push(helperTextId);
+		return ids;
+	});
+	const getControlProps = () => ({
+		"aria-describedby": labelIds().join(" ") || void 0,
+		"aria-invalid": ariaAttr(fieldProps.invalid),
+		"data-invalid": dataAttr(fieldProps.invalid),
+		"data-required": dataAttr(fieldProps.required),
+		"data-readonly": dataAttr(fieldProps.readOnly),
+		id,
+		required: fieldProps.required,
+		disabled: fieldProps.disabled,
+		readOnly: fieldProps.readOnly || void 0
+	});
+	const getInputProps = () => ({
+		...getControlProps(),
+		...parts.input.attrs
+	});
+	const getTextareaProps = () => ({
+		...getControlProps(),
+		...parts.textarea.attrs
+	});
+	const getSelectProps = () => ({
+		...getControlProps(),
+		...parts.select.attrs
+	});
+	const getHelperTextProps = () => ({
+		id: helperTextId,
+		...parts.helperText.attrs,
+		"data-disabled": dataAttr(fieldProps.disabled)
+	});
+	const getErrorTextProps = () => ({
+		id: errorTextId,
+		...parts.errorText.attrs,
+		"aria-live": "polite"
+	});
+	const getRequiredIndicatorProps = () => ({
+		"aria-hidden": true,
+		...parts.requiredIndicator.attrs
+	});
+	return createMemo(() => ({
+		ariaDescribedby: labelIds().join(" "),
+		ids: {
+			control: id,
+			label: labelId,
+			errorText: errorTextId,
+			helperText: helperTextId
+		},
+		refs: { rootRef: setRootRef },
+		disabled: fieldProps.disabled,
+		invalid: fieldProps.invalid,
+		readOnly: fieldProps.readOnly,
+		required: fieldProps.required,
+		getLabelProps,
+		getRootProps,
+		getInputProps,
+		getTextareaProps,
+		getSelectProps,
+		getHelperTextProps,
+		getErrorTextProps,
+		getRequiredIndicatorProps
+	}));
+};
+
+//#endregion
+//#region src/components/field/field-root.tsx
+const FieldRoot = (props) => {
+	const [useFieldProps, localProps] = createSplitProps()(props, [
+		"id",
+		"ids",
+		"disabled",
+		"invalid",
+		"readOnly",
+		"required"
+	]);
+	const field = useField(useFieldProps);
+	const mergedProps = mergeProps$2(() => field().getRootProps(), localProps);
+	return createComponent(FieldProvider, {
+		value: field,
+		get children() {
+			return createComponent(sprawlify.div, mergeProps$1(mergedProps, { ref(r$) {
+				var _ref$ = composeRefs(field().refs.rootRef, props.ref);
+				typeof _ref$ === "function" && _ref$(r$);
+			} }));
+		}
+	});
+};
+
+//#endregion
+//#region src/components/field/field-root-provider.tsx
+const FieldRootProvider = (props) => {
+	const [{ value: field }, localProps] = createSplitProps()(props, ["value"]);
+	const mergedProps = mergeProps$2(() => field().getRootProps(), localProps);
+	return createComponent(FieldProvider, {
+		value: field,
+		get children() {
+			return createComponent(sprawlify.div, mergedProps);
+		}
+	});
+};
+
+//#endregion
+//#region src/components/field/field-select.tsx
+const FieldSelect = (props) => {
+	const field = useFieldContext();
+	const mergedProps = mergeProps$2(() => field?.().getSelectProps(), props);
+	return createComponent(sprawlify.select, mergedProps);
+};
+
+//#endregion
+//#region src/components/field/field-textarea.tsx
+const FieldTextarea = (props) => {
+	const field = useFieldContext();
+	let textareaRef;
+	const [autoresizeProps, textareaProps] = splitProps(props, ["autoresize"]);
+	const mergedProps = mergeProps$2(() => field?.().getTextareaProps(), () => ({ style: { resize: autoresizeProps.autoresize ? "none" : void 0 } }), textareaProps);
+	onMount(() => {
+		if (!autoresizeProps.autoresize) return;
+		const cleanup = autoresizeTextarea(textareaRef);
+		onCleanup(() => cleanup?.());
+	});
+	return createComponent(sprawlify.textarea, mergeProps$1(mergedProps, { ref(r$) {
+		var _ref$ = composeRefs((el) => textareaRef = el, props.ref);
+		typeof _ref$ === "function" && _ref$(r$);
+	} }));
+};
+
+//#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 };