@yamada-ui/react/dist/esm/components/editable/editable.js

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

"use client";


import { utils_exports } from "../../utils/index.js";
import { styled } from "../../core/system/factory.js";
import { createSlotComponent } from "../../core/components/create-component.js";
import { useInputBorder } from "../input/use-input-border.js";
import { editableStyle } from "./editable.style.js";
import { EditableContext, useEditable, useEditableContext } from "./use-editable.js";
import { jsx } from "react/jsx-runtime";

//#region src/components/editable/editable.tsx
const { PropsContext: EditablePropsContext, usePropsContext: useEditablePropsContext, withContext, withProvider } = createSlotComponent("editable", editableStyle);
/**
* `Editable` is a component used to obtain inline editable text input.
*
* @see https://yamada-ui.com/docs/components/editable
*/
const EditableRoot = withProvider(({ children, errorBorderColor, focusBorderColor,...props }) => {
	const { editing, value: _value, getRootProps, onCancel, onEdit, onSubmit,...rest } = useEditable(props);
	const varProps = useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	const cloneChildren = (0, utils_exports.runIfFn)(children, {
		editing,
		onCancel,
		onEdit,
		onSubmit
	});
	return /* @__PURE__ */ jsx(EditableContext, {
		value: {
			editing,
			...rest
		},
		children: /* @__PURE__ */ jsx(styled.div, {
			...getRootProps(),
			...varProps,
			children: cloneChildren
		})
	});
})();
const EditablePreview = withContext("span", "preview")(void 0, (props) => {
	const { getPreviewProps } = useEditableContext();
	return { ...getPreviewProps(props) };
});
const EditableInput = withContext("input", "input")(void 0, (props) => {
	const { getInputProps } = useEditableContext();
	return { ...getInputProps(props) };
});
const EditableTextarea = withContext("textarea", "textarea")(void 0, (props) => {
	const { getTextareaProps } = useEditableContext();
	return { ...getTextareaProps(props) };
});
const EditableControl = withContext("div", "control")(void 0, (props) => {
	const { getControlProps } = useEditableContext();
	return { ...getControlProps(props) };
});
const EditableEditTrigger = withContext("button", {
	name: "EditTrigger",
	slot: ["trigger", "edit"]
})(void 0, (props) => {
	const { getEditProps } = useEditableContext();
	return {
		asChild: true,
		...getEditProps(props)
	};
});
const EditableCancelTrigger = withContext("button", {
	name: "CancelTrigger",
	slot: ["trigger", "cancel"]
})(void 0, (props) => {
	const { getCancelProps } = useEditableContext();
	return {
		asChild: true,
		...getCancelProps(props)
	};
});
const EditableSubmitTrigger = withContext("button", {
	name: "SubmitTrigger",
	slot: ["trigger", "submit"]
})(void 0, (props) => {
	const { getSubmitProps } = useEditableContext();
	return {
		asChild: true,
		...getSubmitProps(props)
	};
});

//#endregion
export { EditableCancelTrigger, EditableControl, EditableEditTrigger, EditableInput, EditablePreview, EditablePropsContext, EditableRoot, EditableSubmitTrigger, EditableTextarea, useEditablePropsContext };
//# sourceMappingURL=editable.js.map