@atom-learning/components 3.22.0 → 3.23.1

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.22.0](https://github.com/Atom-Learning/components/compare/v3.21.0...v3.22.0) (2024-04-11)
1
+ ## [3.23.1](https://github.com/Atom-Learning/components/compare/v3.23.0...v3.23.1) (2024-04-23)
2
2
 
3
3
 
4
- ### Features
4
+ ### Bug Fixes
5
5
 
6
- * make NavigationMenu viewport offset a css variable ([034eef5](https://github.com/Atom-Learning/components/commit/034eef5d6b299e246c5943150046e2a122520c1c))
6
+ * **chip-toggle-group:** fixing active chip toggle background ([5a5e327](https://github.com/Atom-Learning/components/commit/5a5e327ff6accc6ae4aa0bfc520a3c34600a1f64))
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{Ok as m}from"@atom-learning/icons";import*as n from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as r}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as s}from"../icon/Icon.js";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as p}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const i=e(s,{display:"none"}),c=e.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(r,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$tonal100",color:"$tonal600",borderColor:"currentColor"},"&:focus-visible":{...p()},'&[data-state="on"]':{"&:hover":{bg:"$white",color:"$primary1000"}}},'&[data-state="off"]':{color:"$tonal400",bg:"$tonal50",borderColor:"$tonal200"},'&[data-state="on"]':{[`& ${i}`]:{display:"block"}}}),d=({size:t="md",children:l,...a})=>o.createElement(n.Item,{...a,asChild:!0},o.createElement(c,{as:"button"},o.createElement(i,{is:m,size:t==="lg"?"md":"sm"}),o.createElement(r.Content,null,l)));export{d as ChipToggleGroupItem};
1
+ import{Ok as m}from"@atom-learning/icons";import*as n from"@radix-ui/react-toggle-group";import*as o from"react";import{Chip as r}from"../chip/Chip.js";import"../chip/ChipGroup.js";import{Icon as s}from"../icon/Icon.js";import{styled as e}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as p}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";const i=e(s,{display:"none"}),c=e.withConfig({shouldForwardStitchesProp:t=>["as"].includes(t)})(r,{"&:not([disabled])":{cursor:"pointer","&:hover":{bg:"$tonal100",color:"$tonal600",borderColor:"currentColor"},"&:focus-visible":{...p()},'&[data-state="on"]':{"&:hover":{bg:"white",color:"$primary1000"}}},'&[data-state="off"]':{color:"$tonal400",bg:"$tonal50",borderColor:"$tonal200"},'&[data-state="on"]':{[`& ${i}`]:{display:"block"}}}),d=({size:t="md",children:l,...a})=>o.createElement(n.Item,{...a,asChild:!0},o.createElement(c,{as:"button"},o.createElement(i,{is:m,size:t==="lg"?"md":"sm"}),o.createElement(r.Content,null,l)));export{d as ChipToggleGroupItem};
2
2
  //# sourceMappingURL=ChipToggleGroupItem.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledChipToggleIcon = styled(Icon, {\n display: 'none'\n})\n\nconst StyledChipToggleGroupItem = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Chip, {\n '&:not([disabled])': {\n cursor: 'pointer',\n '&:hover': {\n bg: '$tonal100',\n color: '$tonal600',\n borderColor: 'currentColor'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n },\n '&[data-state=\"on\"]': {\n '&:hover': {\n bg: '$white',\n color: '$primary1000'\n }\n }\n },\n '&[data-state=\"off\"]': {\n color: '$tonal400',\n bg: '$tonal50',\n borderColor: '$tonal200'\n },\n '&[data-state=\"on\"]': {\n [`& ${StyledChipToggleIcon}`]: {\n display: 'block'\n }\n }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n size = 'md',\n children,\n ...rest\n}: TChipToggleGroupItem) => {\n return (\n <ToggleGroup.Item {...rest} asChild>\n <StyledChipToggleGroupItem as=\"button\">\n <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n <Chip.Content>{children}</Chip.Content>\n </StyledChipToggleGroupItem>\n </ToggleGroup.Item>\n )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","propName","Chip","focusVisibleStyleBlock","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"2hBASA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,QAAS,MACX,CAAC,EAEKC,EAA4BF,EAAO,WAAW,CAClD,0BAA4BG,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,oBAAqB,CACnB,OAAQ,UACR,UAAW,CACT,GAAI,YACJ,MAAO,YACP,YAAa,cACf,EACA,kBAAmB,CACjB,GAAGC,GACL,EACA,qBAAsB,CACpB,UAAW,CACT,GAAI,SACJ,MAAO,cACT,CACF,CACF,EACA,sBAAuB,CACrB,MAAO,YACP,GAAI,WACJ,YAAa,WACf,EACA,qBAAsB,CACpB,CAAC,KAAKN,KAAyB,CAC7B,QAAS,OACX,CACF,CACF,CAAC,EAKYO,EAAsB,CAAC,CAClC,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACR,EAAA,CAA0B,GAAG,UAC5BQ,EAAA,cAACX,EAAA,CAAqB,GAAIa,EAAI,KAAML,IAAS,KAAO,KAAO,IAAA,CAAM,EACjEG,EAAA,cAACN,EAAK,QAAL,KAAcI,CAAS,CAC1B,CACF"}
1
+ {"version":3,"file":"ChipToggleGroupItem.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupItem.tsx"],"sourcesContent":["import { Ok } from '@atom-learning/icons'\nimport * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Chip } from '~/components/chip'\nimport { Icon } from '~/components/icon'\nimport { styled } from '~/stitches'\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nconst StyledChipToggleIcon = styled(Icon, {\n display: 'none'\n})\n\nconst StyledChipToggleGroupItem = styled.withConfig({\n shouldForwardStitchesProp: (propName) => ['as'].includes(propName)\n})(Chip, {\n '&:not([disabled])': {\n cursor: 'pointer',\n '&:hover': {\n bg: '$tonal100',\n color: '$tonal600',\n borderColor: 'currentColor'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n },\n '&[data-state=\"on\"]': {\n '&:hover': {\n bg: 'white',\n color: '$primary1000'\n }\n }\n },\n '&[data-state=\"off\"]': {\n color: '$tonal400',\n bg: '$tonal50',\n borderColor: '$tonal200'\n },\n '&[data-state=\"on\"]': {\n [`& ${StyledChipToggleIcon}`]: {\n display: 'block'\n }\n }\n})\n\ntype TChipToggleGroupItem = React.ComponentProps<typeof ToggleGroup.Item> &\n React.ComponentProps<typeof StyledChipToggleGroupItem>\n\nexport const ChipToggleGroupItem = ({\n size = 'md',\n children,\n ...rest\n}: TChipToggleGroupItem) => {\n return (\n <ToggleGroup.Item {...rest} asChild>\n <StyledChipToggleGroupItem as=\"button\">\n <StyledChipToggleIcon is={Ok} size={size === 'lg' ? 'md' : 'sm'} />\n <Chip.Content>{children}</Chip.Content>\n </StyledChipToggleGroupItem>\n </ToggleGroup.Item>\n )\n}\n"],"names":["StyledChipToggleIcon","styled","Icon","StyledChipToggleGroupItem","propName","Chip","focusVisibleStyleBlock","ChipToggleGroupItem","size","children","rest","React","ToggleGroup","Ok"],"mappings":"2hBASA,MAAMA,EAAuBC,EAAOC,EAAM,CACxC,QAAS,MACX,CAAC,EAEKC,EAA4BF,EAAO,WAAW,CAClD,0BAA4BG,GAAa,CAAC,IAAI,EAAE,SAASA,CAAQ,CACnE,CAAC,EAAEC,EAAM,CACP,oBAAqB,CACnB,OAAQ,UACR,UAAW,CACT,GAAI,YACJ,MAAO,YACP,YAAa,cACf,EACA,kBAAmB,CACjB,GAAGC,GACL,EACA,qBAAsB,CACpB,UAAW,CACT,GAAI,QACJ,MAAO,cACT,CACF,CACF,EACA,sBAAuB,CACrB,MAAO,YACP,GAAI,WACJ,YAAa,WACf,EACA,qBAAsB,CACpB,CAAC,KAAKN,KAAyB,CAC7B,QAAS,OACX,CACF,CACF,CAAC,EAKYO,EAAsB,CAAC,CAClC,KAAAC,EAAO,KACP,SAAAC,KACGC,CACL,IAEIC,EAAA,cAACC,EAAY,KAAZ,CAAkB,GAAGF,EAAM,QAAO,EAAA,EACjCC,EAAA,cAACR,EAAA,CAA0B,GAAG,UAC5BQ,EAAA,cAACX,EAAA,CAAqB,GAAIa,EAAI,KAAML,IAAS,KAAO,KAAO,IAAA,CAAM,EACjEG,EAAA,cAACN,EAAK,QAAL,KAAcI,CAAS,CAC1B,CACF"}
@@ -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 D,styled as o}from"../../stitches.js";import{fadeOut as h}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=D({"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"}),l=({children:u,css:p,...c})=>{const[m,f]=t.useState(),[n,d]=t.useState(),[i,g]=t.useState(0),r=t.useRef(null),a=200;t.useLayoutEffect(()=>{r.current&&g(r.current.offsetWidth)},[]),t.useEffect(()=>{let e;return n===""&&(e=setTimeout(()=>f(null),a)),()=>{e!==null&&clearTimeout(e)}},[n]);const v=(e,y)=>{if(e&&i&&n===y){const N=i/2,w=i-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:d,css:p,...c},t.createElement(W,{ref:r},u),t.createElement(O,null,t.createElement(k,{css:{"--navigation-menu-viewport-offset":`${m||0}px`,transform:`translateX(${m||0}px)`,'&[data-state="open"]':{animation:`${S} ${a}ms ease`},'&[data-state="closed"]':{animation:`${h} ${a}ms ease-out`}}}))))},V=Object.assign(l,{Link:j,Dropdown:x,DropdownContent:C,DropdownItem:I,DropdownItemTitle:$,DropdownTrigger:T});l.displayName="NavigationMenu";export{V as NavigationMenu};
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,SAC5B,EAAA,CAACC,EAAYC,CAAa,EAAIF,EAAM,SAAA,EACpC,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,CAAA,CAAE,EAELL,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,GACpDR,EAAA,cAACb,EAAA,CACC,UAAW2B,EAA2B,MACtC,cAAeZ,EACf,IAAKN,EACJ,GAAGC,GAEJG,EAAA,cAACV,EAAA,CAAW,IAAKe,CAAUV,EAAAA,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"}
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"}