@atom-learning/components 3.20.0 → 3.22.0

package/dist/components/data-table/pagination/Pagination.d.ts

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TcolorScheme } from '../../../experiments/color-scheme';
 declare const StyledNav: import("@stitches/react/types/styled-component").StyledComponent<"nav", {}, {
     sm: string;
     md: string;
@@ -330,7 +331,12 @@ declare const StyledNav: import("@stitches/react/types/styled-component").Styled
         marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
     };
 }>>;
-declare type PaginationProps = React.ComponentProps<typeof StyledNav>;
+declare type PaginationProps = React.ComponentProps<typeof StyledNav> & {
+    colorScheme?: TcolorScheme;
+};
 /** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */
-export declare const Pagination: (props: PaginationProps) => JSX.Element | null;
+export declare const Pagination: {
+    ({ colorScheme, ...props }: PaginationProps): JSX.Element | null;
+    displayName: string;
+};
 export {};

package/dist/components/data-table/pagination/Pagination.js

@@ -1,2 +1,2 @@
-import*as e from"react";import{styled as P}from"../../../stitches.js";import{Flex as m}from"../../flex/Flex.js";import{Text as I}from"../../text/Text.js";import{AsyncDataState as o}from"../DataTable.types.js";import{useDataTable as b}from"../DataTableContext.js";import{GotoPageSelect as w,DirectionButton as c}from"./PaginationButtons.js";const y=P("nav",{display:"flex",justifyContent:"space-between",alignItems:"center",fontVariantNumeric:"tabular-nums",flexWrap:"wrap",rowGap:"$4"}),C=p=>{const{applyPagination:r,getState:g,getRowModel:f,getPageCount:i,previousPage:d,nextPage:u,setPageIndex:x,getTotalRows:s,asyncDataState:a}=b();e.useEffect(()=>{r()},[r]);const{pagination:t}=g();if(a!==o.PENDING&&s()===0)return null;const l=t.pageIndex*t.pageSize+1,E=l+f().rows.length-1,n=a===o.PENDING||a===o.REJECTED;return e.createElement(y,{...p},e.createElement(I,{size:"sm",css:{pr:"$4","@sm":{flexBasis:"50%"}}},`${l.toString()} - ${E.toString()} of ${s()} items`),e.createElement(m,{css:{justifyContent:"space-between",width:"100%","@sm":{flexBasis:"50%"}}},e.createElement(w,{gotoPage:x,pageCount:i(),pageIndex:t.pageIndex,disabled:n}),e.createElement(m,null,e.createElement(c,{direction:"previous",disabled:t.pageIndex===0||n,onClick:d,css:{mr:"$4"}}),e.createElement(c,{direction:"next",disabled:t.pageIndex===i()-1||n,onClick:u}))))};export{C as Pagination};
+import*as e from"react";import{styled as P}from"../../../stitches.js";import{Pagination as x}from"../../pagination/Pagination.js";import{Text as S}from"../../text/Text.js";import{AsyncDataState as w}from"../DataTable.types.js";import{useDataTable as y}from"../DataTableContext.js";const $=P("nav",{display:"flex",flexDirection:"column",justifyContent:"space-between",alignItems:"center",fontVariantNumeric:"tabular-nums",flexWrap:"wrap",width:"100%",gap:"$4",mt:"$4","@md":{flexDirection:"row"}}),i=({colorScheme:r,...m})=>{const{applyPagination:a,getState:s,getRowModel:g,getPageCount:l,setPageIndex:c,getTotalRows:n,asyncDataState:p}=y();e.useEffect(()=>{a()},[a]);const{pagination:t}=s();if(p!==w.PENDING&&n()===0)return null;const o=t.pageIndex*t.pageSize+1,f=o+g().rows.length-1,d=u=>{c(u-1)};return e.createElement($,{...m},e.createElement(S,{size:"sm"},`${o.toString()} - ${f.toString()} of ${n()} items`),e.createElement(x,{colorScheme:r,selectedPage:t.pageIndex+1,pagesCount:l(),onSelectedPageChange:d}))};i.displayName="Pagination";export{i as Pagination};
 //# sourceMappingURL=Pagination.js.map

package/dist/components/data-table/pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { Flex } from '../../flex'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\nimport { DirectionButton, GotoPageSelect } from './PaginationButtons'\n\nconst StyledNav = styled('nav', {\n  display: 'flex',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  fontVariantNumeric: 'tabular-nums',\n  flexWrap: 'wrap',\n  rowGap: '$4'\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav>\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = (props: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    previousPage,\n    nextPage,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n  const isPaginationDisabled =\n    asyncDataState === AsyncDataState.PENDING ||\n    asyncDataState === AsyncDataState.REJECTED\n\n  return (\n    <StyledNav {...props}>\n      <Text\n        size=\"sm\"\n        css={{\n          pr: '$4',\n          '@sm': { flexBasis: '50%' }\n        }}\n      >\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n\n      <Flex\n        css={{\n          justifyContent: 'space-between',\n          width: '100%',\n          '@sm': { flexBasis: '50%' }\n        }}\n      >\n        <GotoPageSelect\n          gotoPage={setPageIndex}\n          pageCount={getPageCount()}\n          pageIndex={paginationState.pageIndex}\n          disabled={isPaginationDisabled}\n        />\n\n        <Flex>\n          <DirectionButton\n            direction=\"previous\"\n            disabled={paginationState.pageIndex === 0 || isPaginationDisabled}\n            onClick={previousPage}\n            css={{ mr: '$4' }}\n          />\n          <DirectionButton\n            direction=\"next\"\n            disabled={\n              paginationState.pageIndex === getPageCount() - 1 ||\n              isPaginationDisabled\n            }\n            onClick={nextPage}\n          />\n        </Flex>\n      </Flex>\n    </StyledNav>\n  )\n}\n"],"names":["StyledNav","styled","Pagination","props","applyPagination","getState","getRowModel","getPageCount","previousPage","nextPage","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","AsyncDataState","recordsCountFrom","recordsCountTo","isPaginationDisabled","Text","Flex","GotoPageSelect","DirectionButton"],"mappings":"oVAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,QAAS,OACT,eAAgB,gBAChB,WAAY,SACZ,mBAAoB,eACpB,SAAU,OACV,OAAQ,IACV,CAAC,EAKYC,EAAcC,GAA2B,CACpD,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,SAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,IAEJC,EAAM,UAAU,IAAM,CACpBV,EACF,CAAA,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYW,CAAgB,EAAIV,IAIxC,GAHkBO,IAAmBI,EAAe,SACtBL,EAAa,IAAM,EAEpC,OAAO,KAEpB,MAAMM,EACJF,EAAgB,UAAYA,EAAgB,SAAW,EACnDG,EAAiBD,EAAmBX,IAAc,KAAK,OAAS,EAChEa,EACJP,IAAmBI,EAAe,SAClCJ,IAAmBI,EAAe,SAEpC,OACEF,EAAA,cAACd,EAAA,CAAW,GAAGG,CACbW,EAAAA,EAAA,cAACM,EAAA,CACC,KAAK,KACL,IAAK,CACH,GAAI,KACJ,MAAO,CAAE,UAAW,KAAM,CAC5B,CAAA,EAEC,GAAGH,EAAiB,gBAAgBC,EAAe,SAAS,QAAQP,WACvE,EAEAG,EAAA,cAACO,EAAA,CACC,IAAK,CACH,eAAgB,gBAChB,MAAO,OACP,MAAO,CAAE,UAAW,KAAM,CAC5B,CAAA,EAEAP,EAAA,cAACQ,EAAA,CACC,SAAUZ,EACV,UAAWH,EACX,EAAA,UAAWQ,EAAgB,UAC3B,SAAUI,CAAAA,CACZ,EAEAL,EAAA,cAACO,EAAA,KACCP,EAAA,cAACS,EAAA,CACC,UAAU,WACV,SAAUR,EAAgB,YAAc,GAAKI,EAC7C,QAASX,EACT,IAAK,CAAE,GAAI,IAAK,EAClB,EACAM,EAAA,cAACS,EAAA,CACC,UAAU,OACV,SACER,EAAgB,YAAcR,IAAiB,GAC/CY,EAEF,QAASV,CACX,CAAA,CACF,CACF,CACF,CAEJ"}
+{"version":3,"file":"Pagination.js","sources":["../../../../src/components/data-table/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/stitches'\n\nimport { TcolorScheme } from '../../../experiments/color-scheme'\nimport { Pagination as PaginationComponent } from '../../pagination'\nimport { Text } from '../../text'\nimport { AsyncDataState } from '../DataTable.types'\nimport { useDataTable } from '../DataTableContext'\n\nconst StyledNav = styled('nav', {\n  display: 'flex',\n  flexDirection: 'column',\n  justifyContent: 'space-between',\n  alignItems: 'center',\n  fontVariantNumeric: 'tabular-nums',\n  flexWrap: 'wrap',\n  width: '100%',\n  gap: '$4',\n  mt: '$4',\n  '@md': {\n    flexDirection: 'row'\n  }\n})\n\ntype PaginationProps = React.ComponentProps<typeof StyledNav> & {\n  colorScheme?: TcolorScheme\n}\n\n/** Applies pagination to parent DataTableProvider and renders UI to switch pages etc */\nexport const Pagination = ({ colorScheme, ...props }: PaginationProps) => {\n  const {\n    applyPagination,\n    getState,\n    getRowModel,\n    getPageCount,\n    setPageIndex,\n    getTotalRows,\n    asyncDataState\n  } = useDataTable()\n\n  React.useEffect(() => {\n    applyPagination()\n  }, [applyPagination])\n\n  const { pagination: paginationState } = getState()\n  const isPending = asyncDataState === AsyncDataState.PENDING\n  const isEmpty = !isPending && getTotalRows() === 0\n\n  if (isEmpty) return null\n\n  const recordsCountFrom =\n    paginationState.pageIndex * paginationState.pageSize + 1\n  const recordsCountTo = recordsCountFrom + getRowModel().rows.length - 1\n\n  //indexing for the pagination component is 1 based\n  const setPage = (index: number) => {\n    setPageIndex(index - 1)\n  }\n\n  return (\n    <StyledNav {...props}>\n      <Text size=\"sm\">\n        {`${recordsCountFrom.toString()} - ${recordsCountTo.toString()} of ${getTotalRows()} items`}\n      </Text>\n      <PaginationComponent\n        colorScheme={colorScheme}\n        selectedPage={paginationState.pageIndex + 1}\n        pagesCount={getPageCount()}\n        onSelectedPageChange={setPage}\n      />\n    </StyledNav>\n  )\n}\n\nPagination.displayName = 'Pagination'\n"],"names":["StyledNav","styled","Pagination","colorScheme","props","applyPagination","getState","getRowModel","getPageCount","setPageIndex","getTotalRows","asyncDataState","useDataTable","React","paginationState","AsyncDataState","recordsCountFrom","recordsCountTo","setPage","index","Text","PaginationComponent"],"mappings":"yRAUA,MAAMA,EAAYC,EAAO,MAAO,CAC9B,QAAS,OACT,cAAe,SACf,eAAgB,gBAChB,WAAY,SACZ,mBAAoB,eACpB,SAAU,OACV,MAAO,OACP,IAAK,KACL,GAAI,KACJ,MAAO,CACL,cAAe,KACjB,CACF,CAAC,EAOYC,EAAa,CAAC,CAAE,YAAAC,KAAgBC,CAAM,IAAuB,CACxE,KAAM,CACJ,gBAAAC,EACA,SAAAC,EACA,YAAAC,EACA,aAAAC,EACA,aAAAC,EACA,aAAAC,EACA,eAAAC,CACF,EAAIC,EAAa,EAEjBC,EAAM,UAAU,IAAM,CACpBR,EACF,CAAA,EAAG,CAACA,CAAe,CAAC,EAEpB,KAAM,CAAE,WAAYS,CAAgB,EAAIR,EAAAA,EAIxC,GAHkBK,IAAmBI,EAAe,SACtBL,EAAa,IAAM,EAEpC,OAAO,KAEpB,MAAMM,EACJF,EAAgB,UAAYA,EAAgB,SAAW,EACnDG,EAAiBD,EAAmBT,EAAY,EAAE,KAAK,OAAS,EAGhEW,EAAWC,GAAkB,CACjCV,EAAaU,EAAQ,CAAC,CACxB,EAEA,OACEN,EAAA,cAACb,EAAA,CAAW,GAAGI,CACbS,EAAAA,EAAA,cAACO,EAAA,CAAK,KAAK,IAAA,EACR,GAAGJ,EAAiB,gBAAgBC,EAAe,SAAA,QAAiBP,EAAa,SACpF,EACAG,EAAA,cAACQ,EAAA,CACC,YAAalB,EACb,aAAcW,EAAgB,UAAY,EAC1C,WAAYN,IACZ,qBAAsBU,CAAAA,CACxB,CACF,CAEJ,EAEAhB,EAAW,YAAc"}

package/dist/components/navigation/NavigationMenu.js

@@ -1,2 +1,2 @@
-import*as s from"@radix-ui/react-navigation-menu";import t from"react";import{MAX_Z_INDEX as D}from"../../constants/zIndices.js";import{keyframes as M,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 T}from"./NavigationMenuDropdownItem.js";import{NavigationMenuDropdownTrigger as $}from"./NavigationMenuDropdownTrigger.js";import{NavigationMenuLink as j}from"./NavigationMenuLink.js";import{colorSchemes as L}from"./stitches.navigationMenu.colorscheme.config.js";const S=M({"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:D}),O=o("div",{position:"absolute",left:0,top:"100%",width:"100%",display:"flex",justifyContent:"center"}),l=({children:f,css:p,...u})=>{const[c,m]=t.useState(),[n,d]=t.useState(),[r,g]=t.useState(0),i=t.useRef(null),a=200;t.useLayoutEffect(()=>{i.current&&g(i.current.offsetWidth)},[]),t.useEffect(()=>{let e;return n===""&&(e=setTimeout(()=>m(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;m(Math.round(N-w))}return e};return t.createElement(E.Provider,{value:{onNodeUpdate:v}},t.createElement(_,{className:L.light,onValueChange:d,css:p,...u},t.createElement(W,{ref:i},f),t.createElement(O,null,t.createElement(k,{css:{transform:`translateX(${c||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:T,DropdownTrigger:$});l.displayName="NavigationMenu";export{V as NavigationMenu};
+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};
 //# sourceMappingURL=NavigationMenu.js.map

package/dist/components/navigation/NavigationMenu.js.map

@@ -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              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,SAAoC,EAChE,CAACC,EAAYC,CAAa,EAAIF,EAAM,WACpC,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,EAAE,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,CACpDR,EAAAA,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,UAAW,cAAcO,GAAU,OACnC,uBAAwB,CACtB,UAAW,GAAGb,KAAiBqB,UACjC,EACA,yBAA0B,CACxB,UAAW,GAAGS,KAAWT,cAC3B,CACF,CACF,CAAA,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"}
+{"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"}