@ably/ui 15.2.1-dev.14dee71 → 15.2.1-dev.bfb46ac

package/core/Notice.js

@@ -1 +1 @@
-import React,{useEffect}from"react";import DOMPurify from"dompurify";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(" ");const safeContent=DOMPurify.sanitize(bodyText,{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method","rel"]});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",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;
+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/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}const csrfParam=document.querySelector('meta[name="csrf-param"]')?.content;const csrfToken=document.querySelector('meta[name="csrf-token"]')?.content;if(method!=="post")return;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/index.d.ts

@@ -610,7 +610,7 @@ export type NoticeApiProps = {
 };
 type MeganavProps = {
     paths?: MeganavPaths;
-    themeName: "white" | "black" | "transparentToWhite";
+    themeName?: "white" | "black" | "transparentToWhite";
     notice?: NoticeApiProps;
     loginLink?: string;
     urlBase?: string;
@@ -1208,6 +1208,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.2.1-dev.14dee71",
+  "version": "15.2.1-dev.bfb46ac",
   "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",