@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
218 lines (214 loc) • 9.36 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_children = require('../../utils/children.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_factory$1 = require('../motion/factory.cjs');
const require_portal = require('../portal/portal.cjs');
const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
const require_button = require('../button/button.cjs');
const require_close_button = require('../close-button/close-button.cjs');
const require_fade = require('../fade/fade.cjs');
const require_focus_lock = require('../focus-lock/focus-lock.cjs');
const require_drawer_style = require('./drawer.style.cjs');
const require_slide = require('../slide/slide.cjs');
const require_use_drawer = require('./use-drawer.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);
let react_remove_scroll = require("react-remove-scroll");
react_remove_scroll = require_rolldown_runtime.__toESM(react_remove_scroll);
//#region src/components/drawer/drawer.tsx
const { ComponentContext, PropsContext: DrawerPropsContext, useComponentContext, usePropsContext: useDrawerPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("drawer", require_drawer_style.drawerStyle);
/**
* `Drawer` is a component for a panel that appears from the edge of the screen.
*
* @see https://yamada-ui.com/docs/components/drawer
*/
const DrawerRoot = withProvider(({ allowPinchZoom = false, autoFocus, blockScrollOnMount = true, body, cancel, children, closeOnDrag, dragConstraints, dragElastic, dragOffset, dragVelocity, duration = {
enter: .4,
exit: .3
}, finalFocusRef, footer, header, initialFocusRef, lockFocusAcrossFrames = true, middle, placement: placementProp, restoreFocus, success, title, trigger, withCloseButton = !closeOnDrag, withDragBar = true, withOverlay = true, portalProps, onCancel, onCloseComplete, onMiddle, onSuccess,...props }) => {
const placement = require_hooks_use_value_index.useValue(placementProp);
const [omittedChildren, openTrigger, customOverlay] = require_children.useSplitChildren(children, DrawerOpenTrigger, DrawerOverlay);
const hasChildren = (0, require_utils_index.utils_exports.isArray)(omittedChildren) && !!omittedChildren.length;
const { open, getRootProps,...rest } = require_use_drawer.useDrawer({
closeOnDrag,
dragConstraints,
dragElastic,
dragOffset,
dragVelocity,
placement,
...props
});
const customOpenTrigger = trigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOpenTrigger, { children: trigger }) : null;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ComponentContext, {
value: (0, react.useMemo)(() => ({
duration,
open,
placement,
withCloseButton,
withDragBar,
...rest
}), [
duration,
open,
withDragBar,
placement,
withCloseButton,
rest
]),
children: [openTrigger ?? customOpenTrigger, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.AnimatePresence, {
onExitComplete: onCloseComplete,
children: open ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_portal.Portal, {
...portalProps,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_focus_lock.FocusLock, {
autoFocus,
finalFocusRef,
initialFocusRef,
lockFocusAcrossFrames,
restoreFocus,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_remove_scroll.RemoveScroll, {
allowPinchZoom,
enabled: blockScrollOnMount,
forwardProps: true,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
...getRootProps(),
children: [customOverlay ?? (withOverlay ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerOverlay, {}) : null), hasChildren ? omittedChildren : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ShorthandDrawerContent, {
body,
cancel,
footer,
header,
middle,
success,
title,
onCancel,
onMiddle,
onSuccess
})]
})
})
})
}) : null
})]
});
}, "root", { transferProps: ["placement"] })();
const DrawerOpenTrigger = withContext("button", {
name: "OpenTrigger",
slot: ["trigger", "open"]
})(void 0, (props) => {
const { getOpenTriggerProps } = useComponentContext();
return {
asChild: true,
...getOpenTriggerProps(props)
};
});
const DrawerCloseTrigger = withContext("button", {
name: "CloseTrigger",
slot: ["trigger", "close"]
})(void 0, (props) => {
const { getCloseTriggerProps } = useComponentContext();
return {
asChild: true,
...getCloseTriggerProps(props)
};
});
const DrawerCloseButton = withContext(require_close_button.CloseButton, "closeButton")(void 0, (props) => {
const { getCloseButtonProps } = useComponentContext();
return { ...getCloseButtonProps(props) };
});
const DrawerOverlay = withContext((props) => {
const { duration, getOverlayProps } = useComponentContext();
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory$1.motion.div, {
animate: "enter",
custom: { duration },
exit: "exit",
initial: "exit",
variants: require_fade.fadeVariants,
...(0, require_utils_index.utils_exports.cast)(getOverlayProps((0, require_utils_index.utils_exports.cast)(props)))
});
}, "overlay")();
const DrawerContent = withContext(({ children,...rest }) => {
const { closeOnDrag, duration, open, placement, withCloseButton, withDragBar, getContentProps } = useComponentContext();
const [omittedChildren, customCloseButton, customDragBar] = require_children.useSplitChildren(children, DrawerCloseButton, DrawerDragBar);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_slide.Slide, {
as: "section",
duration,
open,
placement,
...getContentProps(rest),
children: [
customCloseButton ?? (withCloseButton ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerCloseButton, {}) : null),
customDragBar ?? (withDragBar && closeOnDrag ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerDragBar, {}) : null),
omittedChildren
]
});
}, "content")();
const ShorthandDrawerContent = ({ body, cancel, footer, header, middle, success, title, onCancel, onMiddle, onSuccess }) => {
const { onClose } = useComponentContext();
const customHeader = require_children.wrapOrPassProps(DrawerHeader, header);
const customTitle = require_children.wrapOrPassProps(DrawerTitle, title);
const customBody = require_children.wrapOrPassProps(DrawerBody, body);
const customFooter = require_children.wrapOrPassProps(DrawerFooter, footer);
const customCancel = require_children.wrapOrPassProps(require_button.Button, cancel, {
colorScheme: "mono",
variant: "ghost",
onClick: () => onCancel ? onCancel(onClose) : onClose()
});
const customMiddle = require_children.wrapOrPassProps(require_button.Button, middle, {
colorScheme: "secondary",
onClick: () => onMiddle ? onMiddle(onClose) : onClose()
});
const customSuccess = require_children.wrapOrPassProps(require_button.Button, success, {
colorScheme: "primary",
onClick: () => onSuccess ? onSuccess(onClose) : onClose()
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DrawerContent, { children: [
customHeader ?? (customTitle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DrawerHeader, { children: customTitle }) : null),
customBody,
customFooter ?? (customCancel || customMiddle || customSuccess ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(DrawerFooter, { children: [
customCancel,
customMiddle,
customSuccess
] }) : null)
] });
};
const DrawerDragBar = withContext("div", "dragBar")(void 0, (props) => {
const { getDragBarProps } = useComponentContext();
return { ...getDragBarProps(props) };
});
const DrawerHeader = withContext("header", "header")(void 0, (props) => {
const { getHeaderProps } = useComponentContext();
return { ...getHeaderProps(props) };
});
const DrawerTitle = withContext("h2", "title")(void 0, (props) => {
const { getTitleProps } = useComponentContext();
return { ...getTitleProps(props) };
});
const DrawerBody = withContext("div", "body")(void 0, (props) => {
const { getBodyProps } = useComponentContext();
return { ...getBodyProps(props) };
});
const DrawerFooter = withContext("footer", "footer")(void 0, (props) => {
const { getFooterProps } = useComponentContext();
return { ...getFooterProps(props) };
});
//#endregion
exports.DrawerBody = DrawerBody;
exports.DrawerCloseButton = DrawerCloseButton;
exports.DrawerCloseTrigger = DrawerCloseTrigger;
exports.DrawerContent = DrawerContent;
exports.DrawerDragBar = DrawerDragBar;
exports.DrawerFooter = DrawerFooter;
exports.DrawerHeader = DrawerHeader;
exports.DrawerOpenTrigger = DrawerOpenTrigger;
exports.DrawerOverlay = DrawerOverlay;
exports.DrawerPropsContext = DrawerPropsContext;
exports.DrawerRoot = DrawerRoot;
exports.DrawerTitle = DrawerTitle;
exports.useDrawerPropsContext = useDrawerPropsContext;
//# sourceMappingURL=drawer.cjs.map