@ably/ui - npm Package Compare versions

Comparing version 14.3.4 to 14.4.0-dev.0545d43

core/Flash.js

@@ -1,1 +0,1 @@
-import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning"};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white"};return /*#__PURE__*/React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},/*#__PURE__*/React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&/*#__PURE__*/React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),/*#__PURE__*/React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return /*#__PURE__*/React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>/*#__PURE__*/React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return /*#__PURE__*/React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;
+import React,{useEffect,useState,useRef}from"react";import DOMPurify from"dompurify";import{getRemoteDataStore}from"./remote-data-store.js";import ConnectStateWrapper from"./ConnectStateWrapper";import Icon from"./Icon";const REDUCER_KEY="flashes";const FLASH_DATA_ID="ui-flashes";const initialState={items:[]};const reducerFlashes={[REDUCER_KEY]:(state=initialState,action)=>{switch(action.type){case"flash/push":{const flashes=Array.isArray(action.payload)?action.payload:[action.payload];return{items:[...state.items,...flashes]}}default:return state}}};const selectFlashes=store=>store.getState()[REDUCER_KEY];const FLASH_BG_COLOR={error:"bg-gui-error",success:"bg-zingy-green",notice:"bg-electric-cyan",info:"bg-electric-cyan",alert:"bg-active-orange"};const FLASH_TEXT_COLOR={error:"text-white",success:"text-cool-black",notice:"text-cool-black",info:"text-cool-black",alert:"text-white"};const AUTO_HIDE=["success","info","notice"];const AUTO_HIDE_TIME=8e3;const useAutoHide=(type,closeFlash)=>{const timeoutId=useRef(null);useEffect(()=>{if(AUTO_HIDE.includes(type)){timeoutId.current=setTimeout(()=>{closeFlash()},AUTO_HIDE_TIME)}return()=>{if(timeoutId.current){clearTimeout(timeoutId.current)}}},[])};const Flash=({id,type,content,removeFlash})=>{const ref=useRef(null);const[closed,setClosed]=useState(false);const[flashHeight,setFlashHeight]=useState(0);const[triggerEntryAnimation,setTriggerEntryAnimation]=useState(false);const closeFlash=()=>{if(ref.current){setFlashHeight(ref.current.getBoundingClientRect().height)}setClosed(true);setTimeout(()=>{id&&removeFlash(id)},100)};useEffect(()=>setTriggerEntryAnimation(true),[]);useAutoHide(type,closeFlash);const animateEntry=triggerEntryAnimation&&!closed;let style;if(flashHeight&&!closed){style={height:`${flashHeight}px`}}else if(closed){style={height:0,marginTop:0,zIndex:-1}}else{style={}}const safeContent=DOMPurify.sanitize(content,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const withIcons={notice:"icon-gui-ably-badge",success:"icon-gui-tick",error:"icon-gui-warning",alert:"icon-gui-warning",info:""};const iconColor={notice:"text-cool-black",success:"text-cool-black",error:"text-white",alert:"text-white",info:""};return /*#__PURE__*/React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},/*#__PURE__*/React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&/*#__PURE__*/React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),/*#__PURE__*/React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-close",color:iconColor[type],size:"1.5rem",additionalCSS:"transition-colors"}))))};const Flashes=({flashes})=>{const[flashesWithIds,setFlashesWithIds]=useState([]);const removeFlash=flashId=>setFlashesWithIds(items=>items.filter(item=>item.id!==flashId));useEffect(()=>{setFlashesWithIds(state=>{return[...state,...(flashes?.items??[]).map(flash=>({...flash,id:Math.random().toString(36).slice(2),removed:false}))]})},[flashes]);return /*#__PURE__*/React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>/*#__PURE__*/React.createElement(Flash,{key:flash.id,...flash,removeFlash:removeFlash})))};const BackendFlashes=({flashes})=>{useEffect(()=>{const transformedFlashes=flashes.map(flash=>{const[type,content]=flash;return{type,content}})||[];if(transformedFlashes.length>0){const store=getRemoteDataStore();store.dispatch({type:"flash/push",payload:transformedFlashes})}},[]);const WrappedFlashes=ConnectStateWrapper(Flashes,{flashes:selectFlashes});return /*#__PURE__*/React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;

core/Meganav/component.js

@@ -1,1 +0,1 @@
-import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";import MeganavControl from"../MeganavControl/component.js";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.js";import MobilePanelOpenClick from"../MeganavControlMobilePanelOpen/component.js";import MobilePanelCloseClick from"../MeganavControlMobilePanelClose/component.js";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.js";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.js";const windowOnBlur=closeAll=>{window.onblur=()=>closeAll();return{teardown:()=>window.onblur=null}};const documentClick=closeAll=>{const meganav=queryId("meganav");const clickHandler=e=>{if(meganav.contains(e.target))return;closeAll()};document.addEventListener("click",clickHandler);return{teardown:()=>document.removeEventListener("click",clickHandler)}};const documentScroll=themeName=>{if(themeName!=="transparentToWhite")return{teardown:()=>{}};const meganav=queryId("meganav");const navItems=queryIdAll("meganav-link");const controlMobileDropdownMenu=queryId("meganav-control-mobile-dropdown-menu");const controlMobileDropdownClose=queryId("meganav-control-mobile-dropdown-close");const controls=queryIdAll("meganav-control");const signUpBtn=queryId("meganav-sign-up-btn");const invertTextCollection=[...Array.from(controls),...Array.from(navItems),queryId("meganav-logo")];const invertMobleDropdownColor=invert=>{const whiteToBlack=["ui-icon-white","ui-icon-cool-black"];const blackToWhite=[...whiteToBlack].reverse();if(invert){controlMobileDropdownMenu?.classList.replace(...whiteToBlack);controlMobileDropdownClose?.classList.replace(...whiteToBlack)}else{controlMobileDropdownMenu?.classList.replace(...blackToWhite);controlMobileDropdownClose?.classList.replace(...blackToWhite)}};const inverSignupBtnColors=invert=>{if(invert){signUpBtn?.classList.replace("bg-white","bg-cool-black");signUpBtn?.classList.replace("text-cool-black","text-white")}else{signUpBtn?.classList.replace("bg-cool-black","bg-white");signUpBtn?.classList.replace("text-white","text-cool-black")}};const scrollHandler=throttle(()=>{if(window.scrollY>5){meganav.classList.replace("bg-transparent","bg-white");inverSignupBtnColors(true);invertMobleDropdownColor(true);invertTextCollection.forEach(n=>n.classList.replace("text-white","text-cool-black"))}else{meganav.classList.replace("bg-white","bg-transparent");inverSignupBtnColors(false);invertMobleDropdownColor(false);invertTextCollection.forEach(n=>n.classList.replace("text-cool-black","text-white"))}},150);document.addEventListener("scroll",scrollHandler);return{teardown:()=>document.removeEventListener("scroll",scrollHandler)}};export default function Meganav({themeName,addSearchApiKey}={themeName:null}){const controls=MeganavControl();const panelOpenControls=MobilePanelOpenClick();const panelCloseControls=MobilePanelCloseClick();const search=MeganavSearchAutocomplete(addSearchApiKey);const searchSuggestions=MeganavSearchSuggestions();const mobileDropdownControl=MeganavControlMobileDropdown({clearPanels:()=>[...panelOpenControls,...panelCloseControls].forEach(i=>i.clear())});const closeAll=()=>[mobileDropdownControl,searchSuggestions,...panelOpenControls,...panelCloseControls,...controls,...search].forEach(i=>i.clear());const teardowns=[documentScroll(themeName),documentClick(closeAll),windowOnBlur(closeAll),mobileDropdownControl,searchSuggestions,...controls,...panelOpenControls,...panelCloseControls,...search].map(i=>i.teardown);return()=>teardowns.forEach(teardown=>teardown())}
+import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";import MeganavControl from"../MeganavControl/component.js";import MeganavControlMobileDropdown from"../MeganavControlMobileDropdown/component.js";import MobilePanelOpenClick from"../MeganavControlMobilePanelOpen/component.js";import MobilePanelCloseClick from"../MeganavControlMobilePanelClose/component.js";import MeganavSearchAutocomplete from"../MeganavSearchAutocomplete/component.js";import MeganavSearchSuggestions from"../MeganavSearchSuggestions/component.js";const windowOnBlur=closeAll=>{window.onblur=()=>closeAll();return{teardown:()=>window.onblur=null}};const documentClick=closeAll=>{const meganav=queryId("meganav");const clickHandler=e=>{if(meganav.contains(e.target))return;closeAll()};document.addEventListener("click",clickHandler);return{teardown:()=>document.removeEventListener("click",clickHandler)}};const documentScroll=themeName=>{if(themeName!=="transparentToWhite")return{teardown:()=>{}};const meganav=queryId("meganav");const navItems=queryIdAll("meganav-link");const controlMobileDropdownMenu=queryId("meganav-control-mobile-dropdown-menu");const controlMobileDropdownClose=queryId("meganav-control-mobile-dropdown-close");const controls=queryIdAll("meganav-control");const signUpBtn=queryId("meganav-sign-up-btn");const invertTextCollection=[...Array.from(controls),...Array.from(navItems),queryId("meganav-logo")];const invertMobleDropdownColor=invert=>{const whiteToBlack=["ui-icon-white","ui-icon-cool-black"];const blackToWhite=[...whiteToBlack].reverse();if(invert){controlMobileDropdownMenu?.classList.replace(...whiteToBlack);controlMobileDropdownClose?.classList.replace(...whiteToBlack)}else{controlMobileDropdownMenu?.classList.replace(...blackToWhite);controlMobileDropdownClose?.classList.replace(...blackToWhite)}};const inverSignupBtnColors=invert=>{if(invert){signUpBtn?.classList.replace("bg-white","bg-cool-black");signUpBtn?.classList.replace("text-cool-black","text-white")}else{signUpBtn?.classList.replace("bg-cool-black","bg-white");signUpBtn?.classList.replace("text-white","text-cool-black")}};const scrollHandler=throttle(()=>{if(window.scrollY>5){meganav.classList.replace("bg-transparent","bg-white");inverSignupBtnColors(true);invertMobleDropdownColor(true);invertTextCollection.forEach(n=>n.classList.replace("text-white","text-cool-black"))}else{meganav.classList.replace("bg-white","bg-transparent");inverSignupBtnColors(false);invertMobleDropdownColor(false);invertTextCollection.forEach(n=>n.classList.replace("text-cool-black","text-white"))}},150);document.addEventListener("scroll",scrollHandler);return{teardown:()=>document.removeEventListener("scroll",scrollHandler)}};export default function Meganav({themeName,addSearchApiKey}){const controls=MeganavControl();const panelOpenControls=MobilePanelOpenClick();const panelCloseControls=MobilePanelCloseClick();const search=MeganavSearchAutocomplete(addSearchApiKey);const searchSuggestions=MeganavSearchSuggestions();const mobileDropdownControl=MeganavControlMobileDropdown({clearPanels:()=>[...panelOpenControls,...panelCloseControls].forEach(i=>i.clear())});const closeAll=()=>[mobileDropdownControl,searchSuggestions,...panelOpenControls,...panelCloseControls,...controls,...search].forEach(i=>i.clear());const teardowns=[documentScroll(themeName??null),documentClick(closeAll),windowOnBlur(closeAll),mobileDropdownControl,searchSuggestions,...controls,...panelOpenControls,...panelCloseControls,...search].map(i=>i.teardown);return()=>teardowns.forEach(teardown=>teardown())}

core/MeganavContentCompany.js

@@ -1,1 +0,1 @@
-import React from"react";import MeganavBlogPostsList from"./MeganavBlogPostsList";import ConnectStateWrapper from"./ConnectStateWrapper";import{selectRecentBlogPosts}from"./remote-blogs-posts.js";import Icon from"./Icon";const MeganavContentCompany=({paths,absUrl})=>{const BlogPostsList=ConnectStateWrapper(MeganavBlogPostsList,{recentBlogPosts:selectRecentBlogPosts});return /*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-company-panel-list-why-companies"},"Why companies choose Ably"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-company-panel-list-why-companies"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/customers"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-customers-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Customers"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Ably supports customers across multiple industries.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/case-studies"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-case-studies-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Case studies"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover how customers are benefiting from Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/compare"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-compare-tech-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Compare our tech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Choose the right realtime service.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/aws"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement("img",{src:paths.awsLogo,alt:"AWS logo"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Partners"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Ably collaborates and integrates with AWS.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-company-panel-list-why-companies"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/resources"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-resources-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Resources"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn more about realtime with our handy resources.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/about"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-about-ably-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"About Ably"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably’s mission.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/careers"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-careers-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Careers"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our open roles and core Ably values.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/events"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-events-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Events"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Join Ably at upcoming events.")))))),/*#__PURE__*/React.createElement(BlogPostsList,{absUrl:absUrl})),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}))};export default MeganavContentCompany;
+import React from"react";import MeganavBlogPostsList from"./MeganavBlogPostsList";import ConnectStateWrapper from"./ConnectStateWrapper";import{selectRecentBlogPosts}from"./remote-blogs-posts.js";import Icon from"./Icon";const MeganavContentCompany=({paths,absUrl})=>{const BlogPostsList=ConnectStateWrapper(MeganavBlogPostsList,{recentBlogPosts:selectRecentBlogPosts});return /*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-company-panel-list-why-companies"},"Why companies choose Ably"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-company-panel-list-why-companies"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/customers"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-customers-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Customers"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Ably supports customers across multiple industries.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/case-studies"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-case-studies-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Case studies"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover how customers are benefiting from Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/compare"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-compare-tech-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Compare our tech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Choose the right realtime service.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/aws"),className:"ui-meganav-media-with-image group"},paths&&/*#__PURE__*/React.createElement("img",{src:paths.awsLogo,alt:"AWS logo"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Partners"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Ably collaborates and integrates with AWS.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-company-panel-list-why-companies"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/resources"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-resources-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Resources"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn more about realtime with our handy resources.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/about"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-about-ably-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"About Ably"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably’s mission.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/careers"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-careers-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Careers"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our open roles and core Ably values.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/events"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-events-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Events"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Join Ably at upcoming events.")))))),/*#__PURE__*/React.createElement(BlogPostsList,{absUrl:absUrl})),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}))};export default MeganavContentCompany;

core/MeganavContentProducts.js

@@ -1,1 +0,1 @@
-import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavContentProducts=({paths,absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},/*#__PURE__*/React.createElement("div",{className:"flex mb-20"},/*#__PURE__*/React.createElement("img",{src:paths.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline ml-24"},"The Ably Platform")),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold mb-24",style:{maxWidth:"330px"}},"Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code."),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/platform"),textSize:"text-p2"},"Explore how it works")),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-examples"},"Products"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-examples"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub Channels"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Build infinitely scalable realtime applications."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/spaces"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Spaces (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Create multi-user collaborative environments."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/livesync"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"LiveSync (Alpha)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Seamlessly sync database changes with frontend clients at scale."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale."))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-our-technology"},"Technology"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-our-technology"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#performance"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Predictable performance"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"A low-latency and high-throughput global network."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#integrity"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Guaranteed ordering & delivery"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Data is delivered - in order - even after disconnections."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#reliability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Fault tolerant infrastructure"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Redundancy is built in at global and regional levels."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#availability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"High scalability & availability"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Built for scale with legitimate 99.999% uptime SLAs."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/network"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Global edge network"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"An edge network of 15 core routing datacenters and 205+ PoPs.")))),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/four-pillars-of-dependability"),textSize:"text-p3"},"Explore Four Pillars of Dependability"))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentProducts;
+import React from"react";import FeaturedLink from"./FeaturedLink";const MeganavContentProducts=({paths,absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},/*#__PURE__*/React.createElement("div",{className:"flex mb-20"},paths&&/*#__PURE__*/React.createElement("img",{src:paths?.ablyStack,alt:"Ably homepage"}),/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline ml-24"},"The Ably Platform")),/*#__PURE__*/React.createElement("p",{className:"ui-text-p2 font-bold mb-24",style:{maxWidth:"330px"}},"Easily power any realtime experience in your application. No complex infrastructure to manage or provision. Just a simple API that handles everything realtime, and lets you focus on your code."),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/platform"),textSize:"text-p2"},"Explore how it works")),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-examples"},"Products"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-examples"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pubsub"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Pub/Sub Channels"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Build infinitely scalable realtime applications."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/spaces"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Spaces (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Create multi-user collaborative environments."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/livesync"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"LiveSync (Alpha)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Seamlessly sync database changes with frontend clients at scale."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"group ui-meganav-media"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale."))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-products-panel-list-our-technology"},"Technology"),/*#__PURE__*/React.createElement("ul",{className:"mb-16","aria-labelledby":"meganav-products-panel-list-our-technology"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#performance"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Predictable performance"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"A low-latency and high-throughput global network."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#integrity"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Guaranteed ordering & delivery"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Data is delivered - in order - even after disconnections."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#reliability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Fault tolerant infrastructure"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Redundancy is built in at global and regional levels."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/four-pillars-of-dependability#availability"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"High scalability & availability"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Built for scale with legitimate 99.999% uptime SLAs."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/network"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Global edge network"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"An edge network of 15 core routing datacenters and 205+ PoPs.")))),/*#__PURE__*/React.createElement(FeaturedLink,{url:absUrl("/four-pillars-of-dependability"),textSize:"text-p3"},"Explore Four Pillars of Dependability"))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentProducts;

package.json

 {
   "name": "@ably/ui",
-  "version": "14.3.4",
+  "version": "14.4.0-dev.0545d43",
   "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.",
@@ -14,4 +14,6 @@ "repository": {
     "tailwind.config.js",
-    "tailwind.extend.js"
+    "tailwind.extend.js",
+    "types"
   ],
+  "types": "types",
   "devDependencies": {
@@ -23,8 +25,11 @@ "@storybook/addon-a11y": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
+    "@storybook/react": "^8.2.9",
     "@storybook/react-vite": "^8.2.9",
-    "@storybook/react": "^8.2.9",
+    "@storybook/test": "^8.2.9",
     "@storybook/test-runner": "^0.19.1",
-    "@storybook/test": "^8.2.9",
     "@swc/cli": "^0.4.0",
     "@swc/core": "^1.4.11",
+    "@types/dompurify": "^3.0.5",
+    "@types/js-cookie": "^3.0.6",
+    "@types/lodash.throttle": "^4.1.9",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
@@ -34,8 +39,9 @@ "@typescript-eslint/parser": "^6.21.0",
     "autoprefixer": "^10.0.2",
+    "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint": "^8.57.0",
+    "http-server": "14.1.1",
+    "msw": "2.3.5",
     "msw-storybook-addon": "^2.0.2",
-    "msw": "2.3.5",
     "prettier": "^3.2.5",
@@ -50,5 +56,5 @@ "storybook": "^8.2.9",
     "build:prebuild": "rm -rf core reset",
-    "build:swc": "swc src/core src/reset -d dist --quiet --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap" ,
+    "build:swc": "swc src/core src/reset -d dist --copy-files --include-dotfiles --strip-leading-paths --config-file .swc --ignore **/*.stories.tsx,**/*.snap",
     "build:cleanup": "mv dist/* . && rm -r dist",
-    "build": "yarn build:prebuild && yarn build:swc && node sprites.js && yarn build:cleanup",
+    "build": "yarn build:prebuild && yarn build:swc && node sprites.js && yarn tsc && yarn build:cleanup",
     "watch": "yarn build:swc -w",
@@ -64,5 +70,4 @@ "format:check": "prettier -c *.{js,ts} src/**/*.{js,ts,tsx}",
     "build-storybook": "yarn build && storybook build --quiet -o preview",
-    "test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && npx http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
-    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && npx http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
-
+    "test": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook --url http://127.0.0.1:6007\"",
+    "test:update-snapshots": "npx concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook && yarn http-server preview --port 6007 --silent\" \"wait-on tcp:6007 && yarn test-storybook -u --url http://127.0.0.1:6007\""
   },
@@ -77,4 +82,4 @@ "dependencies": {
     "lodash.throttle": "^4.1.1",
+    "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react": "^18.2.0",
     "redux": "^4.0.5",
@@ -81,0 +86,0 @@ "scroll-lock": "^2.1.4"

New alerts

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3485701

increased by6.37%

Number of package files

462

increased by45.28%

Lines of code

2397

increased by29.57%

Worsened metrics

Dev dependency count

31

increased by14.81%

Number of low quality alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

46

increased by130%

No dependency changes