@useloops/design-system 1.4.700 → 1.4.701

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

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{styled as i,Box as n,Button as r,boxClasses as o,useTheme as a,Slide as s,Fade as c,Grow as l}from"@mui/material";import{mergeSx as m}from"merge-sx";import{useRef as p}from"react";import{omitProps as d}from"../../../utils/shouldForwardProp.js";import u from"../../BrandCore/Icon/Icon.js";import{buttonInteraction as g}from"../ButtonBase/Button.variant-helpers.js";import"../ButtonBase/ButtonBase.js";import{Text as h}from"../Text/Text.js";const x=i(n)(({theme:t})=>({alignItems:"center",cursor:"pointer",display:"flex",flexDirection:"column",gap:t.spacing(.5),justifyContent:"center",transition:t.custom.easing.input})),f=i(n)(({theme:t})=>({alignItems:"center",color:t.custom.palette.text.secondary,display:"flex",opacity:0,transition:t.custom.easing.input})),y=i(h,{shouldForwardProp:d("active")})(({active:t,theme:e})=>({color:t?e.custom.palette.text.primary:e.custom.palette.text.secondary,textAlign:"center"})),v=(t,e)=>{switch(t){case"sm":return e.spacing(.5625);case"md":return e.spacing(.8125);case"lg":return e.spacing(1)}},j=i(r,{shouldForwardProp:d("active","sizing")})(({active:t,fullWidth:e,sizing:i,theme:n})=>({...g(n,t),alignItems:"center",backgroundColor:t?n.custom.palette.interaction.press:"transparent",borderRadius:n.spacing(n.custom.radius.md),color:n.custom.palette.text.primary,display:"flex",gap:n.spacing(1),justifyContent:e?"space-between":"center",minWidth:0,padding:v(i,n),textTransform:"none",width:e?"100%":"auto","&:hover":{...g(n,t)["&:hover"],[`.${o.root}`]:{opacity:1}},"&:focus":{...g(n,t)["&:focus"],[`.${o.root}`]:{opacity:1}}})),w=({active:i,fullWidth:r=!0,danger:o,href:d,target:g,external:v=!1,icon:w,label:z,navigationSizing:B,onClick:b,sizing:C="lg"})=>{const I=a(),k=p(null);return t(x,{onClick:v&&d?()=>window.open(d,g||"_blank"):b,children:[t(j,{active:!d&&i,sizing:C,fullWidth:r,children:[t(n,{ref:k,sx:{display:"flex",alignItems:"center",justifyContent:"center",gap:1.5},children:[w&&e(u,{name:w,size:24}),"lg"===B&&e(s,{in:!0,direction:"right",container:k.current,children:e(n,{sx:{display:"flex"},children:e(c,{in:!0,style:{transitionDelay:"100ms"},children:e(n,{sx:{display:"flex"},children:e(h,{size:"sm"===C?"xs":"md",variant:"button",clamp:1,sx:m(o&&{color:I.custom.palette.text.negative}),children:z})})})})})]}),"lg"===B&&v&&e(f,{children:e(u,{name:"open-in-new",size:20})})]}),"sm"===B&&e(l,{in:!0,style:{transformOrigin:"0 100%",transitionDelay:"100ms"},children:e(n,{children:e(y,{active:i,variant:"button",size:"xs",sx:m(o&&{color:I.custom.palette.text.negative}),children:z})})})]})};export{w as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{styled as i,Box as n,Button as r,boxClasses as o,useTheme as a,Slide as s,Fade as c,Grow as l}from"@mui/material";import{usePopupState as m}from"material-ui-popup-state/hooks";import{mergeSx as p}from"merge-sx";import{useRef as u}from"react";import{omitProps as d}from"../../../utils/shouldForwardProp.js";import g from"../../BrandCore/Icon/Icon.js";import{buttonInteraction as h}from"../ButtonBase/Button.variant-helpers.js";import"../ButtonBase/ButtonBase.js";import f from"../Menu/Menu.js";import{Text as x}from"../Text/Text.js";const y=i(n)(({theme:t})=>({alignItems:"center",cursor:"pointer",display:"flex",flexDirection:"column",gap:t.spacing(.5),justifyContent:"center",transition:t.custom.easing.input})),v=i(n)(({theme:t})=>({alignItems:"center",color:t.custom.palette.text.secondary,display:"flex",opacity:0,transition:t.custom.easing.input})),j=i(x,{shouldForwardProp:d("active")})(({active:t,theme:e})=>({color:t?e.custom.palette.text.primary:e.custom.palette.text.secondary,textAlign:"center"})),w=(t,e)=>{switch(t){case"sm":return e.spacing(.5625);case"md":return e.spacing(.8125);case"lg":return e.spacing(1)}},z=i(r,{shouldForwardProp:d("active","sizing")})(({active:t,fullWidth:e,sizing:i,theme:n})=>({...h(n,t),alignItems:"center",backgroundColor:t?n.custom.palette.interaction.press:"transparent",borderRadius:n.spacing(n.custom.radius.md),color:n.custom.palette.text.primary,display:"flex",gap:n.spacing(1),justifyContent:e?"space-between":"center",minWidth:0,padding:w(i,n),textTransform:"none",width:e?"100%":"auto","&:hover":{...h(n,t)["&:hover"],[`.${o.root}`]:{opacity:1}},"&:focus":{...h(n,t)["&:focus"],[`.${o.root}`]:{opacity:1}}})),B=({active:i,fullWidth:r=!0,danger:o,href:d,target:h,external:w=!1,icon:B,label:I,navigationSizing:b,onClick:C,sizing:k="lg",menuItems:W,menuPlacement:P="right-end",menuOffset:T=[0,8],menuWidth:D=192})=>{const F=a(),O=u(null),M=m({variant:"popper"}),$=!!W?.length,A=i||$&&M.isOpen,R=t(y,{onClick:$?void 0:w&&d?()=>window.open(d,h||"_blank"):C,children:[t(z,{active:!d&&A,sizing:k,fullWidth:r,children:[t(n,{ref:O,sx:{display:"flex",alignItems:"center",justifyContent:"center",gap:1.5},children:[B&&e(g,{name:B,size:24}),"lg"===b&&e(s,{in:!0,direction:"right",container:O.current,children:e(n,{sx:{display:"flex"},children:e(c,{in:!0,style:{transitionDelay:"100ms"},children:e(n,{sx:{display:"flex"},children:e(x,{size:"sm"===k?"xs":"md",variant:"button",clamp:1,sx:p(o&&{color:F.custom.palette.text.negative}),children:I})})})})})]}),"lg"===b&&w&&e(v,{children:e(g,{name:"open-in-new",size:20})})]}),"sm"===b&&e(l,{in:!0,style:{transformOrigin:"0 100%",transitionDelay:"100ms"},children:e(n,{children:e(j,{active:A,variant:"button",size:"xs",sx:p(o&&{color:F.custom.palette.text.negative}),children:I})})})]});return $?e(f,{state:M,trigger:R,menuItems:W,placement:P,offset:T,width:D}):R};export{B as default};

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

@@ -1,6 +1,8 @@
+import { PopperProps } from '@mui/material';
 import { FunctionComponent } from 'react';
 import { IconName } from '../../../BrandCore/Icon.js';
 import { NavigationSizing } from '../../Platform/Navigation/Navigation.js';
+import { MenuItemProps } from '../Menu/MenuItem.js';
 
 type NavigationButtonSizing = 'sm' | 'md' | 'lg';
 interface NavigationButtonProps {
@@ -15,6 +17,11 @@ interface NavigationButtonProps {
     navigationSizing?: NavigationSizing;
     onClick?: () => void;
     sizing?: NavigationButtonSizing;
+    /** When provided, the button opens a popper menu of these items instead of firing onClick. */
+    menuItems?: MenuItemProps[];
+    menuPlacement?: PopperProps['placement'];
+    menuOffset?: number[];
+    menuWidth?: number;
 }
 declare const NavigationButton: FunctionComponent<NavigationButtonProps>;
 

package/dist/systems/WebCore/NavigationButton/NavigationButton.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),i=require("merge-sx"),n=require("react"),r=require("../../../utils/shouldForwardProp.js"),s=require("../../BrandCore/Icon/Icon.js"),o=require("../ButtonBase/Button.variant-helpers.js");require("../ButtonBase/ButtonBase.js");var a=require("../Text/Text.js");const l=t.styled(t.Box)(({theme:e})=>({alignItems:"center",cursor:"pointer",display:"flex",flexDirection:"column",gap:e.spacing(.5),justifyContent:"center",transition:e.custom.easing.input})),c=t.styled(t.Box)(({theme:e})=>({alignItems:"center",color:e.custom.palette.text.secondary,display:"flex",opacity:0,transition:e.custom.easing.input})),u=t.styled(a.Text,{shouldForwardProp:r.omitProps("active")})(({active:e,theme:t})=>({color:e?t.custom.palette.text.primary:t.custom.palette.text.secondary,textAlign:"center"})),x=(e,t)=>{switch(e){case"sm":return t.spacing(.5625);case"md":return t.spacing(.8125);case"lg":return t.spacing(1)}},d=t.styled(t.Button,{shouldForwardProp:r.omitProps("active","sizing")})(({active:e,fullWidth:i,sizing:n,theme:r})=>({...o.buttonInteraction(r,e),alignItems:"center",backgroundColor:e?r.custom.palette.interaction.press:"transparent",borderRadius:r.spacing(r.custom.radius.md),color:r.custom.palette.text.primary,display:"flex",gap:r.spacing(1),justifyContent:i?"space-between":"center",minWidth:0,padding:x(n,r),textTransform:"none",width:i?"100%":"auto","&:hover":{...o.buttonInteraction(r,e)["&:hover"],[`.${t.boxClasses.root}`]:{opacity:1}},"&:focus":{...o.buttonInteraction(r,e)["&:focus"],[`.${t.boxClasses.root}`]:{opacity:1}}}));module.exports=({active:r,fullWidth:o=!0,danger:x,href:m,target:p,external:g=!1,icon:h,label:y,navigationSizing:j,onClick:f,sizing:v="lg"})=>{const B=t.useTheme(),b=n.useRef(null);return e.jsxs(l,{onClick:g&&m?()=>window.open(m,p||"_blank"):f,children:[e.jsxs(d,{active:!m&&r,sizing:v,fullWidth:o,children:[e.jsxs(t.Box,{ref:b,sx:{display:"flex",alignItems:"center",justifyContent:"center",gap:1.5},children:[h&&e.jsx(s.default,{name:h,size:24}),"lg"===j&&e.jsx(t.Slide,{in:!0,direction:"right",container:b.current,children:e.jsx(t.Box,{sx:{display:"flex"},children:e.jsx(t.Fade,{in:!0,style:{transitionDelay:"100ms"},children:e.jsx(t.Box,{sx:{display:"flex"},children:e.jsx(a.Text,{size:"sm"===v?"xs":"md",variant:"button",clamp:1,sx:i.mergeSx(x&&{color:B.custom.palette.text.negative}),children:y})})})})})]}),"lg"===j&&g&&e.jsx(c,{children:e.jsx(s.default,{name:"open-in-new",size:20})})]}),"sm"===j&&e.jsx(t.Grow,{in:!0,style:{transformOrigin:"0 100%",transitionDelay:"100ms"},children:e.jsx(t.Box,{children:e.jsx(u,{active:r,variant:"button",size:"xs",sx:i.mergeSx(x&&{color:B.custom.palette.text.negative}),children:y})})})]})};
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material"),n=require("material-ui-popup-state/hooks"),i=require("merge-sx"),s=require("react"),r=require("../../../utils/shouldForwardProp.js"),a=require("../../BrandCore/Icon/Icon.js"),o=require("../ButtonBase/Button.variant-helpers.js");require("../ButtonBase/ButtonBase.js");var l=require("../Menu/Menu.js"),c=require("../Text/Text.js");const u=t.styled(t.Box)(({theme:e})=>({alignItems:"center",cursor:"pointer",display:"flex",flexDirection:"column",gap:e.spacing(.5),justifyContent:"center",transition:e.custom.easing.input})),d=t.styled(t.Box)(({theme:e})=>({alignItems:"center",color:e.custom.palette.text.secondary,display:"flex",opacity:0,transition:e.custom.easing.input})),m=t.styled(c.Text,{shouldForwardProp:r.omitProps("active")})(({active:e,theme:t})=>({color:e?t.custom.palette.text.primary:t.custom.palette.text.secondary,textAlign:"center"})),x=(e,t)=>{switch(e){case"sm":return t.spacing(.5625);case"md":return t.spacing(.8125);case"lg":return t.spacing(1)}},p=t.styled(t.Button,{shouldForwardProp:r.omitProps("active","sizing")})(({active:e,fullWidth:n,sizing:i,theme:s})=>({...o.buttonInteraction(s,e),alignItems:"center",backgroundColor:e?s.custom.palette.interaction.press:"transparent",borderRadius:s.spacing(s.custom.radius.md),color:s.custom.palette.text.primary,display:"flex",gap:s.spacing(1),justifyContent:n?"space-between":"center",minWidth:0,padding:x(i,s),textTransform:"none",width:n?"100%":"auto","&:hover":{...o.buttonInteraction(s,e)["&:hover"],[`.${t.boxClasses.root}`]:{opacity:1}},"&:focus":{...o.buttonInteraction(s,e)["&:focus"],[`.${t.boxClasses.root}`]:{opacity:1}}}));module.exports=({active:r,fullWidth:o=!0,danger:x,href:g,target:h,external:f=!1,icon:j,label:y,navigationSizing:v,onClick:B,sizing:b="lg",menuItems:q,menuPlacement:w="right-end",menuOffset:I=[0,8],menuWidth:z=192})=>{const C=t.useTheme(),P=s.useRef(null),T=n.usePopupState({variant:"popper"}),k=!!q?.length,S=r||k&&T.isOpen,W=e.jsxs(u,{onClick:k?void 0:f&&g?()=>window.open(g,h||"_blank"):B,children:[e.jsxs(p,{active:!g&&S,sizing:b,fullWidth:o,children:[e.jsxs(t.Box,{ref:P,sx:{display:"flex",alignItems:"center",justifyContent:"center",gap:1.5},children:[j&&e.jsx(a.default,{name:j,size:24}),"lg"===v&&e.jsx(t.Slide,{in:!0,direction:"right",container:P.current,children:e.jsx(t.Box,{sx:{display:"flex"},children:e.jsx(t.Fade,{in:!0,style:{transitionDelay:"100ms"},children:e.jsx(t.Box,{sx:{display:"flex"},children:e.jsx(c.Text,{size:"sm"===b?"xs":"md",variant:"button",clamp:1,sx:i.mergeSx(x&&{color:C.custom.palette.text.negative}),children:y})})})})})]}),"lg"===v&&f&&e.jsx(d,{children:e.jsx(a.default,{name:"open-in-new",size:20})})]}),"sm"===v&&e.jsx(t.Grow,{in:!0,style:{transformOrigin:"0 100%",transitionDelay:"100ms"},children:e.jsx(t.Box,{children:e.jsx(m,{active:S,variant:"button",size:"xs",sx:i.mergeSx(x&&{color:C.custom.palette.text.negative}),children:y})})})]});return k?e.jsx(l.default,{state:T,trigger:W,menuItems:q,placement:w,offset:I,width:z}):W};

package/package.json

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