@stack-spot/portal-layout 0.0.2 → 0.0.3

package/dist/components/Menu/PageSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/Menu/PageSelector.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageSelector.js","sourceRoot":"","sources":["../../../src/components/Menu/PageSelector.tsx"],"names":[],"mappings":"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"}

package/dist/components/Menu/types.d.ts

@@ -1,14 +1,21 @@
 import { ReactElement } from 'react';
 import { Action } from '../types';
-export interface ItemGroup {
+interface BaseMenuItem {
+    hidden?: boolean;
+    icon?: React.ReactElement;
+    /**
+     * Whether to wrap overflowing text, just hide or hide and add an ellipsis (...).
+     * @default 'wrap'
+     */
+    overflow?: 'hidden' | 'wrap' | 'ellipsis';
+}
+export interface ItemGroup extends BaseMenuItem {
     label: string;
     children: MenuItem[];
     open?: boolean;
-    hidden?: boolean;
 }
-export interface MenuAction extends Action {
+export interface MenuAction extends Action, BaseMenuItem {
     active?: boolean;
-    hidden?: boolean;
 }
 export type MenuItem = ItemGroup | MenuAction;
 export interface MenuButton extends Action {
@@ -24,6 +31,7 @@ export interface Selector {
     button?: Action;
     title?: string;
     subtitle?: string;
+    loading?: boolean;
 }
 export interface MenuSectionContent {
     goBack?: Action;
@@ -31,15 +39,40 @@ export interface MenuSectionContent {
     subtitle?: string;
     pageSelector?: Selector;
     options?: MenuItem[];
+    loading?: boolean;
+    error?: string;
 }
 export interface MenuSection extends Action {
     icon: ReactElement;
-    content?: MenuSectionContent;
+    /**
+     * The content or a function that creates the content.
+     * If this is a function, it will be called only when the section is hovered, i.e. only when the content really needs to be rendered.
+     * Tip: this function can be a React Hook.
+     */
+    content?: MenuSectionContent | (() => MenuSectionContent);
     active?: boolean;
+    onOpen?: () => void;
 }
-export interface MenuProps {
+interface BaseMenuProps {
     sections: MenuSection[];
-    content?: MenuSectionContent;
     compact?: boolean;
 }
+interface MenuPropsWithStaticContent extends BaseMenuProps {
+    content?: MenuSectionContent;
+}
+interface MenuPropsWithDynamicContent extends BaseMenuProps {
+    /**
+     * The function that creates the content. It will be called only when the content is rendered, i.e. only when the content really needs to
+     * be rendered.
+     *
+     * Tip: this function can be a React Hook.
+     */
+    content: MenuSectionContent | (() => MenuSectionContent);
+    /**
+     * Identifies each content that might be rendered by the menu. This prevents React Hook errors when the content is a React Hook function.
+     */
+    contentKey: React.Key;
+}
+export type MenuProps = MenuPropsWithStaticContent | MenuPropsWithDynamicContent;
+export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/components/Menu/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE7C,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,IAAI,EAAE,YAAY,CAAC;IACnB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAA;AACpC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AAEjC,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,MAAM,GAAG,UAAU,CAAC;CAC3C;AAED,MAAM,WAAW,SAAU,SAAQ,YAAY;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,QAAQ,EAAE,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,UAAW,SAAQ,MAAM,EAAE,YAAY;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,MAAM,MAAM,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAE7C,MAAM,WAAW,UAAW,SAAQ,MAAM;IACxC,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,YAAa,SAAQ,MAAM;IAC1C,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,YAAY,CAAC;CACrB;AAED,MAAM,WAAW,QAAQ;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,kBAAkB;IACjC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,QAAQ,CAAC;IACxB,OAAO,CAAC,EAAE,QAAQ,EAAE,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAY,SAAQ,MAAM;IACzC,IAAI,EAAE,YAAY,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,kBAAkB,GAAG,CAAC,MAAM,kBAAkB,CAAC,CAAC;IAC1D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,aAAa;IACrB,QAAQ,EAAE,WAAW,EAAE,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,0BAA2B,SAAQ,aAAa;IACxD,OAAO,CAAC,EAAE,kBAAkB,CAAC;CAC9B;AAED,UAAU,2BAA4B,SAAQ,aAAa;IACzD;;;;;OAKG;IACH,OAAO,EAAE,kBAAkB,GAAG,CAAC,MAAM,kBAAkB,CAAC,CAAC;IACzD;;OAEG;IACH,UAAU,EAAE,KAAK,CAAC,GAAG,CAAC;CACvB;AAED,MAAM,MAAM,SAAS,GAAG,0BAA0B,GAAG,2BAA2B,CAAA"}

package/dist/components/OverlayContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContent.d.ts","sourceRoot":"","sources":["../../src/components/OverlayContent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,KAAM,SAAQ,mBAAmB;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;CACzB;AAqBD,eAAO,MAAM,cAAc,mEAAoE,KAAK,4CAWnG,CAAA"}
+{"version":3,"file":"OverlayContent.d.ts","sourceRoot":"","sources":["../../src/components/OverlayContent.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGjC,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,UAAU,KAAM,SAAQ,mBAAmB;IACzC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,IAAI,EAAE,OAAO,GAAG,OAAO,CAAC;CACzB;AAuBD,eAAO,MAAM,cAAc,mEAAoE,KAAK,4CAWnG,CAAA"}

package/dist/components/OverlayContent.js

@@ -14,11 +14,13 @@ const ContentBox = styled.section `
   }
   &.panel {
     padding: 20px;
+    display: flex;
+    flex-direction: column;
+    flex: 1;
   }
   header {
     display: flex;
     flex-direction: row;
-    flex: 1;
     margin-bottom: 1.25rem;
   }
 `;

package/dist/components/OverlayContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayContent.js","sourceRoot":"","sources":["../../src/components/OverlayContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAc1C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAA;;;;sBAIX,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;CAa7C,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAS,EAAE,EAAE,CAAC,CACvG,MAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,aACjE,6BACE,MAAC,IAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,aAClC,KAAC,IAAI,IAAC,UAAU,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,YAAG,KAAK,GAAQ,EAC/D,QAAQ,IAAI,KAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YAAE,QAAQ,GAAQ,IAC1E,EACP,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,OAAO,gBAAY,OAAO,YAAC,KAAC,SAAS,KAAG,GAAa,IAClF,EACR,QAAQ,IACE,CACd,CAAA"}
+{"version":3,"file":"OverlayContent.js","sourceRoot":"","sources":["../../src/components/OverlayContent.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AACvC,OAAO,EAAa,WAAW,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAExE,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAc1C,MAAM,UAAU,GAAG,MAAM,CAAC,OAAO,CAAA;;;;sBAIX,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,CAAC;;;;;;;;;;;;;;;CAe7C,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAS,EAAE,EAAE,CAAC,CACvG,MAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,WAAW,CAAC,CAAC,SAAS,EAAE,IAAI,CAAC,CAAC,aACjE,6BACE,MAAC,IAAI,IAAC,aAAa,EAAC,QAAQ,EAAC,IAAI,EAAE,CAAC,aAClC,KAAC,IAAI,IAAC,UAAU,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,YAAG,KAAK,GAAQ,EAC/D,QAAQ,IAAI,KAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,WAAW,YAAE,QAAQ,GAAQ,IAC1E,EACP,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAC,OAAO,gBAAY,OAAO,YAAC,KAAC,SAAS,KAAG,GAAa,IAClF,EACR,QAAQ,IACE,CACd,CAAA"}

package/dist/components/SelectionList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,YAAY,EAAqD,MAAM,OAAO,CAAA;AAEvF,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC,QAAQ,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAU1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AA6FD,eAAO,MAAM,aAAa,4EAEvB,kBAAkB,4CAuDpB,CAAA"}
+{"version":3,"file":"SelectionList.d.ts","sourceRoot":"","sources":["../../src/components/SelectionList.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAsB,MAAM,0BAA0B,CAAA;AACxE,OAAO,EAAE,YAAY,EAAqD,MAAM,OAAO,CAAA;AAEvF,OAAO,EAAE,MAAM,EAAE,MAAM,SAAS,CAAA;AAEhC,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC1B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,YAAY,EAAE,MAAM;IACtD,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED,UAAU,SAAS;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,aAAa,CAAC;IACjC,QAAQ,EAAE,QAAQ,EAAE,CAAC;CACtB;AAED,UAAU,WAAY,SAAQ,SAAS;IACrC,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,UAAU,eAAgB,SAAQ,SAAS,EAAE,YAAY;IACvD,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,KAAK,QAAQ,GAAG,WAAW,GAAG,eAAe,GAAG,UAAU,CAAA;AAU1D,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,KAAK,CAAC,EAAE,YAAY,CAAC;CACtB;AAiGD,eAAO,MAAM,aAAa,4EAEvB,kBAAkB,4CAuDpB,CAAA"}

package/dist/components/SelectionList.js

@@ -8,7 +8,8 @@ import { styled } from 'styled-components';
 const ANIMATION_DURATION_MS = 300;
 const SelectionBox = styled.div `
   max-height: 0;
-  overflow: hidden;
+  overflow-y: auto;
+  overflow-x: hidden;
   transition: max-height ease-in ${ANIMATION_DURATION_MS / 1000}s;
   z-index: 1;
   box-shadow: 4px 4px 48px #000;
@@ -40,6 +41,9 @@ const SelectionBox = styled.div `
     }
     .label {
       flex: 1;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
     }
   }
 

package/dist/components/SelectionList.js.map

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

package/dist/index.d.ts

@@ -1,10 +1,12 @@
 export { Layout } from './Layout';
 export { overlay } from './LayoutOverlayManager';
+export { Dialog } from './components/Dialog';
 export { Header, HeaderProps } from './components/Header';
 export { StackspotLogo } from './components/Logo';
 export { MenuContent } from './components/Menu/MenuContent';
 export { MenuSections } from './components/Menu/MenuSections';
 export * from './components/Menu/types';
+export { OverlayContent } from './components/OverlayContent';
 export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList';
 export * from './components/types';
 export * from './errors';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAE,UAAU,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAA;AAC1F,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}

package/dist/index.js

@@ -1,10 +1,12 @@
 export { Layout } from './Layout';
 export { overlay } from './LayoutOverlayManager';
+export { Dialog } from './components/Dialog';
 export { Header } from './components/Header';
 export { StackspotLogo } from './components/Logo';
 export { MenuContent } from './components/Menu/MenuContent';
 export { MenuSections } from './components/Menu/MenuSections';
 export * from './components/Menu/types';
+export { OverlayContent } from './components/OverlayContent';
 export { SelectionList } from './components/SelectionList';
 export * from './components/types';
 export * from './errors';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACjC,OAAO,EAAE,OAAO,EAAE,MAAM,wBAAwB,CAAA;AAChD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAA;AAC5C,OAAO,EAAE,MAAM,EAAe,MAAM,qBAAqB,CAAA;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,+BAA+B,CAAA;AAC3D,OAAO,EAAE,YAAY,EAAE,MAAM,gCAAgC,CAAA;AAC7D,cAAc,yBAAyB,CAAA;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EAAc,aAAa,EAAsB,MAAM,4BAA4B,CAAA;AAC1F,cAAc,oBAAoB,CAAA;AAClC,cAAc,UAAU,CAAA"}

package/dist/layout.css

@@ -298,11 +298,25 @@ body {
   display: flex;
   flex-direction: column;
   top: var(--header-height);
-  right: -307px;
   bottom: 0;
-  width: 307px;
   transition: right var(--right-panel-animation-duration);
   background-color: var(--light-400);
+  right: -800px;
+}
+
+#rightPanel.small {
+  right: -400px;
+  width: 400px;
+}
+
+#rightPanel.medium {
+  right: -600px;
+  width: 600px;
+}
+
+#rightPanel.large {
+  right: -800px;
+  width: 800px;
 }
 
 #rightPanel.visible {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -8,7 +8,7 @@
     "@citric/core": "^5.3.1",
     "@citric/icons": "^5.3.1",
     "@citric/ui": "^5.3.1",
-    "@stack-spot/portal-theme": "0.0.2",
+    "@stack-spot/portal-theme": "0.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "styled-components": "6.1.1"

package/src/Layout.tsx

@@ -1,6 +1,6 @@
 import { CSSToCitricAdapter, listToClass, WithStyle } from '@stack-spot/portal-theme'
 import '@stack-spot/portal-theme/dist/theme.css'
-import { ReactElement } from 'react'
+import { ReactElement, ReactNode } from 'react'
 import { Header, HeaderProps } from './components/Header'
 import { MenuContent } from './components/Menu/MenuContent'
 import { MenuSections } from './components/Menu/MenuSections'
@@ -12,14 +12,14 @@ import { overlay } from './LayoutOverlayManager'
 interface Props extends WithStyle {
   menu: MenuProps,
   header: HeaderProps,
-  children: ReactElement,
+  children: ReactNode,
 }
 
 interface RawProps extends WithStyle {
   menuSections: ReactElement,
   menuContent?: ReactElement,
   header: ReactElement,
-  children: ReactElement,
+  children: ReactNode,
   compactMenu?: boolean,
 }
 
@@ -54,11 +54,19 @@ export const RawLayout = ({ menuSections, menuContent, header, compactMenu = tru
   )
 }
 
+const MenuContentRenderer = ({ content }: Required<Pick<Props['menu'], 'content'>>) => {
+  const menuContent = typeof content === 'function' ? content() : content
+  return <MenuContent {...menuContent} />
+}
+
 export const Layout = ({ menu, header, children, className, style }: Props) => (
   <RawLayout
     header={<Header {...header} />}
-    menuSections={<MenuSections sections={menu.sections} />}
-    menuContent={menu.content ? <MenuContent {...menu.content} /> : undefined}
+    menuSections={<MenuSections {...menu} />}
+    menuContent={menu.content
+      ? <MenuContentRenderer key={'contentKey' in menu ? menu.contentKey : undefined} content={menu.content} />
+      : undefined
+    }
     compactMenu={menu.compact}
     className={className}
     style={style}

package/src/LayoutOverlayManager.tsx

@@ -13,6 +13,8 @@ interface AlertOptions extends Omit<DialogOptions, 'cancel'> {
 }
 
 type BottomDialogOptions = Omit<DialogOptions, 'title'>
+type OverlaySize = 'small' | 'medium' | 'large'
+type ModalSize = 'fit-content' | OverlaySize
 
 interface LayoutElements {
   backdrop: HTMLElement | null,
@@ -29,7 +31,15 @@ interface OverlayContentSetter {
   bottomDialog?: SetContentFn,
 }
 
-type ModalSize = 'fit-content' | 'small' | 'medium' | 'large'
+interface CustomModalOptions {
+  size?: ModalSize,
+  onClose?: () => void,
+}
+
+interface CustomRightPanelOptions {
+  size?: OverlaySize,
+  onClose?: () => void,
+}
 
 const BACKDROP_ID = 'backdrop'
 const MODAL_ID = 'modal'
@@ -71,23 +81,22 @@ class LayoutOverlayManager {
     return { modal, rightPanel, bottomDialog }
   }
 
-  showCustomModal(content: ReactElement, size: ModalSize = 'medium') {
+  showCustomModal(content: React.ReactElement, { size = 'medium', onClose }: CustomModalOptions = {}) {
     if (!this.elements?.modal) throw new ElementNotFound('modal', MODAL_ID)
     if (!this.setContent.modal) throw new LayoutError('unable to show modal, because it has not been setup yet.')
+    this.onModalClose = onClose
     this.setContent.modal(content)
     this.elements.backdrop?.setAttribute('class', 'visible')
     this.elements.modal.setAttribute('class', `visible ${size}`)
   }
 
-  showModal(props: OverlayContentProps) {
-    this.onModalClose = props.onClose
-    this.showCustomModal(<OverlayContent {...props} onClose={() => this.closeModal()} type="modal" />)
+  showModal({ size, ...props }: OverlayContentProps & { size?: ModalSize }) {
+    this.showCustomModal(<OverlayContent {...props} onClose={() => this.closeModal()} type="modal" />, { size, onClose: props.onClose })
   }
 
   private showDialog(options: DialogOptions): Promise<boolean> {
     let dialogResult = false
     return new Promise((resolve, reject) => {
-      this.onModalClose = () => resolve(dialogResult)
       try {
         this.showCustomModal(
           <Dialog
@@ -98,7 +107,7 @@ class LayoutOverlayManager {
               this.closeModal()
             }}
           />,
-          'small',
+          { size: 'small', onClose: () => resolve(dialogResult) },
         )
       } catch (error) {
         reject(error)
@@ -129,25 +138,26 @@ class LayoutOverlayManager {
     })
   }
 
-  showCustomRightPanel(content: ReactElement) {
+  showCustomRightPanel(content: ReactElement, { size = 'medium', onClose }: CustomRightPanelOptions = {}) {
     if (!this.elements?.rightPanel) throw new ElementNotFound('right panel overlay', RIGHT_PANEL_ID)
     if (!this.setContent.rightPanel) throw new LayoutError('unable to show right panel overlay, because it has not been setup yet.')
+    this.onModalClose = onClose
     this.setContent.rightPanel(content)
-    this.elements?.rightPanel.setAttribute('class', 'visible')
+    this.elements?.rightPanel.classList.add(size)
+    setTimeout(() => this.elements?.rightPanel?.classList?.add('visible'))
   }
 
-  showRightPanel(props: OverlayContentProps) {
-    const onClose = () => {
-      this.closeRightPanel()
-      if (props.onClose) props.onClose()
-    }
-    this.showCustomRightPanel(<OverlayContent {...props} onClose={onClose} type="panel" />)
+  showRightPanel({ size, ...props }: OverlayContentProps & { size?: OverlaySize }) {
+    this.showCustomRightPanel(
+      <OverlayContent {...props} onClose={() => this.closeRightPanel()} type="panel" />,
+      { size, onClose: props.onClose },
+    )
   }
 
-  closeModal() {
+  closeModal(runCloseListener = true) {
     this.elements?.modal?.classList.remove('visible')
     this.elements?.backdrop?.setAttribute('class', '')
-    if (this.onModalClose) {
+    if (runCloseListener && this.onModalClose) {
       this.onModalClose()
       this.onModalClose = undefined
     }
@@ -160,11 +170,16 @@ class LayoutOverlayManager {
     )
   }
 
-  closeRightPanel() {
-    this.elements?.rightPanel?.setAttribute('class', '')
+  closeRightPanel(runCloseListener = true) {
+    this.elements?.rightPanel?.classList.remove('visible')
+    if (runCloseListener && this.onModalClose) {
+      this.onModalClose()
+      this.onModalClose = undefined
+    }
     setTimeout(
       () => {
         if (this.setContent.rightPanel) this.setContent.rightPanel(undefined)
+        this.elements?.rightPanel?.removeAttribute('class')
       },
       parseFloat(valueOfLayoutVar('--right-panel-animation-duration')) * 1000,
     )
@@ -174,6 +189,14 @@ class LayoutOverlayManager {
     this.elements?.bottomDialog?.setAttribute('class', '')
   }
 
+  isInsideModal(element: HTMLElement) {
+    return !!this.elements?.modal?.contains(element)
+  }
+
+  isInsideRightPanel(element: HTMLElement) {
+    return !!this.elements?.rightPanel?.contains(element)
+  }
+
   showToaster = showReactToaster
 }
 

package/src/components/Dialog.tsx

@@ -15,6 +15,14 @@ export interface DialogOptions {
   confirm?: string,
   cancel?: string,
   validation?: false | string | Validation,
+  /**
+   * @default modal
+   */
+  type?: 'modal' | 'panel',
+  /**
+   * @default right if type is "panel", "right" otherwise.
+   */
+  buttonPlacement?: 'left' | 'center' | 'right',
 }
 
 interface Props extends DialogOptions {
@@ -22,12 +30,30 @@ interface Props extends DialogOptions {
   onCancel: () => void,
 }
 
-export const Dialog = ({ message, title, subtitle, cancel, confirm, validation, onConfirm, onCancel }: Props) => {
+const justifyButtons: Record<Required<DialogOptions>['buttonPlacement'], React.CSSProperties['justifyContent']> = {
+  center: 'center',
+  left: 'start',
+  right: 'end',
+}
+
+export const Dialog = ({
+  message,
+  title,
+  subtitle,
+  cancel,
+  confirm,
+  validation,
+  onConfirm,
+  onCancel,
+  type = 'modal',
+  buttonPlacement = type === 'panel' ? 'left' : 'right',
+}: Props,
+) => {
   const [enabled, setEnabled] = useState(!validation)
 
   function renderValidation() {
     if (!validation) return null
-    const value = typeof validation === 'string' ? validation : validation.label
+    const value = typeof validation === 'string' ? validation : validation.value
     const label = typeof validation === 'object' && validation.label
       ? validation.label
       : `Please, confirm the action by typing "${value}" below:`
@@ -41,10 +67,12 @@ export const Dialog = ({ message, title, subtitle, cancel, confirm, validation,
   }
 
   return (
-    <OverlayContent title={title} subtitle={subtitle} onClose={onCancel} type="modal">
-      {message}
-      {renderValidation()}
-      {(cancel || confirm) && <Flex gap justifyContent="end" alignItems="center" sx={{ mt: 6 }}>
+    <OverlayContent title={title} subtitle={subtitle} onClose={onCancel} type={type}>
+      <Flex flexDirection="column" flex={1}>
+        {message}
+        {renderValidation()}
+      </Flex>
+      {(cancel || confirm) && <Flex gap justifyContent={justifyButtons[buttonPlacement]} alignItems="center" sx={{ mt: 6 }}>
         {cancel && <Button appearance="outlined" colorScheme="inverse" onClick={onCancel}>{cancel}</Button>}
         {confirm && <Button colorScheme="primary" onClick={onConfirm} disabled={!enabled}>
           {confirm}

package/src/components/Menu/MenuContent.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { IconBox, Text } from '@citric/core'
+import { Flex, IconBox, Text } from '@citric/core'
 import { ArrowLeft, ChevronDown } from '@citric/icons'
+import { LoadingCircular } from '@citric/ui'
 import { listToClass, theme } from '@stack-spot/portal-theme'
 import { useMemo, useState } from 'react'
 import { styled } from 'styled-components'
@@ -26,16 +27,34 @@ const MenuGroup = styled.ul`
     padding: 0;
   }
 
+  .item-row {
+    display: flex;
+    flex-direction: row;
+    gap: 8px;
+    align-items: center;
+
+    .label {
+      flex: 1;
+      &.hidden, &.ellipsis {
+        white-space: nowrap;
+        overflow: hidden;
+      }
+      &.ellipsis {
+        text-overflow: ellipsis;
+      }
+    }
+  }
+
   li a {
     position: relative;
     height: 0;
     overflow: hidden;
-    display: flex;
-    align-items: center;
+    /* display: flex; */
+    /* align-items: center; */
     transition: height 0.3s, background-color 0.2s;
     margin: 0 ${PADDING - ITEM_PADDING}px;
     border-radius: 4px;
-    justify-content: space-between;
+    /* justify-content: space-between; */
     padding: 0 ${ITEM_PADDING}px;
 
     &:hover {
@@ -109,24 +128,26 @@ const Title = styled.header`
   margin: ${PADDING}px 0 24px ${PADDING}px;
 `
 
-const ActionItem = ({ label, onClick, href, active }: MenuAction) => (
+const ActionItem = ({ label, onClick, href, active, icon, overflow = 'wrap' }: MenuAction) => (
   <a
     href={active ? undefined : href}
     onClick={active ? onClick : undefined}
-    className={listToClass(['action', active ? 'active' : undefined])}
+    className={listToClass(['action', 'item-row', active ? 'active' : undefined])}
   >
-    <Text appearance="body2">{label}</Text>
+    {icon}
+    <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
   </a>
 )
 
-const CollapsibleGroupItem = ({ label, open: initiallyOpened, children }: ItemGroup) => {
+const CollapsibleGroupItem = ({ label, open: initiallyOpened, children, icon, overflow = 'wrap' }: ItemGroup) => {
   const [open, setOpen] = useState(initiallyOpened ?? children?.some(c => 'active' in c && c.active) ?? false)
   const items = useMemo(() => children?.map(renderOption), [children])
 
   return (
     <>
-      <a onClick={() => setOpen(!open)}>
-        <Text appearance="body2">{label}</Text>
+      <a onClick={() => setOpen(!open)} className="item-row">
+        {icon}
+        <Text appearance="body2" className={`label ${overflow}`}>{label}</Text>
         <IconBox><ChevronDown className={listToClass(['chevron', open ? 'open' : ''])} /></IconBox>
       </a>
       <MenuGroup className={open ? 'open' : undefined}>{items}</MenuGroup>
@@ -134,12 +155,15 @@ const CollapsibleGroupItem = ({ label, open: initiallyOpened, children }: ItemGr
   )
 }
 
-const RootGroupItem = ({ label, children }: ItemGroup) => {
-  const items = useMemo(() => children?.map(renderOption), [children])
+const RootGroupItem = ({ label, children, icon, overflow = 'wrap' }: ItemGroup) => {
+  const items = useMemo(() => children?.filter(i => !i.hidden).map(renderOption), [children])
 
   return (
     <>
-      <Text appearance="overheader2" colorScheme="light.700" className="group-title">{label}</Text>
+      <div className="item-row">
+        {icon}
+        <Text appearance="overheader2" colorScheme="light.700" className={`group-title label ${overflow}`}>{label}</Text>
+      </div>
       <MenuGroup className="open no-indentation">{items}</MenuGroup>
     </>
   )
@@ -153,9 +177,21 @@ function renderOption({ root, ...option }: MenuItem & { root?: boolean }) {
   return <li key={option.label}>{'children' in option ? <GroupItem root={root} {...option} /> : <ActionItem {...option} />}</li>
 }
 
-export const MenuContent = ({ pageSelector, goBack, title, subtitle, options = [] }: MenuSectionContent) => {
+export const MenuContent = ({ pageSelector, goBack, title, subtitle, options = [], loading, error }: MenuSectionContent) => {
   const items = useMemo(() => options.filter(o => !o.hidden).map(o => renderOption({ ...o, root: true })), [options])
 
+  function renderContent() {
+    if (loading) {
+      return (
+        <Flex justifyContent="center" alignItems="center" flex={1} sx={{ padding: '40px' }}>
+          <LoadingCircular />
+        </Flex>
+      )
+    }
+    if (error) return <Text colorScheme="danger">{error}</Text>
+    return <MenuGroup className="open root no-indentation">{items}</MenuGroup>
+  }
+
   return (
     <>
       {goBack && (
@@ -173,7 +209,7 @@ export const MenuContent = ({ pageSelector, goBack, title, subtitle, options = [
         </Title>
       )}
       {pageSelector && <PageSelector {...pageSelector} />}
-      <MenuGroup className="open root no-indentation">{items}</MenuGroup>
+      {renderContent()}
     </>
   )
 }