@coreui/react 5.0.0-alpha.3 → 5.0.0-beta.1

package/dist/esm/components/modal/CModal.d.ts

@@ -0,0 +1,76 @@
+import React, { HTMLAttributes } from 'react';
+export interface CModalProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Align the modal in the center or top of the screen.
+     */
+    alignment?: 'top' | 'center';
+    /**
+     * Apply a backdrop on body while modal is open.
+     */
+    backdrop?: boolean | 'static';
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+    /**
+     * @ignore
+     */
+    duration?: number;
+    /**
+     * Puts the focus on the modal when shown.
+     *
+     * @since v4.10.0
+     */
+    focus?: boolean;
+    /**
+     * Set modal to covers the entire user viewport.
+     */
+    fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * Closes the modal when escape key is pressed.
+     */
+    keyboard?: boolean;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClose?: () => void;
+    /**
+     * Callback fired when the component requests to be closed.
+     */
+    onClosePrevented?: () => void;
+    /**
+     * Callback fired when the modal is shown, its backdrop is static and a click outside the modal or an escape key press is performed with the keyboard option set to false.
+     */
+    onShow?: () => void;
+    /**
+     * Generates modal using createPortal.
+     */
+    portal?: boolean;
+    /**
+     * Create a scrollable modal that allows scrolling the modal body.
+     */
+    scrollable?: boolean;
+    /**
+     * Size the component small, large, or extra large.
+     */
+    size?: 'sm' | 'lg' | 'xl';
+    /**
+     * Remove animation to create modal that simply appear rather than fade in to view.
+     */
+    transition?: boolean;
+    /**
+     * By default the component is unmounted after close animation, if you want to keep the component mounted set this property to false.
+     */
+    unmountOnClose?: boolean;
+    /**
+     * Toggle the visibility of modal component.
+     */
+    visible?: boolean;
+}
+interface ModalContextProps {
+    visible?: boolean;
+    setVisible: React.Dispatch<React.SetStateAction<boolean | undefined>>;
+}
+export declare const CModalContext: React.Context<ModalContextProps>;
+export declare const CModal: React.ForwardRefExoticComponent<CModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/dist/esm/components/modal/CModal.js

@@ -0,0 +1,134 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { createContext, forwardRef, useRef, useState, useEffect, useLayoutEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+import { CBackdrop } from '../backdrop/CBackdrop.js';
+import { CConditionalPortal } from '../conditional-portal/CConditionalPortal.js';
+import { CModalContent } from './CModalContent.js';
+import { CModalDialog } from './CModalDialog.js';
+import { useForkedRef } from '../../hooks/useForkedRef.js';
+import '@popperjs/core';
+import Transition from '../../node_modules/react-transition-group/esm/Transition.js';
+
+var CModalContext = createContext({});
+var CModal = forwardRef(function (_a, ref) {
+    var children = _a.children, alignment = _a.alignment, _b = _a.backdrop, backdrop = _b === void 0 ? true : _b, className = _a.className, _c = _a.duration, duration = _c === void 0 ? 150 : _c, _d = _a.focus, focus = _d === void 0 ? true : _d, fullscreen = _a.fullscreen, _e = _a.keyboard, keyboard = _e === void 0 ? true : _e, onClose = _a.onClose, onClosePrevented = _a.onClosePrevented, onShow = _a.onShow, _f = _a.portal, portal = _f === void 0 ? true : _f, scrollable = _a.scrollable, size = _a.size, _g = _a.transition, transition = _g === void 0 ? true : _g, _h = _a.unmountOnClose, unmountOnClose = _h === void 0 ? true : _h, visible = _a.visible, rest = __rest(_a, ["children", "alignment", "backdrop", "className", "duration", "focus", "fullscreen", "keyboard", "onClose", "onClosePrevented", "onShow", "portal", "scrollable", "size", "transition", "unmountOnClose", "visible"]);
+    var activeElementRef = useRef(null);
+    var modalRef = useRef(null);
+    var modalContentRef = useRef(null);
+    var forkedRef = useForkedRef(ref, modalRef);
+    var _j = useState(visible), _visible = _j[0], setVisible = _j[1];
+    var _k = useState(false), staticBackdrop = _k[0], setStaticBackdrop = _k[1];
+    var contextValues = {
+        visible: _visible,
+        setVisible: setVisible,
+    };
+    useEffect(function () {
+        setVisible(visible);
+    }, [visible]);
+    useEffect(function () {
+        var _a;
+        if (_visible) {
+            activeElementRef.current = document.activeElement;
+            document.addEventListener('mouseup', handleClickOutside);
+            document.addEventListener('keydown', handleKeyDown);
+        }
+        else {
+            (_a = activeElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        return function () {
+            document.removeEventListener('mouseup', handleClickOutside);
+            document.removeEventListener('keydown', handleKeyDown);
+        };
+    }, [_visible]);
+    var handleDismiss = function () {
+        if (backdrop === 'static') {
+            return setStaticBackdrop(true);
+        }
+        setVisible(false);
+        return onClose && onClose();
+    };
+    useLayoutEffect(function () {
+        onClosePrevented && onClosePrevented();
+        setTimeout(function () { return setStaticBackdrop(false); }, duration);
+    }, [staticBackdrop]);
+    // Set focus to modal after open
+    useLayoutEffect(function () {
+        if (_visible) {
+            document.body.classList.add('modal-open');
+            if (backdrop) {
+                document.body.style.overflow = 'hidden';
+                document.body.style.paddingRight = '0px';
+            }
+            setTimeout(function () {
+                var _a;
+                focus && ((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.focus());
+            }, transition ? duration : 0);
+        }
+        else {
+            document.body.classList.remove('modal-open');
+            if (backdrop) {
+                document.body.style.removeProperty('overflow');
+                document.body.style.removeProperty('padding-right');
+            }
+        }
+        return function () {
+            document.body.classList.remove('modal-open');
+            if (backdrop) {
+                document.body.style.removeProperty('overflow');
+                document.body.style.removeProperty('padding-right');
+            }
+        };
+    }, [_visible]);
+    var handleClickOutside = function (event) {
+        if (modalContentRef.current &&
+            !modalContentRef.current.contains(event.target)) {
+            handleDismiss();
+        }
+    };
+    var handleKeyDown = function (event) {
+        if (event.key === 'Escape' && keyboard) {
+            handleDismiss();
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Transition, { in: _visible, mountOnEnter: true, nodeRef: modalRef, onEnter: onShow, onExit: onClose, unmountOnExit: unmountOnClose, timeout: transition ? duration : 0 }, function (state) { return (React.createElement(CConditionalPortal, { portal: portal },
+            React.createElement(CModalContext.Provider, { value: contextValues },
+                React.createElement("div", __assign({ className: classNames('modal', {
+                        'modal-static': staticBackdrop,
+                        fade: transition,
+                        show: state === 'entered',
+                    }, className), tabIndex: -1 }, (_visible
+                    ? { 'aria-modal': true, role: 'dialog' }
+                    : { 'aria-hidden': 'true' }), { style: __assign({}, (state !== 'exited' && { display: 'block' })) }, rest, { ref: forkedRef }),
+                    React.createElement(CModalDialog, { alignment: alignment, fullscreen: fullscreen, scrollable: scrollable, size: size },
+                        React.createElement(CModalContent, { ref: modalContentRef }, children)))))); }),
+        backdrop && (React.createElement(CConditionalPortal, { portal: portal },
+            React.createElement(CBackdrop, { visible: _visible })))));
+});
+CModal.propTypes = {
+    alignment: PropTypes.oneOf(['top', 'center']),
+    backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    duration: PropTypes.number,
+    focus: PropTypes.bool,
+    fullscreen: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    ]),
+    keyboard: PropTypes.bool,
+    onClose: PropTypes.func,
+    onClosePrevented: PropTypes.func,
+    onShow: PropTypes.func,
+    portal: PropTypes.bool,
+    scrollable: PropTypes.bool,
+    size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+    transition: PropTypes.bool,
+    unmountOnClose: PropTypes.bool,
+    visible: PropTypes.bool,
+};
+CModal.displayName = 'CModal';
+
+export { CModal, CModalContext };
+//# sourceMappingURL=CModal.js.map

package/dist/esm/components/modal/CModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CModal.js","sources":["../../../../src/components/modal/CModal.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/esm/components/modal/CModalBody.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface CModalBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+}
+export declare const CModalBody: React.ForwardRefExoticComponent<CModalBodyProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/modal/CModalBody.js

@@ -0,0 +1,17 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+
+var CModalBody = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('modal-body', className) }, rest, { ref: ref }), children));
+});
+CModalBody.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CModalBody.displayName = 'CModalBody';
+
+export { CModalBody };
+//# sourceMappingURL=CModalBody.js.map

package/dist/esm/components/modal/CModalBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CModalBody.js","sources":["../../../../src/components/modal/CModalBody.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;IAWa,UAAU,GAAG,UAAU,CAClC,UAAC,EAAgC,EAAE,GAAG,EAAA;IAAnC,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,IAAI,GAA9B,MAAA,CAAA,EAAA,EAAA,CAAA,UAAA,EAAA,WAAA,CAAgC,CAAF,CAAA;IAC7B,QACE,sCAAK,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE,SAAS,CAAC,IAAM,IAAI,EAAA,EAAE,GAAG,EAAE,GAAG,KACpE,QAAQ,CACL,EACP;AACH,CAAC,EACF;AAED,UAAU,CAAC,SAAS,GAAG;IACrB,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,SAAS,EAAE,SAAS,CAAC,MAAM;CAC5B,CAAA;AAED,UAAU,CAAC,WAAW,GAAG,YAAY;;;;"}

package/dist/esm/components/modal/CModalContent.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface CModalContentProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+}
+export declare const CModalContent: React.ForwardRefExoticComponent<CModalContentProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/modal/CModalContent.js

@@ -0,0 +1,17 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+
+var CModalContent = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('modal-content', className) }, rest, { ref: ref }), children));
+});
+CModalContent.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CModalContent.displayName = 'CModalContent';
+
+export { CModalContent };
+//# sourceMappingURL=CModalContent.js.map

package/dist/esm/components/modal/CModalContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CModalContent.js","sources":["../../../../src/components/modal/CModalContent.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;IAWa,aAAa,GAAG,UAAU,CACrC,UAAC,EAAgC,EAAE,GAAG,EAAA;IAAnC,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,IAAI,GAA9B,MAAA,CAAA,EAAA,EAAA,CAAA,UAAA,EAAA,WAAA,CAAgC,CAAF,CAAA;IAC7B,QACE,sCAAK,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,IAAM,IAAI,EAAA,EAAE,GAAG,EAAE,GAAG,KACvE,QAAQ,CACL,EACP;AACH,CAAC,EACF;AAED,aAAa,CAAC,SAAS,GAAG;IACxB,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,SAAS,EAAE,SAAS,CAAC,MAAM;CAC5B,CAAA;AAED,aAAa,CAAC,WAAW,GAAG,eAAe;;;;"}

package/dist/esm/components/modal/CModalDialog.d.ts

@@ -0,0 +1,24 @@
+import React, { HTMLAttributes } from 'react';
+export interface CModalDialogProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Align the modal in the center or top of the screen.
+     */
+    alignment?: 'top' | 'center';
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+    /**
+     * Set modal to covers the entire user viewport.
+     */
+    fullscreen?: boolean | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    /**
+     * Does the modal dialog itself scroll, or does the whole dialog scroll within the window.
+     */
+    scrollable?: boolean;
+    /**
+     * Size the component small, large, or extra large.
+     */
+    size?: 'sm' | 'lg' | 'xl';
+}
+export declare const CModalDialog: React.ForwardRefExoticComponent<CModalDialogProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/modal/CModalDialog.js

@@ -0,0 +1,33 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+
+var CModalDialog = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, alignment = _a.alignment, className = _a.className, fullscreen = _a.fullscreen, scrollable = _a.scrollable, size = _a.size, rest = __rest(_a, ["children", "alignment", "className", "fullscreen", "scrollable", "size"]);
+    return (React.createElement("div", __assign({ className: classNames('modal-dialog', (_b = {
+                'modal-dialog-centered': alignment === 'center'
+            },
+            _b[typeof fullscreen === 'boolean'
+                ? 'modal-fullscreen'
+                : "modal-fullscreen-".concat(fullscreen, "-down")] = fullscreen,
+            _b['modal-dialog-scrollable'] = scrollable,
+            _b["modal-".concat(size)] = size,
+            _b), className) }, rest, { ref: ref }), children));
+});
+CModalDialog.propTypes = {
+    alignment: PropTypes.oneOf(['top', 'center']),
+    children: PropTypes.node,
+    className: PropTypes.string,
+    fullscreen: PropTypes.oneOfType([
+        PropTypes.bool,
+        PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'xxl']),
+    ]),
+    scrollable: PropTypes.bool,
+    size: PropTypes.oneOf(['sm', 'lg', 'xl']),
+};
+CModalDialog.displayName = 'CModalDialog';
+
+export { CModalDialog };
+//# sourceMappingURL=CModalDialog.js.map

package/dist/esm/components/modal/CModalDialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CModalDialog.js","sources":["../../../../src/components/modal/CModalDialog.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;IA2Ba,YAAY,GAAG,UAAU,CACpC,UAAC,EAAyE,EAAE,GAAG,EAAA;;IAA5E,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,SAAS,eAAA,EAAE,UAAU,gBAAA,EAAE,UAAU,gBAAA,EAAE,IAAI,UAAA,EAAK,IAAI,GAAvE,MAAA,CAAA,EAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,WAAA,EAAA,YAAA,EAAA,YAAA,EAAA,MAAA,CAAyE,CAAF,CAAA;AACtE,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,SAAS,EAAE,UAAU,CACnB,cAAc,GAAA,EAAA,GAAA;gBAEZ,uBAAuB,EAAE,SAAS,KAAK,QAAQ;;YAC/C,EAAC,CAAA,OAAO,UAAU,KAAK,SAAS;AAC9B,kBAAE,kBAAkB;AACpB,kBAAE,mBAAA,CAAA,MAAA,CAAoB,UAAU,EAAA,OAAA,CAAO,IAAG,UAAU;AACtD,YAAA,EAAA,CAAA,yBAAA,CAAyB,GAAE,UAAU;AACrC,YAAA,EAAA,CAAC,QAAS,CAAA,MAAA,CAAA,IAAI,CAAE,CAAA,GAAG,IAAI;iBAEzB,SAAS,CACV,EACG,EAAA,IAAI,EACR,EAAA,GAAG,EAAE,GAAG,EAEP,CAAA,EAAA,QAAQ,CACL,EACP;AACH,CAAC,EACF;AAED,YAAY,CAAC,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,SAAS,EAAE,SAAS,CAAC,MAAM;AAC3B,IAAA,UAAU,EAAE,SAAS,CAAC,SAAS,CAAC;AAC9B,QAAA,SAAS,CAAC,IAAI;AACd,QAAA,SAAS,CAAC,KAAK,CAAoC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;KACpF,CAAC;IACF,UAAU,EAAE,SAAS,CAAC,IAAI;AAC1B,IAAA,IAAI,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;CAC1C,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/components/modal/CModalFooter.d.ts

@@ -0,0 +1,8 @@
+import React, { HTMLAttributes } from 'react';
+export interface CModalFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+}
+export declare const CModalFooter: React.ForwardRefExoticComponent<CModalFooterProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/modal/CModalFooter.js

@@ -0,0 +1,17 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+
+var CModalFooter = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, rest = __rest(_a, ["children", "className"]);
+    return (React.createElement("div", __assign({ className: classNames('modal-footer', className) }, rest, { ref: ref }), children));
+});
+CModalFooter.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+};
+CModalFooter.displayName = 'CModalFooter';
+
+export { CModalFooter };
+//# sourceMappingURL=CModalFooter.js.map

package/dist/esm/components/modal/CModalFooter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CModalFooter.js","sources":["../../../../src/components/modal/CModalFooter.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;IAWa,YAAY,GAAG,UAAU,CACpC,UAAC,EAAgC,EAAE,GAAG,EAAA;IAAnC,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAK,IAAI,GAA9B,MAAA,CAAA,EAAA,EAAA,CAAA,UAAA,EAAA,WAAA,CAAgC,CAAF,CAAA;IAC7B,QACE,sCAAK,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,IAAM,IAAI,EAAA,EAAE,GAAG,EAAE,GAAG,KACtE,QAAQ,CACL,EACP;AACH,CAAC,EACF;AAED,YAAY,CAAC,SAAS,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,SAAS,EAAE,SAAS,CAAC,MAAM;CAC5B,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/components/modal/CModalHeader.d.ts

@@ -0,0 +1,12 @@
+import React, { HTMLAttributes } from 'react';
+export interface CModalHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+    /**
+     * Add a close button component to the header.
+     */
+    closeButton?: boolean;
+}
+export declare const CModalHeader: React.ForwardRefExoticComponent<CModalHeaderProps & React.RefAttributes<HTMLDivElement>>;

package/dist/esm/components/modal/CModalHeader.js

@@ -0,0 +1,23 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef, useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+import { CCloseButton } from '../close-button/CCloseButton.js';
+import { CModalContext } from './CModal.js';
+
+var CModalHeader = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, _b = _a.closeButton, closeButton = _b === void 0 ? true : _b, rest = __rest(_a, ["children", "className", "closeButton"]);
+    var setVisible = useContext(CModalContext).setVisible;
+    return (React.createElement("div", __assign({ className: classNames('modal-header', className) }, rest, { ref: ref }),
+        children,
+        closeButton && React.createElement(CCloseButton, { onClick: function () { return setVisible(false); } })));
+});
+CModalHeader.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    closeButton: PropTypes.bool,
+};
+CModalHeader.displayName = 'CModalHeader';
+
+export { CModalHeader };
+//# sourceMappingURL=CModalHeader.js.map

package/dist/esm/components/modal/CModalHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CModalHeader.js","sources":["../../../../src/components/modal/CModalHeader.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;IAkBa,YAAY,GAAG,UAAU,CACpC,UAAC,EAAoD,EAAE,GAAG,EAAA;AAAvD,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAE,EAAkB,GAAA,EAAA,CAAA,WAAA,EAAlB,WAAW,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,IAAI,GAAA,EAAA,EAAK,IAAI,GAAA,MAAA,CAAA,EAAA,EAAlD,wCAAoD,CAAF,CAAA;AACzC,IAAA,IAAA,UAAU,GAAK,UAAU,CAAC,aAAa,CAAC,WAA9B,CAA8B;AAEhD,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAK,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,EAAM,EAAA,IAAI,EAAE,EAAA,GAAG,EAAE,GAAG,EAAA,CAAA;QACtE,QAAQ;AACR,QAAA,WAAW,IAAI,KAAC,CAAA,aAAA,CAAA,YAAY,EAAC,EAAA,OAAO,EAAE,YAAM,EAAA,OAAA,UAAU,CAAC,KAAK,CAAC,CAAA,EAAA,EAAI,CAAA,CAC9D,EACP;AACH,CAAC,EACF;AAED,YAAY,CAAC,SAAS,GAAG;IACvB,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,WAAW,EAAE,SAAS,CAAC,IAAI;CAC5B,CAAA;AAED,YAAY,CAAC,WAAW,GAAG,cAAc;;;;"}

package/dist/esm/components/modal/CModalTitle.d.ts

@@ -0,0 +1,12 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component?: string | ElementType;
+}
+export declare const CModalTitle: React.ForwardRefExoticComponent<CModalTitleProps & React.RefAttributes<HTMLHeadElement>>;

package/dist/esm/components/modal/CModalTitle.js

@@ -0,0 +1,18 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+
+var CModalTitle = forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.component, Component = _b === void 0 ? 'h5' : _b, className = _a.className, rest = __rest(_a, ["children", "component", "className"]);
+    return (React.createElement(Component, __assign({ className: classNames('modal-title', className) }, rest, { ref: ref }), children));
+});
+CModalTitle.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+};
+CModalTitle.displayName = 'CModalTitle';
+
+export { CModalTitle };
+//# sourceMappingURL=CModalTitle.js.map

package/dist/esm/components/modal/CModalTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CModalTitle.js","sources":["../../../../src/components/modal/CModalTitle.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;IAea,WAAW,GAAG,UAAU,CACnC,UAAC,EAA6D,EAAE,GAAG,EAAA;AAAhE,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EAAE,EAA2B,GAAA,EAAA,CAAA,SAAA,EAAhB,SAAS,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,GAAA,EAAA,EAAE,SAAS,GAAA,EAAA,CAAA,SAAA,EAAK,IAAI,GAAA,MAAA,CAAA,EAAA,EAA3D,sCAA6D,CAAF,CAAA;IAC1D,QACE,oBAAC,SAAS,EAAA,QAAA,CAAA,EAAC,SAAS,EAAE,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,EAAM,EAAA,IAAI,IAAE,GAAG,EAAE,GAAG,EAC3E,CAAA,EAAA,QAAQ,CACC,EACb;AACH,CAAC,EACF;AAED,WAAW,CAAC,SAAS,GAAG;IACtB,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,SAAS,EAAE,SAAS,CAAC,WAAW;CACjC,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa;;;;"}

package/dist/esm/components/modal/index.d.ts

@@ -0,0 +1,8 @@
+import { CModal } from './CModal';
+import { CModalBody } from './CModalBody';
+import { CModalContent } from './CModalContent';
+import { CModalDialog } from './CModalDialog';
+import { CModalFooter } from './CModalFooter';
+import { CModalHeader } from './CModalHeader';
+import { CModalTitle } from './CModalTitle';
+export { CModal, CModalBody, CModalContent, CModalDialog, CModalFooter, CModalHeader, CModalTitle };

package/dist/esm/components/nav/CNav.d.ts

@@ -0,0 +1,20 @@
+import React, { ElementType, HTMLAttributes } from 'react';
+export interface CNavProps extends HTMLAttributes<HTMLDivElement | HTMLUListElement | HTMLOListElement> {
+    /**
+     * A string of all className you want applied to the base component.
+     */
+    className?: string;
+    /**
+     * Component used for the root node. Either a string to use a HTML element or a component.
+     */
+    component?: string | ElementType;
+    /**
+     * Specify a layout type for component.
+     */
+    layout?: 'fill' | 'justified';
+    /**
+     * Set the nav variant to tabs or pills.
+     */
+    variant?: 'pills' | 'tabs' | 'underline' | 'underline-border';
+}
+export declare const CNav: React.ForwardRefExoticComponent<CNavProps & React.RefAttributes<HTMLDivElement | HTMLOListElement | HTMLUListElement>>;

package/dist/esm/components/nav/CNav.js

@@ -0,0 +1,24 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+
+var CNav = forwardRef(function (_a, ref) {
+    var _b;
+    var children = _a.children, className = _a.className, _c = _a.component, Component = _c === void 0 ? 'ul' : _c, layout = _a.layout, variant = _a.variant, rest = __rest(_a, ["children", "className", "component", "layout", "variant"]);
+    return (React.createElement(Component, __assign({ className: classNames('nav', (_b = {},
+            _b["nav-".concat(layout)] = layout,
+            _b["nav-".concat(variant)] = variant,
+            _b), className), role: "navigation" }, rest, { ref: ref }), children));
+});
+CNav.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    component: PropTypes.elementType,
+    layout: PropTypes.oneOf(['fill', 'justified']),
+    variant: PropTypes.oneOf(['pills', 'tabs', 'underline', 'underline-border']),
+};
+CNav.displayName = 'CNav';
+
+export { CNav };
+//# sourceMappingURL=CNav.js.map

package/dist/esm/components/nav/CNav.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CNav.js","sources":["../../../../src/components/nav/CNav.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;IAwBa,IAAI,GAAG,UAAU,CAC5B,UAAC,EAA8E,EAAE,GAAG,EAAA;;IAAjF,IAAA,QAAQ,cAAA,EAAE,SAAS,eAAA,EAAE,EAAA,GAAA,EAAA,CAAA,SAA2B,EAAhB,SAAS,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,KAAA,EAAE,MAAM,YAAA,EAAE,OAAO,aAAA,EAAK,IAAI,GAA5E,MAAA,CAAA,EAAA,EAAA,CAAA,UAAA,EAAA,WAAA,EAAA,WAAA,EAAA,QAAA,EAAA,SAAA,CAA8E,CAAF,CAAA;IAC3E,QACE,oBAAC,SAAS,EAAA,QAAA,CAAA,EACR,SAAS,EAAE,UAAU,CACnB,KAAK,GAAA,EAAA,GAAA,EAAA;AAEH,YAAA,EAAA,CAAC,MAAO,CAAA,MAAA,CAAA,MAAM,CAAE,CAAA,GAAG,MAAM;AACzB,YAAA,EAAA,CAAC,MAAO,CAAA,MAAA,CAAA,OAAO,CAAE,CAAA,GAAG,OAAO;AAE7B,YAAA,EAAA,GAAA,SAAS,CACV,EACD,IAAI,EAAC,YAAY,EACb,EAAA,IAAI,EACR,EAAA,GAAG,EAAE,GAAG,EAAA,CAAA,EAEP,QAAQ,CACC,EACb;AACH,CAAC,EACF;AAED,IAAI,CAAC,SAAS,GAAG;IACf,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,SAAS,EAAE,SAAS,CAAC,MAAM;IAC3B,SAAS,EAAE,SAAS,CAAC,WAAW;IAChC,MAAM,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;AAC9C,IAAA,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,CAAC,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,kBAAkB,CAAC,CAAC;CAC7E,CAAA;AAED,IAAI,CAAC,WAAW,GAAG,MAAM;;;;"}

package/dist/esm/components/nav/CNavGroup.d.ts

@@ -0,0 +1,25 @@
+import React, { ReactNode } from 'react';
+export interface CNavGroupProps {
+    children?: ReactNode;
+    /**
+     * A string of all className you want applied to the component.
+     */
+    className?: string;
+    /**
+     * Make nav group more compact by cutting all `padding` in half.
+     */
+    compact?: boolean;
+    /**
+     * Set group toggler label.
+     */
+    toggler?: string | ReactNode;
+    /**
+     * Show nav group items.
+     */
+    visible?: boolean;
+    /**
+     * @ignore
+     */
+    idx?: string;
+}
+export declare const CNavGroup: React.ForwardRefExoticComponent<CNavGroupProps & React.RefAttributes<HTMLLIElement>>;

package/dist/esm/components/nav/CNavGroup.js

@@ -0,0 +1,81 @@
+import { __rest, __assign } from '../../node_modules/tslib/tslib.es6.js';
+import React, { forwardRef, useState, useRef, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import classNames from '../../node_modules/classnames/index.js';
+import { CNavContext } from '../sidebar/CSidebarNav.js';
+import Transition from '../../node_modules/react-transition-group/esm/Transition.js';
+
+var isInVisibleGroup = function (el1, el2) {
+    var array1 = el1.toString().split('.');
+    var array2 = el2.toString().split('.');
+    return array2.every(function (item, index) { return item === array1[index]; });
+};
+var CNavGroup = forwardRef(function (_a, ref) {
+    var children = _a.children, className = _a.className, compact = _a.compact, idx = _a.idx, toggler = _a.toggler, visible = _a.visible, rest = __rest(_a, ["children", "className", "compact", "idx", "toggler", "visible"]);
+    var _b = useState(), height = _b[0], setHeight = _b[1];
+    var navItemsRef = useRef(null);
+    var _c = useContext(CNavContext), visibleGroup = _c.visibleGroup, setVisibleGroup = _c.setVisibleGroup;
+    var _d = useState(Boolean(visible || (idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)))), _visible = _d[0], setVisible = _d[1];
+    useEffect(function () {
+        setVisible(Boolean(idx && visibleGroup && isInVisibleGroup(visibleGroup, idx)));
+    }, [visibleGroup]);
+    var handleTogglerOnCLick = function (event) {
+        event.preventDefault();
+        setVisibleGroup(_visible ? ((idx === null || idx === void 0 ? void 0 : idx.toString().includes('.')) ? idx.slice(0, idx.lastIndexOf('.')) : '') : idx);
+        setVisible(!_visible);
+    };
+    var style = {
+        height: 0,
+    };
+    var onEntering = function () {
+        navItemsRef.current && setHeight(navItemsRef.current.scrollHeight);
+    };
+    var onEntered = function () {
+        setHeight('auto');
+    };
+    var onExit = function () {
+        navItemsRef.current && setHeight(navItemsRef.current.scrollHeight);
+    };
+    var onExiting = function () {
+        var _a;
+        // @ts-expect-error reflow is necessary to get correct height of the element
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        (_a = navItemsRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight;
+        setHeight(0);
+    };
+    var onExited = function () {
+        setHeight(0);
+    };
+    var transitionStyles = {
+        entering: { display: 'block', height: height },
+        entered: { display: 'block', height: height },
+        exiting: { display: 'block', height: height },
+        exited: { height: height },
+        unmounted: {}
+    };
+    return (React.createElement("li", __assign({ className: classNames('nav-group', { show: _visible }, className) }, rest, { ref: ref }),
+        toggler && (React.createElement("a", { className: "nav-link nav-group-toggle", onClick: function (event) { return handleTogglerOnCLick(event); } }, toggler)),
+        React.createElement(Transition, { in: _visible, nodeRef: navItemsRef, onEntering: onEntering, onEntered: onEntered, onExit: onExit, onExiting: onExiting, onExited: onExited, timeout: 300 }, function (state) { return (React.createElement("ul", { className: classNames('nav-group-items', {
+                compact: compact,
+            }), style: __assign(__assign({}, style), transitionStyles[state]), ref: navItemsRef }, React.Children.map(children, function (child, index) {
+            if (React.isValidElement(child)) {
+                return React.cloneElement(child, {
+                    key: index,
+                    idx: "".concat(idx, ".").concat(index),
+                });
+            }
+            return;
+        }))); })));
+});
+CNavGroup.propTypes = {
+    children: PropTypes.node,
+    className: PropTypes.string,
+    compact: PropTypes.bool,
+    idx: PropTypes.string,
+    toggler: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    visible: PropTypes.bool,
+};
+CNavGroup.displayName = 'CNavGroup';
+
+export { CNavGroup };
+//# sourceMappingURL=CNavGroup.js.map