@ably/ui 15.6.0-dev.dac9cf0 → 15.6.0-dev.eb9980fc
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/core/Header.js +1 -1
- package/core/Header.js.map +1 -1
- package/core/Meganav/Meganav.js +1 -1
- package/core/Meganav/Meganav.js.map +1 -1
- package/core/Meganav/MeganavPanel.js +1 -1
- package/core/Meganav/MeganavPanel.js.map +1 -1
- package/core/Notice/component.js +1 -1
- package/core/Notice/component.js.map +1 -1
- package/core/Notice.js +1 -1
- package/core/Notice.js.map +1 -1
- package/index.d.ts +4 -13
- package/package.json +1 -1
package/core/Header.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({headerClassName,searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"
|
|
1
|
+
import React,{useState,useEffect,useRef,useMemo}from"react";import Icon from"./Icon";import cn from"./utils/cn";import Logo from"./Logo";import{componentMaxHeight,HEADER_BOTTOM_MARGIN,HEADER_HEIGHT}from"./utils/heights";import{HeaderLinks}from"./Header/HeaderLinks";import throttle from"lodash.throttle";import{COLLAPSE_TRIGGER_DISTANCE}from"./Notice/component";const FLEXIBLE_DESKTOP_CLASSES="hidden md:flex flex-1 items-center h-full";const MAX_MOBILE_MENU_WIDTH="560px";const Header=({headerClassName,searchBar,searchButton,logoHref,headerLinks,nav,mobileNav,sessionState,themedScrollpoints=[],searchButtonVisibility="all"})=>{const[showMenu,setShowMenu]=useState(false);const[fadingOut,setFadingOut]=useState(false);const[scrollpointClasses,setScrollpointClasses]=useState("");const[bannerVisible,setBannerVisible]=useState(true);const menuRef=useRef(null);const closeMenu=()=>{setFadingOut(true);setTimeout(()=>{setShowMenu(false);setFadingOut(false)},150)};useEffect(()=>{const handleResize=()=>{if(window.innerWidth>=1040){setShowMenu(false)}};window.addEventListener("resize",handleResize);return()=>window.removeEventListener("resize",handleResize)},[]);useEffect(()=>{if(showMenu){document.body.classList.add("overflow-hidden")}else{document.body.classList.remove("overflow-hidden")}return()=>{document.body.classList.remove("overflow-hidden")}},[showMenu]);useEffect(()=>{const handleScroll=()=>{for(const scrollpoint of themedScrollpoints){const element=document.getElementById(scrollpoint.id);if(element){const rect=element.getBoundingClientRect();if(rect.top<=HEADER_HEIGHT&&rect.bottom>=HEADER_HEIGHT){setScrollpointClasses(scrollpoint.className);return}}}if(window.scrollY>COLLAPSE_TRIGGER_DISTANCE){setBannerVisible(false)}else{setBannerVisible(true)}};const throttledHandleScroll=throttle(handleScroll,150);handleScroll();window.addEventListener("scroll",throttledHandleScroll);return()=>window.removeEventListener("scroll",throttledHandleScroll)},[themedScrollpoints]);const wrappedSearchButton=useMemo(()=>searchButton?React.createElement("div",{className:"text-neutral-1300 dark:text-neutral-000 flex items-center p-6"},searchButton):null,[searchButton]);return React.createElement(React.Fragment,null,React.createElement("header",{role:"banner",className:cn("fixed left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64",scrollpointClasses,{"md:top-0 transition-transform duration-300 ease-in-out":!bannerVisible}),style:{height:HEADER_HEIGHT}},React.createElement("div",{className:cn("flex items-center h-full",headerClassName)},React.createElement("nav",{className:"flex flex-1 h-full items-center"},["light","dark"].map(theme=>React.createElement(Logo,{key:theme,href:logoHref,theme:theme,additionalLinkAttrs:{className:cn("h-full focus-base rounded mr-32 w-[108px]",{"flex dark:hidden":theme==="light","hidden dark:flex":theme==="dark"})}})),React.createElement("div",{className:FLEXIBLE_DESKTOP_CLASSES},nav)),React.createElement("div",{className:"flex md:hidden flex-1 items-center justify-end gap-24 h-full"},searchButtonVisibility!=="desktop"?wrappedSearchButton:null,React.createElement("button",{className:"cursor-pointer focus-base rounded flex items-center",onClick:()=>setShowMenu(!showMenu),"aria-expanded":showMenu,"aria-controls":"mobile-menu","aria-label":"Toggle menu"},React.createElement(Icon,{name:showMenu?"icon-gui-x-mark-outline":"icon-gui-bars-3-outline",additionalCSS:"text-neutral-1300 dark:text-neutral-000",size:"1.5rem"}))),searchBar?React.createElement("div",{className:cn(FLEXIBLE_DESKTOP_CLASSES,"justify-center")},searchBar):null,React.createElement(HeaderLinks,{className:FLEXIBLE_DESKTOP_CLASSES,headerLinks:headerLinks,sessionState:sessionState,searchButton:wrappedSearchButton,searchButtonVisibility:searchButtonVisibility}))),showMenu?React.createElement(React.Fragment,null,React.createElement("div",{className:cn("fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300",{"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]":!fadingOut,"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]":fadingOut}),onClick:closeMenu,onKeyDown:e=>e.key==="Escape"&&closeMenu(),role:"presentation"}),React.createElement("div",{id:"mobile-menu",className:"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20",style:{maxWidth:MAX_MOBILE_MENU_WIDTH,maxHeight:componentMaxHeight(HEADER_HEIGHT,HEADER_BOTTOM_MARGIN)},ref:menuRef,role:"navigation"},mobileNav,React.createElement(HeaderLinks,{headerLinks:headerLinks,sessionState:sessionState}))):null)};export default Header;
|
|
2
2
|
//# sourceMappingURL=Header.js.map
|
package/core/Header.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, ReactNode, useMemo } from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n componentMaxHeight,\n HEADER_BOTTOM_MARGIN,\n HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport throttle from \"lodash.throttle\";\nimport { Theme } from \"./styles/colors/types\";\nimport { NoticeProps } from \"./Notice\";\n\nexport type ThemedScrollpoint = {\n id: string;\n className: string;\n};\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n /**\n * Indicates if the user is signed in.\n */\n signedIn: boolean;\n\n /**\n * Information required to log out the user.\n */\n logOut: {\n /**\n * Token used for logging out.\n */\n token: string;\n\n /**\n * URL to log out the user.\n */\n href: string;\n };\n\n /**\n * Name of the user's account.\n */\n accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n headerClassName?: string;\n /**\n * Optional search bar element.\n */\n searchBar?: ReactNode;\n\n /**\n * Optional search button element.\n */\n searchButton?: ReactNode;\n\n /**\n * URL for the logo link.\n */\n logoHref?: string;\n\n /**\n * Array of header links.\n */\n headerLinks?: {\n /**\n * URL for the link.\n */\n href: string;\n\n /**\n * Label for the link.\n */\n label: string;\n\n /**\n * Indicates if the link should open in a new tab.\n */\n external?: boolean;\n }[];\n\n /**\n * Optional desktop navigation element.\n */\n nav?: ReactNode;\n\n /**\n * Optional mobile navigation element.\n */\n mobileNav?: ReactNode;\n\n /**\n * State of the user session.\n */\n sessionState?: HeaderSessionState;\n\n /**\n * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n */\n themedScrollpoints?: ThemedScrollpoint[];\n\n /**\n * Visibility setting for the search button.\n * - \"all\": Visible on all devices.\n * - \"desktop\": Visible only on desktop devices.\n * - \"mobile\": Visible only on mobile devices.\n */\n searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n /**\n Props for the notice component to be displayed in the header.\n */\n notice: NoticeProps;\n /**\n Reference to the notice DOM element for handling visibility and overflow.\n */\n noticeRef: React.RefObject<HTMLDivElement>;\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n headerClassName,\n searchBar,\n searchButton,\n logoHref,\n headerLinks,\n nav,\n mobileNav,\n sessionState,\n themedScrollpoints = [],\n searchButtonVisibility = \"all\",\n notice,\n noticeRef,\n}) => {\n const [showMenu, setShowMenu] = useState(false);\n const [fadingOut, setFadingOut] = useState(false);\n const [scrollpointClasses, setScrollpointClasses] = useState<string>(\"\");\n const [bannerVisible, setBannerVisible] = useState(true);\n const menuRef = useRef<HTMLDivElement>(null);\n\n const closeMenu = () => {\n setFadingOut(true);\n\n setTimeout(() => {\n setShowMenu(false);\n setFadingOut(false);\n }, 150);\n };\n\n useEffect(() => {\n const handleResize = () => {\n if (window.innerWidth >= 1040) {\n setShowMenu(false);\n }\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n if (\n noticeRef?.current &&\n getComputedStyle(noticeRef?.current).overflow === \"hidden\"\n ) {\n setBannerVisible(false);\n }\n }, [noticeRef]);\n\n useEffect(() => {\n if (showMenu) {\n document.body.classList.add(\"overflow-hidden\");\n } else {\n document.body.classList.remove(\"overflow-hidden\");\n }\n\n // Cleanup on unmount\n return () => {\n document.body.classList.remove(\"overflow-hidden\");\n };\n }, [showMenu]);\n\n useEffect(() => {\n const handleScroll = () => {\n for (const scrollpoint of themedScrollpoints) {\n const element = document.getElementById(scrollpoint.id);\n if (element) {\n const rect = element.getBoundingClientRect();\n if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n setScrollpointClasses(scrollpoint.className);\n return;\n }\n }\n }\n if (window.scrollY > 20) {\n setBannerVisible(false);\n } else {\n if (\n !noticeRef?.current ||\n noticeRef?.current?.style?.overflow !== \"hidden\"\n )\n setBannerVisible(true);\n }\n };\n\n const throttledHandleScroll = throttle(handleScroll, 150);\n\n handleScroll();\n\n window.addEventListener(\"scroll\", throttledHandleScroll);\n return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n }, [themedScrollpoints]);\n\n const wrappedSearchButton = useMemo(\n () =>\n searchButton ? (\n <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center p-6\">\n {searchButton}\n </div>\n ) : null,\n [searchButton],\n );\n\n return (\n <>\n <header\n role=\"banner\"\n className={cn(\n \"fixed left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64\",\n scrollpointClasses,\n {\n \"md:top-0 transition-all duration-300\": !notice && !bannerVisible,\n \"md:top-[54px] transition-all duration-300\":\n notice && bannerVisible,\n },\n )}\n style={{ height: HEADER_HEIGHT }}\n >\n <div className={cn(\"flex items-center h-full\", headerClassName)}>\n <nav className=\"flex flex-1 h-full items-center\">\n {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n <Logo\n key={theme}\n href={logoHref}\n theme={theme}\n additionalLinkAttrs={{\n className: cn(\"h-full focus-base rounded mr-32 w-[108px]\", {\n \"flex dark:hidden\": theme === \"light\",\n \"hidden dark:flex\": theme === \"dark\",\n }),\n }}\n />\n ))}\n <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n </nav>\n <div className=\"flex md:hidden flex-1 items-center justify-end gap-24 h-full\">\n {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n <button\n className=\"cursor-pointer focus-base rounded flex items-center\"\n onClick={() => setShowMenu(!showMenu)}\n aria-expanded={showMenu}\n aria-controls=\"mobile-menu\"\n aria-label=\"Toggle menu\"\n >\n <Icon\n name={\n showMenu\n ? \"icon-gui-x-mark-outline\"\n : \"icon-gui-bars-3-outline\"\n }\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n size=\"1.5rem\"\n />\n </button>\n </div>\n {searchBar ? (\n <div className={cn(FLEXIBLE_DESKTOP_CLASSES, \"justify-center\")}>\n {searchBar}\n </div>\n ) : null}\n <HeaderLinks\n className={FLEXIBLE_DESKTOP_CLASSES}\n headerLinks={headerLinks}\n sessionState={sessionState}\n searchButton={wrappedSearchButton}\n searchButtonVisibility={searchButtonVisibility}\n />\n </div>\n </header>\n {showMenu ? (\n <>\n <div\n className={cn(\n \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300\",\n {\n \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n !fadingOut,\n \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n fadingOut,\n },\n )}\n onClick={closeMenu}\n onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n role=\"presentation\"\n />\n <div\n id=\"mobile-menu\"\n className=\"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20\"\n style={{\n maxWidth: MAX_MOBILE_MENU_WIDTH,\n maxHeight: componentMaxHeight(\n HEADER_HEIGHT,\n HEADER_BOTTOM_MARGIN,\n ),\n }}\n ref={menuRef}\n role=\"navigation\"\n >\n {mobileNav}\n <HeaderLinks\n headerLinks={headerLinks}\n sessionState={sessionState}\n />\n </div>\n </>\n ) : null}\n </>\n );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","headerClassName","searchBar","searchButton","logoHref","headerLinks","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","notice","noticeRef","showMenu","setShowMenu","fadingOut","setFadingOut","scrollpointClasses","setScrollpointClasses","bannerVisible","setBannerVisible","menuRef","closeMenu","setTimeout","handleResize","window","innerWidth","addEventListener","removeEventListener","current","getComputedStyle","overflow","document","body","classList","add","remove","handleScroll","scrollpoint","element","getElementById","id","rect","getBoundingClientRect","top","bottom","className","scrollY","style","throttledHandleScroll","wrappedSearchButton","div","header","role","height","map","theme","key","href","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"AAAA,OAAOA,OAASC,QAAQ,CAAEC,SAAS,CAAEC,MAAM,CAAaC,OAAO,KAAQ,OAAQ,AAC/E,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,AAC5B,QAAOC,SAAU,QAAS,AAC1B,QACEC,kBAAkB,CAClBC,oBAAoB,CACpBC,aAAa,KACR,iBAAkB,AACzB,QAASC,WAAW,KAAQ,sBAAuB,AACnD,QAAOC,aAAc,iBAAkB,CAoHvC,MAAMC,yBAA2B,4CAKjC,MAAMC,sBAAwB,QAE9B,MAAMC,OAAgC,CAAC,CACrCC,eAAe,CACfC,SAAS,CACTC,YAAY,CACZC,QAAQ,CACRC,WAAW,CACXC,GAAG,CACHC,SAAS,CACTC,YAAY,CACZC,mBAAqB,EAAE,CACvBC,uBAAyB,KAAK,CAC9BC,MAAM,CACNC,SAAS,CACV,IACC,KAAM,CAACC,SAAUC,YAAY,CAAG5B,SAAS,OACzC,KAAM,CAAC6B,UAAWC,aAAa,CAAG9B,SAAS,OAC3C,KAAM,CAAC+B,mBAAoBC,sBAAsB,CAAGhC,SAAiB,IACrE,KAAM,CAACiC,cAAeC,iBAAiB,CAAGlC,SAAS,MACnD,MAAMmC,QAAUjC,OAAuB,MAEvC,MAAMkC,UAAY,KAChBN,aAAa,MAEbO,WAAW,KACTT,YAAY,OACZE,aAAa,MACf,EAAG,IACL,EAEA7B,UAAU,KACR,MAAMqC,aAAe,KACnB,GAAIC,OAAOC,UAAU,EAAI,KAAM,CAC7BZ,YAAY,MACd,CACF,EACAW,OAAOE,gBAAgB,CAAC,SAAUH,cAClC,MAAO,IAAMC,OAAOG,mBAAmB,CAAC,SAAUJ,aACpD,EAAG,EAAE,EAELrC,UAAU,KACR,GACEyB,WAAWiB,SACXC,iBAAiBlB,WAAWiB,SAASE,QAAQ,GAAK,SAClD,CACAX,iBAAiB,MACnB,CACF,EAAG,CAACR,UAAU,EAEdzB,UAAU,KACR,GAAI0B,SAAU,CACZmB,SAASC,IAAI,CAACC,SAAS,CAACC,GAAG,CAAC,kBAC9B,KAAO,CACLH,SAASC,IAAI,CAACC,SAAS,CAACE,MAAM,CAAC,kBACjC,CAGA,MAAO,KACLJ,SAASC,IAAI,CAACC,SAAS,CAACE,MAAM,CAAC,kBACjC,CACF,EAAG,CAACvB,SAAS,EAEb1B,UAAU,KACR,MAAMkD,aAAe,KACnB,IAAK,MAAMC,eAAe7B,mBAAoB,CAC5C,MAAM8B,QAAUP,SAASQ,cAAc,CAACF,YAAYG,EAAE,EACtD,GAAIF,QAAS,CACX,MAAMG,KAAOH,QAAQI,qBAAqB,GAC1C,GAAID,KAAKE,GAAG,EAAIjD,eAAiB+C,KAAKG,MAAM,EAAIlD,cAAe,CAC7DuB,sBAAsBoB,YAAYQ,SAAS,EAC3C,MACF,CACF,CACF,CACA,GAAIrB,OAAOsB,OAAO,CAAG,GAAI,CACvB3B,iBAAiB,MACnB,KAAO,CACL,GACE,CAACR,WAAWiB,SACZjB,WAAWiB,SAASmB,OAAOjB,WAAa,SAExCX,iBAAiB,KACrB,CACF,EAEA,MAAM6B,sBAAwBpD,SAASwC,aAAc,KAErDA,eAEAZ,OAAOE,gBAAgB,CAAC,SAAUsB,uBAClC,MAAO,IAAMxB,OAAOG,mBAAmB,CAAC,SAAUqB,sBACpD,EAAG,CAACxC,mBAAmB,EAEvB,MAAMyC,oBAAsB7D,QAC1B,IACEc,aACE,oBAACgD,OAAIL,UAAU,iEACZ3C,cAED,KACN,CAACA,aAAa,EAGhB,OACE,wCACE,oBAACiD,UACCC,KAAK,SACLP,UAAWvD,GACT,qJACA0B,mBACA,CACE,uCAAwC,CAACN,QAAU,CAACQ,cACpD,4CACER,QAAUQ,aACd,GAEF6B,MAAO,CAAEM,OAAQ3D,aAAc,GAE/B,oBAACwD,OAAIL,UAAWvD,GAAG,2BAA4BU,kBAC7C,oBAACK,OAAIwC,UAAU,mCACZ,AAAC,CAAC,QAAS,OAAO,CAAaS,GAAG,CAAC,AAACC,OACnC,oBAAChE,MACCiE,IAAKD,MACLE,KAAMtD,SACNoD,MAAOA,MACPG,oBAAqB,CACnBb,UAAWvD,GAAG,4CAA6C,CACzD,mBAAoBiE,QAAU,QAC9B,mBAAoBA,QAAU,MAChC,EACF,KAGJ,oBAACL,OAAIL,UAAWhD,0BAA2BQ,MAE7C,oBAAC6C,OAAIL,UAAU,gEACZpC,yBAA2B,UAAYwC,oBAAsB,KAC9D,oBAACU,UACCd,UAAU,sDACVe,QAAS,IAAM/C,YAAY,CAACD,UAC5BiD,gBAAejD,SACfkD,gBAAc,cACdC,aAAW,eAEX,oBAAC1E,MACC2E,KACEpD,SACI,0BACA,0BAENqD,cAAc,0CACdC,KAAK,aAIVjE,UACC,oBAACiD,OAAIL,UAAWvD,GAAGO,yBAA0B,mBAC1CI,WAED,KACJ,oBAACN,aACCkD,UAAWhD,yBACXO,YAAaA,YACbG,aAAcA,aACdL,aAAc+C,oBACdxC,uBAAwBA,2BAI7BG,SACC,wCACE,oBAACsC,OACCL,UAAWvD,GACT,qDACA,CACE,2DACE,CAACwB,UACH,4DACEA,SACJ,GAEF8C,QAASvC,UACT8C,UAAW,AAACC,GAAMA,EAAEZ,GAAG,GAAK,UAAYnC,YACxC+B,KAAK,iBAEP,oBAACF,OACCV,GAAG,cACHK,UAAU,wKACVE,MAAO,CACLsB,SAAUvE,sBACVwE,UAAW9E,mBACTE,cACAD,qBAEJ,EACA8E,IAAKnD,QACLgC,KAAK,cAEJ9C,UACD,oBAACX,aACCS,YAAaA,YACbG,aAAcA,iBAIlB,KAGV,CAEA,gBAAeR,MAAO"}
|
|
1
|
+
{"version":3,"sources":["../../src/core/Header.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, ReactNode, useMemo } from \"react\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport Logo from \"./Logo\";\nimport {\n componentMaxHeight,\n HEADER_BOTTOM_MARGIN,\n HEADER_HEIGHT,\n} from \"./utils/heights\";\nimport { HeaderLinks } from \"./Header/HeaderLinks\";\nimport throttle from \"lodash.throttle\";\nimport { Theme } from \"./styles/colors/types\";\nimport { COLLAPSE_TRIGGER_DISTANCE } from \"./Notice/component\";\n\nexport type ThemedScrollpoint = {\n id: string;\n className: string;\n};\n\n/**\n * Represents the state of the user session in the header.\n */\nexport type HeaderSessionState = {\n /**\n * Indicates if the user is signed in.\n */\n signedIn: boolean;\n\n /**\n * Information required to log out the user.\n */\n logOut: {\n /**\n * Token used for logging out.\n */\n token: string;\n\n /**\n * URL to log out the user.\n */\n href: string;\n };\n\n /**\n * Name of the user's account.\n */\n accountName: string;\n};\n\n/**\n * Props for the Header component.\n */\nexport type HeaderProps = {\n headerClassName?: string;\n /**\n * Optional search bar element.\n */\n searchBar?: ReactNode;\n\n /**\n * Optional search button element.\n */\n searchButton?: ReactNode;\n\n /**\n * URL for the logo link.\n */\n logoHref?: string;\n\n /**\n * Array of header links.\n */\n headerLinks?: {\n /**\n * URL for the link.\n */\n href: string;\n\n /**\n * Label for the link.\n */\n label: string;\n\n /**\n * Indicates if the link should open in a new tab.\n */\n external?: boolean;\n }[];\n\n /**\n * Optional desktop navigation element.\n */\n nav?: ReactNode;\n\n /**\n * Optional mobile navigation element.\n */\n mobileNav?: ReactNode;\n\n /**\n * State of the user session.\n */\n sessionState?: HeaderSessionState;\n\n /**\n * Array of themed scrollpoints. The header will change its appearance based on the scrollpoint in view.\n */\n themedScrollpoints?: ThemedScrollpoint[];\n\n /**\n * Visibility setting for the search button.\n * - \"all\": Visible on all devices.\n * - \"desktop\": Visible only on desktop devices.\n * - \"mobile\": Visible only on mobile devices.\n */\n searchButtonVisibility?: \"all\" | \"desktop\" | \"mobile\";\n};\n\nconst FLEXIBLE_DESKTOP_CLASSES = \"hidden md:flex flex-1 items-center h-full\";\n\n/**\n * Maximum width before the menu expanded into full width\n */\nconst MAX_MOBILE_MENU_WIDTH = \"560px\";\n\nconst Header: React.FC<HeaderProps> = ({\n headerClassName,\n searchBar,\n searchButton,\n logoHref,\n headerLinks,\n nav,\n mobileNav,\n sessionState,\n themedScrollpoints = [],\n searchButtonVisibility = \"all\",\n}) => {\n const [showMenu, setShowMenu] = useState(false);\n const [fadingOut, setFadingOut] = useState(false);\n const [scrollpointClasses, setScrollpointClasses] = useState<string>(\"\");\n const [bannerVisible, setBannerVisible] = useState(true);\n const menuRef = useRef<HTMLDivElement>(null);\n\n const closeMenu = () => {\n setFadingOut(true);\n\n setTimeout(() => {\n setShowMenu(false);\n setFadingOut(false);\n }, 150);\n };\n\n useEffect(() => {\n const handleResize = () => {\n if (window.innerWidth >= 1040) {\n setShowMenu(false);\n }\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n if (showMenu) {\n document.body.classList.add(\"overflow-hidden\");\n } else {\n document.body.classList.remove(\"overflow-hidden\");\n }\n\n // Cleanup on unmount\n return () => {\n document.body.classList.remove(\"overflow-hidden\");\n };\n }, [showMenu]);\n\n useEffect(() => {\n const handleScroll = () => {\n for (const scrollpoint of themedScrollpoints) {\n const element = document.getElementById(scrollpoint.id);\n if (element) {\n const rect = element.getBoundingClientRect();\n if (rect.top <= HEADER_HEIGHT && rect.bottom >= HEADER_HEIGHT) {\n setScrollpointClasses(scrollpoint.className);\n return;\n }\n }\n }\n if (window.scrollY > COLLAPSE_TRIGGER_DISTANCE) {\n setBannerVisible(false);\n } else {\n setBannerVisible(true);\n }\n };\n\n const throttledHandleScroll = throttle(handleScroll, 150);\n\n handleScroll();\n\n window.addEventListener(\"scroll\", throttledHandleScroll);\n return () => window.removeEventListener(\"scroll\", throttledHandleScroll);\n }, [themedScrollpoints]);\n\n const wrappedSearchButton = useMemo(\n () =>\n searchButton ? (\n <div className=\"text-neutral-1300 dark:text-neutral-000 flex items-center p-6\">\n {searchButton}\n </div>\n ) : null,\n [searchButton],\n );\n\n return (\n <>\n <header\n role=\"banner\"\n className={cn(\n \"fixed left-0 w-full z-10 bg-neutral-000 dark:bg-neutral-1300 border-b border-neutral-300 dark:border-neutral-1000 transition-colors px-24 md:px-64\",\n scrollpointClasses,\n {\n \"md:top-0 transition-transform duration-300 ease-in-out\":\n !bannerVisible,\n },\n )}\n style={{ height: HEADER_HEIGHT }}\n >\n <div className={cn(\"flex items-center h-full\", headerClassName)}>\n <nav className=\"flex flex-1 h-full items-center\">\n {([\"light\", \"dark\"] as Theme[]).map((theme) => (\n <Logo\n key={theme}\n href={logoHref}\n theme={theme}\n additionalLinkAttrs={{\n className: cn(\"h-full focus-base rounded mr-32 w-[108px]\", {\n \"flex dark:hidden\": theme === \"light\",\n \"hidden dark:flex\": theme === \"dark\",\n }),\n }}\n />\n ))}\n <div className={FLEXIBLE_DESKTOP_CLASSES}>{nav}</div>\n </nav>\n <div className=\"flex md:hidden flex-1 items-center justify-end gap-24 h-full\">\n {searchButtonVisibility !== \"desktop\" ? wrappedSearchButton : null}\n <button\n className=\"cursor-pointer focus-base rounded flex items-center\"\n onClick={() => setShowMenu(!showMenu)}\n aria-expanded={showMenu}\n aria-controls=\"mobile-menu\"\n aria-label=\"Toggle menu\"\n >\n <Icon\n name={\n showMenu\n ? \"icon-gui-x-mark-outline\"\n : \"icon-gui-bars-3-outline\"\n }\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000\"\n size=\"1.5rem\"\n />\n </button>\n </div>\n {searchBar ? (\n <div className={cn(FLEXIBLE_DESKTOP_CLASSES, \"justify-center\")}>\n {searchBar}\n </div>\n ) : null}\n <HeaderLinks\n className={FLEXIBLE_DESKTOP_CLASSES}\n headerLinks={headerLinks}\n sessionState={sessionState}\n searchButton={wrappedSearchButton}\n searchButtonVisibility={searchButtonVisibility}\n />\n </div>\n </header>\n {showMenu ? (\n <>\n <div\n className={cn(\n \"fixed inset-0 bg-neutral-1300 dark:bg-neutral-1300\",\n {\n \"animate-[fade-in-ten-percent_150ms_ease-in-out_forwards]\":\n !fadingOut,\n \"animate-[fade-out-ten-percent_150ms_ease-in-out_forwards]\":\n fadingOut,\n },\n )}\n onClick={closeMenu}\n onKeyDown={(e) => e.key === \"Escape\" && closeMenu()}\n role=\"presentation\"\n />\n <div\n id=\"mobile-menu\"\n className=\"md:hidden fixed flex flex-col top-[76px] overflow-y-hidden mx-12 right-0 w-[calc(100%-24px)] bg-neutral-000 dark:bg-neutral-1300 rounded-2xl ui-shadow-lg-medium z-20\"\n style={{\n maxWidth: MAX_MOBILE_MENU_WIDTH,\n maxHeight: componentMaxHeight(\n HEADER_HEIGHT,\n HEADER_BOTTOM_MARGIN,\n ),\n }}\n ref={menuRef}\n role=\"navigation\"\n >\n {mobileNav}\n <HeaderLinks\n headerLinks={headerLinks}\n sessionState={sessionState}\n />\n </div>\n </>\n ) : null}\n </>\n );\n};\n\nexport default Header;\n"],"names":["React","useState","useEffect","useRef","useMemo","Icon","cn","Logo","componentMaxHeight","HEADER_BOTTOM_MARGIN","HEADER_HEIGHT","HeaderLinks","throttle","COLLAPSE_TRIGGER_DISTANCE","FLEXIBLE_DESKTOP_CLASSES","MAX_MOBILE_MENU_WIDTH","Header","headerClassName","searchBar","searchButton","logoHref","headerLinks","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","showMenu","setShowMenu","fadingOut","setFadingOut","scrollpointClasses","setScrollpointClasses","bannerVisible","setBannerVisible","menuRef","closeMenu","setTimeout","handleResize","window","innerWidth","addEventListener","removeEventListener","document","body","classList","add","remove","handleScroll","scrollpoint","element","getElementById","id","rect","getBoundingClientRect","top","bottom","className","scrollY","throttledHandleScroll","wrappedSearchButton","div","header","role","style","height","map","theme","key","href","additionalLinkAttrs","button","onClick","aria-expanded","aria-controls","aria-label","name","additionalCSS","size","onKeyDown","e","maxWidth","maxHeight","ref"],"mappings":"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"}
|
package/core/Meganav/Meganav.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from"react";import Header from"../Header";import Icon from"../Icon";import Flyout from"../Flyout";import{menuItemsForHeader}from"./data";import{MeganavMobile}from"./MeganavMobile";import Notice from"../Notice";const Meganav=({sessionState,searchDataId,notice})=>{const mobileNavItems=menuItemsForHeader.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content}));return React.createElement("div",{className:"absolute inset-0 w-full z-50 "},notice&&React.createElement(Notice,{...notice.props,config:notice.config}),React.createElement(Header,{headerClassName:"max-w-screen-xl mx-auto ui-grid-px",nav:React.createElement(Flyout,{menuItems:menuItemsForHeader,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 ml-128 bg-neutral-000 dark:bg-neutral-1300",hasAnimation:true}),mobileNav:React.createElement(MeganavMobile,{mobileNavItems:mobileNavItems}),searchButton:React.createElement("button",{type:"button","data-control":"search","data-id":searchDataId,className:"cursor-pointer h-24 w-24 group focus:outline-none","aria-expanded":"false","aria-controls":"panel-search","aria-label":"Ask AI"},React.createElement(Icon,{name:"icon-gui-magnifying-glass-outline",color:"text-neutral-1300",size:"24px"})),headerLinks:[{href:"/contact",label:"Help"}],sessionState:sessionState}))};export default Meganav;
|
|
2
2
|
//# sourceMappingURL=Meganav.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Meganav/Meganav.tsx"],"sourcesContent":["import React
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/Meganav.tsx"],"sourcesContent":["import React from \"react\";\nimport Header, { HeaderSessionState } from \"../Header\";\nimport Icon from \"../Icon\";\nimport Flyout from \"../Flyout\";\nimport { menuItemsForHeader } from \"./data\";\nimport { MeganavMobile } from \"./MeganavMobile\";\nimport Notice from \"../Notice\";\nimport { MeganavNoticeProps } from \"../LegacyMeganav\";\n\nexport type MeganavProps = {\n sessionState: HeaderSessionState;\n searchDataId: string;\n notice?: MeganavNoticeProps;\n};\n\nconst Meganav = ({ sessionState, searchDataId, notice }: MeganavProps) => {\n const mobileNavItems = menuItemsForHeader\n .filter((item) => !item.isHiddenMobile)\n .map(({ name, link, content }) => ({ name, link, content }));\n\n return (\n <div className=\"absolute inset-0 w-full z-50 \">\n {notice && <Notice {...notice.props} config={notice.config} />}\n <Header\n headerClassName=\"max-w-screen-xl mx-auto ui-grid-px\"\n nav={\n <Flyout\n menuItems={menuItemsForHeader}\n className=\"justify-left z-40\"\n flyOutClassName=\"flex justify-left\"\n viewPortClassName=\"ui-shadow-lg-medium border border-neutral-000 dark:border-neutral-1300 rounded-2xl mt-8 ml-128 bg-neutral-000 dark:bg-neutral-1300\"\n hasAnimation={true}\n />\n }\n mobileNav={<MeganavMobile mobileNavItems={mobileNavItems} />}\n searchButton={\n <button\n type=\"button\"\n data-control=\"search\"\n data-id={searchDataId}\n className=\"cursor-pointer h-24 w-24 group focus:outline-none\"\n aria-expanded=\"false\"\n aria-controls=\"panel-search\"\n aria-label=\"Ask AI\"\n >\n <Icon\n name=\"icon-gui-magnifying-glass-outline\"\n color=\"text-neutral-1300\"\n size=\"24px\"\n />\n </button>\n }\n headerLinks={[{ href: \"/contact\", label: \"Help\" }]}\n sessionState={sessionState}\n />\n </div>\n );\n};\n\nexport default Meganav;\n"],"names":["React","Header","Icon","Flyout","menuItemsForHeader","MeganavMobile","Notice","Meganav","sessionState","searchDataId","notice","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","div","className","props","config","headerClassName","nav","menuItems","flyOutClassName","viewPortClassName","hasAnimation","mobileNav","searchButton","button","type","data-control","data-id","aria-expanded","aria-controls","aria-label","color","size","headerLinks","href","label"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,WAAoC,WAAY,AACvD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,WAAY,WAAY,AAC/B,QAASC,kBAAkB,KAAQ,QAAS,AAC5C,QAASC,aAAa,KAAQ,iBAAkB,AAChD,QAAOC,WAAY,WAAY,CAS/B,MAAMC,QAAU,CAAC,CAAEC,YAAY,CAAEC,YAAY,CAAEC,MAAM,CAAgB,IACnE,MAAMC,eAAiBP,mBACpBQ,MAAM,CAAC,AAACC,MAAS,CAACA,KAAKC,cAAc,EACrCC,GAAG,CAAC,CAAC,CAAEC,IAAI,CAAEC,IAAI,CAAEC,OAAO,CAAE,GAAM,CAAA,CAAEF,KAAMC,KAAMC,OAAQ,CAAA,GAE3D,OACE,oBAACC,OAAIC,UAAU,iCACZV,QAAU,oBAACJ,QAAQ,GAAGI,OAAOW,KAAK,CAAEC,OAAQZ,OAAOY,MAAM,GAC1D,oBAACrB,QACCsB,gBAAgB,qCAChBC,IACE,oBAACrB,QACCsB,UAAWrB,mBACXgB,UAAU,oBACVM,gBAAgB,oBAChBC,kBAAkB,qIAClBC,aAAc,OAGlBC,UAAW,oBAACxB,eAAcM,eAAgBA,iBAC1CmB,aACE,oBAACC,UACCC,KAAK,SACLC,eAAa,SACbC,UAASzB,aACTW,UAAU,oDACVe,gBAAc,QACdC,gBAAc,eACdC,aAAW,UAEX,oBAACnC,MACCc,KAAK,oCACLsB,MAAM,oBACNC,KAAK,UAIXC,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,MAAO,EAAE,CAClDlC,aAAcA,eAItB,CAEA,gBAAeD,OAAQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import{products}from"../ProductTile/data";import ProductTile from"../ProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2",panelLeftClassName)},displayProductTile?Object.keys(products).map(product=>React.createElement(ProductTile,{name:product,key:product,selected:false,onClick:()=>window.location.href=products[product]?.link,animateIcons:true})):panelLeft&&React.createElement(React.Fragment,null,React.createElement("div",{className:"w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("p",{className:"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement(FeaturedLink,{url:panelLeft.url,additionalCSS:"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3",iconColor:"text-orange-600"},panelLeft.labelLink)),React.createElement("div",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"mt-12 md:mt-0 flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},"platform"),panelRightItems&&panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-
|
|
1
|
+
import React from"react";import cn from"../utils/cn";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import{products}from"../ProductTile/data";import ProductTile from"../ProductTile";export const MeganavPanel=({displayProductTile,panelLeft,panelLeftClassName,panelRightHeading,panelRightItems,panelRightBottom})=>{return React.createElement("div",{className:"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300"},React.createElement("div",{className:cn("flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2",panelLeftClassName)},displayProductTile?Object.keys(products).map(product=>React.createElement(ProductTile,{name:product,key:product,selected:false,onClick:()=>window.location.href=products[product]?.link,animateIcons:true})):panelLeft&&React.createElement(React.Fragment,null,React.createElement("div",{className:"w-full p-24"},React.createElement("h4",{className:"ui-text-h4 text-neutral-1300 dark:text-neutral-000"},panelLeft.heading),React.createElement("p",{className:"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8"},panelLeft.content),React.createElement(FeaturedLink,{url:panelLeft.url,additionalCSS:"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3",iconColor:"text-orange-600"},panelLeft.labelLink)),React.createElement("div",{className:"flex justify-end"},React.createElement("img",{src:panelLeft.image,alt:panelLeft.heading,className:"w-full z-10 rounded-lg"})))),React.createElement("div",{className:"mt-12 md:mt-0 flex-[3] flex-shrink-0 flex flex-col justify-between"},React.createElement("ul",null,panelRightHeading&&React.createElement("p",{className:"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12"},"platform"),panelRightItems&&panelRightItems.map(item=>React.createElement("li",{className:cn("list-none py-12 my-0 flex gap-x-[10px] group hover:cursor-pointer",item.isMobile?"md:hidden":"md:flex"),key:item.label},React.createElement(Icon,{name:item.icon,size:"1.25rem",additionalCSS:"text-neutral-1000 dark:text-neutral-300"}),React.createElement("a",{className:"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000",href:item.link},item.label)))),panelRightBottom&&React.createElement("div",{className:"items-end mt-16 md:mt-0"},panelRightBottom)))};
|
|
2
2
|
//# sourceMappingURL=MeganavPanel.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList } from \"./data\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport { ProductName, products } from \"../ProductTile/data\";\nimport ProductTile from \"../ProductTile\";\n\nexport const MeganavPanel = ({\n displayProductTile,\n panelLeft,\n panelLeftClassName,\n panelRightHeading,\n panelRightItems,\n panelRightBottom,\n}: {\n displayProductTile?: boolean;\n panelLeft?: FlyoutPanelHighlight;\n panelLeftClassName?: string;\n panelRightHeading?: string;\n panelRightItems: FlyoutPanelList[];\n panelRightBottom?: React.ReactNode;\n}) => {\n return (\n <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n <div\n className={cn(\n \"flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2\",\n panelLeftClassName,\n )}\n >\n {displayProductTile\n ? Object.keys(products).map((product) => (\n <ProductTile\n name={product as ProductName}\n key={product}\n selected={false}\n onClick={() =>\n (window.location.href = products[product as ProductName]\n ?.link as string)\n }\n animateIcons={true}\n />\n ))\n : panelLeft && (\n <>\n <div className=\"w-full p-24\">\n <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n {panelLeft.heading}\n </h4>\n <p className=\"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n {panelLeft.content}\n </p>\n <FeaturedLink\n url={panelLeft.url}\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3\"\n iconColor=\"text-orange-600\"\n >\n {panelLeft.labelLink}\n </FeaturedLink>\n </div>\n <div className=\"flex justify-end\">\n <img\n src={panelLeft.image}\n alt={panelLeft.heading}\n className=\"w-full z-10 rounded-lg\"\n />\n </div>\n </>\n )}\n </div>\n <div className=\"mt-12 md:mt-0 flex-[3] flex-shrink-0 flex flex-col justify-between\">\n <ul>\n {panelRightHeading && (\n <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n platform\n </p>\n )}\n\n {panelRightItems &&\n panelRightItems.map((item) => (\n <li\n className={cn(\n \"list-none py-
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/MeganavPanel.tsx"],"sourcesContent":["import React from \"react\";\nimport cn from \"../utils/cn\";\nimport Icon from \"../Icon\";\nimport { FlyoutPanelHighlight, FlyoutPanelList } from \"./data\";\nimport FeaturedLink from \"../FeaturedLink\";\nimport { ProductName, products } from \"../ProductTile/data\";\nimport ProductTile from \"../ProductTile\";\n\nexport const MeganavPanel = ({\n displayProductTile,\n panelLeft,\n panelLeftClassName,\n panelRightHeading,\n panelRightItems,\n panelRightBottom,\n}: {\n displayProductTile?: boolean;\n panelLeft?: FlyoutPanelHighlight;\n panelLeftClassName?: string;\n panelRightHeading?: string;\n panelRightItems: FlyoutPanelList[];\n panelRightBottom?: React.ReactNode;\n}) => {\n return (\n <div className=\"flex flex-col md:flex-row gap-x-24 bg-neutral-000 dark:bg-neutral-1300\">\n <div\n className={cn(\n \"flex-[7] flex-shrink-0 grid-cols-1 xs:grid-cols-2\",\n panelLeftClassName,\n )}\n >\n {displayProductTile\n ? Object.keys(products).map((product) => (\n <ProductTile\n name={product as ProductName}\n key={product}\n selected={false}\n onClick={() =>\n (window.location.href = products[product as ProductName]\n ?.link as string)\n }\n animateIcons={true}\n />\n ))\n : panelLeft && (\n <>\n <div className=\"w-full p-24\">\n <h4 className=\"ui-text-h4 text-neutral-1300 dark:text-neutral-000\">\n {panelLeft.heading}\n </h4>\n <p className=\"ui-text-p3 text-neutral-800 dark:text-neutral-500 mt-8\">\n {panelLeft.content}\n </p>\n <FeaturedLink\n url={panelLeft.url}\n additionalCSS=\"text-neutral-1300 dark:text-neutral-000 mt-16 ui-text-p3\"\n iconColor=\"text-orange-600\"\n >\n {panelLeft.labelLink}\n </FeaturedLink>\n </div>\n <div className=\"flex justify-end\">\n <img\n src={panelLeft.image}\n alt={panelLeft.heading}\n className=\"w-full z-10 rounded-lg\"\n />\n </div>\n </>\n )}\n </div>\n <div className=\"mt-12 md:mt-0 flex-[3] flex-shrink-0 flex flex-col justify-between\">\n <ul>\n {panelRightHeading && (\n <p className=\"ui-text-overline2 text-neutral-700 dark:text-neutral-600 my-12\">\n platform\n </p>\n )}\n\n {panelRightItems &&\n panelRightItems.map((item) => (\n <li\n className={cn(\n \"list-none py-12 my-0 flex gap-x-[10px] group hover:cursor-pointer\",\n item.isMobile ? \"md:hidden\" : \"md:flex\",\n )}\n key={item.label}\n >\n <Icon\n name={item.icon}\n size=\"1.25rem\"\n additionalCSS=\"text-neutral-1000 dark:text-neutral-300\"\n />\n <a\n className=\"ui-text-menu2 md:ui-text-menu3 font-semibold text-neutral-1000 dark:text-neutral-300 group-hover:text-neutral-1300 dark:group-hover:text-neutral-000\"\n href={item.link}\n >\n {item.label}\n </a>\n </li>\n ))}\n </ul>\n {panelRightBottom && (\n <div className=\"items-end mt-16 md:mt-0\">{panelRightBottom}</div>\n )}\n </div>\n </div>\n );\n};\n"],"names":["React","cn","Icon","FeaturedLink","products","ProductTile","MeganavPanel","displayProductTile","panelLeft","panelLeftClassName","panelRightHeading","panelRightItems","panelRightBottom","div","className","Object","keys","map","product","name","key","selected","onClick","window","location","href","link","animateIcons","h4","heading","p","content","url","additionalCSS","iconColor","labelLink","img","src","image","alt","ul","item","li","isMobile","label","icon","size","a"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAC1B,QAAOC,OAAQ,aAAc,AAC7B,QAAOC,SAAU,SAAU,AAE3B,QAAOC,iBAAkB,iBAAkB,AAC3C,QAAsBC,QAAQ,KAAQ,qBAAsB,AAC5D,QAAOC,gBAAiB,gBAAiB,AAEzC,QAAO,MAAMC,aAAe,CAAC,CAC3BC,kBAAkB,CAClBC,SAAS,CACTC,kBAAkB,CAClBC,iBAAiB,CACjBC,eAAe,CACfC,gBAAgB,CAQjB,IACC,OACE,oBAACC,OAAIC,UAAU,0EACb,oBAACD,OACCC,UAAWb,GACT,oDACAQ,qBAGDF,mBACGQ,OAAOC,IAAI,CAACZ,UAAUa,GAAG,CAAC,AAACC,SACzB,oBAACb,aACCc,KAAMD,QACNE,IAAKF,QACLG,SAAU,MACVC,QAAS,IACNC,OAAOC,QAAQ,CAACC,IAAI,CAAGrB,QAAQ,CAACc,QAAuB,EACpDQ,KAENC,aAAc,QAGlBnB,WACE,wCACE,oBAACK,OAAIC,UAAU,eACb,oBAACc,MAAGd,UAAU,sDACXN,UAAUqB,OAAO,EAEpB,oBAACC,KAAEhB,UAAU,0DACVN,UAAUuB,OAAO,EAEpB,oBAAC5B,cACC6B,IAAKxB,UAAUwB,GAAG,CAClBC,cAAc,2DACdC,UAAU,mBAET1B,UAAU2B,SAAS,GAGxB,oBAACtB,OAAIC,UAAU,oBACb,oBAACsB,OACCC,IAAK7B,UAAU8B,KAAK,CACpBC,IAAK/B,UAAUqB,OAAO,CACtBf,UAAU,8BAMxB,oBAACD,OAAIC,UAAU,sEACb,oBAAC0B,UACE9B,mBACC,oBAACoB,KAAEhB,UAAU,kEAAiE,YAK/EH,iBACCA,gBAAgBM,GAAG,CAAC,AAACwB,MACnB,oBAACC,MACC5B,UAAWb,GACT,oEACAwC,KAAKE,QAAQ,CAAG,YAAc,WAEhCvB,IAAKqB,KAAKG,KAAK,EAEf,oBAAC1C,MACCiB,KAAMsB,KAAKI,IAAI,CACfC,KAAK,UACLb,cAAc,4CAEhB,oBAACc,KACCjC,UAAU,uJACVW,KAAMgB,KAAKf,IAAI,EAEde,KAAKG,KAAK,KAKpBhC,kBACC,oBAACC,OAAIC,UAAU,2BAA2BF,mBAKpD,CAAE"}
|
package/core/Notice/component.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import Cookie from"js-cookie";import throttle from"lodash.throttle";import{queryId}from"../dom-query";import{FLASH_DATA_ID}from"../Flash";const COOKIE_EXPIRY=90;const COLLAPSE_TRIGGER_DISTANCE=5;const SCROLL_LISTENER_THROTTLE=100;const RESIZE_LISTENER_THROTTLE=100;const isMdViewport=()=>!window.matchMedia(`(min-width: 65rem)`).matches;const adjustFlashMargin=open=>{const flash=queryId(FLASH_DATA_ID);if(flash){flash.style.marginTop=open?`4rem`:null}};const hideOnMobile=bannerContainer=>{if(isMdViewport()){bannerContainer.style.display="none"}else{bannerContainer.style.display=null}};const hideNotice=bannerContainer=>{bannerContainer.style.maxHeight=0;bannerContainer.style.overflow="hidden";adjustFlashMargin(false)};const showNotice=bannerContainer=>{bannerContainer.style.maxHeight=null;bannerContainer.style.overflow=null;adjustFlashMargin(true)};const setupRememberClosed=(cookieId,noticeId)=>{const cookie=Cookie.get(cookieId)||"";Cookie.set(cookieId,`${cookie.replace(`${noticeId},`,"")+noticeId},`,{expires:COOKIE_EXPIRY})};const hasBeenClosedBefore=(cookieId,noticeId)=>(Cookie.get(cookieId)||"").includes(noticeId);const setupNoticeCollapse=bannerContainer=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}const listener=throttle(()=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}else if(bannerContainer.style.overflow){showNotice(bannerContainer)}},SCROLL_LISTENER_THROTTLE);document.addEventListener("scroll",listener);return()=>document.removeEventListener("scroll",listener)};const setupCloseBtn=(bannerContainer,cookieId,noticeId,collapseUnmountListeners)=>{const closeBtn=bannerContainer.querySelector("button");if(!closeBtn)return()=>{};const listener=()=>{if(cookieId&¬iceId)setupRememberClosed(cookieId,noticeId);hideNotice(bannerContainer);collapseUnmountListeners()};closeBtn.addEventListener("click",listener);return()=>document.removeEventListener("click",listener)};const resizeHandler=bannerContainer=>{const handler=throttle(()=>{hideOnMobile(bannerContainer)},RESIZE_LISTENER_THROTTLE);window.addEventListener("resize",handler);return()=>window.removeEventListener("resize",handler)};const Notice=({bannerContainer,cookieId,noticeId,options})=>{if(typeof window==="undefined")return()=>{};if(!bannerContainer){console.warn("A Notice component was initited but no notice container was found.");return()=>{}}if(hasBeenClosedBefore(cookieId,noticeId))return()=>{};hideOnMobile(bannerContainer);showNotice(bannerContainer);const opts={collapse:true,...options};const collapseUnmountListeners=opts.collapse?setupNoticeCollapse(bannerContainer):()=>{};const closeBtnUnmountListeners=setupCloseBtn(bannerContainer,cookieId,noticeId,collapseUnmountListeners);const resizeUnmountListener=resizeHandler(bannerContainer);return()=>{[closeBtnUnmountListeners,collapseUnmountListeners,resizeUnmountListener].forEach(unmount=>unmount())}};export default Notice;
|
|
1
|
+
import Cookie from"js-cookie";import throttle from"lodash.throttle";import{queryId}from"../dom-query";import{FLASH_DATA_ID}from"../Flash";const COOKIE_EXPIRY=90;export const COLLAPSE_TRIGGER_DISTANCE=5;const SCROLL_LISTENER_THROTTLE=100;const RESIZE_LISTENER_THROTTLE=100;const isMdViewport=()=>!window.matchMedia(`(min-width: 65rem)`).matches;const adjustFlashMargin=open=>{const flash=queryId(FLASH_DATA_ID);if(flash){flash.style.marginTop=open?`4rem`:null}};const hideOnMobile=bannerContainer=>{if(isMdViewport()){bannerContainer.style.display="none"}else{bannerContainer.style.display=null}};const hideNotice=bannerContainer=>{bannerContainer.style.maxHeight=0;bannerContainer.style.overflow="hidden";adjustFlashMargin(false)};const showNotice=bannerContainer=>{bannerContainer.style.maxHeight=null;bannerContainer.style.overflow=null;adjustFlashMargin(true)};const setupRememberClosed=(cookieId,noticeId)=>{const cookie=Cookie.get(cookieId)||"";Cookie.set(cookieId,`${cookie.replace(`${noticeId},`,"")+noticeId},`,{expires:COOKIE_EXPIRY})};const hasBeenClosedBefore=(cookieId,noticeId)=>(Cookie.get(cookieId)||"").includes(noticeId);const setupNoticeCollapse=bannerContainer=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}const listener=throttle(()=>{const scrollTop=window.scrollY;if(scrollTop>COLLAPSE_TRIGGER_DISTANCE){hideNotice(bannerContainer)}else if(bannerContainer.style.overflow){showNotice(bannerContainer)}},SCROLL_LISTENER_THROTTLE);document.addEventListener("scroll",listener);return()=>document.removeEventListener("scroll",listener)};const setupCloseBtn=(bannerContainer,cookieId,noticeId,collapseUnmountListeners)=>{const closeBtn=bannerContainer.querySelector("button");if(!closeBtn)return()=>{};const listener=()=>{if(cookieId&¬iceId)setupRememberClosed(cookieId,noticeId);hideNotice(bannerContainer);collapseUnmountListeners()};closeBtn.addEventListener("click",listener);return()=>document.removeEventListener("click",listener)};const resizeHandler=bannerContainer=>{const handler=throttle(()=>{hideOnMobile(bannerContainer)},RESIZE_LISTENER_THROTTLE);window.addEventListener("resize",handler);return()=>window.removeEventListener("resize",handler)};const Notice=({bannerContainer,cookieId,noticeId,options})=>{if(typeof window==="undefined")return()=>{};if(!bannerContainer){console.warn("A Notice component was initited but no notice container was found.");return()=>{}}if(hasBeenClosedBefore(cookieId,noticeId))return()=>{};hideOnMobile(bannerContainer);showNotice(bannerContainer);const opts={collapse:true,...options};const collapseUnmountListeners=opts.collapse?setupNoticeCollapse(bannerContainer):()=>{};const closeBtnUnmountListeners=setupCloseBtn(bannerContainer,cookieId,noticeId,collapseUnmountListeners);const resizeUnmountListener=resizeHandler(bannerContainer);return()=>{[closeBtnUnmountListeners,collapseUnmountListeners,resizeUnmountListener].forEach(unmount=>unmount())}};export default Notice;
|
|
2
2
|
//# sourceMappingURL=component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Notice/component.js"],"sourcesContent":["import Cookie from \"js-cookie\";\nimport throttle from \"lodash.throttle\";\n\nimport { queryId } from \"../dom-query\";\nimport { FLASH_DATA_ID } from \"../Flash\";\n\nconst COOKIE_EXPIRY = 90;\
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Notice/component.js"],"sourcesContent":["import Cookie from \"js-cookie\";\nimport throttle from \"lodash.throttle\";\n\nimport { queryId } from \"../dom-query\";\nimport { FLASH_DATA_ID } from \"../Flash\";\n\nconst COOKIE_EXPIRY = 90;\nexport const COLLAPSE_TRIGGER_DISTANCE = 5;\nconst SCROLL_LISTENER_THROTTLE = 100;\nconst RESIZE_LISTENER_THROTTLE = 100;\n\nconst isMdViewport = () => !window.matchMedia(`(min-width: 65rem)`).matches;\n\nconst adjustFlashMargin = (open) => {\n // HACK ALERT\n // Add margin to flashes when opening the notice.\n // Flashes are react components and this notice needs to work as a view-component and react component.\n // We could do this with redux but then we potentially update state on every scroll event, which\n // even with debounce will deplate our frame budget.\n\n const flash = queryId(FLASH_DATA_ID);\n\n if (flash) {\n flash.style.marginTop = open ? `4rem` : null;\n }\n};\n\nconst hideOnMobile = (bannerContainer) => {\n if (isMdViewport()) {\n bannerContainer.style.display = \"none\";\n } else {\n bannerContainer.style.display = null;\n }\n};\n\nconst hideNotice = (bannerContainer) => {\n bannerContainer.style.maxHeight = 0;\n bannerContainer.style.overflow = \"hidden\";\n\n adjustFlashMargin(false);\n};\n\nconst showNotice = (bannerContainer) => {\n bannerContainer.style.maxHeight = null;\n bannerContainer.style.overflow = null;\n\n adjustFlashMargin(true);\n};\n\nconst setupRememberClosed = (cookieId, noticeId) => {\n const cookie = Cookie.get(cookieId) || \"\";\n\n Cookie.set(cookieId, `${cookie.replace(`${noticeId},`, \"\") + noticeId},`, {\n expires: COOKIE_EXPIRY,\n });\n};\n\nconst hasBeenClosedBefore = (cookieId, noticeId) =>\n (Cookie.get(cookieId) || \"\").includes(noticeId);\n\nconst setupNoticeCollapse = (bannerContainer) => {\n const scrollTop = window.scrollY;\n\n if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n hideNotice(bannerContainer);\n }\n\n const listener = throttle(() => {\n const scrollTop = window.scrollY;\n\n if (scrollTop > COLLAPSE_TRIGGER_DISTANCE) {\n hideNotice(bannerContainer);\n } else if (bannerContainer.style.overflow) {\n showNotice(bannerContainer);\n }\n }, SCROLL_LISTENER_THROTTLE);\n\n document.addEventListener(\"scroll\", listener);\n\n return () => document.removeEventListener(\"scroll\", listener);\n};\n\nconst setupCloseBtn = (\n bannerContainer,\n cookieId,\n noticeId,\n collapseUnmountListeners,\n) => {\n const closeBtn = bannerContainer.querySelector(\"button\");\n\n if (!closeBtn) return () => {};\n\n const listener = () => {\n if (cookieId && noticeId) setupRememberClosed(cookieId, noticeId);\n\n hideNotice(bannerContainer);\n collapseUnmountListeners();\n };\n\n closeBtn.addEventListener(\"click\", listener);\n\n return () => document.removeEventListener(\"click\", listener);\n};\n\nconst resizeHandler = (bannerContainer) => {\n const handler = throttle(() => {\n hideOnMobile(bannerContainer);\n }, RESIZE_LISTENER_THROTTLE);\n\n window.addEventListener(\"resize\", handler);\n\n return () => window.removeEventListener(\"resize\", handler);\n};\n\nconst Notice = ({ bannerContainer, cookieId, noticeId, options }) => {\n if (typeof window === \"undefined\") return () => {};\n\n if (!bannerContainer) {\n console.warn(\n \"A Notice component was initited but no notice container was found.\",\n );\n return () => {};\n }\n\n if (hasBeenClosedBefore(cookieId, noticeId)) return () => {};\n\n hideOnMobile(bannerContainer);\n showNotice(bannerContainer);\n\n const opts = { collapse: true, ...options };\n\n const collapseUnmountListeners = opts.collapse\n ? setupNoticeCollapse(bannerContainer)\n : () => {};\n\n const closeBtnUnmountListeners = setupCloseBtn(\n bannerContainer,\n cookieId,\n noticeId,\n collapseUnmountListeners,\n );\n\n const resizeUnmountListener = resizeHandler(bannerContainer);\n\n return () => {\n [\n closeBtnUnmountListeners,\n collapseUnmountListeners,\n resizeUnmountListener,\n ].forEach((unmount) => unmount());\n };\n};\n\nexport default Notice;\n"],"names":["Cookie","throttle","queryId","FLASH_DATA_ID","COOKIE_EXPIRY","COLLAPSE_TRIGGER_DISTANCE","SCROLL_LISTENER_THROTTLE","RESIZE_LISTENER_THROTTLE","isMdViewport","window","matchMedia","matches","adjustFlashMargin","open","flash","style","marginTop","hideOnMobile","bannerContainer","display","hideNotice","maxHeight","overflow","showNotice","setupRememberClosed","cookieId","noticeId","cookie","get","set","replace","expires","hasBeenClosedBefore","includes","setupNoticeCollapse","scrollTop","scrollY","listener","document","addEventListener","removeEventListener","setupCloseBtn","collapseUnmountListeners","closeBtn","querySelector","resizeHandler","handler","Notice","options","console","warn","opts","collapse","closeBtnUnmountListeners","resizeUnmountListener","forEach","unmount"],"mappings":"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"}
|
package/core/Notice.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{
|
|
1
|
+
import React,{useEffect}from"react";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";const defaultTextColor="text-neutral-1300";const contentWrapperClasses="w-full pr-8 ui-text-p4 self-center";const ContentWrapper=({buttonLink,textColor=defaultTextColor,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:cn(contentWrapperClasses,textColor)},children):React.createElement("div",{className:cn(contentWrapperClasses,textColor)},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100",textColor=defaultTextColor})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}})},[]);return React.createElement("div",{className:cn("ui-announcement",bgColor,textColor),"data-id":"ui-notice",style:{maxHeight:0,overflow:"hidden"}},React.createElement("div",{className:"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start"},React.createElement(ContentWrapper,{buttonLink:buttonLink??"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-4"},title),React.createElement("span",{className:"pr-4"},bodyText),buttonLabel&&React.createElement("span",{className:"cursor-pointer whitespace-nowrap text-gui-blue-default-light"},buttonLabel)),closeBtn&&React.createElement("button",{type:"button",className:"ml-auto h-20 w-20 border-none bg-none self-baseline"},React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.25rem",color:textColor}))))};export default Notice;
|
|
2
2
|
//# sourceMappingURL=Notice.js.map
|
package/core/Notice.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, {
|
|
1
|
+
{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect } from \"react\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\n\ntype ContentWrapperProps = {\n buttonLink: string;\n children: ReactNode;\n textColor?: ColorClass | ColorThemeSet;\n};\n\n// TODO(jamiehenson):\n// This type is a bit messed up currently due to the NoticeScripts import being interpreted as NoticeProps.\n// Plan is to TS-ify the JS assets too, so this can be rectified then. The NoticeScripts-oriented props are\n// the ones after the line break.\nexport type NoticeProps = {\n buttonLink?: string;\n buttonLabel?: string;\n bodyText?: string;\n title?: string;\n closeBtn?: boolean;\n config?: {\n options: {\n collapse: boolean;\n };\n noticeId: string | number;\n cookieId: string;\n };\n bgColor?: string;\n textColor?: ColorClass | ColorThemeSet;\n\n bannerContainer?: Element | null;\n cookieId?: string;\n noticeId?: string;\n options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300\";\n\nconst contentWrapperClasses = \"w-full pr-8 ui-text-p4 self-center\";\n\nconst ContentWrapper = ({\n buttonLink,\n textColor = defaultTextColor,\n children,\n}: ContentWrapperProps) =>\n buttonLink ? (\n <a href={buttonLink} className={cn(contentWrapperClasses, textColor)}>\n {children}\n </a>\n ) : (\n <div className={cn(contentWrapperClasses, textColor)}>{children}</div>\n );\n\nconst Notice = ({\n buttonLink,\n buttonLabel,\n bodyText,\n title,\n config,\n closeBtn,\n bgColor = \"bg-orange-100\",\n textColor = defaultTextColor,\n}: NoticeProps) => {\n useEffect(() => {\n NoticeScripts({\n bannerContainer: document.querySelector('[data-id=\"ui-notice\"]'),\n cookieId: config?.cookieId,\n noticeId: config?.noticeId,\n options: {\n collapse: config?.options?.collapse || false,\n },\n });\n }, []);\n\n return (\n <div\n className={cn(\"ui-announcement\", bgColor, textColor)}\n data-id=\"ui-notice\"\n style={{ maxHeight: 0, overflow: \"hidden\" }}\n >\n <div className=\"ui-grid-px py-16 max-w-screen-xl mx-auto flex items-start\">\n <ContentWrapper buttonLink={buttonLink ?? \"#\"}>\n <strong className=\"font-bold whitespace-nowrap pr-4\">{title}</strong>\n <span className=\"pr-4\">{bodyText}</span>\n {buttonLabel && (\n <span className=\"cursor-pointer whitespace-nowrap text-gui-blue-default-light\">\n {buttonLabel}\n </span>\n )}\n </ContentWrapper>\n\n {closeBtn && (\n <button\n type=\"button\"\n className=\"ml-auto h-20 w-20 border-none bg-none self-baseline\"\n >\n <Icon\n name=\"icon-gui-x-mark-outline\"\n size=\"1.25rem\"\n color={textColor}\n />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","Icon","cn","NoticeScripts","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","data-id","style","maxHeight","overflow","strong","span","button","type","name","size","color"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,KAAQ,OAAQ,AAGpD,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,CAkClD,MAAMC,iBAAmB,oBAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,eAAiB,CAAC,CACtBC,UAAU,CACVC,UAAYJ,gBAAgB,CAC5BK,QAAQ,CACY,GACpBF,WACE,oBAACG,KAAEC,KAAMJ,WAAYK,UAAWV,GAAGG,sBAAuBG,YACvDC,UAGH,oBAACI,OAAID,UAAWV,GAAGG,sBAAuBG,YAAaC,UAG3D,MAAMK,OAAS,CAAC,CACdP,UAAU,CACVQ,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,eAAe,CACzBZ,UAAYJ,gBAAgB,CAChB,IACZJ,UAAU,KACRG,cAAc,CACZkB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUN,QAAQM,SAClBC,SAAUP,QAAQO,SAClBC,QAAS,CACPC,SAAUT,QAAQQ,SAASC,UAAY,KACzC,CACF,EACF,EAAG,EAAE,EAEL,OACE,oBAACd,OACCD,UAAWV,GAAG,kBAAmBkB,QAASZ,WAC1CoB,UAAQ,YACRC,MAAO,CAAEC,UAAW,EAAGC,SAAU,QAAS,GAE1C,oBAAClB,OAAID,UAAU,6DACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAACyB,UAAOpB,UAAU,oCAAoCK,OACtD,oBAACgB,QAAKrB,UAAU,QAAQI,UACvBD,aACC,oBAACkB,QAAKrB,UAAU,gEACbG,cAKNI,UACC,oBAACe,UACCC,KAAK,SACLvB,UAAU,uDAEV,oBAACX,MACCmC,KAAK,0BACLC,KAAK,UACLC,MAAO9B,cAOrB,CAEA,gBAAeM,MAAO"}
|
package/index.d.ts
CHANGED
|
@@ -545,7 +545,6 @@ export const HeaderLinks: React.FC<Pick<HeaderProps, "sessionState" | "headerLin
|
|
|
545
545
|
|
|
546
546
|
declare module '@ably/ui/core/Header' {
|
|
547
547
|
import React, { ReactNode } from "react";
|
|
548
|
-
import { NoticeProps } from "@ably/ui/core/Notice";
|
|
549
548
|
export type ThemedScrollpoint = {
|
|
550
549
|
id: string;
|
|
551
550
|
className: string;
|
|
@@ -633,14 +632,6 @@ export type HeaderProps = {
|
|
|
633
632
|
* - "mobile": Visible only on mobile devices.
|
|
634
633
|
*/
|
|
635
634
|
searchButtonVisibility?: "all" | "desktop" | "mobile";
|
|
636
|
-
/**
|
|
637
|
-
Props for the notice component to be displayed in the header.
|
|
638
|
-
*/
|
|
639
|
-
notice: NoticeProps;
|
|
640
|
-
/**
|
|
641
|
-
Reference to the notice DOM element for handling visibility and overflow.
|
|
642
|
-
*/
|
|
643
|
-
noticeRef: React.RefObject<HTMLDivElement>;
|
|
644
635
|
};
|
|
645
636
|
const Header: React.FC<HeaderProps>;
|
|
646
637
|
export default Header;
|
|
@@ -887,11 +878,11 @@ export default _default;
|
|
|
887
878
|
|
|
888
879
|
declare module '@ably/ui/core/Meganav/Meganav' {
|
|
889
880
|
import { HeaderSessionState } from ".@ably/ui/core/Header";
|
|
890
|
-
import {
|
|
881
|
+
import { MeganavNoticeProps } from ".@ably/ui/core/LegacyMeganav";
|
|
891
882
|
export type MeganavProps = {
|
|
892
883
|
sessionState: HeaderSessionState;
|
|
893
884
|
searchDataId: string;
|
|
894
|
-
notice
|
|
885
|
+
notice?: MeganavNoticeProps;
|
|
895
886
|
};
|
|
896
887
|
const Meganav: ({ sessionState, searchDataId, notice }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
|
|
897
888
|
export default Meganav;
|
|
@@ -1137,6 +1128,7 @@ export default MeganavSearchSuggestions;
|
|
|
1137
1128
|
}
|
|
1138
1129
|
|
|
1139
1130
|
declare module '@ably/ui/core/Notice/component' {
|
|
1131
|
+
export const COLLAPSE_TRIGGER_DISTANCE: 5;
|
|
1140
1132
|
export default Notice;
|
|
1141
1133
|
function Notice({ bannerContainer, cookieId, noticeId, options }: {
|
|
1142
1134
|
bannerContainer: any;
|
|
@@ -1148,7 +1140,6 @@ function Notice({ bannerContainer, cookieId, noticeId, options }: {
|
|
|
1148
1140
|
}
|
|
1149
1141
|
|
|
1150
1142
|
declare module '@ably/ui/core/Notice' {
|
|
1151
|
-
import React from "react";
|
|
1152
1143
|
import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
|
|
1153
1144
|
export type NoticeProps = {
|
|
1154
1145
|
buttonLink?: string;
|
|
@@ -1172,7 +1163,7 @@ export type NoticeProps = {
|
|
|
1172
1163
|
collapse: boolean;
|
|
1173
1164
|
};
|
|
1174
1165
|
};
|
|
1175
|
-
const Notice:
|
|
1166
|
+
const Notice: ({ buttonLink, buttonLabel, bodyText, title, config, closeBtn, bgColor, textColor, }: NoticeProps) => import("react/jsx-runtime").JSX.Element;
|
|
1176
1167
|
export default Notice;
|
|
1177
1168
|
//# sourceMappingURL=Notice.d.ts.map
|
|
1178
1169
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "15.6.0-dev.
|
|
3
|
+
"version": "15.6.0-dev.eb9980fc",
|
|
4
4
|
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|