@leafygreen-ui/guide-cue - npm Package Compare versions

Comparing version 4.0.3 to 4.0.4

CHANGELOG.md

 # @leafygreen-ui/guide-cue
 
+## 4.0.4
+
+### Patch Changes
+
+- 32b3d3146: Bumps to use new `useIdAllocator` hook
+- 1e5dc3e33: Updates required props.
+- 8ece56980: Removes the multi-step tooltip as a child of `Popover` and place it outside of `Popover` as a sibling.
+- Updated dependencies [32b3d3146]
+- Updated dependencies [8ece56980]
+- Updated dependencies [83fc5b31b]
+- Updated dependencies [9bcf8b925]
+- Updated dependencies [8ece56980]
+- Updated dependencies [32b3d3146]
+- Updated dependencies [73cbbd02c]
+  - @leafygreen-ui/a11y@1.4.3
+  - @leafygreen-ui/tooltip@10.0.0
+  - @leafygreen-ui/popover@11.0.9
+  - @leafygreen-ui/icon@11.14.0
+  - @leafygreen-ui/typography@16.4.0
+  - @leafygreen-ui/hooks@7.7.2
+  - @leafygreen-ui/button@20.0.6
+
 ## 4.0.3
@@ -4,0 +26,0 @@

dist/esm/index.js

@@ -1,2 +0,2 @@
-import e,{useState as n,useRef as t,useEffect as r}from"react";import o from"prop-types";import{usePrefersReducedMotion as i}from"@leafygreen-ui/a11y";import{useIdAllocator as a,useIsomorphicLayoutEffect as l}from"@leafygreen-ui/hooks";import{useDarkMode as p}from"@leafygreen-ui/leafygreen-provider";import s,{Align as u,Justify as c}from"@leafygreen-ui/popover";import{transparentize as f}from"polished";import{css as m,cx as d}from"@leafygreen-ui/emotion";import{Theme as b}from"@leafygreen-ui/lib";import{palette as y}from"@leafygreen-ui/palette";import g from"focus-trap-react";import h from"@leafygreen-ui/button";import v from"@leafygreen-ui/icon/dist/X";import x from"@leafygreen-ui/icon-button";import O from"@leafygreen-ui/tooltip";import{Body as C,Disclaimer as E}from"@leafygreen-ui/typography";function k(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function w(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?k(Object(t),!0).forEach((function(n){j(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):k(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function S(e){return S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},S(e)}function j(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function N(){return N=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},N.apply(this,arguments)}function P(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function T(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function A(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,i=[],a=!0,l=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);a=!0);}catch(e){l=!0,o=e}finally{try{a||null==t.return||t.return()}finally{if(l)throw o}}return i}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return M(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return M(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function M(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var I,D,Z,B,z,J,F,q,G,L,H,R,U,X,$,K,Q,V=m(I||(I=T(["\n  padding: 32px 16px 16px;\n"]))),W=m(D||(D=T(["\n  cursor: auto;\n"]))),Y=function(e,n){var t=n?y.blue.light2:y.blue.base,r=m(Z||(Z=T(["\n    position: relative;\n\n    div {\n      width: ","px;\n      height: ","px;\n      border-radius: 50%;\n      background-color: ",";\n      transform-origin: center;\n      position: relative;\n    }\n  "])),24,24,f(.5,t));return d(r,e?m(B||(B=T(["\n        div {\n          box-shadow: 0px 0px 0px 4px ",";\n        }\n      "])),f(.83,t)):m(z||(z=T(["\n      &::before,\n      &::after {\n        content: '';\n        position: absolute;\n        border-radius: 50%;\n        translate: -50% -50%;\n        top: 50%;\n        left: 50%;\n        scale: 0.9;\n        opacity: 0;\n        width: ","px;\n        height: ","px;\n        background: rgba(255, 255, 255, 0);\n        box-shadow: 0px 0px 0px 0px ",";\n      }\n\n      // inner most pulse ring\n      &::before {\n        animation: pulse-outer 2.3s infinite cubic-bezier(0.42, 0, 0.61, 0.69);\n      }\n\n      // outer mosts pulse ring\n      &::after {\n        animation: pulse-outer-2 2.3s infinite cubic-bezier(0.42, 0, 0.46, 0.72);\n      }\n\n      @keyframes pulse-outer {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        40%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 42% and remain that way until 100%\n          scale: 1;\n          box-shadow: 0px 0px 0px 15px ",";\n          opacity: 0;\n        }\n      }\n\n      @keyframes pulse-outer-2 {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        35%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 35% and remain that way until 100%. This is 35% so that it gives the illusion of disappearing before the first ring.\n          scale: 1;\n          box-shadow: 0px 0px 0px 18px ",";\n          opacity: 0;\n        }\n      }\n\n      div {\n        animation: pulse-inner 2.3s infinite cubic-bezier(0.42, 0, 0.58, 0.72);\n\n        @keyframes pulse-inner {\n          40% {\n            // at 0% this will start to slowly scale and by 40% this should scale to 1.3\n            scale: 1.3;\n          }\n          73% {\n            // By 73% this should scale back to 1. From 73% to 100% it will remain at 1.\n            scale: 1;\n          }\n        }\n      }\n    "])),24,24,f(1,t),f(.95,t),f(.7,t),f(.95,t),f(.7,t)))},_=m(J||(J=T(["\n  margin-bottom: 16px;\n"]))),ee=m(F||(F=T(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 16px;\n"]))),ne=(j(L={},b.Light,m(q||(q=T(["\n    color: ",";\n  "])),y.gray.light1)),j(L,b.Dark,m(G||(G=T(["\n    color: ",";\n  "])),y.black)),L),te=m(H||(H=T(["\n  margin-bottom: 4px;\n"]))),re=m(R||(R=T(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n"]))),oe=m(U||(U=T(["\n  color: ",";\n  &:hover,\n  &:active {\n    &::before {\n      background-color: ",";\n    }\n  }\n"])),y.gray.dark2,y.gray.light3),ie=(j(K={},b.Light,m(X||(X=T(["\n    color: ",";\n  "])),y.gray.base)),j(K,b.Dark,m($||($=T(["\n    color: ",";\n  "])),y.gray.dark2)),K),ae=m(Q||(Q=T(["\n  height: 28px;\n"]))),le=["darkMode","open","setOpen","tooltipJustify","tooltipAlign","refEl","portalClassName","portalContainer","scrollContainer","popoverZIndex","theme","title","isStandalone","buttonText","numberOfSteps","currentStep","children","tooltipClassName","onEscClose","handleButtonClick","handleCloseClick","usePortal"];function pe(n){var t=n.darkMode,r=n.open,o=n.setOpen,i=n.tooltipJustify,l=n.tooltipAlign,p=n.refEl,s=n.portalClassName,u=n.portalContainer,c=n.scrollContainer,f=n.popoverZIndex,m=n.theme,b=n.title,y=n.isStandalone,k=n.buttonText,w=n.numberOfSteps,S=n.currentStep,T=n.children,A=n.tooltipClassName,M=n.onEscClose,I=n.handleButtonClick,D=n.handleCloseClick,Z=n.usePortal,B=void 0===Z||Z,z=P(n,le),J=a({prefix:"guide-cue"}),F={fallbackFocus:"#".concat(J),clickOutsideDeactivates:!0};return e.createElement(e.Fragment,null,e.createElement(O,N({darkMode:t,open:r,setOpen:o,justify:i,align:l,refEl:p,className:d(j({},V,!y),W,A),portalClassName:s,portalContainer:u,scrollContainer:c,popoverZIndex:f,onClose:M,role:"dialog","aria-labelledby":"guide-cue-label",usePortal:B},z),e.createElement(g,{focusTrapOptions:F},e.createElement("div",null,!y&&e.createElement(x,{className:d(re,j({},oe,t)),"aria-label":"Close Tooltip",onClick:D,darkMode:!t},e.createElement(v,null)),e.createElement("div",{className:_},e.createElement(C,{id:"guide-cue-label",as:"h2",className:te,darkMode:!t},e.createElement("strong",null,b)),e.createElement(C,{as:"div",className:ne[m],id:"guide-cue-desc"},T)),e.createElement("div",{className:ee},!y&&e.createElement(E,{className:ie[m]},S," of ",w),e.createElement(h,{variant:"primary",onClick:function(){return I()},darkMode:!t,id:J,className:ae},k))))))}pe.displayName="TooltipContent";var se=["open","setOpen","refEl","numberOfSteps","currentStep","darkMode","title","children","onDismiss","onPrimaryButtonClick","tooltipClassName","portalClassName","buttonText","tooltipAlign","tooltipJustify","beaconAlign","portalContainer","scrollContainer","popoverZIndex"];function ue(o){var a=o.open,f=o.setOpen,m=o.refEl,d=o.numberOfSteps,b=o.currentStep,y=void 0===b?1:b,g=o.darkMode,h=o.title,v=o.children,x=o.onDismiss,O=void 0===x?function(){}:x,C=o.onPrimaryButtonClick,E=void 0===C?function(){}:C,k=o.tooltipClassName,S=o.portalClassName,j=o.buttonText,T=o.tooltipAlign,M=void 0===T?u.Top:T,I=o.tooltipJustify,D=void 0===I?c.Middle:I,Z=o.beaconAlign,B=void 0===Z?u.CenterHorizontal:Z,z=o.portalContainer,J=o.scrollContainer,F=o.popoverZIndex,q=P(o,se),G=p(g),L=G.darkMode,H=G.theme,R=i(),U=A(n(!1),2),X=U[0],$=U[1],K=A(n(!1),2),Q=K[0],V=K[1],W=t(null),_=j||(y===d||1===d?"Got it":"Next"),ee=d<=1;r((function(){var e,n;return a?($(!0),e=setTimeout((function(){return V(!0)}),400)):(V(!1),n=setTimeout((function(){return $(!1)}),100)),function(){clearTimeout(e),clearTimeout(n)}}),[a]);var ne={portalClassName:S,portalContainer:z,scrollContainer:J},te=w(w({darkMode:L,open:a,setOpen:f,tooltipJustify:D,tooltipAlign:M,refEl:m,popoverZIndex:F,numberOfSteps:d,currentStep:y,theme:H,title:h,isStandalone:ee,buttonText:_,tooltipClassName:k,onEscClose:ee?E:O,handleButtonClick:function(){f(!1),setTimeout((function(){return E()}),ee?0:400)},handleCloseClick:function(){f(!1),setTimeout((function(){return O()}),400)}},ne),q),re=A(n(!1),2),oe=re[0],ie=re[1];return l((function(){return ie(!0)}),[]),oe?e.createElement(e.Fragment,null,ee?e.createElement(pe,te,v):e.createElement(s,N({active:X,refEl:m,align:B,justify:c.Middle,spacing:-12,adjustOnMutation:!0,popoverZIndex:F},ne),e.createElement("div",{ref:W,className:Y(R,L)},e.createElement("div",null)),e.createElement(pe,N({},te,{refEl:W,open:Q,usePortal:!1}),v))):null}ue.displayName="GuideCue",ue.propTypes={children:o.node,darkMode:o.bool,open:o.bool,setOpen:o.func,refEl:o.shape({current:"undefined"!=typeof window?o.instanceOf(Element):o.any}),numberOfSteps:o.number.isRequired,currentStep:function(e,n){return e.numberOfSteps>1&&"number"!=typeof e[n]?new Error("`currentStep` prop of type `number` is required if numberOfSteps > 1"):e.numberOfSteps<=1&&void 0!==e[n]&&"number"!=typeof e[n]?new Error("'currentStep' prop is invalid. Type '".concat(S(e[n]),"' supplied to 'currentStep', expected 'number'")):void 0},title:o.string,tooltipClassName:o.string,buttonText:o.string,onDismiss:o.func,onPrimaryButtonClick:o.func,tooltipAlign:o.oneOf(Object.values(u)),tooltipJustify:o.oneOf(Object.values(c)),beaconAlign:o.oneOf(Object.values(u)),popoverZIndex:o.number,scrollContainer:"undefined"!=typeof window?o.instanceOf(Element):o.any,portalContainer:"undefined"!=typeof window?o.instanceOf(Element):o.any,portalClassName:o.string};export{ue as GuideCue};
+import e,{useState as n,useRef as t,useEffect as r}from"react";import o from"prop-types";import{usePrefersReducedMotion as i}from"@leafygreen-ui/a11y";import{useIdAllocator as a,useIsomorphicLayoutEffect as l}from"@leafygreen-ui/hooks";import{useDarkMode as p}from"@leafygreen-ui/leafygreen-provider";import s,{Align as u,Justify as c}from"@leafygreen-ui/popover";import{transparentize as f}from"polished";import{css as m,cx as d}from"@leafygreen-ui/emotion";import{Theme as b}from"@leafygreen-ui/lib";import{palette as y}from"@leafygreen-ui/palette";import g from"focus-trap-react";import h from"@leafygreen-ui/button";import v from"@leafygreen-ui/icon/dist/X";import x from"@leafygreen-ui/icon-button";import O from"@leafygreen-ui/tooltip";import{Body as C,Disclaimer as E}from"@leafygreen-ui/typography";function k(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function w(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?k(Object(t),!0).forEach((function(n){j(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):k(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function S(e){return S="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},S(e)}function j(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function N(){return N=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},N.apply(this,arguments)}function T(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function P(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function A(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,i=[],a=!0,l=!1;try{for(t=t.call(e);!(a=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);a=!0);}catch(e){l=!0,o=e}finally{try{a||null==t.return||t.return()}finally{if(l)throw o}}return i}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return M(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return M(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function M(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var I,D,Z,B,z,J,F,q,G,L,H,R,U,X,$,K,Q,V=m(I||(I=P(["\n  padding: 32px 16px 16px;\n"]))),W=m(D||(D=P(["\n  cursor: auto;\n"]))),Y=function(e,n){var t=n?y.blue.light2:y.blue.base,r=m(Z||(Z=P(["\n    position: relative;\n\n    div {\n      width: ","px;\n      height: ","px;\n      border-radius: 50%;\n      background-color: ",";\n      transform-origin: center;\n      position: relative;\n    }\n  "])),24,24,f(.5,t));return d(r,e?m(B||(B=P(["\n        div {\n          box-shadow: 0px 0px 0px 4px ",";\n        }\n      "])),f(.83,t)):m(z||(z=P(["\n      &::before,\n      &::after {\n        content: '';\n        position: absolute;\n        border-radius: 50%;\n        translate: -50% -50%;\n        top: 50%;\n        left: 50%;\n        scale: 0.9;\n        opacity: 0;\n        width: ","px;\n        height: ","px;\n        background: rgba(255, 255, 255, 0);\n        box-shadow: 0px 0px 0px 0px ",";\n      }\n\n      // inner most pulse ring\n      &::before {\n        animation: pulse-outer 2.3s infinite cubic-bezier(0.42, 0, 0.61, 0.69);\n      }\n\n      // outer mosts pulse ring\n      &::after {\n        animation: pulse-outer-2 2.3s infinite cubic-bezier(0.42, 0, 0.46, 0.72);\n      }\n\n      @keyframes pulse-outer {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        40%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 42% and remain that way until 100%\n          scale: 1;\n          box-shadow: 0px 0px 0px 15px ",";\n          opacity: 0;\n        }\n      }\n\n      @keyframes pulse-outer-2 {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        35%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 35% and remain that way until 100%. This is 35% so that it gives the illusion of disappearing before the first ring.\n          scale: 1;\n          box-shadow: 0px 0px 0px 18px ",";\n          opacity: 0;\n        }\n      }\n\n      div {\n        animation: pulse-inner 2.3s infinite cubic-bezier(0.42, 0, 0.58, 0.72);\n\n        @keyframes pulse-inner {\n          40% {\n            // at 0% this will start to slowly scale and by 40% this should scale to 1.3\n            scale: 1.3;\n          }\n          73% {\n            // By 73% this should scale back to 1. From 73% to 100% it will remain at 1.\n            scale: 1;\n          }\n        }\n      }\n    "])),24,24,f(1,t),f(.95,t),f(.7,t),f(.95,t),f(.7,t)))},_=m(J||(J=P(["\n  margin-bottom: 16px;\n"]))),ee=m(F||(F=P(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 16px;\n"]))),ne=(j(L={},b.Light,m(q||(q=P(["\n    color: ",";\n  "])),y.gray.light1)),j(L,b.Dark,m(G||(G=P(["\n    color: ",";\n  "])),y.black)),L),te=m(H||(H=P(["\n  margin-bottom: 4px;\n"]))),re=m(R||(R=P(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n"]))),oe=m(U||(U=P(["\n  color: ",";\n  &:hover,\n  &:active {\n    &::before {\n      background-color: ",";\n    }\n  }\n"])),y.gray.dark2,y.gray.light3),ie=(j(K={},b.Light,m(X||(X=P(["\n    color: ",";\n  "])),y.gray.base)),j(K,b.Dark,m($||($=P(["\n    color: ",";\n  "])),y.gray.dark2)),K),ae=m(Q||(Q=P(["\n  height: 28px;\n"]))),le=["darkMode","open","setOpen","tooltipJustify","tooltipAlign","refEl","portalClassName","portalContainer","scrollContainer","popoverZIndex","theme","title","isStandalone","buttonText","numberOfSteps","currentStep","children","tooltipClassName","onEscClose","handleButtonClick","handleCloseClick","usePortal"];function pe(n){var t=n.darkMode,r=n.open,o=n.setOpen,i=n.tooltipJustify,l=n.tooltipAlign,p=n.refEl,s=n.portalClassName,u=n.portalContainer,c=n.scrollContainer,f=n.popoverZIndex,m=n.theme,b=n.title,y=n.isStandalone,k=n.buttonText,w=n.numberOfSteps,S=n.currentStep,P=n.children,A=n.tooltipClassName,M=n.onEscClose,I=n.handleButtonClick,D=n.handleCloseClick,Z=n.usePortal,B=void 0===Z||Z,z=T(n,le),J=a({prefix:"guide-cue"}),F={fallbackFocus:"#".concat(J),clickOutsideDeactivates:!0};return e.createElement(e.Fragment,null,e.createElement(O,N({darkMode:t,open:r,setOpen:o,justify:i,align:l,refEl:p,className:d(j({},V,!y),W,A),portalClassName:s,portalContainer:u,scrollContainer:c,popoverZIndex:f,onClose:M,role:"dialog","aria-labelledby":"guide-cue-label",usePortal:B},z),e.createElement(g,{focusTrapOptions:F},e.createElement("div",null,!y&&e.createElement(x,{className:d(re,j({},oe,t)),"aria-label":"Close Tooltip",onClick:D,darkMode:!t},e.createElement(v,null)),e.createElement("div",{className:_},e.createElement(C,{id:"guide-cue-label",as:"h2",className:te,darkMode:!t},e.createElement("strong",null,b)),e.createElement(C,{as:"div",className:ne[m],id:"guide-cue-desc"},P)),e.createElement("div",{className:ee},!y&&e.createElement(E,{className:ie[m]},S," of ",w),e.createElement(h,{variant:"primary",onClick:function(){return I()},darkMode:!t,id:J,className:ae},k))))))}pe.displayName="TooltipContent";var se=["open","setOpen","refEl","numberOfSteps","currentStep","darkMode","title","children","onDismiss","onPrimaryButtonClick","tooltipClassName","portalClassName","buttonText","tooltipAlign","tooltipJustify","beaconAlign","portalContainer","scrollContainer","popoverZIndex"];function ue(o){var a=o.open,f=o.setOpen,m=o.refEl,d=o.numberOfSteps,b=o.currentStep,y=void 0===b?1:b,g=o.darkMode,h=o.title,v=o.children,x=o.onDismiss,O=void 0===x?function(){}:x,C=o.onPrimaryButtonClick,E=void 0===C?function(){}:C,k=o.tooltipClassName,S=o.portalClassName,j=o.buttonText,P=o.tooltipAlign,M=void 0===P?u.Top:P,I=o.tooltipJustify,D=void 0===I?c.Middle:I,Z=o.beaconAlign,B=void 0===Z?u.CenterHorizontal:Z,z=o.portalContainer,J=o.scrollContainer,F=o.popoverZIndex,q=T(o,se),G=p(g),L=G.darkMode,H=G.theme,R=i(),U=A(n(!1),2),X=U[0],$=U[1],K=A(n(!1),2),Q=K[0],V=K[1],W=t(null),_=j||(y===d||1===d?"Got it":"Next"),ee=d<=1;r((function(){var e,n;return a&&!ee?($(!0),e=setTimeout((function(){return V(!0)}),400)):(V(!1),n=setTimeout((function(){return $(!1)}),100)),function(){clearTimeout(e),clearTimeout(n)}}),[a,ee]);var ne={portalClassName:S,portalContainer:z,scrollContainer:J},te=w(w({darkMode:L,open:a,setOpen:f,tooltipJustify:D,tooltipAlign:M,refEl:m,popoverZIndex:F,numberOfSteps:d,currentStep:y,theme:H,title:h,isStandalone:ee,buttonText:_,tooltipClassName:k,onEscClose:ee?E:O,handleButtonClick:function(){f(!1),setTimeout((function(){return E()}),ee?0:400)},handleCloseClick:function(){f(!1),setTimeout((function(){return O()}),400)}},ne),q),re=A(n(!1),2),oe=re[0],ie=re[1];return l((function(){return ie(!0)}),[]),oe?e.createElement(e.Fragment,null,ee?e.createElement(pe,te,v):e.createElement(e.Fragment,null,e.createElement(s,N({active:X,refEl:m,align:B,justify:c.Middle,spacing:-12,adjustOnMutation:!0,popoverZIndex:F},ne),e.createElement("div",{ref:W,className:Y(R,L)},e.createElement("div",null))),e.createElement(pe,N({},te,{refEl:W,open:Q}),v))):null}ue.displayName="GuideCue",ue.propTypes={children:o.node,darkMode:o.bool,open:o.bool,setOpen:o.func,refEl:o.shape({current:"undefined"!=typeof window?o.instanceOf(Element):o.any}),numberOfSteps:o.number.isRequired,currentStep:function(e,n){return e.numberOfSteps>1&&"number"!=typeof e[n]?new Error("`currentStep` prop of type `number` is required if numberOfSteps > 1"):e.numberOfSteps<=1&&void 0!==e[n]&&"number"!=typeof e[n]?new Error("'currentStep' prop is invalid. Type '".concat(S(e[n]),"' supplied to 'currentStep', expected 'number'")):void 0},title:o.string,tooltipClassName:o.string,buttonText:o.string,onDismiss:o.func,onPrimaryButtonClick:o.func,tooltipAlign:o.oneOf(Object.values(u)),tooltipJustify:o.oneOf(Object.values(c)),beaconAlign:o.oneOf(Object.values(u)),popoverZIndex:o.number,scrollContainer:"undefined"!=typeof window?o.instanceOf(Element):o.any,portalContainer:"undefined"!=typeof window?o.instanceOf(Element):o.any,portalClassName:o.string};export{ue as GuideCue};
 //# sourceMappingURL=index.js.map

dist/index.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@leafygreen-ui/a11y"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/popover"),require("polished"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("focus-trap-react"),require("@leafygreen-ui/button"),require("@leafygreen-ui/icon/dist/X"),require("@leafygreen-ui/icon-button"),require("@leafygreen-ui/tooltip"),require("@leafygreen-ui/typography")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/a11y","@leafygreen-ui/hooks","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/popover","polished","@leafygreen-ui/emotion","@leafygreen-ui/lib","@leafygreen-ui/palette","focus-trap-react","@leafygreen-ui/button","@leafygreen-ui/icon/dist/X","@leafygreen-ui/icon-button","@leafygreen-ui/tooltip","@leafygreen-ui/typography"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/guide-cue"]={},e.React,e.PropTypes,e["@leafygreen-ui/a11y"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/popover"],e.polished,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.FocusTrap,e["@leafygreen-ui/button"],e.X,e["@leafygreen-ui/icon-button"],e["@leafygreen-ui/tooltip"],e["@leafygreen-ui/typography"])}(this,(function(e,t,n,r,o,a,l,i,u,s,p,c,f,d,y,m,b){"use strict";function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h,v,x,O,C,k,E,S,w,j,T,N,P,A,q,M,I,z=g(t),D=g(n),B=g(l),J=g(c),Z=g(f),F=g(d),R=g(y),G=g(m);function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function X(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach((function(t){H(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function _(e){return _="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_(e)}function H(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function U(){return U=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},U.apply(this,arguments)}function $(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function K(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function Q(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],l=!0,i=!1;try{for(n=n.call(e);!(l=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);l=!0);}catch(e){i=!0,o=e}finally{try{l||null==n.return||n.return()}finally{if(i)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return V(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return V(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function V(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var W=u.css(h||(h=K(["\n  padding: 32px 16px 16px;\n"]))),Y=u.css(v||(v=K(["\n  cursor: auto;\n"]))),ee=function(e,t){var n=t?p.palette.blue.light2:p.palette.blue.base,r=u.css(x||(x=K(["\n    position: relative;\n\n    div {\n      width: ","px;\n      height: ","px;\n      border-radius: 50%;\n      background-color: ",";\n      transform-origin: center;\n      position: relative;\n    }\n  "])),24,24,i.transparentize(.5,n));return e?u.cx(r,u.css(O||(O=K(["\n        div {\n          box-shadow: 0px 0px 0px 4px ",";\n        }\n      "])),i.transparentize(.83,n))):u.cx(r,u.css(C||(C=K(["\n      &::before,\n      &::after {\n        content: '';\n        position: absolute;\n        border-radius: 50%;\n        translate: -50% -50%;\n        top: 50%;\n        left: 50%;\n        scale: 0.9;\n        opacity: 0;\n        width: ","px;\n        height: ","px;\n        background: rgba(255, 255, 255, 0);\n        box-shadow: 0px 0px 0px 0px ",";\n      }\n\n      // inner most pulse ring\n      &::before {\n        animation: pulse-outer 2.3s infinite cubic-bezier(0.42, 0, 0.61, 0.69);\n      }\n\n      // outer mosts pulse ring\n      &::after {\n        animation: pulse-outer-2 2.3s infinite cubic-bezier(0.42, 0, 0.46, 0.72);\n      }\n\n      @keyframes pulse-outer {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        40%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 42% and remain that way until 100%\n          scale: 1;\n          box-shadow: 0px 0px 0px 15px ",";\n          opacity: 0;\n        }\n      }\n\n      @keyframes pulse-outer-2 {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        35%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 35% and remain that way until 100%. This is 35% so that it gives the illusion of disappearing before the first ring.\n          scale: 1;\n          box-shadow: 0px 0px 0px 18px ",";\n          opacity: 0;\n        }\n      }\n\n      div {\n        animation: pulse-inner 2.3s infinite cubic-bezier(0.42, 0, 0.58, 0.72);\n\n        @keyframes pulse-inner {\n          40% {\n            // at 0% this will start to slowly scale and by 40% this should scale to 1.3\n            scale: 1.3;\n          }\n          73% {\n            // By 73% this should scale back to 1. From 73% to 100% it will remain at 1.\n            scale: 1;\n          }\n        }\n      }\n    "])),24,24,i.transparentize(1,n),i.transparentize(.95,n),i.transparentize(.7,n),i.transparentize(.95,n),i.transparentize(.7,n)))},te=u.css(k||(k=K(["\n  margin-bottom: 16px;\n"]))),ne=u.css(E||(E=K(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 16px;\n"]))),re=(H(j={},s.Theme.Light,u.css(S||(S=K(["\n    color: ",";\n  "])),p.palette.gray.light1)),H(j,s.Theme.Dark,u.css(w||(w=K(["\n    color: ",";\n  "])),p.palette.black)),j),oe=u.css(T||(T=K(["\n  margin-bottom: 4px;\n"]))),ae=u.css(N||(N=K(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n"]))),le=u.css(P||(P=K(["\n  color: ",";\n  &:hover,\n  &:active {\n    &::before {\n      background-color: ",";\n    }\n  }\n"])),p.palette.gray.dark2,p.palette.gray.light3),ie=(H(M={},s.Theme.Light,u.css(A||(A=K(["\n    color: ",";\n  "])),p.palette.gray.base)),H(M,s.Theme.Dark,u.css(q||(q=K(["\n    color: ",";\n  "])),p.palette.gray.dark2)),M),ue=u.css(I||(I=K(["\n  height: 28px;\n"]))),se=["darkMode","open","setOpen","tooltipJustify","tooltipAlign","refEl","portalClassName","portalContainer","scrollContainer","popoverZIndex","theme","title","isStandalone","buttonText","numberOfSteps","currentStep","children","tooltipClassName","onEscClose","handleButtonClick","handleCloseClick","usePortal"],pe="guide-cue-label";function ce(e){var t=e.darkMode,n=e.open,r=e.setOpen,a=e.tooltipJustify,l=e.tooltipAlign,i=e.refEl,s=e.portalClassName,p=e.portalContainer,c=e.scrollContainer,f=e.popoverZIndex,d=e.theme,y=e.title,m=e.isStandalone,g=e.buttonText,h=e.numberOfSteps,v=e.currentStep,x=e.children,O=e.tooltipClassName,C=e.onEscClose,k=e.handleButtonClick,E=e.handleCloseClick,S=e.usePortal,w=void 0===S||S,j=$(e,se),T=o.useIdAllocator({prefix:"guide-cue"}),N={fallbackFocus:"#".concat(T),clickOutsideDeactivates:!0};return z.default.createElement(z.default.Fragment,null,z.default.createElement(G.default,U({darkMode:t,open:n,setOpen:r,justify:a,align:l,refEl:i,className:u.cx(H({},W,!m),Y,O),portalClassName:s,portalContainer:p,scrollContainer:c,popoverZIndex:f,onClose:C,role:"dialog","aria-labelledby":pe,usePortal:w},j),z.default.createElement(J.default,{focusTrapOptions:N},z.default.createElement("div",null,!m&&z.default.createElement(R.default,{className:u.cx(ae,H({},le,t)),"aria-label":"Close Tooltip",onClick:E,darkMode:!t},z.default.createElement(F.default,null)),z.default.createElement("div",{className:te},z.default.createElement(b.Body,{id:pe,as:"h2",className:oe,darkMode:!t},z.default.createElement("strong",null,y)),z.default.createElement(b.Body,{as:"div",className:re[d],id:"guide-cue-desc"},x)),z.default.createElement("div",{className:ne},!m&&z.default.createElement(b.Disclaimer,{className:ie[d]},v," of ",h),z.default.createElement(Z.default,{variant:"primary",onClick:function(){return k()},darkMode:!t,id:T,className:ue},g))))))}ce.displayName="TooltipContent";var fe=["open","setOpen","refEl","numberOfSteps","currentStep","darkMode","title","children","onDismiss","onPrimaryButtonClick","tooltipClassName","portalClassName","buttonText","tooltipAlign","tooltipJustify","beaconAlign","portalContainer","scrollContainer","popoverZIndex"];function de(e){var n=e.open,i=e.setOpen,u=e.refEl,s=e.numberOfSteps,p=e.currentStep,c=void 0===p?1:p,f=e.darkMode,d=e.title,y=e.children,m=e.onDismiss,b=void 0===m?function(){}:m,g=e.onPrimaryButtonClick,h=void 0===g?function(){}:g,v=e.tooltipClassName,x=e.portalClassName,O=e.buttonText,C=e.tooltipAlign,k=void 0===C?l.Align.Top:C,E=e.tooltipJustify,S=void 0===E?l.Justify.Middle:E,w=e.beaconAlign,j=void 0===w?l.Align.CenterHorizontal:w,T=e.portalContainer,N=e.scrollContainer,P=e.popoverZIndex,A=$(e,fe),q=a.useDarkMode(f),M=q.darkMode,I=q.theme,D=r.usePrefersReducedMotion(),J=Q(t.useState(!1),2),Z=J[0],F=J[1],R=Q(t.useState(!1),2),G=R[0],L=R[1],_=t.useRef(null),H=O||(c===s||1===s?"Got it":"Next"),K=s<=1;t.useEffect((function(){var e,t;return n?(F(!0),e=setTimeout((function(){return L(!0)}),400)):(L(!1),t=setTimeout((function(){return F(!1)}),100)),function(){clearTimeout(e),clearTimeout(t)}}),[n]);var V={portalClassName:x,portalContainer:T,scrollContainer:N},W=X(X({darkMode:M,open:n,setOpen:i,tooltipJustify:S,tooltipAlign:k,refEl:u,popoverZIndex:P,numberOfSteps:s,currentStep:c,theme:I,title:d,isStandalone:K,buttonText:H,tooltipClassName:v,onEscClose:K?h:b,handleButtonClick:function(){i(!1),setTimeout((function(){return h()}),K?0:400)},handleCloseClick:function(){i(!1),setTimeout((function(){return b()}),400)}},V),A),Y=Q(t.useState(!1),2),te=Y[0],ne=Y[1];return o.useIsomorphicLayoutEffect((function(){return ne(!0)}),[]),te?z.default.createElement(z.default.Fragment,null,K?z.default.createElement(ce,W,y):z.default.createElement(B.default,U({active:Z,refEl:u,align:j,justify:l.Justify.Middle,spacing:-12,adjustOnMutation:!0,popoverZIndex:P},V),z.default.createElement("div",{ref:_,className:ee(D,M)},z.default.createElement("div",null)),z.default.createElement(ce,U({},W,{refEl:_,open:G,usePortal:!1}),y))):null}de.displayName="GuideCue",de.propTypes={children:D.default.node,darkMode:D.default.bool,open:D.default.bool,setOpen:D.default.func,refEl:D.default.shape({current:"undefined"!=typeof window?D.default.instanceOf(Element):D.default.any}),numberOfSteps:D.default.number.isRequired,currentStep:function(e,t){return e.numberOfSteps>1&&"number"!=typeof e[t]?new Error("`currentStep` prop of type `number` is required if numberOfSteps > 1"):e.numberOfSteps<=1&&void 0!==e[t]&&"number"!=typeof e[t]?new Error("'currentStep' prop is invalid. Type '".concat(_(e[t]),"' supplied to 'currentStep', expected 'number'")):void 0},title:D.default.string,tooltipClassName:D.default.string,buttonText:D.default.string,onDismiss:D.default.func,onPrimaryButtonClick:D.default.func,tooltipAlign:D.default.oneOf(Object.values(l.Align)),tooltipJustify:D.default.oneOf(Object.values(l.Justify)),beaconAlign:D.default.oneOf(Object.values(l.Align)),popoverZIndex:D.default.number,scrollContainer:"undefined"!=typeof window?D.default.instanceOf(Element):D.default.any,portalContainer:"undefined"!=typeof window?D.default.instanceOf(Element):D.default.any,portalClassName:D.default.string},e.GuideCue=de,Object.defineProperty(e,"__esModule",{value:!0})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("@leafygreen-ui/a11y"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/popover"),require("polished"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/palette"),require("focus-trap-react"),require("@leafygreen-ui/button"),require("@leafygreen-ui/icon/dist/X"),require("@leafygreen-ui/icon-button"),require("@leafygreen-ui/tooltip"),require("@leafygreen-ui/typography")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@leafygreen-ui/a11y","@leafygreen-ui/hooks","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/popover","polished","@leafygreen-ui/emotion","@leafygreen-ui/lib","@leafygreen-ui/palette","focus-trap-react","@leafygreen-ui/button","@leafygreen-ui/icon/dist/X","@leafygreen-ui/icon-button","@leafygreen-ui/tooltip","@leafygreen-ui/typography"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/guide-cue"]={},e.React,e.PropTypes,e["@leafygreen-ui/a11y"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/popover"],e.polished,e["@leafygreen-ui/emotion"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/palette"],e.FocusTrap,e["@leafygreen-ui/button"],e.X,e["@leafygreen-ui/icon-button"],e["@leafygreen-ui/tooltip"],e["@leafygreen-ui/typography"])}(this,(function(e,t,n,r,o,a,l,i,u,s,p,c,f,d,y,m,b){"use strict";function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h,v,x,O,C,E,k,S,w,j,T,N,P,A,q,M,I,z=g(t),D=g(n),B=g(l),J=g(c),Z=g(f),F=g(d),R=g(y),G=g(m);function L(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function X(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?L(Object(n),!0).forEach((function(t){H(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):L(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function _(e){return _="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},_(e)}function H(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function U(){return U=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},U.apply(this,arguments)}function $(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},a=Object.keys(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(r=0;r<a.length;r++)n=a[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function K(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function Q(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,a=[],l=!0,i=!1;try{for(n=n.call(e);!(l=(r=n.next()).done)&&(a.push(r.value),!t||a.length!==t);l=!0);}catch(e){i=!0,o=e}finally{try{l||null==n.return||n.return()}finally{if(i)throw o}}return a}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return V(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return V(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function V(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var W=u.css(h||(h=K(["\n  padding: 32px 16px 16px;\n"]))),Y=u.css(v||(v=K(["\n  cursor: auto;\n"]))),ee=function(e,t){var n=t?p.palette.blue.light2:p.palette.blue.base,r=u.css(x||(x=K(["\n    position: relative;\n\n    div {\n      width: ","px;\n      height: ","px;\n      border-radius: 50%;\n      background-color: ",";\n      transform-origin: center;\n      position: relative;\n    }\n  "])),24,24,i.transparentize(.5,n));return e?u.cx(r,u.css(O||(O=K(["\n        div {\n          box-shadow: 0px 0px 0px 4px ",";\n        }\n      "])),i.transparentize(.83,n))):u.cx(r,u.css(C||(C=K(["\n      &::before,\n      &::after {\n        content: '';\n        position: absolute;\n        border-radius: 50%;\n        translate: -50% -50%;\n        top: 50%;\n        left: 50%;\n        scale: 0.9;\n        opacity: 0;\n        width: ","px;\n        height: ","px;\n        background: rgba(255, 255, 255, 0);\n        box-shadow: 0px 0px 0px 0px ",";\n      }\n\n      // inner most pulse ring\n      &::before {\n        animation: pulse-outer 2.3s infinite cubic-bezier(0.42, 0, 0.61, 0.69);\n      }\n\n      // outer mosts pulse ring\n      &::after {\n        animation: pulse-outer-2 2.3s infinite cubic-bezier(0.42, 0, 0.46, 0.72);\n      }\n\n      @keyframes pulse-outer {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        40%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 42% and remain that way until 100%\n          scale: 1;\n          box-shadow: 0px 0px 0px 15px ",";\n          opacity: 0;\n        }\n      }\n\n      @keyframes pulse-outer-2 {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        35%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 35% and remain that way until 100%. This is 35% so that it gives the illusion of disappearing before the first ring.\n          scale: 1;\n          box-shadow: 0px 0px 0px 18px ",";\n          opacity: 0;\n        }\n      }\n\n      div {\n        animation: pulse-inner 2.3s infinite cubic-bezier(0.42, 0, 0.58, 0.72);\n\n        @keyframes pulse-inner {\n          40% {\n            // at 0% this will start to slowly scale and by 40% this should scale to 1.3\n            scale: 1.3;\n          }\n          73% {\n            // By 73% this should scale back to 1. From 73% to 100% it will remain at 1.\n            scale: 1;\n          }\n        }\n      }\n    "])),24,24,i.transparentize(1,n),i.transparentize(.95,n),i.transparentize(.7,n),i.transparentize(.95,n),i.transparentize(.7,n)))},te=u.css(E||(E=K(["\n  margin-bottom: 16px;\n"]))),ne=u.css(k||(k=K(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 16px;\n"]))),re=(H(j={},s.Theme.Light,u.css(S||(S=K(["\n    color: ",";\n  "])),p.palette.gray.light1)),H(j,s.Theme.Dark,u.css(w||(w=K(["\n    color: ",";\n  "])),p.palette.black)),j),oe=u.css(T||(T=K(["\n  margin-bottom: 4px;\n"]))),ae=u.css(N||(N=K(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n"]))),le=u.css(P||(P=K(["\n  color: ",";\n  &:hover,\n  &:active {\n    &::before {\n      background-color: ",";\n    }\n  }\n"])),p.palette.gray.dark2,p.palette.gray.light3),ie=(H(M={},s.Theme.Light,u.css(A||(A=K(["\n    color: ",";\n  "])),p.palette.gray.base)),H(M,s.Theme.Dark,u.css(q||(q=K(["\n    color: ",";\n  "])),p.palette.gray.dark2)),M),ue=u.css(I||(I=K(["\n  height: 28px;\n"]))),se=["darkMode","open","setOpen","tooltipJustify","tooltipAlign","refEl","portalClassName","portalContainer","scrollContainer","popoverZIndex","theme","title","isStandalone","buttonText","numberOfSteps","currentStep","children","tooltipClassName","onEscClose","handleButtonClick","handleCloseClick","usePortal"],pe="guide-cue-label";function ce(e){var t=e.darkMode,n=e.open,r=e.setOpen,a=e.tooltipJustify,l=e.tooltipAlign,i=e.refEl,s=e.portalClassName,p=e.portalContainer,c=e.scrollContainer,f=e.popoverZIndex,d=e.theme,y=e.title,m=e.isStandalone,g=e.buttonText,h=e.numberOfSteps,v=e.currentStep,x=e.children,O=e.tooltipClassName,C=e.onEscClose,E=e.handleButtonClick,k=e.handleCloseClick,S=e.usePortal,w=void 0===S||S,j=$(e,se),T=o.useIdAllocator({prefix:"guide-cue"}),N={fallbackFocus:"#".concat(T),clickOutsideDeactivates:!0};return z.default.createElement(z.default.Fragment,null,z.default.createElement(G.default,U({darkMode:t,open:n,setOpen:r,justify:a,align:l,refEl:i,className:u.cx(H({},W,!m),Y,O),portalClassName:s,portalContainer:p,scrollContainer:c,popoverZIndex:f,onClose:C,role:"dialog","aria-labelledby":pe,usePortal:w},j),z.default.createElement(J.default,{focusTrapOptions:N},z.default.createElement("div",null,!m&&z.default.createElement(R.default,{className:u.cx(ae,H({},le,t)),"aria-label":"Close Tooltip",onClick:k,darkMode:!t},z.default.createElement(F.default,null)),z.default.createElement("div",{className:te},z.default.createElement(b.Body,{id:pe,as:"h2",className:oe,darkMode:!t},z.default.createElement("strong",null,y)),z.default.createElement(b.Body,{as:"div",className:re[d],id:"guide-cue-desc"},x)),z.default.createElement("div",{className:ne},!m&&z.default.createElement(b.Disclaimer,{className:ie[d]},v," of ",h),z.default.createElement(Z.default,{variant:"primary",onClick:function(){return E()},darkMode:!t,id:T,className:ue},g))))))}ce.displayName="TooltipContent";var fe=["open","setOpen","refEl","numberOfSteps","currentStep","darkMode","title","children","onDismiss","onPrimaryButtonClick","tooltipClassName","portalClassName","buttonText","tooltipAlign","tooltipJustify","beaconAlign","portalContainer","scrollContainer","popoverZIndex"];function de(e){var n=e.open,i=e.setOpen,u=e.refEl,s=e.numberOfSteps,p=e.currentStep,c=void 0===p?1:p,f=e.darkMode,d=e.title,y=e.children,m=e.onDismiss,b=void 0===m?function(){}:m,g=e.onPrimaryButtonClick,h=void 0===g?function(){}:g,v=e.tooltipClassName,x=e.portalClassName,O=e.buttonText,C=e.tooltipAlign,E=void 0===C?l.Align.Top:C,k=e.tooltipJustify,S=void 0===k?l.Justify.Middle:k,w=e.beaconAlign,j=void 0===w?l.Align.CenterHorizontal:w,T=e.portalContainer,N=e.scrollContainer,P=e.popoverZIndex,A=$(e,fe),q=a.useDarkMode(f),M=q.darkMode,I=q.theme,D=r.usePrefersReducedMotion(),J=Q(t.useState(!1),2),Z=J[0],F=J[1],R=Q(t.useState(!1),2),G=R[0],L=R[1],_=t.useRef(null),H=O||(c===s||1===s?"Got it":"Next"),K=s<=1;t.useEffect((function(){var e,t;return n&&!K?(F(!0),e=setTimeout((function(){return L(!0)}),400)):(L(!1),t=setTimeout((function(){return F(!1)}),100)),function(){clearTimeout(e),clearTimeout(t)}}),[n,K]);var V={portalClassName:x,portalContainer:T,scrollContainer:N},W=X(X({darkMode:M,open:n,setOpen:i,tooltipJustify:S,tooltipAlign:E,refEl:u,popoverZIndex:P,numberOfSteps:s,currentStep:c,theme:I,title:d,isStandalone:K,buttonText:H,tooltipClassName:v,onEscClose:K?h:b,handleButtonClick:function(){i(!1),setTimeout((function(){return h()}),K?0:400)},handleCloseClick:function(){i(!1),setTimeout((function(){return b()}),400)}},V),A),Y=Q(t.useState(!1),2),te=Y[0],ne=Y[1];return o.useIsomorphicLayoutEffect((function(){return ne(!0)}),[]),te?z.default.createElement(z.default.Fragment,null,K?z.default.createElement(ce,W,y):z.default.createElement(z.default.Fragment,null,z.default.createElement(B.default,U({active:Z,refEl:u,align:j,justify:l.Justify.Middle,spacing:-12,adjustOnMutation:!0,popoverZIndex:P},V),z.default.createElement("div",{ref:_,className:ee(D,M)},z.default.createElement("div",null))),z.default.createElement(ce,U({},W,{refEl:_,open:G}),y))):null}de.displayName="GuideCue",de.propTypes={children:D.default.node,darkMode:D.default.bool,open:D.default.bool,setOpen:D.default.func,refEl:D.default.shape({current:"undefined"!=typeof window?D.default.instanceOf(Element):D.default.any}),numberOfSteps:D.default.number.isRequired,currentStep:function(e,t){return e.numberOfSteps>1&&"number"!=typeof e[t]?new Error("`currentStep` prop of type `number` is required if numberOfSteps > 1"):e.numberOfSteps<=1&&void 0!==e[t]&&"number"!=typeof e[t]?new Error("'currentStep' prop is invalid. Type '".concat(_(e[t]),"' supplied to 'currentStep', expected 'number'")):void 0},title:D.default.string,tooltipClassName:D.default.string,buttonText:D.default.string,onDismiss:D.default.func,onPrimaryButtonClick:D.default.func,tooltipAlign:D.default.oneOf(Object.values(l.Align)),tooltipJustify:D.default.oneOf(Object.values(l.Justify)),beaconAlign:D.default.oneOf(Object.values(l.Align)),popoverZIndex:D.default.number,scrollContainer:"undefined"!=typeof window?D.default.instanceOf(Element):D.default.any,portalContainer:"undefined"!=typeof window?D.default.instanceOf(Element):D.default.any,portalClassName:D.default.string},e.GuideCue=de,Object.defineProperty(e,"__esModule",{value:!0})}));
 //# sourceMappingURL=index.js.map

dist/types.d.ts

 /// <reference types="react" />
+import { DarkModeProps } from '@leafygreen-ui/lib';
 import { Align, Justify } from '@leafygreen-ui/popover';
@@ -6,3 +7,3 @@ import { TooltipProps } from '@leafygreen-ui/tooltip';
 export declare type TooltipJustify = Exclude<Justify, 'fit'>;
-declare type ModifiedTooltipProps = Omit<TooltipProps, 'usePortal' | 'justify' | 'align' | 'onClick' | 'trigger' | 'triggerEvent' | 'shouldClose' | 'className' | 'children' | 'onClose'>;
+declare type ModifiedTooltipProps = Omit<TooltipProps, 'usePortal' | 'justify' | 'align' | 'onClick' | 'trigger' | 'triggerEvent' | 'shouldClose' | 'className' | 'children' | 'onClose' | 'setOpen' | 'open' | 'refEl' | 'darkMode'>;
 interface StandaloneProps {
@@ -29,3 +30,3 @@ /**
 declare type ConditionalProps = StandaloneProps | MultistepProps;
-export declare type GuideCueProps = {
+export declare type GuideCueProps = ModifiedTooltipProps & ConditionalProps & DarkModeProps & {
     /**
@@ -37,15 +38,10 @@ * Determines if the `Tooltip` will appear as open or close.
     /**
-     * Callback to change the open state of the Tooltip in consuming applications.
+     * Callback to change the open state of the Tooltip.
      */
     setOpen: React.Dispatch<React.SetStateAction<boolean>>;
     /**
-     * Pass a reference to an element that the beacon or tooltip(if stand-alone) should be centered against.
+     * Reference to an element that the tooltip should be positioned against.
      */
     refEl: React.RefObject<HTMLElement>;
     /**
-     * Determines whether the `Tooltip` will appear in dark mode.
-     * @default false
-     */
-    darkMode?: boolean;
-    /**
      * Title to appear inside of Tooltip.
@@ -89,4 +85,4 @@ */
     beaconAlign?: Align;
-} & ModifiedTooltipProps & ConditionalProps;
+};
 export {};
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@leafygreen-ui/guide-cue",
-  "version": "4.0.3",
+  "version": "4.0.4",
   "description": "leafyGreen UI Kit GuideCue",
@@ -33,13 +33,13 @@ "main": "./dist/index.js",
     "polished": "^4.2.2",
-    "@leafygreen-ui/a11y": "^1.4.2",
-    "@leafygreen-ui/button": "^20.0.4",
+    "@leafygreen-ui/a11y": "^1.4.3",
+    "@leafygreen-ui/button": "^20.0.6",
     "@leafygreen-ui/emotion": "^4.0.4",
-    "@leafygreen-ui/hooks": "^7.7.1",
-    "@leafygreen-ui/icon": "^11.13.1",
+    "@leafygreen-ui/hooks": "^7.7.2",
+    "@leafygreen-ui/icon": "^11.14.0",
     "@leafygreen-ui/icon-button": "^15.0.9",
     "@leafygreen-ui/lib": "^10.3.2",
     "@leafygreen-ui/palette": "^4.0.3",
-    "@leafygreen-ui/popover": "^11.0.7",
-    "@leafygreen-ui/tooltip": "^9.1.7",
-    "@leafygreen-ui/typography": "^16.2.1"
+    "@leafygreen-ui/popover": "^11.0.9",
+    "@leafygreen-ui/tooltip": "^10.0.0",
+    "@leafygreen-ui/typography": "^16.4.0"
   },
@@ -46,0 +46,0 @@ "peerDependencies": {

README.md

@@ -85,4 +85,4 @@ # GuideCue
 | `open`                 | `boolean`                                                                                      | Determines if the `Tooltip` will appear as open or close.                                                                                                                                                                                                                  | `false`                |
-| `setOpen`              | `function`                                                                                     | Callback to change the open state of the Tooltip in consuming applications.                                                                                                                                                                                                | `(boolean) => boolean` |
-| `refEl`                | `HTMLElement`                                                                                  | Pass a reference to an element that the beacon/tooltip(if stand-alone) should be centered against.                                                                                                                                                                         | `null`                 |
+| `setOpen`              | `function`                                                                                     | Callback to change the open state of the Tooltip.                                                                                                                                                                                                                          | `(boolean) => boolean` |
+| `refEl`                | `HTMLElement`                                                                                  | Reference to an element that the tooltip should be positioned against.                                                                                                                                                                                                     | `null`                 |
 | `numberOfSteps`        | `number`                                                                                       | Used to determine which tooltip will be shown. If `numberOfSteps > 1` then the multi-step tooltip will be shown else the stand-alone tooltip will be shown. This number will only be displayed in the multi-step tooltip.                                                  | `1`                    |
@@ -89,0 +89,0 @@ | `currentStep`          | `number`                                                                                       | Used to display the current step. If `numberOfSteps === 1` this number will not display.                                                                                                                                                                                   | `1`                    |

src/types.ts

@@ -0,1 +1,2 @@
+import { DarkModeProps } from '@leafygreen-ui/lib';
 import { Align, Justify } from '@leafygreen-ui/popover';
@@ -23,2 +24,6 @@ import { TooltipProps } from '@leafygreen-ui/tooltip';
   | 'onClose'
+  | 'setOpen'
+  | 'open'
+  | 'refEl'
+  | 'darkMode'
 >;
@@ -31,2 +36,3 @@
   numberOfSteps: 1;
+
   /**
@@ -43,2 +49,3 @@ * Used to display the current step. If `numberOfSteps === 1` this number will not display.
   numberOfSteps: number;
+
   /**
@@ -52,61 +59,68 @@ * Used to display the current step. If `numberOfSteps === 1` this number will not display.
 
-export type GuideCueProps = {
-  /**
-   * Determines if the `Tooltip` will appear as open or close.
-   * @default false
-   */
-  open: boolean;
-  /**
-   * Callback to change the open state of the Tooltip in consuming applications.
-   */
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-  /**
-   * Pass a reference to an element that the beacon or tooltip(if stand-alone) should be centered against.
-   */
-  refEl: React.RefObject<HTMLElement>;
-  /**
-   * Determines whether the `Tooltip` will appear in dark mode.
-   * @default false
-   */
-  darkMode?: boolean;
-  /**
-   * Title to appear inside of Tooltip.
-   */
-  title: string;
-  /**
-   * Body content to appear inside the tooltip, under the title.
-   */
-  children: React.ReactNode;
-  /**
-   * ClassName to be applied to the tooltip element.
-   */
-  tooltipClassName?: string;
-  /**
-   * Text to appear inside the primary button. The default text for the stand-alone tooltip is `Got it`. The default text for the multi-step tooltip varies on the `numberOfSteps` and `currentStep`. If `numberOfSteps === currentStep` the text is `Got it` else it is `Next.
-   */
-  buttonText?: string;
-  /**
-   * Callback fired when the dismiss(X) button is clicked or when the `Esc` key is pressed. This only applies to the multi-step tooltip.
-   */
-  onDismiss?: () => void;
-  /**
-   * Callback fired when the primary button is clicked. This applies to both the stand-alone and multi-step tooltip. This is also fired when the `Esc` key is pressed in the stand-alone tooltip.
-   */
-  onPrimaryButtonClick?: () => void;
-  /**
-   * Determines the alignment of the tooltip.
-   * @default 'top'
-   */
-  tooltipAlign?: TooltipAlign;
-  /**
-   * Determines the justification of the tooltip.
-   * @default 'middle'
-   */
-  tooltipJustify?: TooltipJustify;
-  /**
-   * Determines the alignment of the beacon(animated pulsing circle that appears on top of the trigger element). This only applies to the multi-step tooltip.
-   * @default 'center-horizontal'
-   */
-  beaconAlign?: Align;
-} & ModifiedTooltipProps &
-  ConditionalProps;
+export type GuideCueProps = ModifiedTooltipProps &
+  ConditionalProps &
+  DarkModeProps & {
+    /**
+     * Determines if the `Tooltip` will appear as open or close.
+     * @default false
+     */
+    open: boolean;
+
+    /**
+     * Callback to change the open state of the Tooltip.
+     */
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+
+    /**
+     * Reference to an element that the tooltip should be positioned against.
+     */
+    refEl: React.RefObject<HTMLElement>;
+
+    /**
+     * Title to appear inside of Tooltip.
+     */
+    title: string;
+
+    /**
+     * Body content to appear inside the tooltip, under the title.
+     */
+    children: React.ReactNode;
+
+    /**
+     * ClassName to be applied to the tooltip element.
+     */
+    tooltipClassName?: string;
+
+    /**
+     * Text to appear inside the primary button. The default text for the stand-alone tooltip is `Got it`. The default text for the multi-step tooltip varies on the `numberOfSteps` and `currentStep`. If `numberOfSteps === currentStep` the text is `Got it` else it is `Next.
+     */
+    buttonText?: string;
+
+    /**
+     * Callback fired when the dismiss(X) button is clicked or when the `Esc` key is pressed. This only applies to the multi-step tooltip.
+     */
+    onDismiss?: () => void;
+
+    /**
+     * Callback fired when the primary button is clicked. This applies to both the stand-alone and multi-step tooltip. This is also fired when the `Esc` key is pressed in the stand-alone tooltip.
+     */
+    onPrimaryButtonClick?: () => void;
+
+    /**
+     * Determines the alignment of the tooltip.
+     * @default 'top'
+     */
+    tooltipAlign?: TooltipAlign;
+
+    /**
+     * Determines the justification of the tooltip.
+     * @default 'middle'
+     */
+    tooltipJustify?: TooltipJustify;
+
+    /**
+     * Determines the alignment of the beacon(animated pulsing circle that appears on top of the trigger element). This only applies to the multi-step tooltip.
+     * @default 'center-horizontal'
+     */
+    beaconAlign?: Align;
+  };

stories.js

@@ -1,1 +0,1 @@
-import e,{useState as t,useRef as n,useEffect as r}from"react";import o from"@leafygreen-ui/button";import{css as i,cx as l}from"@leafygreen-ui/emotion";import{Theme as a,storybookArgTypes as s}from"@leafygreen-ui/lib";import{Body as u,Disclaimer as c}from"@leafygreen-ui/typography";import p from"prop-types";import{usePrefersReducedMotion as f}from"@leafygreen-ui/a11y";import{useIdAllocator as m,useIsomorphicLayoutEffect as d}from"@leafygreen-ui/hooks";import{useDarkMode as b}from"@leafygreen-ui/leafygreen-provider";import y,{Align as g,Justify as h}from"@leafygreen-ui/popover";import{transparentize as v}from"polished";import{palette as x}from"@leafygreen-ui/palette";import O from"focus-trap-react";import E from"@leafygreen-ui/icon/dist/X";import C from"@leafygreen-ui/icon-button";import k from"@leafygreen-ui/tooltip";function S(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function w(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?S(Object(n),!0).forEach((function(t){j(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):S(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function N(e){return N="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},N(e)}function j(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function M(){return M=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},M.apply(this,arguments)}function T(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function P(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function A(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==n)return;var r,o,i=[],l=!0,a=!1;try{for(n=n.call(e);!(l=(r=n.next()).done)&&(i.push(r.value),!t||i.length!==t);l=!0);}catch(e){a=!0,o=e}finally{try{l||null==n.return||n.return()}finally{if(a)throw o}}return i}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return D(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return D(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function D(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var B,I,Z,F,J,z,G,q,L,Y,H,R,U,X,$,K,Q,V=i(B||(B=P(["\n  padding: 32px 16px 16px;\n"]))),W=i(I||(I=P(["\n  cursor: auto;\n"]))),_=function(e,t){var n=t?x.blue.light2:x.blue.base,r=i(Z||(Z=P(["\n    position: relative;\n\n    div {\n      width: ","px;\n      height: ","px;\n      border-radius: 50%;\n      background-color: ",";\n      transform-origin: center;\n      position: relative;\n    }\n  "])),24,24,v(.5,n));return l(r,e?i(F||(F=P(["\n        div {\n          box-shadow: 0px 0px 0px 4px ",";\n        }\n      "])),v(.83,n)):i(J||(J=P(["\n      &::before,\n      &::after {\n        content: '';\n        position: absolute;\n        border-radius: 50%;\n        translate: -50% -50%;\n        top: 50%;\n        left: 50%;\n        scale: 0.9;\n        opacity: 0;\n        width: ","px;\n        height: ","px;\n        background: rgba(255, 255, 255, 0);\n        box-shadow: 0px 0px 0px 0px ",";\n      }\n\n      // inner most pulse ring\n      &::before {\n        animation: pulse-outer 2.3s infinite cubic-bezier(0.42, 0, 0.61, 0.69);\n      }\n\n      // outer mosts pulse ring\n      &::after {\n        animation: pulse-outer-2 2.3s infinite cubic-bezier(0.42, 0, 0.46, 0.72);\n      }\n\n      @keyframes pulse-outer {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        40%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 42% and remain that way until 100%\n          scale: 1;\n          box-shadow: 0px 0px 0px 15px ",";\n          opacity: 0;\n        }\n      }\n\n      @keyframes pulse-outer-2 {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        35%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 35% and remain that way until 100%. This is 35% so that it gives the illusion of disappearing before the first ring.\n          scale: 1;\n          box-shadow: 0px 0px 0px 18px ",";\n          opacity: 0;\n        }\n      }\n\n      div {\n        animation: pulse-inner 2.3s infinite cubic-bezier(0.42, 0, 0.58, 0.72);\n\n        @keyframes pulse-inner {\n          40% {\n            // at 0% this will start to slowly scale and by 40% this should scale to 1.3\n            scale: 1.3;\n          }\n          73% {\n            // By 73% this should scale back to 1. From 73% to 100% it will remain at 1.\n            scale: 1;\n          }\n        }\n      }\n    "])),24,24,v(1,n),v(.95,n),v(.7,n),v(.95,n),v(.7,n)))},ee=i(z||(z=P(["\n  margin-bottom: 16px;\n"]))),te=i(G||(G=P(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 16px;\n"]))),ne=(j(Y={},a.Light,i(q||(q=P(["\n    color: ",";\n  "])),x.gray.light1)),j(Y,a.Dark,i(L||(L=P(["\n    color: ",";\n  "])),x.black)),Y),re=i(H||(H=P(["\n  margin-bottom: 4px;\n"]))),oe=i(R||(R=P(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n"]))),ie=i(U||(U=P(["\n  color: ",";\n  &:hover,\n  &:active {\n    &::before {\n      background-color: ",";\n    }\n  }\n"])),x.gray.dark2,x.gray.light3),le=(j(K={},a.Light,i(X||(X=P(["\n    color: ",";\n  "])),x.gray.base)),j(K,a.Dark,i($||($=P(["\n    color: ",";\n  "])),x.gray.dark2)),K),ae=i(Q||(Q=P(["\n  height: 28px;\n"]))),se=["darkMode","open","setOpen","tooltipJustify","tooltipAlign","refEl","portalClassName","portalContainer","scrollContainer","popoverZIndex","theme","title","isStandalone","buttonText","numberOfSteps","currentStep","children","tooltipClassName","onEscClose","handleButtonClick","handleCloseClick","usePortal"];function ue(t){var n=t.darkMode,r=t.open,i=t.setOpen,a=t.tooltipJustify,s=t.tooltipAlign,p=t.refEl,f=t.portalClassName,d=t.portalContainer,b=t.scrollContainer,y=t.popoverZIndex,g=t.theme,h=t.title,v=t.isStandalone,x=t.buttonText,S=t.numberOfSteps,w=t.currentStep,N=t.children,P=t.tooltipClassName,A=t.onEscClose,D=t.handleButtonClick,B=t.handleCloseClick,I=t.usePortal,Z=void 0===I||I,F=T(t,se),J=m({prefix:"guide-cue"}),z={fallbackFocus:"#".concat(J),clickOutsideDeactivates:!0};return e.createElement(e.Fragment,null,e.createElement(k,M({darkMode:n,open:r,setOpen:i,justify:a,align:s,refEl:p,className:l(j({},V,!v),W,P),portalClassName:f,portalContainer:d,scrollContainer:b,popoverZIndex:y,onClose:A,role:"dialog","aria-labelledby":"guide-cue-label",usePortal:Z},F),e.createElement(O,{focusTrapOptions:z},e.createElement("div",null,!v&&e.createElement(C,{className:l(oe,j({},ie,n)),"aria-label":"Close Tooltip",onClick:B,darkMode:!n},e.createElement(E,null)),e.createElement("div",{className:ee},e.createElement(u,{id:"guide-cue-label",as:"h2",className:re,darkMode:!n},e.createElement("strong",null,h)),e.createElement(u,{as:"div",className:ne[g],id:"guide-cue-desc"},N)),e.createElement("div",{className:te},!v&&e.createElement(c,{className:le[g]},w," of ",S),e.createElement(o,{variant:"primary",onClick:function(){return D()},darkMode:!n,id:J,className:ae},x))))))}ue.displayName="TooltipContent";var ce,pe,fe,me,de,be=["open","setOpen","refEl","numberOfSteps","currentStep","darkMode","title","children","onDismiss","onPrimaryButtonClick","tooltipClassName","portalClassName","buttonText","tooltipAlign","tooltipJustify","beaconAlign","portalContainer","scrollContainer","popoverZIndex"];function ye(o){var i=o.open,l=o.setOpen,a=o.refEl,s=o.numberOfSteps,u=o.currentStep,c=void 0===u?1:u,p=o.darkMode,m=o.title,v=o.children,x=o.onDismiss,O=void 0===x?function(){}:x,E=o.onPrimaryButtonClick,C=void 0===E?function(){}:E,k=o.tooltipClassName,S=o.portalClassName,N=o.buttonText,j=o.tooltipAlign,P=void 0===j?g.Top:j,D=o.tooltipJustify,B=void 0===D?h.Middle:D,I=o.beaconAlign,Z=void 0===I?g.CenterHorizontal:I,F=o.portalContainer,J=o.scrollContainer,z=o.popoverZIndex,G=T(o,be),q=b(p),L=q.darkMode,Y=q.theme,H=f(),R=A(t(!1),2),U=R[0],X=R[1],$=A(t(!1),2),K=$[0],Q=$[1],V=n(null),W=N||(c===s||1===s?"Got it":"Next"),ee=s<=1;r((function(){var e,t;return i?(X(!0),e=setTimeout((function(){return Q(!0)}),400)):(Q(!1),t=setTimeout((function(){return X(!1)}),100)),function(){clearTimeout(e),clearTimeout(t)}}),[i]);var te={portalClassName:S,portalContainer:F,scrollContainer:J},ne=w(w({darkMode:L,open:i,setOpen:l,tooltipJustify:B,tooltipAlign:P,refEl:a,popoverZIndex:z,numberOfSteps:s,currentStep:c,theme:Y,title:m,isStandalone:ee,buttonText:W,tooltipClassName:k,onEscClose:ee?C:O,handleButtonClick:function(){l(!1),setTimeout((function(){return C()}),ee?0:400)},handleCloseClick:function(){l(!1),setTimeout((function(){return O()}),400)}},te),G),re=A(t(!1),2),oe=re[0],ie=re[1];return d((function(){return ie(!0)}),[]),oe?e.createElement(e.Fragment,null,ee?e.createElement(ue,ne,v):e.createElement(y,M({active:U,refEl:a,align:Z,justify:h.Middle,spacing:-12,adjustOnMutation:!0,popoverZIndex:z},te),e.createElement("div",{ref:V,className:_(H,L)},e.createElement("div",null)),e.createElement(ue,M({},ne,{refEl:V,open:K,usePortal:!1}),v))):null}ye.displayName="GuideCue",ye.propTypes={children:p.node,darkMode:p.bool,open:p.bool,setOpen:p.func,refEl:p.shape({current:"undefined"!=typeof window?p.instanceOf(Element):p.any}),numberOfSteps:p.number.isRequired,currentStep:function(e,t){return e.numberOfSteps>1&&"number"!=typeof e[t]?new Error("`currentStep` prop of type `number` is required if numberOfSteps > 1"):e.numberOfSteps<=1&&void 0!==e[t]&&"number"!=typeof e[t]?new Error("'currentStep' prop is invalid. Type '".concat(N(e[t]),"' supplied to 'currentStep', expected 'number'")):void 0},title:p.string,tooltipClassName:p.string,buttonText:p.string,onDismiss:p.func,onPrimaryButtonClick:p.func,tooltipAlign:p.oneOf(Object.values(g)),tooltipJustify:p.oneOf(Object.values(h)),beaconAlign:p.oneOf(Object.values(g)),popoverZIndex:p.number,scrollContainer:"undefined"!=typeof window?p.instanceOf(Element):p.any,portalContainer:"undefined"!=typeof window?p.instanceOf(Element):p.any,portalClassName:p.string};var ge={title:"Components/GuideCue",component:ye,parameters:{controls:{exclude:["className","refEl","setOpen","tooltipClassName","open","onDismiss","onPrimaryButtonClick"]}},argTypes:{darkMode:s.darkMode,numberOfSteps:{control:"number"},currentStep:{control:"number"},children:{control:"text"},buttonText:{control:"text"}},args:{title:"New feature",children:"This is a new feature. You should try it out",buttonText:"Next",numberOfSteps:4,currentStep:2}},he=function(r){var l=A(t(!1),2),a=l[0],s=l[1],c=n(null),p=r.children,f=r.darkMode;return e.createElement(e.Fragment,null,e.createElement(o,{onClick:function(){return s((function(e){return!e}))},className:i(ce||(ce=P(["\n          margin-bottom: 100px;\n        "]))),darkMode:f},"Open me"),e.createElement("div",{ref:c},e.createElement(u,{darkMode:f},"story refEl trigger")),e.createElement(ye,M({},r,{darkMode:f,open:a,setOpen:s,refEl:c,onPrimaryButtonClick:function(){return console.log("next")},onDismiss:function(){return console.log("close")},"aria-labelledby":"test"}),p))}.bind({}),ve=i(pe||(pe=P(["\n  width: 800px;\n  height: 100vh;\n  background-color: #e8edeb;\n  overflow: scroll;\n  position: relative;\n"]))),xe=i(fe||(fe=P(["\n  position: relative;\n  height: 130vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]))),Oe=function(r){var l=A(t(!1),2),a=l[0],s=l[1],c=n(null),p=n(null),f=r.children,m=r.darkMode;return e.createElement("div",{className:ve},e.createElement("div",{className:xe,ref:p},e.createElement(e.Fragment,null,e.createElement(o,{onClick:function(){return s((function(e){return!e}))},className:i(me||(me=P(["\n              margin-bottom: 100px;\n            "]))),darkMode:m},"Open me"),e.createElement("div",{ref:c},e.createElement(u,{darkMode:m},"story refEl trigger")),e.createElement(ye,M({},r,{darkMode:m,open:a,setOpen:s,refEl:c,portalContainer:p.current,scrollContainer:p.current}),f))))},Ee=i(de||(de=P(["\n  margin-bottom: 30px;\n"]))),Ce=function(r){var i=r.darkMode,l=A(t(!1),2),a=l[0],s=l[1],c=A(t(1),2),p=c[0],f=c[1],m=n(null),d=n(null),b=n(null),y=[m,d,b],g=y.length;return e.createElement(e.Fragment,null,e.createElement(o,{className:Ee,onClick:function(){f(1),s(!0)}},"Begin tour"),e.createElement("div",{ref:m},e.createElement(u,{className:Ee,darkMode:i},"story refEl trigger1")),e.createElement("div",{ref:d},e.createElement(u,{className:Ee,darkMode:i},"story refEl trigger2")),e.createElement("div",{ref:b},e.createElement(u,{className:Ee,darkMode:i},"story refEl trigger3")),e.createElement(ye,{darkMode:i,open:a,setOpen:s,refEl:y[p-1],numberOfSteps:g,currentStep:p,onPrimaryButtonClick:function(){p!==g&&(f((function(e){return e+1})),s(!0))},onDismiss:function(){console.log("dismissed")},title:"New feature"},"This is a new feature. You should try it out"))};Ce.parameters={controls:{exclude:["title","children","buttonText","numberOfSteps","currentStep","tooltipAlign","tooltipJustify","beaconAlign","className","refEl","setOpen","tooltipClassName","open","onDismiss","onPrimaryButtonClick"]}};export{he as Default,Ce as MultistepDemo,Oe as ScrollableContainer,ge as default};
+import e,{useState as n,useRef as t,useEffect as r}from"react";import o from"@leafygreen-ui/button";import{css as i,cx as l}from"@leafygreen-ui/emotion";import{Theme as a,storybookArgTypes as s}from"@leafygreen-ui/lib";import{Body as c,Disclaimer as u}from"@leafygreen-ui/typography";import p from"prop-types";import{usePrefersReducedMotion as m}from"@leafygreen-ui/a11y";import{useIdAllocator as f,useIsomorphicLayoutEffect as d}from"@leafygreen-ui/hooks";import{useDarkMode as b}from"@leafygreen-ui/leafygreen-provider";import y,{Align as g,Justify as h}from"@leafygreen-ui/popover";import{transparentize as v}from"polished";import{palette as x}from"@leafygreen-ui/palette";import O from"focus-trap-react";import E from"@leafygreen-ui/icon/dist/X";import C from"@leafygreen-ui/icon-button";import k from"@leafygreen-ui/tooltip";function S(e,n){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(e,n).enumerable}))),t.push.apply(t,r)}return t}function w(e){for(var n=1;n<arguments.length;n++){var t=null!=arguments[n]?arguments[n]:{};n%2?S(Object(t),!0).forEach((function(n){j(e,n,t[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):S(Object(t)).forEach((function(n){Object.defineProperty(e,n,Object.getOwnPropertyDescriptor(t,n))}))}return e}function N(e){return N="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},N(e)}function j(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}function M(){return M=Object.assign||function(e){for(var n=1;n<arguments.length;n++){var t=arguments[n];for(var r in t)Object.prototype.hasOwnProperty.call(t,r)&&(e[r]=t[r])}return e},M.apply(this,arguments)}function T(e,n){if(null==e)return{};var t,r,o=function(e,n){if(null==e)return{};var t,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||(o[t]=e[t]);return o}(e,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],n.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(o[t]=e[t])}return o}function P(e,n){return n||(n=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(n)}}))}function A(e,n){return function(e){if(Array.isArray(e))return e}(e)||function(e,n){var t=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null==t)return;var r,o,i=[],l=!0,a=!1;try{for(t=t.call(e);!(l=(r=t.next()).done)&&(i.push(r.value),!n||i.length!==n);l=!0);}catch(e){a=!0,o=e}finally{try{l||null==t.return||t.return()}finally{if(a)throw o}}return i}(e,n)||function(e,n){if(!e)return;if("string"==typeof e)return D(e,n);var t=Object.prototype.toString.call(e).slice(8,-1);"Object"===t&&e.constructor&&(t=e.constructor.name);if("Map"===t||"Set"===t)return Array.from(e);if("Arguments"===t||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t))return D(e,n)}(e,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function D(e,n){(null==n||n>e.length)&&(n=e.length);for(var t=0,r=new Array(n);t<n;t++)r[t]=e[t];return r}var B,I,F,Z,J,z,G,q,L,Y,H,R,U,X,$,K,Q,V=i(B||(B=P(["\n  padding: 32px 16px 16px;\n"]))),W=i(I||(I=P(["\n  cursor: auto;\n"]))),_=function(e,n){var t=n?x.blue.light2:x.blue.base,r=i(F||(F=P(["\n    position: relative;\n\n    div {\n      width: ","px;\n      height: ","px;\n      border-radius: 50%;\n      background-color: ",";\n      transform-origin: center;\n      position: relative;\n    }\n  "])),24,24,v(.5,t));return l(r,e?i(Z||(Z=P(["\n        div {\n          box-shadow: 0px 0px 0px 4px ",";\n        }\n      "])),v(.83,t)):i(J||(J=P(["\n      &::before,\n      &::after {\n        content: '';\n        position: absolute;\n        border-radius: 50%;\n        translate: -50% -50%;\n        top: 50%;\n        left: 50%;\n        scale: 0.9;\n        opacity: 0;\n        width: ","px;\n        height: ","px;\n        background: rgba(255, 255, 255, 0);\n        box-shadow: 0px 0px 0px 0px ",";\n      }\n\n      // inner most pulse ring\n      &::before {\n        animation: pulse-outer 2.3s infinite cubic-bezier(0.42, 0, 0.61, 0.69);\n      }\n\n      // outer mosts pulse ring\n      &::after {\n        animation: pulse-outer-2 2.3s infinite cubic-bezier(0.42, 0, 0.46, 0.72);\n      }\n\n      @keyframes pulse-outer {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        40%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 42% and remain that way until 100%\n          scale: 1;\n          box-shadow: 0px 0px 0px 15px ",";\n          opacity: 0;\n        }\n      }\n\n      @keyframes pulse-outer-2 {\n        10% {\n          box-shadow: 0px 0px 0px 0px ",";\n          opacity: 1;\n        }\n\n        35%,\n        100% {\n          // this should scale up to 1 and have 0 opacity by 35% and remain that way until 100%. This is 35% so that it gives the illusion of disappearing before the first ring.\n          scale: 1;\n          box-shadow: 0px 0px 0px 18px ",";\n          opacity: 0;\n        }\n      }\n\n      div {\n        animation: pulse-inner 2.3s infinite cubic-bezier(0.42, 0, 0.58, 0.72);\n\n        @keyframes pulse-inner {\n          40% {\n            // at 0% this will start to slowly scale and by 40% this should scale to 1.3\n            scale: 1.3;\n          }\n          73% {\n            // By 73% this should scale back to 1. From 73% to 100% it will remain at 1.\n            scale: 1;\n          }\n        }\n      }\n    "])),24,24,v(1,t),v(.95,t),v(.7,t),v(.95,t),v(.7,t)))},ee=i(z||(z=P(["\n  margin-bottom: 16px;\n"]))),ne=i(G||(G=P(["\n  display: flex;\n  justify-content: flex-end;\n  align-items: center;\n  gap: 16px;\n"]))),te=(j(Y={},a.Light,i(q||(q=P(["\n    color: ",";\n  "])),x.gray.light1)),j(Y,a.Dark,i(L||(L=P(["\n    color: ",";\n  "])),x.black)),Y),re=i(H||(H=P(["\n  margin-bottom: 4px;\n"]))),oe=i(R||(R=P(["\n  position: absolute;\n  top: 10px;\n  right: 10px;\n"]))),ie=i(U||(U=P(["\n  color: ",";\n  &:hover,\n  &:active {\n    &::before {\n      background-color: ",";\n    }\n  }\n"])),x.gray.dark2,x.gray.light3),le=(j(K={},a.Light,i(X||(X=P(["\n    color: ",";\n  "])),x.gray.base)),j(K,a.Dark,i($||($=P(["\n    color: ",";\n  "])),x.gray.dark2)),K),ae=i(Q||(Q=P(["\n  height: 28px;\n"]))),se=["darkMode","open","setOpen","tooltipJustify","tooltipAlign","refEl","portalClassName","portalContainer","scrollContainer","popoverZIndex","theme","title","isStandalone","buttonText","numberOfSteps","currentStep","children","tooltipClassName","onEscClose","handleButtonClick","handleCloseClick","usePortal"];function ce(n){var t=n.darkMode,r=n.open,i=n.setOpen,a=n.tooltipJustify,s=n.tooltipAlign,p=n.refEl,m=n.portalClassName,d=n.portalContainer,b=n.scrollContainer,y=n.popoverZIndex,g=n.theme,h=n.title,v=n.isStandalone,x=n.buttonText,S=n.numberOfSteps,w=n.currentStep,N=n.children,P=n.tooltipClassName,A=n.onEscClose,D=n.handleButtonClick,B=n.handleCloseClick,I=n.usePortal,F=void 0===I||I,Z=T(n,se),J=f({prefix:"guide-cue"}),z={fallbackFocus:"#".concat(J),clickOutsideDeactivates:!0};return e.createElement(e.Fragment,null,e.createElement(k,M({darkMode:t,open:r,setOpen:i,justify:a,align:s,refEl:p,className:l(j({},V,!v),W,P),portalClassName:m,portalContainer:d,scrollContainer:b,popoverZIndex:y,onClose:A,role:"dialog","aria-labelledby":"guide-cue-label",usePortal:F},Z),e.createElement(O,{focusTrapOptions:z},e.createElement("div",null,!v&&e.createElement(C,{className:l(oe,j({},ie,t)),"aria-label":"Close Tooltip",onClick:B,darkMode:!t},e.createElement(E,null)),e.createElement("div",{className:ee},e.createElement(c,{id:"guide-cue-label",as:"h2",className:re,darkMode:!t},e.createElement("strong",null,h)),e.createElement(c,{as:"div",className:te[g],id:"guide-cue-desc"},N)),e.createElement("div",{className:ne},!v&&e.createElement(u,{className:le[g]},w," of ",S),e.createElement(o,{variant:"primary",onClick:function(){return D()},darkMode:!t,id:J,className:ae},x))))))}ce.displayName="TooltipContent";var ue,pe,me,fe,de,be=["open","setOpen","refEl","numberOfSteps","currentStep","darkMode","title","children","onDismiss","onPrimaryButtonClick","tooltipClassName","portalClassName","buttonText","tooltipAlign","tooltipJustify","beaconAlign","portalContainer","scrollContainer","popoverZIndex"];function ye(o){var i=o.open,l=o.setOpen,a=o.refEl,s=o.numberOfSteps,c=o.currentStep,u=void 0===c?1:c,p=o.darkMode,f=o.title,v=o.children,x=o.onDismiss,O=void 0===x?function(){}:x,E=o.onPrimaryButtonClick,C=void 0===E?function(){}:E,k=o.tooltipClassName,S=o.portalClassName,N=o.buttonText,j=o.tooltipAlign,P=void 0===j?g.Top:j,D=o.tooltipJustify,B=void 0===D?h.Middle:D,I=o.beaconAlign,F=void 0===I?g.CenterHorizontal:I,Z=o.portalContainer,J=o.scrollContainer,z=o.popoverZIndex,G=T(o,be),q=b(p),L=q.darkMode,Y=q.theme,H=m(),R=A(n(!1),2),U=R[0],X=R[1],$=A(n(!1),2),K=$[0],Q=$[1],V=t(null),W=N||(u===s||1===s?"Got it":"Next"),ee=s<=1;r((function(){var e,n;return i&&!ee?(X(!0),e=setTimeout((function(){return Q(!0)}),400)):(Q(!1),n=setTimeout((function(){return X(!1)}),100)),function(){clearTimeout(e),clearTimeout(n)}}),[i,ee]);var ne={portalClassName:S,portalContainer:Z,scrollContainer:J},te=w(w({darkMode:L,open:i,setOpen:l,tooltipJustify:B,tooltipAlign:P,refEl:a,popoverZIndex:z,numberOfSteps:s,currentStep:u,theme:Y,title:f,isStandalone:ee,buttonText:W,tooltipClassName:k,onEscClose:ee?C:O,handleButtonClick:function(){l(!1),setTimeout((function(){return C()}),ee?0:400)},handleCloseClick:function(){l(!1),setTimeout((function(){return O()}),400)}},ne),G),re=A(n(!1),2),oe=re[0],ie=re[1];return d((function(){return ie(!0)}),[]),oe?e.createElement(e.Fragment,null,ee?e.createElement(ce,te,v):e.createElement(e.Fragment,null,e.createElement(y,M({active:U,refEl:a,align:F,justify:h.Middle,spacing:-12,adjustOnMutation:!0,popoverZIndex:z},ne),e.createElement("div",{ref:V,className:_(H,L)},e.createElement("div",null))),e.createElement(ce,M({},te,{refEl:V,open:K}),v))):null}ye.displayName="GuideCue",ye.propTypes={children:p.node,darkMode:p.bool,open:p.bool,setOpen:p.func,refEl:p.shape({current:"undefined"!=typeof window?p.instanceOf(Element):p.any}),numberOfSteps:p.number.isRequired,currentStep:function(e,n){return e.numberOfSteps>1&&"number"!=typeof e[n]?new Error("`currentStep` prop of type `number` is required if numberOfSteps > 1"):e.numberOfSteps<=1&&void 0!==e[n]&&"number"!=typeof e[n]?new Error("'currentStep' prop is invalid. Type '".concat(N(e[n]),"' supplied to 'currentStep', expected 'number'")):void 0},title:p.string,tooltipClassName:p.string,buttonText:p.string,onDismiss:p.func,onPrimaryButtonClick:p.func,tooltipAlign:p.oneOf(Object.values(g)),tooltipJustify:p.oneOf(Object.values(h)),beaconAlign:p.oneOf(Object.values(g)),popoverZIndex:p.number,scrollContainer:"undefined"!=typeof window?p.instanceOf(Element):p.any,portalContainer:"undefined"!=typeof window?p.instanceOf(Element):p.any,portalClassName:p.string};var ge={title:"Components/GuideCue",component:ye,parameters:{controls:{exclude:["className","refEl","setOpen","tooltipClassName","open","onDismiss","onPrimaryButtonClick"]}},argTypes:{darkMode:s.darkMode,numberOfSteps:{control:"number"},currentStep:{control:"number"},children:{control:"text"},buttonText:{control:"text"}},args:{title:"New feature",children:"This is a new feature. You should try it out",buttonText:"Next",numberOfSteps:4,currentStep:2}},he=function(r){var l=A(n(!1),2),a=l[0],s=l[1],u=t(null),p=r.children,m=r.darkMode;return e.createElement(e.Fragment,null,e.createElement(o,{onClick:function(){return s((function(e){return!e}))},className:i(ue||(ue=P(["\n          margin-bottom: 100px;\n        "]))),darkMode:m},"Open me"),e.createElement("div",{ref:u},e.createElement(c,{darkMode:m},"story refEl trigger")),e.createElement(ye,M({},r,{darkMode:m,open:a,setOpen:s,refEl:u,onPrimaryButtonClick:function(){return console.log("next")},onDismiss:function(){return console.log("close")},"aria-labelledby":"test"}),p))}.bind({}),ve=i(pe||(pe=P(["\n  width: 800px;\n  height: 100vh;\n  background-color: #e8edeb;\n  overflow: scroll;\n  position: relative;\n"]))),xe=i(me||(me=P(["\n  position: relative;\n  height: 130vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"]))),Oe=function(r){var l=A(n(!1),2),a=l[0],s=l[1],u=t(null),p=t(null),m=r.children,f=r.darkMode;return e.createElement("div",{className:ve},e.createElement("div",{className:xe,ref:p},e.createElement(e.Fragment,null,e.createElement(o,{onClick:function(){return s((function(e){return!e}))},className:i(fe||(fe=P(["\n              margin-bottom: 100px;\n            "]))),darkMode:f},"Open me"),e.createElement("div",{ref:u},e.createElement(c,{darkMode:f},"story refEl trigger")),e.createElement(ye,M({},r,{darkMode:f,open:a,setOpen:s,refEl:u,portalContainer:p.current,scrollContainer:p.current}),m))))},Ee=i(de||(de=P(["\n  margin-bottom: 30px;\n"]))),Ce=function(r){var i=r.darkMode,l=A(n(!1),2),a=l[0],s=l[1],u=A(n(1),2),p=u[0],m=u[1],f=t(null),d=t(null),b=t(null),y=[f,d,b],g=y.length;return e.createElement(e.Fragment,null,e.createElement(o,{className:Ee,onClick:function(){m(1),s(!0)}},"Begin tour"),e.createElement("div",{ref:f},e.createElement(c,{className:Ee,darkMode:i},"story refEl trigger1")),e.createElement("div",{ref:d},e.createElement(c,{className:Ee,darkMode:i},"story refEl trigger2")),e.createElement("div",{ref:b},e.createElement(c,{className:Ee,darkMode:i},"story refEl trigger3")),e.createElement(ye,{darkMode:i,open:a,setOpen:s,refEl:y[p-1],numberOfSteps:g,currentStep:p,onPrimaryButtonClick:function(){p!==g&&(m((function(e){return e+1})),s(!0))},onDismiss:function(){console.log("dismissed")},title:"New feature"},"This is a new feature. You should try it out"))};Ce.parameters={controls:{exclude:["title","children","buttonText","numberOfSteps","currentStep","tooltipAlign","tooltipJustify","beaconAlign","className","refEl","setOpen","tooltipClassName","open","onDismiss","onPrimaryButtonClick"]}};export{he as Default,Ce as MultistepDemo,Oe as ScrollableContainer,ge as default};

tsdoc.json

@@ -8,9 +8,62 @@ [
     "props": {
+      "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
+      "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes",
+      "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
       "GuideCueProps": {
-        "open": {
-          "name": "open",
+        "spacing": {
+          "name": "spacing",
+          "defaultValue": null,
+          "description": "Specifies the amount of spacing (in pixels) between the trigger element and the Popover content.\n\ndefault: `10`",
+          "required": false,
+          "type": {
+            "name": "number"
+          },
+          "tags": {}
+        },
+        "popoverZIndex": {
+          "name": "popoverZIndex",
+          "defaultValue": null,
+          "description": "Number that controls the z-index of the popover element directly.",
+          "required": false,
+          "type": {
+            "name": "number"
+          },
+          "tags": {}
+        },
+        "portalClassName": {
+          "name": "portalClassName",
+          "defaultValue": null,
+          "description": "When usePortal is `true`, specifies a class name to apply to the root element of the portal.",
+          "required": false,
+          "type": {
+            "name": "string"
+          },
+          "tags": {}
+        },
+        "portalContainer": {
+          "name": "portalContainer",
+          "defaultValue": null,
+          "description": "When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within.",
+          "required": false,
+          "type": {
+            "name": "HTMLElement"
+          },
+          "tags": {}
+        },
+        "scrollContainer": {
+          "name": "scrollContainer",
+          "defaultValue": null,
+          "description": "When usePortal is `true`, specifies the scrollable element to position relative to.",
+          "required": false,
+          "type": {
+            "name": "HTMLElement"
+          },
+          "tags": {}
+        },
+        "enabled": {
+          "name": "enabled",
           "defaultValue": {
-            "value": "false\n`false`"
+            "value": "true"
           },
-          "description": "Determines if the `Tooltip` will appear as open or close.\nControls component and determines the open state of the `Tooltip`",
+          "description": "Enables Tooltip to trigger based on the event specified by `triggerEvent`.",
           "required": false,
@@ -30,32 +83,31 @@ "type": {
           "tags": {
-            "default": "false\n`false`"
+            "default": "true"
           }
         },
-        "setOpen": {
-          "name": "setOpen",
+        "baseFontSize": {
+          "name": "baseFontSize",
           "defaultValue": null,
-          "description": "Callback to change the open state of the Tooltip in consuming applications.\nCallback to change the open state of the `Tooltip`.",
+          "description": "Allows consuming applications to override font-size as set by the LeafyGreen Provider.",
           "required": false,
           "type": {
-            "name": "Dispatch<SetStateAction<boolean>>"
+            "name": "enum",
+            "raw": "BaseFontSize",
+            "value": [
+              {
+                "value": "13"
+              },
+              {
+                "value": "16"
+              }
+            ]
           },
           "tags": {}
         },
-        "refEl": {
-          "name": "refEl",
-          "defaultValue": null,
-          "description": "Pass a reference to an element that the beacon or tooltip(if stand-alone) should be centered against.\nA reference to the element against which the popover component will be positioned.",
-          "required": false,
-          "type": {
-            "name": "RefObject<HTMLElement>"
-          },
-          "tags": {}
-        },
-        "darkMode": {
-          "name": "darkMode",
+        "open": {
+          "name": "open",
           "defaultValue": {
-            "value": "false\nfalse"
+            "value": "false"
           },
-          "description": "Determines whether the `Tooltip` will appear in dark mode.\nWhether the `Tooltip` will appear in dark mode.",
-          "required": false,
+          "description": "Determines if the `Tooltip` will appear as open or close.",
+          "required": true,
           "type": {
@@ -74,15 +126,25 @@ "name": "enum",
           "tags": {
-            "default": "false\nfalse"
+            "default": "false"
           }
         },
-        "title": {
-          "name": "title",
+        "setOpen": {
+          "name": "setOpen",
           "defaultValue": null,
-          "description": "Title to appear inside of Tooltip.",
-          "required": false,
+          "description": "Callback to change the open state of the Tooltip.",
+          "required": true,
           "type": {
-            "name": "string"
+            "name": "Dispatch<SetStateAction<boolean>>"
           },
           "tags": {}
         },
+        "refEl": {
+          "name": "refEl",
+          "defaultValue": null,
+          "description": "Reference to an element that the tooltip should be positioned against.",
+          "required": true,
+          "type": {
+            "name": "RefObject<HTMLElement>"
+          },
+          "tags": {}
+        },
         "children": {
@@ -270,8 +332,10 @@ "name": "children",
           }
-        },
-        "spacing": {
-          "name": "spacing",
+        }
+      },
+      "StandaloneProps": {
+        "numberOfSteps": {
+          "name": "numberOfSteps",
           "defaultValue": null,
-          "description": "Specifies the amount of spacing (in pixels) between the trigger element and the Popover content.\n\ndefault: `10`",
-          "required": false,
+          "description": "Used to determine which tooltip will be shown. If `numberOfSteps > 1` then the multi-step tooltip will be shown else the stand-alone tooltip will be shown. This number will only be displayed in the multi-step tooltip.",
+          "required": true,
           "type": {
@@ -282,6 +346,8 @@ "name": "number"
         },
-        "popoverZIndex": {
-          "name": "popoverZIndex",
-          "defaultValue": null,
-          "description": "Number that controls the z-index of the popover element directly.",
+        "currentStep": {
+          "name": "currentStep",
+          "defaultValue": {
+            "value": 1
+          },
+          "description": "Used to display the current step. If `numberOfSteps === 1` this number will not display.",
           "required": false,
@@ -292,39 +358,11 @@ "type": {
           "tags": {}
-        },
-        "portalClassName": {
-          "name": "portalClassName",
-          "defaultValue": null,
-          "description": "When usePortal is `true`, specifies a class name to apply to the root element of the portal.",
-          "required": false,
-          "type": {
-            "name": "string"
-          },
-          "tags": {}
-        },
-        "portalContainer": {
-          "name": "portalContainer",
-          "defaultValue": null,
-          "description": "When usePortal is `true`, specifies an element to portal within. The default behavior is to generate a div at the end of the document to render within.",
-          "required": false,
-          "type": {
-            "name": "HTMLElement"
-          },
-          "tags": {}
-        },
-        "scrollContainer": {
-          "name": "scrollContainer",
-          "defaultValue": null,
-          "description": "When usePortal is `true`, specifies the scrollable element to position relative to.",
-          "required": false,
-          "type": {
-            "name": "HTMLElement"
-          },
-          "tags": {}
-        },
-        "enabled": {
-          "name": "enabled",
+        }
+      },
+      "DarkModeProps": {
+        "darkMode": {
+          "name": "darkMode",
           "defaultValue": {
-            "value": "true"
+            "value": "false"
           },
-          "description": "Enables Tooltip to trigger based on the event specified by `triggerEvent`.",
+          "description": "Renders the component with dark mode styles.",
           "required": false,
@@ -344,51 +382,5 @@ "type": {
           "tags": {
-            "default": "true"
+            "default": "false"
           }
-        },
-        "baseFontSize": {
-          "name": "baseFontSize",
-          "defaultValue": null,
-          "description": "Allows consuming applications to override font-size as set by the LeafyGreen Provider.",
-          "required": false,
-          "type": {
-            "name": "enum",
-            "raw": "BaseFontSize",
-            "value": [
-              {
-                "value": "13"
-              },
-              {
-                "value": "16"
-              }
-            ]
-          },
-          "tags": {}
         }
-      },
-      "HTMLAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
-      "AriaAttributes": "https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes",
-      "DOMAttributes": "https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes",
-      "StandaloneProps": {
-        "numberOfSteps": {
-          "name": "numberOfSteps",
-          "defaultValue": null,
-          "description": "Used to determine which tooltip will be shown. If `numberOfSteps > 1` then the multi-step tooltip will be shown else the stand-alone tooltip will be shown. This number will only be displayed in the multi-step tooltip.",
-          "required": true,
-          "type": {
-            "name": "number"
-          },
-          "tags": {}
-        },
-        "currentStep": {
-          "name": "currentStep",
-          "defaultValue": {
-            "value": 1
-          },
-          "description": "Used to display the current step. If `numberOfSteps === 1` this number will not display.",
-          "required": false,
-          "type": {
-            "name": "number"
-          },
-          "tags": {}
-        }
       }
@@ -395,0 +387,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

261452

increased by0.38%

Published versions last week

2

increased by100%

Worsened metrics

Lines of code

1926

decreased by-0.41%

Number of maintainers

5

decreased by-16.67%

Dependency changes

• + Added@leafygreen-ui/tooltip@10.1.0(transitive)

• + Added@leafygreen-ui/typography@18.4.0(transitive)

• - Removed@leafygreen-ui/tooltip@9.1.8(transitive)

• Updated@leafygreen-ui/a11y@^1.4.3

• Updated@leafygreen-ui/button@^20.0.6

• Updated@leafygreen-ui/hooks@^7.7.2

• Updated@leafygreen-ui/icon@^11.14.0

• Updated@leafygreen-ui/popover@^11.0.9

• Updated@leafygreen-ui/tooltip@^10.0.0

• Updated@leafygreen-ui/typography@^16.4.0