@ably/ui 14.0.0-dev.75dcb64 → 14.0.0-dev.7ed5089

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.
Files changed (75) hide show
  1. package/core/.DS_Store +0 -0
  2. package/core/Code.js +1 -1
  3. package/core/ContactFooter/component.css +9 -7
  4. package/core/ContactFooter.js +1 -1
  5. package/core/CookieMessage/component.css +12 -10
  6. package/core/CookieMessage.js +1 -1
  7. package/core/Expander.js +1 -0
  8. package/core/Flash/component.css +21 -19
  9. package/core/Flash.js +1 -1
  10. package/core/Footer/component.css +24 -22
  11. package/core/Footer.js +1 -1
  12. package/core/Meganav/component.css +105 -103
  13. package/core/Meganav/component.js +1 -1
  14. package/core/Meganav.js +1 -1
  15. package/core/Notice/component.css +6 -4
  16. package/core/Notice/component.js +1 -1
  17. package/core/Notice.js +1 -1
  18. package/core/Slider/component.css +38 -4
  19. package/core/Slider/component.js +1 -1
  20. package/core/Slider.js +1 -1
  21. package/core/Table/Table.js +1 -1
  22. package/core/Table/TableCell.js +4 -4
  23. package/core/Table.js +1 -1
  24. package/core/Tooltip/.DS_Store +0 -0
  25. package/core/Tooltip.js +1 -1
  26. package/core/icons/icon-gui-partial.svg +4 -0
  27. package/core/scripts.js +1 -1
  28. package/core/sprites.svg +1 -1
  29. package/core/styles/buttons.css +123 -121
  30. package/core/styles/forms.css +51 -49
  31. package/core/styles/layout.css +16 -14
  32. package/core/styles/properties.css +252 -250
  33. package/core/styles/text.css +167 -165
  34. package/core/styles.components.css +24 -22
  35. package/core/utils/syntax-highlighter.css +59 -55
  36. package/package.json +2 -4
  37. package/src/.DS_Store +0 -0
  38. package/src/core/.DS_Store +0 -0
  39. package/src/core/Accordion.tsx +4 -4
  40. package/src/core/Code.tsx +0 -1
  41. package/src/core/ContactFooter/component.css +9 -7
  42. package/src/core/ContactFooter.tsx +0 -1
  43. package/src/core/CookieMessage/component.css +12 -10
  44. package/src/core/CookieMessage.tsx +0 -1
  45. package/src/core/Expander/Expander.stories.tsx +152 -0
  46. package/src/core/Expander.tsx +54 -0
  47. package/src/core/Flash/component.css +21 -19
  48. package/src/core/Flash.tsx +1 -2
  49. package/src/core/Footer/component.css +24 -22
  50. package/src/core/Footer.tsx +0 -1
  51. package/src/core/Icon/Icon.stories.tsx +1 -0
  52. package/src/core/Meganav/component.css +105 -103
  53. package/src/core/Meganav/component.js +0 -2
  54. package/src/core/Meganav.tsx +0 -1
  55. package/src/core/Notice/component.css +6 -4
  56. package/src/core/Notice/component.js +0 -1
  57. package/src/core/Notice.tsx +0 -1
  58. package/src/core/Slider/Slider.stories.tsx +82 -29
  59. package/src/core/Slider/component.css +38 -4
  60. package/src/core/Slider/component.js +0 -2
  61. package/src/core/Slider.tsx +166 -86
  62. package/src/core/Table/Table.tsx +38 -9
  63. package/src/core/Table/TableCell.tsx +31 -6
  64. package/src/core/Table.tsx +2 -0
  65. package/src/core/Tooltip/.DS_Store +0 -0
  66. package/src/core/Tooltip.tsx +34 -5
  67. package/src/core/icons/icon-gui-partial.svg +4 -0
  68. package/src/core/scripts.js +0 -2
  69. package/src/core/styles/buttons.css +123 -121
  70. package/src/core/styles/forms.css +51 -49
  71. package/src/core/styles/layout.css +16 -14
  72. package/src/core/styles/properties.css +252 -250
  73. package/src/core/styles/text.css +167 -165
  74. package/src/core/styles.components.css +24 -22
  75. package/src/core/utils/syntax-highlighter.css +59 -55
@@ -1,6 +1,40 @@
1
- .ui-slider-marker {
2
- font-size: 0.5rem;
3
- top: -1px;
1
+ @layer components {
2
+ .ui-slider-marker {
3
+ font-size: 0.5rem;
4
+ top: -1px;
4
5
 
5
- @apply leading-none px-4 relative;
6
+ @apply leading-none px-4 relative;
7
+ }
8
+
9
+ @keyframes fillAnimation {
10
+ 0% {
11
+ width: 0%;
12
+ }
13
+ 100% {
14
+ width: 100%;
15
+ }
16
+ }
17
+
18
+ .ui-icon-cta {
19
+ @apply cursor-pointer overflow-hidden;
20
+ @apply rounded border-2 border-mid-grey hover:border-active-orange;
21
+ transition: all 0.4s;
22
+ }
23
+
24
+ @screen sm {
25
+ .ui-icon-cta-left:hover .ui-icon-cta-holder {
26
+ transform: translateX(-120%);
27
+ }
28
+ .ui-icon-cta-right .ui-icon-cta-holder {
29
+ transform: translateX(-120%);
30
+ }
31
+ .ui-icon-cta-right:hover .ui-icon-cta-holder {
32
+ transform: translateX(0%);
33
+ }
34
+ }
35
+
36
+ .ui-icon-cta-holder {
37
+ @apply w-full h-full;
38
+ transition: all 0.4s;
39
+ }
6
40
  }
@@ -1 +1 @@
1
- import"./component.css";import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";const mdBreakpoint=()=>window.matchMedia("(min-width: 48rem)").matches;const DRAG_BUFFER=20;const init=slidesContainer=>{const transformContainer=queryId("slider-strip",slidesContainer);const slides=Array.from(queryIdAll("slider-slide",slidesContainer));const slideLeftChevron=queryId("slider-previous",slidesContainer);const slideRightChevron=queryId("slider-next",slidesContainer);const slideMarkers=Array.from(queryIdAll("slider-marker",slidesContainer));const sliderControls=queryId("slider-controls",slidesContainer);sliderControls.classList.replace("hidden","flex");const slidesLength=slides.length;const slidesWidth=slidesContainer.getBoundingClientRect().width;const{width:slideWidth,left:slideLeftDistance}=slides[0].getBoundingClientRect();const{left:slideLeftDistanceSecond}=slides[1].getBoundingClientRect();const slideGap=slideLeftDistanceSecond-slideLeftDistance-slideWidth;const adjustment=(slidesWidth-slideWidth)/2;let currentIndex=0;let touchStartX=0;const calculateTransform=index=>index*-slideWidth+adjustment+index*-slideGap;const updateSlide=index=>transformContainer.style.transform=`translateX(${calculateTransform(index)}px)`;const updateMarkers=index=>{slideMarkers.forEach(marker=>marker.classList.remove("text-active-orange"));slideMarkers[index].classList.remove("text-cool-black");slideMarkers[index].classList.add("text-active-orange")};const slideLeft=()=>{currentIndex=currentIndex-1<=0?0:currentIndex-1;updateSlide(currentIndex);updateMarkers(currentIndex)};const slideRight=()=>{currentIndex=currentIndex+1>=slidesLength?currentIndex:currentIndex+1;updateSlide(currentIndex);updateMarkers(currentIndex)};updateSlide(0);updateMarkers(0);slideLeftChevron.addEventListener("click",slideLeft);transformContainer.addEventListener("touchstart",e=>{var _e_touches_;touchStartX=(_e_touches_=e.touches[0])===null||_e_touches_===void 0?void 0:_e_touches_.clientX});transformContainer.addEventListener("touchend",e=>{var _e_changedTouches_;const distance=((_e_changedTouches_=e.changedTouches[0])===null||_e_changedTouches_===void 0?void 0:_e_changedTouches_.clientX)-touchStartX;if(Math.abs(distance)<DRAG_BUFFER)return;const direction=distance>0?slideLeft:slideRight;direction()});slideRightChevron.addEventListener("click",slideRight);return()=>{transformContainer.style.transform=null;sliderControls.classList.replace("flex","hidden")}};const Slider=({container,mqEnableThreshold})=>{if(!container)return;const breakpointCheck=mqEnableThreshold||(()=>!mdBreakpoint());let unmount=()=>{};if(breakpointCheck())unmount=init(container);window.addEventListener("resize",throttle(()=>{if(breakpointCheck()){unmount=init(container)}else{unmount()}},100))};export default Slider;
1
+ import throttle from"lodash.throttle";import{queryId,queryIdAll}from"../dom-query";const mdBreakpoint=()=>window.matchMedia("(min-width: 48rem)").matches;const DRAG_BUFFER=20;const init=slidesContainer=>{const transformContainer=queryId("slider-strip",slidesContainer);const slides=Array.from(queryIdAll("slider-slide",slidesContainer));const slideLeftChevron=queryId("slider-previous",slidesContainer);const slideRightChevron=queryId("slider-next",slidesContainer);const slideMarkers=Array.from(queryIdAll("slider-marker",slidesContainer));const sliderControls=queryId("slider-controls",slidesContainer);sliderControls.classList.replace("hidden","flex");const slidesLength=slides.length;const slidesWidth=slidesContainer.getBoundingClientRect().width;const{width:slideWidth,left:slideLeftDistance}=slides[0].getBoundingClientRect();const{left:slideLeftDistanceSecond}=slides[1].getBoundingClientRect();const slideGap=slideLeftDistanceSecond-slideLeftDistance-slideWidth;const adjustment=(slidesWidth-slideWidth)/2;let currentIndex=0;let touchStartX=0;const calculateTransform=index=>index*-slideWidth+adjustment+index*-slideGap;const updateSlide=index=>transformContainer.style.transform=`translateX(${calculateTransform(index)}px)`;const updateMarkers=index=>{slideMarkers.forEach(marker=>marker.classList.remove("text-active-orange"));slideMarkers[index].classList.remove("text-cool-black");slideMarkers[index].classList.add("text-active-orange")};const slideLeft=()=>{currentIndex=currentIndex-1<=0?0:currentIndex-1;updateSlide(currentIndex);updateMarkers(currentIndex)};const slideRight=()=>{currentIndex=currentIndex+1>=slidesLength?currentIndex:currentIndex+1;updateSlide(currentIndex);updateMarkers(currentIndex)};updateSlide(0);updateMarkers(0);slideLeftChevron.addEventListener("click",slideLeft);transformContainer.addEventListener("touchstart",e=>{var _e_touches_;touchStartX=(_e_touches_=e.touches[0])===null||_e_touches_===void 0?void 0:_e_touches_.clientX});transformContainer.addEventListener("touchend",e=>{var _e_changedTouches_;const distance=((_e_changedTouches_=e.changedTouches[0])===null||_e_changedTouches_===void 0?void 0:_e_changedTouches_.clientX)-touchStartX;if(Math.abs(distance)<DRAG_BUFFER)return;const direction=distance>0?slideLeft:slideRight;direction()});slideRightChevron.addEventListener("click",slideRight);return()=>{transformContainer.style.transform=null;sliderControls.classList.replace("flex","hidden")}};const Slider=({container,mqEnableThreshold})=>{if(!container)return;const breakpointCheck=mqEnableThreshold||(()=>!mdBreakpoint());let unmount=()=>{};if(breakpointCheck())unmount=init(container);window.addEventListener("resize",throttle(()=>{if(breakpointCheck()){unmount=init(container)}else{unmount()}},100))};export default Slider;
package/core/Slider.js CHANGED
@@ -1 +1 @@
1
- import React,{useEffect,useRef}from"react";import Icon from"./Icon";import SliderScripts from"./Slider/component.js";import"./Slider/component.css";const Slider=({slides=[],classes="",slideClasses="",slideMinWidth="16.875rem",slideMaxWidth="1fr",mqEnableThreshold=()=>true,...props})=>{const containerRef=useRef(null);useEffect(()=>{SliderScripts({container:containerRef.current,mqEnableThreshold})},[]);if(slides.length===0)return;return React.createElement("div",{className:"w-full overflow-x-hidden","data-id":"slider",style:{"--dynamic-grid-columns-count":slides.length,"--dynamic-grid-column-min-width":slideMinWidth,"--dynamic-grid-column-max-width":slideMaxWidth},ref:containerRef},React.createElement("ol",{className:`grid ui-grid-gap grid-cols-dynamic transform transition-transform ${classes}`,"data-id":"slider-strip",...props},slides.map((slide,i)=>React.createElement("li",{key:i,className:slideClasses,"data-id":"slider-slide"},slide))),React.createElement("div",{className:"justify-center items-center my-24 hidden","data-id":"slider-controls"},React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-previous"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black",additionalCSS:"transform rotate-180","data-id":"meganav-control-mobile-dropdown-menu"})),React.createElement("ul",{className:"flex justify-center items-center mx-32 relative h-24"},slides.map((_,i)=>React.createElement("li",{key:i},React.createElement("span",{className:"ui-slider-marker text-cool-black","data-id":"slider-marker"},"")," "))),React.createElement("button",{type:"button",className:"p-0 w-24 h-24 flex items-center focus:outline-gui-focus","data-id":"slider-next"},React.createElement(Icon,{name:"icon-gui-disclosure-arrow",size:"1.5rem",color:"text-cool-black","data-id":"meganav-control-mobile-dropdown-menu"}))))};export default Slider;
1
+ import React,{useState,useEffect,useRef}from"react";import Icon from"./Icon";const SlideIndicator=({numSlides,activeIndex,interval,intervalIndicator,isInline})=>{return React.createElement("ul",{className:`flex gap-4 left-1/2 ${isInline?"bottom-0":"absolute -bottom-40 transform -translate-x-1/2"}`},Array.from({length:numSlides},(_,i)=>intervalIndicator?React.createElement("li",{key:i,className:"relative w-40 h-4 mx-1 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:`ui-slider-marker ${i===activeIndex?"text-active-orange":"text-cool-black"}`,"data-id":"slider-marker"},""))))};const Slider=({children,options})=>{const[activeIndex,setActiveIndex]=useState(0);const[touchStartX,setTouchStartX]=useState(0);const[touchEndX,setTouchEndX]=useState(0);const timerRef=useRef(null);const isInline=(options===null||options===void 0?void 0:options.controlPosition)==="inline";const next=()=>{setActiveIndex(prevIndex=>(prevIndex+1)%children.length);resetInterval()};const prev=()=>{setActiveIndex(prevIndex=>prevIndex>0?prevIndex-1:children.length-1);resetInterval()};const resetInterval=()=>{if(timerRef.current)clearInterval(timerRef.current);var _options_interval;timerRef.current=setInterval(next,(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4)};const handleTouchStart=e=>{setTouchStartX(e.touches[0].clientX)};const handleTouchMove=e=>{setTouchEndX(e.touches[0].clientX)};const handleTouchEnd=()=>{if(touchStartX-touchEndX>50){next()}if(touchStartX-touchEndX<-50){prev()}};useEffect(()=>{resetInterval();return()=>{if(timerRef.current)clearInterval(timerRef.current)}},[children.length,options===null||options===void 0?void 0:options.interval]);var _options_interval;return React.createElement("div",{className:"relative",onTouchStart:handleTouchStart,onTouchMove:handleTouchMove,onTouchEnd:handleTouchEnd},React.createElement("div",{className:"overflow-y-visible overflow-x-clip w-full py-40"},React.createElement("div",{className:"flex items-center transition-transform ease-in-out duration-500",style:{transform:`translateX(-${activeIndex*100}%)`}},children.map((child,index)=>React.createElement("div",{key:index,className:"w-full flex-shrink-0 flex justify-center sm:px-60 transition-opacity ease-in delay-500 duration-500",style:{opacity:activeIndex===index?1:.1}},child)))),React.createElement("div",{className:`flex items-center pointer-events-none ${isInline?"ui-standard-container justify-center gap-24":"sm:flex sm:absolute inset-0 justify-between"}`},React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} 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:prev},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-left",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-left",size:"1.5rem"})))),React.createElement(SlideIndicator,{numSlides:children.length,activeIndex:activeIndex,interval:(_options_interval=options===null||options===void 0?void 0:options.interval)!==null&&_options_interval!==void 0?_options_interval:1e4,intervalIndicator:options===null||options===void 0?void 0:options.intervalIndicator,isInline:isInline}),React.createElement("button",{className:`${isInline?"w-32 h-32":"hidden sm:flex w-48 h-48"} pointer-events-auto rounded border border-mid-grey hover:border-active-orange justify-center items-center ui-icon-cta ui-icon-cta-right`,onClick:next},React.createElement("div",{className:"ui-icon-cta-holder flex gap-4"},React.createElement("div",{className:"w-full h-full flex-shrink-0 flex items-center justify-center"},React.createElement(Icon,{name:"icon-gui-arrow-right",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-right",size:"1.5rem"}))))))};export default Slider;
@@ -1 +1 @@
1
- import React,{cloneElement}from"react";export const Table=({id,children})=>React.createElement("table",{id:id,className:"ui-standard-container mb-4 sm:table-fixed"},children);export const TableBody=({children})=>React.createElement("tbody",null,children);export const TableHeader=({children})=>React.createElement("thead",{className:"sticky bg-white z-10 top-0",key:"sticky-block"},cloneElement(children,{isHeader:true}));export const TableRowHeader=({children})=>React.createElement("tr",{className:"-ml-24 mt-8 sm:ml-0 sm:mt-0 ui-text-overline1 !text-cool-black bg-light-grey sm:sticky z-10",style:{top:"4rem"}},cloneElement(children,{isRowHeader:true}));
1
+ import React,{cloneElement}from"react";export const Table=({id,children,...rest})=>{var _rest_className;return React.createElement("table",{id:id,...rest,className:`ui-standard-container mb-4 sm:table-fixed ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export const TableBody=({children,...rest})=>React.createElement("tbody",rest,children);export const TableHeader=({children,...rest})=>{var _rest_className;return React.createElement("thead",{...rest,className:`sticky bg-white z-10 top-0 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},cloneElement(children,{isHeader:true}))};export const TableRowHeader=({children,...rest})=>{var _rest_className;return React.createElement("tr",{className:`-ml-24 mt-8 sm:ml-0 sm:mt-0 bg-light-grey sm:sticky z-10 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`,style:{top:"4rem"}},cloneElement(children,{isRowHeader:true}))};
@@ -1,7 +1,7 @@
1
- import React from"react";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
2
- ui-text-p1 !font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${(_rest_className=rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
1
+ import React from"react";import Icon from"../Icon";const Supported=()=>React.createElement(Icon,{name:"icon-gui-check-circled-fill",size:"1.5rem",color:"text-gui-success",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"supported-icon"});const Unsupported=()=>React.createElement(Icon,{name:"icon-gui-cross-circled-fill",size:"1.5rem",color:"text-gui-error",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"unsupported-icon"});const Partial=()=>React.createElement(Icon,{name:"icon-gui-partial",size:"1.5rem",additionalCSS:"flex-grow-0 flex-shrink-0","data-testid":"partial-icon"});const LabelCell=({children,...rest})=>{var _rest_className;const classes=`
2
+ ui-text-p1 font-bold pt-24 pb-8 border-light-grey sm:p-24 sm:relative sm:top-2 flex sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
3
3
  `;return React.createElement("td",{...rest,className:classes},children)};const TableCell=({children,isRowHeader,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`
4
4
  border-light-grey sm:p-24 leading-none flex sm:table-cell
5
5
  ${isRowHeader?"rounded-l-none rounded-r sm:rounded-lg py-20 px-24":"py-6"}
6
- ${(_rest_className=rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
7
- `},children)};const HeaderCell=({children,...rest})=>React.createElement("td",{...rest,className:"ui-text-h3 px-24 py-24 hidden sm:table-cell"},children);const CtaCell=({children,...rest})=>React.createElement("td",{...rest,className:"pt-24 hidden sm:table-cell"},children);export{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported};
6
+ ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}
7
+ `},children)};const HeaderCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`ui-text-h3 px-24 py-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};const CtaCell=({children,...rest})=>{var _rest_className;return React.createElement("td",{...rest,className:`pt-24 hidden sm:table-cell ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},children)};export{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported,Partial};
package/core/Table.js CHANGED
@@ -1 +1 @@
1
- import{Table,TableRowHeader,TableHeader,TableBody}from"./Table/Table";import{TableRow}from"./Table/TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported}from"./Table/TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader,Supported,Unsupported};
1
+ import{Table,TableRowHeader,TableHeader,TableBody}from"./Table/Table";import{TableRow}from"./Table/TableRow";import{TableCell,LabelCell,HeaderCell,CtaCell,Supported,Unsupported,Partial}from"./Table/TableCell";export default{Root:Table,Row:TableRow,Cell:TableCell,LabelCell,HeaderCell,CtaCell,RowHeader:TableRowHeader,Body:TableBody,Header:TableHeader,Supported,Unsupported,Partial};
Binary file
package/core/Tooltip.js CHANGED
@@ -1 +1 @@
1
- import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){var _floating_current,_reference_current;const floatingRect=(_floating_current=floating.current)===null||_floating_current===void 0?void 0:_floating_current.getBoundingClientRect();const referenceRect=(_reference_current=reference.current)===null||_reference_current===void 0?void 0:_reference_current.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);return React.createElement("div",{className:"relative inline-block align-top h-16"},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),className:"ml-8 p-0 relative top-1 focus:outline-none",type:"button",ref:reference,"aria-describedby":"tooltip"},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{className:"bg-light-grey p-12 rounded pointer-events-none absolute z-20",role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"}},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;
1
+ import React,{useEffect,useRef,useState}from"react";import Icon from"./Icon";const Tooltip=({children,triggerProps,tooltipProps,...rest})=>{const[open,setOpen]=useState(false);const[position,setPosition]=useState({x:0,y:0});const offset=8;const reference=useRef(null);const floating=useRef(null);useEffect(()=>{if(open){var _floating_current,_reference_current;const floatingRect=(_floating_current=floating.current)===null||_floating_current===void 0?void 0:_floating_current.getBoundingClientRect();const referenceRect=(_reference_current=reference.current)===null||_reference_current===void 0?void 0:_reference_current.getBoundingClientRect();if(floatingRect&&referenceRect){setPosition({x:Math.min(floatingRect.width/2,floatingRect.left)-referenceRect.width/2,y:Math.min(floatingRect.height,floatingRect.top)+offset})}}else{setPosition({x:0,y:0})}},[open]);var _rest_className,_triggerProps_className,_tooltipProps_className;return React.createElement("div",{...rest,className:`relative inline-block align-top h-16 ${(_rest_className=rest===null||rest===void 0?void 0:rest.className)!==null&&_rest_className!==void 0?_rest_className:""}`},React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:()=>setOpen(false),type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`ml-8 p-0 relative top-1 focus:outline-none ${(_triggerProps_className=triggerProps===null||triggerProps===void 0?void 0:triggerProps.className)!==null&&_triggerProps_className!==void 0?_triggerProps_className:""}`},React.createElement(Icon,{name:"icon-gui-info",size:"1rem"})),open?React.createElement("div",{role:"tooltip",ref:floating,style:{top:-position.y,left:-position.x,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`bg-light-grey p-12 rounded pointer-events-none absolute z-20 ${(_tooltipProps_className=tooltipProps===null||tooltipProps===void 0?void 0:tooltipProps.className)!==null&&_tooltipProps_className!==void 0?_tooltipProps_className:""}`},React.createElement("div",{className:"w-256"},children)):null)};export default Tooltip;
@@ -0,0 +1,4 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 12C1.5 17.799 6.20101 22.5 12 22.5C17.799 22.5 22.5 17.799 22.5 12C22.5 6.20101 17.799 1.5 12 1.5C6.20101 1.5 1.5 6.20101 1.5 12ZM1.2779e-06 12C9.30272e-07 18.6274 5.37258 24 12 24C18.6274 24 24 18.6274 24 12C24 5.37258 18.6274 -1.95703e-07 12 -4.37114e-07C5.37259 -6.78525e-07 1.62554e-06 5.37258 1.2779e-06 12Z" fill="#03020D"/>
3
+ <path d="M11.5833 23.576C5.37903 23.3566 0.416667 18.2578 0.416667 12C0.416668 5.74218 5.37903 0.643381 11.5833 0.424021L11.5833 23.576Z" fill="#03020D" stroke="#03020D" stroke-width="0.833333"/>
4
+ </svg>
package/core/scripts.js CHANGED
@@ -1 +1 @@
1
- import"array-flat-polyfill";import"./styles.css";export{default as reactRenderer,renderComponent}from"./react-renderer";export{default as loadSprites}from"./load-sprites";export{default as toggleChatWidget}from"./hubspot-chat-toggle";export*from"./remote-data-store";export*from"./remote-blogs-posts";export*from"./remote-session-data";export*from"./dom-query";
1
+ import"array-flat-polyfill";export{default as reactRenderer,renderComponent}from"./react-renderer";export{default as loadSprites}from"./load-sprites";export{default as toggleChatWidget}from"./hubspot-chat-toggle";export*from"./remote-data-store";export*from"./remote-blogs-posts";export*from"./remote-session-data";export*from"./dom-query";