@ably/ui 17.5.8-dev.e2e956ae → 17.6.1-dev.09b2f62e
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/README.md +41 -26
- package/core/Header.js +1 -1
- package/core/Header.js.map +1 -1
- package/core/Icon/components/icon-tech-claude-mono.js +2 -0
- package/core/Icon/components/icon-tech-claude-mono.js.map +1 -0
- package/core/Icon/components/icon-tech-claude.js +2 -0
- package/core/Icon/components/icon-tech-claude.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/Meganav.js +1 -1
- package/core/Meganav.js.map +1 -1
- package/core/Notice.js +1 -1
- package/core/Notice.js.map +1 -1
- package/core/Pricing/PricingCards.js +1 -1
- package/core/Pricing/PricingCards.js.map +1 -1
- package/core/Tooltip.js.map +1 -1
- package/core/icons/tech/icon-tech-claude-mono.svg +5 -0
- package/core/icons/tech/icon-tech-claude.svg +3 -0
- package/core/remote-blogs-posts.js.map +1 -1
- package/core/remote-session-data.js.map +1 -1
- package/core/sprites-tech.svg +1 -1
- package/index.d.ts +35 -5
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/core/Pricing/PricingCards.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport throttle from \"lodash.throttle\";\nimport type { PricingDataFeature } from \"./types\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport { IconName } from \"../Icon/types\";\nimport Tooltip from \"../Tooltip\";\nimport cn from \"../utils/cn\";\n\nexport type PricingCardsProps = {\n data: PricingDataFeature[];\n delimiter?: IconName | \"blank\";\n};\n\nconst PricingCards = ({ data, delimiter }: PricingCardsProps) => {\n const descriptionsRef = useRef<(HTMLSpanElement | null)[]>([]);\n const [descriptionHeight, setDescriptionHeight] = useState<number>(0);\n const [hoveredBottomCta, setHoveredBottomCta] = useState<number | null>(null);\n const [animationBottomCtaPhase, setAnimationBottomCtaPhase] = useState<\n \"idle\" | \"fading-out\" | \"fading-in\"\n >(\"idle\");\n\n const determineMaxDescriptionHeight = throttle(() => {\n if (descriptionsRef.current.length) {\n setDescriptionHeight(\n Math.max(\n ...descriptionsRef.current.map(\n (description) => description?.getBoundingClientRect().height ?? 0,\n ),\n ),\n );\n }\n }, 100);\n\n useEffect(() => {\n determineMaxDescriptionHeight();\n\n window.addEventListener(\"resize\", determineMaxDescriptionHeight);\n\n return () => {\n window.removeEventListener(\"resize\", determineMaxDescriptionHeight);\n determineMaxDescriptionHeight.cancel();\n };\n }, []);\n\n useEffect(() => {\n if (hoveredBottomCta !== null && animationBottomCtaPhase === \"fading-out\") {\n const timer = setTimeout(() => {\n setAnimationBottomCtaPhase(\"fading-in\");\n }, 300);\n return () => clearTimeout(timer);\n }\n }, [hoveredBottomCta, animationBottomCtaPhase]);\n\n const handleCtaHover = (index: number) => {\n setHoveredBottomCta(index);\n setAnimationBottomCtaPhase(\"fading-out\");\n };\n\n const handleCtaLeave = () => {\n setHoveredBottomCta(null);\n setAnimationBottomCtaPhase(\"idle\");\n };\n\n const delimiterColumn = (index: number) =>\n delimiter && index % 2 === 1 ? (\n <div\n className={cn(\"flex items-center justify-center w-full @[920px]:w-5\", {\n \"m-2\": delimiter !== \"blank\",\n })}\n >\n {delimiter !== \"blank\" ? (\n <Icon\n name={delimiter}\n size=\"20px\"\n additionalCSS={\"text-neutral-800 dark:text-neutral-500\"}\n />\n ) : null}\n </div>\n ) : null;\n\n const gridRules = {\n nonDelimited: \"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4\",\n delimited: \"flex flex-col items-center @[920px]:flex-row\",\n };\n\n const borderClasses = (color?: \"neutral\" | \"blue\" | \"orange\") => {\n const classes: Record<\n string,\n {\n border: string;\n bg: string;\n }\n > = {\n neutral: {\n border: \"border-neutral-600 dark:border-neutral-700\",\n bg: \"bg-neutral-600 dark:bg-neutral-700\",\n },\n blue: {\n border: \"border-blue-400 dark:border-blue-600\",\n bg: \"bg-blue-400 dark:bg-blue-600\",\n },\n orange: {\n border: \"border-orange-600 dark:border-orange-600\",\n bg: \"bg-orange-600 dark:bg-orange-600\",\n },\n };\n\n if (color && classes[color]) {\n return classes[color];\n }\n };\n\n return (\n <div\n className=\"@container flex justify-center\"\n data-testid={\n delimiter ? \"delimited-pricing-card-group\" : \"pricing-card-group\"\n }\n >\n <div\n className={cn(\n \"gap-2\",\n delimiter ? gridRules.delimited : gridRules.nonDelimited,\n )}\n >\n {data.map(\n (\n { title, description, price, cta, sections, border, bottomCta },\n index,\n ) => (\n <Fragment key={title.content}>\n {delimiterColumn(index)}\n <div\n className={cn(\n \"relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200\",\n borderClasses(border?.color)?.border ??\n \"border-neutral-200 dark:border-neutral-1100\",\n border?.style,\n { \"@[520px]:flex-row @[920px]:flex-col\": delimiter },\n )}\n data-testid={\n delimiter ? \"delimited-pricing-card\" : \"pricing-card\"\n }\n >\n {border ? (\n <div\n className={cn(\n \"flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest\",\n borderClasses(border?.color)?.border,\n borderClasses(border?.color)?.bg,\n )}\n >\n {border.text}\n </div>\n ) : null}\n <div\n className={cn(`relative z-10 flex flex-col gap-4`, {\n \"@[520px]:flex-1 @[920px]:flex-none\": delimiter,\n })}\n >\n <div>\n <div className=\"flex items-center mb-1\">\n <p className={cn(title.className, title.color)}>\n {title.content}\n </p>\n {title.tooltip ? (\n <Tooltip\n interactive={typeof title.tooltip !== \"string\"}\n iconSize=\"1.25rem\"\n >\n {title.tooltip}\n </Tooltip>\n ) : null}\n </div>\n <p\n className={cn(\n \"ui-text-h1 text-h1-xl h-5 block\",\n description.className,\n description.color,\n )}\n style={{ height: descriptionHeight }}\n >\n <span ref={(el) => (descriptionsRef.current[index] = el)}>\n {description.content}\n </span>\n </p>\n </div>\n <div\n className={cn(\"flex items-end gap-2\", {\n \"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end\":\n delimiter,\n })}\n >\n <p className=\"ui-text-h1 text-h1-xl font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000\">\n {price.amount}\n </p>\n <div className=\"ui-text-p3 text-neutral-1300 dark:text-neutral-000\">\n {price.content}\n </div>\n </div>\n {cta ? (\n <div className=\"group\">\n <LinkButton\n className={cn(\"w-full\", cta.className)}\n variant={\n cta.url === \"/contact\" ? \"priority\" : \"primary\"\n }\n href={cta.url}\n onClick={cta.onClick}\n disabled={cta.disabled}\n rightIcon=\"icon-gui-arrow-right-outline\"\n iconColor={cta.iconColor}\n >\n {cta.text}\n </LinkButton>\n </div>\n ) : delimiter ? null : (\n <div className=\"flex items-center justify-center h-12 w-full\">\n <hr className=\"border-neutral-500 dark:border-neutral-800 w-16\" />\n </div>\n )}\n </div>\n <div className=\"flex flex-col gap-4 relative z-10 flex-grow\">\n {sections.map(({ title, items, listItemColors }) => (\n <div key={title} className=\"flex flex-col gap-2\">\n <p className=\"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4\">\n {title}\n </p>\n <div className={cn({ \"flex flex-col\": !delimiter })}>\n {items.map((item, index) =>\n Array.isArray(item) ? (\n <div\n key={item[0]}\n className={cn(\n \"flex justify-between gap-4 px-2 -mx-2\",\n index === 0 ? \"py-2\" : \"py-1\",\n index > 0 && index % 2 === 0\n ? \"bg-blue-100 dark:bg-blue-900 rounded-md\"\n : \"\",\n )}\n >\n {item.map((subItem, subIndex) => (\n <span\n key={subItem}\n className={cn(\n \"ui-text-p3\",\n index === 0 ? \"font-bold\" : \"font-medium\",\n \"text-neutral-1000 dark:text-neutral-300 leading-[1.4rem]\",\n subIndex % 2 === 1 ? \"text-right\" : \"\",\n )}\n >\n {subItem}\n </span>\n ))}\n </div>\n ) : (\n <div key={item} className=\"flex items-start\">\n {listItemColors ? (\n <Icon\n name=\"icon-gui-check-circled-fill\"\n color={listItemColors.background}\n secondaryColor={listItemColors.foreground}\n size=\"16px\"\n additionalCSS=\"mt-1\"\n />\n ) : null}\n <div\n className={cn(\n `flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`,\n )}\n >\n {item}\n </div>\n </div>\n ),\n )}\n </div>\n </div>\n ))}\n </div>\n\n {bottomCta && (\n <div>\n <div className=\"border-t border-neutral-200 dark:border-neutral-1100 -mx-6\"></div>\n <a\n href={bottomCta.url}\n className={cn(\n \"ui-text-label4 font-semibold block group/bottom-cta cursor-pointer ml-2 pt-4\",\n \"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus\",\n )}\n onMouseEnter={() => handleCtaHover(index)}\n onMouseLeave={handleCtaLeave}\n >\n {bottomCta.text}\n <Icon\n name=\"icon-gui-arrow-down-outline\"\n size=\"12px\"\n color={bottomCta.iconColor}\n additionalCSS={cn(\n \"align-middle ml-2 relative transition-all duration-300 ease-in-out\",\n hoveredBottomCta === index &&\n animationBottomCtaPhase === \"fading-out\"\n ? \"opacity-0 -bottom-4\"\n : hoveredBottomCta === index &&\n animationBottomCtaPhase === \"fading-in\"\n ? \"opacity-100 bottom-0\"\n : \"opacity-100 bottom-0\",\n )}\n />\n </a>\n </div>\n )}\n </div>\n {delimiterColumn(index)}\n </Fragment>\n ),\n )}\n </div>\n </div>\n );\n};\n\nexport default PricingCards;\n"],"names":["React","Fragment","useEffect","useRef","useState","throttle","Icon","LinkButton","Tooltip","cn","PricingCards","data","delimiter","descriptionsRef","descriptionHeight","setDescriptionHeight","hoveredBottomCta","setHoveredBottomCta","animationBottomCtaPhase","setAnimationBottomCtaPhase","determineMaxDescriptionHeight","current","length","Math","max","map","description","getBoundingClientRect","height","window","addEventListener","removeEventListener","cancel","timer","setTimeout","clearTimeout","handleCtaHover","index","handleCtaLeave","delimiterColumn","div","className","name","size","additionalCSS","gridRules","nonDelimited","delimited","borderClasses","color","classes","neutral","border","bg","blue","orange","data-testid","title","price","cta","sections","bottomCta","key","content","style","text","p","tooltip","interactive","iconSize","span","ref","el","amount","variant","url","href","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground","a","onMouseEnter","onMouseLeave"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../src/core/Pricing/PricingCards.tsx"],"sourcesContent":["import React, { Fragment, useEffect, useRef, useState } from \"react\";\nimport throttle from \"lodash.throttle\";\nimport type { PricingDataFeature } from \"./types\";\nimport Icon from \"../Icon\";\nimport LinkButton from \"../LinkButton\";\nimport { IconName } from \"../Icon/types\";\nimport Tooltip from \"../Tooltip\";\nimport cn from \"../utils/cn\";\n\nexport type PricingCardsProps = {\n data: PricingDataFeature[];\n delimiter?: IconName | \"blank\";\n};\n\nconst PricingCards = ({ data, delimiter }: PricingCardsProps) => {\n const descriptionsRef = useRef<(HTMLSpanElement | null)[]>([]);\n const [descriptionHeight, setDescriptionHeight] = useState<number>(0);\n\n const determineMaxDescriptionHeight = throttle(() => {\n if (descriptionsRef.current.length) {\n setDescriptionHeight(\n Math.max(\n ...descriptionsRef.current.map(\n (description) => description?.getBoundingClientRect().height ?? 0,\n ),\n ),\n );\n }\n }, 100);\n\n useEffect(() => {\n determineMaxDescriptionHeight();\n\n window.addEventListener(\"resize\", determineMaxDescriptionHeight);\n\n return () => {\n window.removeEventListener(\"resize\", determineMaxDescriptionHeight);\n determineMaxDescriptionHeight.cancel();\n };\n }, []);\n\n const delimiterColumn = (index: number) =>\n delimiter && index % 2 === 1 ? (\n <div\n className={cn(\"flex items-center justify-center w-full @[920px]:w-5\", {\n \"m-2\": delimiter !== \"blank\",\n })}\n >\n {delimiter !== \"blank\" ? (\n <Icon\n name={delimiter}\n size=\"20px\"\n additionalCSS={\"text-neutral-800 dark:text-neutral-500\"}\n />\n ) : null}\n </div>\n ) : null;\n\n const gridRules = {\n nonDelimited: \"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4\",\n delimited: \"flex flex-col items-center @[920px]:flex-row\",\n };\n\n const borderClasses = (color?: \"neutral\" | \"blue\" | \"orange\") => {\n const classes: Record<\n string,\n {\n border: string;\n bg: string;\n }\n > = {\n neutral: {\n border: \"border-neutral-600 dark:border-neutral-700\",\n bg: \"bg-neutral-600 dark:bg-neutral-700\",\n },\n blue: {\n border: \"border-blue-400 dark:border-blue-600\",\n bg: \"bg-blue-400 dark:bg-blue-600\",\n },\n orange: {\n border: \"border-orange-600 dark:border-orange-600\",\n bg: \"bg-orange-600 dark:bg-orange-600\",\n },\n };\n\n if (color && classes[color]) {\n return classes[color];\n }\n };\n\n return (\n <div\n className=\"@container flex justify-center\"\n data-testid={\n delimiter ? \"delimited-pricing-card-group\" : \"pricing-card-group\"\n }\n >\n <div\n className={cn(\n \"gap-2\",\n delimiter ? gridRules.delimited : gridRules.nonDelimited,\n )}\n >\n {data.map(\n (\n { title, description, price, cta, sections, border, bottomCta },\n index,\n ) => (\n <Fragment key={title.content}>\n {delimiterColumn(index)}\n <div\n className={cn(\n \"relative border flex-1 px-6 pt-6 pb-4 flex flex-col gap-6 rounded-2xl group min-w-[17rem] backdrop-blur bg-neutral-100 dark:bg-neutral-1200\",\n borderClasses(border?.color)?.border ??\n \"border-neutral-200 dark:border-neutral-1100\",\n border?.style,\n { \"@[520px]:flex-row @[920px]:flex-col\": delimiter },\n )}\n data-testid={\n delimiter ? \"delimited-pricing-card\" : \"pricing-card\"\n }\n >\n {border ? (\n <div\n className={cn(\n \"flex items-center absolute z-10 -top-3 self-center font-semibold uppercase text-neutral-000 font-sans h-6 text-[11px] px-2.5 py-0.5 rounded-2xl select-none tracking-widest\",\n borderClasses(border?.color)?.border,\n borderClasses(border?.color)?.bg,\n )}\n >\n {border.text}\n </div>\n ) : null}\n <div\n className={cn(`relative z-10 flex flex-col gap-4`, {\n \"@[520px]:flex-1 @[920px]:flex-none\": delimiter,\n })}\n >\n <div>\n <div className=\"flex items-center mb-1\">\n <p className={cn(title.className, title.color)}>\n {title.content}\n </p>\n {title.tooltip ? (\n <Tooltip\n interactive={typeof title.tooltip !== \"string\"}\n iconSize=\"1.25rem\"\n >\n {title.tooltip}\n </Tooltip>\n ) : null}\n </div>\n <p\n className={cn(\n \"ui-text-h1 text-h1-xl h-5 block\",\n description.className,\n description.color,\n )}\n style={{ height: descriptionHeight }}\n >\n <span ref={(el) => (descriptionsRef.current[index] = el)}>\n {description.content}\n </span>\n </p>\n </div>\n <div\n className={cn(\"flex items-end gap-2\", {\n \"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end\":\n delimiter,\n })}\n >\n <p className=\"ui-text-h1 text-h1-xl font-medium tracking-tight leading-none text-neutral-1300 dark:text-neutral-000\">\n {price.amount}\n </p>\n <div className=\"ui-text-p3 text-neutral-1300 dark:text-neutral-000\">\n {price.content}\n </div>\n </div>\n {cta ? (\n <div className=\"group\">\n <LinkButton\n className={cn(\"w-full\", cta.className)}\n variant={\n cta.url === \"/contact\" ? \"priority\" : \"primary\"\n }\n href={cta.url}\n onClick={cta.onClick}\n disabled={cta.disabled}\n rightIcon=\"icon-gui-arrow-right-outline\"\n iconColor={cta.iconColor}\n >\n {cta.text}\n </LinkButton>\n </div>\n ) : delimiter ? null : (\n <div className=\"flex items-center justify-center h-12 w-full\">\n <hr className=\"border-neutral-500 dark:border-neutral-800 w-16\" />\n </div>\n )}\n </div>\n <div className=\"flex flex-col gap-4 relative z-10 flex-grow\">\n {sections.map(({ title, items, listItemColors }) => (\n <div key={title} className=\"flex flex-col gap-3\">\n <p className=\"text-neutral-700 dark:text-neutral-600 font-mono uppercase text-overline2 font-medium tracking-[0.12em] h-4\">\n {title}\n </p>\n <div className={cn({ \"flex flex-col\": !delimiter })}>\n {items.map((item, index) =>\n Array.isArray(item) ? (\n <div\n key={item[0]}\n className={cn(\n \"flex justify-between gap-4 px-2 -mx-2\",\n index === 0 ? \"py-2\" : \"py-1\",\n index > 0 && index % 2 === 0\n ? \"bg-blue-100 dark:bg-blue-900 rounded-md\"\n : \"\",\n )}\n >\n {item.map((subItem, subIndex) => (\n <span\n key={subItem}\n className={cn(\n \"ui-text-p3\",\n index === 0 ? \"font-bold\" : \"font-medium\",\n \"text-neutral-1000 dark:text-neutral-300 leading-[1.4rem]\",\n subIndex % 2 === 1 ? \"text-right\" : \"\",\n )}\n >\n {subItem}\n </span>\n ))}\n </div>\n ) : (\n <div key={item} className=\"flex items-start gap-2\">\n {listItemColors ? (\n <Icon\n name=\"icon-gui-check-circled-fill\"\n color={listItemColors.background}\n secondaryColor={listItemColors.foreground}\n size=\"16px\"\n additionalCSS=\"mt-1\"\n />\n ) : null}\n <div\n className={cn(\n `flex-1 font-medium text-neutral-1000 dark:text-neutral-300 ui-text-p3`,\n )}\n >\n {item}\n </div>\n </div>\n ),\n )}\n </div>\n </div>\n ))}\n </div>\n\n {bottomCta && (\n <div>\n <div className=\"border-t border-neutral-200 dark:border-neutral-1100 -mx-6\"></div>\n <a\n href={bottomCta.url}\n className={cn(\n \"text-[13px] font-sans font-semibold group/bottom-cta cursor-pointer pt-4 flex items-center\",\n \"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1300 dark:hover:text-neutral-000 focus:outline-none focus-visible:outline-gui-focus\",\n )}\n >\n {bottomCta.text}\n <Icon\n name=\"icon-gui-arrow-down-outline\"\n size=\"12px\"\n color={bottomCta.iconColor}\n additionalCSS={cn(\n \"align-middle ml-2 relative transition-[bottom] bottom-0 group-hover/bottom-cta:-bottom-0.5\",\n )}\n />\n </a>\n </div>\n )}\n </div>\n {delimiterColumn(index)}\n </Fragment>\n ),\n )}\n </div>\n </div>\n );\n};\n\nexport default PricingCards;\n"],"names":["React","Fragment","useEffect","useRef","useState","throttle","Icon","LinkButton","Tooltip","cn","PricingCards","data","delimiter","descriptionsRef","descriptionHeight","setDescriptionHeight","determineMaxDescriptionHeight","current","length","Math","max","map","description","getBoundingClientRect","height","window","addEventListener","removeEventListener","cancel","delimiterColumn","index","div","className","name","size","additionalCSS","gridRules","nonDelimited","delimited","borderClasses","color","classes","neutral","border","bg","blue","orange","data-testid","title","price","cta","sections","bottomCta","key","content","style","text","p","tooltip","interactive","iconSize","span","ref","el","amount","variant","url","href","onClick","disabled","rightIcon","iconColor","hr","items","listItemColors","item","Array","isArray","subItem","subIndex","background","secondaryColor","foreground","a"],"mappings":"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"}
|
package/core/Tooltip.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/Tooltip.tsx"],"sourcesContent":["import React, {\n ButtonHTMLAttributes,\n HTMLAttributes,\n PropsWithChildren,\n ReactNode,\n useRef,\n useState,\n MouseEvent,\n RefObject,\n useEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\n\ntype TooltipProps = {\n triggerElement?: ReactNode;\n triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n tooltipProps?: HTMLAttributes<HTMLDivElement>;\n interactive?: boolean;\n iconSize?: IconSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n children,\n triggerElement,\n triggerProps,\n tooltipProps,\n interactive = false,\n iconSize = \"1rem\",\n ...rest\n}: PropsWithChildren<TooltipProps>) => {\n const [open, setOpen] = useState(false);\n const [fadeOut, setFadeOut] = useState(false);\n const [position, setPosition] = useState({ x: 0, y: 0, orientation: \"top\" });\n const offset = 8;\n const reference = useRef<HTMLButtonElement>(null);\n const floating = useRef<HTMLDivElement>(null);\n const fadeOutTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n useEffect(() => {\n if (open) {\n const floatingRect = floating.current?.getBoundingClientRect();\n const referenceRect = reference.current?.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n let orientation = \"top\";\n\n if (floatingRect && referenceRect) {\n let x =\n referenceRect.left +\n referenceRect.width / 2 -\n floatingRect.width / 2 +\n window.scrollX;\n let y =\n referenceRect.top - floatingRect.height - offset + window.scrollY;\n\n // Adjust if tooltip goes off the right edge\n if (x + floatingRect.width > viewportWidth + window.scrollX) {\n x = viewportWidth + window.scrollX - floatingRect.width - offset;\n orientation = \"left\";\n }\n\n // Adjust if tooltip goes off the left edge\n if (x < window.scrollX) {\n x = window.scrollX + offset;\n orientation = \"right\";\n }\n\n // Adjust if tooltip goes off the top edge\n if (y < window.scrollY) {\n y = referenceRect.bottom + offset + window.scrollY;\n orientation = \"bottom\";\n }\n\n // Adjust if tooltip goes off the bottom edge\n if (y + floatingRect.height > viewportHeight + window.scrollY) {\n y = referenceRect.top - floatingRect.height - offset + window.scrollY;\n }\n\n setPosition({ x, y, orientation });\n }\n } else {\n setPosition({ x: 0, y: 0, orientation: \"top\" });\n }\n\n return () => {\n if (fadeOutTimeoutRef.current !== null) {\n clearTimeout(fadeOutTimeoutRef.current);\n }\n };\n }, [open]);\n\n const initiateFadeOut = () => {\n setFadeOut(true);\n fadeOutTimeoutRef.current = setTimeout(() => {\n setOpen(false);\n setFadeOut(false);\n }, 250);\n };\n\n const cursorTowardsTooltip = (\n event: MouseEvent,\n ref: RefObject<HTMLButtonElement>,\n ) => {\n if (!ref.current) {\n return false;\n }\n\n const { clientX, clientY } = event;\n const { x, y, width, height } = ref.current.getBoundingClientRect();\n const { orientation } = position;\n\n switch (orientation) {\n case \"top\":\n return clientX >= x && clientX <= x + width && clientY < y;\n case \"left\":\n return clientY >= y && clientY <= y + height && clientX < x;\n case \"right\":\n return clientY >= y && clientY <= y + height && clientX > x + width;\n case \"bottom\":\n return clientX >= x && clientX <= x + width && clientY > y + height;\n default:\n return false;\n }\n };\n\n const fadeOutIfNotWithinTrigger = (event: MouseEvent) => {\n if (!reference.current) return;\n\n const { clientX, clientY } = event;\n const { x, y, width, height } = reference.current.getBoundingClientRect();\n const withinBounds =\n clientX >= x &&\n clientX <= x + width &&\n clientY >= y &&\n clientY <= y + height;\n\n if (!withinBounds) {\n initiateFadeOut();\n }\n };\n\n return (\n <div {...rest} className={cn(\"inline-flex ml-2\", rest?.className)}>\n <button\n onMouseEnter={() => setOpen(true)}\n onMouseLeave={(event) => {\n if (!interactive || !cursorTowardsTooltip(event, reference)) {\n initiateFadeOut();\n }\n }}\n type=\"button\"\n ref={reference}\n aria-describedby=\"tooltip\"\n {...triggerProps}\n className={cn(\n \"p-0 relative focus:outline-none h-[1rem]\",\n triggerProps?.className,\n )}\n >\n {triggerElement ?? (\n <Icon\n name=\"icon-gui-information-circle-outline\"\n color=\"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1000 dark:hover:text-neutral-300\"\n size={iconSize as IconSize}\n />\n )}\n </button>\n\n {open\n ? createPortal(\n <div\n role=\"tooltip\"\n ref={floating}\n onMouseLeave={(event) =>\n setTimeout(() => fadeOutIfNotWithinTrigger(event), 250)\n }\n style={{\n top: position.y,\n left: position.x,\n zIndex: 1000,\n boxShadow: \"4px 4px 15px rgba(0, 0, 0, 0.2)\",\n }}\n {...tooltipProps}\n className={cn(\n \"bg-neutral-300 dark:bg-neutral-1000 text-neutral-1100 dark:text-neutral-200 ui-text-p3 font-medium p-4\",\n { \"pointer-events-none\": !interactive },\n \"rounded-lg absolute\",\n tooltipProps?.className,\n { \"animate-[tooltipExit_0.25s_ease-in-out]\": fadeOut },\n { \"animate-[tooltipEntry_0.25s_ease-in-out]\": !fadeOut },\n )}\n >\n <div className=\"max-w-60 w-auto\">{children}</div>\n </div>,\n document.body,\n )\n : null}\n </div>\n );\n};\n\nexport default Tooltip;\n"],"names":["React","useRef","useState","useEffect","createPortal","Icon","cn","Tooltip","children","triggerElement","triggerProps","tooltipProps","interactive","iconSize","rest","open","setOpen","fadeOut","setFadeOut","position","setPosition","x","y","orientation","offset","reference","floating","fadeOutTimeoutRef","floatingRect","current","getBoundingClientRect","referenceRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","left","width","scrollX","top","height","scrollY","bottom","clearTimeout","initiateFadeOut","setTimeout","cursorTowardsTooltip","event","ref","clientX","clientY","fadeOutIfNotWithinTrigger","withinBounds","div","className","button","onMouseEnter","onMouseLeave","type","aria-describedby","name","color","size","role","style","zIndex","boxShadow","document","body"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../src/core/Tooltip.tsx"],"sourcesContent":["import React, {\n ButtonHTMLAttributes,\n HTMLAttributes,\n PropsWithChildren,\n ReactNode,\n useRef,\n useState,\n MouseEvent,\n RefObject,\n useEffect,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport Icon from \"./Icon\";\nimport cn from \"./utils/cn\";\nimport { IconSize } from \"./Icon/types\";\n\ntype TooltipProps = {\n triggerElement?: ReactNode;\n triggerProps?: ButtonHTMLAttributes<HTMLButtonElement>;\n tooltipProps?: HTMLAttributes<HTMLDivElement>;\n interactive?: boolean;\n iconSize?: IconSize;\n} & HTMLAttributes<HTMLDivElement>;\n\nconst Tooltip = ({\n children,\n triggerElement,\n triggerProps,\n tooltipProps,\n interactive = false,\n iconSize = \"1rem\",\n ...rest\n}: PropsWithChildren<TooltipProps>) => {\n const [open, setOpen] = useState(false);\n const [fadeOut, setFadeOut] = useState(false);\n const [position, setPosition] = useState({ x: 0, y: 0, orientation: \"top\" });\n const offset = 8;\n const reference = useRef<HTMLButtonElement>(null);\n const floating = useRef<HTMLDivElement>(null);\n const fadeOutTimeoutRef = useRef<NodeJS.Timeout | null>(null);\n\n useEffect(() => {\n if (open) {\n const floatingRect = floating.current?.getBoundingClientRect();\n const referenceRect = reference.current?.getBoundingClientRect();\n const viewportWidth = window.innerWidth;\n const viewportHeight = window.innerHeight;\n let orientation = \"top\";\n\n if (floatingRect && referenceRect) {\n let x =\n referenceRect.left +\n referenceRect.width / 2 -\n floatingRect.width / 2 +\n window.scrollX;\n let y =\n referenceRect.top - floatingRect.height - offset + window.scrollY;\n\n // Adjust if tooltip goes off the right edge\n if (x + floatingRect.width > viewportWidth + window.scrollX) {\n x = viewportWidth + window.scrollX - floatingRect.width - offset;\n orientation = \"left\";\n }\n\n // Adjust if tooltip goes off the left edge\n if (x < window.scrollX) {\n x = window.scrollX + offset;\n orientation = \"right\";\n }\n\n // Adjust if tooltip goes off the top edge\n if (y < window.scrollY) {\n y = referenceRect.bottom + offset + window.scrollY;\n orientation = \"bottom\";\n }\n\n // Adjust if tooltip goes off the bottom edge\n if (y + floatingRect.height > viewportHeight + window.scrollY) {\n y = referenceRect.top - floatingRect.height - offset + window.scrollY;\n }\n\n setPosition({ x, y, orientation });\n }\n } else {\n setPosition({ x: 0, y: 0, orientation: \"top\" });\n }\n\n return () => {\n if (fadeOutTimeoutRef.current !== null) {\n clearTimeout(fadeOutTimeoutRef.current);\n }\n };\n }, [open]);\n\n const initiateFadeOut = () => {\n setFadeOut(true);\n fadeOutTimeoutRef.current = setTimeout(() => {\n setOpen(false);\n setFadeOut(false);\n }, 250);\n };\n\n const cursorTowardsTooltip = (\n event: MouseEvent,\n ref: RefObject<HTMLButtonElement>,\n ) => {\n if (!ref.current) {\n return false;\n }\n\n const { clientX, clientY } = event;\n const { x, y, width, height } = ref.current.getBoundingClientRect();\n const { orientation } = position;\n\n switch (orientation) {\n case \"top\":\n return clientX >= x && clientX <= x + width && clientY < y;\n case \"left\":\n return clientY >= y && clientY <= y + height && clientX < x;\n case \"right\":\n return clientY >= y && clientY <= y + height && clientX > x + width;\n case \"bottom\":\n return clientX >= x && clientX <= x + width && clientY > y + height;\n default:\n return false;\n }\n };\n\n const fadeOutIfNotWithinTrigger = (event: MouseEvent) => {\n if (!reference.current) return;\n\n const { clientX, clientY } = event;\n const { x, y, width, height } = reference.current.getBoundingClientRect();\n const withinBounds =\n clientX >= x &&\n clientX <= x + width &&\n clientY >= y &&\n clientY <= y + height;\n\n if (!withinBounds) {\n initiateFadeOut();\n }\n };\n\n return (\n <div {...rest} className={cn(\"inline-flex ml-2\", rest?.className)}>\n <button\n onMouseEnter={() => setOpen(true)}\n onMouseLeave={(event) => {\n if (!interactive || !cursorTowardsTooltip(event, reference)) {\n initiateFadeOut();\n }\n }}\n type=\"button\"\n ref={reference}\n aria-describedby=\"tooltip\"\n {...triggerProps}\n className={cn(\n \"p-0 relative focus:outline-none h-[1rem]\",\n triggerProps?.className,\n )}\n >\n {triggerElement ?? (\n <Icon\n name=\"icon-gui-information-circle-outline\"\n color=\"text-neutral-700 dark:text-neutral-600 hover:text-neutral-1000 dark:hover:text-neutral-300\"\n size={iconSize}\n />\n )}\n </button>\n\n {open\n ? createPortal(\n <div\n role=\"tooltip\"\n ref={floating}\n onMouseLeave={(event) =>\n setTimeout(() => fadeOutIfNotWithinTrigger(event), 250)\n }\n style={{\n top: position.y,\n left: position.x,\n zIndex: 1000,\n boxShadow: \"4px 4px 15px rgba(0, 0, 0, 0.2)\",\n }}\n {...tooltipProps}\n className={cn(\n \"bg-neutral-300 dark:bg-neutral-1000 text-neutral-1100 dark:text-neutral-200 ui-text-p3 font-medium p-4\",\n { \"pointer-events-none\": !interactive },\n \"rounded-lg absolute\",\n tooltipProps?.className,\n { \"animate-[tooltipExit_0.25s_ease-in-out]\": fadeOut },\n { \"animate-[tooltipEntry_0.25s_ease-in-out]\": !fadeOut },\n )}\n >\n <div className=\"max-w-60 w-auto\">{children}</div>\n </div>,\n document.body,\n )\n : null}\n </div>\n );\n};\n\nexport default Tooltip;\n"],"names":["React","useRef","useState","useEffect","createPortal","Icon","cn","Tooltip","children","triggerElement","triggerProps","tooltipProps","interactive","iconSize","rest","open","setOpen","fadeOut","setFadeOut","position","setPosition","x","y","orientation","offset","reference","floating","fadeOutTimeoutRef","floatingRect","current","getBoundingClientRect","referenceRect","viewportWidth","window","innerWidth","viewportHeight","innerHeight","left","width","scrollX","top","height","scrollY","bottom","clearTimeout","initiateFadeOut","setTimeout","cursorTowardsTooltip","event","ref","clientX","clientY","fadeOutIfNotWithinTrigger","withinBounds","div","className","button","onMouseEnter","onMouseLeave","type","aria-describedby","name","color","size","role","style","zIndex","boxShadow","document","body"],"mappings":"AAAA,OAAOA,OAKLC,MAAM,CACNC,QAAQ,CAGRC,SAAS,KACJ,OAAQ,AACf,QAASC,YAAY,KAAQ,WAAY,AACzC,QAAOC,SAAU,QAAS,AAC1B,QAAOC,OAAQ,YAAa,CAW5B,MAAMC,QAAU,CAAC,CACfC,QAAQ,CACRC,cAAc,CACdC,YAAY,CACZC,YAAY,CACZC,YAAc,KAAK,CACnBC,SAAW,MAAM,CACjB,GAAGC,KAC6B,IAChC,KAAM,CAACC,KAAMC,QAAQ,CAAGd,SAAS,OACjC,KAAM,CAACe,QAASC,WAAW,CAAGhB,SAAS,OACvC,KAAM,CAACiB,SAAUC,YAAY,CAAGlB,SAAS,CAAEmB,EAAG,EAAGC,EAAG,EAAGC,YAAa,KAAM,GAC1E,MAAMC,OAAS,EACf,MAAMC,UAAYxB,OAA0B,MAC5C,MAAMyB,SAAWzB,OAAuB,MACxC,MAAM0B,kBAAoB1B,OAA8B,MAExDE,UAAU,KACR,GAAIY,KAAM,CACR,MAAMa,aAAeF,SAASG,OAAO,EAAEC,wBACvC,MAAMC,cAAgBN,UAAUI,OAAO,EAAEC,wBACzC,MAAME,cAAgBC,OAAOC,UAAU,CACvC,MAAMC,eAAiBF,OAAOG,WAAW,CACzC,IAAIb,YAAc,MAElB,GAAIK,cAAgBG,cAAe,CACjC,IAAIV,EACFU,cAAcM,IAAI,CAClBN,cAAcO,KAAK,CAAG,EACtBV,aAAaU,KAAK,CAAG,EACrBL,OAAOM,OAAO,CAChB,IAAIjB,EACFS,cAAcS,GAAG,CAAGZ,aAAaa,MAAM,CAAGjB,OAASS,OAAOS,OAAO,CAGnE,GAAIrB,EAAIO,aAAaU,KAAK,CAAGN,cAAgBC,OAAOM,OAAO,CAAE,CAC3DlB,EAAIW,cAAgBC,OAAOM,OAAO,CAAGX,aAAaU,KAAK,CAAGd,OAC1DD,YAAc,MAChB,CAGA,GAAIF,EAAIY,OAAOM,OAAO,CAAE,CACtBlB,EAAIY,OAAOM,OAAO,CAAGf,OACrBD,YAAc,OAChB,CAGA,GAAID,EAAIW,OAAOS,OAAO,CAAE,CACtBpB,EAAIS,cAAcY,MAAM,CAAGnB,OAASS,OAAOS,OAAO,CAClDnB,YAAc,QAChB,CAGA,GAAID,EAAIM,aAAaa,MAAM,CAAGN,eAAiBF,OAAOS,OAAO,CAAE,CAC7DpB,EAAIS,cAAcS,GAAG,CAAGZ,aAAaa,MAAM,CAAGjB,OAASS,OAAOS,OAAO,AACvE,CAEAtB,YAAY,CAAEC,EAAGC,EAAGC,WAAY,EAClC,CACF,KAAO,CACLH,YAAY,CAAEC,EAAG,EAAGC,EAAG,EAAGC,YAAa,KAAM,EAC/C,CAEA,MAAO,KACL,GAAII,kBAAkBE,OAAO,GAAK,KAAM,CACtCe,aAAajB,kBAAkBE,OAAO,CACxC,CACF,CACF,EAAG,CAACd,KAAK,EAET,MAAM8B,gBAAkB,KACtB3B,WAAW,KACXS,CAAAA,kBAAkBE,OAAO,CAAGiB,WAAW,KACrC9B,QAAQ,OACRE,WAAW,MACb,EAAG,IACL,EAEA,MAAM6B,qBAAuB,CAC3BC,MACAC,OAEA,GAAI,CAACA,IAAIpB,OAAO,CAAE,CAChB,OAAO,KACT,CAEA,KAAM,CAAEqB,OAAO,CAAEC,OAAO,CAAE,CAAGH,MAC7B,KAAM,CAAE3B,CAAC,CAAEC,CAAC,CAAEgB,KAAK,CAAEG,MAAM,CAAE,CAAGQ,IAAIpB,OAAO,CAACC,qBAAqB,GACjE,KAAM,CAAEP,WAAW,CAAE,CAAGJ,SAExB,OAAQI,aACN,IAAK,MACH,OAAO2B,SAAW7B,GAAK6B,SAAW7B,EAAIiB,OAASa,QAAU7B,CAC3D,KAAK,OACH,OAAO6B,SAAW7B,GAAK6B,SAAW7B,EAAImB,QAAUS,QAAU7B,CAC5D,KAAK,QACH,OAAO8B,SAAW7B,GAAK6B,SAAW7B,EAAImB,QAAUS,QAAU7B,EAAIiB,KAChE,KAAK,SACH,OAAOY,SAAW7B,GAAK6B,SAAW7B,EAAIiB,OAASa,QAAU7B,EAAImB,MAC/D,SACE,OAAO,KACX,CACF,EAEA,MAAMW,0BAA4B,AAACJ,QACjC,GAAI,CAACvB,UAAUI,OAAO,CAAE,OAExB,KAAM,CAAEqB,OAAO,CAAEC,OAAO,CAAE,CAAGH,MAC7B,KAAM,CAAE3B,CAAC,CAAEC,CAAC,CAAEgB,KAAK,CAAEG,MAAM,CAAE,CAAGhB,UAAUI,OAAO,CAACC,qBAAqB,GACvE,MAAMuB,aACJH,SAAW7B,GACX6B,SAAW7B,EAAIiB,OACfa,SAAW7B,GACX6B,SAAW7B,EAAImB,OAEjB,GAAI,CAACY,aAAc,CACjBR,iBACF,CACF,EAEA,OACE,oBAACS,OAAK,GAAGxC,IAAI,CAAEyC,UAAWjD,GAAG,mBAAoBQ,MAAMyC,YACrD,oBAACC,UACCC,aAAc,IAAMzC,QAAQ,MAC5B0C,aAAc,AAACV,QACb,GAAI,CAACpC,aAAe,CAACmC,qBAAqBC,MAAOvB,WAAY,CAC3DoB,iBACF,CACF,EACAc,KAAK,SACLV,IAAKxB,UACLmC,mBAAiB,UAChB,GAAGlD,YAAY,CAChB6C,UAAWjD,GACT,2CACAI,cAAc6C,YAGf9C,gBACC,oBAACJ,MACCwD,KAAK,sCACLC,MAAM,6FACNC,KAAMlD,YAKXE,KACGX,aACE,oBAACkD,OACCU,KAAK,UACLf,IAAKvB,SACLgC,aAAc,AAACV,OACbF,WAAW,IAAMM,0BAA0BJ,OAAQ,KAErDiB,MAAO,CACLzB,IAAKrB,SAASG,CAAC,CACfe,KAAMlB,SAASE,CAAC,CAChB6C,OAAQ,IACRC,UAAW,iCACb,EACC,GAAGxD,YAAY,CAChB4C,UAAWjD,GACT,yGACA,CAAE,sBAAuB,CAACM,WAAY,EACtC,sBACAD,cAAc4C,UACd,CAAE,0CAA2CtC,OAAQ,EACrD,CAAE,2CAA4C,CAACA,OAAQ,IAGzD,oBAACqC,OAAIC,UAAU,mBAAmB/C,WAEpC4D,SAASC,IAAI,EAEf,KAGV,CAEA,gBAAe9D,OAAQ"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path
|
|
3
|
+
d="M9.27923 29.2517L17.9568 24.3987L18.102 23.9757L17.9568 23.742H17.5324L16.0806 23.6529L11.122 23.5194L6.82227 23.3413L2.6566 23.1186L1.60681 22.896L0.624023 21.6049L0.724536 20.9593L1.60681 20.3693L2.86879 20.4806L5.6608 20.6699L9.8488 20.9593L12.8865 21.1374L17.3872 21.6049H18.102L18.2025 21.3155L17.9568 21.1374L17.7669 20.9593L13.4337 18.0319L8.74317 14.9375L6.28621 13.1566L4.95721 12.255L4.28713 11.4091L3.99676 9.56135L5.20291 8.23678L6.82227 8.34809L7.23549 8.4594L8.87719 9.71718L12.3839 12.422L16.9628 15.7835L17.6329 16.34L17.9009 16.1508L17.9344 16.0172L17.6329 15.5163L15.1424 11.0306L12.4845 6.46699L11.3006 4.57475L10.9879 3.43941C10.8763 2.97192 10.7981 2.58234 10.7981 2.10372L12.1718 0.244877L12.9312 0L14.7627 0.244877L15.5333 0.912725L16.6725 3.5062L18.5152 7.5912L21.3742 13.1455L22.2118 14.7928L22.6585 16.3177L22.826 16.7852H23.1164V16.5181L23.3509 13.3903L23.7865 9.55022L24.2109 4.60815L24.3561 3.2168L25.0485 1.54718L26.4221 0.645586L27.4943 1.1576L28.3765 2.41538L28.2537 3.22793L27.7288 6.62282L26.7013 11.9433L26.0313 15.5052H26.4221L26.8689 15.06L28.6781 12.6668L31.7158 8.88237L33.0559 7.37971L34.6195 5.72122L35.6246 4.93094H37.5231L38.9191 7.00127L38.2937 9.13838L36.3393 11.6094L34.72 13.702L32.397 16.8186L30.9452 19.3119L31.0792 19.5123L31.4254 19.4789L36.6744 18.3658L39.5111 17.8538L42.895 17.275L44.425 17.9874L44.5925 18.7109L43.9894 20.1912L40.371 21.0817L36.1271 21.9277L29.806 23.4192L29.7279 23.4748L29.8172 23.5861L32.6651 23.8533L33.8824 23.9201H36.8642L42.4147 24.3319L43.8666 25.2891L44.7377 26.4579L44.5925 27.3483L42.3589 28.4837L39.3435 27.7713L32.3077 26.1017L29.8954 25.5006H29.5604V25.701L31.5706 27.66L35.256 30.977L39.8684 35.2512L40.103 36.3086L39.5111 37.1434L38.8856 37.0544L34.8317 34.0157L33.2681 32.6466L29.7279 29.6747H29.4933V29.9863L30.3086 31.1773L34.6195 37.6332L34.8428 39.6145L34.5301 40.2601L33.4133 40.6496L32.1848 40.427L29.6609 36.8986L27.0587 32.9249L24.9591 29.363L24.7023 29.5077L23.4626 42.809L22.8819 43.488L21.5417 44L20.4249 43.1541L19.833 41.785L20.4249 39.0802L21.1397 35.5517L21.7204 32.7468L22.2453 29.2628L22.558 28.1052L22.5357 28.0273L22.2788 28.0607L19.6432 31.6671L15.6338 37.0655L12.4621 40.4493L11.7027 40.7498L10.3849 40.0708L10.5077 38.8576L11.2448 37.7779L15.6338 32.2125L18.2807 28.762L19.9894 26.7695L19.9782 26.4801H19.8777L8.21827 34.0268L6.14102 34.294L5.24758 33.4591L5.35926 32.0901L5.78365 31.6448L9.2904 29.2406L9.27923 29.2517Z"
|
|
4
|
+
fill="currentColor" />
|
|
5
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="45" height="44" viewBox="0 0 45 44" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M9.27923 29.2517L17.9568 24.3987L18.102 23.9757L17.9568 23.742H17.5324L16.0806 23.6529L11.122 23.5194L6.82227 23.3413L2.6566 23.1186L1.60681 22.896L0.624023 21.6049L0.724536 20.9593L1.60681 20.3693L2.86879 20.4806L5.6608 20.6699L9.8488 20.9593L12.8865 21.1374L17.3872 21.6049H18.102L18.2025 21.3155L17.9568 21.1374L17.7669 20.9593L13.4337 18.0319L8.74317 14.9375L6.28621 13.1566L4.95721 12.255L4.28713 11.4091L3.99676 9.56135L5.20291 8.23678L6.82227 8.34809L7.23549 8.4594L8.87719 9.71718L12.3839 12.422L16.9628 15.7835L17.6329 16.34L17.9009 16.1508L17.9344 16.0172L17.6329 15.5163L15.1424 11.0306L12.4845 6.46699L11.3006 4.57475L10.9879 3.43941C10.8763 2.97192 10.7981 2.58234 10.7981 2.10372L12.1718 0.244877L12.9312 0L14.7627 0.244877L15.5333 0.912725L16.6725 3.5062L18.5152 7.5912L21.3742 13.1455L22.2118 14.7928L22.6585 16.3177L22.826 16.7852H23.1164V16.5181L23.3509 13.3903L23.7865 9.55022L24.2109 4.60815L24.3561 3.2168L25.0485 1.54718L26.4221 0.645586L27.4943 1.1576L28.3765 2.41538L28.2537 3.22793L27.7288 6.62282L26.7013 11.9433L26.0313 15.5052H26.4221L26.8689 15.06L28.6781 12.6668L31.7158 8.88237L33.0559 7.37971L34.6195 5.72122L35.6246 4.93094H37.5231L38.9191 7.00127L38.2937 9.13838L36.3393 11.6094L34.72 13.702L32.397 16.8186L30.9452 19.3119L31.0792 19.5123L31.4254 19.4789L36.6744 18.3658L39.5111 17.8538L42.895 17.275L44.425 17.9874L44.5925 18.7109L43.9894 20.1912L40.371 21.0817L36.1271 21.9277L29.806 23.4192L29.7279 23.4748L29.8172 23.5861L32.6651 23.8533L33.8824 23.9201H36.8642L42.4147 24.3319L43.8666 25.2891L44.7377 26.4579L44.5925 27.3483L42.3589 28.4837L39.3435 27.7713L32.3077 26.1017L29.8954 25.5006H29.5604V25.701L31.5706 27.66L35.256 30.977L39.8684 35.2512L40.103 36.3086L39.5111 37.1434L38.8856 37.0544L34.8317 34.0157L33.2681 32.6466L29.7279 29.6747H29.4933V29.9863L30.3086 31.1773L34.6195 37.6332L34.8428 39.6145L34.5301 40.2601L33.4133 40.6496L32.1848 40.427L29.6609 36.8986L27.0587 32.9249L24.9591 29.363L24.7023 29.5077L23.4626 42.809L22.8819 43.488L21.5417 44L20.4249 43.1541L19.833 41.785L20.4249 39.0802L21.1397 35.5517L21.7204 32.7468L22.2453 29.2628L22.558 28.1052L22.5357 28.0273L22.2788 28.0607L19.6432 31.6671L15.6338 37.0655L12.4621 40.4493L11.7027 40.7498L10.3849 40.0708L10.5077 38.8576L11.2448 37.7779L15.6338 32.2125L18.2807 28.762L19.9894 26.7695L19.9782 26.4801H19.8777L8.21827 34.0268L6.14102 34.294L5.24758 33.4591L5.35926 32.0901L5.78365 31.6448L9.2904 29.2406L9.27923 29.2517Z" fill="#D97757"/>
|
|
3
|
+
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/remote-blogs-posts.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst fetchBlogPosts = async (store, blogUrl) => {\n try {\n if (!blogUrl) {\n console.log(\n `Skipping fetching blog posts, invalid blogUrl: \"${blogUrl}\"`,\n );\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(blogUrl, options);\n\n if (isJsonResponse(res.headers.get(\"content-type\"))) {\n const payload = await res.json();\n store.dispatch({ type: \"blog/loaded\", payload });\n } else {\n throw new Error(\"Blog posts url is not serving json\");\n }\n } catch (e) {\n console.warn(\"Could not fetch blog posts due to error:\", e);\n }\n};\n\nconst initialState = { recent: null };\n\nconst REDUCER_KEY = \"blogPosts\";\n\nconst reducerBlogPosts = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"blog/loaded\":\n return { ...state, recent: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectRecentBlogPosts = (store) => store.getState()[REDUCER_KEY]?.recent;\n\nexport { fetchBlogPosts, reducerBlogPosts, selectRecentBlogPosts };\n"],"names":["isJsonResponse","fetchBlogPosts","store","blogUrl","console","log","options","headers","accept","cache","credentials","res","fetch","get","payload","json","dispatch","type","Error","e","warn","initialState","recent","REDUCER_KEY","reducerBlogPosts","state","action","selectRecentBlogPosts","getState"],"mappings":"AAEA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,eAAiB,MAAOC,MAAOC,WACnC,GAAI,CACF,GAAI,CAACA,QAAS,CACZC,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEF,QAAQ,CAAC,CAAC,EAE/D,MACF,CAEA,MAAMG,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,
|
|
1
|
+
{"version":3,"sources":["../../src/core/remote-blogs-posts.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst fetchBlogPosts = async (store, blogUrl) => {\n try {\n if (!blogUrl) {\n console.log(\n `Skipping fetching blog posts, invalid blogUrl: \"${blogUrl}\"`,\n );\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(blogUrl, options);\n\n if (isJsonResponse(res.headers.get(\"content-type\"))) {\n const payload = await res.json();\n store.dispatch({ type: \"blog/loaded\", payload });\n } else {\n throw new Error(\"Blog posts url is not serving json\");\n }\n } catch (e) {\n console.warn(\"Could not fetch blog posts due to error:\", e);\n }\n};\n\nconst initialState = { recent: null };\n\nconst REDUCER_KEY = \"blogPosts\";\n\nconst reducerBlogPosts = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"blog/loaded\":\n return { ...state, recent: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectRecentBlogPosts = (store) => store.getState()[REDUCER_KEY]?.recent;\n\nexport { fetchBlogPosts, reducerBlogPosts, selectRecentBlogPosts };\n"],"names":["isJsonResponse","fetchBlogPosts","store","blogUrl","console","log","options","headers","accept","cache","credentials","res","fetch","get","payload","json","dispatch","type","Error","e","warn","initialState","recent","REDUCER_KEY","reducerBlogPosts","state","action","selectRecentBlogPosts","getState"],"mappings":"AAEA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,eAAiB,MAAOC,MAAOC,WACnC,GAAI,CACF,GAAI,CAACA,QAAS,CACZC,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEF,QAAQ,CAAC,CAAC,EAE/D,MACF,CAEA,MAAMG,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GAWJ,MAX2C,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMT,QAASG,SAEjC,GAAIN,eAAeW,IAAIJ,OAAO,CAACM,GAAG,CAAC,iBAAkB,CACnD,MAAMC,QAAU,MAAMH,IAAII,IAAI,GAC9Bb,MAAMc,QAAQ,CAAC,CAAEC,KAAM,cAAeH,OAAQ,EAChD,KAAO,CACL,MAAM,IAAII,MAAM,qCAClB,CACF,CAAE,MAAOC,EAAG,CACVf,QAAQgB,IAAI,CAAC,2CAA4CD,EAC3D,CACF,EAEA,MAAME,aAAe,CAAEC,OAAQ,IAAK,EAEpC,MAAMC,YAAc,YAEpB,MAAMC,iBAAmB,CACvB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOT,IAAI,EACjB,IAAK,cACH,MAAO,CAAE,GAAGQ,KAAK,CAAEH,OAAQI,OAAOZ,OAAO,AAAC,CAC5C,SACE,OAAOW,KACX,CACF,CACF,EAEA,MAAME,sBAAwB,AAACzB,OAAUA,MAAM0B,QAAQ,EAAE,CAACL,YAAY,EAAED,MAExE,QAASrB,cAAc,CAAEuB,gBAAgB,CAAEG,qBAAqB,CAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,
|
|
1
|
+
{"version":3,"sources":["../../src/core/remote-session-data.js"],"sourcesContent":["/* global __ENABLE_FETCH_WITH_CREDENTIALS__ */\n\n// Fetches current users session data\n// Assumes an authenticated session, so will only work when used on ably.com/ably.io\n\nimport { isJsonResponse } from \"./remote-data-util\";\n\nconst NOT_FOUND_ERROR_CODE = \"not-found\";\n\nconst fetchSessionData = async (store, sessionUrl) => {\n const sessionLoaded = (payload = {}) =>\n store.dispatch({ type: \"session/loaded\", payload });\n\n try {\n if (!sessionUrl) {\n console.log(\n `Skipping fetching session, invalid sessionUrl: \"${sessionUrl}\"`,\n );\n sessionLoaded();\n return;\n }\n\n const options = {\n headers: {\n accept: \"application/json\",\n },\n cache: \"no-cache\",\n };\n\n if (__ENABLE_FETCH_WITH_CREDENTIALS__) {\n options.credentials = \"include\";\n }\n\n const res = await fetch(sessionUrl, options);\n const jsonResponse = isJsonResponse(res.headers.get(\"content-type\"));\n\n if (!jsonResponse) {\n throw new Error(\"Session endpoint is not serving json\");\n }\n\n const payload = await res.json();\n\n if (payload.error === NOT_FOUND_ERROR_CODE) {\n sessionLoaded();\n } else {\n sessionLoaded(payload);\n }\n } catch (e) {\n sessionLoaded();\n console.warn(\"Could not fetch session data due to error:\", e);\n }\n};\n\nconst initialState = { data: null };\n\nconst REDUCER_KEY = \"session\";\n\nconst reducerSessionData = {\n [REDUCER_KEY]: (state = initialState, action) => {\n switch (action.type) {\n case \"session/loaded\":\n return { ...state, data: action.payload };\n default:\n return state;\n }\n },\n};\n\nconst selectSessionData = (store) => store.getState()[REDUCER_KEY]?.data;\n\nexport { fetchSessionData, reducerSessionData, selectSessionData };\n"],"names":["isJsonResponse","NOT_FOUND_ERROR_CODE","fetchSessionData","store","sessionUrl","sessionLoaded","payload","dispatch","type","console","log","options","headers","accept","cache","credentials","res","fetch","jsonResponse","get","Error","json","error","e","warn","initialState","data","REDUCER_KEY","reducerSessionData","state","action","selectSessionData","getState"],"mappings":"AAKA,OAASA,cAAc,KAAQ,oBAAqB,CAEpD,MAAMC,qBAAuB,YAE7B,MAAMC,iBAAmB,MAAOC,MAAOC,cACrC,MAAMC,cAAgB,CAACC,QAAU,CAAC,CAAC,GACjCH,MAAMI,QAAQ,CAAC,CAAEC,KAAM,iBAAkBF,OAAQ,GAEnD,GAAI,CACF,GAAI,CAACF,WAAY,CACfK,QAAQC,GAAG,CACT,CAAC,gDAAgD,EAAEN,WAAW,CAAC,CAAC,EAElEC,gBACA,MACF,CAEA,MAAMM,QAAU,CACdC,QAAS,CACPC,OAAQ,kBACV,EACAC,MAAO,UACT,EAEA,GACkB,MADqB,CACrCH,QAAQI,WAAW,CAAG,SACxB,CAEA,MAAMC,IAAM,MAAMC,MAAMb,WAAYO,SACpC,MAAMO,aAAelB,eAAegB,IAAIJ,OAAO,CAACO,GAAG,CAAC,iBAEpD,GAAI,CAACD,aAAc,CACjB,MAAM,IAAIE,MAAM,uCAClB,CAEA,MAAMd,QAAU,MAAMU,IAAIK,IAAI,GAE9B,GAAIf,QAAQgB,KAAK,GAAKrB,qBAAsB,CAC1CI,eACF,KAAO,CACLA,cAAcC,QAChB,CACF,CAAE,MAAOiB,EAAG,CACVlB,gBACAI,QAAQe,IAAI,CAAC,6CAA8CD,EAC7D,CACF,EAEA,MAAME,aAAe,CAAEC,KAAM,IAAK,EAElC,MAAMC,YAAc,UAEpB,MAAMC,mBAAqB,CACzB,CAACD,YAAY,CAAE,CAACE,MAAQJ,YAAY,CAAEK,UACpC,OAAQA,OAAOtB,IAAI,EACjB,IAAK,iBACH,MAAO,CAAE,GAAGqB,KAAK,CAAEH,KAAMI,OAAOxB,OAAO,AAAC,CAC1C,SACE,OAAOuB,KACX,CACF,CACF,EAEA,MAAME,kBAAoB,AAAC5B,OAAUA,MAAM6B,QAAQ,EAAE,CAACL,YAAY,EAAED,IAEpE,QAASxB,gBAAgB,CAAE0B,kBAAkB,CAAEG,iBAAiB,CAAG"}
|