@nex-ui/react/dist/cjs/components/drawer/DrawerContent.cjs

🎉 A beautiful, modern, and reliable React component library.

"use client";
'use strict';

var jsxRuntime = require('react/jsx-runtime');
var m = require('motion/react-m');
var react = require('react');
var icons = require('@nex-ui/icons');
var DrawerRoot = require('./DrawerRoot.cjs');
var DrawerClose = require('./DrawerClose.cjs');
var useDefaultProps = require('../utils/useDefaultProps.cjs');
var useStyles = require('../utils/useStyles.cjs');
var useSlotClasses = require('../utils/useSlotClasses.cjs');
var useSlot = require('../utils/useSlot.cjs');
var ModalPanel = require('../modal/ModalPanel.cjs');
var ModalContent = require('../modal/ModalContent.cjs');
var ButtonBase = require('../buttonBase/ButtonBase.cjs');
var drawer = require('../../theme/recipes/drawer.cjs');
var Ripple = require('../utils/ripple/Ripple.cjs');

function _interopNamespace(e) {
  if (e && e.__esModule) return e;
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var m__namespace = /*#__PURE__*/_interopNamespace(m);

const slots = [
    'root',
    'paper',
    'closeButton'
];
const useSlotAriaProps = (ownerState)=>{
    const { 'aria-labelledby': defaultAriaLabelledBy, 'aria-describedby': defaultAriaDescribedBy } = ownerState;
    const { paper = {}, closeButton = {} } = ownerState.slotProps ?? {};
    const { 'aria-label': closeButtonAriaLabel = 'Close drawer' } = closeButton;
    const { role = 'dialog', 'aria-modal': ariaModal = true, 'aria-labelledby': ariaLabelledBy = defaultAriaLabelledBy, 'aria-describedby': ariaDescribedBy = defaultAriaDescribedBy } = paper;
    return react.useMemo(()=>({
            paper: {
                role,
                'aria-modal': ariaModal,
                'aria-labelledby': ariaLabelledBy,
                'aria-describedby': ariaDescribedBy
            },
            closeButton: {
                'aria-label': closeButtonAriaLabel
            }
        }), [
        role,
        ariaModal,
        ariaLabelledBy,
        ariaDescribedBy,
        closeButtonAriaLabel
    ]);
};
const DrawerContent = (inProps)=>{
    const props = useDefaultProps.useDefaultProps({
        name: 'DrawerContent',
        props: inProps
    });
    const { classNames, children, slotProps, closeIcon, motionProps: motionPropsProp, placement = 'right', hideCloseButton = false, size = 'md', ...remainingProps } = props;
    const ownerState = {
        ...props,
        placement,
        size,
        closeIcon,
        hideCloseButton
    };
    const styles = useStyles.useStyles({
        ownerState,
        name: 'DrawerContent',
        recipe: drawer.drawerContentRecipe
    });
    const slotAriaProps = useSlotAriaProps(ownerState);
    const slotClasses = useSlotClasses.useSlotClasses({
        name: 'DrawerContent',
        slots,
        classNames
    });
    const motionProps = react.useMemo(()=>{
        const mProps = typeof motionPropsProp === 'function' ? motionPropsProp(placement) : motionPropsProp;
        let variants;
        switch(placement){
            case 'left':
                variants = {
                    visible: {
                        transform: 'translateX(0)'
                    },
                    hidden: {
                        transform: 'translateX(-100%)'
                    }
                };
                break;
            case 'right':
                variants = {
                    visible: {
                        transform: 'translateX(0)'
                    },
                    hidden: {
                        transform: 'translateX(100%)'
                    }
                };
                break;
            case 'top':
                variants = {
                    visible: {
                        transform: 'translateY(0)'
                    },
                    hidden: {
                        transform: 'translateY(-100%)'
                    }
                };
                break;
            case 'bottom':
                variants = {
                    visible: {
                        transform: 'translateY(0)'
                    },
                    hidden: {
                        transform: 'translateY(100%)'
                    }
                };
                break;
            // istanbul ignore next
            default:
                variants = {};
        }
        return {
            variants,
            ...mProps
        };
    }, [
        motionPropsProp,
        placement
    ]);
    const [DrawerContentRoot, getDrawerContentRootProps] = useSlot.useSlot({
        elementType: ModalPanel.ModalPanel,
        style: styles.root,
        externalForwardedProps: remainingProps,
        shouldForwardComponent: false,
        classNames: slotClasses.root,
        dataAttrs: {
            size,
            placement,
            hideCloseButton
        }
    });
    const [DrawerContentPaper, getDrawerContentPaperProps] = useSlot.useSlot({
        elementType: ModalContent.ModalContent,
        style: styles.paper,
        classNames: slotClasses.paper,
        externalSlotProps: slotProps?.paper,
        shouldForwardComponent: false,
        a11y: slotAriaProps.paper,
        additionalProps: {
            as: m__namespace.div,
            ...motionProps
        }
    });
    const [DrawerContentCloseButton, getDrawerContentCloseButtonProps] = useSlot.useSlot({
        elementType: ButtonBase.ButtonBase,
        externalSlotProps: slotProps?.closeButton,
        style: styles.closeButton,
        classNames: slotClasses.closeButton,
        shouldForwardComponent: false,
        a11y: slotAriaProps.closeButton
    });
    return /*#__PURE__*/ jsxRuntime.jsx(DrawerRoot.DrawerRoot, {
        children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContentRoot, {
            ...getDrawerContentRootProps(),
            children: /*#__PURE__*/ jsxRuntime.jsxs(DrawerContentPaper, {
                ...getDrawerContentPaperProps(),
                children: [
                    !hideCloseButton && /*#__PURE__*/ jsxRuntime.jsx(DrawerClose.DrawerClose, {
                        children: /*#__PURE__*/ jsxRuntime.jsx(Ripple.Ripple, {
                            children: /*#__PURE__*/ jsxRuntime.jsx(DrawerContentCloseButton, {
                                ...getDrawerContentCloseButtonProps(),
                                children: closeIcon ?? /*#__PURE__*/ jsxRuntime.jsx(icons.CloseOutlined, {})
                            })
                        })
                    }),
                    children
                ]
            })
        })
    });
};
DrawerContent.displayName = 'DrawerContent';

exports.DrawerContent = DrawerContent;