@wirekyt/react 0.0.1 → 0.0.2

package/dist/editable.js

@@ -0,0 +1,202 @@
+import { t as __exportAll } from "./rolldown-runtime-D7D4PA-g.js";
+import { c as createSplitProps, u as createContext$1 } from "./utils-CqLmqrgj.js";
+import { n as useEnvironmentContext } from "./environment-BTgKwk5E.js";
+import { a as useMachine, i as normalizeProps, t as mergeProps } from "./core-CEYOEcVI.js";
+import { n as wire } from "./factory-Nm__-4xn.js";
+import { a as useLocaleContext } from "./providers-FEHnDTvb.js";
+import { h as useFieldContext } from "./field-Cy1E02DH.js";
+import { forwardRef, useId } from "react";
+import { jsx } from "react/jsx-runtime";
+import * as editable from "@wirekyt/dom/machines/editable";
+import { anatomy as editableAnatomy } from "@wirekyt/dom/machines/editable";
+//#region src/components/editable/use-context.ts
+const [EditableProvider, useEditableContext] = createContext$1({
+	name: "EditableContext",
+	hookName: "useEditableContext",
+	providerName: "<EditableProvider />"
+});
+//#endregion
+//#region src/components/editable/area.tsx
+const EditableArea = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useEditableContext().getAreaProps(), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+EditableArea.displayName = "EditableArea";
+//#endregion
+//#region src/components/editable/cancel-trigger.tsx
+const EditableCancelTrigger = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useEditableContext().getCancelTriggerProps(), props);
+	return /* @__PURE__ */ jsx(wire.button, {
+		...mergedProps,
+		ref
+	});
+});
+EditableCancelTrigger.displayName = "EditableCancelTrigger";
+//#endregion
+//#region src/components/editable/context.tsx
+const EditableContext = (props) => props.children(useEditableContext());
+//#endregion
+//#region src/components/editable/control.tsx
+const EditableControl = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useEditableContext().getControlProps(), props);
+	return /* @__PURE__ */ jsx(wire.div, {
+		...mergedProps,
+		ref
+	});
+});
+EditableControl.displayName = "EditableControl";
+//#endregion
+//#region src/components/editable/edit-trigger.tsx
+const EditableEditTrigger = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useEditableContext().getEditTriggerProps(), props);
+	return /* @__PURE__ */ jsx(wire.button, {
+		...mergedProps,
+		ref
+	});
+});
+EditableEditTrigger.displayName = "EditableEditTrigger";
+//#endregion
+//#region src/components/editable/input.tsx
+const EditableInput = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useEditableContext().getInputProps(), props);
+	const field = useFieldContext();
+	return /* @__PURE__ */ jsx(wire.input, {
+		"aria-describedby": field?.ariaDescribedby,
+		...mergedProps,
+		ref
+	});
+});
+EditableInput.displayName = "EditableInput";
+//#endregion
+//#region src/components/editable/label.tsx
+const EditableLabel = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useEditableContext().getLabelProps(), props);
+	return /* @__PURE__ */ jsx(wire.label, {
+		...mergedProps,
+		ref
+	});
+});
+EditableLabel.displayName = "EditableLabel";
+//#endregion
+//#region src/components/editable/preview.tsx
+const EditablePreview = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useEditableContext().getPreviewProps(), props);
+	return /* @__PURE__ */ jsx(wire.span, {
+		...mergedProps,
+		ref
+	});
+});
+EditablePreview.displayName = "EditablePreview";
+//#endregion
+//#region src/components/editable/use-editable.ts
+const useEditable = (props) => {
+	const id = useId();
+	const { getRootNode } = useEnvironmentContext();
+	const { dir } = useLocaleContext();
+	const field = useFieldContext();
+	const machineProps = {
+		id,
+		ids: {
+			label: field?.ids.label,
+			input: field?.ids.control
+		},
+		dir,
+		disabled: field?.disabled,
+		invalid: field?.invalid,
+		readOnly: field?.readOnly,
+		required: field?.required,
+		getRootNode,
+		...props
+	};
+	const service = useMachine(editable.machine, machineProps);
+	return editable.connect(service, normalizeProps);
+};
+//#endregion
+//#region src/components/editable/root.tsx
+const splitRootProps = createSplitProps();
+const EditableRoot = forwardRef((props, ref) => {
+	const [useEditableProps, localProps] = splitRootProps(props, [
+		"activationMode",
+		"autoResize",
+		"defaultEdit",
+		"defaultValue",
+		"disabled",
+		"edit",
+		"finalFocusEl",
+		"form",
+		"id",
+		"ids",
+		"invalid",
+		"maxLength",
+		"name",
+		"onEditChange",
+		"onFocusOutside",
+		"onInteractOutside",
+		"onPointerDownOutside",
+		"onValueChange",
+		"onValueCommit",
+		"onValueRevert",
+		"placeholder",
+		"readOnly",
+		"required",
+		"selectOnFocus",
+		"submitMode",
+		"translations",
+		"value"
+	]);
+	const editable = useEditable(useEditableProps);
+	const mergedProps = mergeProps(editable.getRootProps(), localProps);
+	return /* @__PURE__ */ jsx(EditableProvider, {
+		value: editable,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+EditableRoot.displayName = "EditableRoot";
+//#endregion
+//#region src/components/editable/root-provider.tsx
+const splitRootProviderProps = createSplitProps();
+const EditableRootProvider = forwardRef((props, ref) => {
+	const [{ value: editable }, localProps] = splitRootProviderProps(props, ["value"]);
+	const mergedProps = mergeProps(editable.getRootProps(), localProps);
+	return /* @__PURE__ */ jsx(EditableProvider, {
+		value: editable,
+		children: /* @__PURE__ */ jsx(wire.div, {
+			...mergedProps,
+			ref
+		})
+	});
+});
+EditableRootProvider.displayName = "EditableRootProvider";
+//#endregion
+//#region src/components/editable/submit-trigger.tsx
+const EditableSubmitTrigger = forwardRef((props, ref) => {
+	const mergedProps = mergeProps(useEditableContext().getSubmitTriggerProps(), props);
+	return /* @__PURE__ */ jsx(wire.button, {
+		...mergedProps,
+		ref
+	});
+});
+EditableSubmitTrigger.displayName = "EditableSubmitTrigger";
+//#endregion
+//#region src/components/editable/editable.ts
+var editable_exports = /* @__PURE__ */ __exportAll({
+	Area: () => EditableArea,
+	CancelTrigger: () => EditableCancelTrigger,
+	Context: () => EditableContext,
+	Control: () => EditableControl,
+	EditTrigger: () => EditableEditTrigger,
+	Input: () => EditableInput,
+	Label: () => EditableLabel,
+	Preview: () => EditablePreview,
+	Root: () => EditableRoot,
+	RootProvider: () => EditableRootProvider,
+	SubmitTrigger: () => EditableSubmitTrigger
+});
+//#endregion
+export { editable_exports as Editable, EditableArea, EditableCancelTrigger, EditableContext, EditableControl, EditableEditTrigger, EditableInput, EditableLabel, EditablePreview, EditableRoot, EditableRootProvider, EditableSubmitTrigger, editableAnatomy, useEditable, useEditableContext };

package/dist/environment-B6IaCAuQ.cjs

@@ -0,0 +1,59 @@
+const require_utils = require("./utils-Cfwm9WW1.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _wirekyt_dom_dom_query = require("@wirekyt/dom/dom-query");
+//#region src/utils/run-if-fn.ts
+const isFunction = (value) => typeof value === "function";
+const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+//#endregion
+//#region src/providers/environment/use-context.ts
+const [EnvironmentContextProvider, useEnvironmentContext] = require_utils.createContext({
+	name: "EnvironmentContext",
+	hookName: "useEnvironmentContext",
+	providerName: "<EnvironmentProvider />",
+	strict: false,
+	defaultValue: {
+		getRootNode: () => document,
+		getDocument: () => document,
+		getWindow: () => window
+	}
+});
+//#endregion
+//#region src/providers/environment/provider.tsx
+const EnvironmentProvider = (props) => {
+	const { value, children } = props;
+	const [spanRef, setSpanRef] = (0, react.useState)();
+	const getRootNode = (0, react.useMemo)(() => {
+		return () => runIfFn(value) ?? spanRef?.getRootNode() ?? document;
+	}, [value, spanRef]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EnvironmentContextProvider, {
+		value: (0, react.useMemo)(() => ({
+			getRootNode,
+			getWindow: () => (0, _wirekyt_dom_dom_query.getWindow)(getRootNode()),
+			getDocument: () => (0, _wirekyt_dom_dom_query.getDocument)(getRootNode())
+		}), [getRootNode]),
+		children: [children, !value && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			hidden: true,
+			ref: setSpanRef
+		})]
+	});
+};
+//#endregion
+Object.defineProperty(exports, "EnvironmentProvider", {
+	enumerable: true,
+	get: function() {
+		return EnvironmentProvider;
+	}
+});
+Object.defineProperty(exports, "runIfFn", {
+	enumerable: true,
+	get: function() {
+		return runIfFn;
+	}
+});
+Object.defineProperty(exports, "useEnvironmentContext", {
+	enumerable: true,
+	get: function() {
+		return useEnvironmentContext;
+	}
+});

package/dist/environment-BTgKwk5E.js

@@ -0,0 +1,42 @@
+import { u as createContext$1 } from "./utils-CqLmqrgj.js";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getDocument, getWindow } from "@wirekyt/dom/dom-query";
+//#region src/utils/run-if-fn.ts
+const isFunction = (value) => typeof value === "function";
+const runIfFn = (valueOrFn, ...args) => isFunction(valueOrFn) ? valueOrFn(...args) : valueOrFn;
+//#endregion
+//#region src/providers/environment/use-context.ts
+const [EnvironmentContextProvider, useEnvironmentContext] = createContext$1({
+	name: "EnvironmentContext",
+	hookName: "useEnvironmentContext",
+	providerName: "<EnvironmentProvider />",
+	strict: false,
+	defaultValue: {
+		getRootNode: () => document,
+		getDocument: () => document,
+		getWindow: () => window
+	}
+});
+//#endregion
+//#region src/providers/environment/provider.tsx
+const EnvironmentProvider = (props) => {
+	const { value, children } = props;
+	const [spanRef, setSpanRef] = useState();
+	const getRootNode = useMemo(() => {
+		return () => runIfFn(value) ?? spanRef?.getRootNode() ?? document;
+	}, [value, spanRef]);
+	return /* @__PURE__ */ jsxs(EnvironmentContextProvider, {
+		value: useMemo(() => ({
+			getRootNode,
+			getWindow: () => getWindow(getRootNode()),
+			getDocument: () => getDocument(getRootNode())
+		}), [getRootNode]),
+		children: [children, !value && /* @__PURE__ */ jsx("span", {
+			hidden: true,
+			ref: setSpanRef
+		})]
+	});
+};
+//#endregion
+export { useEnvironmentContext as n, runIfFn as r, EnvironmentProvider as t };

package/dist/factory--dkoVnFK.d.cts

@@ -0,0 +1,14 @@
+import React, { ComponentPropsWithoutRef, JSX } from "react";
+//#region src/components/factory.d.ts
+interface PolymorphicProps {
+  asChild?: boolean | undefined;
+}
+type JsxElements = { [E in keyof JSX.IntrinsicElements]: WireForwardRefComponent<E>; };
+type WireForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<WirePropsWithRef<E>>;
+type WirePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & PolymorphicProps;
+type HTMLProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T>;
+type HTMLWireProps<T extends keyof JSX.IntrinsicElements> = HTMLProps<T> & PolymorphicProps;
+declare const jsxFactory: () => JsxElements;
+declare const wire: JsxElements;
+//#endregion
+export { wire as a, jsxFactory as i, HTMLWireProps as n, PolymorphicProps as r, HTMLProps as t };

package/dist/factory--dkoVnFK.d.ts

@@ -0,0 +1,14 @@
+import React, { ComponentPropsWithoutRef, JSX } from "react";
+//#region src/components/factory.d.ts
+interface PolymorphicProps {
+  asChild?: boolean | undefined;
+}
+type JsxElements = { [E in keyof JSX.IntrinsicElements]: WireForwardRefComponent<E>; };
+type WireForwardRefComponent<E extends React.ElementType> = React.ForwardRefExoticComponent<WirePropsWithRef<E>>;
+type WirePropsWithRef<E extends React.ElementType> = React.ComponentPropsWithRef<E> & PolymorphicProps;
+type HTMLProps<T extends keyof JSX.IntrinsicElements> = ComponentPropsWithoutRef<T>;
+type HTMLWireProps<T extends keyof JSX.IntrinsicElements> = HTMLProps<T> & PolymorphicProps;
+declare const jsxFactory: () => JsxElements;
+declare const wire: JsxElements;
+//#endregion
+export { wire as a, jsxFactory as i, HTMLWireProps as n, PolymorphicProps as r, HTMLProps as t };

package/dist/factory-CFFufs5e.cjs

@@ -0,0 +1,59 @@
+const require_utils = require("./utils-Cfwm9WW1.cjs");
+let react = require("react");
+let _wirekyt_dom = require("@wirekyt/dom");
+//#region src/components/factory.ts
+function getRef(element) {
+	let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+	let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.ref;
+	getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+	mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.props.ref;
+	return element.props.ref || element.ref;
+}
+const withAsChild = (Component) => {
+	const Comp = (0, react.memo)((0, react.forwardRef)((props, ref) => {
+		const { asChild, children, ...restProps } = props;
+		const onlyChild = asChild && (0, react.isValidElement)(children) ? react.Children.only(children) : void 0;
+		const childRef = onlyChild ? getRef(onlyChild) : void 0;
+		const composedRef = require_utils.useComposedRefs(ref, childRef);
+		if (!asChild) return (0, react.createElement)(Component, {
+			...restProps,
+			ref
+		}, children);
+		if (!onlyChild) return null;
+		return (0, react.cloneElement)(onlyChild, {
+			...(0, _wirekyt_dom.mergeProps)(restProps, onlyChild.props),
+			ref: ref ? composedRef : childRef
+		});
+	}));
+	Comp.displayName = Component.displayName || Component.name;
+	return Comp;
+};
+const jsxFactory = () => {
+	const cache = /* @__PURE__ */ new Map();
+	return new Proxy(withAsChild, {
+		apply(_target, _thisArg, argArray) {
+			return withAsChild(argArray[0]);
+		},
+		get(_, element) {
+			const asElement = element;
+			if (!cache.has(asElement)) cache.set(asElement, withAsChild(asElement));
+			return cache.get(asElement);
+		}
+	});
+};
+const wire = jsxFactory();
+//#endregion
+Object.defineProperty(exports, "jsxFactory", {
+	enumerable: true,
+	get: function() {
+		return jsxFactory;
+	}
+});
+Object.defineProperty(exports, "wire", {
+	enumerable: true,
+	get: function() {
+		return wire;
+	}
+});

package/dist/factory-Nm__-4xn.js

@@ -0,0 +1,48 @@
+import { l as useComposedRefs } from "./utils-CqLmqrgj.js";
+import { Children, cloneElement, createElement, forwardRef, isValidElement, memo } from "react";
+import { mergeProps } from "@wirekyt/dom";
+//#region src/components/factory.ts
+function getRef(element) {
+	let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+	let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.ref;
+	getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+	mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+	if (mayWarn) return element.props.ref;
+	return element.props.ref || element.ref;
+}
+const withAsChild = (Component) => {
+	const Comp = memo(forwardRef((props, ref) => {
+		const { asChild, children, ...restProps } = props;
+		const onlyChild = asChild && isValidElement(children) ? Children.only(children) : void 0;
+		const childRef = onlyChild ? getRef(onlyChild) : void 0;
+		const composedRef = useComposedRefs(ref, childRef);
+		if (!asChild) return createElement(Component, {
+			...restProps,
+			ref
+		}, children);
+		if (!onlyChild) return null;
+		return cloneElement(onlyChild, {
+			...mergeProps(restProps, onlyChild.props),
+			ref: ref ? composedRef : childRef
+		});
+	}));
+	Comp.displayName = Component.displayName || Component.name;
+	return Comp;
+};
+const jsxFactory = () => {
+	const cache = /* @__PURE__ */ new Map();
+	return new Proxy(withAsChild, {
+		apply(_target, _thisArg, argArray) {
+			return withAsChild(argArray[0]);
+		},
+		get(_, element) {
+			const asElement = element;
+			if (!cache.has(asElement)) cache.set(asElement, withAsChild(asElement));
+			return cache.get(asElement);
+		}
+	});
+};
+const wire = jsxFactory();
+//#endregion
+export { wire as n, jsxFactory as t };