@useloops/design-system 1.4.682 → 1.4.683

package/dist/esm/systems/WebCore/Menu/Menu.js

@@ -1 +1 @@
-import{jsx as e,Fragment as r}from"react/jsx-runtime";import{usePopupState as t}from"material-ui-popup-state/hooks";import{mergeSx as p}from"merge-sx";import o from"../Popper/Popper.js";import i from"./MenuItem.js";const s=({menuItems:i,offset:s,placement:a,state:m,parentState:l,bindOn:c=["toggle"],trigger:d,width:f=192,showItemNumbers:u=!1,slotProps:h})=>{const g=m||t({variant:"popper",parentPopupState:l});return e(o,{popperProps:{modifiers:s&&[{name:"offset",options:{offset:s}}],placement:a,...h?.popper},surfaceProps:{...h?.surface,sx:p({ml:1,p:1,width:f},h?.surface?.sx)},bindOn:c,trigger:d,state:g,children:e(r,{children:i?.map((e,r)=>n(e,r,g,u))})})},n=(p,s,a,m)=>{const l=t({variant:"popper"});return p.children?.length?e(o,{popperProps:{placement:"right-end"},surfaceProps:{sx:{p:1,width:p.width}},bindOn:["trigger","hover"],state:l,trigger:e(i,{...p,active:l.isOpen}),children:e(r,{children:p?.children?.map((e,r)=>n(e,r,a))})},`${p.label}-${s}`):e(i,{...p,onClick:e=>{return r=e,t=p?.onClick,r.stopPropagation(),void(t&&t(r));var r,t},baseState:a,showItemNumber:m,itemNumber:s+1},`${p.label}-${s}`)};export{s as default,n as mapMenuItems};
+import{jsx as e,Fragment as r}from"react/jsx-runtime";import{usePopupState as t}from"material-ui-popup-state/hooks";import{mergeSx as o}from"merge-sx";import p from"../Popper/Popper.js";import a from"./MenuItem.js";const i=({menuItems:a,offset:i,placement:n,state:m,parentState:l,bindOn:c=["toggle"],trigger:h,width:d=192,showItemNumbers:u=!1,hoverLeaveDelay:f=0,slotProps:g})=>{const v=m||t({variant:"popper",parentPopupState:l});return e(p,{popperProps:{modifiers:i&&[{name:"offset",options:{offset:i}}],placement:n,...g?.popper},surfaceProps:{...g?.surface,sx:o({ml:1,p:1,width:d},g?.surface?.sx)},bindOn:c,trigger:h,state:v,hoverLeaveDelay:f,children:e(r,{children:a?.map((e,r)=>s(e,r,v,u,f,v))})})},s=(o,i,n,m,l,c)=>{const h=t({variant:"popper",parentPopupState:c});return o.children?.length?e(p,{popperProps:{placement:"right-end"},surfaceProps:{sx:{p:1,width:o.width}},bindOn:["trigger","hover"],state:h,trigger:e(a,{...o,active:h.isOpen}),hoverLeaveDelay:l,children:e(r,{children:o?.children?.map((e,r)=>s(e,r,n,void 0,l,h))})},`${o.label}-${i}`):e(a,{...o,onClick:e=>{return r=e,t=o?.onClick,r.stopPropagation(),void(t&&t(r));var r,t},baseState:n,showItemNumber:m,itemNumber:i+1},`${o.label}-${i}`)};export{i as default,s as mapMenuItems};

package/dist/esm/systems/WebCore/Popper/Popper.js

@@ -1 +1 @@
-import{jsx as r,jsxs as e}from"react/jsx-runtime";import{ClickAwayListener as o,Box as i,Popper as t,Fade as s}from"@mui/material";import{usePopupState as a,bindDoubleClick as n,bindFocus as p,bindHover as c,bindToggle as l,bindContextMenu as m,bindTrigger as d,bindPopper as u}from"material-ui-popup-state/hooks";import{mergeSx as f}from"merge-sx";import{useMemo as x}from"react";import g from"../Surface/Surface.js";const h={trigger:d,contextMenu:m,toggle:l,hover:c,focus:p,doubleClick:n},P=({bindOn:n=["toggle"],trigger:p,children:c,state:l,...m})=>{const d=l||a({variant:"popper"}),P={transition:!0,sx:f({zIndex:r=>r.zIndex.modal},m.popperProps?.sx),...m.popperProps},k={...m.clickAwayListenerProps,onClickAway:r=>{m.clickAwayListenerProps?.onClickAway?m.clickAwayListenerProps.onClickAway(r,d):d.close()}},y={timeout:350,...m.transitionFadeProps},{sx:w,...A}={variation:"overlay",borderradius:"md",...m.surfaceProps},v=x(()=>n.reduce((r,e)=>({...r,...h[e](d)}),{}),[n]);return r(o,{...k,children:e(i,{children:[r(i,{sx:{display:"flex"},...v,children:p}),r(t,{...u(d),...P,children:({TransitionProps:e})=>r(s,{...e,...y,children:r(g,{sx:f({p:2},w),...A,children:c})})})]})})};export{P as default};
+import{jsx as r,jsxs as e}from"react/jsx-runtime";import{ClickAwayListener as o,Box as t,Popper as i,Fade as n}from"@mui/material";import{usePopupState as s,bindDoubleClick as a,bindFocus as c,bindHover as p,bindToggle as l,bindContextMenu as u,bindTrigger as d,bindPopper as m}from"material-ui-popup-state/hooks";import{mergeSx as v}from"merge-sx";import{useRef as f,useCallback as x,useEffect as h,useMemo as g}from"react";import y from"../Surface/Surface.js";const P={trigger:d,contextMenu:u,toggle:l,hover:p,focus:c,doubleClick:a},k=({bindOn:a=["toggle"],trigger:c,children:p,state:l,hoverLeaveDelay:u=0,...d})=>{const k=l||s({variant:"popper"}),w=f(void 0),A=u>0&&a.includes("hover"),L=x(()=>{w.current&&(clearTimeout(w.current),w.current=void 0)},[]),M=x(r=>{const e=r.onMouseOver,o=r.onMouseLeave;return{onMouseOver:r=>{L(),e?.(r)},...o&&{onMouseLeave:r=>{L(),w.current=setTimeout(()=>o(r),u)}}}},[L,u]);h(()=>L,[L]);const C={transition:!0,sx:v({zIndex:r=>r.zIndex.modal},d.popperProps?.sx),...d.popperProps},b={...d.clickAwayListenerProps,onClickAway:r=>{d.clickAwayListenerProps?.onClickAway?d.clickAwayListenerProps.onClickAway(r,k):k.close()}},O={timeout:350,...d.transitionFadeProps},{sx:T,...j}={variation:"overlay",borderradius:"md",...d.surfaceProps},z=g(()=>{const r=a.reduce((r,e)=>({...r,...P[e](k)}),{});return A?{...r,...M(r)}:r},[a,k,A,M]),I=m(k),S=A?M(I):void 0;return r(o,{...b,children:e(t,{children:[r(t,{sx:{display:"flex"},...z,children:c}),r(i,{...I,...C,...S,children:({TransitionProps:e})=>r(n,{...e,...O,children:r(y,{sx:v({p:2},T),...j,children:p})})})]})})};export{k as default};

package/dist/esm/systems/WebCore/UserMenu/UserMenu.js

@@ -1 +1 @@
-import{jsx as e,Fragment as t}from"react/jsx-runtime";import{usePopupState as a}from"material-ui-popup-state/hooks";import r,{mapMenuItems as n}from"../Menu/Menu.js";import o from"./UserMenuButton.js";const m=({accent:m,avatar:i,avatarIcon:p,email:s,menuItems:c,name:u,offset:d=[0,8],placement:f="right-end",rounded:l,width:h=192})=>{const v=a({variant:"popper"});return e(r,{placement:f,offset:d,menuItems:c,state:v,trigger:e(o,{active:v.isOpen,accent:m,avatar:i,avatarIcon:p,email:s,name:u,rounded:l,withMenu:!!c?.length}),width:h,children:e(t,{children:c?.map((e,t)=>n(e,t,v))})})};export{m as default};
+import{jsx as e,Fragment as t}from"react/jsx-runtime";import{usePopupState as a}from"material-ui-popup-state/hooks";import r,{mapMenuItems as n}from"../Menu/Menu.js";import o from"./UserMenuButton.js";const m=({accent:m,avatar:i,avatarIcon:p,email:s,menuItems:c,name:u,offset:d=[0,8],placement:l="right-end",rounded:v,width:h=192,hoverLeaveDelay:f=0})=>{const g=a({variant:"popper"});return e(r,{placement:l,offset:d,menuItems:c,state:g,hoverLeaveDelay:f,trigger:e(o,{active:g.isOpen,accent:m,avatar:i,avatarIcon:p,email:s,name:u,rounded:v,withMenu:!!c?.length}),width:h,children:e(t,{children:c?.map((e,t)=>n(e,t,g,void 0,f,g))})})};export{m as default};

package/dist/systems/Platform/SliderGraph/_partials/StyledComponents.d.ts

@@ -12,7 +12,7 @@ declare const SliderGraphWrapper: _emotion_styled.StyledComponent<_mui_system.Bo
 } & {
     responsive?: boolean;
 }, {}, {}>;
-declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "alignItems" | "className" | "style" | "classes" | "children" | "sx" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
+declare const VeticalBarWrapper: _emotion_styled.StyledComponent<_mui_material.ListItemButtonOwnProps & Omit<_mui_material.ButtonBaseOwnProps, keyof _mui_material.ListItemButtonOwnProps> & Omit<_mui_material.ButtonBaseOwnProps, "tabIndex" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | keyof _mui_material.ListItemButtonOwnProps> & _mui_material_OverridableComponent.CommonProps & Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "disabled" | "sx" | "alignItems" | "className" | "style" | "classes" | "children" | "autoFocus" | "tabIndex" | "disableGutters" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "nativeButton" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "type" | "dense" | "divider" | "selected"> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
     component?: React.ElementType | undefined;
 } & {
     maxHeight: number;

package/dist/systems/WebCore/Menu/Menu.d.ts

@@ -15,6 +15,7 @@ interface MenuProps extends PropsWithChildren {
     trigger: ReactElement;
     width?: number;
     showItemNumbers?: boolean;
+    hoverLeaveDelay?: number;
     slotProps?: {
         popper?: PopperProps$1['popperProps'];
         surface?: SurfaceProps;

package/dist/systems/WebCore/Menu/Menu.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("material-ui-popup-state/hooks"),t=require("merge-sx"),s=require("../Popper/Popper.js"),p=require("./MenuItem.js");const o=(t,a,i,n)=>{const u=r.usePopupState({variant:"popper"});return t.children?.length?e.jsx(s,{popperProps:{placement:"right-end"},surfaceProps:{sx:{p:1,width:t.width}},bindOn:["trigger","hover"],state:u,trigger:e.jsx(p,{...t,active:u.isOpen}),children:e.jsx(e.Fragment,{children:t?.children?.map((e,r)=>o(e,r,i))})},`${t.label}-${a}`):e.jsx(p,{...t,onClick:e=>{return r=e,s=t?.onClick,r.stopPropagation(),void(s&&s(r));var r,s},baseState:i,showItemNumber:n,itemNumber:a+1},`${t.label}-${a}`)};exports.default=({menuItems:p,offset:a,placement:i,state:n,parentState:u,bindOn:m=["toggle"],trigger:l,width:c=192,showItemNumbers:d=!1,slotProps:g})=>{const h=n||r.usePopupState({variant:"popper",parentPopupState:u});return e.jsx(s,{popperProps:{modifiers:a&&[{name:"offset",options:{offset:a}}],placement:i,...g?.popper},surfaceProps:{...g?.surface,sx:t.mergeSx({ml:1,p:1,width:c},g?.surface?.sx)},bindOn:m,trigger:l,state:h,children:e.jsx(e.Fragment,{children:p?.map((e,r)=>o(e,r,h,d))})})},exports.mapMenuItems=o;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("material-ui-popup-state/hooks"),t=require("merge-sx"),p=require("../Popper/Popper.js"),s=require("./MenuItem.js");const a=(t,o,i,n,u,l)=>{const m=r.usePopupState({variant:"popper",parentPopupState:l});return t.children?.length?e.jsx(p,{popperProps:{placement:"right-end"},surfaceProps:{sx:{p:1,width:t.width}},bindOn:["trigger","hover"],state:m,trigger:e.jsx(s,{...t,active:m.isOpen}),hoverLeaveDelay:u,children:e.jsx(e.Fragment,{children:t?.children?.map((e,r)=>a(e,r,i,void 0,u,m))})},`${t.label}-${o}`):e.jsx(s,{...t,onClick:e=>{return r=e,p=t?.onClick,r.stopPropagation(),void(p&&p(r));var r,p},baseState:i,showItemNumber:n,itemNumber:o+1},`${t.label}-${o}`)};exports.default=({menuItems:s,offset:o,placement:i,state:n,parentState:u,bindOn:l=["toggle"],trigger:m,width:c=192,showItemNumbers:d=!1,hoverLeaveDelay:h=0,slotProps:g})=>{const v=n||r.usePopupState({variant:"popper",parentPopupState:u});return e.jsx(p,{popperProps:{modifiers:o&&[{name:"offset",options:{offset:o}}],placement:i,...g?.popper},surfaceProps:{...g?.surface,sx:t.mergeSx({ml:1,p:1,width:c},g?.surface?.sx)},bindOn:l,trigger:m,state:v,hoverLeaveDelay:h,children:e.jsx(e.Fragment,{children:s?.map((e,r)=>a(e,r,v,d,h,v))})})},exports.mapMenuItems=a;

package/dist/systems/WebCore/Popper/Popper.d.ts

@@ -16,8 +16,9 @@ interface PopperProps {
     trigger: ReactElement;
     children: ReactElement;
     state?: PopupState;
+    hoverLeaveDelay?: number;
 }
-declare const Popper: ({ bindOn, trigger, children, state, ...props }: PopperProps) => react.JSX.Element;
+declare const Popper: ({ bindOn, trigger, children, state, hoverLeaveDelay, ...props }: PopperProps) => react.JSX.Element;
 
 export { Popper as default };
 export type { PopperProps };

package/dist/systems/WebCore/Popper/Popper.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),i=require("material-ui-popup-state/hooks"),o=require("merge-sx"),s=require("react"),n=require("../Surface/Surface.js");const t={trigger:i.bindTrigger,contextMenu:i.bindContextMenu,toggle:i.bindToggle,hover:i.bindHover,focus:i.bindFocus,doubleClick:i.bindDoubleClick};module.exports=({bindOn:a=["toggle"],trigger:c,children:l,state:p,...u})=>{const d=p||i.usePopupState({variant:"popper"}),x={transition:!0,sx:o.mergeSx({zIndex:e=>e.zIndex.modal},u.popperProps?.sx),...u.popperProps},g={...u.clickAwayListenerProps,onClickAway:e=>{u.clickAwayListenerProps?.onClickAway?u.clickAwayListenerProps.onClickAway(e,d):d.close()}},m={timeout:350,...u.transitionFadeProps},{sx:b,...P}={variation:"overlay",borderradius:"md",...u.surfaceProps},k=s.useMemo(()=>a.reduce((e,r)=>({...e,...t[r](d)}),{}),[a]);return e.jsx(r.ClickAwayListener,{...g,children:e.jsxs(r.Box,{children:[e.jsx(r.Box,{sx:{display:"flex"},...k,children:c}),e.jsx(r.Popper,{...i.bindPopper(d),...x,children:({TransitionProps:i})=>e.jsx(r.Fade,{...i,...m,children:e.jsx(n,{sx:o.mergeSx({p:2},b),...P,children:l})})})]})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material"),o=require("material-ui-popup-state/hooks"),i=require("merge-sx"),s=require("react"),n=require("../Surface/Surface.js");const t={trigger:o.bindTrigger,contextMenu:o.bindContextMenu,toggle:o.bindToggle,hover:o.bindHover,focus:o.bindFocus,doubleClick:o.bindDoubleClick};module.exports=({bindOn:u=["toggle"],trigger:c,children:a,state:l,hoverLeaveDelay:d=0,...p})=>{const x=l||o.usePopupState({variant:"popper"}),v=s.useRef(void 0),g=d>0&&u.includes("hover"),m=s.useCallback(()=>{v.current&&(clearTimeout(v.current),v.current=void 0)},[]),b=s.useCallback(e=>{const r=e.onMouseOver,o=e.onMouseLeave;return{onMouseOver:e=>{m(),r?.(e)},...o&&{onMouseLeave:e=>{m(),v.current=setTimeout(()=>o(e),d)}}}},[m,d]);s.useEffect(()=>m,[m]);const k={transition:!0,sx:i.mergeSx({zIndex:e=>e.zIndex.modal},p.popperProps?.sx),...p.popperProps},h={...p.clickAwayListenerProps,onClickAway:e=>{p.clickAwayListenerProps?.onClickAway?p.clickAwayListenerProps.onClickAway(e,x):x.close()}},P={timeout:350,...p.transitionFadeProps},{sx:y,...C}={variation:"overlay",borderradius:"md",...p.surfaceProps},f=s.useMemo(()=>{const e=u.reduce((e,r)=>({...e,...t[r](x)}),{});return g?{...e,...b(e)}:e},[u,x,g,b]),j=o.bindPopper(x),w=g?b(j):void 0;return e.jsx(r.ClickAwayListener,{...h,children:e.jsxs(r.Box,{children:[e.jsx(r.Box,{sx:{display:"flex"},...f,children:c}),e.jsx(r.Popper,{...j,...k,...w,children:({TransitionProps:o})=>e.jsx(r.Fade,{...o,...P,children:e.jsx(n,{sx:i.mergeSx({p:2},y),...C,children:a})})})]})})};

package/dist/systems/WebCore/UserMenu/UserMenu.d.ts

@@ -15,6 +15,7 @@ interface UserMenuProps extends PropsWithChildren {
     placement?: PopperProps['placement'];
     rounded?: boolean;
     width?: number;
+    hoverLeaveDelay?: number;
 }
 declare const UserMenu: FunctionComponent<UserMenuProps>;
 

package/dist/systems/WebCore/UserMenu/UserMenu.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("material-ui-popup-state/hooks"),a=require("../Menu/Menu.js"),r=require("./UserMenuButton.js");module.exports=({accent:n,avatar:u,avatarIcon:s,email:i,menuItems:m,name:o,offset:c=[0,8],placement:p="right-end",rounded:d,width:l=192})=>{const h=t.usePopupState({variant:"popper"});return e.jsx(a.default,{placement:p,offset:c,menuItems:m,state:h,trigger:e.jsx(r,{active:h.isOpen,accent:n,avatar:u,avatarIcon:s,email:i,name:o,rounded:d,withMenu:!!m?.length}),width:l,children:e.jsx(e.Fragment,{children:m?.map((e,t)=>a.mapMenuItems(e,t,h))})})};
+"use strict";var e=require("react/jsx-runtime"),t=require("material-ui-popup-state/hooks"),a=require("../Menu/Menu.js"),r=require("./UserMenuButton.js");module.exports=({accent:n,avatar:u,avatarIcon:i,email:s,menuItems:o,name:m,offset:c=[0,8],placement:p="right-end",rounded:d,width:l=192,hoverLeaveDelay:v=0})=>{const h=t.usePopupState({variant:"popper"});return e.jsx(a.default,{placement:p,offset:c,menuItems:o,state:h,hoverLeaveDelay:v,trigger:e.jsx(r,{active:h.isOpen,accent:n,avatar:u,avatarIcon:i,email:s,name:m,rounded:d,withMenu:!!o?.length}),width:l,children:e.jsx(e.Fragment,{children:o?.map((e,t)=>a.mapMenuItems(e,t,h,void 0,v,h))})})};

package/dist/theme/theme.hooks.d.ts

@@ -4,7 +4,7 @@ import { PaletteMode, Direction } from '@mui/material';
 import { ScreenSize, CustomTheme } from './types.js';
 
 declare const useThemeBuilder: (initialMode?: PaletteMode, initialScreenSize?: ScreenSize, initialDirection?: Direction) => {
-    breakpoint: "" | "sm" | "lg" | "md" | "xl";
+    breakpoint: "" | "sm" | "md" | "lg" | "xl";
     custom: CustomTheme;
     gridOverlayVisible: boolean;
     mode: PaletteMode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@useloops/design-system",
-    "version": "1.4.682",
+    "version": "1.4.683",
     "description": "The official React based Loops design system",
     "main": "dist/index.js",
     "module": "dist/esm/index.js",