@ably/ui 17.12.0 → 17.12.1-dev.ad100591
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.
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import*as React from"react";import{forwardRef}from"react";const IconGuiSquare3Stack3d=({title,titleId,...props},ref)=>React.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",width:24,height:24,fill:"currentColor",viewBox:"0 0 24 24",ref:ref,"aria-labelledby":titleId,...props},title?React.createElement("title",{id:titleId},title):null,React.createElement("path",{stroke:"#03020D",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:1.5,d:"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3"}));const ForwardRef=forwardRef(IconGuiSquare3Stack3d);export default ForwardRef;
|
|
2
|
+
//# sourceMappingURL=icon-gui-square-3-stack-3d.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../../src/core/Icon/components/icon-gui-square-3-stack-3d.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type { SVGProps } from \"react\";\nimport { Ref, forwardRef } from \"react\";\ninterface SVGRProps {\n title?: string;\n titleId?: string;\n}\nconst IconGuiSquare3Stack3d = ({\n title,\n titleId,\n ...props\n}: SVGProps<SVGSVGElement> & SVGRProps, ref: Ref<SVGSVGElement>) => <svg xmlns=\"http://www.w3.org/2000/svg\" width={24} height={24} fill=\"currentColor\" viewBox=\"0 0 24 24\" ref={ref} aria-labelledby={titleId} {...props}>{title ? <title id={titleId}>{title}</title> : null}<path stroke=\"#03020D\" strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={1.5} d=\"M6.429 9.75 2.25 12l4.179 2.25m0-4.5 5.571 3 5.571-3m-11.142 0L2.25 7.5 12 2.25l9.75 5.25-4.179 2.25m0 0L21.75 12l-4.179 2.25m0 0 4.179 2.25L12 21.75 2.25 16.5l4.179-2.25m11.142 0-5.571 3-5.571-3\" /></svg>;\nconst ForwardRef = forwardRef(IconGuiSquare3Stack3d);\nexport default ForwardRef;"],"names":["React","forwardRef","IconGuiSquare3Stack3d","title","titleId","props","ref","svg","xmlns","width","height","fill","viewBox","aria-labelledby","id","path","stroke","strokeLinecap","strokeLinejoin","strokeWidth","d","ForwardRef"],"mappings":"AAAA,UAAYA,UAAW,OAAQ,AAE/B,QAAcC,UAAU,KAAQ,OAAQ,CAKxC,MAAMC,sBAAwB,CAAC,CAC7BC,KAAK,CACLC,OAAO,CACP,GAAGC,MACiC,CAAEC,MAA4B,oBAACC,OAAIC,MAAM,6BAA6BC,MAAO,GAAIC,OAAQ,GAAIC,KAAK,eAAeC,QAAQ,YAAYN,IAAKA,IAAKO,kBAAiBT,QAAU,GAAGC,KAAK,EAAGF,MAAQ,oBAACA,SAAMW,GAAIV,SAAUD,OAAiB,KAAK,oBAACY,QAAKC,OAAO,UAAUC,cAAc,QAAQC,eAAe,QAAQC,YAAa,IAAKC,EAAE,yMACtW,MAAMC,WAAapB,WAAWC,sBAC9B,gBAAemB,UAAW"}
|
package/core/Notice.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useEffect,useRef,useState}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const defaultTextColor="text-neutral-1300 dark:text-neutral-000";const contentWrapperClasses="w-full pr-2 ui-text-p4 self-center";const Notice=({buttonLink,buttonLabel,bodyText,title,config,closeBtn,bgColor="bg-orange-100 dark:
|
|
1
|
+
import React,{useEffect,useRef,useState}from"react";import DOMPurify from"dompurify";import Icon from"./Icon";import cn from"./utils/cn.js";import NoticeScripts from"./Notice/component.js";import useRailsUjsLinks from"./hooks/use-rails-ujs-hooks";const defaultTextColor="text-neutral-1300 dark:text-neutral-000";const contentWrapperClasses="w-full pr-2 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-gradient-to-b from-orange-100 to-orange-200 dark:from-orange-1100 dark:to-orange-1000",textColor=defaultTextColor,onClose})=>{const contentRef=useRef(null);const[isClosing,setIsClosing]=useState(false);useRailsUjsLinks(contentRef);useEffect(()=>{const cleanup=NoticeScripts({bannerContainer:document.querySelector('[data-id="ui-notice"]'),cookieId:config?.cookieId,noticeId:config?.noticeId,options:{collapse:config?.options?.collapse||false}});return cleanup},[config?.cookieId,config?.noticeId,config?.options?.collapse]);const safeContent=DOMPurify.sanitize(bodyText??"",{ALLOWED_TAGS:["a"],ALLOWED_ATTR:["href","data-method"],ALLOWED_URI_REGEXP:/^\/[^/]/});return React.createElement("div",{className:cn("ui-announcement relative z-[60] px-3 pt-3",isClosing?"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden":"ui-announcement-visible"),"data-id":"ui-notice"},React.createElement("div",{className:cn("rounded-lg overflow-hidden ring-1 ring-inset ring-orange-200 dark:ring-orange-1000",bgColor,textColor)},React.createElement("div",{className:"ui-grid-px py-4 max-w-screen-xl mx-auto relative"},React.createElement("div",{className:"flex justify-center text-center px-10"},React.createElement(ContentWrapper,{buttonLink:buttonLink??"#"},React.createElement("strong",{className:"font-bold whitespace-nowrap pr-1"},title),React.createElement("span",{ref:contentRef,className:"pr-1",dangerouslySetInnerHTML:{__html:safeContent}}),buttonLabel&&React.createElement("span",{className:"cursor-pointer whitespace-nowrap font-bold underline underline-offset-4 decoration-1 text-neutral-1100 hover:text-neutral-1300 dark:text-neutral-200 dark:hover:text-neutral-000"},buttonLabel))),closeBtn&&React.createElement("button",{type:"button",className:"absolute right-4 top-1/2 -translate-y-1/2 h-6 w-6 border-none bg-none outline-none focus:outline-none focus:ring-0 focus:border-transparent",onClick:()=>{setIsClosing(true);setTimeout(()=>{document.dispatchEvent(new CustomEvent("notice-closed"));onClose?.()},300)}},React.createElement(Icon,{name:"icon-gui-x-mark-outline",size:"1.5rem",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, { useEffect, useRef, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\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 onClose?: () => void;\n\n bannerContainer?: Element | null;\n cookieId?: string;\n noticeId?: string;\n options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst Notice = ({\n buttonLink,\n buttonLabel,\n bodyText,\n title,\n config,\n closeBtn,\n bgColor = \"bg-orange-100 dark:
|
|
1
|
+
{"version":3,"sources":["../../src/core/Notice.tsx"],"sourcesContent":["import React, { ReactNode, useEffect, useRef, useState } from \"react\";\nimport DOMPurify from \"dompurify\";\n\nimport { ColorClass, ColorThemeSet } from \"./styles/colors/types\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn.js\";\nimport NoticeScripts from \"./Notice/component.js\";\nimport useRailsUjsLinks from \"./hooks/use-rails-ujs-hooks\";\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 onClose?: () => void;\n\n bannerContainer?: Element | null;\n cookieId?: string;\n noticeId?: string;\n options?: { collapse: boolean };\n};\n\nconst defaultTextColor = \"text-neutral-1300 dark:text-neutral-000\";\n\nconst contentWrapperClasses = \"w-full pr-2 ui-text-p4 self-center\";\n\nconst ContentWrapper = ({\n buttonLink,\n textColor = defaultTextColor,\n children,\n}: ContentWrapperProps) =>\n buttonLink ? (\n <a href={buttonLink} className={cn(contentWrapperClasses, textColor)}>\n {children}\n </a>\n ) : (\n <div className={cn(contentWrapperClasses, textColor)}>{children}</div>\n );\n\nconst Notice = ({\n buttonLink,\n buttonLabel,\n bodyText,\n title,\n config,\n closeBtn,\n bgColor = \"bg-gradient-to-b from-orange-100 to-orange-200 dark:from-orange-1100 dark:to-orange-1000\",\n textColor = defaultTextColor,\n onClose,\n}: NoticeProps) => {\n const contentRef = useRef<HTMLSpanElement>(null);\n const [isClosing, setIsClosing] = useState(false);\n useRailsUjsLinks(contentRef);\n\n useEffect(() => {\n const cleanup = 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 return cleanup;\n }, [config?.cookieId, config?.noticeId, config?.options?.collapse]);\n\n const safeContent = DOMPurify.sanitize(bodyText ?? \"\", {\n ALLOWED_TAGS: [\"a\"],\n ALLOWED_ATTR: [\"href\", \"data-method\"],\n ALLOWED_URI_REGEXP: /^\\/[^/]/,\n });\n\n // have to add the style classes here as src/core/Notice/component.css is not being properly imported or distributed when ably-ui is used as a package.\n return (\n <div\n className={cn(\n \"ui-announcement relative z-[60] px-3 pt-3\",\n isClosing\n ? \"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden\"\n : \"ui-announcement-visible\",\n )}\n data-id=\"ui-notice\"\n >\n <div\n className={cn(\n \"rounded-lg overflow-hidden ring-1 ring-inset ring-orange-200 dark:ring-orange-1000\",\n bgColor,\n textColor,\n )}\n >\n <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto relative\">\n <div className=\"flex justify-center text-center px-10\">\n <ContentWrapper buttonLink={buttonLink ?? \"#\"}>\n <strong className=\"font-bold whitespace-nowrap pr-1\">\n {title}\n </strong>\n <span\n ref={contentRef}\n className=\"pr-1\"\n dangerouslySetInnerHTML={{ __html: safeContent }}\n />\n {buttonLabel && (\n <span className=\"cursor-pointer whitespace-nowrap font-bold underline underline-offset-4 decoration-1 text-neutral-1100 hover:text-neutral-1300 dark:text-neutral-200 dark:hover:text-neutral-000\">\n {buttonLabel}\n </span>\n )}\n </ContentWrapper>\n </div>\n\n {closeBtn && (\n <button\n type=\"button\"\n className=\"absolute right-4 top-1/2 -translate-y-1/2 h-6 w-6 border-none bg-none outline-none focus:outline-none focus:ring-0 focus:border-transparent\"\n onClick={() => {\n setIsClosing(true);\n setTimeout(() => {\n document.dispatchEvent(new CustomEvent(\"notice-closed\"));\n onClose?.();\n }, 300);\n }}\n >\n <Icon\n name=\"icon-gui-x-mark-outline\"\n size=\"1.5rem\"\n color={textColor}\n />\n </button>\n )}\n </div>\n </div>\n </div>\n );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","useState","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","ContentWrapper","buttonLink","textColor","children","a","href","className","div","Notice","buttonLabel","bodyText","title","config","closeBtn","bgColor","onClose","contentRef","isClosing","setIsClosing","cleanup","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","button","type","onClick","setTimeout","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAAoBC,SAAS,CAAEC,MAAM,CAAEC,QAAQ,KAAQ,OAAQ,AACtE,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CAmC3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,eAAiB,CAAC,CACtBC,UAAU,CACVC,UAAYJ,gBAAgB,CAC5BK,QAAQ,CACY,GACpBF,WACE,oBAACG,KAAEC,KAAMJ,WAAYK,UAAWX,GAAGI,sBAAuBG,YACvDC,UAGH,oBAACI,OAAID,UAAWX,GAAGI,sBAAuBG,YAAaC,UAG3D,MAAMK,OAAS,CAAC,CACdP,UAAU,CACVQ,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,0FAA0F,CACpGZ,UAAYJ,gBAAgB,CAC5BiB,OAAO,CACK,IACZ,MAAMC,WAAazB,OAAwB,MAC3C,KAAM,CAAC0B,UAAWC,aAAa,CAAG1B,SAAS,OAC3CK,iBAAiBmB,YAEjB1B,UAAU,KACR,MAAM6B,QAAUvB,cAAc,CAC5BwB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUX,QAAQW,SAClBC,SAAUZ,QAAQY,SAClBC,QAAS,CACPC,SAAUd,QAAQa,SAASC,UAAY,KACzC,CACF,GAEA,OAAOP,OACT,EAAG,CAACP,QAAQW,SAAUX,QAAQY,SAAUZ,QAAQa,SAASC,SAAS,EAElE,MAAMC,YAAclC,UAAUmC,QAAQ,CAAClB,UAAY,GAAI,CACrDmB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAGA,OACE,oBAACxB,OACCD,UAAWX,GACT,4CACAsB,UACI,6EACA,2BAENe,UAAQ,aAER,oBAACzB,OACCD,UAAWX,GACT,qFACAmB,QACAZ,YAGF,oBAACK,OAAID,UAAU,oDACb,oBAACC,OAAID,UAAU,yCACb,oBAACN,gBAAeC,WAAYA,YAAc,KACxC,oBAACgC,UAAO3B,UAAU,oCACfK,OAEH,oBAACuB,QACCC,IAAKnB,WACLV,UAAU,OACV8B,wBAAyB,CAAEC,OAAQV,WAAY,IAEhDlB,aACC,oBAACyB,QAAK5B,UAAU,oLACbG,eAMRI,UACC,oBAACyB,UACCC,KAAK,SACLjC,UAAU,8IACVkC,QAAS,KACPtB,aAAa,MACbuB,WAAW,KACTpB,SAASqB,aAAa,CAAC,IAAIC,YAAY,kBACvC5B,WACF,EAAG,IACL,GAEA,oBAACrB,MACCkD,KAAK,0BACLC,KAAK,SACLC,MAAO5C,eAQvB,CAEA,gBAAeM,MAAO"}
|
package/index.d.ts
CHANGED
|
@@ -2490,6 +2490,17 @@ export default ForwardRef;
|
|
|
2490
2490
|
//# sourceMappingURL=icon-gui-spinner-light.d.ts.map
|
|
2491
2491
|
}
|
|
2492
2492
|
|
|
2493
|
+
declare module '@ably/ui/core/Icon/components/icon-gui-square-3-stack-3d' {
|
|
2494
|
+
import * as React from "react";
|
|
2495
|
+
interface SVGRProps {
|
|
2496
|
+
title?: string;
|
|
2497
|
+
titleId?: string;
|
|
2498
|
+
}
|
|
2499
|
+
const ForwardRef: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement> & SVGRProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
|
|
2500
|
+
export default ForwardRef;
|
|
2501
|
+
//# sourceMappingURL=icon-gui-square-3-stack-3d.d.ts.map
|
|
2502
|
+
}
|
|
2503
|
+
|
|
2493
2504
|
declare module '@ably/ui/core/Icon/components/icon-product-ai-transport-mono' {
|
|
2494
2505
|
import * as React from "react";
|
|
2495
2506
|
interface SVGRProps {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ably/ui",
|
|
3
|
-
"version": "17.12.
|
|
3
|
+
"version": "17.12.1-dev.ad100591",
|
|
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",
|