@ably/ui 15.3.0-dev.eb999b3b → 15.3.1-dev.b451a94

package/core/Flash.js

@@ -1 +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(()=>{if(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 React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&iconColor[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&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 React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>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 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(()=>{if(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 React.createElement("div",{className:`ui-flash-message ui-grid-px ${animateEntry?"ui-flash-message-enter":""}`,style:style,ref:ref,"data-id":"ui-flash"},React.createElement("div",{className:`${FLASH_BG_COLOR[type]} p-32 flex align-center rounded shadow-container-subtle`},withIcons[type]&&iconColor[type]&&React.createElement(Icon,{name:withIcons[type],color:iconColor[type],size:"1.5rem",additionalCSS:"mr-16 self-baseline"}),React.createElement("p",{className:`ui-text-p1 mr-16 ${FLASH_TEXT_COLOR[type]}`,dangerouslySetInnerHTML:{__html:safeContent}}),React.createElement("button",{type:"button",className:"p-0 ml-auto self-start focus:outline-none",onClick:closeFlash},iconColor[type]&&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,removeFlash}))]})},[flashes]);return React.createElement("div",{className:"ui-flash","data-id":FLASH_DATA_ID},flashesWithIds.filter(item=>!item.removed).map(flash=>React.createElement(Flash,{key:flash.id,...flash})))};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 React.createElement(WrappedFlashes,null)};export{reducerFlashes,FLASH_DATA_ID,Flashes};export default BackendFlashes;

package/core/Notice.js

@@ -1 +1 @@
-import React,{useEffect}from"react";import NoticeScripts from"./Notice/component.js";import Icon from"./Icon";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.collapse||false}})},[]);const wrapperClasses=["ui-announcement",bgColor,textColor].join(" ");return React.createElement("div",{className:wrapperClasses,"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:"underline cursor-pointer whitespace-nowrap"},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-close",size:"1.25rem",color:"text-cool-black"}))))};export default Notice;
+import React,{useEffect}from"react";import DOMPurify from"dompurify";import NoticeScripts from"./Notice/component.js";import Icon from"./Icon";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const contentWrapperClasses="w-full pr-8 ui-text-p3 self-center";const ContentWrapper=({buttonLink,children})=>buttonLink?React.createElement("a",{href:buttonLink,className:contentWrapperClasses},children):React.createElement("div",{className:contentWrapperClasses},children);const Notice=({buttonLink,buttonLabel,bodyText="",title,config,closeBtn,bgColor="bg-gradient-active-orange",textColor="text-white"})=>{useEffect(()=>{NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.collapse||false}})},[]);const wrapperClasses=["ui-announcement",bgColor,textColor].join(" ");const safeContent=DOMPurify.sanitize(bodyText,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});const contentRef=useRailsUjsLinks();return React.createElement("div",{className:wrapperClasses,"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",{ref:contentRef,className:"pr-4",dangerouslySetInnerHTML:{__html:DOMPurify.sanitize(safeContent)}}),buttonLabel&&React.createElement("span",{className:"underline cursor-pointer whitespace-nowrap"},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-close",size:"1.25rem",color:"text-cool-black"}))))};export default Notice;

package/core/Status.js

@@ -1 +1 @@
-import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const statusTypes=["none","operational","minor","major","critical","unknown"];export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":case"operational":return"bg-gui-success-green";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-gui-error-red";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("span",{className:cn("inline-flex h-8 aspect-square m-4 rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-8",additionalCSS),target:"_blank",rel:"noreferrer"},React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&React.createElement("div",{className:"flex gap-8 ui-text-menu4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},React.createElement("span",null,data.status.description.charAt(0).toUpperCase()+data.status.description.slice(1).toLowerCase()),React.createElement(Icon,{name:"icon-gui-external-link",size:"16px"})))};export default Status;
+import React from"react";import useSWR from"swr";import cn from"./utils/cn";import Icon from"./Icon";export const StatusUrl="https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";const fetcher=url=>fetch(url).then(res=>res.json());const indicatorClass=indicator=>{switch(indicator){case"none":return"bg-green-500";case"operational":return"bg-green-500";case"minor":return"bg-yellow-500";case"major":return"bg-orange-500";case"critical":return"bg-orange-800";default:return"bg-neutral-500"}};export const StatusIcon=({statusUrl,refreshInterval=1e3*60})=>{const{data,error,isLoading}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("span",{className:cn("inline-flex h-[1rem] aspect-square m-[0.25rem] rounded-full",indicatorClass(data?.status?.indicator),{"animate-pulse":isLoading||error})})};const Status=({statusUrl=StatusUrl,additionalCSS,refreshInterval=1e3*60,showDescription=false})=>{const{data}=useSWR(statusUrl,fetcher,{refreshInterval});return React.createElement("a",{href:"https://status.ably.com",className:cn("inline-flex group/status items-center gap-8",additionalCSS),target:"_blank",rel:"noreferrer"},React.createElement(StatusIcon,{statusUrl:statusUrl,refreshInterval:refreshInterval??1e3*60}),showDescription&&data?.status?.description&&React.createElement("div",{className:"flex gap-8 ui-text-menu4 font-medium text-neutral-900 group-hover/status:text-neutral-1300 dark:text-neutral-400 dark:group-hover/status:text-neutral-000 transition-colors"},React.createElement("span",null,data.status.description),React.createElement(Icon,{name:"icon-gui-external-link",size:"16px"})))};export default Status;

package/core/hooks/use-rails-ujs-hooks.js

@@ -0,0 +1 @@
+import{useEffect,useRef}from"react";const useRailsUjsLinks=()=>{const containerRef=useRef(null);useEffect(()=>{const container=containerRef.current;if(!container)return;const handleClick=event=>{const target=event.target;const link=target.closest("a[data-method]");if(!link)return;if(!container.contains(link))return;event.preventDefault();const method=link.dataset.method?.toLowerCase()??"get";const href=link.getAttribute("href");if(!href){console.warn("Rails UJS link has no href attribute");return}if(method!=="post"&&method!=="delete")return;const csrfParam=document.querySelector('meta[name="csrf-param"]')?.content;const csrfToken=document.querySelector('meta[name="csrf-token"]')?.content;const form=document.createElement("form");form.method="POST";form.action=href;form.style.display="none";if(csrfParam&&csrfToken){const csrfInput=document.createElement("input");csrfInput.type="hidden";csrfInput.name=csrfParam;csrfInput.value=csrfToken;form.appendChild(csrfInput)}else{console.warn("No CSRF token found in document")}if(method!=="post"){const methodInput=document.createElement("input");methodInput.type="hidden";methodInput.name="_method";methodInput.value=method;form.appendChild(methodInput)}document.body.appendChild(form);form.submit()};container.addEventListener("click",handleClick);return()=>container.removeEventListener("click",handleClick)},[]);return containerRef};export default useRailsUjsLinks;

package/core/styles/buttons.css

@@ -28,27 +28,27 @@
   }
 
   .ui-button-priority-base {
-    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base;
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 hover:text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base;
   }
 
   .ui-theme-dark .ui-button-priority-base {
-    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
+    @apply bg-gradient-priority-button bg-[size:200%] bg-left hover:bg-right active:bg-right text-neutral-000 hover:text-neutral-000 active:text-neutral-000 transition-[background-position] disabled:bg-none ui-button-disabled-base-dark;
   }
 
   .ui-button-primary-base {
-    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 active:bg-neutral-1200 active:text-neutral-300 ui-button-disabled-base;
+    @apply bg-neutral-1300 text-neutral-000 hover:bg-neutral-1100 hover:text-neutral-200 active:bg-neutral-1200 active:text-neutral-100 ui-button-disabled-base;
   }
 
   .ui-theme-dark .ui-button-primary-base {
-    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 active:bg-neutral-100 active:text-neutral-1000 ui-button-disabled-base-dark;
+    @apply bg-neutral-000 text-neutral-1300 hover:bg-neutral-200 hover:text-neutral-1100 active:bg-neutral-100 active:text-neutral-1200 ui-button-disabled-base-dark;
   }
 
   .ui-button-secondary-base {
-    @apply text-neutral-1300 active:text-neutral-1000 border border-neutral-600 hover:border-neutral-800 active:border-neutral-700 disabled:border-gui-unavailable disabled:text-gui-unavailable;
+    @apply text-neutral-1300 hover:text-neutral-1100 active:text-neutral-1200 border border-neutral-600 hover:border-neutral-800 active:border-neutral-700 disabled:border-gui-unavailable disabled:text-gui-unavailable;
   }
 
   .ui-theme-dark .ui-button-secondary-base {
-    @apply text-neutral-000 active:text-neutral-300 border-neutral-700 hover:border-neutral-500 active:border-neutral-600 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
+    @apply text-neutral-000 hover:text-neutral-200 active:text-neutral-100 border-neutral-700 hover:border-neutral-500 active:border-neutral-600 disabled:border-gui-unavailable-dark disabled:text-gui-unavailable-dark;
   }
 
   .ui-button-priority-lg {

package/core/styles/colors/computed-colors.json

@@ -0,0 +1 @@
+["bg-blue-400","bg-blue-100","bg-neutral-1300","bg-neutral-300","bg-neutral-200","bg-neutral-100","bg-neutral-000","bg-neutral-600","bg-orange-900","bg-orange-600","border-blue-400","border-neutral-200","border-neutral-600","border-neutral-500","border-orange-600","from-neutral-400","group-hover:bg-neutral-100","text-blue-600","text-blue-200","text-neutral-1300","text-neutral-300","text-neutral-000","text-neutral-1100","text-neutral-1000","text-neutral-800","text-neutral-700","text-neutral-600","text-neutral-500","text-orange-200","text-orange-600"]

package/index.d.ts

@@ -400,7 +400,7 @@ type FlashProps = {
 };
 type FlashesProps = {
     flashes: {
-        items: FlashProps[];
+        items: Pick<FlashProps, "type" | "content">[];
     };
 };
 type BackendFlashesProps = {
@@ -554,6 +554,7 @@ export default function Meganav({ themeName, addSearchApiKey }: {
 
 declare module '@ably/ui/core/Meganav' {
 import { ReactNode } from "react";
+import type { NoticeProps } from "@ably/ui/core/Notice";
 import { ColorClass } from "@ably/ui/core/styles/colors/types";
 export type MeganavTheme = {
     backgroundColor?: ColorClass;
@@ -567,11 +568,7 @@ export type MeganavTheme = {
 export type AbsUrl = (path: string) => string;
 export type MeganavPaths = {
     logo: string;
-    iconSprites: string;
     ablyStack: string;
-    blogThumb1: string;
-    blogThumb2: string;
-    blogThumb3: string;
     awsLogo?: string;
 };
 export type MeganavPanels = {
@@ -606,23 +603,18 @@ export type MeganavSessionState = {
         href: string;
     };
 };
+export type NoticeApiProps = {
+    props: NoticeProps;
+    config: {
+        cookieId: string;
+        noticeId: string;
+        collapse: boolean;
+    };
+};
 type MeganavProps = {
     paths?: MeganavPaths;
-    themeName: "white" | "black" | "transparentToWhite";
-    notice?: {
-        props: {
-            title: string;
-            bodyText: string;
-            buttonLink: string;
-            buttonLabel: string;
-            closeBtn: boolean;
-        };
-        config: {
-            cookieId: string;
-            noticeId: string;
-            collapse: boolean;
-        };
-    };
+    themeName?: "white" | "black" | "transparentToWhite";
+    notice?: NoticeApiProps;
     loginLink?: string;
     urlBase?: string;
     addSearchApiKey: string;
@@ -886,7 +878,7 @@ function Notice({ bannerContainer, cookieId, noticeId, options }: {
 }
 
 declare module '@ably/ui/core/Notice' {
-type NoticeProps = {
+export type NoticeProps = {
     buttonLink?: string;
     buttonLabel?: string;
     bodyText?: string;
@@ -1046,8 +1038,6 @@ type StatusProps = {
     refreshInterval?: number;
     showDescription?: boolean;
 };
-export const statusTypes: readonly ["none", "operational", "minor", "major", "critical", "unknown"];
-export type StatusType = (typeof statusTypes)[number];
 export const StatusUrl = "https://ntqy1wz94gjv.statuspage.io/api/v2/status.json";
 export const StatusIcon: ({ statusUrl, refreshInterval, }: StatusProps) => import("react/jsx-runtime").JSX.Element;
 const Status: ({ statusUrl, additionalCSS, refreshInterval, showDescription, }: StatusProps) => import("react/jsx-runtime").JSX.Element;
@@ -1221,6 +1211,13 @@ export function queryIdAll(val: any, root?: Document): NodeListOf<Element>;
 //# sourceMappingURL=dom-query.d.ts.map
 }
 
+declare module '@ably/ui/core/hooks/use-rails-ujs-hooks' {
+import { RefObject } from 'react';
+const useRailsUjsLinks: () => RefObject<HTMLDivElement>;
+export default useRailsUjsLinks;
+//# sourceMappingURL=use-rails-ujs-hooks.d.ts.map
+}
+
 declare module '@ably/ui/core/hubspot-chat-toggle' {
 export default function toggleChatWidget(params: any): (() => void) | undefined;
 //# sourceMappingURL=hubspot-chat-toggle.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "15.3.0-dev.eb999b3b",
+  "version": "15.3.1-dev.b451a94",
   "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.",
   "repository": {
     "type": "git",