@nimbus-ds/modal 1.6.0 → 1.8.0

package/CHANGELOG.md

@@ -1,7 +1,21 @@
 # Changelog
 
+## 2026-01-08 `1.8.0`
+
+The Modal component allows us to call the user's attention to a floating box that can have text, actions or forms to perform tasks by changing the focus from the background. It is an intrusive component as it interrupts the user's operation to present a message or content.
+
+#### 🎉 New features
+
+- Added `tag` property to `Modal.Header` component to display a tag next to the title. ([#401](https://github.com/TiendaNube/nimbus-design-system/pull/401) by [@joacotornello](https://github.com/joacotornello))
+
+## 2025-08-25 `1.7.0`
+
 The Modal component allows us to call the user's attention to a floating box that can have text, actions or forms to perform tasks by changing the focus from the background. It is an intrusive component as it interrupts the user's operation to present a message or content.
 
+#### 🎉 New features
+
+- Add optional `root` prop to scope portal and backdrop rendering to a provided element. Defaults preserve current behavior. ([#336](https://github.com/TiendaNube/nimbus-design-system/pull/336) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-03-18 `1.6.0`
 
 #### 🎉 New features

package/dist/CHANGELOG.md

@@ -1,7 +1,21 @@
 # Changelog
 
+## 2026-01-08 `1.8.0`
+
+The Modal component allows us to call the user's attention to a floating box that can have text, actions or forms to perform tasks by changing the focus from the background. It is an intrusive component as it interrupts the user's operation to present a message or content.
+
+#### 🎉 New features
+
+- Added `tag` property to `Modal.Header` component to display a tag next to the title. ([#401](https://github.com/TiendaNube/nimbus-design-system/pull/401) by [@joacotornello](https://github.com/joacotornello))
+
+## 2025-08-25 `1.7.0`
+
 The Modal component allows us to call the user's attention to a floating box that can have text, actions or forms to perform tasks by changing the focus from the background. It is an intrusive component as it interrupts the user's operation to present a message or content.
 
+#### 🎉 New features
+
+- Add optional `root` prop to scope portal and backdrop rendering to a provided element. Defaults preserve current behavior. ([#336](https://github.com/TiendaNube/nimbus-design-system/pull/336) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-03-18 `1.6.0`
 
 #### 🎉 New features

package/dist/index.d.ts

@@ -8,6 +8,7 @@ export interface Conditions<T> {
 	md?: T;
 	lg?: T;
 	xl?: T;
+	xxl?: T;
 }
 declare const propertiesModal: {
 	padding: {
@@ -32,6 +33,7 @@ export interface ModalSprinkle {
 declare const modal: {
 	classnames: {
 		overlay: string;
+		overlayScoped: string;
 		container: string;
 		container__close: string;
 		container__footer: string;
@@ -50,6 +52,7 @@ declare const modal: {
 					none: string;
 				};
 			};
+			content: string;
 		};
 		body: {
 			sprinkle: ((props: {
@@ -128,6 +131,7 @@ declare const modal: {
 		};
 	};
 };
+export type CloseOnOutsidePress = (event: PointerEvent | MouseEvent) => boolean;
 export interface ModalBodyProperties {
 	/**
 	 * The content of the modal body.
@@ -166,6 +170,11 @@ export interface ModalHeaderProperties {
 	 * The title to display in the modal header.
 	 */
 	title?: string;
+	/**
+	 * The tag to display next to the title.
+	 * @TJS-type React.ReactNode
+	 */
+	tag?: ReactNode;
 	/**
 	 * The padding properties are used to generate space around an modal's header content area.
 	 * @default none
@@ -198,13 +207,33 @@ export interface ModalProperties extends ModalSprinkle {
 	 * Id to be embedded in the portal element
 	 */
 	portalId?: string;
+	/**
+	 * Controls whether clicking/pressing outside should close the modal.
+	 * - boolean: enable/disable dismissal on outside press
+	 * - function: receive the DOM event and return true to allow closing, false to ignore
+	 *
+	 * Defaults to true.
+	 */
+	closeOnOutsidePress?: boolean | CloseOnOutsidePress;
+	/**
+	 * The attribute name to ignore when checking for outside clicks. Useful to
+	 * mark regions (e.g., a chat) that should not close the modal when clicked.
+	 * @default "data-nimbus-outside-press-ignore"
+	 */
+	ignoreAttributeName?: string;
 	/**
 	 * The padding properties are used to generate space around an modal's content area.
 	 * @default base
 	 */
 	padding?: keyof typeof modal.properties.padding;
 }
-export type ModalProps = ModalProperties & HTMLAttributes<HTMLDivElement>;
+export type ModalProps = ModalProperties & {
+	/**
+	 * Root element where the portal should be mounted. When provided and not null,
+	 * the portal renders inside this element; when null/undefined, the default root is used.
+	 */
+	root?: HTMLElement | null;
+} & HTMLAttributes<HTMLDivElement>;
 export declare const Modal: React.FC<ModalProps> & ModalComponents;
 
 export {

package/dist/index.js

@@ -1,2 +1,2 @@
 "use client";
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@floating-ui/react"),require("@nimbus-ds/icons"),require("@nimbus-ds/icon"),require("@nimbus-ds/styles"),require("@nimbus-ds/title")):"function"==typeof define&&define.amd?define(["react","@floating-ui/react","@nimbus-ds/icons","@nimbus-ds/icon","@nimbus-ds/styles","@nimbus-ds/title"],t):"object"==typeof exports?exports["@nimbus-ds/modal"]=t(require("react"),require("@floating-ui/react"),require("@nimbus-ds/icons"),require("@nimbus-ds/icon"),require("@nimbus-ds/styles"),require("@nimbus-ds/title")):e["@nimbus-ds/modal"]=t(e.react,e["@floating-ui/react"],e["@nimbus-ds/icons"],e["@nimbus-ds/icon"],e["@nimbus-ds/styles"],e["@nimbus-ds/title"])}(global,((e,t,r,o,n,a)=>(()=>{"use strict";var i={459:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Modal=void 0;const o=r(769).__importDefault(r(155)),n=r(955),a=r(809),i=r(208),s=r(367),l=r(337),c=({className:e,style:t,children:r,padding:l="base",maxWidth:c={xs:"100%",md:"500px"},open:u,portalId:d,onDismiss:f,...p})=>{const{className:y,style:_,otherProps:m}=s.modal.sprinkle({...p,maxWidth:c,padding:l}),{refThemeProvider:b}=(0,s.useTheme)(),{context:v}=(0,n.useFloating)({open:u,onOpenChange:f}),h=(0,n.useClick)(v),w=(0,n.useRole)(v),g=(0,n.useDismiss)(v,{outsidePressEvent:f?"mousedown":void 0}),{getFloatingProps:O}=(0,n.useInteractions)([h,w,g]),j=(0,n.useId)(),P=(0,n.useId)();return u?o.default.createElement(n.FloatingPortal,{id:d??"nimbus-modal-floating",root:b?.current},o.default.createElement(n.FloatingOverlay,{className:s.modal.classnames.overlay,lockScroll:!0},o.default.createElement(n.FloatingFocusManager,{context:v},o.default.createElement("div",{...m,ref:v.refs.setFloating,style:_,className:[s.modal.classnames.container,y].join(" "),"aria-labelledby":j,"aria-describedby":P,...O(),...p},r,f&&o.default.createElement("button",{"aria-label":"Dismiss modal",className:s.modal.classnames.container__close,"data-testid":"dismiss-modal-button",type:"button",onClick:()=>f(!u),tabIndex:0},o.default.createElement(i.Icon,{color:"neutral-textLow",source:o.default.createElement(a.CloseIcon,null)})))))):null};t.Modal=c,c.Body=l.ModalBody,c.Footer=l.ModalFooter,c.Header=l.ModalHeader,c.displayName="Modal",c.Body.displayName="Modal.Body",c.Footer.displayName="Modal.Footer",c.Header.displayName="Modal.Header"},194:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalBody=void 0;const o=r(769).__importDefault(r(155)),n=r(367);t.ModalBody=({className:e,style:t,padding:r="base",children:a,...i})=>o.default.createElement("div",{className:n.modal.subComponents.body.sprinkle({padding:r}),...i},a)},323:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalBody=void 0;const o=r(194);var n=r(194);Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return n.ModalBody}}),t.default=o.ModalBody},246:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=void 0;const o=r(769).__importDefault(r(155)),n=r(367);t.ModalFooter=({className:e,style:t,padding:r="none",children:a,...i})=>o.default.createElement("div",{className:[n.modal.subComponents.body.sprinkle({padding:r}),n.modal.classnames.container__footer].join(" "),...i},a)},964:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=void 0;const o=r(246);var n=r(246);Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return n.ModalFooter}}),t.default=o.ModalFooter},682:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalHeader=void 0;const o=r(769).__importDefault(r(155)),n=r(593),a=r(367);t.ModalHeader=({className:e,style:t,padding:r="none",title:i,children:s,...l})=>o.default.createElement("div",{className:a.modal.subComponents.header.sprinkle({padding:r}),...l},i&&o.default.createElement(n.Title,{"data-testid":"header-title",as:"h4"},i),s)},378:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalHeader=void 0;const o=r(682);var n=r(682);Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return n.ModalHeader}}),t.default=o.ModalHeader},337:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const o=r(769);o.__exportStar(r(323),t),o.__exportStar(r(964),t),o.__exportStar(r(378),t)},955:e=>{e.exports=t},208:e=>{e.exports=o},809:e=>{e.exports=r},367:e=>{e.exports=n},593:e=>{e.exports=a},155:t=>{t.exports=e},769:(e,t,r)=>{r.r(t),r.d(t,{__addDisposableResource:()=>N,__assign:()=>a,__asyncDelegator:()=>x,__asyncGenerator:()=>P,__asyncValues:()=>M,__await:()=>j,__awaiter:()=>y,__classPrivateFieldGet:()=>D,__classPrivateFieldIn:()=>k,__classPrivateFieldSet:()=>I,__createBinding:()=>m,__decorate:()=>s,__disposeResources:()=>B,__esDecorate:()=>c,__exportStar:()=>b,__extends:()=>n,__generator:()=>_,__importDefault:()=>T,__importStar:()=>F,__makeTemplateObject:()=>S,__metadata:()=>p,__param:()=>l,__propKey:()=>d,__read:()=>h,__rest:()=>i,__runInitializers:()=>u,__setFunctionName:()=>f,__spread:()=>w,__spreadArray:()=>O,__spreadArrays:()=>g,__values:()=>v,default:()=>C});var o=function(e,t){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},o(e,t)};function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r}function s(e,t,r,o){var n,a=arguments.length,i=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(a<3?n(i):a>3?n(t,r,i):n(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function l(e,t){return function(r,o){t(r,o,e)}}function c(e,t,r,o,n,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=o.kind,c="getter"===l?"get":"setter"===l?"set":"value",u=!t&&e?o.static?e:e.prototype:null,d=t||(u?Object.getOwnPropertyDescriptor(u,o.name):{}),f=!1,p=r.length-1;p>=0;p--){var y={};for(var _ in o)y[_]="access"===_?{}:o[_];for(var _ in o.access)y.access[_]=o.access[_];y.addInitializer=function(e){if(f)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var m=(0,r[p])("accessor"===l?{get:d.get,set:d.set}:d[c],y);if("accessor"===l){if(void 0===m)continue;if(null===m||"object"!=typeof m)throw new TypeError("Object expected");(s=i(m.get))&&(d.get=s),(s=i(m.set))&&(d.set=s),(s=i(m.init))&&n.unshift(s)}else(s=i(m))&&("field"===l?n.unshift(s):d[c]=s)}u&&Object.defineProperty(u,o.name,d),f=!0}function u(e,t,r){for(var o=arguments.length>2,n=0;n<t.length;n++)r=o?t[n].call(e,r):t[n].call(e);return o?r:void 0}function d(e){return"symbol"==typeof e?e:"".concat(e)}function f(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function p(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,o){return new(r||(r=Promise))((function(n,a){function i(e){try{l(o.next(e))}catch(e){a(e)}}function s(e){try{l(o.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?n(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,s)}l((o=o.apply(e,t||[])).next())}))}function _(e,t){var r,o,n,a,i={label:0,sent:function(){if(1&n[0])throw n[1];return n[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(l){return function(s){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(r=1,o&&(n=2&s[0]?o.return:s[0]?o.throw||((n=o.return)&&n.call(o),0):o.next)&&!(n=n.call(o,s[1])).done)return n;switch(o=0,n&&(s=[2&s[0],n.value]),s[0]){case 0:case 1:n=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,o=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(n=i.trys,(n=n.length>0&&n[n.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!n||s[1]>n[0]&&s[1]<n[3])){i.label=s[1];break}if(6===s[0]&&i.label<n[1]){i.label=n[1],n=s;break}if(n&&i.label<n[2]){i.label=n[2],i.ops.push(s);break}n[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],o=0}finally{r=n=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}var m=Object.create?function(e,t,r,o){void 0===o&&(o=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,n)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]};function b(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||m(t,e,r)}function v(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],o=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function h(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var o,n,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(o=a.next()).done;)i.push(o.value)}catch(e){n={error:e}}finally{try{o&&!o.done&&(r=a.return)&&r.call(a)}finally{if(n)throw n.error}}return i}function w(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(h(arguments[t]));return e}function g(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var o=Array(e),n=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,n++)o[n]=a[i];return o}function O(e,t,r){if(r||2===arguments.length)for(var o,n=0,a=t.length;n<a;n++)!o&&n in t||(o||(o=Array.prototype.slice.call(t,0,n)),o[n]=t[n]);return e.concat(o||Array.prototype.slice.call(t))}function j(e){return this instanceof j?(this.v=e,this):new j(e)}function P(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var o,n=r.apply(e,t||[]),a=[];return o={},i("next"),i("throw"),i("return"),o[Symbol.asyncIterator]=function(){return this},o;function i(e){n[e]&&(o[e]=function(t){return new Promise((function(r,o){a.push([e,t,r,o])>1||s(e,t)}))})}function s(e,t){try{(r=n[e](t)).value instanceof j?Promise.resolve(r.value.v).then(l,c):u(a[0][2],r)}catch(e){u(a[0][3],e)}var r}function l(e){s("next",e)}function c(e){s("throw",e)}function u(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function x(e){var t,r;return t={},o("next"),o("throw",(function(e){throw e})),o("return"),t[Symbol.iterator]=function(){return this},t;function o(o,n){t[o]=e[o]?function(t){return(r=!r)?{value:j(e[o](t)),done:!1}:n?n(t):t}:n}}function M(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=v(e),t={},o("next"),o("throw"),o("return"),t[Symbol.asyncIterator]=function(){return this},t);function o(r){t[r]=e[r]&&function(t){return new Promise((function(o,n){(function(e,t,r,o){Promise.resolve(o).then((function(t){e({value:t,done:r})}),t)})(o,n,(t=e[r](t)).done,t.value)}))}}}function S(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var E=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function F(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&m(t,e,r);return E(t,e),t}function T(e){return e&&e.__esModule?e:{default:e}}function D(e,t,r,o){if("a"===r&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?o:"a"===r?o.call(e):o?o.value:t.get(e)}function I(e,t,r,o,n){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?n.call(e,r):n?n.value=r:t.set(e,r),r}function k(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function N(e,t,r){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var o;if(r){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");o=t[Symbol.asyncDispose]}if(void 0===o){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");o=t[Symbol.dispose]}if("function"!=typeof o)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:o,async:r})}else r&&e.stack.push({async:!0});return t}var q="function"==typeof SuppressedError?SuppressedError:function(e,t,r){var o=new Error(r);return o.name="SuppressedError",o.error=e,o.suppressed=t,o};function B(e){function t(t){e.error=e.hasError?new q(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function r(){for(;e.stack.length;){var o=e.stack.pop();try{var n=o.dispose&&o.dispose.call(o.value);if(o.async)return Promise.resolve(n).then(r,(function(e){return t(e),r()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const C={__extends:n,__assign:a,__rest:i,__decorate:s,__param:l,__metadata:p,__awaiter:y,__generator:_,__createBinding:m,__exportStar:b,__values:v,__read:h,__spread:w,__spreadArrays:g,__spreadArray:O,__await:j,__asyncGenerator:P,__asyncDelegator:x,__asyncValues:M,__makeTemplateObject:S,__importStar:F,__importDefault:T,__classPrivateFieldGet:D,__classPrivateFieldSet:I,__classPrivateFieldIn:k,__addDisposableResource:N,__disposeResources:B}}},s={};function l(e){var t=s[e];if(void 0!==t)return t.exports;var r=s[e]={exports:{}};return i[e](r,r.exports,l),r.exports}l.d=(e,t)=>{for(var r in t)l.o(t,r)&&!l.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},l.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),l.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var c={};return(()=>{var e=c;Object.defineProperty(e,"__esModule",{value:!0}),e.Modal=void 0;const t=l(459);var r=l(459);Object.defineProperty(e,"Modal",{enumerable:!0,get:function(){return r.Modal}}),e.default=t.Modal})(),c})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom"),require("@floating-ui/react"),require("@nimbus-ds/icons"),require("@nimbus-ds/icon"),require("@nimbus-ds/styles"),require("@nimbus-ds/title")):"function"==typeof define&&define.amd?define(["react","react-dom","@floating-ui/react","@nimbus-ds/icons","@nimbus-ds/icon","@nimbus-ds/styles","@nimbus-ds/title"],t):"object"==typeof exports?exports["@nimbus-ds/modal"]=t(require("react"),require("react-dom"),require("@floating-ui/react"),require("@nimbus-ds/icons"),require("@nimbus-ds/icon"),require("@nimbus-ds/styles"),require("@nimbus-ds/title")):e["@nimbus-ds/modal"]=t(e.react,e["react-dom"],e["@floating-ui/react"],e["@nimbus-ds/icons"],e["@nimbus-ds/icon"],e["@nimbus-ds/styles"],e["@nimbus-ds/title"])}(global,((e,t,r,o,n,a,i)=>(()=>{"use strict";var s={337:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.eventHasNodeWithAttribute=void 0;t.eventHasNodeWithAttribute=(e,t)=>{const r="composedPath"in e&&"function"==typeof e.composedPath?e.composedPath:void 0,o=r?.call(e);if(Array.isArray(o)){if(o.some((e=>e instanceof Element&&e.hasAttribute(t))))return!0}const n=e.target;return!!(n&&n instanceof Element&&n.closest(`[${t}]`))}},748:(e,t)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DEFAULT_OUTSIDE_PRESS_IGNORE_ATTRIBUTE=void 0,t.DEFAULT_OUTSIDE_PRESS_IGNORE_ATTRIBUTE="data-nimbus-outside-press-ignore"},145:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.DEFAULT_OUTSIDE_PRESS_IGNORE_ATTRIBUTE=t.eventHasNodeWithAttribute=void 0;var o=r(337);Object.defineProperty(t,"eventHasNodeWithAttribute",{enumerable:!0,get:function(){return o.eventHasNodeWithAttribute}});var n=r(748);Object.defineProperty(t,"DEFAULT_OUTSIDE_PRESS_IGNORE_ATTRIBUTE",{enumerable:!0,get:function(){return n.DEFAULT_OUTSIDE_PRESS_IGNORE_ATTRIBUTE}})},459:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.Modal=void 0;const o=r(769).__importDefault(r(155)),n=r(514),a=r(955),i=r(809),s=r(208),l=r(367),c=r(145),u=r(718),d=({className:e,style:t,children:r,padding:u="base",maxWidth:d={xs:"100%",md:"500px"},open:f,portalId:p,onDismiss:y,root:_,closeOnOutsidePress:m=!0,ignoreAttributeName:b=c.DEFAULT_OUTSIDE_PRESS_IGNORE_ATTRIBUTE,...v})=>{const{className:h,style:g,otherProps:w}=l.modal.sprinkle({...v,maxWidth:d,padding:u}),{refThemeProvider:O}=(0,l.useTheme)(),{context:E}=(0,a.useFloating)({open:f,onOpenChange:y}),P=(0,a.useClick)(E),j=(0,a.useRole)(E),S=o.default.useMemo((()=>!!y&&("function"==typeof m?e=>!!m(e)&&!(0,c.eventHasNodeWithAttribute)(e,b):!!m&&(e=>!(0,c.eventHasNodeWithAttribute)(e,b)))),[m,b,y]),T=(0,a.useDismiss)(E,{outsidePressEvent:y?"mousedown":void 0,outsidePress:S}),{getFloatingProps:M}=(0,a.useInteractions)([P,j,T]),x=(0,a.useId)(),I=(0,a.useId)();if(!f)return null;const A=o.default.createElement(a.FloatingFocusManager,{context:E},o.default.createElement("div",{...w,ref:E.refs.setFloating,style:g,className:[l.modal.classnames.container,h].join(" "),"aria-labelledby":x,"aria-describedby":I,...M(),...v},r,y&&o.default.createElement("button",{"aria-label":"Dismiss modal",className:l.modal.classnames.container__close,"data-testid":"dismiss-modal-button",type:"button",onClick:()=>y(!f),tabIndex:0},o.default.createElement(s.Icon,{color:"neutral-textLow",source:o.default.createElement(i.CloseIcon,null)}))));return _?(0,n.createPortal)(o.default.createElement("div",{className:l.modal.classnames.overlayScoped},A),_):o.default.createElement(a.FloatingPortal,{id:p??"nimbus-modal-floating",root:O?.current},o.default.createElement(a.FloatingOverlay,{className:l.modal.classnames.overlay,lockScroll:!0},A))};t.Modal=d,d.Body=u.ModalBody,d.Footer=u.ModalFooter,d.Header=u.ModalHeader,d.displayName="Modal",d.Body.displayName="Modal.Body",d.Footer.displayName="Modal.Footer",d.Header.displayName="Modal.Header"},194:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalBody=void 0;const o=r(769).__importDefault(r(155)),n=r(367);t.ModalBody=({className:e,style:t,padding:r="base",children:a,...i})=>o.default.createElement("div",{className:n.modal.subComponents.body.sprinkle({padding:r}),...i},a)},323:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalBody=void 0;const o=r(194);var n=r(194);Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return n.ModalBody}}),t.default=o.ModalBody},246:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=void 0;const o=r(769).__importDefault(r(155)),n=r(367);t.ModalFooter=({className:e,style:t,padding:r="none",children:a,...i})=>o.default.createElement("div",{className:[n.modal.subComponents.body.sprinkle({padding:r}),n.modal.classnames.container__footer].join(" "),...i},a)},964:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=void 0;const o=r(246);var n=r(246);Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return n.ModalFooter}}),t.default=o.ModalFooter},682:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalHeader=void 0;const o=r(769).__importDefault(r(155)),n=r(593),a=r(367);t.ModalHeader=({className:e,style:t,padding:r="none",title:i,tag:s,children:l,...c})=>o.default.createElement("div",{className:a.modal.subComponents.header.sprinkle({padding:r}),...c},(i||s)&&o.default.createElement("div",{className:a.modal.subComponents.header.content},i&&o.default.createElement(n.Title,{"data-testid":"header-title",as:"h4"},i),s),l)},378:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.ModalHeader=void 0;const o=r(682);var n=r(682);Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return n.ModalHeader}}),t.default=o.ModalHeader},718:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const o=r(769);o.__exportStar(r(323),t),o.__exportStar(r(964),t),o.__exportStar(r(378),t)},955:e=>{e.exports=r},208:e=>{e.exports=n},809:e=>{e.exports=o},367:e=>{e.exports=a},593:e=>{e.exports=i},155:t=>{t.exports=e},514:e=>{e.exports=t},769:(e,t,r)=>{r.r(t),r.d(t,{__addDisposableResource:()=>F,__assign:()=>a,__asyncDelegator:()=>j,__asyncGenerator:()=>P,__asyncValues:()=>S,__await:()=>E,__awaiter:()=>y,__classPrivateFieldGet:()=>A,__classPrivateFieldIn:()=>N,__classPrivateFieldSet:()=>D,__createBinding:()=>m,__decorate:()=>s,__disposeResources:()=>k,__esDecorate:()=>c,__exportStar:()=>b,__extends:()=>n,__generator:()=>_,__importDefault:()=>I,__importStar:()=>x,__makeTemplateObject:()=>T,__metadata:()=>p,__param:()=>l,__propKey:()=>d,__read:()=>h,__rest:()=>i,__runInitializers:()=>u,__setFunctionName:()=>f,__spread:()=>g,__spreadArray:()=>O,__spreadArrays:()=>w,__values:()=>v,default:()=>B});var o=function(e,t){return o=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])},o(e,t)};function n(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function r(){this.constructor=e}o(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var a=function(){return a=Object.assign||function(e){for(var t,r=1,o=arguments.length;r<o;r++)for(var n in t=arguments[r])Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n]);return e},a.apply(this,arguments)};function i(e,t){var r={};for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&t.indexOf(o)<0&&(r[o]=e[o]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var n=0;for(o=Object.getOwnPropertySymbols(e);n<o.length;n++)t.indexOf(o[n])<0&&Object.prototype.propertyIsEnumerable.call(e,o[n])&&(r[o[n]]=e[o[n]])}return r}function s(e,t,r,o){var n,a=arguments.length,i=a<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,r):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,t,r,o);else for(var s=e.length-1;s>=0;s--)(n=e[s])&&(i=(a<3?n(i):a>3?n(t,r,i):n(t,r))||i);return a>3&&i&&Object.defineProperty(t,r,i),i}function l(e,t){return function(r,o){t(r,o,e)}}function c(e,t,r,o,n,a){function i(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var s,l=o.kind,c="getter"===l?"get":"setter"===l?"set":"value",u=!t&&e?o.static?e:e.prototype:null,d=t||(u?Object.getOwnPropertyDescriptor(u,o.name):{}),f=!1,p=r.length-1;p>=0;p--){var y={};for(var _ in o)y[_]="access"===_?{}:o[_];for(var _ in o.access)y.access[_]=o.access[_];y.addInitializer=function(e){if(f)throw new TypeError("Cannot add initializers after decoration has completed");a.push(i(e||null))};var m=(0,r[p])("accessor"===l?{get:d.get,set:d.set}:d[c],y);if("accessor"===l){if(void 0===m)continue;if(null===m||"object"!=typeof m)throw new TypeError("Object expected");(s=i(m.get))&&(d.get=s),(s=i(m.set))&&(d.set=s),(s=i(m.init))&&n.unshift(s)}else(s=i(m))&&("field"===l?n.unshift(s):d[c]=s)}u&&Object.defineProperty(u,o.name,d),f=!0}function u(e,t,r){for(var o=arguments.length>2,n=0;n<t.length;n++)r=o?t[n].call(e,r):t[n].call(e);return o?r:void 0}function d(e){return"symbol"==typeof e?e:"".concat(e)}function f(e,t,r){return"symbol"==typeof t&&(t=t.description?"[".concat(t.description,"]"):""),Object.defineProperty(e,"name",{configurable:!0,value:r?"".concat(r," ",t):t})}function p(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,o){return new(r||(r=Promise))((function(n,a){function i(e){try{l(o.next(e))}catch(e){a(e)}}function s(e){try{l(o.throw(e))}catch(e){a(e)}}function l(e){var t;e.done?n(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(i,s)}l((o=o.apply(e,t||[])).next())}))}function _(e,t){var r,o,n,a,i={label:0,sent:function(){if(1&n[0])throw n[1];return n[1]},trys:[],ops:[]};return a={next:s(0),throw:s(1),return:s(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function s(s){return function(l){return function(s){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,s[0]&&(i=0)),i;)try{if(r=1,o&&(n=2&s[0]?o.return:s[0]?o.throw||((n=o.return)&&n.call(o),0):o.next)&&!(n=n.call(o,s[1])).done)return n;switch(o=0,n&&(s=[2&s[0],n.value]),s[0]){case 0:case 1:n=s;break;case 4:return i.label++,{value:s[1],done:!1};case 5:i.label++,o=s[1],s=[0];continue;case 7:s=i.ops.pop(),i.trys.pop();continue;default:if(!(n=i.trys,(n=n.length>0&&n[n.length-1])||6!==s[0]&&2!==s[0])){i=0;continue}if(3===s[0]&&(!n||s[1]>n[0]&&s[1]<n[3])){i.label=s[1];break}if(6===s[0]&&i.label<n[1]){i.label=n[1],n=s;break}if(n&&i.label<n[2]){i.label=n[2],i.ops.push(s);break}n[2]&&i.ops.pop(),i.trys.pop();continue}s=t.call(e,i)}catch(e){s=[6,e],o=0}finally{r=n=0}if(5&s[0])throw s[1];return{value:s[0]?s[1]:void 0,done:!0}}([s,l])}}}var m=Object.create?function(e,t,r,o){void 0===o&&(o=r);var n=Object.getOwnPropertyDescriptor(t,r);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,o,n)}:function(e,t,r,o){void 0===o&&(o=r),e[o]=t[r]};function b(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||m(t,e,r)}function v(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],o=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&o>=e.length&&(e=void 0),{value:e&&e[o++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function h(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var o,n,a=r.call(e),i=[];try{for(;(void 0===t||t-- >0)&&!(o=a.next()).done;)i.push(o.value)}catch(e){n={error:e}}finally{try{o&&!o.done&&(r=a.return)&&r.call(a)}finally{if(n)throw n.error}}return i}function g(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(h(arguments[t]));return e}function w(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var o=Array(e),n=0;for(t=0;t<r;t++)for(var a=arguments[t],i=0,s=a.length;i<s;i++,n++)o[n]=a[i];return o}function O(e,t,r){if(r||2===arguments.length)for(var o,n=0,a=t.length;n<a;n++)!o&&n in t||(o||(o=Array.prototype.slice.call(t,0,n)),o[n]=t[n]);return e.concat(o||Array.prototype.slice.call(t))}function E(e){return this instanceof E?(this.v=e,this):new E(e)}function P(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var o,n=r.apply(e,t||[]),a=[];return o={},i("next"),i("throw"),i("return"),o[Symbol.asyncIterator]=function(){return this},o;function i(e){n[e]&&(o[e]=function(t){return new Promise((function(r,o){a.push([e,t,r,o])>1||s(e,t)}))})}function s(e,t){try{(r=n[e](t)).value instanceof E?Promise.resolve(r.value.v).then(l,c):u(a[0][2],r)}catch(e){u(a[0][3],e)}var r}function l(e){s("next",e)}function c(e){s("throw",e)}function u(e,t){e(t),a.shift(),a.length&&s(a[0][0],a[0][1])}}function j(e){var t,r;return t={},o("next"),o("throw",(function(e){throw e})),o("return"),t[Symbol.iterator]=function(){return this},t;function o(o,n){t[o]=e[o]?function(t){return(r=!r)?{value:E(e[o](t)),done:!1}:n?n(t):t}:n}}function S(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=v(e),t={},o("next"),o("throw"),o("return"),t[Symbol.asyncIterator]=function(){return this},t);function o(r){t[r]=e[r]&&function(t){return new Promise((function(o,n){(function(e,t,r,o){Promise.resolve(o).then((function(t){e({value:t,done:r})}),t)})(o,n,(t=e[r](t)).done,t.value)}))}}}function T(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var M=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function x(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&m(t,e,r);return M(t,e),t}function I(e){return e&&e.__esModule?e:{default:e}}function A(e,t,r,o){if("a"===r&&!o)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?o:"a"===r?o.call(e):o?o.value:t.get(e)}function D(e,t,r,o,n){if("m"===o)throw new TypeError("Private method is not writable");if("a"===o&&!n)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===o?n.call(e,r):n?n.value=r:t.set(e,r),r}function N(e,t){if(null===t||"object"!=typeof t&&"function"!=typeof t)throw new TypeError("Cannot use 'in' operator on non-object");return"function"==typeof e?t===e:e.has(t)}function F(e,t,r){if(null!=t){if("object"!=typeof t&&"function"!=typeof t)throw new TypeError("Object expected.");var o;if(r){if(!Symbol.asyncDispose)throw new TypeError("Symbol.asyncDispose is not defined.");o=t[Symbol.asyncDispose]}if(void 0===o){if(!Symbol.dispose)throw new TypeError("Symbol.dispose is not defined.");o=t[Symbol.dispose]}if("function"!=typeof o)throw new TypeError("Object not disposable.");e.stack.push({value:t,dispose:o,async:r})}else r&&e.stack.push({async:!0});return t}var R="function"==typeof SuppressedError?SuppressedError:function(e,t,r){var o=new Error(r);return o.name="SuppressedError",o.error=e,o.suppressed=t,o};function k(e){function t(t){e.error=e.hasError?new R(t,e.error,"An error was suppressed during disposal."):t,e.hasError=!0}return function r(){for(;e.stack.length;){var o=e.stack.pop();try{var n=o.dispose&&o.dispose.call(o.value);if(o.async)return Promise.resolve(n).then(r,(function(e){return t(e),r()}))}catch(e){t(e)}}if(e.hasError)throw e.error}()}const B={__extends:n,__assign:a,__rest:i,__decorate:s,__param:l,__metadata:p,__awaiter:y,__generator:_,__createBinding:m,__exportStar:b,__values:v,__read:h,__spread:g,__spreadArrays:w,__spreadArray:O,__await:E,__asyncGenerator:P,__asyncDelegator:j,__asyncValues:S,__makeTemplateObject:T,__importStar:x,__importDefault:I,__classPrivateFieldGet:A,__classPrivateFieldSet:D,__classPrivateFieldIn:N,__addDisposableResource:F,__disposeResources:k}}},l={};function c(e){var t=l[e];if(void 0!==t)return t.exports;var r=l[e]={exports:{}};return s[e](r,r.exports,c),r.exports}c.d=(e,t)=>{for(var r in t)c.o(t,r)&&!c.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},c.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),c.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var u={};return(()=>{var e=u;Object.defineProperty(e,"__esModule",{value:!0}),e.Modal=void 0;const t=c(459);var r=c(459);Object.defineProperty(e,"Modal",{enumerable:!0,get:function(){return r.Modal}}),e.default=t.Modal})(),u})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nimbus-ds/modal",
-  "version": "1.6.0",
+  "version": "1.8.0",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -15,8 +15,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.26.0",
-    "@nimbus-ds/icon": "^3.0.1",
-    "@nimbus-ds/icons": "^1.6.1"
+    "@nimbus-ds/icon": "^3.3.0",
+    "@nimbus-ds/icons": "^1.14.0"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0",
@@ -31,10 +31,10 @@
     "url": "https://github.com/TiendaNube/nimbus-design-system/issues"
   },
   "devDependencies": {
-    "@nimbus-ds/box": "^4.1.1",
-    "@nimbus-ds/button": "^2.6.0",
-    "@nimbus-ds/text": "^6.3.1",
+    "@nimbus-ds/box": "^4.3.2",
+    "@nimbus-ds/button": "^2.10.0",
+    "@nimbus-ds/text": "^6.6.0",
     "@nimbus-ds/title": "^3.1.3",
-    "@nimbus-ds/webpack": "^1.5.0"
+    "@nimbus-ds/webpack": "^1.7.0"
   }
 }