@ably/ui 18.0.0 → 18.2.0
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/AGENTS.md +48 -425
- package/README.md +1 -1
- package/core/Accordion.js +1 -1
- package/core/Accordion.js.map +1 -1
- package/core/Code.js.map +1 -1
- package/core/CodeSnippet.js +1 -1
- package/core/CodeSnippet.js.map +1 -1
- package/core/Flash.js.map +1 -1
- package/core/Header/HeaderLinks.js +1 -1
- package/core/Header/HeaderLinks.js.map +1 -1
- package/core/Header.js +1 -1
- package/core/Header.js.map +1 -1
- package/core/Icon/components/icon-tech-perplexity-mono.js +2 -0
- package/core/Icon/components/icon-tech-perplexity-mono.js.map +1 -0
- package/core/Icon/components/index.js +1 -1
- package/core/Icon/components/index.js.map +1 -1
- package/core/Icon/computed-icons/tech-icons.js +1 -1
- package/core/Icon/computed-icons/tech-icons.js.map +1 -1
- package/core/Loader.js.map +1 -1
- package/core/Meganav/data.js +1 -1
- package/core/Meganav/data.js.map +1 -1
- package/core/Meganav/images/cust-logo-dialpad-dark.png +0 -0
- package/core/Meganav/images/cust-logo-dialpad-light.png +0 -0
- package/core/Meganav.js +1 -1
- package/core/Meganav.js.map +1 -1
- package/core/Notice.js.map +1 -1
- package/core/Slider.js +1 -1
- package/core/Slider.js.map +1 -1
- package/core/icons/tech/icon-tech-perplexity-mono.svg +3 -0
- package/core/sprites-tech.svg +1 -1
- package/core/styles/dropdowns.css +2 -2
- package/core/utils/sanitize-html.js +2 -0
- package/core/utils/sanitize-html.js.map +1 -0
- package/core/utils/sanitize-html.test.js +2 -0
- package/core/utils/sanitize-html.test.js.map +1 -0
- package/index.d.ts +78 -3
- package/package.json +25 -25
- package/core/Meganav/images/cust-logo-doxy-dark.png +0 -0
- package/core/Meganav/images/cust-logo-doxy-light.png +0 -0
package/core/Meganav/data.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Meganav/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconName } from \"../Icon/types\";\nimport { CustomerStoryHighlight } from \"./MeganavCustomerStories\";\nimport { BlogPost } from \"./MeganavBlog\";\nimport G2BestMeetsRequirementsSpring2025 from \"../images/badges/g2-best-meets-requirements-spring-2025.svg\";\nimport G2BestResultsSpring2025 from \"../images/badges/g2-best-results-spring-2025.svg\";\nimport G2BestSupportSpring2025 from \"../images/badges/g2-best-support-spring-2025.svg\";\nimport { products } from \"../ProductTile/data\";\nimport
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Meganav/data.tsx"],"sourcesContent":["import React from \"react\";\nimport { IconName } from \"../Icon/types\";\nimport { CustomerStoryHighlight } from \"./MeganavCustomerStories\";\nimport { BlogPost } from \"./MeganavBlog\";\nimport G2BestMeetsRequirementsSpring2025 from \"../images/badges/g2-best-meets-requirements-spring-2025.svg\";\nimport G2BestResultsSpring2025 from \"../images/badges/g2-best-results-spring-2025.svg\";\nimport G2BestSupportSpring2025 from \"../images/badges/g2-best-support-spring-2025.svg\";\nimport { products } from \"../ProductTile/data\";\nimport DialpadLogo from \"../Meganav/images/cust-logo-dialpad-light.png\";\nimport DialpadLogoDark from \"../Meganav/images/cust-logo-dialpad-dark.png\";\n\nexport type FlyoutPanelList = {\n label: string;\n icon?: IconName;\n link: string;\n isMobile?: boolean;\n description?: string;\n badge?: string;\n};\n\nexport type MenuItem = {\n name: string;\n link?: string;\n isHiddenMobile?: boolean;\n content?: React.ReactNode;\n panelClassName?: string;\n};\n\nexport const productsMenu: FlyoutPanelList[] = [\n {\n label: \"Architecture\",\n icon: \"icon-gui-squares-2-x-2-outline\",\n link: \"/platform\",\n },\n {\n label: \"Integrations\",\n icon: \"icon-gui-puzzle-piece-outline\",\n link: \"/docs/platform/integrations\",\n },\n {\n label: \"SDKs\",\n icon: \"icon-gui-cube-transparent-outline\",\n link: \"/docs/sdks\",\n },\n {\n label: \"Security & Compliance\",\n icon: \"icon-gui-shield-check-outline\",\n link: \"/security-and-compliance\",\n },\n];\n\nexport const compareMenu: FlyoutPanelList[] = [\n {\n label: \"Ably vs Pusher\",\n link: \"/compare/ably-vs-pusher\",\n },\n {\n label: \"Ably vs PubNub\",\n link: \"/compare/ably-vs-pubnub\",\n },\n {\n label: \"Ably vs Socket.io\",\n link: \"/compare/ably-vs-socketio\",\n },\n];\n\nexport const solutionsMenu: FlyoutPanelList[] = [\n {\n label: \"Fan Engagement\",\n icon: \"icon-gui-hand-thumb-up-outline\",\n link: \"/fan-engagement\",\n description: \"Enhance every moment with live, interactive fan experiences.\",\n },\n {\n label: \"FinTech\",\n icon: \"icon-gui-currency-dollar-outline\",\n link: \"/fin-tech\",\n description:\n \"Speed, reliability, and confidence in every user interaction.\",\n },\n {\n label: \"EdTech\",\n icon: \"icon-gui-academic-cap-outline\",\n link: \"/ed-tech\",\n description: \"Power collaborative, interactive learning environments.\",\n },\n {\n label: \"CXTech\",\n icon: \"icon-gui-face-smile-outline\",\n link: \"/cx-tech\",\n description:\n \"Deliver fast support, strong relationships, and high retention.\",\n },\n\n {\n label: \"HealthTech\",\n icon: \"icon-gui-heartbeat-outline\",\n link: \"/health-tech\",\n description: \"Reliable tools with full data privacy and compliance.\",\n },\n];\n\nexport const customerStoriesHighlight: CustomerStoryHighlight = {\n companyLogo: DialpadLogo,\n companyLogoDark: DialpadLogoDark,\n companyLink: \"/case-studies/dialpad\",\n companyName: \"Dialpad\",\n companyDesc:\n \"are sending 60B+ messages per month across 20+ critical use cases with zero downtime since migrating to Ably.\",\n};\n\nexport const companyMenu: FlyoutPanelList[] = [\n {\n label: \"Our story\",\n icon: \"icon-gui-ably-badge\",\n link: \"/about\",\n },\n {\n label: \"Careers\",\n icon: \"icon-gui-briefcase-outline\",\n link: \"/careers\",\n badge: \"WE'RE HIRING\",\n },\n];\n\nexport const ablyAwards = [\n {\n image: G2BestSupportSpring2025,\n desc: \"G2 Best Support Spring 2025\",\n },\n {\n image: G2BestMeetsRequirementsSpring2025,\n desc: \"G2 Best Meets Requirements Spring 2025\",\n },\n {\n image: G2BestResultsSpring2025,\n desc: \"G2 Best Results Spring 2025\",\n },\n];\n\nexport const menuItemLinks = [\n { name: \"Pricing\", link: \"/pricing\", isHiddenMobile: true },\n { name: \"Docs\", link: \"/docs\", isHiddenMobile: true },\n];\n\nexport const defaultBlogPosts: BlogPost[] = [\n {\n title:\n \"Ably AI Transport: keep your agents connected and stateful across devices\",\n link: \"/blog/ably-ai-transport\",\n categories: [\n \"New Release\",\n \"AI Transport\",\n \"New Feature\",\n \"RealTime Experiences\",\n \"Engineering\",\n \"Ably News\",\n ],\n pubDate: \"Dec 9, 2025\",\n },\n {\n title:\n \"Live chat at unlimited scale: What it takes to support stadium-sized audiences\",\n link: \"/blog/live-chat-at-unlimited-scale\",\n categories: [\"Chat\"],\n pubDate: \"Nov 18, 2025\",\n },\n];\n\nexport const productsForNav = {\n ...products,\n pubsub: { ...products.pubsub, link: \"/pubsub\" },\n liveSync: { ...products.liveSync, link: \"/livesync\" },\n chat: { ...products.chat, link: \"/chat\" },\n spaces: { ...products.spaces, link: \"/spaces\" },\n aiTransport: {\n ...products.aiTransport,\n link: \"/ai-transport\",\n },\n liveObjects: { ...products.liveObjects, link: \"/liveobjects\" },\n};\n"],"names":["React","G2BestMeetsRequirementsSpring2025","G2BestResultsSpring2025","G2BestSupportSpring2025","products","DialpadLogo","DialpadLogoDark","productsMenu","label","icon","link","compareMenu","solutionsMenu","description","customerStoriesHighlight","companyLogo","companyLogoDark","companyLink","companyName","companyDesc","companyMenu","badge","ablyAwards","image","desc","menuItemLinks","name","isHiddenMobile","defaultBlogPosts","title","categories","pubDate","productsForNav","pubsub","liveSync","chat","spaces","aiTransport","liveObjects"],"mappings":"AAAA,OAAOA,UAAW,OAAQ,AAI1B,QAAOC,sCAAuC,6DAA8D,AAC5G,QAAOC,4BAA6B,kDAAmD,AACvF,QAAOC,4BAA6B,kDAAmD,AACvF,QAASC,QAAQ,KAAQ,qBAAsB,AAC/C,QAAOC,gBAAiB,+CAAgD,AACxE,QAAOC,oBAAqB,8CAA+C,AAmB3E,QAAO,MAAMC,aAAkC,CAC7C,CACEC,MAAO,eACPC,KAAM,iCACNC,KAAM,WACR,EACA,CACEF,MAAO,eACPC,KAAM,gCACNC,KAAM,6BACR,EACA,CACEF,MAAO,OACPC,KAAM,oCACNC,KAAM,YACR,EACA,CACEF,MAAO,wBACPC,KAAM,gCACNC,KAAM,0BACR,EACD,AAAC,AAEF,QAAO,MAAMC,YAAiC,CAC5C,CACEH,MAAO,iBACPE,KAAM,yBACR,EACA,CACEF,MAAO,iBACPE,KAAM,yBACR,EACA,CACEF,MAAO,oBACPE,KAAM,2BACR,EACD,AAAC,AAEF,QAAO,MAAME,cAAmC,CAC9C,CACEJ,MAAO,iBACPC,KAAM,iCACNC,KAAM,kBACNG,YAAa,8DACf,EACA,CACEL,MAAO,UACPC,KAAM,mCACNC,KAAM,YACNG,YACE,+DACJ,EACA,CACEL,MAAO,SACPC,KAAM,gCACNC,KAAM,WACNG,YAAa,yDACf,EACA,CACEL,MAAO,SACPC,KAAM,8BACNC,KAAM,WACNG,YACE,iEACJ,EAEA,CACEL,MAAO,aACPC,KAAM,6BACNC,KAAM,eACNG,YAAa,uDACf,EACD,AAAC,AAEF,QAAO,MAAMC,yBAAmD,CAC9DC,YAAaV,YACbW,gBAAiBV,gBACjBW,YAAa,wBACbC,YAAa,UACbC,YACE,+GACJ,CAAE,AAEF,QAAO,MAAMC,YAAiC,CAC5C,CACEZ,MAAO,YACPC,KAAM,sBACNC,KAAM,QACR,EACA,CACEF,MAAO,UACPC,KAAM,6BACNC,KAAM,WACNW,MAAO,cACT,EACD,AAAC,AAEF,QAAO,MAAMC,WAAa,CACxB,CACEC,MAAOpB,wBACPqB,KAAM,6BACR,EACA,CACED,MAAOtB,kCACPuB,KAAM,wCACR,EACA,CACED,MAAOrB,wBACPsB,KAAM,6BACR,EACD,AAAC,AAEF,QAAO,MAAMC,cAAgB,CAC3B,CAAEC,KAAM,UAAWhB,KAAM,WAAYiB,eAAgB,IAAK,EAC1D,CAAED,KAAM,OAAQhB,KAAM,QAASiB,eAAgB,IAAK,EACrD,AAAC,AAEF,QAAO,MAAMC,iBAA+B,CAC1C,CACEC,MACE,4EACFnB,KAAM,0BACNoB,WAAY,CACV,cACA,eACA,cACA,uBACA,cACA,YACD,CACDC,QAAS,aACX,EACA,CACEF,MACE,iFACFnB,KAAM,qCACNoB,WAAY,CAAC,OAAO,CACpBC,QAAS,cACX,EACD,AAAC,AAEF,QAAO,MAAMC,eAAiB,CAC5B,GAAG5B,QAAQ,CACX6B,OAAQ,CAAE,GAAG7B,SAAS6B,MAAM,CAAEvB,KAAM,SAAU,EAC9CwB,SAAU,CAAE,GAAG9B,SAAS8B,QAAQ,CAAExB,KAAM,WAAY,EACpDyB,KAAM,CAAE,GAAG/B,SAAS+B,IAAI,CAAEzB,KAAM,OAAQ,EACxC0B,OAAQ,CAAE,GAAGhC,SAASgC,MAAM,CAAE1B,KAAM,SAAU,EAC9C2B,YAAa,CACX,GAAGjC,SAASiC,WAAW,CACvB3B,KAAM,eACR,EACA4B,YAAa,CAAE,GAAGlC,SAASkC,WAAW,CAAE5B,KAAM,cAAe,CAC/D,CAAE"}
|
|
Binary file
|
|
Binary file
|
package/core/Meganav.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";import{getMenuItemsForHeader}from"./Meganav/utils/getMenuItemsForHeader";const Meganav=({sessionState,notice,theme,themedScrollpoints,onNoticeClose,blogPosts})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const finalNoticeHeight=notice?noticeHeight:0;const headerMenuItems=useMemo(()=>getMenuItemsForHeader(blogPosts),[blogPosts]);const mobileNavItems=useMemo(()=>headerMenuItems.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[headerMenuItems]);const defaultThemedScrollpoints=[{id:"meganav",className:"ui-theme-light !bg-transparent !border-none"},{id:"meganav-theme-dark",className:"ui-theme-dark !bg-transparent !border-none"},{id:"main",className:"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b"},{id:"main-theme-dark",className:"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b"}];useEffect(()=>{if(!notice)
|
|
1
|
+
import React,{useEffect,useMemo}from"react";import Header from"./Header";import Flyout from"./Flyout";import{MeganavMobile}from"./Meganav/MeganavMobile";import Notice from"./Notice";import{HEADER_HEIGHT}from"./utils/heights";import{getMenuItemsForHeader}from"./Meganav/utils/getMenuItemsForHeader";const Meganav=({sessionState,notice,theme,themedScrollpoints,onNoticeClose,blogPosts})=>{const[noticeHeight,setNoticeHeight]=React.useState(0);const finalNoticeHeight=notice?noticeHeight:0;const headerMenuItems=useMemo(()=>getMenuItemsForHeader(blogPosts),[blogPosts]);const mobileNavItems=useMemo(()=>headerMenuItems.filter(item=>!item.isHiddenMobile).map(({name,link,content})=>({name,link,content})),[headerMenuItems]);const defaultThemedScrollpoints=[{id:"meganav",className:"ui-theme-light !bg-transparent !border-none"},{id:"meganav-theme-dark",className:"ui-theme-dark !bg-transparent !border-none"},{id:"main",className:"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b"},{id:"main-theme-dark",className:"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b"}];useEffect(()=>{if(!notice)return;const noticeElement=document.querySelector('[data-id="ui-notice"]');if(!noticeElement)return;const updateNoticeHeight=()=>{setNoticeHeight(noticeElement.getBoundingClientRect().height)};const observer=new ResizeObserver(updateNoticeHeight);observer.observe(noticeElement);const timeoutId=setTimeout(updateNoticeHeight,0);window.addEventListener("resize",updateNoticeHeight);return()=>{clearTimeout(timeoutId);observer.disconnect();window.removeEventListener("resize",updateNoticeHeight)}},[notice]);return React.createElement(React.Fragment,null,React.createElement("div",{className:"absolute top-0 left-0 right-0 w-full z-50",id:theme==="dark"?"meganav-theme-dark":"meganav","data-testid":"meganav",style:{height:HEADER_HEIGHT+finalNoticeHeight}},notice&&React.createElement(Notice,{...notice.props,config:notice.config,onClose:onNoticeClose}),React.createElement(Header,{className:"max-w-screen-xl mx-auto",isNoticeBannerEnabled:!!notice,noticeHeight:finalNoticeHeight,nav:React.createElement(Flyout,{menuItems:headerMenuItems,className:"justify-left z-40",flyOutClassName:"flex justify-left",viewPortClassName:"ui-shadow-lg-medium border border-neutral-200 dark:border-neutral-1100 rounded-2xl -mt-1 bg-neutral-000 dark:bg-neutral-1300"}),mobileNav:React.createElement(MeganavMobile,{navItems:mobileNavItems}),headerLinks:[{href:"/contact",label:"Contact us"}],headerLinksClassName:"md:gap-x-6 ",sessionState:sessionState,themedScrollpoints:themedScrollpoints??defaultThemedScrollpoints})))};export default Meganav;
|
|
2
2
|
//# sourceMappingURL=Meganav.js.map
|
package/core/Meganav.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState, ThemedScrollpoint } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\nimport { BlogPost } from \"./Meganav/MeganavBlog\";\nimport { getMenuItemsForHeader } from \"./Meganav/utils/getMenuItemsForHeader\";\n\nexport type MeganavNoticeBannerProps = {\n props: {\n title: string;\n bodyText: string;\n buttonLink: string;\n buttonLabel: string;\n closeBtn: boolean;\n };\n config: {\n cookieId: string;\n noticeId: string | number;\n options: {\n collapse: boolean;\n };\n };\n};\n\nexport type MeganavProps = {\n sessionState: HeaderSessionState;\n blogPosts: BlogPost[];\n notice?: MeganavNoticeBannerProps;\n theme?: string;\n themedScrollpoints?: ThemedScrollpoint[];\n onNoticeClose?: () => void;\n};\n\nconst Meganav = ({\n sessionState,\n notice,\n theme,\n themedScrollpoints,\n onNoticeClose,\n blogPosts,\n}: MeganavProps) => {\n const [noticeHeight, setNoticeHeight] = React.useState(0);\n\n const finalNoticeHeight = notice ? noticeHeight : 0;\n\n const headerMenuItems = useMemo(\n () => getMenuItemsForHeader(blogPosts),\n [blogPosts],\n );\n\n const mobileNavItems = useMemo(\n () =>\n headerMenuItems\n .filter((item) => !item.isHiddenMobile)\n .map(({ name, link, content }) => ({ name, link, content })),\n [headerMenuItems],\n );\n\n const defaultThemedScrollpoints = [\n {\n id: \"meganav\",\n className: \"ui-theme-light !bg-transparent !border-none\",\n },\n {\n id: \"meganav-theme-dark\",\n className: \"ui-theme-dark !bg-transparent !border-none\",\n },\n {\n id: \"main\",\n className: \"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n {\n id: \"main-theme-dark\",\n className: \"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n ];\n\n useEffect(() => {\n if (!notice)
|
|
1
|
+
{"version":3,"sources":["../../src/core/Meganav.tsx"],"sourcesContent":["import React, { useEffect, useMemo } from \"react\";\nimport Header, { HeaderSessionState, ThemedScrollpoint } from \"./Header\";\nimport Flyout from \"./Flyout\";\nimport { MeganavMobile } from \"./Meganav/MeganavMobile\";\nimport Notice from \"./Notice\";\nimport { HEADER_HEIGHT } from \"./utils/heights\";\nimport { BlogPost } from \"./Meganav/MeganavBlog\";\nimport { getMenuItemsForHeader } from \"./Meganav/utils/getMenuItemsForHeader\";\n\nexport type MeganavNoticeBannerProps = {\n props: {\n title: string;\n bodyText: string;\n buttonLink: string;\n buttonLabel: string;\n closeBtn: boolean;\n };\n config: {\n cookieId: string;\n noticeId: string | number;\n options: {\n collapse: boolean;\n };\n };\n};\n\nexport type MeganavProps = {\n sessionState: HeaderSessionState;\n blogPosts: BlogPost[];\n notice?: MeganavNoticeBannerProps;\n theme?: string;\n themedScrollpoints?: ThemedScrollpoint[];\n onNoticeClose?: () => void;\n};\n\nconst Meganav = ({\n sessionState,\n notice,\n theme,\n themedScrollpoints,\n onNoticeClose,\n blogPosts,\n}: MeganavProps) => {\n const [noticeHeight, setNoticeHeight] = React.useState(0);\n\n const finalNoticeHeight = notice ? noticeHeight : 0;\n\n const headerMenuItems = useMemo(\n () => getMenuItemsForHeader(blogPosts),\n [blogPosts],\n );\n\n const mobileNavItems = useMemo(\n () =>\n headerMenuItems\n .filter((item) => !item.isHiddenMobile)\n .map(({ name, link, content }) => ({ name, link, content })),\n [headerMenuItems],\n );\n\n const defaultThemedScrollpoints = [\n {\n id: \"meganav\",\n className: \"ui-theme-light !bg-transparent !border-none\",\n },\n {\n id: \"meganav-theme-dark\",\n className: \"ui-theme-dark !bg-transparent !border-none\",\n },\n {\n id: \"main\",\n className: \"ui-theme-light bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n {\n id: \"main-theme-dark\",\n className: \"ui-theme-dark bg-neutral-000 dark:bg-neutral-1300 border-b\",\n },\n ];\n\n useEffect(() => {\n if (!notice) return;\n\n const noticeElement = document.querySelector('[data-id=\"ui-notice\"]');\n if (!noticeElement) return;\n\n const updateNoticeHeight = () => {\n setNoticeHeight(noticeElement.getBoundingClientRect().height);\n };\n\n const observer = new ResizeObserver(updateNoticeHeight);\n observer.observe(noticeElement);\n\n const timeoutId = setTimeout(updateNoticeHeight, 0);\n window.addEventListener(\"resize\", updateNoticeHeight);\n\n return () => {\n clearTimeout(timeoutId);\n observer.disconnect();\n window.removeEventListener(\"resize\", updateNoticeHeight);\n };\n }, [notice]);\n\n return (\n <>\n <div\n className=\"absolute top-0 left-0 right-0 w-full z-50\"\n id={theme === \"dark\" ? \"meganav-theme-dark\" : \"meganav\"}\n data-testid=\"meganav\"\n style={{ height: HEADER_HEIGHT + finalNoticeHeight }}\n >\n {notice && (\n <Notice\n {...notice.props}\n config={notice.config}\n onClose={onNoticeClose}\n />\n )}\n <Header\n className=\"max-w-screen-xl mx-auto\"\n isNoticeBannerEnabled={!!notice}\n noticeHeight={finalNoticeHeight}\n nav={\n <Flyout\n menuItems={headerMenuItems}\n className=\"justify-left z-40\"\n flyOutClassName=\"flex justify-left\"\n viewPortClassName=\"ui-shadow-lg-medium border border-neutral-200 dark:border-neutral-1100 rounded-2xl -mt-1 bg-neutral-000 dark:bg-neutral-1300\"\n />\n }\n mobileNav={<MeganavMobile navItems={mobileNavItems} />}\n headerLinks={[{ href: \"/contact\", label: \"Contact us\" }]}\n headerLinksClassName=\"md:gap-x-6 \"\n sessionState={sessionState}\n themedScrollpoints={themedScrollpoints ?? defaultThemedScrollpoints}\n />\n </div>\n </>\n );\n};\n\nexport default Meganav;\n"],"names":["React","useEffect","useMemo","Header","Flyout","MeganavMobile","Notice","HEADER_HEIGHT","getMenuItemsForHeader","Meganav","sessionState","notice","theme","themedScrollpoints","onNoticeClose","blogPosts","noticeHeight","setNoticeHeight","useState","finalNoticeHeight","headerMenuItems","mobileNavItems","filter","item","isHiddenMobile","map","name","link","content","defaultThemedScrollpoints","id","className","noticeElement","document","querySelector","updateNoticeHeight","getBoundingClientRect","height","observer","ResizeObserver","observe","timeoutId","setTimeout","window","addEventListener","clearTimeout","disconnect","removeEventListener","div","data-testid","style","props","config","onClose","isNoticeBannerEnabled","nav","menuItems","flyOutClassName","viewPortClassName","mobileNav","navItems","headerLinks","href","label","headerLinksClassName"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,OAAO,KAAQ,OAAQ,AAClD,QAAOC,WAAuD,UAAW,AACzE,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,yBAA0B,AACxD,QAAOC,WAAY,UAAW,AAC9B,QAASC,aAAa,KAAQ,iBAAkB,AAEhD,QAASC,qBAAqB,KAAQ,uCAAwC,CA4B9E,MAAMC,QAAU,CAAC,CACfC,YAAY,CACZC,MAAM,CACNC,KAAK,CACLC,kBAAkB,CAClBC,aAAa,CACbC,SAAS,CACI,IACb,KAAM,CAACC,aAAcC,gBAAgB,CAAGjB,MAAMkB,QAAQ,CAAC,GAEvD,MAAMC,kBAAoBR,OAASK,aAAe,EAElD,MAAMI,gBAAkBlB,QACtB,IAAMM,sBAAsBO,WAC5B,CAACA,UAAU,EAGb,MAAMM,eAAiBnB,QACrB,IACEkB,gBACGE,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,GAC7D,CAACR,gBAAgB,EAGnB,MAAMS,0BAA4B,CAChC,CACEC,GAAI,UACJC,UAAW,6CACb,EACA,CACED,GAAI,qBACJC,UAAW,4CACb,EACA,CACED,GAAI,OACJC,UAAW,6DACb,EACA,CACED,GAAI,kBACJC,UAAW,4DACb,EACD,CAED9B,UAAU,KACR,GAAI,CAACU,OAAQ,OAEb,MAAMqB,cAAgBC,SAASC,aAAa,CAAC,yBAC7C,GAAI,CAACF,cAAe,OAEpB,MAAMG,mBAAqB,KACzBlB,gBAAgBe,cAAcI,qBAAqB,GAAGC,MAAM,CAC9D,EAEA,MAAMC,SAAW,IAAIC,eAAeJ,oBACpCG,SAASE,OAAO,CAACR,eAEjB,MAAMS,UAAYC,WAAWP,mBAAoB,GACjDQ,OAAOC,gBAAgB,CAAC,SAAUT,oBAElC,MAAO,KACLU,aAAaJ,WACbH,SAASQ,UAAU,GACnBH,OAAOI,mBAAmB,CAAC,SAAUZ,mBACvC,CACF,EAAG,CAACxB,OAAO,EAEX,OACE,wCACE,oBAACqC,OACCjB,UAAU,4CACVD,GAAIlB,QAAU,OAAS,qBAAuB,UAC9CqC,cAAY,UACZC,MAAO,CAAEb,OAAQ9B,cAAgBY,iBAAkB,GAElDR,QACC,oBAACL,QACE,GAAGK,OAAOwC,KAAK,CAChBC,OAAQzC,OAAOyC,MAAM,CACrBC,QAASvC,gBAGb,oBAACX,QACC4B,UAAU,0BACVuB,sBAAuB,CAAC,CAAC3C,OACzBK,aAAcG,kBACdoC,IACE,oBAACnD,QACCoD,UAAWpC,gBACXW,UAAU,oBACV0B,gBAAgB,oBAChBC,kBAAkB,iIAGtBC,UAAW,oBAACtD,eAAcuD,SAAUvC,iBACpCwC,YAAa,CAAC,CAAEC,KAAM,WAAYC,MAAO,YAAa,EAAE,CACxDC,qBAAqB,cACrBtD,aAAcA,aACdG,mBAAoBA,oBAAsBgB,6BAKpD,CAEA,gBAAepB,OAAQ"}
|
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:bg-orange-1100\",\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 const isSafeButtonLink =\n typeof buttonLink === \"string\" &&\n (/^\\/(?!\\/)/.test(buttonLink) || /^https?:\\/\\//.test(buttonLink));\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]\",\n isClosing\n ? \"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden\"\n : \"ui-announcement-visible\",\n bgColor,\n textColor,\n )}\n data-id=\"ui-notice\"\n >\n <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n <div className={cn(contentWrapperClasses, textColor)}>\n <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n <span\n ref={contentRef}\n className=\"pr-1\"\n dangerouslySetInnerHTML={{\n __html: safeContent,\n }}\n ></span>\n {buttonLabel &&\n (isSafeButtonLink ? (\n <a\n href={buttonLink}\n className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\"\n >\n {buttonLabel}\n </a>\n ) : (\n <span className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n {buttonLabel}\n </span>\n ))}\n </div>\n\n {closeBtn && (\n <button\n type=\"button\"\n className=\"ml-auto h-5 w-5 border-none bg-none self-baseline 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.25rem\"\n color={textColor}\n />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","useState","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","Notice","buttonLink","buttonLabel","bodyText","title","config","closeBtn","bgColor","textColor","onClose","contentRef","isClosing","setIsClosing","cleanup","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","isSafeButtonLink","test","div","className","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","a","href","button","type","onClick","setTimeout","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,MAAM,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CA6B3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,OAAS,CAAC,CACdC,UAAU,CACVC,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CC,UAAYV,gBAAgB,CAC5BW,OAAO,CACK,IACZ,MAAMC,WAAanB,OAAwB,MAC3C,KAAM,CAACoB,UAAWC,aAAa,CAAGpB,SAAS,OAC3CK,iBAAiBa,YAEjBpB,UAAU,KACR,MAAMuB,QAAUjB,cAAc,CAC5BkB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUZ,QAAQY,SAClBC,SAAUb,QAAQa,SAClBC,QAAS,CACPC,SAAUf,QAAQc,SAASC,UAAY,KACzC,CACF,GAEA,OAAOP,OACT,EAAG,CAACR,QAAQY,SAAUZ,QAAQa,SAAUb,QAAQc,SAASC,SAAS,EAElE,MAAMC,YAAc5B,UAAU6B,QAAQ,CAACnB,UAAY,GAAI,CACrDoB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAEA,MAAMC,iBACJ,OAAOzB,aAAe,UACrB,CAAA,YAAY0B,IAAI,CAAC1B,aAAe,eAAe0B,IAAI,CAAC1B,WAAU,EAGjE,OACE,oBAAC2B,OACCC,UAAWlC,GACT,kCACAgB,UACI,6EACA,0BACJJ,QACAC,WAEFsB,UAAQ,aAER,oBAACF,OAAIC,UAAU,4DACb,oBAACD,OAAIC,UAAWlC,GAAGI,sBAAuBS,YACxC,oBAACuB,UAAOF,UAAU,oCAAoCzB,OACtD,oBAAC4B,QACCC,IAAKvB,WACLmB,UAAU,
|
|
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:bg-orange-1100\",\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 const isSafeButtonLink =\n typeof buttonLink === \"string\" &&\n (/^\\/(?!\\/)/.test(buttonLink) || /^https?:\\/\\//.test(buttonLink));\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]\",\n isClosing\n ? \"ui-announcement-hidden max-h-0 -translate-y-full opacity-0 overflow-hidden\"\n : \"ui-announcement-visible\",\n bgColor,\n textColor,\n )}\n data-id=\"ui-notice\"\n >\n <div className=\"ui-grid-px py-4 max-w-screen-xl mx-auto flex items-start\">\n <div className={cn(contentWrapperClasses, textColor)}>\n <strong className=\"font-bold whitespace-nowrap pr-1\">{title}</strong>\n <span\n ref={contentRef}\n className=\"pr-1\"\n // Sanitised inline-markup allowlist (a + relative href) applied above\n // via DOMPurify. Slice 3a replaces the local config with the shared\n // sanitizeInlineMarkup helper.\n // eslint-disable-next-line react/no-danger\n dangerouslySetInnerHTML={{\n __html: safeContent,\n }}\n ></span>\n {buttonLabel &&\n (isSafeButtonLink ? (\n <a\n href={buttonLink}\n className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\"\n >\n {buttonLabel}\n </a>\n ) : (\n <span className=\"focus-base transition-colors cursor-pointer whitespace-nowrap text-gui-blue-default-light dark:text-gui-blue-default-dark\">\n {buttonLabel}\n </span>\n ))}\n </div>\n\n {closeBtn && (\n <button\n type=\"button\"\n className=\"ml-auto h-5 w-5 border-none bg-none self-baseline 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.25rem\"\n color={textColor}\n />\n </button>\n )}\n </div>\n </div>\n );\n};\n\nexport default Notice;\n"],"names":["React","useEffect","useRef","useState","DOMPurify","Icon","cn","NoticeScripts","useRailsUjsLinks","defaultTextColor","contentWrapperClasses","Notice","buttonLink","buttonLabel","bodyText","title","config","closeBtn","bgColor","textColor","onClose","contentRef","isClosing","setIsClosing","cleanup","bannerContainer","document","querySelector","cookieId","noticeId","options","collapse","safeContent","sanitize","ALLOWED_TAGS","ALLOWED_ATTR","ALLOWED_URI_REGEXP","isSafeButtonLink","test","div","className","data-id","strong","span","ref","dangerouslySetInnerHTML","__html","a","href","button","type","onClick","setTimeout","dispatchEvent","CustomEvent","name","size","color"],"mappings":"AAAA,OAAOA,OAASC,SAAS,CAAEC,MAAM,CAAEC,QAAQ,KAAQ,OAAQ,AAC3D,QAAOC,cAAe,WAAY,AAGlC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,eAAgB,AAC/B,QAAOC,kBAAmB,uBAAwB,AAClD,QAAOC,qBAAsB,6BAA8B,CA6B3D,MAAMC,iBAAmB,0CAEzB,MAAMC,sBAAwB,qCAE9B,MAAMC,OAAS,CAAC,CACdC,UAAU,CACVC,WAAW,CACXC,QAAQ,CACRC,KAAK,CACLC,MAAM,CACNC,QAAQ,CACRC,QAAU,mCAAmC,CAC7CC,UAAYV,gBAAgB,CAC5BW,OAAO,CACK,IACZ,MAAMC,WAAanB,OAAwB,MAC3C,KAAM,CAACoB,UAAWC,aAAa,CAAGpB,SAAS,OAC3CK,iBAAiBa,YAEjBpB,UAAU,KACR,MAAMuB,QAAUjB,cAAc,CAC5BkB,gBAAiBC,SAASC,aAAa,CAAC,yBACxCC,SAAUZ,QAAQY,SAClBC,SAAUb,QAAQa,SAClBC,QAAS,CACPC,SAAUf,QAAQc,SAASC,UAAY,KACzC,CACF,GAEA,OAAOP,OACT,EAAG,CAACR,QAAQY,SAAUZ,QAAQa,SAAUb,QAAQc,SAASC,SAAS,EAElE,MAAMC,YAAc5B,UAAU6B,QAAQ,CAACnB,UAAY,GAAI,CACrDoB,aAAc,CAAC,IAAI,CACnBC,aAAc,CAAC,OAAQ,cAAc,CACrCC,mBAAoB,SACtB,GAEA,MAAMC,iBACJ,OAAOzB,aAAe,UACrB,CAAA,YAAY0B,IAAI,CAAC1B,aAAe,eAAe0B,IAAI,CAAC1B,WAAU,EAGjE,OACE,oBAAC2B,OACCC,UAAWlC,GACT,kCACAgB,UACI,6EACA,0BACJJ,QACAC,WAEFsB,UAAQ,aAER,oBAACF,OAAIC,UAAU,4DACb,oBAACD,OAAIC,UAAWlC,GAAGI,sBAAuBS,YACxC,oBAACuB,UAAOF,UAAU,oCAAoCzB,OACtD,oBAAC4B,QACCC,IAAKvB,WACLmB,UAAU,OAKVK,wBAAyB,CACvBC,OAAQd,WACV,IAEDnB,aACEwB,CAAAA,iBACC,oBAACU,KACCC,KAAMpC,WACN4B,UAAU,6HAET3B,aAGH,oBAAC8B,QAAKH,UAAU,6HACb3B,YAEL,GAGHI,UACC,oBAACgC,UACCC,KAAK,SACLV,UAAU,0HACVW,QAAS,KACP5B,aAAa,MACb6B,WAAW,KACT1B,SAAS2B,aAAa,CAAC,IAAIC,YAAY,kBACvClC,WACF,EAAG,IACL,GAEA,oBAACf,MACCkD,KAAK,0BACLC,KAAK,UACLC,MAAOtC,cAOrB,CAEA,gBAAeR,MAAO"}
|
package/core/Slider.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import React,{useCallback,
|
|
1
|
+
import React,{useCallback,useSyncExternalStore}from"react";import useEmblaCarousel from"embla-carousel-react";import Autoplay from"embla-carousel-autoplay";import Icon from"./Icon";import cn from"./utils/cn";const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:cn("flex gap-1 left-1/2",isInline?"bottom-0":"absolute bottom-0 transform -translate-x-1/2")},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-10 h-1 mx-px rounded-full bg-neutral-500"},i===activeIndex&&React.createElement("span",{className:"absolute inset-0 rounded-full bg-active-orange",style:{animation:`fillAnimation ${interval}ms linear`}})):React.createElement("li",{key:i},React.createElement("span",{className:cn("ui-slider-marker",i===activeIndex?"text-active-orange":"text-cool-black"),"data-id":"slider-marker"},"⬤"))))};const Slider=({children,options})=>{const interval=options?.interval??1e4;const isInline=options?.controlPosition==="inline";const[emblaRef,emblaApi]=useEmblaCarousel({loop:true,duration:30},[Autoplay({delay:interval,stopOnInteraction:false})]);const scrollPrev=useCallback(()=>{if(emblaApi)emblaApi.scrollPrev()},[emblaApi]);const scrollNext=useCallback(()=>{if(emblaApi)emblaApi.scrollNext()},[emblaApi]);const subscribeToEmbla=useCallback(notify=>{if(!emblaApi)return()=>{};emblaApi.on("select",notify).on("reInit",notify);return()=>{emblaApi.off("select",notify).off("reInit",notify)}},[emblaApi]);const getActiveIndex=useCallback(()=>emblaApi?.selectedScrollSnap()??0,[emblaApi]);const activeIndex=useSyncExternalStore(subscribeToEmbla,getActiveIndex,()=>0);return React.createElement("div",{className:"relative"},React.createElement("div",{className:"overflow-hidden w-full py-10",ref:emblaRef},React.createElement("div",{className:"flex"},children.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]"},child)))),React.createElement("div",{className:cn("flex items-center pointer-events-none",isInline?"ui-standard-container justify-center gap-6 -mt-4":"sm:flex sm:absolute inset-0 justify-between")},React.createElement("button",{className:cn(isInline?"w-8 h-8":"hidden sm:flex w-12 h-12","pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left"),onClick:scrollPrev},React.createElement("div",{className:"ui-icon-cta-holder flex w-12"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-left-outline",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:interval,intervalIndicator:options?.intervalIndicator,isInline:isInline}),React.createElement("button",{className:cn(isInline?"w-8 h-8":"hidden sm:flex w-12 h-12","pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right"),onClick:scrollNext},React.createElement("div",{className:cn("ui-icon-cta-holder flex w-12",isInline?"-ml-3.5":"")},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"})),React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-long-right-outline",size:"1.5rem"}))))))};export default Slider;
|
|
2
2
|
//# sourceMappingURL=Slider.js.map
|
package/core/Slider.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, { ReactNode, useCallback,
|
|
1
|
+
{"version":3,"sources":["../../src/core/Slider.tsx"],"sourcesContent":["import React, { ReactNode, useCallback, useSyncExternalStore } from \"react\";\nimport useEmblaCarousel from \"embla-carousel-react\";\nimport Autoplay from \"embla-carousel-autoplay\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\n\ninterface SliderProps {\n children: ReactNode[];\n options?: {\n interval?: number;\n controlPosition?: \"inline\" | \"floating\";\n intervalIndicator?: boolean;\n };\n}\n\ninterface SliderIndicatorProps {\n numSlides: number;\n activeIndex: number;\n interval: number;\n intervalIndicator?: boolean;\n isInline?: boolean;\n}\n\nconst SlideIndicator = ({\n numSlides,\n activeIndex,\n interval,\n intervalIndicator,\n isInline,\n}: SliderIndicatorProps) => {\n return (\n <ul\n className={cn(\n \"flex gap-1 left-1/2\",\n isInline ? \"bottom-0\" : \"absolute bottom-0 transform -translate-x-1/2\",\n )}\n >\n {Array.from({ length: numSlides }, (_, i) =>\n intervalIndicator ? (\n <li\n key={i}\n className=\"relative w-10 h-1 mx-px rounded-full bg-neutral-500\"\n >\n {i === activeIndex && (\n <span\n className=\"absolute inset-0 rounded-full bg-active-orange\"\n style={{\n animation: `fillAnimation ${interval}ms linear`,\n }}\n ></span>\n )}\n </li>\n ) : (\n <li key={i}>\n <span\n className={cn(\n \"ui-slider-marker\",\n i === activeIndex ? \"text-active-orange\" : \"text-cool-black\",\n )}\n data-id=\"slider-marker\"\n >\n ⬤\n </span>\n </li>\n ),\n )}\n </ul>\n );\n};\n\nconst Slider = ({ children, options }: SliderProps) => {\n const interval = options?.interval ?? 10000;\n const isInline = options?.controlPosition === \"inline\";\n\n const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, duration: 30 }, [\n Autoplay({ delay: interval, stopOnInteraction: false }),\n ]);\n\n const scrollPrev = useCallback(() => {\n if (emblaApi) emblaApi.scrollPrev();\n }, [emblaApi]);\n\n const scrollNext = useCallback(() => {\n if (emblaApi) emblaApi.scrollNext();\n }, [emblaApi]);\n\n const subscribeToEmbla = useCallback(\n (notify: () => void) => {\n if (!emblaApi) return () => {};\n emblaApi.on(\"select\", notify).on(\"reInit\", notify);\n return () => {\n emblaApi.off(\"select\", notify).off(\"reInit\", notify);\n };\n },\n [emblaApi],\n );\n\n const getActiveIndex = useCallback(\n () => emblaApi?.selectedScrollSnap() ?? 0,\n [emblaApi],\n );\n\n const activeIndex = useSyncExternalStore(\n subscribeToEmbla,\n getActiveIndex,\n () => 0,\n );\n\n return (\n <div className=\"relative\">\n <div className=\"overflow-hidden w-full py-10\" ref={emblaRef}>\n <div className=\"flex\">\n {children.map((child, index) => (\n <div\n key={index}\n className=\"w-full flex-shrink-0 flex justify-center sm:px-[3.75rem]\"\n >\n {child}\n </div>\n ))}\n </div>\n </div>\n\n <div\n className={cn(\n \"flex items-center pointer-events-none\",\n isInline\n ? \"ui-standard-container justify-center gap-6 -mt-4\"\n : \"sm:flex sm:absolute inset-0 justify-between\",\n )}\n >\n <button\n className={cn(\n isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\",\n \"pointer-events-auto rounded border border-mid-grey hover:border-active-orange flex justify-center items-center ui-icon-cta ui-icon-cta-left\",\n )}\n onClick={scrollPrev}\n >\n <div className=\"ui-icon-cta-holder flex w-12\">\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-left-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n\n <SlideIndicator\n numSlides={children.length}\n activeIndex={activeIndex}\n interval={interval}\n intervalIndicator={options?.intervalIndicator}\n isInline={isInline}\n />\n\n <button\n className={cn(\n isInline ? \"w-8 h-8\" : \"hidden sm:flex w-12 h-12\",\n \"pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right\",\n )}\n onClick={scrollNext}\n >\n <div\n className={cn(\n \"ui-icon-cta-holder flex w-12\",\n isInline ? \"-ml-3.5\" : \"\",\n )}\n >\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n <div className=\"w-full h-full flex-shrink-0 flex items-center justify-center\">\n <Icon name=\"icon-gui-arrow-long-right-outline\" size=\"1.5rem\" />\n </div>\n </div>\n </button>\n </div>\n </div>\n );\n};\n\nexport default Slider;\n"],"names":["React","useCallback","useSyncExternalStore","useEmblaCarousel","Autoplay","Icon","cn","SlideIndicator","numSlides","activeIndex","interval","intervalIndicator","isInline","ul","className","Array","from","length","_","i","li","key","span","style","animation","data-id","Slider","children","options","controlPosition","emblaRef","emblaApi","loop","duration","delay","stopOnInteraction","scrollPrev","scrollNext","subscribeToEmbla","notify","on","off","getActiveIndex","selectedScrollSnap","div","ref","map","child","index","button","onClick","name","size"],"mappings":"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"}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.9632 0L22.6314 12.5932V12.5903V0.0290581H25.292V12.6495L39.0214 0V14.3581H44.6582V35.0683H39.0387V47.8534L25.292 35.7759V47.9921H22.6314V35.9751L8.9787 48V35.0683H3.34174V14.3581H8.9632V0ZM20.6255 16.9862H6.00238V32.4401H8.97536V27.5654L20.6255 16.9862ZM11.6392 28.7315V42.1355L22.6314 32.4539V18.7475L11.6392 28.7315ZM25.3686 32.3259V18.7346L36.3639 28.7192V35.0683H36.378V41.9986L25.3686 32.3259ZM39.0387 32.4401H41.9975V16.9862H27.4833L39.0387 27.4558V32.4401ZM36.3607 14.3581V6.04531L27.3382 14.3581H36.3607ZM20.6462 14.3581H11.6239V6.04531L20.6462 14.3581Z" fill="currentColor"/>
|
|
3
|
+
</svg>
|