@kne/react-modal 0.1.1 → 0.1.4

package/dist/index.js

@@ -36,7 +36,7 @@ const withLocale = reactIntl.createWithIntlProvider({
   namespace: 'react-modal'
 });
 
-var style = {"kne-responsive-boundary":"kne-react-modal_gh14z","kne-responsive-scroll":"kne-react-modal_Kfn6L","modal":"kne-react-modal_Bk7-B","small":"kne-react-modal_DZGD6","large":"kne-react-modal_9sz-n","modal-body-inner":"kne-react-modal_fFnva","is-mobile":"kne-react-modal_LtgJz","modal-container":"kne-react-modal_aEoZq","modal-antd-header":"kne-react-modal_54n8W","modal-antd-footer":"kne-react-modal_AJ9pV","modal-antd-body":"kne-react-modal_u2IjN","modal-outer":"kne-react-modal_kkILR","no-title":"kne-react-modal_8Iysr","no-footer":"kne-react-modal_VMxik","no-padding":"kne-react-modal_Fof-N","modal-title":"kne-react-modal_tG9MF","modal-body":"kne-react-modal_W-QFz","modal-footer":"kne-react-modal_meVfy","body-scroll-off":"kne-react-modal_l627I","is-embedded-footer":"kne-react-modal_17Eih","modal-footer-extra":"kne-react-modal_Fx8Z-","modal-footer-actions":"kne-react-modal_V3ZrX","modal-close":"kne-react-modal_-EK8N","modal-host":"kne-react-modal_eNb-h","modal-wrap":"kne-react-modal_3Sju5","modal-wrap-centered":"kne-react-modal_-qCIk","modal-wrap-fullscreen":"kne-react-modal_8lS2G","modal-mask-fullscreen":"kne-react-modal_XfLOC"};
+var modalStyle = {"kne-responsive-boundary":"kne-react-modal_gh14z","kne-responsive-scroll":"kne-react-modal_Kfn6L","modal":"kne-react-modal_Bk7-B","small":"kne-react-modal_DZGD6","large":"kne-react-modal_9sz-n","modal-body-inner":"kne-react-modal_fFnva","is-mobile":"kne-react-modal_LtgJz","modal-container":"kne-react-modal_aEoZq","modal-antd-header":"kne-react-modal_54n8W","modal-antd-footer":"kne-react-modal_AJ9pV","modal-antd-body":"kne-react-modal_u2IjN","modal-outer":"kne-react-modal_kkILR","no-title":"kne-react-modal_8Iysr","no-footer":"kne-react-modal_VMxik","no-padding":"kne-react-modal_Fof-N","modal-title":"kne-react-modal_tG9MF","modal-body":"kne-react-modal_W-QFz","modal-footer":"kne-react-modal_meVfy","body-scroll-off":"kne-react-modal_l627I","is-embedded-footer":"kne-react-modal_17Eih","modal-footer-extra":"kne-react-modal_Fx8Z-","modal-footer-actions":"kne-react-modal_V3ZrX","modal-close":"kne-react-modal_-EK8N","modal-host":"kne-react-modal_eNb-h","modal-wrap":"kne-react-modal_3Sju5","modal-wrap-centered":"kne-react-modal_-qCIk","modal-wrap-fullscreen":"kne-react-modal_8lS2G","modal-mask-fullscreen":"kne-react-modal_XfLOC"};
 
 const Footer = ({
   footer,
@@ -98,15 +98,15 @@ const Footer = ({
     return null;
   }
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classnames__default["default"](style['modal-footer'], 'modal-footer', {
-      [style['is-mobile']]: isMobile,
-      [style['is-embedded-footer']]: embeddedFooterOnly
+    className: classnames__default["default"](modalStyle['modal-footer'], 'modal-footer', {
+      [modalStyle['is-mobile']]: isMobile,
+      [modalStyle['is-embedded-footer']]: embeddedFooterOnly
     }),
     children: [showFooterSlot ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: style['modal-footer-extra'],
+      className: modalStyle['modal-footer-extra'],
       children: footer
     }) : null, showButtons ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: style['modal-footer-actions'],
+      className: modalStyle['modal-footer-actions'],
       children: /*#__PURE__*/jsxRuntime.jsx(ButtonGroup__default["default"], {
         list: list,
         showLength: list.length,
@@ -119,13 +119,13 @@ const Footer = ({
 const ModalLocaleRoot = withLocale(({
   children
 }) => children);
-const renderWithOptions = (value, options) => {
+const renderWithOptions$1 = (value, options) => {
   if (typeof value === 'function') {
     return value(options);
   }
   return value;
 };
-const wrapCustomGetContainer = customGetContainer => {
+const wrapCustomGetContainer$2 = customGetContainer => {
   if (!customGetContainer) {
     return undefined;
   }
@@ -134,10 +134,10 @@ const wrapCustomGetContainer = customGetContainer => {
   }
   return () => customGetContainer;
 };
-const VIEWPORT_EXAMPLE_SELECTORS = ['.example-driver-device-scroll'];
-const viewportPopupMountOptions = {
+const VIEWPORT_EXAMPLE_SELECTORS$3 = ['.example-driver-device-scroll'];
+const viewportPopupMountOptions$1 = {
   cover: 'viewport',
-  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$3
 };
 const findParentModalMountHost = node => {
   if (!node || typeof node.closest !== 'function') {
@@ -154,7 +154,7 @@ const resolveModalGetContainer = ({
   getPopupContainer,
   getHostNode
 }) => {
-  const wrappedCustom = wrapCustomGetContainer(customGetContainer);
+  const wrappedCustom = wrapCustomGetContainer$2(customGetContainer);
   return triggerNode => {
     if (wrappedCustom) {
       const custom = wrappedCustom(triggerNode);
@@ -170,17 +170,17 @@ const resolveModalGetContainer = ({
     return getPopupContainer(triggerNode);
   };
 };
-let parentScrollLockCount = 0;
-let parentScrollLocked = [];
-const lockParentScroll = getScrollElement => {
-  parentScrollLockCount += 1;
-  if (parentScrollLockCount === 1) {
+let parentScrollLockCount$1 = 0;
+let parentScrollLocked$1 = [];
+const lockParentScroll$1 = getScrollElement => {
+  parentScrollLockCount$1 += 1;
+  if (parentScrollLockCount$1 === 1) {
     const targets = [document.body];
     const scrollEl = typeof getScrollElement === 'function' ? getScrollElement() : null;
     if (scrollEl && scrollEl !== document.body && !targets.includes(scrollEl)) {
       targets.push(scrollEl);
     }
-    parentScrollLocked = targets.map(el => {
+    parentScrollLocked$1 = targets.map(el => {
       const prev = {
         overflow: el.style.overflow,
         overscrollBehavior: el.style.overscrollBehavior
@@ -194,28 +194,28 @@ const lockParentScroll = getScrollElement => {
     });
   }
   return () => {
-    parentScrollLockCount = Math.max(0, parentScrollLockCount - 1);
-    if (parentScrollLockCount === 0) {
-      parentScrollLocked.forEach(({
+    parentScrollLockCount$1 = Math.max(0, parentScrollLockCount$1 - 1);
+    if (parentScrollLockCount$1 === 0) {
+      parentScrollLocked$1.forEach(({
         el,
         prev
       }) => {
         el.style.overflow = prev.overflow;
         el.style.overscrollBehavior = prev.overscrollBehavior;
       });
-      parentScrollLocked = [];
+      parentScrollLocked$1 = [];
     }
   };
 };
-const useLockParentScroll = (enabled, getScrollElement) => {
+const useLockParentScroll$1 = (enabled, getScrollElement) => {
   react.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
-    return lockParentScroll(getScrollElement);
+    return lockParentScroll$1(getScrollElement);
   }, [enabled, getScrollElement]);
 };
-const sizeStyleVars = (size, hasFooter) => {
+const sizeStyleVars$1 = (size, hasFooter) => {
   const minBase = size === 'small' ? 300 : 500;
   const chrome = 48 + (hasFooter ? 58 : 0);
   const minHeight = `${Math.max(0, minBase - chrome)}px`;
@@ -254,23 +254,23 @@ const ModalOuter = ({
 }) => {
   const effectiveNoPadding = noPadding ?? bodyScroll === false;
   const bodyInner = /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classnames__default["default"](style['modal-body-inner'], 'modal-body-inner', {
-      [style['no-padding']]: effectiveNoPadding
+    className: classnames__default["default"](modalStyle['modal-body-inner'], 'modal-body-inner', {
+      [modalStyle['no-padding']]: effectiveNoPadding
     }),
     children: children
   });
-  const bodyClassName = classnames__default["default"](style['modal-body'], 'modal-body');
+  const bodyClassName = classnames__default["default"](modalStyle['modal-body'], 'modal-body');
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
-    className: classnames__default["default"](style['modal-outer'], 'modal-container', {
-      [style['is-mobile']]: isMobile,
-      [style['no-title']]: !title,
-      [style['no-footer']]: footer === null && footerButtons === undefined,
-      [style['no-padding']]: effectiveNoPadding
+    className: classnames__default["default"](modalStyle['modal-outer'], 'modal-container', {
+      [modalStyle['is-mobile']]: isMobile,
+      [modalStyle['no-title']]: !title,
+      [modalStyle['no-footer']]: footer === null && footerButtons === undefined,
+      [modalStyle['no-padding']]: effectiveNoPadding
     }),
     "data-testid": "react-modal",
     children: [closable === false ? null : /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
       "data-testid": "react-modal-close-btn",
-      className: classnames__default["default"](style['modal-close'], 'modal-close'),
+      className: classnames__default["default"](modalStyle['modal-close'], 'modal-close'),
       type: "text",
       icon: /*#__PURE__*/jsxRuntime.jsx(icons.CloseOutlined, {}),
       onClick: e => {
@@ -278,7 +278,7 @@ const ModalOuter = ({
         onClose && onClose();
       }
     }), title ? /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames__default["default"](style['modal-title'], 'modal-title'),
+      className: classnames__default["default"](modalStyle['modal-title'], 'modal-title'),
       children: title
     }) : null, bodyScroll !== false ? /*#__PURE__*/jsxRuntime.jsx(SimpleBar__default["default"], {
       className: bodyClassName,
@@ -287,7 +287,7 @@ const ModalOuter = ({
       },
       children: bodyInner
     }) : /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classnames__default["default"](bodyClassName, style['body-scroll-off']),
+      className: classnames__default["default"](bodyClassName, modalStyle['body-scroll-off']),
       children: bodyInner
     }), footer === null && footerButtons === undefined ? null : /*#__PURE__*/jsxRuntime.jsx(Footer, {
       footer: footer,
@@ -328,7 +328,7 @@ const computedCommonProps = ({
 }) => {
   const useMobileLayout = isMobile && mobileFullscreen !== false;
   const hasFooter = !(footer === null && footerButtons === undefined);
-  const sizeVars = sizeStyleVars(size, hasFooter);
+  const sizeVars = sizeStyleVars$1(size, hasFooter);
   const {
     width,
     ...cssVars
@@ -338,20 +338,20 @@ const computedCommonProps = ({
       close: onClose
     });
     return /*#__PURE__*/jsxRuntime.jsx(ModalOuter, {
-      title: renderWithOptions(title, opts),
+      title: renderWithOptions$1(title, opts),
       closable: closable,
       onClose: onClose,
       onConfirm: onConfirm,
       confirmText: confirmText,
       onCancel: onCancel,
       cancelText: cancelText,
-      footerButtons: renderWithOptions(footerButtons, opts),
+      footerButtons: renderWithOptions$1(footerButtons, opts),
       noPadding: noPadding,
-      footer: renderWithOptions(footer, opts),
+      footer: renderWithOptions$1(footer, opts),
       targetProps: opts,
       isMobile: useMobileLayout,
       bodyScroll: bodyScroll,
-      children: renderWithOptions(children, opts)
+      children: renderWithOptions$1(children, opts)
     });
   };
   return {
@@ -359,14 +359,14 @@ const computedCommonProps = ({
     icon: null,
     centered: !useMobileLayout,
     width: props.width ?? (useMobileLayout ? 'var(--kne-modal-viewport-width, 100vw)' : width),
-    wrapClassName: classnames__default["default"](wrapClassName, style['modal-wrap'], useMobileLayout ? style['modal-wrap-fullscreen'] : style['modal-wrap-centered'], useMobileLayout && fixedModeClass),
+    wrapClassName: classnames__default["default"](wrapClassName, modalStyle['modal-wrap'], useMobileLayout ? modalStyle['modal-wrap-fullscreen'] : modalStyle['modal-wrap-centered'], useMobileLayout && fixedModeClass),
     classNames: Object.assign({}, propsClassNames, {
-      mask: classnames__default["default"](propsClassNames?.mask, useMobileLayout && style['modal-mask-fullscreen'], useMobileLayout && fixedModeClass),
-      container: classnames__default["default"](style['modal-container'], useMobileLayout && style['is-mobile'], propsClassNames?.container),
-      body: classnames__default["default"](style['modal-antd-body'], useMobileLayout && style['is-mobile'], propsClassNames?.body),
-      footer: classnames__default["default"](style['modal-antd-footer'], propsClassNames?.footer),
-      header: classnames__default["default"](style['modal-antd-header'], propsClassNames?.header),
-      content: classnames__default["default"](style['modal-container'], useMobileLayout && style['is-mobile'], propsClassNames?.content)
+      mask: classnames__default["default"](propsClassNames?.mask, useMobileLayout && modalStyle['modal-mask-fullscreen'], useMobileLayout && fixedModeClass),
+      container: classnames__default["default"](modalStyle['modal-container'], useMobileLayout && modalStyle['is-mobile'], propsClassNames?.container),
+      body: classnames__default["default"](modalStyle['modal-antd-body'], useMobileLayout && modalStyle['is-mobile'], propsClassNames?.body),
+      footer: classnames__default["default"](modalStyle['modal-antd-footer'], propsClassNames?.footer),
+      header: classnames__default["default"](modalStyle['modal-antd-header'], propsClassNames?.header),
+      content: classnames__default["default"](modalStyle['modal-container'], useMobileLayout && modalStyle['is-mobile'], propsClassNames?.content)
     }),
     title: null,
     maskClosable: Object.prototype.hasOwnProperty.call(props, 'maskClosable') ? props.maskClosable : false,
@@ -374,8 +374,8 @@ const computedCommonProps = ({
     footer: null,
     closable: false,
     onCancel: onClose,
-    className: classnames__default["default"](className, style['modal'], style[size], {
-      [style['is-mobile']]: useMobileLayout
+    className: classnames__default["default"](className, modalStyle['modal'], modalStyle[size], {
+      [modalStyle['is-mobile']]: useMobileLayout
     }),
     style: Object.assign({}, cssVars, propsStyle, useMobileLayout ? {
       '--kne-modal-viewport-gutter': '0px',
@@ -433,11 +433,11 @@ const Modal = withLocale(({
     getPopupContainer,
     anchorRef
   } = responsiveUtils.useMobilePopupMount({
-    ...viewportPopupMountOptions,
-    getPopupContainer: wrapCustomGetContainer(getContainer)
+    ...viewportPopupMountOptions$1,
+    getPopupContainer: wrapCustomGetContainer$2(getContainer)
   });
   const getScrollElement = responsiveUtils.useScrollElement();
-  useLockParentScroll(!!open, getScrollElement);
+  useLockParentScroll$1(!!open, getScrollElement);
   const setAnchorRef = node => {
     hostRef.current = node;
     anchorRef(node);
@@ -450,7 +450,7 @@ const Modal = withLocale(({
   return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [/*#__PURE__*/jsxRuntime.jsx("span", {
       ref: setAnchorRef,
-      className: style['modal-host'],
+      className: modalStyle['modal-host'],
       "aria-hidden": "true"
     }), /*#__PURE__*/jsxRuntime.jsx(antd.Modal, {
       ...computedCommonProps(Object.assign({}, props, {
@@ -473,7 +473,7 @@ const useModal = () => {
   const {
     resolveMount,
     getPopupContainer
-  } = responsiveUtils.useMobilePopupMount(viewportPopupMountOptions);
+  } = responsiveUtils.useMobilePopupMount(viewportPopupMountOptions$1);
   const getScrollElement = responsiveUtils.useScrollElement();
   return props => {
     const anchor = typeof document !== 'undefined' ? document.activeElement : null;
@@ -481,7 +481,7 @@ const useModal = () => {
       isMobile,
       fixedModeClass
     } = resolveMount(anchor);
-    const unlock = lockParentScroll(getScrollElement);
+    const unlock = lockParentScroll$1(getScrollElement);
     const api = {};
     const {
       afterClose: userAfterClose,
@@ -520,7 +520,799 @@ const useModal = () => {
   };
 };
 
-const ModalScrollRegion = ({
+var style = {"kne-responsive-boundary":"kne-react-modal_qwqLr","kne-responsive-scroll":"kne-react-modal_vmry7","drawer":"kne-react-modal_cDsbq","small":"kne-react-modal_3QgK-","is-mobile":"kne-react-modal_FFf73","large":"kne-react-modal_8lell","drawer-body-inner":"kne-react-modal_xgX4D","drawer-antd-header":"kne-react-modal_3EUxr","drawer-antd-footer":"kne-react-modal_2G81L","drawer-antd-body":"kne-react-modal_eKVMu","drawer-outer":"kne-react-modal_P3Cw8","no-title":"kne-react-modal_upRot","no-footer":"kne-react-modal_j4sGu","no-padding":"kne-react-modal_pg37M","drawer-title":"kne-react-modal_-hw5V","drawer-body":"kne-react-modal_nJj7Y","body-scroll-off":"kne-react-modal_2Wh1H","modal-footer-extra":"kne-react-modal_M4hy9","drawer-close":"kne-react-modal_dVh38","drawer-host":"kne-react-modal_Nsxi9","drawer-host-render":"kne-react-modal_iGDWP","drawer-panel-host":"kne-react-modal_A0h-2","drawer-panel-body":"kne-react-modal_E4tcc","drawer-form-host":"kne-react-modal_vKkQW","drawer-wrapper-mobile":"kne-react-modal_vsxOs","drawer-wrapper-mobile-vertical":"kne-react-modal_HG8Vz","drawer-root-mobile":"kne-react-modal_G-qXe"};
+
+const DrawerLocaleRoot = withLocale(({
+  children
+}) => children);
+const VIEWPORT_EXAMPLE_SELECTORS$2 = ['.example-driver-device-scroll'];
+const boundaryPopupMountOptions$1 = {
+  cover: 'boundary',
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$2
+};
+const renderWithOptions = (value, options) => {
+  if (typeof value === 'function') {
+    return value(options);
+  }
+  return value;
+};
+const wrapCustomGetContainer$1 = customGetContainer => {
+  if (!customGetContainer) {
+    return undefined;
+  }
+  if (typeof customGetContainer === 'function') {
+    return triggerNode => customGetContainer(triggerNode) || null;
+  }
+  return () => customGetContainer;
+};
+const isVerticalPlacement = placement => placement === 'top' || placement === 'bottom';
+const findParentDrawerMountHost = node => {
+  if (!node || typeof node.closest !== 'function') {
+    return null;
+  }
+  const parentRoot = node.closest('.ant-drawer-root');
+  if (!parentRoot) {
+    return null;
+  }
+  return parentRoot.parentElement || (typeof document !== 'undefined' ? document.body : null);
+};
+const resolveDrawerGetContainer = ({
+  customGetContainer,
+  getPopupContainer,
+  getHostNode
+}) => {
+  const wrappedCustom = wrapCustomGetContainer$1(customGetContainer);
+  return triggerNode => {
+    if (wrappedCustom) {
+      const custom = wrappedCustom(triggerNode);
+      if (custom) {
+        return custom;
+      }
+    }
+    const from = triggerNode || (typeof getHostNode === 'function' ? getHostNode() : null);
+    const nestedHost = findParentDrawerMountHost(from);
+    if (nestedHost) {
+      return nestedHost;
+    }
+    return getPopupContainer(triggerNode);
+  };
+};
+let parentScrollLockCount = 0;
+let parentScrollLocked = [];
+const lockParentScroll = getScrollElement => {
+  parentScrollLockCount += 1;
+  if (parentScrollLockCount === 1) {
+    const targets = [document.body];
+    const scrollEl = typeof getScrollElement === 'function' ? getScrollElement() : null;
+    if (scrollEl && scrollEl !== document.body && !targets.includes(scrollEl)) {
+      targets.push(scrollEl);
+    }
+    parentScrollLocked = targets.map(el => {
+      const prev = {
+        overflow: el.style.overflow,
+        overscrollBehavior: el.style.overscrollBehavior
+      };
+      el.style.overflow = 'hidden';
+      el.style.overscrollBehavior = 'none';
+      return {
+        el,
+        prev
+      };
+    });
+  }
+  return () => {
+    parentScrollLockCount = Math.max(0, parentScrollLockCount - 1);
+    if (parentScrollLockCount === 0) {
+      parentScrollLocked.forEach(({
+        el,
+        prev
+      }) => {
+        el.style.overflow = prev.overflow;
+        el.style.overscrollBehavior = prev.overscrollBehavior;
+      });
+      parentScrollLocked = [];
+    }
+  };
+};
+const useLockParentScroll = (enabled, getScrollElement) => {
+  react.useEffect(() => {
+    if (!enabled) {
+      return undefined;
+    }
+    return lockParentScroll(getScrollElement);
+  }, [enabled, getScrollElement]);
+};
+const sizeStyleVars = (size, hasFooter) => {
+  const minBase = size === 'small' ? 300 : 500;
+  const chrome = 48 + (hasFooter ? 69 : 0);
+  const minHeight = `${Math.max(0, minBase - chrome)}px`;
+  const largeDim = typeof window !== 'undefined' ? `${Math.min(window.innerWidth - 64, 1500)}px` : '1500px';
+  if (size === 'large') {
+    return {
+      dimension: largeDim,
+      '--kne-drawer-body-min-height': minHeight
+    };
+  }
+  if (size === 'small') {
+    return {
+      dimension: '600px',
+      '--kne-drawer-body-min-height': minHeight
+    };
+  }
+  return {
+    dimension: '1000px',
+    '--kne-drawer-body-min-height': minHeight
+  };
+};
+const DrawerOuter = ({
+  title,
+  footer,
+  footerButtons,
+  noPadding,
+  onClose,
+  closable,
+  onConfirm,
+  onCancel,
+  children,
+  targetProps,
+  cancelText,
+  confirmText,
+  isMobile,
+  bodyScroll
+}) => {
+  const effectiveNoPadding = noPadding ?? bodyScroll === false;
+  const bodyInner = /*#__PURE__*/jsxRuntime.jsx("div", {
+    className: classnames__default["default"](style['drawer-body-inner'], 'drawer-body-inner', 'modal-body-inner', {
+      [style['no-padding']]: effectiveNoPadding
+    }),
+    children: children
+  });
+  const bodyClassName = classnames__default["default"](style['drawer-body'], 'drawer-body', 'modal-body');
+  return /*#__PURE__*/jsxRuntime.jsxs("div", {
+    className: classnames__default["default"](style['drawer-outer'], 'drawer-container', {
+      [style['is-mobile']]: isMobile,
+      [style['no-title']]: !title,
+      [style['no-footer']]: footer === null && footerButtons === undefined,
+      [style['no-padding']]: effectiveNoPadding
+    }),
+    "data-testid": "react-drawer",
+    children: [closable === false ? null : /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+      "data-testid": "react-drawer-close-btn",
+      className: classnames__default["default"](style['drawer-close'], 'drawer-close'),
+      type: "text",
+      icon: /*#__PURE__*/jsxRuntime.jsx(icons.CloseOutlined, {}),
+      onClick: e => {
+        e.stopPropagation();
+        onClose && onClose();
+      }
+    }), title ? /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"](style['drawer-title'], 'drawer-title', 'modal-title'),
+      children: title
+    }) : null, bodyScroll !== false ? /*#__PURE__*/jsxRuntime.jsx(SimpleBar__default["default"], {
+      className: bodyClassName,
+      style: {
+        height: 'var(--kne-drawer-body-height)'
+      },
+      children: bodyInner
+    }) : /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"](bodyClassName, style['body-scroll-off']),
+      children: bodyInner
+    }), footer === null && footerButtons === undefined ? null : /*#__PURE__*/jsxRuntime.jsx(Footer, {
+      footer: footer,
+      footerButtons: footerButtons,
+      onConfirm: onConfirm,
+      confirmText: confirmText,
+      onCancel: onCancel,
+      cancelText: cancelText,
+      onClose: onClose,
+      targetProps: targetProps,
+      isMobile: isMobile
+    })]
+  });
+};
+const computedDrawerProps = ({
+  children,
+  footer,
+  footerButtons,
+  className,
+  size = 'default',
+  placement = 'right',
+  title,
+  onClose,
+  onConfirm,
+  confirmText,
+  onCancel,
+  cancelText,
+  closable,
+  noPadding,
+  bodyScroll = true,
+  isMobile,
+  fixedModeClass,
+  rootClassName,
+  classNames: propsClassNames,
+  styles: propsStyles,
+  style: propsStyle,
+  width: propsWidth,
+  height: propsHeight,
+  modalRender,
+  drawerRender,
+  ...props
+}) => {
+  const vertical = isVerticalPlacement(placement);
+  const hasFooter = !(footer === null && footerButtons === undefined);
+  const {
+    dimension,
+    ...cssVars
+  } = sizeStyleVars(size, hasFooter);
+  const sizeProp = vertical ? {
+    height: propsHeight ?? dimension
+  } : {
+    width: propsWidth ?? dimension
+  };
+  const runChildren = options => {
+    const opts = Object.assign({}, options, {
+      close: onClose
+    });
+    const drawerPanel = /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames__default["default"](style['drawer-panel-host'], 'drawer-panel-host'),
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames__default["default"](style['drawer-panel-body'], 'drawer-panel-body'),
+        children: /*#__PURE__*/jsxRuntime.jsx(DrawerOuter, {
+          title: renderWithOptions(title, opts),
+          closable: closable,
+          onClose: onClose,
+          onConfirm: onConfirm,
+          confirmText: confirmText,
+          onCancel: onCancel,
+          cancelText: cancelText,
+          footerButtons: renderWithOptions(footerButtons, opts),
+          noPadding: noPadding,
+          footer: renderWithOptions(footer, opts),
+          targetProps: opts,
+          isMobile: isMobile,
+          bodyScroll: bodyScroll,
+          children: renderWithOptions(children, opts)
+        })
+      })
+    });
+    return typeof modalRender === 'function' ? modalRender(drawerPanel) : drawerPanel;
+  };
+  const mobileWrapperClass = isMobile ? vertical ? style['drawer-wrapper-mobile-vertical'] : style['drawer-wrapper-mobile'] : null;
+  const panelLayoutStyles = {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column',
+    padding: 0
+  };
+  return {
+    ...props,
+    ...(drawerRender ? {
+      drawerRender
+    } : null),
+    placement,
+    ...sizeProp,
+    title: null,
+    maskClosable: Object.prototype.hasOwnProperty.call(props, 'maskClosable') ? props.maskClosable : false,
+    destroyOnHidden: true,
+    footer: null,
+    closable: false,
+    onClose,
+    rootClassName: classnames__default["default"](rootClassName, isMobile && style['drawer-root-mobile'], isMobile && fixedModeClass, modalRender && style['drawer-form-host'], drawerRender && style['drawer-host-render']),
+    classNames: Object.assign({}, propsClassNames, {
+      header: classnames__default["default"](style['drawer-antd-header'], propsClassNames?.header),
+      footer: classnames__default["default"](style['drawer-antd-footer'], propsClassNames?.footer),
+      body: classnames__default["default"](style['drawer-antd-body'], isMobile && style['is-mobile'], propsClassNames?.body),
+      wrapper: classnames__default["default"](propsClassNames?.wrapper, mobileWrapperClass),
+      mask: classnames__default["default"](propsClassNames?.mask, isMobile && fixedModeClass)
+    }),
+    className: classnames__default["default"](className, style['drawer'], style[size], {
+      [style['is-mobile']]: isMobile
+    }),
+    style: Object.assign({}, cssVars, propsStyle, vertical ? {
+      '--kne-drawer-viewport-height': dimension
+    } : null),
+    styles: {
+      ...propsStyles,
+      body: {
+        padding: 0,
+        ...propsStyles?.body,
+        flex: '1 1 auto',
+        minHeight: 0,
+        display: 'flex',
+        flexDirection: 'column',
+        overflow: 'hidden',
+        ...(isMobile ? {
+          height: '100%',
+          maxHeight: '100%'
+        } : null)
+      },
+      section: {
+        ...panelLayoutStyles,
+        ...propsStyles?.section,
+        ...propsStyles?.content
+      },
+      wrapper: {
+        ...propsStyles?.wrapper,
+        ...(vertical ? {
+          height: 'var(--kne-drawer-viewport-height, 100vh)',
+          maxHeight: '100%'
+        } : {
+          height: '100%'
+        }),
+        ...(isMobile && !vertical ? {
+          width: 'var(--kne-viewport-width, 100vw)',
+          maxWidth: '100%'
+        } : null),
+        ...(isMobile && vertical ? {
+          height: 'var(--kne-viewport-height, 100vh)',
+          maxHeight: '100%'
+        } : null)
+      }
+    },
+    children: /*#__PURE__*/jsxRuntime.jsx(DrawerLocaleRoot, {
+      children: runChildren({})
+    })
+  };
+};
+const Drawer = withLocale(({
+  size = 'default',
+  placement = 'right',
+  getContainer,
+  open,
+  bodyScroll = true,
+  ...props
+}) => {
+  const hostRef = react.useRef(null);
+  const {
+    isMobile,
+    fixedModeClass,
+    getPopupContainer,
+    anchorRef
+  } = responsiveUtils.useMobilePopupMount({
+    ...boundaryPopupMountOptions$1,
+    getPopupContainer: wrapCustomGetContainer$1(getContainer)
+  });
+  const getScrollElement = responsiveUtils.useScrollElement();
+  useLockParentScroll(!!open, getScrollElement);
+  const setAnchorRef = node => {
+    hostRef.current = node;
+    anchorRef(node);
+  };
+  const getDrawerContainer = resolveDrawerGetContainer({
+    customGetContainer: getContainer,
+    getPopupContainer,
+    getHostNode: () => hostRef.current
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      ref: setAnchorRef,
+      className: style['drawer-host'],
+      "aria-hidden": "true"
+    }), /*#__PURE__*/jsxRuntime.jsx(antd.Drawer, {
+      ...computedDrawerProps(Object.assign({}, props, {
+        size,
+        placement,
+        isMobile,
+        open,
+        fixedModeClass,
+        bodyScroll
+      })),
+      open: open,
+      getContainer: getDrawerContainer
+    })]
+  });
+});
+
+const usePatchElement = () => {
+  const [elements, setElements] = react.useState([]);
+  const patchElement = react.useCallback(element => {
+    setElements(originElements => [...originElements, element]);
+    return () => {
+      setElements(originElements => originElements.filter(ele => ele !== element));
+    };
+  }, []);
+  return [elements, patchElement];
+};
+
+const VIEWPORT_EXAMPLE_SELECTORS$1 = ['.example-driver-device-scroll'];
+const boundaryPopupMountOptions = {
+  cover: 'boundary',
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS$1
+};
+const wrapCustomGetContainer = customGetContainer => {
+  if (!customGetContainer) {
+    return undefined;
+  }
+  if (typeof customGetContainer === 'function') {
+    return triggerNode => customGetContainer(triggerNode) || null;
+  }
+  return () => customGetContainer;
+};
+const drawerApiRef = {
+  current: null
+};
+let hookDrawerUuid = 0;
+const HookDrawer = /*#__PURE__*/react.forwardRef(({
+  config,
+  afterClose: hookAfterClose
+}, ref) => {
+  const [open, setOpen] = react.useState(true);
+  const [innerConfig, setInnerConfig] = react.useState(config);
+  const hostRef = react.useRef(null);
+  const {
+    getPopupContainer,
+    anchorRef
+  } = responsiveUtils.useMobilePopupMount({
+    ...boundaryPopupMountOptions,
+    getPopupContainer: wrapCustomGetContainer(innerConfig.getContainer)
+  });
+  const close = () => {
+    setOpen(false);
+  };
+  react.useImperativeHandle(ref, () => ({
+    destroy: close,
+    update: newConfig => {
+      setInnerConfig(origin => Object.assign({}, origin, typeof newConfig === 'function' ? newConfig(origin) : newConfig));
+    }
+  }));
+  const {
+    getContainer,
+    afterClose: userAfterClose,
+    ...restConfig
+  } = innerConfig;
+  const mergedAfterClose = function () {
+    var args = [].slice.call(arguments);
+    hookAfterClose && hookAfterClose(...args);
+    userAfterClose && userAfterClose(...args);
+  };
+  const drawerProps = computedDrawerProps({
+    ...restConfig,
+    onClose: close,
+    afterClose: mergedAfterClose
+  });
+  const getDrawerContainer = resolveDrawerGetContainer({
+    customGetContainer: getContainer,
+    getPopupContainer,
+    getHostNode: () => hostRef.current
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/jsxRuntime.jsx("span", {
+      ref: node => {
+        hostRef.current = node;
+        anchorRef(node);
+      },
+      "aria-hidden": "true",
+      style: {
+        position: 'absolute',
+        width: 0,
+        height: 0,
+        overflow: 'hidden'
+      }
+    }), /*#__PURE__*/jsxRuntime.jsx(antd.Drawer, {
+      ...drawerProps,
+      open: open,
+      getContainer: getDrawerContainer
+    })]
+  });
+});
+const ElementsHolder = /*#__PURE__*/react.memo(/*#__PURE__*/react.forwardRef((_props, ref) => {
+  const [elements, patchElement] = usePatchElement();
+  react.useImperativeHandle(ref, () => ({
+    patchElement
+  }), [patchElement]);
+  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
+    children: elements
+  });
+}));
+const useDrawerHolder = () => {
+  const holderRef = react.useRef(null);
+  const [actionQueue, setActionQueue] = react.useState([]);
+  const {
+    resolveMount,
+    getPopupContainer
+  } = responsiveUtils.useMobilePopupMount(boundaryPopupMountOptions);
+  const getScrollElement = responsiveUtils.useScrollElement();
+  react.useEffect(() => {
+    if (actionQueue.length) {
+      const cloneQueue = [...actionQueue];
+      cloneQueue.forEach(action => action());
+      setActionQueue([]);
+    }
+  }, [actionQueue]);
+  const drawer = react.useCallback(props => {
+    hookDrawerUuid += 1;
+    const drawerRef = /*#__PURE__*/react.createRef();
+    const api = {};
+    let closeFunc;
+    let unlock = () => {};
+    const runOpen = () => {
+      const anchor = typeof document !== 'undefined' ? document.activeElement : null;
+      const {
+        isMobile,
+        fixedModeClass
+      } = resolveMount(anchor);
+      unlock = lockParentScroll(getScrollElement);
+      const {
+        afterClose: userAfterClose,
+        getContainer: customGetContainer,
+        ...restProps
+      } = props;
+      const drawerEl = /*#__PURE__*/jsxRuntime.jsx(HookDrawer, {
+        ref: drawerRef,
+        config: {
+          ...restProps,
+          isMobile,
+          fixedModeClass,
+          getContainer: customGetContainer,
+          onClose: () => api.close(),
+          afterClose: function () {
+            unlock();
+            userAfterClose && userAfterClose(...[].slice.call(arguments));
+          }
+        },
+        afterClose: () => {
+          closeFunc && closeFunc();
+        }
+      }, `react-drawer-${hookDrawerUuid}`);
+      closeFunc = holderRef.current?.patchElement(drawerEl);
+    };
+    if (holderRef.current?.patchElement) {
+      runOpen();
+    } else {
+      setActionQueue(prev => [...prev, runOpen]);
+    }
+    api.close = () => {
+      if (drawerRef.current) {
+        drawerRef.current.destroy();
+      } else {
+        setActionQueue(prev => [...prev, () => drawerRef.current?.destroy()]);
+      }
+    };
+    return api;
+  }, [getScrollElement, resolveMount]);
+  return [drawer, /*#__PURE__*/jsxRuntime.jsx(ElementsHolder, {
+    ref: holderRef
+  }, "drawer-elements-holder")];
+};
+const DrawerContextHolder = () => {
+  const [drawer, contextHolder] = useDrawerHolder();
+  drawerApiRef.current = drawer;
+  return contextHolder;
+};
+const useDrawer = () => {
+  if (!drawerApiRef.current) {
+    throw new Error('useDrawer requires <DrawerContextHolder /> mounted inside <App> before calling useDrawer()');
+  }
+  return drawerApiRef.current;
+};
+
+var confirmStyle = {"kne-responsive-boundary":"kne-react-modal_6tGX5","kne-responsive-scroll":"kne-react-modal_DOfki","confirm-modal-wrap":"kne-react-modal_NZArM","is-mobile":"kne-react-modal_PJp65","is-danger":"kne-react-modal_LUqb9","title-icon":"kne-react-modal_WAuWk","titleRow":"kne-react-modal_oEIMf","contentRow":"kne-react-modal_VFlnj","titleIcon":"kne-react-modal_UDO1-","title-icon-confirm":"kne-react-modal_w4spp","title-icon-info":"kne-react-modal_9DX59","title-icon-success":"kne-react-modal_pFvwL","title-icon-warning":"kne-react-modal_Wv7-o","title-icon-error":"kne-react-modal_0cNi0","titleText":"kne-react-modal_vDt06","contentText":"kne-react-modal_i15SX","has-title":"kne-react-modal_reDXC","has-icon":"kne-react-modal_Mpjjc","is-mobile-block":"kne-react-modal_C7-hV"};
+
+const ConfirmLocaleRoot = withLocale(({
+  children
+}) => children);
+const VIEWPORT_EXAMPLE_SELECTORS = ['.example-driver-device-scroll'];
+const viewportPopupMountOptions = {
+  cover: 'viewport',
+  exampleSelectors: VIEWPORT_EXAMPLE_SELECTORS
+};
+const ICON_BY_TYPE = {
+  info: icons.InfoCircleFilled,
+  confirm: icons.ExclamationCircleFilled,
+  warning: icons.ExclamationCircleFilled,
+  error: icons.CloseCircleFilled,
+  success: icons.CheckCircleFilled
+};
+const getIconKind = (type, confirmType) => type === 'confirm' ? confirmType : type;
+const shouldShowDefaultIcon = ({
+  type,
+  danger,
+  icon
+}) => {
+  if (icon === false || icon === null) {
+    return false;
+  }
+  if (type === 'confirm') {
+    return !!danger;
+  }
+  return ['info', 'success', 'warning', 'error'].includes(type);
+};
+const getConfirmIconNode = ({
+  type,
+  confirmType = 'info',
+  danger,
+  icon
+}) => {
+  if (icon) {
+    return icon;
+  }
+  if (!shouldShowDefaultIcon({
+    type,
+    danger,
+    icon
+  })) {
+    return null;
+  }
+  const kind = getIconKind(type, confirmType);
+  const IconComponent = ICON_BY_TYPE[kind] || ICON_BY_TYPE.info;
+  return /*#__PURE__*/jsxRuntime.jsx(IconComponent, {
+    className: classnames__default["default"](confirmStyle['title-icon'], confirmStyle[`title-icon-${kind}`])
+  });
+};
+const buildConfirmContent = ({
+  type,
+  confirmType,
+  title,
+  message,
+  danger,
+  icon,
+  isMobile
+}) => {
+  const iconNode = getConfirmIconNode({
+    type,
+    confirmType,
+    danger,
+    icon
+  });
+  const mobileClass = isMobile ? confirmStyle['is-mobile-block'] : null;
+  return {
+    title: title ? /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classnames__default["default"](confirmStyle.titleRow, mobileClass),
+      onClick: e => {
+        e.stopPropagation();
+      },
+      children: [iconNode ? /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: confirmStyle.titleIcon,
+        children: iconNode
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: confirmStyle.titleText,
+        children: title
+      })]
+    }) : null,
+    content: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      className: classnames__default["default"](confirmStyle.contentRow, mobileClass, {
+        [confirmStyle['has-title']]: title,
+        [confirmStyle['has-icon']]: !!iconNode && title
+      }),
+      children: [!title && iconNode ? /*#__PURE__*/jsxRuntime.jsx("span", {
+        className: confirmStyle.titleIcon,
+        children: iconNode
+      }) : null, /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: confirmStyle.contentText,
+        children: message
+      })]
+    })
+  };
+};
+const mapConfirmProps = (props, {
+  isMobile,
+  fixedModeClass,
+  getPopupContainer,
+  anchor,
+  unlock,
+  userAfterClose
+}) => {
+  const {
+    type = 'confirm',
+    icon,
+    title,
+    danger,
+    wrapClassName,
+    message,
+    confirmType = 'info',
+    getContainer: customGetContainer,
+    onConfirm,
+    onCancel,
+    confirmText,
+    cancelText,
+    afterClose,
+    zIndex,
+    ...otherProps
+  } = {
+    maskClosable: false,
+    ...props
+  };
+  const {
+    title: confirmTitle,
+    content
+  } = buildConfirmContent({
+    type,
+    confirmType,
+    title,
+    message,
+    danger,
+    icon,
+    isMobile
+  });
+  return {
+    modalMethod: type,
+    config: {
+      ...otherProps,
+      zIndex: zIndex ?? 1100,
+      okText: confirmText ?? otherProps.okText,
+      cancelText: cancelText ?? otherProps.cancelText,
+      onOk: onConfirm ?? otherProps.onOk,
+      onCancel: onCancel ?? otherProps.onCancel,
+      getContainer: resolveModalGetContainer({
+        customGetContainer,
+        getPopupContainer,
+        getHostNode: () => anchor
+      }),
+      centered: true,
+      afterClose: function () {
+        var args = [].slice.call(arguments);
+        unlock();
+        userAfterClose && userAfterClose(...args);
+        afterClose && afterClose(...args);
+      },
+      icon: null,
+      classNames: {
+        mask: classnames__default["default"](isMobile && modalStyle['modal-mask-fullscreen'], isMobile && fixedModeClass, otherProps.classNames?.mask)
+      },
+      wrapClassName: classnames__default["default"](modalStyle['modal-wrap'], confirmStyle['confirm-modal-wrap'], wrapClassName, {
+        [confirmStyle['is-danger']]: danger,
+        [confirmStyle['is-mobile']]: isMobile,
+        [modalStyle['modal-wrap-centered']]: isMobile,
+        [fixedModeClass]: isMobile
+      }),
+      title: confirmTitle ? /*#__PURE__*/jsxRuntime.jsx(ConfirmLocaleRoot, {
+        children: confirmTitle
+      }) : null,
+      content: /*#__PURE__*/jsxRuntime.jsx(ConfirmLocaleRoot, {
+        children: content
+      })
+    }
+  };
+};
+const useConfirmModal = () => {
+  const {
+    modal
+  } = antd.App.useApp();
+  const {
+    resolveMount,
+    getPopupContainer
+  } = responsiveUtils.useMobilePopupMount(viewportPopupMountOptions);
+  const getScrollElement = responsiveUtils.useScrollElement();
+  return props => {
+    const anchor = typeof document !== 'undefined' ? document.activeElement : null;
+    const {
+      isMobile,
+      fixedModeClass
+    } = resolveMount(anchor);
+    const unlock = lockParentScroll$1(getScrollElement);
+    const api = {};
+    const {
+      afterClose: userAfterClose,
+      ...restProps
+    } = props;
+    const {
+      modalMethod,
+      config
+    } = mapConfirmProps({
+      ...restProps,
+      onClose: () => api.close()
+    }, {
+      isMobile,
+      fixedModeClass,
+      getPopupContainer,
+      anchor,
+      unlock,
+      userAfterClose
+    });
+    if (typeof modal[modalMethod] === 'function') {
+      const {
+        destroy
+      } = modal[modalMethod](config);
+      api.close = destroy;
+    } else {
+      unlock();
+      api.close = () => {};
+    }
+    return api;
+  };
+};
+
+const ScrollRegion = ({
   className,
   inset = false,
   children,
@@ -534,7 +1326,7 @@ const ModalScrollRegion = ({
   })
 });
 
-const ModalTabsLayout = ({
+const TabsLayout = ({
   className,
   destroyOnHidden = true,
   ...props
@@ -557,7 +1349,7 @@ const resolveColStyle = width => {
     minWidth: 0
   };
 };
-const ModalColumnsLayout = ({
+const ColumnsLayout = ({
   widths,
   className,
   children,
@@ -580,16 +1372,26 @@ const createModalRender = modalDefaults => hostProps => /*#__PURE__*/jsxRuntime.
   ...hostProps
 });
 
+const createDrawerRender = drawerDefaults => hostProps => /*#__PURE__*/jsxRuntime.jsx(Drawer, {
+  ...drawerDefaults,
+  ...hostProps
+});
+
 const modalClassNames = {
   stepsForm: 'react-modal-steps-form',
   splitter: 'react-modal-splitter'
 };
 
-exports.ModalColumnsLayout = ModalColumnsLayout;
-exports.ModalScrollRegion = ModalScrollRegion;
-exports.ModalTabsLayout = ModalTabsLayout;
+exports.ColumnsLayout = ColumnsLayout;
+exports.Drawer = Drawer;
+exports.DrawerContextHolder = DrawerContextHolder;
+exports.ScrollRegion = ScrollRegion;
+exports.TabsLayout = TabsLayout;
+exports.createDrawerRender = createDrawerRender;
 exports.createModalRender = createModalRender;
 exports["default"] = Modal;
 exports.modalClassNames = modalClassNames;
+exports.useConfirmModal = useConfirmModal;
+exports.useDrawer = useDrawer;
 exports.useModal = useModal;
 //# sourceMappingURL=index.js.map