@atom-learning/components 3.22.0 → 3.23.0
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/CHANGELOG.md
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
# [3.
|
|
1
|
+
# [3.23.0](https://github.com/Atom-Learning/components/compare/v3.22.0...v3.23.0) (2024-04-17)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Features
|
|
5
5
|
|
|
6
|
-
*
|
|
6
|
+
* add children length as deps for container width ([3996c11](https://github.com/Atom-Learning/components/commit/3996c110fe0c711483f6fd16537649f226dee7cb))
|
|
7
7
|
|
|
8
8
|
# [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
|
|
9
9
|
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import*as s from"@radix-ui/react-navigation-menu";import t from"react";import{MAX_Z_INDEX as M}from"../../constants/zIndices.js";import{keyframes as
|
|
1
|
+
import*as s from"@radix-ui/react-navigation-menu";import t from"react";import{MAX_Z_INDEX as M}from"../../constants/zIndices.js";import{keyframes as h,styled as o}from"../../stitches.js";import{fadeOut as D}from"../../utilities/style/keyframe-animations.js";import{NavigationMenuContext as E}from"./NavigationMenuContext.js";import{NavigationMenuDropdown as x}from"./NavigationMenuDropdown.js";import{NavigationMenuDropdownContent as C}from"./NavigationMenuDropdownContent.js";import{NavigationMenuDropdownItem as I,NavigationMenuDropdownItemTitle as $}from"./NavigationMenuDropdownItem.js";import{NavigationMenuDropdownTrigger as T}from"./NavigationMenuDropdownTrigger.js";import{NavigationMenuLink as j}from"./NavigationMenuLink.js";import{colorSchemes as L}from"./stitches.navigationMenu.colorscheme.config.js";const S=h({"0%, 50%":{opacity:0},"100%":{opacity:1}}),_=o(s.Root,{display:"flex",justifyContent:"center",position:"relative"}),W=o(s.List,{all:"unset",display:"flex",justifyContent:"center",alignItems:"center",gap:"$1",listStyle:"none"}),k=o(s.Viewport,{zIndex:M}),O=o("div",{position:"absolute",left:0,top:"100%",width:"100%",display:"flex",justifyContent:"center"}),u=({children:m,css:p,...d})=>{const[l,f]=t.useState(),[n,c]=t.useState(),[r,g]=t.useState(0),i=t.useRef(null),a=200;t.useLayoutEffect(()=>{i.current&&g(i.current.offsetWidth)},[t.Children.toArray(m).length]),t.useEffect(()=>{let e;return n===""&&(e=setTimeout(()=>f(null),a)),()=>{e!==null&&clearTimeout(e)}},[n]);const v=(e,y)=>{if(e&&r&&n===y){const N=r/2,w=r-e.offsetLeft-e.offsetWidth+e.offsetWidth/2;f(Math.round(N-w))}return e};return t.createElement(E.Provider,{value:{onNodeUpdate:v}},t.createElement(_,{className:L.light,onValueChange:c,css:p,...d},t.createElement(W,{ref:i},m),t.createElement(O,null,t.createElement(k,{css:{"--navigation-menu-viewport-offset":`${l||0}px`,transform:`translateX(${l||0}px)`,'&[data-state="open"]':{animation:`${S} ${a}ms ease`},'&[data-state="closed"]':{animation:`${D} ${a}ms ease-out`}}}))))},V=Object.assign(u,{Link:j,Dropdown:x,DropdownContent:C,DropdownItem:I,DropdownItemTitle:$,DropdownTrigger:T});u.displayName="NavigationMenu";export{V as NavigationMenu};
|
|
2
2
|
//# sourceMappingURL=NavigationMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NavigationMenu.js","sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeOut } from '~/utilities/style/keyframe-animations'\n\nimport { NavigationMenuContext } from './NavigationMenuContext'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n NavigationMenuDropdownItem,\n NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\nimport { colorSchemes as navigationMenuColorSchemes } from './stitches.navigationMenu.colorscheme.config'\n\nconst delayedFadeIn = keyframes({\n '0%, 50%': { opacity: 0 },\n '100%': { opacity: 1 }\n})\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n display: 'flex',\n justifyContent: 'center',\n position: 'relative'\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n all: 'unset',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n gap: '$1',\n listStyle: 'none'\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n zIndex: MAX_Z_INDEX\n})\n\nconst ViewportPosition = styled('div', {\n position: 'absolute',\n left: 0,\n top: '100%',\n width: '100%',\n display: 'flex',\n justifyContent: 'center'\n})\n\nconst NavigationMenuComponent = ({\n children,\n css,\n ...props\n}: React.ComponentProps<typeof StyledMenu>) => {\n const [offset, setOffset] = React.useState<number | null | undefined>()\n const [activeItem, setActiveItem] = React.useState<string | undefined>()\n const [listWidth, setListWidth] = React.useState(0)\n const listRef = React.useRef<HTMLUListElement>(null)\n const fadeDuration = 200\n\n React.useLayoutEffect(() => {\n if (listRef.current) {\n setListWidth(listRef.current.offsetWidth)\n }\n }, [])\n\n React.useEffect(() => {\n let timer: NodeJS.Timer\n\n // Delay transitioning back to initial position\n // to allow enough time for fadeOut animation to complete\n if (activeItem === '') {\n timer = setTimeout(() => setOffset(null), fadeDuration)\n }\n\n return () => {\n if (timer !== null) {\n clearTimeout(timer)\n }\n }\n }, [activeItem])\n\n // https://github.com/radix-ui/primitives/issues/1462\n const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n if (trigger && listWidth && activeItem === itemValue) {\n const listCenter = listWidth / 2\n\n const triggerOffsetRight =\n listWidth -\n trigger.offsetLeft -\n trigger.offsetWidth +\n trigger.offsetWidth / 2\n\n setOffset(Math.round(listCenter - triggerOffsetRight))\n }\n\n return trigger\n }\n\n return (\n <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n <StyledMenu\n className={navigationMenuColorSchemes['light']}\n onValueChange={setActiveItem}\n css={css}\n {...props}\n >\n <StyledList ref={listRef}>{children}</StyledList>\n <ViewportPosition>\n <StyledViewport\n css={{\n '--navigation-menu-viewport-offset': `${offset || 0}px`,\n transform: `translateX(${offset || 0}px)`,\n '&[data-state=\"open\"]': {\n animation: `${delayedFadeIn} ${fadeDuration}ms ease`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} ${fadeDuration}ms ease-out`\n }\n }}\n />\n </ViewportPosition>\n </StyledMenu>\n </NavigationMenuContext.Provider>\n )\n}\n\nexport const NavigationMenu = Object.assign(NavigationMenuComponent, {\n Link: NavigationMenuLink,\n Dropdown: NavigationMenuDropdown,\n DropdownContent: NavigationMenuDropdownContent,\n DropdownItem: NavigationMenuDropdownItem,\n DropdownItemTitle: NavigationMenuDropdownItemTitle,\n DropdownTrigger: NavigationMenuDropdownTrigger\n})\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"names":["delayedFadeIn","keyframes","StyledMenu","styled","NavigationMenuPrimitive","StyledList","StyledViewport","MAX_Z_INDEX","ViewportPosition","NavigationMenuComponent","children","css","props","offset","setOffset","React","activeItem","setActiveItem","listWidth","setListWidth","listRef","fadeDuration","timer","onNodeUpdate","trigger","itemValue","listCenter","triggerOffsetRight","NavigationMenuContext","navigationMenuColorSchemes","fadeOut","NavigationMenu","NavigationMenuLink","NavigationMenuDropdown","NavigationMenuDropdownContent","NavigationMenuDropdownItem","NavigationMenuDropdownItemTitle","NavigationMenuDropdownTrigger"],"mappings":"8yBAkBA,MAAMA,EAAgBC,EAAU,CAC9B,UAAW,CAAE,QAAS,CAAE,EACxB,OAAQ,CAAE,QAAS,CAAE,CACvB,CAAC,EAEKC,EAAaC,EAAOC,EAAwB,KAAM,CACtD,QAAS,OACT,eAAgB,SAChB,SAAU,UACZ,CAAC,EAEKC,EAAaF,EAAOC,EAAwB,KAAM,CACtD,IAAK,QACL,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,IAAK,KACL,UAAW,MACb,CAAC,EAEKE,EAAiBH,EAAOC,EAAwB,SAAU,CAC9D,OAAQG,CACV,CAAC,EAEKC,EAAmBL,EAAO,MAAO,CACrC,SAAU,WACV,KAAM,EACN,IAAK,OACL,MAAO,OACP,QAAS,OACT,eAAgB,QAClB,CAAC,EAEKM,EAA0B,CAAC,CAC/B,SAAAC,EACA,IAAAC,KACGC,CACL,IAA+C,CAC7C,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAM,
|
|
1
|
+
{"version":3,"file":"NavigationMenu.js","sources":["../../../src/components/navigation/NavigationMenu.tsx"],"sourcesContent":["import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu'\nimport React from 'react'\n\nimport { MAX_Z_INDEX } from '~/constants/zIndices'\nimport { keyframes, styled } from '~/stitches'\nimport { fadeOut } from '~/utilities/style/keyframe-animations'\n\nimport { NavigationMenuContext } from './NavigationMenuContext'\nimport { NavigationMenuDropdown } from './NavigationMenuDropdown'\nimport { NavigationMenuDropdownContent } from './NavigationMenuDropdownContent'\nimport {\n NavigationMenuDropdownItem,\n NavigationMenuDropdownItemTitle\n} from './NavigationMenuDropdownItem'\nimport { NavigationMenuDropdownTrigger } from './NavigationMenuDropdownTrigger'\nimport { NavigationMenuLink } from './NavigationMenuLink'\nimport { colorSchemes as navigationMenuColorSchemes } from './stitches.navigationMenu.colorscheme.config'\n\nconst delayedFadeIn = keyframes({\n '0%, 50%': { opacity: 0 },\n '100%': { opacity: 1 }\n})\n\nconst StyledMenu = styled(NavigationMenuPrimitive.Root, {\n display: 'flex',\n justifyContent: 'center',\n position: 'relative'\n})\n\nconst StyledList = styled(NavigationMenuPrimitive.List, {\n all: 'unset',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n gap: '$1',\n listStyle: 'none'\n})\n\nconst StyledViewport = styled(NavigationMenuPrimitive.Viewport, {\n zIndex: MAX_Z_INDEX\n})\n\nconst ViewportPosition = styled('div', {\n position: 'absolute',\n left: 0,\n top: '100%',\n width: '100%',\n display: 'flex',\n justifyContent: 'center'\n})\n\nconst NavigationMenuComponent = ({\n children,\n css,\n ...props\n}: React.ComponentProps<typeof StyledMenu>) => {\n const [offset, setOffset] = React.useState<number | null | undefined>()\n const [activeItem, setActiveItem] = React.useState<string | undefined>()\n const [listWidth, setListWidth] = React.useState(0)\n const listRef = React.useRef<HTMLUListElement>(null)\n const fadeDuration = 200\n\n React.useLayoutEffect(() => {\n if (listRef.current) {\n setListWidth(listRef.current.offsetWidth)\n }\n }, [React.Children.toArray(children).length])\n\n React.useEffect(() => {\n let timer: NodeJS.Timer\n\n // Delay transitioning back to initial position\n // to allow enough time for fadeOut animation to complete\n if (activeItem === '') {\n timer = setTimeout(() => setOffset(null), fadeDuration)\n }\n\n return () => {\n if (timer !== null) {\n clearTimeout(timer)\n }\n }\n }, [activeItem])\n\n // https://github.com/radix-ui/primitives/issues/1462\n const onNodeUpdate = (trigger: HTMLButtonElement, itemValue: string) => {\n if (trigger && listWidth && activeItem === itemValue) {\n const listCenter = listWidth / 2\n\n const triggerOffsetRight =\n listWidth -\n trigger.offsetLeft -\n trigger.offsetWidth +\n trigger.offsetWidth / 2\n\n setOffset(Math.round(listCenter - triggerOffsetRight))\n }\n\n return trigger\n }\n\n return (\n <NavigationMenuContext.Provider value={{ onNodeUpdate }}>\n <StyledMenu\n className={navigationMenuColorSchemes['light']}\n onValueChange={setActiveItem}\n css={css}\n {...props}\n >\n <StyledList ref={listRef}>{children}</StyledList>\n <ViewportPosition>\n <StyledViewport\n css={{\n '--navigation-menu-viewport-offset': `${offset || 0}px`,\n transform: `translateX(${offset || 0}px)`,\n '&[data-state=\"open\"]': {\n animation: `${delayedFadeIn} ${fadeDuration}ms ease`\n },\n '&[data-state=\"closed\"]': {\n animation: `${fadeOut} ${fadeDuration}ms ease-out`\n }\n }}\n />\n </ViewportPosition>\n </StyledMenu>\n </NavigationMenuContext.Provider>\n )\n}\n\nexport const NavigationMenu = Object.assign(NavigationMenuComponent, {\n Link: NavigationMenuLink,\n Dropdown: NavigationMenuDropdown,\n DropdownContent: NavigationMenuDropdownContent,\n DropdownItem: NavigationMenuDropdownItem,\n DropdownItemTitle: NavigationMenuDropdownItemTitle,\n DropdownTrigger: NavigationMenuDropdownTrigger\n})\n\nNavigationMenuComponent.displayName = 'NavigationMenu'\n"],"names":["delayedFadeIn","keyframes","StyledMenu","styled","NavigationMenuPrimitive","StyledList","StyledViewport","MAX_Z_INDEX","ViewportPosition","NavigationMenuComponent","children","css","props","offset","setOffset","React","activeItem","setActiveItem","listWidth","setListWidth","listRef","fadeDuration","timer","onNodeUpdate","trigger","itemValue","listCenter","triggerOffsetRight","NavigationMenuContext","navigationMenuColorSchemes","fadeOut","NavigationMenu","NavigationMenuLink","NavigationMenuDropdown","NavigationMenuDropdownContent","NavigationMenuDropdownItem","NavigationMenuDropdownItemTitle","NavigationMenuDropdownTrigger"],"mappings":"8yBAkBA,MAAMA,EAAgBC,EAAU,CAC9B,UAAW,CAAE,QAAS,CAAE,EACxB,OAAQ,CAAE,QAAS,CAAE,CACvB,CAAC,EAEKC,EAAaC,EAAOC,EAAwB,KAAM,CACtD,QAAS,OACT,eAAgB,SAChB,SAAU,UACZ,CAAC,EAEKC,EAAaF,EAAOC,EAAwB,KAAM,CACtD,IAAK,QACL,QAAS,OACT,eAAgB,SAChB,WAAY,SACZ,IAAK,KACL,UAAW,MACb,CAAC,EAEKE,EAAiBH,EAAOC,EAAwB,SAAU,CAC9D,OAAQG,CACV,CAAC,EAEKC,EAAmBL,EAAO,MAAO,CACrC,SAAU,WACV,KAAM,EACN,IAAK,OACL,MAAO,OACP,QAAS,OACT,eAAgB,QAClB,CAAC,EAEKM,EAA0B,CAAC,CAC/B,SAAAC,EACA,IAAAC,KACGC,CACL,IAA+C,CAC7C,KAAM,CAACC,EAAQC,CAAS,EAAIC,EAAM,WAC5B,CAACC,EAAYC,CAAa,EAAIF,EAAM,SAA6B,EACjE,CAACG,EAAWC,CAAY,EAAIJ,EAAM,SAAS,CAAC,EAC5CK,EAAUL,EAAM,OAAyB,IAAI,EAC7CM,EAAe,IAErBN,EAAM,gBAAgB,IAAM,CACtBK,EAAQ,SACVD,EAAaC,EAAQ,QAAQ,WAAW,CAE5C,EAAG,CAACL,EAAM,SAAS,QAAQL,CAAQ,EAAE,MAAM,CAAC,EAE5CK,EAAM,UAAU,IAAM,CACpB,IAAIO,EAIJ,OAAIN,IAAe,KACjBM,EAAQ,WAAW,IAAMR,EAAU,IAAI,EAAGO,CAAY,GAGjD,IAAM,CACPC,IAAU,MACZ,aAAaA,CAAK,CAEtB,CACF,EAAG,CAACN,CAAU,CAAC,EAGf,MAAMO,EAAe,CAACC,EAA4BC,IAAsB,CACtE,GAAID,GAAWN,GAAaF,IAAeS,EAAW,CACpD,MAAMC,EAAaR,EAAY,EAEzBS,EACJT,EACAM,EAAQ,WACRA,EAAQ,YACRA,EAAQ,YAAc,EAExBV,EAAU,KAAK,MAAMY,EAAaC,CAAkB,CAAC,CACvD,CAEA,OAAOH,CACT,EAEA,OACET,EAAA,cAACa,EAAsB,SAAtB,CAA+B,MAAO,CAAE,aAAAL,CAAa,CAAA,EACpDR,EAAA,cAACb,EAAA,CACC,UAAW2B,EAA2B,MACtC,cAAeZ,EACf,IAAKN,EACJ,GAAGC,CAAAA,EAEJG,EAAA,cAACV,EAAA,CAAW,IAAKe,GAAUV,CAAS,EACpCK,EAAA,cAACP,EAAA,KACCO,EAAA,cAACT,EAAA,CACC,IAAK,CACH,oCAAqC,GAAGO,GAAU,MAClD,UAAW,cAAcA,GAAU,OACnC,uBAAwB,CACtB,UAAW,GAAGb,KAAiBqB,UACjC,EACA,yBAA0B,CACxB,UAAW,GAAGS,KAAWT,cAC3B,CACF,CAAA,CACF,CACF,CACF,CACF,CAEJ,EAEaU,EAAiB,OAAO,OAAOtB,EAAyB,CACnE,KAAMuB,EACN,SAAUC,EACV,gBAAiBC,EACjB,aAAcC,EACd,kBAAmBC,EACnB,gBAAiBC,CACnB,CAAC,EAED5B,EAAwB,YAAc"}
|