@yamada-ui/react/dist/cjs/components/editable/editable.cjs

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

"use client";


const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_use_input_border = require('../input/use-input-border.cjs');
const require_editable_style = require('./editable.style.cjs');
const require_use_editable = require('./use-editable.cjs');
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);

//#region src/components/editable/editable.tsx
const { PropsContext: EditablePropsContext, usePropsContext: useEditablePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("editable", require_editable_style.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 } = require_use_editable.useEditable(props);
	const varProps = require_use_input_border.useInputBorder({
		errorBorderColor,
		focusBorderColor
	});
	const cloneChildren = (0, require_utils_index.utils_exports.runIfFn)(children, {
		editing,
		onCancel,
		onEdit,
		onSubmit
	});
	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_editable.EditableContext, {
		value: {
			editing,
			...rest
		},
		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
			...getRootProps(),
			...varProps,
			children: cloneChildren
		})
	});
})();
const EditablePreview = withContext("span", "preview")(void 0, (props) => {
	const { getPreviewProps } = require_use_editable.useEditableContext();
	return { ...getPreviewProps(props) };
});
const EditableInput = withContext("input", "input")(void 0, (props) => {
	const { getInputProps } = require_use_editable.useEditableContext();
	return { ...getInputProps(props) };
});
const EditableTextarea = withContext("textarea", "textarea")(void 0, (props) => {
	const { getTextareaProps } = require_use_editable.useEditableContext();
	return { ...getTextareaProps(props) };
});
const EditableControl = withContext("div", "control")(void 0, (props) => {
	const { getControlProps } = require_use_editable.useEditableContext();
	return { ...getControlProps(props) };
});
const EditableEditTrigger = withContext("button", {
	name: "EditTrigger",
	slot: ["trigger", "edit"]
})(void 0, (props) => {
	const { getEditProps } = require_use_editable.useEditableContext();
	return {
		asChild: true,
		...getEditProps(props)
	};
});
const EditableCancelTrigger = withContext("button", {
	name: "CancelTrigger",
	slot: ["trigger", "cancel"]
})(void 0, (props) => {
	const { getCancelProps } = require_use_editable.useEditableContext();
	return {
		asChild: true,
		...getCancelProps(props)
	};
});
const EditableSubmitTrigger = withContext("button", {
	name: "SubmitTrigger",
	slot: ["trigger", "submit"]
})(void 0, (props) => {
	const { getSubmitProps } = require_use_editable.useEditableContext();
	return {
		asChild: true,
		...getSubmitProps(props)
	};
});

//#endregion
exports.EditableCancelTrigger = EditableCancelTrigger;
exports.EditableControl = EditableControl;
exports.EditableEditTrigger = EditableEditTrigger;
exports.EditableInput = EditableInput;
exports.EditablePreview = EditablePreview;
exports.EditablePropsContext = EditablePropsContext;
exports.EditableRoot = EditableRoot;
exports.EditableSubmitTrigger = EditableSubmitTrigger;
exports.EditableTextarea = EditableTextarea;
exports.useEditablePropsContext = useEditablePropsContext;
//# sourceMappingURL=editable.cjs.map