@magiclabs/ui-components 1.35.5 → 1.35.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/containers/menu.js +1 -1
- package/dist/cjs/components/containers/menu.js.map +1 -1
- package/dist/es/components/containers/menu.js +1 -1
- package/dist/es/components/containers/menu.js.map +1 -1
- package/dist/types/components/containers/menu.d.ts.map +1 -1
- package/package.json +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime");require("@styled/tokens");var q=require("../icons/ico-menu.js"),f=require("../primitives/button.js");require("../primitives/checkbox.js"),require("../primitives/dropdown-selector.js"),require("../primitives/popover.js"),require("../primitives/radio.js"),require("../primitives/segmented-control.js"),require("../primitives/switch.js"),require("../primitives/text.js");var r=require("@styled/jsx"),i=require("create-slots"),n=require("react");const x=i.createSlot("div"),g=i.createSlot("div"),b=i.createSlot("div"),p=({children:m,placement:h="right",isOpen:u=!1})=>{const[a,s]=n.useState(u),[j,d]=n.useState(a),o=n.useRef(null),c=h==="left";return n.useEffect(()=>{s(u)},[u]),n.useEffect(()=>{let t;return a?t=setTimeout(()=>d(!0),10):d(!1),()=>clearTimeout(t)},[a]),n.useEffect(()=>{const t=l=>{o.current&&!o.current.contains(l.target)&&s(!1)};return document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[s]),i.createHost(m,t=>e.jsxs(e.Fragment,{children:[e.jsx(f.default,{onPress:()=>s(l=>!l),textStyle:"neutral",variant:"text",children:e.jsx(f.default.TrailingIcon,{children:e.jsx(q.default,{})})}),e.jsx(r.Box,{position:"absolute",display:a?"block":"none",h:"full",bottom:0,left:0,right:0,bg:"text.primary/20",_dark:{bg:"rgba(0, 0, 0, .7)"}}),e.jsxs(r.Stack,{ref:o,position:"absolute",transform:j?"translateX(0)":c?"translateX(-100%)":"translateX(100%)",transition:"transform 0.3s",top:0,bottom:0,...c?{left:0}:{right:0},bg:"surface.primary",_dark:{bg:"surface.secondary"},...c?{roundedRight:"2xl"}:{roundedLeft:"2xl"},zIndex:10,justifyContent:"space-between",p:4,pb:6,w:80,children:[e.jsxs(r.Stack,{gap:6,children:[e.jsx(r.Stack,{h:"full",justifyContent:"space-between",children:t.get(x)}),e.jsx(r.Divider,{color:"surface.quaternary"}),e.jsx(r.Stack,{children:t.get(g)})]}),t.get(b)]})]}))},v=Object.assign(p,{Header:x,Content:g,Footer:b});exports.Menu=v;
|
|
2
2
|
//# sourceMappingURL=menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sources":["../../../../src/components/containers/menu.tsx"],"sourcesContent":["import { IcoMenu } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { Box, Divider, Stack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\n\nexport interface MenuProps extends PropsWithChildren {\n isOpen?: boolean;\n placement?: 'left' | 'right';\n}\n\nconst Header = createSlot('div');\nconst Content = createSlot('div');\nconst Footer = createSlot('div');\n\nconst MenuHost = ({ children, placement = 'right', isOpen: opened = false }: MenuProps) => {\n const [isOpen, setIsOpen] = useState(opened);\n const [
|
|
1
|
+
{"version":3,"file":"menu.js","sources":["../../../../src/components/containers/menu.tsx"],"sourcesContent":["import { IcoMenu } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { Box, Divider, Stack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\n\nexport interface MenuProps extends PropsWithChildren {\n isOpen?: boolean;\n placement?: 'left' | 'right';\n}\n\nconst Header = createSlot('div');\nconst Content = createSlot('div');\nconst Footer = createSlot('div');\n\nconst MenuHost = ({ children, placement = 'right', isOpen: opened = false }: MenuProps) => {\n const [isOpen, setIsOpen] = useState(opened);\n const [isVisible, setIsVisible] = useState(isOpen);\n const menuRef = useRef<HTMLDivElement>(null);\n const isLeftAligned = placement === 'left';\n\n useEffect(() => {\n setIsOpen(opened);\n }, [opened]);\n\n useEffect(() => {\n let timeoutId: NodeJS.Timeout;\n\n if (isOpen) {\n timeoutId = setTimeout(() => setIsVisible(true), 10);\n } else {\n setIsVisible(false);\n }\n\n return () => clearTimeout(timeoutId);\n }, [isOpen]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [setIsOpen]);\n\n return createHost(children, slots => {\n return (\n <>\n <Button onPress={() => setIsOpen(prev => !prev)} textStyle=\"neutral\" variant=\"text\">\n <Button.TrailingIcon>\n <IcoMenu />\n </Button.TrailingIcon>\n </Button>\n <Box\n position=\"absolute\"\n display={isOpen ? 'block' : 'none'}\n h=\"full\"\n bottom={0}\n left={0}\n right={0}\n bg=\"text.primary/20\"\n _dark={{ bg: 'rgba(0, 0, 0, .7)' }}\n />\n <Stack\n ref={menuRef}\n position=\"absolute\"\n transform={isVisible ? 'translateX(0)' : isLeftAligned ? 'translateX(-100%)' : 'translateX(100%)'}\n transition=\"transform 0.3s\"\n top={0}\n bottom={0}\n {...(isLeftAligned ? { left: 0 } : { right: 0 })}\n bg=\"surface.primary\"\n _dark={{ bg: 'surface.secondary' }}\n {...(isLeftAligned ? { roundedRight: '2xl' } : { roundedLeft: '2xl' })}\n zIndex={10}\n justifyContent=\"space-between\"\n p={4}\n pb={6}\n w={80}\n >\n <Stack gap={6}>\n <Stack h=\"full\" justifyContent=\"space-between\">\n {slots.get(Header)}\n </Stack>\n <Divider color=\"surface.quaternary\" />\n <Stack>{slots.get(Content)}</Stack>\n </Stack>\n {slots.get(Footer)}\n </Stack>\n </>\n );\n });\n};\n\nexport const Menu = Object.assign(MenuHost, {\n Header,\n Content,\n Footer,\n});\n"],"names":["Header","createSlot","Content","Footer","MenuHost","children","placement","opened","isOpen","setIsOpen","useState","isVisible","setIsVisible","menuRef","useRef","isLeftAligned","useEffect","timeoutId","handleClickOutside","event","createHost","slots","_jsxs","_Fragment","_jsx","Button","prev","IcoMenu","Box","Stack","Divider","Menu"],"mappings":"0eAWA,MAAMA,EAASC,aAAW,KAAK,EACzBC,EAAUD,EAAAA,WAAW,KAAK,EAC1BE,EAASF,aAAW,KAAK,EAEzBG,EAAW,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAY,QAAS,OAAQC,EAAS,EAAK,IAAiB,CACxF,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAAA,SAASH,CAAM,EACrC,CAACI,EAAWC,CAAY,EAAIF,EAASF,SAAAA,CAAM,EAC3CK,EAAUC,EAAAA,OAAuB,IAAI,EACrCC,EAAgBT,IAAc,OAEpC,OAAAU,EAAAA,UAAU,IAAK,CACbP,EAAUF,CAAM,CAClB,EAAG,CAACA,CAAM,CAAC,EAEXS,EAAU,UAAA,IAAK,CACb,IAAIC,EAEJ,OAAIT,EACFS,EAAY,WAAW,IAAML,EAAa,EAAI,EAAG,EAAE,EAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaK,CAAS,CACrC,EAAG,CAACT,CAAM,CAAC,EAEXQ,YAAU,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CN,EAAQ,SAAW,CAACA,EAAQ,QAAQ,SAASM,EAAM,MAAc,GACnEV,EAAU,EAAK,CAEnB,EAEA,OAAS,SAAA,iBAAiB,YAAaS,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACT,CAAS,CAAC,EAEPW,EAAAA,WAAWf,EAAUgB,GAExBC,EAAAA,KAAAC,EAAAA,SAAA,CAAA,SAAA,CACEC,EAAAA,IAACC,EAAAA,QAAO,CAAA,QAAS,IAAMhB,EAAUiB,GAAQ,CAACA,CAAI,EAAG,UAAU,UAAU,QAAQ,OAAM,SACjFF,EAAAA,IAACC,EAAAA,QAAO,aACN,CAAA,SAAAD,MAACG,EAAO,QAAA,EAAA,CACY,CAAA,CAAA,CAAA,EAExBH,EAACI,IAAAA,EAAAA,IAAG,CACF,SAAS,WACT,QAASpB,EAAS,QAAU,OAC5B,EAAE,OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAmB,CAChC,CAAA,EACFc,EAAAA,KAACO,EAAAA,MACC,CAAA,IAAKhB,EACL,SAAS,WACT,UAAWF,EAAY,gBAAkBI,EAAgB,oBAAsB,mBAC/E,WAAW,iBACX,IAAK,EACL,OAAQ,EAAC,GACJA,EAAgB,CAAE,KAAM,CAAC,EAAK,CAAE,MAAO,CAAC,EAC7C,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAqB,EAAA,GAC7BA,EAAgB,CAAE,aAAc,KAAK,EAAK,CAAE,YAAa,KAAK,EACnE,OAAQ,GACR,eAAe,gBACf,EAAG,EACH,GAAI,EACJ,EAAG,GAEH,SAAA,CAAAO,EAAAA,KAACO,EAAAA,MAAK,CAAC,IAAK,EAAC,SAAA,CACXL,EAAAA,IAACK,EAAAA,MAAM,CAAA,EAAE,OAAO,eAAe,gBAC5B,SAAAR,EAAM,IAAIrB,CAAM,CACX,CAAA,EACRwB,EAAAA,IAACM,EAAAA,QAAQ,CAAA,MAAM,oBAAuB,CAAA,EACtCN,MAACK,EAAO,MAAA,CAAA,SAAAR,EAAM,IAAInB,CAAO,CAAC,CAAA,CAAS,CAC7B,CAAA,EACPmB,EAAM,IAAIlB,CAAM,CAAC,CACZ,CAAA,CAAA,CAAA,CAAA,CAGb,CACH,EAEa4B,EAAO,OAAO,OAAO3B,EAAU,CAC1C,OAAAJ,EACA,QAAAE,EACA,OAAAC,CACD,CAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as
|
|
1
|
+
import{jsxs as l,Fragment as j,jsx as e}from"react/jsx-runtime";import"@styled/tokens";import w from"../icons/ico-menu.js";import u from"../primitives/button.js";import"../primitives/checkbox.js";import"../primitives/dropdown-selector.js";import"../primitives/popover.js";import"../primitives/radio.js";import"../primitives/segmented-control.js";import"../primitives/switch.js";import"../primitives/text.js";import{Box as k,Stack as n,Divider as C}from"@styled/jsx";import{createSlot as c,createHost as S}from"create-slots";import{useState as f,useRef as E,useEffect as d}from"react";const g=c("div"),b=c("div"),h=c("div"),L=({children:x,placement:y="right",isOpen:i=!1})=>{const[r,o]=f(i),[v,p]=f(r),a=E(null),s=y==="left";return d(()=>{o(i)},[i]),d(()=>{let t;return r?t=setTimeout(()=>p(!0),10):p(!1),()=>clearTimeout(t)},[r]),d(()=>{const t=m=>{a.current&&!a.current.contains(m.target)&&o(!1)};return document.addEventListener("mousedown",t),()=>{document.removeEventListener("mousedown",t)}},[o]),S(x,t=>l(j,{children:[e(u,{onPress:()=>o(m=>!m),textStyle:"neutral",variant:"text",children:e(u.TrailingIcon,{children:e(w,{})})}),e(k,{position:"absolute",display:r?"block":"none",h:"full",bottom:0,left:0,right:0,bg:"text.primary/20",_dark:{bg:"rgba(0, 0, 0, .7)"}}),l(n,{ref:a,position:"absolute",transform:v?"translateX(0)":s?"translateX(-100%)":"translateX(100%)",transition:"transform 0.3s",top:0,bottom:0,...s?{left:0}:{right:0},bg:"surface.primary",_dark:{bg:"surface.secondary"},...s?{roundedRight:"2xl"}:{roundedLeft:"2xl"},zIndex:10,justifyContent:"space-between",p:4,pb:6,w:80,children:[l(n,{gap:6,children:[e(n,{h:"full",justifyContent:"space-between",children:t.get(g)}),e(C,{color:"surface.quaternary"}),e(n,{children:t.get(b)})]}),t.get(h)]})]}))},T=Object.assign(L,{Header:g,Content:b,Footer:h});export{T as Menu};
|
|
2
2
|
//# sourceMappingURL=menu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.js","sources":["../../../../src/components/containers/menu.tsx"],"sourcesContent":["import { IcoMenu } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { Box, Divider, Stack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\n\nexport interface MenuProps extends PropsWithChildren {\n isOpen?: boolean;\n placement?: 'left' | 'right';\n}\n\nconst Header = createSlot('div');\nconst Content = createSlot('div');\nconst Footer = createSlot('div');\n\nconst MenuHost = ({ children, placement = 'right', isOpen: opened = false }: MenuProps) => {\n const [isOpen, setIsOpen] = useState(opened);\n const [
|
|
1
|
+
{"version":3,"file":"menu.js","sources":["../../../../src/components/containers/menu.tsx"],"sourcesContent":["import { IcoMenu } from '@components/icons';\nimport { Button } from '@components/primitives';\nimport { Box, Divider, Stack } from '@styled/jsx';\nimport { createHost, createSlot } from 'create-slots';\nimport { PropsWithChildren, useEffect, useRef, useState } from 'react';\n\nexport interface MenuProps extends PropsWithChildren {\n isOpen?: boolean;\n placement?: 'left' | 'right';\n}\n\nconst Header = createSlot('div');\nconst Content = createSlot('div');\nconst Footer = createSlot('div');\n\nconst MenuHost = ({ children, placement = 'right', isOpen: opened = false }: MenuProps) => {\n const [isOpen, setIsOpen] = useState(opened);\n const [isVisible, setIsVisible] = useState(isOpen);\n const menuRef = useRef<HTMLDivElement>(null);\n const isLeftAligned = placement === 'left';\n\n useEffect(() => {\n setIsOpen(opened);\n }, [opened]);\n\n useEffect(() => {\n let timeoutId: NodeJS.Timeout;\n\n if (isOpen) {\n timeoutId = setTimeout(() => setIsVisible(true), 10);\n } else {\n setIsVisible(false);\n }\n\n return () => clearTimeout(timeoutId);\n }, [isOpen]);\n\n useEffect(() => {\n const handleClickOutside = (event: MouseEvent) => {\n if (menuRef.current && !menuRef.current.contains(event.target as Node)) {\n setIsOpen(false);\n }\n };\n\n document.addEventListener('mousedown', handleClickOutside);\n return () => {\n document.removeEventListener('mousedown', handleClickOutside);\n };\n }, [setIsOpen]);\n\n return createHost(children, slots => {\n return (\n <>\n <Button onPress={() => setIsOpen(prev => !prev)} textStyle=\"neutral\" variant=\"text\">\n <Button.TrailingIcon>\n <IcoMenu />\n </Button.TrailingIcon>\n </Button>\n <Box\n position=\"absolute\"\n display={isOpen ? 'block' : 'none'}\n h=\"full\"\n bottom={0}\n left={0}\n right={0}\n bg=\"text.primary/20\"\n _dark={{ bg: 'rgba(0, 0, 0, .7)' }}\n />\n <Stack\n ref={menuRef}\n position=\"absolute\"\n transform={isVisible ? 'translateX(0)' : isLeftAligned ? 'translateX(-100%)' : 'translateX(100%)'}\n transition=\"transform 0.3s\"\n top={0}\n bottom={0}\n {...(isLeftAligned ? { left: 0 } : { right: 0 })}\n bg=\"surface.primary\"\n _dark={{ bg: 'surface.secondary' }}\n {...(isLeftAligned ? { roundedRight: '2xl' } : { roundedLeft: '2xl' })}\n zIndex={10}\n justifyContent=\"space-between\"\n p={4}\n pb={6}\n w={80}\n >\n <Stack gap={6}>\n <Stack h=\"full\" justifyContent=\"space-between\">\n {slots.get(Header)}\n </Stack>\n <Divider color=\"surface.quaternary\" />\n <Stack>{slots.get(Content)}</Stack>\n </Stack>\n {slots.get(Footer)}\n </Stack>\n </>\n );\n });\n};\n\nexport const Menu = Object.assign(MenuHost, {\n Header,\n Content,\n Footer,\n});\n"],"names":["Header","createSlot","Content","Footer","MenuHost","children","placement","opened","isOpen","setIsOpen","useState","isVisible","setIsVisible","menuRef","useRef","isLeftAligned","useEffect","timeoutId","handleClickOutside","event","createHost","slots","_jsxs","_Fragment","_jsx","Button","prev","IcoMenu","Box","Stack","Divider","Menu"],"mappings":"wkBAWA,MAAMA,EAASC,EAAW,KAAK,EACzBC,EAAUD,EAAW,KAAK,EAC1BE,EAASF,EAAW,KAAK,EAEzBG,EAAW,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAY,QAAS,OAAQC,EAAS,EAAK,IAAiB,CACxF,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAASH,CAAM,EACrC,CAACI,EAAWC,CAAY,EAAIF,EAASF,CAAM,EAC3CK,EAAUC,EAAuB,IAAI,EACrCC,EAAgBT,IAAc,OAEpC,OAAAU,EAAU,IAAK,CACbP,EAAUF,CAAM,CAClB,EAAG,CAACA,CAAM,CAAC,EAEXS,EAAU,IAAK,CACb,IAAIC,EAEJ,OAAIT,EACFS,EAAY,WAAW,IAAML,EAAa,EAAI,EAAG,EAAE,EAEnDA,EAAa,EAAK,EAGb,IAAM,aAAaK,CAAS,CACrC,EAAG,CAACT,CAAM,CAAC,EAEXQ,EAAU,IAAK,CACb,MAAME,EAAsBC,GAAqB,CAC3CN,EAAQ,SAAW,CAACA,EAAQ,QAAQ,SAASM,EAAM,MAAc,GACnEV,EAAU,EAAK,CAEnB,EAEA,OAAS,SAAA,iBAAiB,YAAaS,CAAkB,EAClD,IAAK,CACV,SAAS,oBAAoB,YAAaA,CAAkB,CAC9D,CACF,EAAG,CAACT,CAAS,CAAC,EAEPW,EAAWf,EAAUgB,GAExBC,EAAAC,EAAA,CAAA,SAAA,CACEC,EAACC,EAAO,CAAA,QAAS,IAAMhB,EAAUiB,GAAQ,CAACA,CAAI,EAAG,UAAU,UAAU,QAAQ,OAAM,SACjFF,EAACC,EAAO,aACN,CAAA,SAAAD,EAACG,EAAO,EAAA,CACY,CAAA,CAAA,CAAA,EAExBH,EAACI,EAAG,CACF,SAAS,WACT,QAASpB,EAAS,QAAU,OAC5B,EAAE,OACF,OAAQ,EACR,KAAM,EACN,MAAO,EACP,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAmB,CAChC,CAAA,EACFc,EAACO,EACC,CAAA,IAAKhB,EACL,SAAS,WACT,UAAWF,EAAY,gBAAkBI,EAAgB,oBAAsB,mBAC/E,WAAW,iBACX,IAAK,EACL,OAAQ,EAAC,GACJA,EAAgB,CAAE,KAAM,CAAC,EAAK,CAAE,MAAO,CAAC,EAC7C,GAAG,kBACH,MAAO,CAAE,GAAI,mBAAqB,EAAA,GAC7BA,EAAgB,CAAE,aAAc,KAAK,EAAK,CAAE,YAAa,KAAK,EACnE,OAAQ,GACR,eAAe,gBACf,EAAG,EACH,GAAI,EACJ,EAAG,GAEH,SAAA,CAAAO,EAACO,EAAK,CAAC,IAAK,EAAC,SAAA,CACXL,EAACK,EAAM,CAAA,EAAE,OAAO,eAAe,gBAC5B,SAAAR,EAAM,IAAIrB,CAAM,CACX,CAAA,EACRwB,EAACM,EAAQ,CAAA,MAAM,oBAAuB,CAAA,EACtCN,EAACK,EAAO,CAAA,SAAAR,EAAM,IAAInB,CAAO,CAAC,CAAA,CAAS,CAC7B,CAAA,EACPmB,EAAM,IAAIlB,CAAM,CAAC,CACZ,CAAA,CAAA,CAAA,CAAA,CAGb,CACH,EAEa4B,EAAO,OAAO,OAAO3B,EAAU,CAC1C,OAAAJ,EACA,QAAAE,EACA,OAAAC,CACD,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/menu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;
|
|
1
|
+
{"version":3,"file":"menu.d.ts","sourceRoot":"","sources":["../../../../src/components/containers/menu.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,iBAAiB,EAA+B,MAAM,OAAO,CAAC;AAEvE,MAAM,WAAW,SAAU,SAAQ,iBAAiB;IAClD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC9B;AA0FD,eAAO,MAAM,IAAI,6CApF4D,SAAS;;;;CAwFpF,CAAC"}
|