@dreamcommerce/aurora 3.0.0-99 → 3.0.0

package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js

@@ -1,89 +1,180 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useRef, useCallback, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../../utilities/cn.js';
+import { useClickOutside } from '../../../../hooks/use_click_outside.js';
 import { createPortal } from 'react-dom';
 import { MODAL_VISIBILITY_STATE, MODAL_SLIDE_FADE_DURATION, MODAL_WIDTH_VARIANT } from '../../modal_constants.js';
 import { ModalFooter } from './modal_footer.js';
 import { ModalHeader } from './modal_header.js';
+import { ModalUtils } from './modal_utils.js';
 import { modalVariants } from '../../modal_variants.js';
 import { useModalsContext } from '../../hooks/use_modals_context.js';
 
 var Modal = function Modal(_ref) {
+  var _header$hasCloseIcon;
   var name = _ref.name,
     hideAllModalsOnClose = _ref.hideAllModalsOnClose,
     _ref$width = _ref.width,
     width = _ref$width === void 0 ? MODAL_WIDTH_VARIANT.m : _ref$width,
-    _ref$hasCloseIcon = _ref.hasCloseIcon,
-    hasCloseIcon = _ref$hasCloseIcon === void 0 ? true : _ref$hasCloseIcon,
     onCloseAction = _ref.onCloseAction,
     header = _ref.header,
     footer = _ref.footer,
-    children = _ref.children;
+    children = _ref.children,
+    _ref$closeOnOutsideCl = _ref.closeOnOutsideClick,
+    closeOnOutsideClick = _ref$closeOnOutsideCl === void 0 ? true : _ref$closeOnOutsideCl,
+    _ref$closeOnEscButton = _ref.closeOnEscButton,
+    closeOnEscButton = _ref$closeOnEscButton === void 0 ? true : _ref$closeOnEscButton,
+    _ref$initiallyVisible = _ref.initiallyVisible,
+    initiallyVisible = _ref$initiallyVisible === void 0 ? false : _ref$initiallyVisible;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     visibleClass = _useState2[0],
     setVisibleClass = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isScrolledToBottom = _useState4[0],
+    setIsScrolledToBottom = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasScroll = _useState6[0],
+    setHasScroll = _useState6[1];
+  var scrollTimeoutRef = useRef();
+  var contentRef = useRef(null);
+  var modalRef = useRef(null);
+  var isInitializedRef = useRef(false);
   var _useModalsContext = useModalsContext(),
     modalsManagerContainerSelector = _useModalsContext.modalsManagerContainerSelector,
     addModal = _useModalsContext.addModal,
     getModal = _useModalsContext.getModal,
     hideModal = _useModalsContext.hideModal,
+    showModal = _useModalsContext.showModal,
     hideAllModals = _useModalsContext.hideAllModals;
   var $modalsManagerContainer = document.querySelector(modalsManagerContainerSelector);
   var modal = getModal(name);
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    renderModal = _useState4[0],
-    setRenderModal = _useState4[1];
-  useEffect(function () {
-    addModal({
-      name: name,
-      visibilityState: MODAL_VISIBILITY_STATE.none,
-      width: width
-    });
+  var _useState7 = useState(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    renderModal = _useState8[0],
+    setRenderModal = _useState8[1];
+  var closeModal = useCallback(function () {
+    hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
+  }, [hideAllModalsOnClose, hideAllModals, hideModal, name, onCloseAction]);
+  var checkScroll = useCallback(function () {
+    var contentElement = contentRef.current;
+    if (!contentElement) return;
+    var scrollTop = contentElement.scrollTop,
+      scrollHeight = contentElement.scrollHeight,
+      clientHeight = contentElement.clientHeight;
+    var atBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 5;
+    var hasScrollableContent = scrollHeight > clientHeight;
+    setIsScrolledToBottom(atBottom);
+    setHasScroll(hasScrollableContent);
   }, []);
+  var handleScroll = useCallback(function () {
+    if (scrollTimeoutRef.current) {
+      clearTimeout(scrollTimeoutRef.current);
+    }
+    scrollTimeoutRef.current = setTimeout(checkScroll, 50);
+  }, [checkScroll]);
+  // Handle scroll detection
+  useEffect(function () {
+    if (!renderModal || !visibleClass || !children) return;
+    var contentElement = contentRef.current;
+    if (!contentElement) return;
+    checkScroll();
+    contentElement.addEventListener('scroll', handleScroll);
+    return function () {
+      contentElement.removeEventListener('scroll', handleScroll);
+      if (scrollTimeoutRef.current) {
+        clearTimeout(scrollTimeoutRef.current);
+      }
+    };
+  }, [renderModal, visibleClass, handleScroll, checkScroll, children]);
+  // Initial setup
   useEffect(function () {
-    var showModalTimeout;
-    var hideModalTimeout;
-    if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.visible) {
-      setRenderModal(true);
-      showModalTimeout = setTimeout(function () {
-        setVisibleClass(true);
-      }, MODAL_SLIDE_FADE_DURATION);
+    if (!isInitializedRef.current) {
+      addModal({
+        name: name,
+        visibilityState: MODAL_VISIBILITY_STATE.none,
+        width: width
+      });
+      if (initiallyVisible) showModal(name);
+      isInitializedRef.current = true;
     }
-    if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.hidden) {
-      setVisibleClass(false);
+    return function () {
+      return closeModal();
+    };
+  }, []);
+  // Handle visibility changes
+  useEffect(function () {
+    var timeoutId;
+    switch (modal === null || modal === void 0 ? void 0 : modal.visibilityState) {
+      case MODAL_VISIBILITY_STATE.visible:
+        setRenderModal(true);
+        timeoutId = setTimeout(function () {
+          return setVisibleClass(true);
+        }, MODAL_SLIDE_FADE_DURATION);
+        break;
+      case MODAL_VISIBILITY_STATE.hidden:
+        setVisibleClass(false);
+        break;
+      case MODAL_VISIBILITY_STATE.none:
+        setVisibleClass(false);
+        timeoutId = setTimeout(function () {
+          return setRenderModal(false);
+        }, MODAL_SLIDE_FADE_DURATION);
+        break;
     }
-    if ((modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.none) {
-      setVisibleClass(false);
-      hideModalTimeout = setTimeout(function () {
-        setRenderModal(false);
-      }, MODAL_SLIDE_FADE_DURATION);
+    return function () {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+    };
+  }, [modal === null || modal === void 0 ? void 0 : modal.visibilityState]);
+  // Handle keyboard events
+  var handleKeyDown = useCallback(function (event) {
+    if (event.key === 'Escape' && closeOnEscButton) {
+      closeModal();
     }
+  }, [closeOnEscButton, closeModal]);
+  useEffect(function () {
+    document.addEventListener('keydown', handleKeyDown);
     return function () {
-      clearTimeout(showModalTimeout);
-      clearTimeout(hideModalTimeout);
+      return document.removeEventListener('keydown', handleKeyDown);
     };
-  }, [modal]);
-  var handleCloseModal = function handleCloseModal() {
-    hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
-  };
+  }, [handleKeyDown]);
+  // Handle outside click
+  useClickOutside({
+    refs: [modalRef],
+    callback: function callback() {
+      if (closeOnOutsideClick && (modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.visible) {
+        closeModal();
+      }
+    }
+  });
   if (!$modalsManagerContainer) return null;
   return renderModal ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
+    ref: modalRef,
     "data-modal-id": name,
     "data-test-id": "modal",
     className: cn(modalVariants({
       width: width
     }), visibleClass ? 'aurora-opacity-100 aurora-animate-modal-slide-in' : 'aurora-opacity-0 aurora-animate-modal-slide-out')
-  }, header && /*#__PURE__*/React.createElement(ModalHeader, {
-    hasCloseIcon: hasCloseIcon,
-    text: header.text,
-    onClose: handleCloseModal
-  }), children && /*#__PURE__*/React.createElement("div", {
-    className: "aurora-overflow-y-auto custom-scrollbar"
-  }, children), footer && /*#__PURE__*/React.createElement(ModalFooter, {
-    text: footer.text
-  })), $modalsManagerContainer) : null;
+  }, header && (/*#__PURE__*/React.createElement(ModalHeader, {
+    hasCloseIcon: ModalUtils.isHeaderObject(header) ? (_header$hasCloseIcon = header.hasCloseIcon) !== null && _header$hasCloseIcon !== void 0 ? _header$hasCloseIcon : true : true,
+    onClose: closeModal
+  }, ModalUtils.isHeaderObject(header) ? header.content : header)), children && (/*#__PURE__*/React.createElement("div", {
+    ref: contentRef,
+    className: cn("aurora-overflow-y-auto custom-scrollbar first:aurora-mt-6 last:aurora-mb-6 aurora-px-6", {
+      'aurora-pb-6': footer && hasScroll
+    }),
+    style: {
+      maxHeight: 'calc(100vh - 200px)'
+    }
+  }, children)), footer && (/*#__PURE__*/React.createElement(ModalFooter, {
+    className: cn('', {
+      'aurora-border-t': hasScroll && !isScrolledToBottom
+    })
+  }, footer))), $modalsManagerContainer) : null;
 };
 
 export { Modal };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_close_icon.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CloseLine } from '../../../../assets/icons/close_line.js';
+import { CloseLineIcon } from '../../../../assets/icons/close_line_icon.js';
 
 var ModalCloseIcon = function ModalCloseIcon(_ref) {
   var onClose = _ref.onClose;
@@ -9,7 +9,7 @@ var ModalCloseIcon = function ModalCloseIcon(_ref) {
       return onClose();
     },
     "data-test-id": "close-modal"
-  }, /*#__PURE__*/React.createElement(CloseLine, null));
+  }, /*#__PURE__*/React.createElement(CloseLineIcon, null));
 };
 
 export { ModalCloseIcon };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_footer.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { IModalFooterProps } from "../../modal_types";
-export declare const ModalFooter: FC<IModalFooterProps>;
+export declare const ModalFooter: ({ className, children }: PropsWithChildren<IModalFooterProps>) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_footer.js

@@ -1,11 +1,13 @@
 import React from 'react';
+import { cn } from '../../../../utilities/cn.js';
 
 var ModalFooter = function ModalFooter(_ref) {
-  var text = _ref.text;
+  var className = _ref.className,
+    children = _ref.children;
   return /*#__PURE__*/React.createElement("footer", {
-    className: 'aurora-flex aurora-items-center aurora-justify-end aurora-gap-3 aurora-mt-5',
+    className: cn('aurora-flex aurora-items-center aurora-justify-end aurora-gap-3 aurora-pt-5 aurora-pb-6 aurora-px-6', className),
     "data-test-id": "modal-footer"
-  }, text);
+  }, children);
 };
 
 export { ModalFooter };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_footer.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_header.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
+import React, { PropsWithChildren } from 'react';
 import { IModalHeaderProps } from "../../modal_types";
-export declare const ModalHeader: FC<IModalHeaderProps>;
+export declare const ModalHeader: ({ onClose, hasCloseIcon, children }: PropsWithChildren<IModalHeaderProps>) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_header.js

@@ -2,16 +2,15 @@ import React from 'react';
 import { ModalCloseIcon } from './modal_close_icon.js';
 
 var ModalHeader = function ModalHeader(_ref) {
-  var _ref$text = _ref.text,
-    text = _ref$text === void 0 ? '' : _ref$text,
-    onClose = _ref.onClose,
-    hasCloseIcon = _ref.hasCloseIcon;
+  var onClose = _ref.onClose,
+    hasCloseIcon = _ref.hasCloseIcon,
+    children = _ref.children;
   return /*#__PURE__*/React.createElement("header", {
-    className: 'aurora-flex aurora-items-center aurora-justify-between aurora-mb-5',
+    className: 'aurora-flex aurora-items-center aurora-justify-between aurora-pt-6 aurora-pb-5 aurora-px-6 aurora-mb-6 aurora-border-b',
     "data-test-id": "modal-header"
-  }, /*#__PURE__*/React.createElement("h3", {
+  }, children ? /*#__PURE__*/React.createElement("h3", {
     className: "aurora-font-bold aurora-text-xl"
-  }, text), hasCloseIcon && /*#__PURE__*/React.createElement(ModalCloseIcon, {
+  }, children) : null, hasCloseIcon && /*#__PURE__*/React.createElement(ModalCloseIcon, {
     onClose: onClose
   }));
 };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_header.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_utils.d.ts

@@ -0,0 +1,4 @@
+import { THeaderObject } from "../../modal_types";
+export declare class ModalUtils {
+    static isHeaderObject(header: any): header is THeaderObject;
+}

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_utils.js

@@ -0,0 +1,16 @@
+import { createClass as _createClass, typeof as _typeof, classCallCheck as _classCallCheck } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+
+var ModalUtils = /*#__PURE__*/function () {
+  function ModalUtils() {
+    _classCallCheck(this, ModalUtils);
+  }
+  return _createClass(ModalUtils, null, [{
+    key: "isHeaderObject",
+    value: function isHeaderObject(header) {
+      return header && _typeof(header) === 'object' && header.content !== undefined;
+    }
+  }]);
+}();
+
+export { ModalUtils };
+//# sourceMappingURL=modal_utils.js.map

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.d.ts

@@ -1,6 +1,2 @@
-import React, { ReactNode } from 'react';
-interface IModalsWrapperProps {
-    children: ReactNode;
-}
-export declare const ModalsWrapper: React.FC<IModalsWrapperProps>;
-export {};
+import React from 'react';
+export declare const ModalsWrapper: React.FC;

package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.js

@@ -4,8 +4,7 @@ import { createPortal } from 'react-dom';
 import { MODALS_WRAPPER_BACKDROP_FADE_DURATION, MODALS_CONTENT_ID } from '../modal_constants.js';
 import { useModalsContext } from '../hooks/use_modals_context.js';
 
-var ModalsWrapper = function ModalsWrapper(_ref) {
-  var children = _ref.children;
+var ModalsWrapper = function ModalsWrapper() {
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     showWrapper = _useState2[0],
@@ -31,14 +30,14 @@ var ModalsWrapper = function ModalsWrapper(_ref) {
       return clearTimeout(showWrapperTimeout);
     };
   }, [openedModals]);
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", null, showWrapper && (/*#__PURE__*/React.createElement("div", {
-    className: "aurora-fixed aurora-flex aurora-items-center aurora-justify-center aurora-top-0 aurora-left-0 aurora-w-full aurora-h-full aurora-z-20 aurora-p-4"
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement(React.Fragment, null, showWrapper && (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-fixed aurora-flex aurora-items-center aurora-justify-center aurora-top-0 aurora-left-0 aurora-w-full aurora-h-full aurora-z-[1000] aurora-p-4"
   }, /*#__PURE__*/React.createElement("div", {
     className: "aurora-absolute aurora-inset-x-0 aurora-inset-y-0 aurora-bg-inverse aurora-z-10 aurora-transition-opacity aurora-duration-300 aurora-animate-modal-backdrop-fade-in ".concat(visibleClass ? 'aurora-opacity-70' : 'aurora-opacity-0', " js__modal-mask")
   }), /*#__PURE__*/React.createElement("div", {
     id: MODALS_CONTENT_ID,
     className: "aurora-flex aurora-items-center aurora-justify-center aurora-z-30"
-  }))), children), document.body);
+  })))), document.body);
 };
 
 export { ModalsWrapper };

package/build/esm/packages/aurora/src/components/modal/components/modals_wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/modal_types.d.ts

@@ -20,19 +20,23 @@ export interface IModalNewProps extends React.HTMLAttributes<HTMLDivElement> {
     name: string;
     hideAllModalsOnClose?: boolean;
     width?: typeof MODAL_WIDTH_VARIANT[keyof typeof MODAL_WIDTH_VARIANT];
-    hasCloseIcon?: boolean;
     onCloseAction?: () => void;
-    header?: Pick<IModalHeaderProps, 'text'>;
-    footer?: IModalFooterProps;
+    header?: THeaderObject | React.ReactNode | string;
+    footer?: string | React.ReactNode;
     children?: React.ReactNode;
+    closeOnOutsideClick?: boolean;
+    closeOnEscButton?: boolean;
+    initiallyVisible?: boolean;
 }
+export declare type THeaderObject = {
+    hasCloseIcon?: boolean;
+    content: React.ReactNode;
+};
 export interface IModalHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-    text?: string | React.ReactNode;
     hasCloseIcon?: boolean;
     onClose: () => void;
 }
 export interface IModalFooterProps extends React.HTMLAttributes<HTMLDivElement> {
-    text: React.ReactNode;
 }
 export interface IModalCloseIconProps extends React.HTMLAttributes<HTMLButtonElement> {
     onClose: () => void;

package/build/esm/packages/aurora/src/components/modal/modal_variants.js

@@ -2,7 +2,7 @@ import { defineProperty as _defineProperty } from '../../../../../_virtual/_roll
 import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
 import { MODAL_WIDTH_VARIANT } from './modal_constants.js';
 
-var modalVariants = cva('aurora-flex aurora-flex-col aurora-w-full aurora-max-h-[90vh] aurora-absolute aurora-bg aurora-rounded-16 aurora-shadow-xl aurora-p-6 aurora-opacity-0 aurora-transition-all js__modal', {
+var modalVariants = cva('aurora-flex aurora-flex-col aurora-w-full aurora-max-h-[90vh] aurora-absolute aurora-bg aurora-rounded-16 aurora-shadow-xl aurora-opacity-0 aurora-transition-all js__modal', {
   variants: {
     width: _defineProperty(_defineProperty(_defineProperty({}, MODAL_WIDTH_VARIANT.s, 'aurora-max-w-[25rem]'), MODAL_WIDTH_VARIANT.m, 'aurora-max-w-[40rem]'), MODAL_WIDTH_VARIANT.l, 'aurora-max-w-[61rem]')
   },

package/build/esm/packages/aurora/src/components/modal/modals_manager.js

@@ -28,7 +28,7 @@ var ModalsManager = function ModalsManager(_ref) {
   }, [modalsManagerContainerSelector, addModal, updateModal, getModal, showModal, hideModal, hideAllModals, openedModals]);
   return /*#__PURE__*/React.createElement(ModalsManagerContext.Provider, {
     value: value
-  }, /*#__PURE__*/React.createElement(ModalsWrapper, null, children));
+  }, /*#__PURE__*/React.createElement(ModalsWrapper, null), children);
 };
 
 export { ModalsManager };

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.d.ts

@@ -1,3 +1,3 @@
-import { TMultiSelectContentProps } from '../multiselect_types';
 import React from 'react';
+import { TMultiSelectContentProps } from '../multiselect_types';
 export declare const MultiSelectContent: React.ForwardRefExoticComponent<TMultiSelectContentProps & React.RefAttributes<HTMLDivElement>>;

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.js

@@ -2,12 +2,13 @@ import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
 import { Content } from '@radix-ui/react-dropdown-menu';
-import { Input } from '../../input/input.js';
-import { SearchLineIcon } from '../../../assets/icons/search_icon.js';
+import { Root, Viewport, Scrollbar, Thumb } from '../../../../../../external/@radix-ui/react-scroll-area/dist/index.mjs.js';
 import { MultiSelectGroupLabel } from './multiselect_group_label.js';
 import { MultiSelectItem } from './multiselect_item.js';
+import { MultiSelectSearch } from './multiselect_search.js';
+import { MultiSelectUtils } from '../multiselect_utils.js';
 
-var _excluded = ["options", "selectedOptions", "toggleOption", "triggerWidth", "hasSearch", "searchPlaceholder", "className"];
+var _excluded = ["options", "selectedOptions", "toggleOption", "triggerWidth", "hasSearch", "searchPlaceholder", "className", "searchNotFoundContent"];
 var MultiSelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var options = _ref.options,
     selectedOptions = _ref.selectedOptions,
@@ -16,42 +17,49 @@ var MultiSelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     hasSearch = _ref.hasSearch,
     searchPlaceholder = _ref.searchPlaceholder,
     className = _ref.className,
+    searchNotFoundContent = _ref.searchNotFoundContent,
     props = _objectWithoutProperties(_ref, _excluded);
   var _React$useState = React.useState(''),
     _React$useState2 = _slicedToArray(_React$useState, 2),
-    searchTerm = _React$useState2[0],
-    setSearchTerm = _React$useState2[1];
-  var filteredOptions = options.filter(function (option) {
-    var _searchTerm$toLowerCa;
-    return option.text.toLowerCase().includes((_searchTerm$toLowerCa = searchTerm === null || searchTerm === void 0 ? void 0 : searchTerm.toLowerCase()) !== null && _searchTerm$toLowerCa !== void 0 ? _searchTerm$toLowerCa : '');
-  });
+    search = _React$useState2[0],
+    setSearch = _React$useState2[1];
+  var searchVisibleItems = 0;
   return /*#__PURE__*/React.createElement(Content, _objectSpread2(_objectSpread2({
-    className: cn("aurora-z-50 aurora-bg aurora-flex aurora-flex-col aurora-gap-1 aurora-mt-1 aurora-overflow-hidden aurora-rounded-8 aurora-border aurora-p-3 aurora-shadow-m data-[state=open]:aurora-animate-in data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[state=open]:aurora-fade-in-0 data-[state=closed]:aurora-zoom-out-95 data-[state=open]:aurora-zoom-in-95 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2", className)
+    className: cn("aurora-w-[--radix-dropdown-menu-trigger-width] aurora-min-w-[20rem] aurora-max-h-96 aurora-z-50 aurora-bg aurora-flex aurora-flex-col aurora-gap-1 aurora-mt-1 aurora-overflow-hidden aurora-rounded-8 aurora-border aurora-p-1 aurora-shadow-m data-[state=open]:aurora-animate-in data-[state=closed]:aurora-animate-out data-[state=closed]:aurora-fade-out-0 data-[state=open]:aurora-fade-in-0 data-[state=closed]:aurora-zoom-out-95 data-[state=open]:aurora-zoom-in-95 data-[side=bottom]:aurora-slide-in-from-top-2 data-[side=left]:aurora-slide-in-from-right-2 data-[side=right]:aurora-slide-in-from-left-2 data-[side=top]:aurora-slide-in-from-bottom-2 js__aurora-select-dropdown aurora-group", className)
   }, props), {}, {
-    ref: ref,
-    style: {
-      width: "".concat(triggerWidth, "px")
-    }
-  }), hasSearch && (/*#__PURE__*/React.createElement("div", {
+    ref: ref
+  }), /*#__PURE__*/React.createElement(Root, {
+    type: "auto",
+    className: "aurora-w-full aurora-max-h-60 relative"
+  }, /*#__PURE__*/React.createElement(Viewport, {
+    className: cn('aurora-p-1 aurora-max-h-60 aurora-w-full')
+  }, hasSearch && (/*#__PURE__*/React.createElement("div", {
     className: "aurora-p-2"
-  }, /*#__PURE__*/React.createElement(Input, {
-    type: "text",
-    preElement: /*#__PURE__*/React.createElement(SearchLineIcon, {
-      className: "aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light"
-    }),
-    value: searchTerm,
+  }, /*#__PURE__*/React.createElement(MultiSelectSearch, {
+    value: search,
     tabIndex: 0,
     onChange: function onChange(e) {
       e.stopPropagation();
-      setSearchTerm(e.target.value);
+      setSearch(e.target.value);
     },
     onKeyDown: function onKeyDown(e) {
       e.stopPropagation();
     },
     placeholder: searchPlaceholder
-  }))), filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map(function (option) {
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-gap-1"
+  }, options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+    var visible = true;
+    if (hasSearch && search && !option.isHeader) {
+      visible = MultiSelectUtils.isOptionVisible(option, search);
+      if (visible) searchVisibleItems++;
+    }
+    if (hasSearch && search && option.isHeader) {
+      visible = MultiSelectUtils.isHeaderVisible(search, options, index);
+    }
     return option.isHeader ? (/*#__PURE__*/React.createElement(MultiSelectGroupLabel, {
-      key: option.text
+      key: option.text,
+      className: cn(!visible && 'aurora-hidden')
     }, option.text)) : (/*#__PURE__*/React.createElement(MultiSelectItem, {
       key: "select-item-".concat(option.value),
       option: option,
@@ -60,9 +68,17 @@ var MultiSelectContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       isSelected: selectedOptions.some(function (selected) {
         return selected.value === option.value;
       }),
-      toggleOption: toggleOption
+      toggleOption: toggleOption,
+      className: cn(!visible && 'aurora-hidden')
     }, option.text));
-  }));
+  }), !!hasSearch && !!search && !searchVisibleItems && !!searchNotFoundContent && (/*#__PURE__*/React.createElement("div", {
+    className: "aurora-p-2"
+  }, searchNotFoundContent)))), /*#__PURE__*/React.createElement(Scrollbar, {
+    orientation: "vertical",
+    className: cn('aurora-w-2 aurora-absolute aurora-right-0 aurora-top-0 aurora-bottom-0 aurora-py-1 aurora-pr-[2px] aurora-transition-opacity aurora-duration-200 aurora-opacity-0 group-hover:aurora-opacity-75')
+  }, /*#__PURE__*/React.createElement(Thumb, {
+    className: "aurora-bg-neutral-700 aurora-rounded-full"
+  }))));
 });
 MultiSelectContent.displayName = 'MultiSelectContent';
 

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_content.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,iDAAiD,0EAA8E;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_group_label.d.ts

@@ -1,6 +1,6 @@
 import React, { PropsWithChildren } from 'react';
-import { TDividerProps } from "../../divider/divider_types";
+import { TBoxProps } from "../../box/box_types";
 export declare const MultiSelectGroupLabel: {
-    ({ children, ...props }: PropsWithChildren<TDividerProps>): React.JSX.Element;
+    ({ children, ...props }: PropsWithChildren<TBoxProps>): React.JSX.Element;
     displayName: string;
 };

package/build/esm/packages/aurora/src/components/multiselect/components/multiselect_group_label.js

@@ -9,22 +9,22 @@ var _excluded = ["children"];
 var MultiSelectGroupLabel = function MultiSelectGroupLabel(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Box, {
+  return /*#__PURE__*/React.createElement(Box, _objectSpread2({
     paddings: {
       pl: '2',
       pt: '2',
       pb: '2',
       pr: '0'
     }
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, props), /*#__PURE__*/React.createElement(Stack, {
     align: "center",
     spacing: "2.5"
   }, /*#__PURE__*/React.createElement(Typography, {
-    className: "aurora-whitespace-nowrap",
+    className: "aurora-whitespace-nowrap first-letter:aurora-uppercase",
     size: "s",
     color: "subtle",
     weight: "bold"
-  }, children), /*#__PURE__*/React.createElement(Divider, _objectSpread2({}, props))));
+  }, children), /*#__PURE__*/React.createElement(Divider, null)));
 };
 MultiSelectGroupLabel.displayName = 'MultiSelectGroupLabel';