react-luminus-components 1.0.3 → 1.0.5

package/README.md

@@ -234,7 +234,6 @@ Common layout components
 - **TopBar**\
   Renders the top bar with the application name and child items
   - appName: string
-  - sideMenuExpanded: boolean
   ***
 - **SideContentBar**\
   Renders the side content bar on the right side, content is sent as children

package/dist/layout/TopBar/TopBar.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
 type Props = {
     appName: string;
-    sideMenuExpanded: boolean;
+    leftOffset?: number;
     children?: React.ReactNode;
 };
-declare const TopBar: ({ appName, sideMenuExpanded, children }: Props) => import("react").JSX.Element;
+declare const TopBar: ({ appName, leftOffset, children }: Props) => import("react").JSX.Element;
 export default TopBar;

package/dist/layout.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./HomeDashboard.module-BI8obEZ_.js"),d=require("react"),v=require("./SimpleTooltip-HYwwaCn4.js"),x=require("./hasClass-DABt6TfW.js");function _(...s){return s.filter(n=>n!=null).reduce((n,t)=>{if(typeof t!="function")throw new Error("Invalid Argument Type, must only provide functions, undefined, or null.");return n===null?t:function(...i){n.apply(this,i),t.apply(this,i)}},null)}const L={height:["marginTop","marginBottom"],width:["marginLeft","marginRight"]};function D(s,n){const t=`offset${s[0].toUpperCase()}${s.slice(1)}`,o=n[t],i=L[s];return o+parseInt(x.style(n,i[0]),10)+parseInt(x.style(n,i[1]),10)}const O={[x.EXITED]:"collapse",[x.EXITING]:"collapsing",[x.ENTERING]:"collapsing",[x.ENTERED]:"collapse show"},q=d.forwardRef(({onEnter:s,onEntering:n,onEntered:t,onExit:o,onExiting:i,className:p,children:c,dimension:j="height",in:u=!1,timeout:m=300,mountOnEnter:B=!1,unmountOnExit:w=!1,appear:g=!1,getDimensionValue:f=D,...N},y)=>{const l=typeof j=="function"?j():j,I=d.useMemo(()=>_(r=>{r.style[l]="0"},s),[l,s]),S=d.useMemo(()=>_(r=>{const E=`scroll${l[0].toUpperCase()}${l.slice(1)}`;r.style[l]=`${r[E]}px`},n),[l,n]),T=d.useMemo(()=>_(r=>{r.style[l]=null},t),[l,t]),$=d.useMemo(()=>_(r=>{r.style[l]=`${f(l,r)}px`,x.triggerBrowserReflow(r)},o),[o,f,l]),k=d.useMemo(()=>_(r=>{r.style[l]=null},i),[l,i]);return e.jsxRuntimeExports.jsx(x.TransitionWrapper,{ref:y,addEndListener:x.transitionEndListener,...N,"aria-expanded":N.role?u:null,onEnter:I,onEntering:S,onEntered:T,onExit:$,onExiting:k,childRef:c.ref,in:u,timeout:m,mountOnEnter:B,unmountOnExit:w,appear:g,children:(r,E)=>d.cloneElement(c,{...E,className:e.classNames(p,c.props.className,O[r],l==="width"&&"collapse-horizontal")})})}),F=q,H="_side-menu-item_8j1cd_1",A="_nav-button_8j1cd_4",G="_child_8j1cd_11",U="_text_8j1cd_14",X="_icon_8j1cd_17",z="_collapse-icon_8j1cd_23",K="_collapsed_8j1cd_33",W="_expanded_8j1cd_40",a={"side-menu-item":"_side-menu-item_8j1cd_1",sideMenuItem:H,"nav-button":"_nav-button_8j1cd_4",navButton:A,child:G,text:U,icon:X,"collapse-icon":"_collapse-icon_8j1cd_23",collapseIcon:z,collapsed:K,expanded:W},R=({item:s,menuExpanded:n,children:t})=>s.tooltip&&!n?e.jsxRuntimeExports.jsx(v.SimpleTooltip,{text:s.tooltip,placement:"right",children:t}):t,b=({item:s,menuExpanded:n,collapsed:t,onCollapse:o})=>{var p;const{LinkComponent:i}=d.useContext(e.LuminusComponentsContext);return s.children?e.jsxRuntimeExports.jsx("li",{className:e.classNames("luminus-side-menu-item",a.sideMenuItem,{[a.expanded]:n}),children:e.jsxRuntimeExports.jsx(R,{item:s,menuExpanded:n,children:e.jsxRuntimeExports.jsxs("div",{children:[e.jsxRuntimeExports.jsxs("button",{type:"button",className:e.classNames("nav-link",a.navButton),onClick:()=>o(),children:[e.jsxRuntimeExports.jsx("div",{className:e.classNames("icon",a.icon),children:s.icon}),n&&e.jsxRuntimeExports.jsx("div",{className:e.classNames("text",a.text,"text-nowrap"),children:s.title}),n&&e.jsxRuntimeExports.jsx("div",{className:e.classNames("collapse-icon",a.collapseIcon,{[a.collapsed]:t}),children:e.jsxRuntimeExports.jsx(v.MdOutlineKeyboardArrowDown,{})})]}),e.jsxRuntimeExports.jsx(F,{in:t,children:e.jsxRuntimeExports.jsx("div",{children:(p=s.children)==null?void 0:p.map(c=>e.jsxRuntimeExports.jsx(i,{to:c.linkTo??"/",className:e.classNames("nav-link",a.navButton,a.child),children:e.jsxRuntimeExports.jsx("div",{className:e.classNames("text",a.text,"text-nowrap"),children:c.title})},c.linkTo))})})]})})}):e.jsxRuntimeExports.jsx("li",{className:e.classNames("luminus-side-menu-item",a.sideMenuItem,{[a.expanded]:n}),children:e.jsxRuntimeExports.jsx(R,{item:s,menuExpanded:n,children:e.jsxRuntimeExports.jsxs(i,{to:s.linkTo??"/",className:e.classNames("nav-link",a.navButton),children:[e.jsxRuntimeExports.jsx("div",{className:e.classNames("icon",a.icon),children:s.icon}),n&&e.jsxRuntimeExports.jsx("div",{className:e.classNames("text",a.text,"text-nowrap"),children:s.title})]})})})},J="_side-menu_s0700_1",P="_sidebar-header_s0700_14",Q="_side-menu-content_s0700_19",V="_expand_s0700_23",h={"side-menu":"_side-menu_s0700_1",sideMenu:J,"sidebar-header":"_sidebar-header_s0700_14",sidebarHeader:P,"side-menu-content":"_side-menu-content_s0700_19",sideMenuContent:Q,expand:V},Y=({headerItem:s,mainItems:n,secondaryItems:t,expanded:o,setExpanded:i})=>{const[p,c]=d.useState(-1),j=u=>{c(u===p?-1:u)};return d.useEffect(()=>{o||c(-1)},[o]),e.jsxRuntimeExports.jsxs("section",{className:e.classNames("luminus-side-menu",h.sideMenu,"shadow",{[h.expand]:o},{expand:o}),onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),children:[e.jsxRuntimeExports.jsx("div",{className:e.classNames("sidebar-header",h.sidebarHeader),children:s}),e.jsxRuntimeExports.jsxs("ul",{className:h.sideMenuContent,children:[n.map((u,m)=>e.jsxRuntimeExports.jsx(b,{item:u,menuExpanded:o,collapsed:m===p,onCollapse:()=>j(m)},u.title)),e.jsxRuntimeExports.jsx("hr",{}),t.map((u,m)=>e.jsxRuntimeExports.jsx(b,{item:u,menuExpanded:o,collapsed:m===p,onCollapse:()=>j(m)},u.title))]})]})},Z="_top-bar_j4je9_1",ee="_top-bar-brand_j4je9_12",C={"top-bar":"_top-bar_j4je9_1",topBar:Z,"top-bar-brand":"_top-bar-brand_j4je9_12",topBarBrand:ee},se=({appName:s,sideMenuExpanded:n,children:t})=>{const{LinkComponent:o}=d.useContext(e.LuminusComponentsContext);return e.jsxRuntimeExports.jsxs("nav",{className:e.classNames("shadow luminus-top-bar",C.topBar,{"topbar-expand":n}),children:[e.jsxRuntimeExports.jsx(o,{to:"/",className:e.classNames("luminus-top-bar-brand",C.topBarBrand),children:s}),e.jsxRuntimeExports.jsx("div",{className:"w-100 d-flex justify-content-end align-items-center gap-2",children:t})]})},ne="_side-content-bar_17kwd_1",te={"side-content-bar":"_side-content-bar_17kwd_1",sideContentBar:ne},M=({width:s,children:n})=>e.jsxRuntimeExports.jsx("section",{className:e.classNames("shadow luminus-side-content-bar",te.sideContentBar),style:{width:`${s}px`},children:n}),oe=({children:s,sideContent:n})=>e.jsxRuntimeExports.jsxs("div",{className:"container-fluid p-3",children:[e.jsxRuntimeExports.jsx("div",{style:{paddingRight:n?"250px":void 0},children:s}),n&&e.jsxRuntimeExports.jsx(M,{width:250,children:n})]}),ae="_full-screen-container_1c9bu_1",ie={"full-screen-container":"_full-screen-container_1c9bu_1",fullScreenContainer:ae},le=({children:s})=>e.jsxRuntimeExports.jsx("div",{className:e.classNames("container-fluid p-3 overflow-hidden luminus-full-screen-container",ie.fullScreenContainer),children:s});exports.FullScreenContainer=le;exports.MainContainer=oe;exports.SideContentBar=M;exports.SideMenu=Y;exports.TopBar=se;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./HomeDashboard.module-BI8obEZ_.js"),d=require("react"),C=require("./SimpleTooltip-HYwwaCn4.js"),x=require("./hasClass-DABt6TfW.js");function _(...n){return n.filter(e=>e!=null).reduce((e,t)=>{if(typeof t!="function")throw new Error("Invalid Argument Type, must only provide functions, undefined, or null.");return e===null?t:function(...i){e.apply(this,i),t.apply(this,i)}},null)}const L={height:["marginTop","marginBottom"],width:["marginLeft","marginRight"]};function D(n,e){const t=`offset${n[0].toUpperCase()}${n.slice(1)}`,o=e[t],i=L[n];return o+parseInt(x.style(e,i[0]),10)+parseInt(x.style(e,i[1]),10)}const q={[x.EXITED]:"collapse",[x.EXITING]:"collapsing",[x.ENTERING]:"collapsing",[x.ENTERED]:"collapse show"},F=d.forwardRef(({onEnter:n,onEntering:e,onEntered:t,onExit:o,onExiting:i,className:p,children:r,dimension:j="height",in:u=!1,timeout:m=300,mountOnEnter:w=!1,unmountOnExit:B=!1,appear:y=!1,getDimensionValue:N=D,...R},g)=>{const l=typeof j=="function"?j():j,I=d.useMemo(()=>_(c=>{c.style[l]="0"},n),[l,n]),S=d.useMemo(()=>_(c=>{const E=`scroll${l[0].toUpperCase()}${l.slice(1)}`;c.style[l]=`${c[E]}px`},e),[l,e]),T=d.useMemo(()=>_(c=>{c.style[l]=null},t),[l,t]),$=d.useMemo(()=>_(c=>{c.style[l]=`${N(l,c)}px`,x.triggerBrowserReflow(c)},o),[o,N,l]),k=d.useMemo(()=>_(c=>{c.style[l]=null},i),[l,i]);return s.jsxRuntimeExports.jsx(x.TransitionWrapper,{ref:g,addEndListener:x.transitionEndListener,...R,"aria-expanded":R.role?u:null,onEnter:I,onEntering:S,onEntered:T,onExit:$,onExiting:k,childRef:r.ref,in:u,timeout:m,mountOnEnter:w,unmountOnExit:B,appear:y,children:(c,E)=>d.cloneElement(r,{...E,className:s.classNames(p,r.props.className,q[c],l==="width"&&"collapse-horizontal")})})}),H=F,A="_side-menu-item_8j1cd_1",G="_nav-button_8j1cd_4",O="_child_8j1cd_11",U="_text_8j1cd_14",X="_icon_8j1cd_17",z="_collapse-icon_8j1cd_23",K="_collapsed_8j1cd_33",W="_expanded_8j1cd_40",a={"side-menu-item":"_side-menu-item_8j1cd_1",sideMenuItem:A,"nav-button":"_nav-button_8j1cd_4",navButton:G,child:O,text:U,icon:X,"collapse-icon":"_collapse-icon_8j1cd_23",collapseIcon:z,collapsed:K,expanded:W},f=({item:n,menuExpanded:e,children:t})=>n.tooltip&&!e?s.jsxRuntimeExports.jsx(C.SimpleTooltip,{text:n.tooltip,placement:"right",children:t}):t,b=({item:n,menuExpanded:e,collapsed:t,onCollapse:o})=>{var p;const{LinkComponent:i}=d.useContext(s.LuminusComponentsContext);return n.children?s.jsxRuntimeExports.jsx("li",{className:s.classNames("luminus-side-menu-item",a.sideMenuItem,{[a.expanded]:e}),children:s.jsxRuntimeExports.jsx(f,{item:n,menuExpanded:e,children:s.jsxRuntimeExports.jsxs("div",{children:[s.jsxRuntimeExports.jsxs("button",{type:"button",className:s.classNames("nav-link",a.navButton),onClick:()=>o(),children:[s.jsxRuntimeExports.jsx("div",{className:s.classNames("icon",a.icon),children:n.icon}),e&&s.jsxRuntimeExports.jsx("div",{className:s.classNames("text",a.text,"text-nowrap"),children:n.title}),e&&s.jsxRuntimeExports.jsx("div",{className:s.classNames("collapse-icon",a.collapseIcon,{[a.collapsed]:t}),children:s.jsxRuntimeExports.jsx(C.MdOutlineKeyboardArrowDown,{})})]}),s.jsxRuntimeExports.jsx(H,{in:t,children:s.jsxRuntimeExports.jsx("div",{children:(p=n.children)==null?void 0:p.map(r=>s.jsxRuntimeExports.jsx(i,{to:r.linkTo??"/",className:s.classNames("nav-link",a.navButton,a.child),children:s.jsxRuntimeExports.jsx("div",{className:s.classNames("text",a.text,"text-nowrap"),children:r.title})},r.linkTo))})})]})})}):s.jsxRuntimeExports.jsx("li",{className:s.classNames("luminus-side-menu-item",a.sideMenuItem,{[a.expanded]:e}),children:s.jsxRuntimeExports.jsx(f,{item:n,menuExpanded:e,children:s.jsxRuntimeExports.jsxs(i,{to:n.linkTo??"/",className:s.classNames("nav-link",a.navButton),children:[s.jsxRuntimeExports.jsx("div",{className:s.classNames("icon",a.icon),children:n.icon}),e&&s.jsxRuntimeExports.jsx("div",{className:s.classNames("text",a.text,"text-nowrap"),children:n.title})]})})})},J="_side-menu_s0700_1",P="_sidebar-header_s0700_14",Q="_side-menu-content_s0700_19",V="_expand_s0700_23",h={"side-menu":"_side-menu_s0700_1",sideMenu:J,"sidebar-header":"_sidebar-header_s0700_14",sidebarHeader:P,"side-menu-content":"_side-menu-content_s0700_19",sideMenuContent:Q,expand:V},Y=({headerItem:n,mainItems:e,secondaryItems:t,expanded:o,setExpanded:i})=>{const[p,r]=d.useState(-1),j=u=>{r(u===p?-1:u)};return d.useEffect(()=>{o||r(-1)},[o]),s.jsxRuntimeExports.jsxs("section",{className:s.classNames("luminus-side-menu",h.sideMenu,"shadow",{[h.expand]:o},{expand:o}),onMouseEnter:()=>i(!0),onMouseLeave:()=>i(!1),children:[s.jsxRuntimeExports.jsx("div",{className:s.classNames("sidebar-header",h.sidebarHeader),children:n}),s.jsxRuntimeExports.jsxs("ul",{className:h.sideMenuContent,children:[e.map((u,m)=>s.jsxRuntimeExports.jsx(b,{item:u,menuExpanded:o,collapsed:m===p,onCollapse:()=>j(m)},u.title)),s.jsxRuntimeExports.jsx("hr",{}),t.map((u,m)=>s.jsxRuntimeExports.jsx(b,{item:u,menuExpanded:o,collapsed:m===p,onCollapse:()=>j(m)},u.title))]})]})},Z="_top-bar_4di1c_1",ss="_top-bar-brand_4di1c_13",v={"top-bar":"_top-bar_4di1c_1",topBar:Z,"top-bar-brand":"_top-bar-brand_4di1c_13",topBarBrand:ss},es=({appName:n,leftOffset:e,children:t})=>{const{LinkComponent:o}=d.useContext(s.LuminusComponentsContext);return s.jsxRuntimeExports.jsxs("nav",{className:s.classNames("shadow luminus-top-bar",v.topBar),style:{width:e?`calc(100% - ${e}px)`:void 0,left:e?`${e}px`:void 0},children:[s.jsxRuntimeExports.jsx(o,{to:"/",className:s.classNames("luminus-top-bar-brand",v.topBarBrand),children:n}),s.jsxRuntimeExports.jsx("div",{className:"w-100 d-flex justify-content-end align-items-center gap-2",children:t})]})},ns="_side-content-bar_17kwd_1",ts={"side-content-bar":"_side-content-bar_17kwd_1",sideContentBar:ns},M=({width:n,children:e})=>s.jsxRuntimeExports.jsx("section",{className:s.classNames("shadow luminus-side-content-bar",ts.sideContentBar),style:{width:`${n}px`},children:e}),os=({children:n,sideContent:e})=>s.jsxRuntimeExports.jsxs("div",{className:"container-fluid p-3",children:[s.jsxRuntimeExports.jsx("div",{style:{paddingRight:e?"250px":void 0},children:n}),e&&s.jsxRuntimeExports.jsx(M,{width:250,children:e})]}),as="_full-screen-container_1c9bu_1",is={"full-screen-container":"_full-screen-container_1c9bu_1",fullScreenContainer:as},ls=({children:n})=>s.jsxRuntimeExports.jsx("div",{className:s.classNames("container-fluid p-3 overflow-hidden luminus-full-screen-container",is.fullScreenContainer),children:n});exports.FullScreenContainer=ls;exports.MainContainer=os;exports.SideContentBar=M;exports.SideMenu=Y;exports.TopBar=es;

package/dist/layout.es.js

@@ -1,13 +1,13 @@
-import { j as e, e as o, L as M } from "./HomeDashboard.module-CuVVnp4t.mjs";
-import N, { useMemo as x, useContext as g, useState as O, useEffect as A } from "react";
-import { M as F, S as G } from "./SimpleTooltip-C8wTRZNZ.mjs";
-import { T as H, t as U, s as C, E as X, a as z, b as K, c as W, d as q } from "./hasClass-D3KZs5y_.mjs";
-function h(...n) {
-  return n.filter((s) => s != null).reduce((s, t) => {
+import { j as n, e as o, L as M } from "./HomeDashboard.module-CuVVnp4t.mjs";
+import N, { useMemo as x, useContext as g, useState as A, useEffect as F } from "react";
+import { M as G, S as H } from "./SimpleTooltip-C8wTRZNZ.mjs";
+import { T as U, t as X, s as C, E as z, a as K, b as O, c as W, d as q } from "./hasClass-D3KZs5y_.mjs";
+function h(...s) {
+  return s.filter((e) => e != null).reduce((e, t) => {
     if (typeof t != "function")
       throw new Error("Invalid Argument Type, must only provide functions, undefined, or null.");
-    return s === null ? t : function(...c) {
-      s.apply(this, c), t.apply(this, c);
+    return e === null ? t : function(...c) {
+      e.apply(this, c), t.apply(this, c);
     };
   }, null);
 }
@@ -15,20 +15,20 @@ const J = {
   height: ["marginTop", "marginBottom"],
   width: ["marginLeft", "marginRight"]
 };
-function Q(n, s) {
-  const t = `offset${n[0].toUpperCase()}${n.slice(1)}`, a = s[t], c = J[n];
+function Q(s, e) {
+  const t = `offset${s[0].toUpperCase()}${s.slice(1)}`, a = e[t], c = J[s];
   return a + // @ts-ignore
-  parseInt(C(s, c[0]), 10) + // @ts-ignore
-  parseInt(C(s, c[1]), 10);
+  parseInt(C(e, c[0]), 10) + // @ts-ignore
+  parseInt(C(e, c[1]), 10);
 }
 const V = {
-  [X]: "collapse",
-  [z]: "collapsing",
+  [z]: "collapse",
   [K]: "collapsing",
+  [O]: "collapsing",
   [W]: "collapse show"
 }, Y = /* @__PURE__ */ N.forwardRef(({
-  onEnter: n,
-  onEntering: s,
+  onEnter: s,
+  onEntering: e,
   onEntered: t,
   onExit: a,
   onExiting: c,
@@ -39,27 +39,27 @@ const V = {
   timeout: _ = 300,
   mountOnEnter: y = !1,
   unmountOnExit: E = !1,
-  appear: T = !1,
-  getDimensionValue: b = Q,
-  ...v
-}, $) => {
+  appear: $ = !1,
+  getDimensionValue: v = Q,
+  ...b
+}, T) => {
   const i = typeof m == "function" ? m() : m, k = x(() => h((r) => {
     r.style[i] = "0";
-  }, n), [i, n]), S = x(() => h((r) => {
+  }, s), [i, s]), S = x(() => h((r) => {
     const f = `scroll${i[0].toUpperCase()}${i.slice(1)}`;
     r.style[i] = `${r[f]}px`;
-  }, s), [i, s]), R = x(() => h((r) => {
+  }, e), [i, e]), R = x(() => h((r) => {
     r.style[i] = null;
   }, t), [i, t]), L = x(() => h((r) => {
-    r.style[i] = `${b(i, r)}px`, q(r);
-  }, a), [a, b, i]), D = x(() => h((r) => {
+    r.style[i] = `${v(i, r)}px`, q(r);
+  }, a), [a, v, i]), D = x(() => h((r) => {
     r.style[i] = null;
   }, c), [i, c]);
-  return /* @__PURE__ */ e.jsx(H, {
-    ref: $,
-    addEndListener: U,
-    ...v,
-    "aria-expanded": v.role ? u : null,
+  return /* @__PURE__ */ n.jsx(U, {
+    ref: T,
+    addEndListener: X,
+    ...b,
+    "aria-expanded": b.role ? u : null,
     onEnter: k,
     onEntering: S,
     onEntered: R,
@@ -70,7 +70,7 @@ const V = {
     timeout: _,
     mountOnEnter: y,
     unmountOnExit: E,
-    appear: T,
+    appear: $,
     children: (r, f) => /* @__PURE__ */ N.cloneElement(d, {
       ...f,
       className: o(p, d.props.className, V[r], i === "width" && "collapse-horizontal")
@@ -88,25 +88,25 @@ const V = {
   collapseIcon: oe,
   collapsed: ae,
   expanded: le
-}, w = ({ item: n, menuExpanded: s, children: t }) => n.tooltip && !s ? /* @__PURE__ */ e.jsx(G, { text: n.tooltip, placement: "right", children: t }) : t, B = ({ item: n, menuExpanded: s, collapsed: t, onCollapse: a }) => {
+}, w = ({ item: s, menuExpanded: e, children: t }) => s.tooltip && !e ? /* @__PURE__ */ n.jsx(H, { text: s.tooltip, placement: "right", children: t }) : t, B = ({ item: s, menuExpanded: e, collapsed: t, onCollapse: a }) => {
   var p;
   const { LinkComponent: c } = g(M);
-  return n.children ? /* @__PURE__ */ e.jsx("li", { className: o("luminus-side-menu-item", l.sideMenuItem, {
-    [l.expanded]: s
-  }), children: /* @__PURE__ */ e.jsx(w, { item: n, menuExpanded: s, children: /* @__PURE__ */ e.jsxs("div", { children: [
-    /* @__PURE__ */ e.jsxs("button", { type: "button", className: o("nav-link", l.navButton), onClick: () => a(), children: [
-      /* @__PURE__ */ e.jsx("div", { className: o("icon", l.icon), children: n.icon }),
-      s && /* @__PURE__ */ e.jsx("div", { className: o("text", l.text, "text-nowrap"), children: n.title }),
-      s && /* @__PURE__ */ e.jsx("div", { className: o("collapse-icon", l.collapseIcon, {
+  return s.children ? /* @__PURE__ */ n.jsx("li", { className: o("luminus-side-menu-item", l.sideMenuItem, {
+    [l.expanded]: e
+  }), children: /* @__PURE__ */ n.jsx(w, { item: s, menuExpanded: e, children: /* @__PURE__ */ n.jsxs("div", { children: [
+    /* @__PURE__ */ n.jsxs("button", { type: "button", className: o("nav-link", l.navButton), onClick: () => a(), children: [
+      /* @__PURE__ */ n.jsx("div", { className: o("icon", l.icon), children: s.icon }),
+      e && /* @__PURE__ */ n.jsx("div", { className: o("text", l.text, "text-nowrap"), children: s.title }),
+      e && /* @__PURE__ */ n.jsx("div", { className: o("collapse-icon", l.collapseIcon, {
         [l.collapsed]: t
-      }), children: /* @__PURE__ */ e.jsx(F, {}) })
+      }), children: /* @__PURE__ */ n.jsx(G, {}) })
     ] }),
-    /* @__PURE__ */ e.jsx(Z, { in: t, children: /* @__PURE__ */ e.jsx("div", { children: (p = n.children) == null ? void 0 : p.map((d) => /* @__PURE__ */ e.jsx(c, { to: d.linkTo ?? "/", className: o("nav-link", l.navButton, l.child), children: /* @__PURE__ */ e.jsx("div", { className: o("text", l.text, "text-nowrap"), children: d.title }) }, d.linkTo)) }) })
-  ] }) }) }) : /* @__PURE__ */ e.jsx("li", { className: o("luminus-side-menu-item", l.sideMenuItem, {
-    [l.expanded]: s
-  }), children: /* @__PURE__ */ e.jsx(w, { item: n, menuExpanded: s, children: /* @__PURE__ */ e.jsxs(c, { to: n.linkTo ?? "/", className: o("nav-link", l.navButton), children: [
-    /* @__PURE__ */ e.jsx("div", { className: o("icon", l.icon), children: n.icon }),
-    s && /* @__PURE__ */ e.jsx("div", { className: o("text", l.text, "text-nowrap"), children: n.title })
+    /* @__PURE__ */ n.jsx(Z, { in: t, children: /* @__PURE__ */ n.jsx("div", { children: (p = s.children) == null ? void 0 : p.map((d) => /* @__PURE__ */ n.jsx(c, { to: d.linkTo ?? "/", className: o("nav-link", l.navButton, l.child), children: /* @__PURE__ */ n.jsx("div", { className: o("text", l.text, "text-nowrap"), children: d.title }) }, d.linkTo)) }) })
+  ] }) }) }) : /* @__PURE__ */ n.jsx("li", { className: o("luminus-side-menu-item", l.sideMenuItem, {
+    [l.expanded]: e
+  }), children: /* @__PURE__ */ n.jsx(w, { item: s, menuExpanded: e, children: /* @__PURE__ */ n.jsxs(c, { to: s.linkTo ?? "/", className: o("nav-link", l.navButton), children: [
+    /* @__PURE__ */ n.jsx("div", { className: o("icon", l.icon), children: s.icon }),
+    e && /* @__PURE__ */ n.jsx("div", { className: o("text", l.text, "text-nowrap"), children: s.title })
   ] }) }) });
 }, ce = "_side-menu_s0700_1", ie = "_sidebar-header_s0700_14", re = "_side-menu-content_s0700_19", de = "_expand_s0700_23", j = {
   "side-menu": "_side-menu_s0700_1",
@@ -116,47 +116,48 @@ const V = {
   "side-menu-content": "_side-menu-content_s0700_19",
   sideMenuContent: re,
   expand: de
-}, Ce = ({ headerItem: n, mainItems: s, secondaryItems: t, expanded: a, setExpanded: c }) => {
-  const [p, d] = O(-1), m = (u) => {
+}, Ce = ({ headerItem: s, mainItems: e, secondaryItems: t, expanded: a, setExpanded: c }) => {
+  const [p, d] = A(-1), m = (u) => {
     d(u === p ? -1 : u);
   };
-  return A(() => {
+  return F(() => {
     a || d(-1);
-  }, [a]), /* @__PURE__ */ e.jsxs("section", { className: o("luminus-side-menu", j.sideMenu, "shadow", {
+  }, [a]), /* @__PURE__ */ n.jsxs("section", { className: o("luminus-side-menu", j.sideMenu, "shadow", {
     [j.expand]: a
   }, { expand: a }), onMouseEnter: () => c(!0), onMouseLeave: () => c(!1), children: [
-    /* @__PURE__ */ e.jsx("div", { className: o("sidebar-header", j.sidebarHeader), children: n }),
-    /* @__PURE__ */ e.jsxs("ul", { className: j.sideMenuContent, children: [
-      s.map((u, _) => /* @__PURE__ */ e.jsx(B, { item: u, menuExpanded: a, collapsed: _ === p, onCollapse: () => m(_) }, u.title)),
-      /* @__PURE__ */ e.jsx("hr", {}),
-      t.map((u, _) => /* @__PURE__ */ e.jsx(B, { item: u, menuExpanded: a, collapsed: _ === p, onCollapse: () => m(_) }, u.title))
+    /* @__PURE__ */ n.jsx("div", { className: o("sidebar-header", j.sidebarHeader), children: s }),
+    /* @__PURE__ */ n.jsxs("ul", { className: j.sideMenuContent, children: [
+      e.map((u, _) => /* @__PURE__ */ n.jsx(B, { item: u, menuExpanded: a, collapsed: _ === p, onCollapse: () => m(_) }, u.title)),
+      /* @__PURE__ */ n.jsx("hr", {}),
+      t.map((u, _) => /* @__PURE__ */ n.jsx(B, { item: u, menuExpanded: a, collapsed: _ === p, onCollapse: () => m(_) }, u.title))
     ] })
   ] });
-}, ue = "_top-bar_j4je9_1", pe = "_top-bar-brand_j4je9_12", I = {
-  "top-bar": "_top-bar_j4je9_1",
+}, ue = "_top-bar_4di1c_1", pe = "_top-bar-brand_4di1c_13", I = {
+  "top-bar": "_top-bar_4di1c_1",
   topBar: ue,
-  "top-bar-brand": "_top-bar-brand_j4je9_12",
+  "top-bar-brand": "_top-bar-brand_4di1c_13",
   topBarBrand: pe
-}, we = ({ appName: n, sideMenuExpanded: s, children: t }) => {
+}, we = ({ appName: s, leftOffset: e, children: t }) => {
   const { LinkComponent: a } = g(M);
-  return /* @__PURE__ */ e.jsxs("nav", { className: o("shadow luminus-top-bar", I.topBar, {
-    "topbar-expand": s
-  }), children: [
-    /* @__PURE__ */ e.jsx(a, { to: "/", className: o("luminus-top-bar-brand", I.topBarBrand), children: n }),
-    /* @__PURE__ */ e.jsx("div", { className: "w-100 d-flex justify-content-end align-items-center gap-2", children: t })
+  return /* @__PURE__ */ n.jsxs("nav", { className: o("shadow luminus-top-bar", I.topBar), style: {
+    width: e ? `calc(100% - ${e}px)` : void 0,
+    left: e ? `${e}px` : void 0
+  }, children: [
+    /* @__PURE__ */ n.jsx(a, { to: "/", className: o("luminus-top-bar-brand", I.topBarBrand), children: s }),
+    /* @__PURE__ */ n.jsx("div", { className: "w-100 d-flex justify-content-end align-items-center gap-2", children: t })
   ] });
 }, _e = "_side-content-bar_17kwd_1", me = {
   "side-content-bar": "_side-content-bar_17kwd_1",
   sideContentBar: _e
-}, xe = ({ width: n, children: s }) => /* @__PURE__ */ e.jsx("section", { className: o("shadow luminus-side-content-bar", me.sideContentBar), style: {
-  width: `${n}px`
-}, children: s }), Be = ({ children: n, sideContent: s }) => /* @__PURE__ */ e.jsxs("div", { className: "container-fluid p-3", children: [
-  /* @__PURE__ */ e.jsx("div", { style: { paddingRight: s ? "250px" : void 0 }, children: n }),
-  s && /* @__PURE__ */ e.jsx(xe, { width: 250, children: s })
+}, xe = ({ width: s, children: e }) => /* @__PURE__ */ n.jsx("section", { className: o("shadow luminus-side-content-bar", me.sideContentBar), style: {
+  width: `${s}px`
+}, children: e }), Be = ({ children: s, sideContent: e }) => /* @__PURE__ */ n.jsxs("div", { className: "container-fluid p-3", children: [
+  /* @__PURE__ */ n.jsx("div", { style: { paddingRight: e ? "250px" : void 0 }, children: s }),
+  e && /* @__PURE__ */ n.jsx(xe, { width: 250, children: e })
 ] }), he = "_full-screen-container_1c9bu_1", je = {
   "full-screen-container": "_full-screen-container_1c9bu_1",
   fullScreenContainer: he
-}, Ie = ({ children: n }) => /* @__PURE__ */ e.jsx("div", { className: o("container-fluid p-3 overflow-hidden luminus-full-screen-container", je.fullScreenContainer), children: n });
+}, Ie = ({ children: s }) => /* @__PURE__ */ n.jsx("div", { className: o("container-fluid p-3 overflow-hidden luminus-full-screen-container", je.fullScreenContainer), children: s });
 export {
   Ie as FullScreenContainer,
   Be as MainContainer,

package/dist/style.css

@@ -1 +1 @@
-._loading_14qfh_1{position:fixed;display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;gap:8px}._loading_14qfh_1 ._spinner-grow_14qfh_10{width:40px;height:40px}._loading_14qfh_1 ._spinner-grow_14qfh_10._second_14qfh_14{animation-delay:.1s}._loading_14qfh_1 ._spinner-grow_14qfh_10._third_14qfh_17{animation-delay:.2s}._h1_8gr7h_1{font-size:32px;font-weight:400;margin:0;padding:0}._h3_8gr7h_8{font-size:24px;font-weight:400;margin:0;padding:0}._h6_8gr7h_15{font-size:20px;font-weight:400;margin:0;padding:0}._subtitle_8gr7h_22,._body_8gr7h_29{font-size:16px;font-weight:400;margin:0;padding:0}._body2_8gr7h_36{font-size:14px;font-weight:400;margin:0;padding:0}._caption_8gr7h_43{font-size:12px;font-weight:400;margin:0;padding:0}._widget_1sdw8_1{height:320px;display:flex;justify-content:center;align-items:center}._dashboard_1ikl9_1 ._widgets-grid_1ikl9_1{display:grid;grid-template-columns:repeat(2,1fr);column-gap:16px;row-gap:16px}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7{position:relative;height:320px;width:100%}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7._full-width_1ikl9_12{grid-column:span 2}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7._widget-edit_1ikl9_15{border:2px dashed gray}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7 ._remove-icon_1ikl9_18{z-index:2;position:absolute;right:-16px;top:-16px;background-color:#fff}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7 ._full-width-icon_1ikl9_25{z-index:2;position:absolute;right:-16px;top:calc(50% - 15px);background-color:#fff}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7 ._full-width-icon_1ikl9_25 svg{rotate:90deg}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7 ._widget-edit-overlay_1ikl9_35{position:absolute;left:0;top:0;height:100%;width:100%;background-color:#80808080;opacity:.6}._side-menu-item_8j1cd_1{width:100%}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4{width:100%;display:flex;align-items:center;justify-content:center;padding:8px 16px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4._child_8j1cd_11{padding:4px 8px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4._child_8j1cd_11 ._text_8j1cd_14{font-size:14px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._icon_8j1cd_17{display:flex;justify-content:center;align-items:center;font-size:22px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._collapse-icon_8j1cd_23{width:100%;display:flex;justify-content:end;align-items:center;font-size:20px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._collapse-icon_8j1cd_23 svg{transition:.2s ease}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._collapse-icon_8j1cd_23._collapsed_8j1cd_33 svg{rotate:180deg}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._text_8j1cd_14{font-size:16px;margin-left:32px}._side-menu-item_8j1cd_1._expanded_8j1cd_40 ._nav-button_8j1cd_4,._side-menu-item_8j1cd_1._expanded_8j1cd_40 ._nav-button_8j1cd_4 ._icon_8j1cd_17{justify-content:flex-start}._side-menu_s0700_1{position:fixed;top:0;left:0;height:100%;background-color:#fff;transition:.3s ease;overflow-x:hidden;scrollbar-width:none}._side-menu_s0700_1::state(webkit-scrollbar){display:none}._side-menu_s0700_1 ._sidebar-header_s0700_14{display:flex;justify-content:center;align-items:center}._side-menu_s0700_1 ._side-menu-content_s0700_19{margin-top:8px;padding:0}._side-menu_s0700_1._expand_s0700_23 ._sidebar-header_s0700_14{padding:0 12px;justify-content:start}._top-bar_j4je9_1{padding:0 24px;border-left:16px solid transparent;display:flex;align-items:center;grid-gap:24px;position:sticky;top:0;left:0;transition:.3s ease}._top-bar_j4je9_1 ._top-bar-brand_j4je9_12{text-decoration:none;font-size:20px}._side-content-bar_17kwd_1{position:fixed;top:0;right:0;height:100%;background-color:#fff;overflow-x:hidden;scrollbar-width:none}._side-content-bar_17kwd_1::state(webkit-scrollbar){display:none}._full-screen-container_1c9bu_1{width:100%;display:flex;flex-direction:column}.luminus-input-remove-icon{position:absolute;top:0;right:16px;height:100%;display:flex;align-items:center;justify-content:center}.luminus-input-remove-icon.inset{right:40px}.luminus-input-remove-icon .icon-button{padding:0;margin:0;font-size:16px;height:20px;width:20px;display:flex;align-items:center}._avatar-icon_1axl6_1{height:36px;width:36px;display:flex;align-items:center;justify-content:center;border-radius:100%;color:#fff;font-size:16px}._modal_18hh3_1 ._modal-content_18hh3_1{height:100%;max-height:90vh}._modal_18hh3_1 ._modal-body_18hh3_5{height:100%;display:flex;flex-direction:column;overflow:hidden}._form-submit_1wjhr_1{position:fixed;width:160px;bottom:40px;left:calc(50% - 80px)}
+._loading_14qfh_1{position:fixed;display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;gap:8px}._loading_14qfh_1 ._spinner-grow_14qfh_10{width:40px;height:40px}._loading_14qfh_1 ._spinner-grow_14qfh_10._second_14qfh_14{animation-delay:.1s}._loading_14qfh_1 ._spinner-grow_14qfh_10._third_14qfh_17{animation-delay:.2s}._h1_8gr7h_1{font-size:32px;font-weight:400;margin:0;padding:0}._h3_8gr7h_8{font-size:24px;font-weight:400;margin:0;padding:0}._h6_8gr7h_15{font-size:20px;font-weight:400;margin:0;padding:0}._subtitle_8gr7h_22,._body_8gr7h_29{font-size:16px;font-weight:400;margin:0;padding:0}._body2_8gr7h_36{font-size:14px;font-weight:400;margin:0;padding:0}._caption_8gr7h_43{font-size:12px;font-weight:400;margin:0;padding:0}._widget_1sdw8_1{height:320px;display:flex;justify-content:center;align-items:center}._dashboard_1ikl9_1 ._widgets-grid_1ikl9_1{display:grid;grid-template-columns:repeat(2,1fr);column-gap:16px;row-gap:16px}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7{position:relative;height:320px;width:100%}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7._full-width_1ikl9_12{grid-column:span 2}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7._widget-edit_1ikl9_15{border:2px dashed gray}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7 ._remove-icon_1ikl9_18{z-index:2;position:absolute;right:-16px;top:-16px;background-color:#fff}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7 ._full-width-icon_1ikl9_25{z-index:2;position:absolute;right:-16px;top:calc(50% - 15px);background-color:#fff}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7 ._full-width-icon_1ikl9_25 svg{rotate:90deg}._dashboard_1ikl9_1 ._widget-wrapper_1ikl9_7 ._widget-edit-overlay_1ikl9_35{position:absolute;left:0;top:0;height:100%;width:100%;background-color:#80808080;opacity:.6}._side-menu-item_8j1cd_1{width:100%}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4{width:100%;display:flex;align-items:center;justify-content:center;padding:8px 16px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4._child_8j1cd_11{padding:4px 8px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4._child_8j1cd_11 ._text_8j1cd_14{font-size:14px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._icon_8j1cd_17{display:flex;justify-content:center;align-items:center;font-size:22px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._collapse-icon_8j1cd_23{width:100%;display:flex;justify-content:end;align-items:center;font-size:20px}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._collapse-icon_8j1cd_23 svg{transition:.2s ease}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._collapse-icon_8j1cd_23._collapsed_8j1cd_33 svg{rotate:180deg}._side-menu-item_8j1cd_1 ._nav-button_8j1cd_4 ._text_8j1cd_14{font-size:16px;margin-left:32px}._side-menu-item_8j1cd_1._expanded_8j1cd_40 ._nav-button_8j1cd_4,._side-menu-item_8j1cd_1._expanded_8j1cd_40 ._nav-button_8j1cd_4 ._icon_8j1cd_17{justify-content:flex-start}._side-menu_s0700_1{position:fixed;top:0;left:0;height:100%;background-color:#fff;transition:.3s ease;overflow-x:hidden;scrollbar-width:none}._side-menu_s0700_1::state(webkit-scrollbar){display:none}._side-menu_s0700_1 ._sidebar-header_s0700_14{display:flex;justify-content:center;align-items:center}._side-menu_s0700_1 ._side-menu-content_s0700_19{margin-top:8px;padding:0}._side-menu_s0700_1._expand_s0700_23 ._sidebar-header_s0700_14{padding:0 12px;justify-content:start}._top-bar_4di1c_1{padding:0 24px;border-left:16px solid transparent;display:flex;align-items:center;grid-gap:24px;position:fixed;top:0;left:0;width:100%;transition:.3s ease}._top-bar_4di1c_1 ._top-bar-brand_4di1c_13{text-decoration:none;font-size:20px}._side-content-bar_17kwd_1{position:fixed;top:0;right:0;height:100%;background-color:#fff;overflow-x:hidden;scrollbar-width:none}._side-content-bar_17kwd_1::state(webkit-scrollbar){display:none}._full-screen-container_1c9bu_1{width:100%;display:flex;flex-direction:column}.luminus-input-remove-icon{position:absolute;top:0;right:16px;height:100%;display:flex;align-items:center;justify-content:center}.luminus-input-remove-icon.inset{right:40px}.luminus-input-remove-icon .icon-button{padding:0;margin:0;font-size:16px;height:20px;width:20px;display:flex;align-items:center}._avatar-icon_1axl6_1{height:36px;width:36px;display:flex;align-items:center;justify-content:center;border-radius:100%;color:#fff;font-size:16px}._modal_18hh3_1 ._modal-content_18hh3_1{height:100%;max-height:90vh}._modal_18hh3_1 ._modal-body_18hh3_5{height:100%;display:flex;flex-direction:column;overflow:hidden}._form-submit_1wjhr_1{position:fixed;width:160px;bottom:40px;left:calc(50% - 80px)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-luminus-components",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Library of React Components reusable in Luminus projects (Fleetman, CAFM)",
   "repository": {
     "type": "git",