@ably/ui 15.6.0-dev.bdcefb0 → 15.6.0-dev.dac9cf0
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/Notice.js +1 -1
- package/core/Notice.js.map +1 -1
- package/index.d.ts +15 -2
- package/package.json +9 -11
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=({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 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}}}};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
|
|
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",notice,noticeRef})=>{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(noticeRef?.current&&getComputedStyle(noticeRef?.current).overflow==="hidden"){setBannerVisible(false)}},[noticeRef]);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>20){setBannerVisible(false)}else{if(!noticeRef?.current||noticeRef?.current?.style?.overflow!=="hidden")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-all duration-300":!notice&&!bannerVisible,"md:top-[54px] transition-all duration-300":notice&&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\";\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 /**\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 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 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\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 };\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 top-0 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 style={{ height: HEADER_HEIGHT }}\n >\n <div className=\"flex items-center h-full\">\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","searchBar","searchButton","logoHref","headerLinks","nav","mobileNav","sessionState","themedScrollpoints","searchButtonVisibility","showMenu","setShowMenu","fadingOut","setFadingOut","scrollpointClasses","setScrollpointClasses","menuRef","closeMenu","setTimeout","handleResize","window","innerWidth","addEventListener","removeEventListener","document","body","classList","add","remove","handleScroll","scrollpoint","element","getElementById","id","rect","getBoundingClientRect","top","bottom","className","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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"}
|
|
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":"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"}
|
package/core/Meganav/Meganav.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React,{useRef}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}));const noticeRef=useRef(null);return React.createElement("div",{className:"fixed inset-0 w-full z-50"},notice&&React.createElement(Notice,{...notice,config:notice.config,ref:noticeRef}),React.createElement(Header,{headerClassName:"max-w-screen-xl mx-auto ui-grid-px",notice:notice,noticeRef:noticeRef,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 from \"react\";\nimport Header, { HeaderSessionState } from \"../Header\";\nimport Icon from \"../Icon\";\nimport Flyout from \"../Flyout\";\nimport { menuItemsForHeader } from \"./data\";\nimport { MeganavMobile } from \"./MeganavMobile\";\n\nexport type MeganavProps = {\n sessionState: HeaderSessionState;\n searchDataId: string;\n};\n\nconst Meganav = ({ sessionState, searchDataId }: MeganavProps) => {\n const mobileNavItems = menuItemsForHeader\n .filter((item) => !item.isHiddenMobile)\n .map(({ name, link, content }) => ({ name, link, content }));\n\n return (\n <Header\n
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/Meganav.tsx"],"sourcesContent":["import React, { useRef } 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, { NoticeProps } from \"../Notice\";\n\nexport type MeganavProps = {\n sessionState: HeaderSessionState;\n searchDataId: string;\n notice: NoticeProps;\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 const noticeRef = useRef<HTMLDivElement>(null);\n\n return (\n <div className=\"fixed inset-0 w-full z-50\">\n {notice && <Notice {...notice} config={notice.config} ref={noticeRef} />}\n <Header\n headerClassName=\"max-w-screen-xl mx-auto ui-grid-px\"\n notice={notice}\n noticeRef={noticeRef}\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","useRef","Header","Icon","Flyout","menuItemsForHeader","MeganavMobile","Notice","Meganav","sessionState","searchDataId","notice","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","noticeRef","div","className","config","ref","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,OAASC,MAAM,KAAQ,OAAQ,AACtC,QAAOC,WAAoC,WAAY,AACvD,QAAOC,SAAU,SAAU,AAC3B,QAAOC,WAAY,WAAY,AAC/B,QAASC,kBAAkB,KAAQ,QAAS,AAC5C,QAASC,aAAa,KAAQ,iBAAkB,AAChD,QAAOC,WAA6B,WAAY,CAQhD,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,GAC3D,MAAMC,UAAYnB,OAAuB,MAEzC,OACE,oBAACoB,OAAIC,UAAU,6BACZX,QAAU,oBAACJ,QAAQ,GAAGI,MAAM,CAAEY,OAAQZ,OAAOY,MAAM,CAAEC,IAAKJ,YAC3D,oBAAClB,QACCuB,gBAAgB,qCAChBd,OAAQA,OACRS,UAAWA,UACXM,IACE,oBAACtB,QACCuB,UAAWtB,mBACXiB,UAAU,oBACVM,gBAAgB,oBAChBC,kBAAkB,qIAClBC,aAAc,OAGlBC,UAAW,oBAACzB,eAAcM,eAAgBA,iBAC1CoB,aACE,oBAACC,UACCC,KAAK,SACLC,eAAa,SACbC,UAAS1B,aACTY,UAAU,oDACVe,gBAAc,QACdC,gBAAc,eACdC,aAAW,UAEX,oBAACpC,MACCc,KAAK,oCACLuB,MAAM,oBACNC,KAAK,UAIXC,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,MAAO,EAAE,CAClDnC,aAAcA,eAItB,CAEA,gBAAeD,OAAQ"}
|
package/core/Notice.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
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;
|
|
1
|
+
import React,{forwardRef,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=forwardRef(({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100",textColor=defaultTextColor},ref)=>{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",{ref:ref,className:cn("ui-announcement",bgColor,textColor,"z-40 relative w-full"),"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, { ReactNode, useEffect } from \"react\";\
|
|
1
|
+
{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { forwardRef, ReactNode, useEffect } from \"react\";\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 = forwardRef<HTMLDivElement, NoticeProps>(\n (\n {\n buttonLink,\n buttonLabel,\n bodyText,\n title,\n config,\n closeBtn,\n bgColor = \"bg-orange-100\",\n textColor = defaultTextColor,\n },\n ref,\n ) => {\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 ref={ref}\n className={cn(\n \"ui-announcement\",\n bgColor,\n textColor,\n \"z-40 relative w-full\",\n )}\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\">\n {title}\n </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);\n\nexport default Notice;\n"],"names":["React","forwardRef","useEffect","Icon","cn","NoticeScripts","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","ref","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","data-id","style","maxHeight","overflow","strong","span","button","type","name","size","color"],"mappings":"AAAA,OAAOA,OAASC,UAAU,CAAaC,SAAS,KAAQ,OAAQ,AAEhE,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,OAASf,WACb,CACE,CACEQ,UAAU,CACVQ,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,eAAe,CACzBZ,UAAYJ,gBAAgB,CAC7B,CACDiB,OAEArB,UAAU,KACRG,cAAc,CACZmB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUP,QAAQO,SAClBC,SAAUR,QAAQQ,SAClBC,QAAS,CACPC,SAAUV,QAAQS,SAASC,UAAY,KACzC,CACF,EACF,EAAG,EAAE,EAEL,OACE,oBAACf,OACCQ,IAAKA,IACLT,UAAWV,GACT,kBACAkB,QACAZ,UACA,wBAEFqB,UAAQ,YACRC,MAAO,CAAEC,UAAW,EAAGC,SAAU,QAAS,GAE1C,oBAACnB,OAAID,UAAU,6DACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAAC0B,UAAOrB,UAAU,oCACfK,OAEH,oBAACiB,QAAKtB,UAAU,QAAQI,UACvBD,aACC,oBAACmB,QAAKtB,UAAU,gEACbG,cAKNI,UACC,oBAACgB,UACCC,KAAK,SACLxB,UAAU,uDAEV,oBAACX,MACCoC,KAAK,0BACLC,KAAK,UACLC,MAAO/B,cAOrB,EAGF,gBAAeM,MAAO"}
|
package/index.d.ts
CHANGED
|
@@ -545,6 +545,7 @@ 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";
|
|
548
549
|
export type ThemedScrollpoint = {
|
|
549
550
|
id: string;
|
|
550
551
|
className: string;
|
|
@@ -579,6 +580,7 @@ export type HeaderSessionState = {
|
|
|
579
580
|
* Props for the Header component.
|
|
580
581
|
*/
|
|
581
582
|
export type HeaderProps = {
|
|
583
|
+
headerClassName?: string;
|
|
582
584
|
/**
|
|
583
585
|
* Optional search bar element.
|
|
584
586
|
*/
|
|
@@ -631,6 +633,14 @@ export type HeaderProps = {
|
|
|
631
633
|
* - "mobile": Visible only on mobile devices.
|
|
632
634
|
*/
|
|
633
635
|
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>;
|
|
634
644
|
};
|
|
635
645
|
const Header: React.FC<HeaderProps>;
|
|
636
646
|
export default Header;
|
|
@@ -877,11 +887,13 @@ export default _default;
|
|
|
877
887
|
|
|
878
888
|
declare module '@ably/ui/core/Meganav/Meganav' {
|
|
879
889
|
import { HeaderSessionState } from ".@ably/ui/core/Header";
|
|
890
|
+
import { NoticeProps } from ".@ably/ui/core/Notice";
|
|
880
891
|
export type MeganavProps = {
|
|
881
892
|
sessionState: HeaderSessionState;
|
|
882
893
|
searchDataId: string;
|
|
894
|
+
notice: NoticeProps;
|
|
883
895
|
};
|
|
884
|
-
const Meganav: ({ sessionState, searchDataId }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
|
|
896
|
+
const Meganav: ({ sessionState, searchDataId, notice }: MeganavProps) => import("react/jsx-runtime").JSX.Element;
|
|
885
897
|
export default Meganav;
|
|
886
898
|
//# sourceMappingURL=Meganav.d.ts.map
|
|
887
899
|
}
|
|
@@ -1136,6 +1148,7 @@ function Notice({ bannerContainer, cookieId, noticeId, options }: {
|
|
|
1136
1148
|
}
|
|
1137
1149
|
|
|
1138
1150
|
declare module '@ably/ui/core/Notice' {
|
|
1151
|
+
import React from "react";
|
|
1139
1152
|
import { ColorClass, ColorThemeSet } from "@ably/ui/core/styles/colors/types";
|
|
1140
1153
|
export type NoticeProps = {
|
|
1141
1154
|
buttonLink?: string;
|
|
@@ -1159,7 +1172,7 @@ export type NoticeProps = {
|
|
|
1159
1172
|
collapse: boolean;
|
|
1160
1173
|
};
|
|
1161
1174
|
};
|
|
1162
|
-
const Notice:
|
|
1175
|
+
const Notice: React.ForwardRefExoticComponent<NoticeProps & React.RefAttributes<HTMLDivElement>>;
|
|
1163
1176
|
export default Notice;
|
|
1164
1177
|
//# sourceMappingURL=Notice.d.ts.map
|
|
1165
1178
|
}
|
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.dac9cf0",
|
|
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",
|
|
@@ -19,19 +19,17 @@
|
|
|
19
19
|
"workerDirectory": "./public"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@storybook/addon-
|
|
23
|
-
"@storybook/
|
|
24
|
-
"@storybook/
|
|
25
|
-
"@storybook/
|
|
26
|
-
"@storybook/blocks": "^8.6.0",
|
|
27
|
-
"@storybook/react-vite": "^8.6.0",
|
|
28
|
-
"@storybook/test": "^8.6.0",
|
|
29
|
-
"@storybook/test-runner": "^0.21.3",
|
|
22
|
+
"@storybook/addon-essentials": "^8.6.4",
|
|
23
|
+
"@storybook/react-vite": "^8.6.4",
|
|
24
|
+
"@storybook/test": "^8.6.4",
|
|
25
|
+
"@storybook/test-runner": "^0.22.0",
|
|
30
26
|
"@swc/cli": "^0.6.0",
|
|
31
27
|
"@swc/core": "^1.4.11",
|
|
32
28
|
"@tailwindcss/container-queries": "^0.1.1",
|
|
33
29
|
"@types/js-cookie": "^3.0.6",
|
|
34
30
|
"@types/lodash.throttle": "^4.1.9",
|
|
31
|
+
"@types/node": "^20",
|
|
32
|
+
"@types/react": "^18.3.1",
|
|
35
33
|
"@types/react-dom": "^18.3.0",
|
|
36
34
|
"@types/svg-sprite": "^0.0.39",
|
|
37
35
|
"@typescript-eslint/eslint-plugin": "^8.25.0",
|
|
@@ -42,7 +40,7 @@
|
|
|
42
40
|
"eslint": "^8.57.0",
|
|
43
41
|
"eslint-config-prettier": "^10.0.1",
|
|
44
42
|
"eslint-plugin-react": "^7.34.3",
|
|
45
|
-
"eslint-plugin-storybook": "^0.11.
|
|
43
|
+
"eslint-plugin-storybook": "^0.11.4",
|
|
46
44
|
"heroicons": "^2.2.0",
|
|
47
45
|
"http-server": "14.1.1",
|
|
48
46
|
"mixpanel-browser": "^2.60.0",
|
|
@@ -52,7 +50,7 @@
|
|
|
52
50
|
"posthog-js": "^1.217.4",
|
|
53
51
|
"prettier": "^3.2.5",
|
|
54
52
|
"react-syntax-highlighter": "^15.6.1",
|
|
55
|
-
"storybook": "^8.6.
|
|
53
|
+
"storybook": "^8.6.4",
|
|
56
54
|
"storybook-dark-mode": "^4.0.2",
|
|
57
55
|
"svg-sprite": "^2.0.4",
|
|
58
56
|
"tailwindcss": "^3.3.6",
|