@nimbus-ds/patterns 1.19.0 → 1.20.0

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
 
+## 2025-09-04 `1.20.0`
+
+#### 🎉 New features
+
+- Added `Chat` and `Body` subcomponents to `AppShell` component, and improved layout to better support fixed header. ([#119](https://github.com/TiendaNube/nimbus-patterns/pull/119) by [@joacotornello](https://github.com/joacotornello))
+- Added `root` prop support to `SideModal` component. ([#119](https://github.com/TiendaNube/nimbus-patterns/pull/119) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-09-05 `1.19.0`
 
 #### 🎉 New features

package/dist/AppShell/index.d.ts

@@ -16,10 +16,16 @@ export interface AppShellHeaderProperties {
 	 */
 	rightSlot?: ReactNode;
 }
-export type AppShellHeaderProps = AppShellHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProperties, "display" | "justifyContent">;
+export type AppShellHeaderProps = AppShellHeaderProperties & Omit<HTMLAttributes<HTMLElement>, "color"> & Omit<BoxProperties, "display" | "justifyContent" | "position" | "top">;
 export declare const AppShellHeader: React.FC<AppShellHeaderProps>;
+export type AppShellBodyProps = Omit<BoxProps, "display" | "flex">;
+export declare const AppShellBody: React.FC<AppShellBodyProps>;
+export type AppShellChatProps = Omit<BoxProps, "position">;
+export declare const AppShellChat: React.FC<AppShellChatProps>;
 export interface AppShellComponents {
 	Header: typeof AppShellHeader;
+	Body: typeof AppShellBody;
+	Chat: typeof AppShellChat;
 }
 /**
  * Configuration options for the AppShell flyout (popover) behavior when the menu is collapsed.
@@ -77,6 +83,10 @@ export interface AppShellProperties {
 	 * Consolidated configuration for the popover/flyout behavior when `menuBehavior` is 'popover'.
 	 */
 	menuFlyout?: AppShellMenuFlyoutOptions;
+	/**
+	 * Consolidated configuration for the content container.
+	 */
+	contentProperties?: BoxBaseProps;
 }
 export type AppShellProps = AppShellProperties & {
 	menuFlyout?: AppShellMenuFlyoutOptions & Omit<BoxProps, "position" | "top" | "left" | "right" | "bottom" | "height" | "zIndex">;

package/dist/AppShell/index.js

@@ -1,2 +1,2 @@
 "use client";
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/components"),require("@floating-ui/react")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/components","@floating-ui/react"],t):"object"==typeof exports?exports["@nimbus-ds/patterns"]=t(require("react"),require("@nimbus-ds/components"),require("@floating-ui/react")):e["@nimbus-ds/patterns"]=t(e.react,e["@nimbus-ds/components"],e["@floating-ui/react"])}(global,((e,t,r)=>(()=>{"use strict";var n={8713:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShell=void 0;const n=r(5163).__importStar(r(8156)),o=r(5280),a=r(6156),l=r(6338),i=r(5128),u=({className:e,style:t,children:r,menu:l,menuProperties:u={display:{xs:"none",md:"block"}},menuExpanded:c,menuExpandedWidth:p="18rem",menuCollapsedWidth:s="48px",menuBehavior:f="inline",menuFlyout:d={trigger:"manual"},...y})=>{const h="popover"===f,{trigger:b="hover",open:v,defaultOpen:m=!1,onOpenChange:_,hoverOpenDelayMs:g=100,hoverCloseDelayMs:w=150,...x}=d??{},[S,O]=(0,n.useState)(m),P=v??S,j=(0,n.useCallback)((e=>{void 0===v&&O(e),_?.(e)}),[v,_]),{refs:A,context:M}=(0,a.useFloating)({open:!!h&&P,onOpenChange:j}),C=(0,a.useHover)(M,{delay:{open:g,close:w},handleClose:(0,a.safePolygon)(),enabled:"hover"===b}),E=(0,a.useFocus)(M,{enabled:"hover"===b}),T=(0,a.useDismiss)(M,{outsidePress:!0,escapeKey:!0}),D=(0,a.useRole)(M,{role:"dialog"}),{getReferenceProps:I,getFloatingProps:k}=(0,a.useInteractions)([C,E,T,D]),F=(0,n.useMemo)((()=>({isMenuPopover:!1})),[]),H=(0,n.useMemo)((()=>({isMenuPopover:!0})),[]);return n.default.createElement(o.Box,{...y,display:"flex"},l&&n.default.createElement(o.Box,{...u,width:c?p:s,height:"100vh",position:"sticky",top:"0",left:"0",borderStyle:"solid",borderWidth:"none",borderRightWidth:"1",borderColor:"neutral-surfaceDisabled",transitionProperty:"width",transitionDuration:"fast",transitionTimingFunction:"ease-out",ref:A.setReference,...I()},n.default.createElement(i.AppShellMenuContext.Provider,{value:F},l)),n.default.createElement(o.Box,{display:"flex",flexDirection:"column",flex:"1 1 auto",backgroundColor:"neutral-surface",width:"100%"},r),h&&P&&n.default.createElement(i.AppShellMenuContext.Provider,{value:H},n.default.createElement(a.FloatingPortal,{id:"nimbus-popover-floating"},n.default.createElement(o.Box,{backgroundColor:"neutral-background",boxShadow:"2",borderStyle:"solid",borderWidth:"none",borderRightWidth:"1",borderColor:"neutral-surfaceDisabled",width:"18rem",...x,position:"fixed",top:"0",left:"0",zIndex:"900",height:"100vh",ref:A.setFloating,...k()},l))))};t.AppShell=u,u.Header=l.AppShellHeader,u.displayName="AppShell",u.Header.displayName="AppShell.Header"},3718:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(5163);n.__exportStar(r(8462),t),n.__exportStar(r(6338),t)},3485:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShellHeader=void 0;const n=r(5163).__importDefault(r(8156)),o=r(5280);t.AppShellHeader=({className:e,style:t,leftSlot:r,rightSlot:a,...l})=>n.default.createElement(o.Box,{...l,padding:"2",display:"flex",justifyContent:r?"space-between":"flex-end",gap:"2"},r,a&&n.default.createElement(o.Box,{display:"flex",gap:{xs:"1",md:"2"}},a))},1450:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShellHeader=void 0;const n=r(3485);var o=r(3485);Object.defineProperty(t,"AppShellHeader",{enumerable:!0,get:function(){return o.AppShellHeader}}),t.default=n.AppShellHeader},6338:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});r(5163).__exportStar(r(1450),t)},8626:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useAppShellMenuContext=t.AppShellMenuContext=void 0;const n=r(8156);t.AppShellMenuContext=(0,n.createContext)(void 0);t.useAppShellMenuContext=()=>{const e=(0,n.useContext)(t.AppShellMenuContext);if(void 0===e)throw new Error("useAppShellMenuContext must be used within an AppShell Menu");return e}},5128:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useAppShellMenuContext=t.AppShellMenuContext=void 0;var n=r(8626);Object.defineProperty(t,"AppShellMenuContext",{enumerable:!0,get:function(){return n.AppShellMenuContext}}),Object.defineProperty(t,"useAppShellMenuContext",{enumerable:!0,get:function(){return n.useAppShellMenuContext}})},8377:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useAppShellMenuContext=t.AppShellMenuContext=void 0;var n=r(5128);Object.defineProperty(t,"AppShellMenuContext",{enumerable:!0,get:function(){return n.AppShellMenuContext}}),Object.defineProperty(t,"useAppShellMenuContext",{enumerable:!0,get:function(){return n.useAppShellMenuContext}})},8462:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useAppShellMenuContext=t.AppShell=void 0;const n=r(8713);var o=r(8713);Object.defineProperty(t,"AppShell",{enumerable:!0,get:function(){return o.AppShell}});var a=r(8377);Object.defineProperty(t,"useAppShellMenuContext",{enumerable:!0,get:function(){return a.useAppShellMenuContext}}),t.default=n.AppShell},5163:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>a,__asyncDelegator:()=>P,__asyncGenerator:()=>O,__asyncValues:()=>j,__await:()=>S,__awaiter:()=>y,__classPrivateFieldGet:()=>T,__classPrivateFieldIn:()=>I,__classPrivateFieldSet:()=>D,__createBinding:()=>b,__decorate:()=>i,__esDecorate:()=>c,__exportStar:()=>v,__extends:()=>o,__generator:()=>h,__importDefault:()=>E,__importStar:()=>C,__makeTemplateObject:()=>A,__metadata:()=>d,__param:()=>u,__propKey:()=>s,__read:()=>_,__rest:()=>l,__runInitializers:()=>p,__setFunctionName:()=>f,__spread:()=>g,__spreadArray:()=>x,__spreadArrays:()=>w,__values:()=>m});var n=function(e,t){return n=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])},n(e,t)};function o(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}n(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,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},a.apply(this,arguments)};function l(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function i(e,t,r,n){var o,a=arguments.length,l=a<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(e,t,r,n);else for(var i=e.length-1;i>=0;i--)(o=e[i])&&(l=(a<3?o(l):a>3?o(t,r,l):o(t,r))||l);return a>3&&l&&Object.defineProperty(t,r,l),l}function u(e,t){return function(r,n){t(r,n,e)}}function c(e,t,r,n,o,a){function l(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var i,u=n.kind,c="getter"===u?"get":"setter"===u?"set":"value",p=!t&&e?n.static?e:e.prototype:null,s=t||(p?Object.getOwnPropertyDescriptor(p,n.name):{}),f=!1,d=r.length-1;d>=0;d--){var y={};for(var h in n)y[h]="access"===h?{}:n[h];for(var h in n.access)y.access[h]=n.access[h];y.addInitializer=function(e){if(f)throw new TypeError("Cannot add initializers after decoration has completed");a.push(l(e||null))};var b=(0,r[d])("accessor"===u?{get:s.get,set:s.set}:s[c],y);if("accessor"===u){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(i=l(b.get))&&(s.get=i),(i=l(b.set))&&(s.set=i),(i=l(b.init))&&o.push(i)}else(i=l(b))&&("field"===u?o.push(i):s[c]=i)}p&&Object.defineProperty(p,n.name,s),f=!0}function p(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function s(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 d(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function y(e,t,r,n){return new(r||(r=Promise))((function(o,a){function l(e){try{u(n.next(e))}catch(e){a(e)}}function i(e){try{u(n.throw(e))}catch(e){a(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(l,i)}u((n=n.apply(e,t||[])).next())}))}function h(e,t){var r,n,o,a,l={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function i(i){return function(u){return function(i){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,i[0]&&(l=0)),l;)try{if(r=1,n&&(o=2&i[0]?n.return:i[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,i[1])).done)return o;switch(n=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return l.label++,{value:i[1],done:!1};case 5:l.label++,n=i[1],i=[0];continue;case 7:i=l.ops.pop(),l.trys.pop();continue;default:if(!(o=l.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){l=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){l.label=i[1];break}if(6===i[0]&&l.label<o[1]){l.label=o[1],o=i;break}if(o&&l.label<o[2]){l.label=o[2],l.ops.push(i);break}o[2]&&l.ops.pop(),l.trys.pop();continue}i=t.call(e,l)}catch(e){i=[6,e],n=0}finally{r=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,u])}}}var b=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function v(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||b(t,e,r)}function m(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function _(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,a=r.call(e),l=[];try{for(;(void 0===t||t-- >0)&&!(n=a.next()).done;)l.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=a.return)&&r.call(a)}finally{if(o)throw o.error}}return l}function g(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(_(arguments[t]));return e}function w(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var a=arguments[t],l=0,i=a.length;l<i;l++,o++)n[o]=a[l];return n}function x(e,t,r){if(r||2===arguments.length)for(var n,o=0,a=t.length;o<a;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function S(e){return this instanceof S?(this.v=e,this):new S(e)}function O(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),a=[];return n={},l("next"),l("throw"),l("return"),n[Symbol.asyncIterator]=function(){return this},n;function l(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){a.push([e,t,r,n])>1||i(e,t)}))})}function i(e,t){try{(r=o[e](t)).value instanceof S?Promise.resolve(r.value.v).then(u,c):p(a[0][2],r)}catch(e){p(a[0][3],e)}var r}function u(e){i("next",e)}function c(e){i("throw",e)}function p(e,t){e(t),a.shift(),a.length&&i(a[0][0],a[0][1])}}function P(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:S(e[n](t)),done:!1}:o?o(t):t}:o}}function j(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=m(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function A(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 C(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)&&b(t,e,r);return M(t,e),t}function E(e){return e&&e.__esModule?e:{default:e}}function T(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function D(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.value=r:t.set(e,r),r}function I(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)}},6156:e=>{e.exports=r},5280:e=>{e.exports=t},8156:t=>{t.exports=e}},o={};function a(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return n[e](r,r.exports,a),r.exports}return a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},a(3718)})()));
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("@nimbus-ds/components"),require("@floating-ui/react")):"function"==typeof define&&define.amd?define(["react","@nimbus-ds/components","@floating-ui/react"],t):"object"==typeof exports?exports["@nimbus-ds/patterns"]=t(require("react"),require("@nimbus-ds/components"),require("@floating-ui/react")):e["@nimbus-ds/patterns"]=t(e.react,e["@nimbus-ds/components"],e["@floating-ui/react"])}(global,((e,t,r)=>(()=>{"use strict";var n={8713:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShell=void 0;const n=r(5163).__importStar(r(8156)),o=r(5280),l=r(6156),a=r(6338),i=r(5128),u=({className:e,style:t,children:r,contentProperties:a,menu:u,menuProperties:c={display:{xs:"none",md:"block"}},menuExpanded:p,menuExpandedWidth:s="240px",menuCollapsedWidth:f="48px",menuBehavior:d="inline",menuFlyout:h={trigger:"manual"},...y})=>{const b="popover"===d,{trigger:v="hover",open:_,defaultOpen:m=!1,onOpenChange:g,hoverOpenDelayMs:S=100,hoverCloseDelayMs:x=150,...w}=h??{},[O,P]=(0,n.useState)(m),j=_??O,A=(0,n.useCallback)((e=>{void 0===_&&P(e),g?.(e)}),[_,g]),{refs:C,context:M}=(0,l.useFloating)({open:!!b&&j,onOpenChange:A}),E=(0,l.useHover)(M,{delay:{open:S,close:x},handleClose:(0,l.safePolygon)(),enabled:"hover"===v}),B=(0,l.useFocus)(M,{enabled:"hover"===v}),T=(0,l.useDismiss)(M,{outsidePress:!0,escapeKey:!0}),k=(0,l.useRole)(M,{role:"dialog"}),{getReferenceProps:D,getFloatingProps:I}=(0,l.useInteractions)([E,B,T,k]),F=(0,n.useMemo)((()=>({isMenuPopover:!1})),[]),R=(0,n.useMemo)((()=>({isMenuPopover:!0})),[]);return n.default.createElement(o.Box,{...y,display:"flex"},u&&n.default.createElement(o.Box,{...c,width:p?s:f,height:"100vh",position:"sticky",top:"0",left:"0",borderStyle:"solid",borderWidth:"none",borderRightWidth:"1",borderColor:"neutral-surfaceDisabled",transitionProperty:"width",transitionDuration:"fast",transitionTimingFunction:"ease-out",flexShrink:p?"0":"1",ref:C.setReference,...D()},n.default.createElement(i.AppShellMenuContext.Provider,{value:F},u)),n.default.createElement(o.Box,{display:"grid",gridTemplateRows:"auto 1fr",flex:"1 1 auto",height:"100vh",width:"100%",overflow:"hidden",backgroundColor:"neutral-surface",...a},r),b&&j&&n.default.createElement(i.AppShellMenuContext.Provider,{value:R},n.default.createElement(l.FloatingPortal,{id:"nimbus-popover-floating"},n.default.createElement(o.Box,{backgroundColor:"neutral-background",boxShadow:"2",borderStyle:"solid",borderWidth:"none",borderRightWidth:"1",borderColor:"neutral-surfaceDisabled",width:s,...w,position:"fixed",top:"0",left:"0",zIndex:"900",height:"100vh",ref:C.setFloating,...I()},u))))};t.AppShell=u,u.Header=a.AppShellHeader,u.Body=a.AppShellBody,u.Chat=a.AppShellChat,u.displayName="AppShell",u.Header.displayName="AppShell.Header",u.Body.displayName="AppShell.Body",u.Chat.displayName="AppShell.Chat"},3718:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(5163);n.__exportStar(r(8462),t),n.__exportStar(r(6338),t)},2545:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShellBody=void 0;const n=r(5163).__importDefault(r(8156)),o=r(5280);t.AppShellBody=({children:e,...t})=>n.default.createElement(o.Box,{backgroundColor:"neutral-surface",width:"100%",gap:"2",overflow:"auto",height:"100%",...t,flex:"1 1 auto",display:"flex"},e)},1617:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShellBody=void 0;var n=r(2545);Object.defineProperty(t,"AppShellBody",{enumerable:!0,get:function(){return n.AppShellBody}})},6572:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShellChat=void 0;const n=r(5163).__importDefault(r(8156)),o=r(5280);t.AppShellChat=({children:e,...t})=>n.default.createElement(o.Box,{height:"100%",maxWidth:{xs:"300px",lg:"378px"},top:"0",flex:"1",padding:"2",zIndex:"700",...t,position:"sticky"},e)},8444:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShellChat=void 0;var n=r(6572);Object.defineProperty(t,"AppShellChat",{enumerable:!0,get:function(){return n.AppShellChat}})},3485:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShellHeader=void 0;const n=r(5163).__importDefault(r(8156)),o=r(5280);t.AppShellHeader=({className:e,style:t,leftSlot:r,rightSlot:l,...a})=>n.default.createElement(o.Box,{padding:"2",backgroundColor:"neutral-surface",gap:"2",...a,display:"flex",justifyContent:r?"space-between":"flex-end",position:"sticky",top:"0"},r,l&&n.default.createElement(o.Box,{display:"flex",gap:{xs:"1",md:"2"}},l))},1450:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.AppShellHeader=void 0;const n=r(3485);var o=r(3485);Object.defineProperty(t,"AppShellHeader",{enumerable:!0,get:function(){return o.AppShellHeader}}),t.default=n.AppShellHeader},6338:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0});const n=r(5163);n.__exportStar(r(1450),t),n.__exportStar(r(1617),t),n.__exportStar(r(8444),t)},8626:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useAppShellMenuContext=t.AppShellMenuContext=void 0;const n=r(8156);t.AppShellMenuContext=(0,n.createContext)(void 0);t.useAppShellMenuContext=()=>{const e=(0,n.useContext)(t.AppShellMenuContext);if(void 0===e)throw new Error("useAppShellMenuContext must be used within an AppShell Menu");return e}},5128:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useAppShellMenuContext=t.AppShellMenuContext=void 0;var n=r(8626);Object.defineProperty(t,"AppShellMenuContext",{enumerable:!0,get:function(){return n.AppShellMenuContext}}),Object.defineProperty(t,"useAppShellMenuContext",{enumerable:!0,get:function(){return n.useAppShellMenuContext}})},8377:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useAppShellMenuContext=t.AppShellMenuContext=void 0;var n=r(5128);Object.defineProperty(t,"AppShellMenuContext",{enumerable:!0,get:function(){return n.AppShellMenuContext}}),Object.defineProperty(t,"useAppShellMenuContext",{enumerable:!0,get:function(){return n.useAppShellMenuContext}})},8462:(e,t,r)=>{Object.defineProperty(t,"__esModule",{value:!0}),t.useAppShellMenuContext=t.AppShell=void 0;const n=r(8713);var o=r(8713);Object.defineProperty(t,"AppShell",{enumerable:!0,get:function(){return o.AppShell}});var l=r(8377);Object.defineProperty(t,"useAppShellMenuContext",{enumerable:!0,get:function(){return l.useAppShellMenuContext}}),t.default=n.AppShell},5163:(e,t,r)=>{r.r(t),r.d(t,{__assign:()=>l,__asyncDelegator:()=>P,__asyncGenerator:()=>O,__asyncValues:()=>j,__await:()=>w,__awaiter:()=>h,__classPrivateFieldGet:()=>B,__classPrivateFieldIn:()=>k,__classPrivateFieldSet:()=>T,__createBinding:()=>b,__decorate:()=>i,__esDecorate:()=>c,__exportStar:()=>v,__extends:()=>o,__generator:()=>y,__importDefault:()=>E,__importStar:()=>M,__makeTemplateObject:()=>A,__metadata:()=>d,__param:()=>u,__propKey:()=>s,__read:()=>m,__rest:()=>a,__runInitializers:()=>p,__setFunctionName:()=>f,__spread:()=>g,__spreadArray:()=>x,__spreadArrays:()=>S,__values:()=>_});var n=function(e,t){return n=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])},n(e,t)};function o(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}n(e,t),e.prototype=null===t?Object.create(t):(r.prototype=t.prototype,new r)}var l=function(){return l=Object.assign||function(e){for(var t,r=1,n=arguments.length;r<n;r++)for(var o in t=arguments[r])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},l.apply(this,arguments)};function a(e,t){var r={};for(var n in e)Object.prototype.hasOwnProperty.call(e,n)&&t.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(n=Object.getOwnPropertySymbols(e);o<n.length;o++)t.indexOf(n[o])<0&&Object.prototype.propertyIsEnumerable.call(e,n[o])&&(r[n[o]]=e[n[o]])}return r}function i(e,t,r,n){var o,l=arguments.length,a=l<3?t:null===n?n=Object.getOwnPropertyDescriptor(t,r):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,r,n);else for(var i=e.length-1;i>=0;i--)(o=e[i])&&(a=(l<3?o(a):l>3?o(t,r,a):o(t,r))||a);return l>3&&a&&Object.defineProperty(t,r,a),a}function u(e,t){return function(r,n){t(r,n,e)}}function c(e,t,r,n,o,l){function a(e){if(void 0!==e&&"function"!=typeof e)throw new TypeError("Function expected");return e}for(var i,u=n.kind,c="getter"===u?"get":"setter"===u?"set":"value",p=!t&&e?n.static?e:e.prototype:null,s=t||(p?Object.getOwnPropertyDescriptor(p,n.name):{}),f=!1,d=r.length-1;d>=0;d--){var h={};for(var y in n)h[y]="access"===y?{}:n[y];for(var y in n.access)h.access[y]=n.access[y];h.addInitializer=function(e){if(f)throw new TypeError("Cannot add initializers after decoration has completed");l.push(a(e||null))};var b=(0,r[d])("accessor"===u?{get:s.get,set:s.set}:s[c],h);if("accessor"===u){if(void 0===b)continue;if(null===b||"object"!=typeof b)throw new TypeError("Object expected");(i=a(b.get))&&(s.get=i),(i=a(b.set))&&(s.set=i),(i=a(b.init))&&o.push(i)}else(i=a(b))&&("field"===u?o.push(i):s[c]=i)}p&&Object.defineProperty(p,n.name,s),f=!0}function p(e,t,r){for(var n=arguments.length>2,o=0;o<t.length;o++)r=n?t[o].call(e,r):t[o].call(e);return n?r:void 0}function s(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 d(e,t){if("object"==typeof Reflect&&"function"==typeof Reflect.metadata)return Reflect.metadata(e,t)}function h(e,t,r,n){return new(r||(r=Promise))((function(o,l){function a(e){try{u(n.next(e))}catch(e){l(e)}}function i(e){try{u(n.throw(e))}catch(e){l(e)}}function u(e){var t;e.done?o(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(a,i)}u((n=n.apply(e,t||[])).next())}))}function y(e,t){var r,n,o,l,a={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return l={next:i(0),throw:i(1),return:i(2)},"function"==typeof Symbol&&(l[Symbol.iterator]=function(){return this}),l;function i(i){return function(u){return function(i){if(r)throw new TypeError("Generator is already executing.");for(;l&&(l=0,i[0]&&(a=0)),a;)try{if(r=1,n&&(o=2&i[0]?n.return:i[0]?n.throw||((o=n.return)&&o.call(n),0):n.next)&&!(o=o.call(n,i[1])).done)return o;switch(n=0,o&&(i=[2&i[0],o.value]),i[0]){case 0:case 1:o=i;break;case 4:return a.label++,{value:i[1],done:!1};case 5:a.label++,n=i[1],i=[0];continue;case 7:i=a.ops.pop(),a.trys.pop();continue;default:if(!(o=a.trys,(o=o.length>0&&o[o.length-1])||6!==i[0]&&2!==i[0])){a=0;continue}if(3===i[0]&&(!o||i[1]>o[0]&&i[1]<o[3])){a.label=i[1];break}if(6===i[0]&&a.label<o[1]){a.label=o[1],o=i;break}if(o&&a.label<o[2]){a.label=o[2],a.ops.push(i);break}o[2]&&a.ops.pop(),a.trys.pop();continue}i=t.call(e,a)}catch(e){i=[6,e],n=0}finally{r=o=0}if(5&i[0])throw i[1];return{value:i[0]?i[1]:void 0,done:!0}}([i,u])}}}var b=Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]};function v(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||b(t,e,r)}function _(e){var t="function"==typeof Symbol&&Symbol.iterator,r=t&&e[t],n=0;if(r)return r.call(e);if(e&&"number"==typeof e.length)return{next:function(){return e&&n>=e.length&&(e=void 0),{value:e&&e[n++],done:!e}}};throw new TypeError(t?"Object is not iterable.":"Symbol.iterator is not defined.")}function m(e,t){var r="function"==typeof Symbol&&e[Symbol.iterator];if(!r)return e;var n,o,l=r.call(e),a=[];try{for(;(void 0===t||t-- >0)&&!(n=l.next()).done;)a.push(n.value)}catch(e){o={error:e}}finally{try{n&&!n.done&&(r=l.return)&&r.call(l)}finally{if(o)throw o.error}}return a}function g(){for(var e=[],t=0;t<arguments.length;t++)e=e.concat(m(arguments[t]));return e}function S(){for(var e=0,t=0,r=arguments.length;t<r;t++)e+=arguments[t].length;var n=Array(e),o=0;for(t=0;t<r;t++)for(var l=arguments[t],a=0,i=l.length;a<i;a++,o++)n[o]=l[a];return n}function x(e,t,r){if(r||2===arguments.length)for(var n,o=0,l=t.length;o<l;o++)!n&&o in t||(n||(n=Array.prototype.slice.call(t,0,o)),n[o]=t[o]);return e.concat(n||Array.prototype.slice.call(t))}function w(e){return this instanceof w?(this.v=e,this):new w(e)}function O(e,t,r){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var n,o=r.apply(e,t||[]),l=[];return n={},a("next"),a("throw"),a("return"),n[Symbol.asyncIterator]=function(){return this},n;function a(e){o[e]&&(n[e]=function(t){return new Promise((function(r,n){l.push([e,t,r,n])>1||i(e,t)}))})}function i(e,t){try{(r=o[e](t)).value instanceof w?Promise.resolve(r.value.v).then(u,c):p(l[0][2],r)}catch(e){p(l[0][3],e)}var r}function u(e){i("next",e)}function c(e){i("throw",e)}function p(e,t){e(t),l.shift(),l.length&&i(l[0][0],l[0][1])}}function P(e){var t,r;return t={},n("next"),n("throw",(function(e){throw e})),n("return"),t[Symbol.iterator]=function(){return this},t;function n(n,o){t[n]=e[n]?function(t){return(r=!r)?{value:w(e[n](t)),done:!1}:o?o(t):t}:o}}function j(e){if(!Symbol.asyncIterator)throw new TypeError("Symbol.asyncIterator is not defined.");var t,r=e[Symbol.asyncIterator];return r?r.call(e):(e=_(e),t={},n("next"),n("throw"),n("return"),t[Symbol.asyncIterator]=function(){return this},t);function n(r){t[r]=e[r]&&function(t){return new Promise((function(n,o){(function(e,t,r,n){Promise.resolve(n).then((function(t){e({value:t,done:r})}),t)})(n,o,(t=e[r](t)).done,t.value)}))}}}function A(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var C=Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t};function M(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)&&b(t,e,r);return C(t,e),t}function E(e){return e&&e.__esModule?e:{default:e}}function B(e,t,r,n){if("a"===r&&!n)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof t?e!==t||!n:!t.has(e))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===r?n:"a"===r?n.call(e):n?n.value:t.get(e)}function T(e,t,r,n,o){if("m"===n)throw new TypeError("Private method is not writable");if("a"===n&&!o)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof t?e!==t||!o:!t.has(e))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===n?o.call(e,r):o?o.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)}},6156:e=>{e.exports=r},5280:e=>{e.exports=t},8156:t=>{t.exports=e}},o={};function l(e){var t=o[e];if(void 0!==t)return t.exports;var r=o[e]={exports:{}};return n[e](r,r.exports,l),r.exports}return 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})},l(3718)})()));

package/dist/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 Nimbus is an open-source Design System created by Tiendanube / Nuvesmhop’s team to empower and enhance more stories every day, with simplicity, accessibility, consistency and performance.
 
+## 2025-09-04 `1.20.0`
+
+#### 🎉 New features
+
+- Added `Chat` and `Body` subcomponents to `AppShell` component, and improved layout to better support fixed header. ([#119](https://github.com/TiendaNube/nimbus-patterns/pull/119) by [@joacotornello](https://github.com/joacotornello))
+- Added `root` prop support to `SideModal` component. ([#119](https://github.com/TiendaNube/nimbus-patterns/pull/119) by [@joacotornello](https://github.com/joacotornello))
+
 ## 2025-09-05 `1.19.0`
 
 #### 🎉 New features

package/dist/SideModal/index.d.ts

@@ -5,7 +5,10 @@ import React from 'react';
 import { HTMLAttributes, ReactNode } from 'react';
 
 export type SideModalPadding = "none" | "base";
-export interface SideModalProperties extends Pick<SidebarProperties, "position" | "onRemove" | "open" | "padding" | "maxWidth" | "zIndex"> {
+export interface SideModalProperties extends Pick<SidebarProperties, "position" | "onRemove" | "open" | "padding" | "maxWidth" | "zIndex" | "needRemoveScroll" | "ignoreAttributeName"> {
+	/**
+	 * Choose where the portal should render. Defaults to viewport (body).
+	 */
 	/**
 	 * Title.
 	 */
@@ -55,6 +58,11 @@ export type SideModalProps = SideModalProperties & {
 		primaryAction: ButtonProps;
 		secondaryAction: ButtonProps;
 	};
+	/**
+	 * Choose where the portal should render. Defaults to the viewport (document.body).
+	 * Useful to scope the modal within a specific container (e.g., AppShell.Chat).
+	 */
+	root?: HTMLElement | null;
 } & HTMLAttributes<HTMLElement>;
 export declare const SideModal: React.FC<SideModalProps>;