@k8slens/lds-tips 0.1.3 → 0.1.4

package/lib/cjs/Tip/Tip.d.ts

@@ -13,10 +13,6 @@ export interface TipProps extends HTMLAttributes<HTMLDivElement> {
      */
     target: HTMLElement;
     offset?: [number, number];
-    /**
-     * Optional width of the popup. If not specified, the width will be 20rem
-     */
-    width?: string;
     /**
      * Which element to listen for mutations on. Defaults to document.body
      */
@@ -29,5 +25,5 @@ export interface TipProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * Tip component. Uses [React Popper](https://popper.js.org/react-popper/) for the popup positioning.
  */
-declare const Tip: ({ popupRef, className, onDoneClick, onSkipAllClick, target, mutationsListenerElement, theme, id, offset, width, placement, children, ...props }: TipProps) => JSX.Element;
+declare const Tip: ({ popupRef, className, onDoneClick, onSkipAllClick, target, mutationsListenerElement, theme, style, id, offset, placement, children, ...props }: TipProps) => JSX.Element;
 export default Tip;

package/lib/cjs/Tip/Tip.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),a=require("react-popper"),i=require("lodash"),o=require("rooks"),s=require("./Tip.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t),u=n(r),c={subtree:!0,childList:!0,attributes:!1,characterData:!1};module.exports=function(r){var n,p=r.popupRef,d=r.className,m=r.onDoneClick,f=r.onSkipAllClick,h=r.target,v=r.mutationsListenerElement,k=void 0===v?document.body:v,b=r.theme,_=r.id,w=r.offset,q=void 0===w?[20,0]:w,C=r.width,E=r.placement,N=void 0===E?"auto":E,g=r.children,y=e.__rest(r,["popupRef","className","onDoneClick","onSkipAllClick","target","mutationsListenerElement","theme","id","offset","width","placement","children"]),R=t.useRef(null),S=t.useRef(k),j=t.useState(),D=j[0],L=j[1],x=t.useCallback((function(e){L(e),p&&(p.current=e)}),[p]),A=t.useMemo((function(){return[{name:"offset",options:{offset:q}},{name:"arrow",options:{padding:6}}]}),[q]),B=a.usePopper(h,D,{placement:N,modifiers:A}),M=B.styles,G=B.attributes,O=B.update,P=i.throttle((function(){var e;null===(e=null==O?void 0:O())||void 0===e||e.catch((function(e){console.error(e)}))}),250);return o.useMutationObserver(S,P,c),l.default.createElement("div",e.__assign({ref:x,id:_},y,{className:u.default(d,s.tip,(n={},n[s.important]="important"===b,n[s.white]="white"===b,n)),style:e.__assign(e.__assign({},M.popper),{width:C||"20rem"})},G.popper),g,l.default.createElement("div",{"data-popper-arrow":!0,ref:R,className:s.caret,style:M.arrow}),l.default.createElement("div",{className:s.buttons},l.default.createElement("button",{onClick:m,className:s.okButton,"aria-controls":_},"Got it!"),l.default.createElement("button",{onClick:f,className:s.skipButton,"aria-controls":_},"Skip all tips")))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),a=require("react-popper"),o=require("lodash"),i=require("rooks"),s=require("./Tip.module.css.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=n(t),u=n(r),c={subtree:!0,childList:!0,attributes:!1,characterData:!1};module.exports=function(r){var n,p=r.popupRef,d=r.className,f=r.onDoneClick,m=r.onSkipAllClick,v=r.target,k=r.mutationsListenerElement,b=void 0===k?document.body:k,h=r.theme,_=r.style,q=r.id,y=r.offset,C=void 0===y?[20,0]:y,E=r.placement,N=void 0===E?"auto":E,g=r.children,w=e.__rest(r,["popupRef","className","onDoneClick","onSkipAllClick","target","mutationsListenerElement","theme","style","id","offset","placement","children"]),R=t.useRef(null),S=t.useRef(b),j=t.useState(),D=j[0],L=j[1],x=t.useCallback((function(e){L(e),p&&(p.current=e)}),[p]),A=t.useMemo((function(){return[{name:"offset",options:{offset:C}},{name:"arrow",options:{padding:6}}]}),[C]),B=a.usePopper(v,D,{placement:N,modifiers:A}),M=B.styles,G=B.attributes,O=B.update,P=o.throttle((function(){var e;null===(e=null==O?void 0:O())||void 0===e||e.catch((function(e){console.error(e)}))}),250);return i.useMutationObserver(S,P,c),l.default.createElement("div",e.__assign({ref:x,id:q},w,{className:u.default(d,s.tip,(n={},n[s.important]="important"===h,n[s.white]="white"===h,n)),style:e.__assign(e.__assign({},_),M.popper)},G.popper),g,l.default.createElement("div",{"data-popper-arrow":!0,ref:R,className:s.caret,style:M.arrow}),l.default.createElement("div",{className:s.buttons},l.default.createElement("button",{onClick:f,className:s.okButton,"aria-controls":q},"Got it!"),l.default.createElement("button",{onClick:m,className:s.skipButton,"aria-controls":q},"Skip all tips")))};

package/lib/cjs/Tips/Step.js

@@ -1 +1 @@
-"use strict";var e=require("react"),t=require("rooks"),n=require("../TipPointer/TipPointer.js"),i=require("../Tip/Tip.js"),a=require("./Step.module.css.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=l(e);module.exports=function(l){var o=l.step,r=l.target,s=l.goNext,c=l.setSkipAll,p=l.onPointerClick,f=l.onClose,d=l.onNextClick,k=l.onSkipAllClick,m=l.mutationsListenerElement,C=o.theme,b=o.placement,E=o.popupWidth,h=o.popupOffset,g=o.content,S=e.useState(!1),q=S[0],j=S[1],v=e.useRef(null),w=e.useCallback((function(){j(!0),p&&p(o)}),[o,p,j]),x=e.useCallback((function(){s(),j(!1),d&&d(o)}),[o,d,s]),L=e.useCallback((function(){c(),j(!1),k&&k(o)}),[o,k,c]);return t.useOutsideClick(v,e.useCallback((function(e){e.target.id!=="pointer-for-".concat(o.id)&&(j(!1),q&&f&&f(o))}),[f,o,q])),t.useKey("Escape",e.useCallback((function(){j(!1),q&&f&&f(o)}),[f,o,q])),e.useEffect((function(){j(!1)}),[o]),t.useWindowEventListener("blur",e.useCallback((function(){j(!1),q&&f&&f(o)}),[f,o,q])),u.default.createElement(u.default.Fragment,null,u.default.createElement(n,{onClick:w,step:o,target:r,hidden:q,mutationsListenerElement:m,"aria-expanded":!!q,"aria-controls":o.id,"aria-label":"Show tip"}),u.default.createElement(i,{id:o.id,popupRef:v,className:a.step,placement:b,width:E,offset:h,"data-show":!!q,onDoneClick:x,onSkipAllClick:L,target:r,mutationsListenerElement:m,theme:C,role:"status","aria-hidden":!q},g))};
+"use strict";var e=require("react"),t=require("rooks"),n=require("clsx"),l=require("../TipPointer/TipPointer.js"),a=require("../Tip/Tip.js"),i=require("./Step.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=u(e),o=u(n);module.exports=function(n){var u=n.step,r=n.target,c=n.goNext,p=n.setSkipAll,f=n.onPointerClick,d=n.onClose,m=n.onNextClick,k=n.onSkipAllClick,C=n.mutationsListenerElement,b=u.theme,E=u.placement,S=u.popupOffset,g=u.content,h=e.useState(!1),q=h[0],x=h[1],j=e.useRef(null),v=e.useCallback((function(){x(!0),f&&f(u)}),[u,f,x]),y=e.useCallback((function(){c(),x(!1),m&&m(u)}),[u,m,c]),L=e.useCallback((function(){p(),x(!1),k&&k(u)}),[u,k,p]);return t.useOutsideClick(j,e.useCallback((function(e){e.target.id!=="pointer-for-".concat(u.id)&&(x(!1),q&&d&&d(u))}),[d,u,q])),t.useKey("Escape",e.useCallback((function(){x(!1),q&&d&&d(u)}),[d,u,q])),e.useEffect((function(){x(!1)}),[u]),t.useWindowEventListener("blur",e.useCallback((function(){x(!1),q&&d&&d(u)}),[d,u,q])),s.default.createElement(s.default.Fragment,null,s.default.createElement(l,{onClick:v,step:u,target:r,hidden:q,mutationsListenerElement:C,"aria-expanded":!!q,"aria-controls":u.id,"aria-label":"Show tip"}),s.default.createElement(a,{id:u.id,popupRef:j,className:o.default(i.step,u.popupClassName),style:u.popupStyles,placement:E,offset:S,"data-show":!!q,onDoneClick:y,onSkipAllClick:L,target:r,mutationsListenerElement:C,theme:b,role:"status","aria-hidden":!q},g))};

package/lib/cjs/Tips/Steps.d.ts

@@ -7,8 +7,9 @@ export interface Step {
     content: React.ReactNode;
     placement?: TipProps["placement"];
     theme?: TipProps["theme"];
-    popupWidth?: TipProps["width"];
     popupOffset?: TipProps["offset"];
+    popupStyles?: React.CSSProperties;
+    popupClassName?: string;
     pointerOffset?: [number, number];
     pointerStyles?: React.CSSProperties;
     pointerClassName?: string;

package/lib/cjs/index.css

@@ -1 +1 @@
-.lds-tip-pointer--pointer{animation:lds-tip-pointer--pulse 2s infinite;border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.69);border-radius:9999px;box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l));height:var(--spacing-base-5);pointer-events:none;position:absolute;visibility:hidden;width:var(--spacing-base-5);z-index:1}.lds-tip-pointer--pointer:hover{background:hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.21);border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.79)}.lds-tip-pointer--pointer[data-popper-reference-hidden]{pointer-events:none;visibility:hidden}.lds-tip-pointer--pointer[data-show=true]{pointer-events:auto;visibility:visible}@keyframes lds-tip-pointer--pulse{0%{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.7)}70%{box-shadow:0 0 0 10px hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}to{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}}.lds-tip{--background-color:var(--color-background-tip-default);--color:var(--color-font-tip-default)}.lds-tip.lds-tip--important{--background-color:var(--color-background-tip-important);--color:var(--color-font-tip-important)}.lds-tip.lds-tip--white{--background-color:var(--color-background-tip-white);--color:var(--color-font-tip-white)}.lds-tip{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);background-color:var(--background-color);border-radius:.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--color);font-size:.75rem;line-height:1rem;padding:var(--spacing-base-md);z-index:14}.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.lds-tip--caret,.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lds-tip--caret{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);height:var(--spacing-base-sm);width:var(--spacing-base-sm)}.lds-tip[data-popper-placement*=bottom]>.lds-tip--caret{top:calc(var(--spacing-base-xs)*-1)}.lds-tip>.lds-tip--caret:after{--tw-rotate:45deg;background-color:var(--background-color);content:" ";display:block;height:var(--spacing-base-2);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:var(--spacing-base-2)}.lds-tip[data-popper-placement*=right] .lds-tip--caret{left:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=left] .lds-tip--caret{right:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=top] .lds-tip--caret{bottom:calc(var(--spacing-base-xs)*-1)}.lds-tip>h1,.lds-tip>h2,.lds-tip>h3,.lds-tip>h4,.lds-tip>h5,.lds-tip>h6{color:var(--color);font-size:var(--typography-heading-size-h2);font-weight:700;line-height:var(--typography-heading-line-height-h2);margin-bottom:var(--spacing-base-lg);margin-top:var(--spacing-base-xs)}.lds-tip>h1:before,.lds-tip>h2:before,.lds-tip>h3:before,.lds-tip>h4:before,.lds-tip>h5:before,.lds-tip>h6:before{margin-bottom:var(--spacing-h2-basekick-cap)}.lds-tip>h1:after,.lds-tip>h2:after,.lds-tip>h3:after,.lds-tip>h4:after,.lds-tip>h5:after,.lds-tip>h6:after{margin-top:var(--spacing-h2-basekick-baseline)}.lds-tip--buttons{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));margin-top:var(--spacing-base-xl)}@media (min-width:640px){.lds-tip--buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}.lds-tip--ok-button,.lds-tip--skip-button{border-radius:.25rem;padding:var(--spacing-base-md)}.lds-tip--ok-button{background:var(--color-background-tip-button-default);color:var(--color-font-tip-button-default);font-weight:500}.lds-tip--important .lds-tip--ok-button{background:var(--color-background-tip-button-important);color:var(--color-font-tip-button-important)}.lds-tip--white .lds-tip--ok-button{background-color:var(--color-background-tip-button-white);color:var(--color-font-tip-button-white)}.lds-tip--skip-button{color:var(--color);grid-column:3}.lds-tip p{margin-bottom:var(--spacing-base-md)}.lds-step{pointer-events:none;visibility:hidden}.lds-step[data-show=true]{pointer-events:auto;visibility:visible}
+.lds-tip-pointer--pointer{animation:lds-tip-pointer--pulse 2s infinite;border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.69);border-radius:9999px;box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l));height:var(--spacing-base-5);pointer-events:none;position:absolute;visibility:hidden;width:var(--spacing-base-5);z-index:1}.lds-tip-pointer--pointer:hover{background:hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.21);border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.79)}.lds-tip-pointer--pointer[data-popper-reference-hidden]{pointer-events:none;visibility:hidden}.lds-tip-pointer--pointer[data-show=true]{pointer-events:auto;visibility:visible}@keyframes lds-tip-pointer--pulse{0%{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.7)}70%{box-shadow:0 0 0 10px hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}to{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}}.lds-tip{--background-color:var(--color-background-tip-default);--color:var(--color-font-tip-default)}.lds-tip.lds-tip--important{--background-color:var(--color-background-tip-important);--color:var(--color-font-tip-important)}.lds-tip.lds-tip--white{--background-color:var(--color-background-tip-white);--color:var(--color-font-tip-white)}.lds-tip{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);background-color:var(--background-color);border-radius:.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--color);font-size:.75rem;line-height:1rem;padding:var(--spacing-base-md);width:var(--spacing-base-80);z-index:14}.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.lds-tip--caret,.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lds-tip--caret{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);height:var(--spacing-base-sm);width:var(--spacing-base-sm)}.lds-tip[data-popper-placement*=bottom]>.lds-tip--caret{top:calc(var(--spacing-base-xs)*-1)}.lds-tip>.lds-tip--caret:after{--tw-rotate:45deg;background-color:var(--background-color);content:" ";display:block;height:var(--spacing-base-2);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:var(--spacing-base-2)}.lds-tip[data-popper-placement*=right] .lds-tip--caret{left:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=left] .lds-tip--caret{right:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=top] .lds-tip--caret{bottom:calc(var(--spacing-base-xs)*-1)}.lds-tip>h1,.lds-tip>h2,.lds-tip>h3,.lds-tip>h4,.lds-tip>h5,.lds-tip>h6{color:var(--color);font-size:var(--typography-heading-size-h2);font-weight:700;line-height:var(--typography-heading-line-height-h2);margin-bottom:var(--spacing-base-lg);margin-top:var(--spacing-base-xs)}.lds-tip>h1:before,.lds-tip>h2:before,.lds-tip>h3:before,.lds-tip>h4:before,.lds-tip>h5:before,.lds-tip>h6:before{margin-bottom:var(--spacing-h2-basekick-cap)}.lds-tip>h1:after,.lds-tip>h2:after,.lds-tip>h3:after,.lds-tip>h4:after,.lds-tip>h5:after,.lds-tip>h6:after{margin-top:var(--spacing-h2-basekick-baseline)}.lds-tip--buttons{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));margin-top:var(--spacing-base-xl)}@media (min-width:640px){.lds-tip--buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}.lds-tip--ok-button,.lds-tip--skip-button{border-radius:.25rem;padding:var(--spacing-base-md)}.lds-tip--ok-button{background:var(--color-background-tip-button-default);color:var(--color-font-tip-button-default);font-weight:500}.lds-tip--important .lds-tip--ok-button{background:var(--color-background-tip-button-important);color:var(--color-font-tip-button-important)}.lds-tip--white .lds-tip--ok-button{background-color:var(--color-background-tip-button-white);color:var(--color-font-tip-button-white)}.lds-tip--skip-button{color:var(--color);grid-column:3}.lds-tip p{margin-bottom:var(--spacing-base-md)}.lds-step{pointer-events:none;visibility:hidden}.lds-step[data-show=true]{pointer-events:auto;visibility:visible}

package/lib/es/Tip/Tip.d.ts

@@ -13,10 +13,6 @@ export interface TipProps extends HTMLAttributes<HTMLDivElement> {
      */
     target: HTMLElement;
     offset?: [number, number];
-    /**
-     * Optional width of the popup. If not specified, the width will be 20rem
-     */
-    width?: string;
     /**
      * Which element to listen for mutations on. Defaults to document.body
      */
@@ -29,5 +25,5 @@ export interface TipProps extends HTMLAttributes<HTMLDivElement> {
 /**
  * Tip component. Uses [React Popper](https://popper.js.org/react-popper/) for the popup positioning.
  */
-declare const Tip: ({ popupRef, className, onDoneClick, onSkipAllClick, target, mutationsListenerElement, theme, id, offset, width, placement, children, ...props }: TipProps) => JSX.Element;
+declare const Tip: ({ popupRef, className, onDoneClick, onSkipAllClick, target, mutationsListenerElement, theme, style, id, offset, placement, children, ...props }: TipProps) => JSX.Element;
 export default Tip;

package/lib/es/Tip/Tip.js

@@ -1 +1 @@
-import{__rest as t,__assign as e}from"../_virtual/_tslib.js";import o,{useRef as r,useState as i,useCallback as a,useMemo as n}from"react";import l from"clsx";import{usePopper as s}from"react-popper";import{throttle as c}from"lodash";import{useMutationObserver as m}from"rooks";import p from"./Tip.module.css.js";var u={subtree:!0,childList:!0,attributes:!1,characterData:!1},d=function(d){var f,h=d.popupRef,k=d.className,v=d.onDoneClick,b=d.onSkipAllClick,w=d.target,E=d.mutationsListenerElement,N=void 0===E?document.body:E,C=d.theme,y=d.id,g=d.offset,D=void 0===g?[20,0]:g,L=d.width,S=d.placement,j=void 0===S?"auto":S,x=d.children,A=t(d,["popupRef","className","onDoneClick","onSkipAllClick","target","mutationsListenerElement","theme","id","offset","width","placement","children"]),B=r(null),R=r(N),_=i(),G=_[0],T=_[1],q=a((function(t){T(t),h&&(h.current=t)}),[h]),z=n((function(){return[{name:"offset",options:{offset:D}},{name:"arrow",options:{padding:6}}]}),[D]),F=s(w,G,{placement:j,modifiers:z}),H=F.styles,I=F.attributes,J=F.update,K=c((function(){var t;null===(t=null==J?void 0:J())||void 0===t||t.catch((function(t){console.error(t)}))}),250);return m(R,K,u),o.createElement("div",e({ref:q,id:y},A,{className:l(k,p.tip,(f={},f[p.important]="important"===C,f[p.white]="white"===C,f)),style:e(e({},H.popper),{width:L||"20rem"})},I.popper),x,o.createElement("div",{"data-popper-arrow":!0,ref:B,className:p.caret,style:H.arrow}),o.createElement("div",{className:p.buttons},o.createElement("button",{onClick:v,className:p.okButton,"aria-controls":y},"Got it!"),o.createElement("button",{onClick:b,className:p.skipButton,"aria-controls":y},"Skip all tips")))};export{d as default};
+import{__rest as t,__assign as e}from"../_virtual/_tslib.js";import o,{useRef as r,useState as a,useCallback as i,useMemo as n}from"react";import l from"clsx";import{usePopper as s}from"react-popper";import{throttle as c}from"lodash";import{useMutationObserver as m}from"rooks";import p from"./Tip.module.css.js";var u={subtree:!0,childList:!0,attributes:!1,characterData:!1},f=function(f){var d,k=f.popupRef,v=f.className,h=f.onDoneClick,b=f.onSkipAllClick,E=f.target,N=f.mutationsListenerElement,y=void 0===N?document.body:N,C=f.theme,w=f.style,g=f.id,D=f.offset,L=void 0===D?[20,0]:D,S=f.placement,j=void 0===S?"auto":S,x=f.children,A=t(f,["popupRef","className","onDoneClick","onSkipAllClick","target","mutationsListenerElement","theme","style","id","offset","placement","children"]),B=r(null),R=r(y),_=a(),G=_[0],T=_[1],q=i((function(t){T(t),k&&(k.current=t)}),[k]),z=n((function(){return[{name:"offset",options:{offset:L}},{name:"arrow",options:{padding:6}}]}),[L]),F=s(E,G,{placement:j,modifiers:z}),H=F.styles,I=F.attributes,J=F.update,K=c((function(){var t;null===(t=null==J?void 0:J())||void 0===t||t.catch((function(t){console.error(t)}))}),250);return m(R,K,u),o.createElement("div",e({ref:q,id:g},A,{className:l(v,p.tip,(d={},d[p.important]="important"===C,d[p.white]="white"===C,d)),style:e(e({},w),H.popper)},I.popper),x,o.createElement("div",{"data-popper-arrow":!0,ref:B,className:p.caret,style:H.arrow}),o.createElement("div",{className:p.buttons},o.createElement("button",{onClick:h,className:p.okButton,"aria-controls":g},"Got it!"),o.createElement("button",{onClick:b,className:p.skipButton,"aria-controls":g},"Skip all tips")))};export{f as default};

package/lib/es/Tips/Step.js

@@ -1 +1 @@
-import t,{useState as e,useRef as n,useCallback as o,useEffect as i}from"react";import{useOutsideClick as r,useKey as a,useWindowEventListener as l}from"rooks";import p from"../TipPointer/TipPointer.js";import c from"../Tip/Tip.js";import s from"./Step.module.css.js";function m(m){var u=m.step,f=m.target,d=m.goNext,k=m.setSkipAll,h=m.onPointerClick,C=m.onClose,E=m.onNextClick,g=m.onSkipAllClick,S=m.mutationsListenerElement,x=u.theme,T=u.placement,j=u.popupWidth,w=u.popupOffset,A=u.content,L=e(!1),N=L[0],P=L[1],b=n(null),v=o((function(){P(!0),h&&h(u)}),[u,h,P]),D=o((function(){d(),P(!1),E&&E(u)}),[u,E,d]),F=o((function(){k(),P(!1),g&&g(u)}),[u,g,k]);return r(b,o((function(t){t.target.id!=="pointer-for-".concat(u.id)&&(P(!1),N&&C&&C(u))}),[C,u,N])),a("Escape",o((function(){P(!1),N&&C&&C(u)}),[C,u,N])),i((function(){P(!1)}),[u]),l("blur",o((function(){P(!1),N&&C&&C(u)}),[C,u,N])),t.createElement(t.Fragment,null,t.createElement(p,{onClick:v,step:u,target:f,hidden:N,mutationsListenerElement:S,"aria-expanded":!!N,"aria-controls":u.id,"aria-label":"Show tip"}),t.createElement(c,{id:u.id,popupRef:b,className:s.step,placement:T,width:j,offset:w,"data-show":!!N,onDoneClick:D,onSkipAllClick:F,target:f,mutationsListenerElement:S,theme:x,role:"status","aria-hidden":!N},A))}export{m as default};
+import t,{useState as e,useRef as o,useCallback as n,useEffect as i}from"react";import{useOutsideClick as r,useKey as l,useWindowEventListener as a}from"rooks";import p from"clsx";import s from"../TipPointer/TipPointer.js";import m from"../Tip/Tip.js";import c from"./Step.module.css.js";function u(u){var f=u.step,d=u.target,k=u.goNext,C=u.setSkipAll,E=u.onPointerClick,g=u.onClose,h=u.onNextClick,S=u.onSkipAllClick,x=u.mutationsListenerElement,N=f.theme,T=f.placement,j=f.popupOffset,A=f.content,L=e(!1),P=L[0],b=L[1],w=o(null),y=n((function(){b(!0),E&&E(f)}),[f,E,b]),v=n((function(){k(),b(!1),h&&h(f)}),[f,h,k]),D=n((function(){C(),b(!1),S&&S(f)}),[f,S,C]);return r(w,n((function(t){t.target.id!=="pointer-for-".concat(f.id)&&(b(!1),P&&g&&g(f))}),[g,f,P])),l("Escape",n((function(){b(!1),P&&g&&g(f)}),[g,f,P])),i((function(){b(!1)}),[f]),a("blur",n((function(){b(!1),P&&g&&g(f)}),[g,f,P])),t.createElement(t.Fragment,null,t.createElement(s,{onClick:y,step:f,target:d,hidden:P,mutationsListenerElement:x,"aria-expanded":!!P,"aria-controls":f.id,"aria-label":"Show tip"}),t.createElement(m,{id:f.id,popupRef:w,className:p(c.step,f.popupClassName),style:f.popupStyles,placement:T,offset:j,"data-show":!!P,onDoneClick:v,onSkipAllClick:D,target:d,mutationsListenerElement:x,theme:N,role:"status","aria-hidden":!P},A))}export{u as default};

package/lib/es/Tips/Steps.d.ts

@@ -7,8 +7,9 @@ export interface Step {
     content: React.ReactNode;
     placement?: TipProps["placement"];
     theme?: TipProps["theme"];
-    popupWidth?: TipProps["width"];
     popupOffset?: TipProps["offset"];
+    popupStyles?: React.CSSProperties;
+    popupClassName?: string;
     pointerOffset?: [number, number];
     pointerStyles?: React.CSSProperties;
     pointerClassName?: string;

package/lib/es/index.css

@@ -1 +1 @@
-.lds-tip-pointer--pointer{animation:lds-tip-pointer--pulse 2s infinite;border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.69);border-radius:9999px;box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l));height:var(--spacing-base-5);pointer-events:none;position:absolute;visibility:hidden;width:var(--spacing-base-5);z-index:1}.lds-tip-pointer--pointer:hover{background:hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.21);border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.79)}.lds-tip-pointer--pointer[data-popper-reference-hidden]{pointer-events:none;visibility:hidden}.lds-tip-pointer--pointer[data-show=true]{pointer-events:auto;visibility:visible}@keyframes lds-tip-pointer--pulse{0%{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.7)}70%{box-shadow:0 0 0 10px hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}to{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}}.lds-tip{--background-color:var(--color-background-tip-default);--color:var(--color-font-tip-default)}.lds-tip.lds-tip--important{--background-color:var(--color-background-tip-important);--color:var(--color-font-tip-important)}.lds-tip.lds-tip--white{--background-color:var(--color-background-tip-white);--color:var(--color-font-tip-white)}.lds-tip{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);background-color:var(--background-color);border-radius:.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--color);font-size:.75rem;line-height:1rem;padding:var(--spacing-base-md);z-index:14}.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.lds-tip--caret,.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lds-tip--caret{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);height:var(--spacing-base-sm);width:var(--spacing-base-sm)}.lds-tip[data-popper-placement*=bottom]>.lds-tip--caret{top:calc(var(--spacing-base-xs)*-1)}.lds-tip>.lds-tip--caret:after{--tw-rotate:45deg;background-color:var(--background-color);content:" ";display:block;height:var(--spacing-base-2);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:var(--spacing-base-2)}.lds-tip[data-popper-placement*=right] .lds-tip--caret{left:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=left] .lds-tip--caret{right:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=top] .lds-tip--caret{bottom:calc(var(--spacing-base-xs)*-1)}.lds-tip>h1,.lds-tip>h2,.lds-tip>h3,.lds-tip>h4,.lds-tip>h5,.lds-tip>h6{color:var(--color);font-size:var(--typography-heading-size-h2);font-weight:700;line-height:var(--typography-heading-line-height-h2);margin-bottom:var(--spacing-base-lg);margin-top:var(--spacing-base-xs)}.lds-tip>h1:before,.lds-tip>h2:before,.lds-tip>h3:before,.lds-tip>h4:before,.lds-tip>h5:before,.lds-tip>h6:before{margin-bottom:var(--spacing-h2-basekick-cap)}.lds-tip>h1:after,.lds-tip>h2:after,.lds-tip>h3:after,.lds-tip>h4:after,.lds-tip>h5:after,.lds-tip>h6:after{margin-top:var(--spacing-h2-basekick-baseline)}.lds-tip--buttons{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));margin-top:var(--spacing-base-xl)}@media (min-width:640px){.lds-tip--buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}.lds-tip--ok-button,.lds-tip--skip-button{border-radius:.25rem;padding:var(--spacing-base-md)}.lds-tip--ok-button{background:var(--color-background-tip-button-default);color:var(--color-font-tip-button-default);font-weight:500}.lds-tip--important .lds-tip--ok-button{background:var(--color-background-tip-button-important);color:var(--color-font-tip-button-important)}.lds-tip--white .lds-tip--ok-button{background-color:var(--color-background-tip-button-white);color:var(--color-font-tip-button-white)}.lds-tip--skip-button{color:var(--color);grid-column:3}.lds-tip p{margin-bottom:var(--spacing-base-md)}.lds-step{pointer-events:none;visibility:hidden}.lds-step[data-show=true]{pointer-events:auto;visibility:visible}
+.lds-tip-pointer--pointer{animation:lds-tip-pointer--pulse 2s infinite;border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.69);border-radius:9999px;box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l));height:var(--spacing-base-5);pointer-events:none;position:absolute;visibility:hidden;width:var(--spacing-base-5);z-index:1}.lds-tip-pointer--pointer:hover{background:hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.21);border:2px solid hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.79)}.lds-tip-pointer--pointer[data-popper-reference-hidden]{pointer-events:none;visibility:hidden}.lds-tip-pointer--pointer[data-show=true]{pointer-events:auto;visibility:visible}@keyframes lds-tip-pointer--pulse{0%{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/.7)}70%{box-shadow:0 0 0 10px hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}to{box-shadow:0 0 0 0 hsl(var(--hues-tip-pointer-h) var(--hues-tip-pointer-s) var(--hues-tip-pointer-l)/0)}}.lds-tip{--background-color:var(--color-background-tip-default);--color:var(--color-font-tip-default)}.lds-tip.lds-tip--important{--background-color:var(--color-background-tip-important);--color:var(--color-font-tip-important)}.lds-tip.lds-tip--white{--background-color:var(--color-background-tip-white);--color:var(--color-font-tip-white)}.lds-tip{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);background-color:var(--background-color);border-radius:.5rem;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);color:var(--color);font-size:.75rem;line-height:1rem;padding:var(--spacing-base-md);width:var(--spacing-base-80);z-index:14}.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000}.lds-tip--caret,.lds-tip.lds-tip--important,.lds-tip.lds-tip--important .lds-tip--caret{box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.lds-tip--caret{--tw-shadow:var(--shadow-base-xl);--tw-shadow-colored:var(--shadow-base-xl);height:var(--spacing-base-sm);width:var(--spacing-base-sm)}.lds-tip[data-popper-placement*=bottom]>.lds-tip--caret{top:calc(var(--spacing-base-xs)*-1)}.lds-tip>.lds-tip--caret:after{--tw-rotate:45deg;background-color:var(--background-color);content:" ";display:block;height:var(--spacing-base-2);transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));width:var(--spacing-base-2)}.lds-tip[data-popper-placement*=right] .lds-tip--caret{left:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=left] .lds-tip--caret{right:calc(var(--spacing-base-xs)*-1)}.lds-tip[data-popper-placement*=top] .lds-tip--caret{bottom:calc(var(--spacing-base-xs)*-1)}.lds-tip>h1,.lds-tip>h2,.lds-tip>h3,.lds-tip>h4,.lds-tip>h5,.lds-tip>h6{color:var(--color);font-size:var(--typography-heading-size-h2);font-weight:700;line-height:var(--typography-heading-line-height-h2);margin-bottom:var(--spacing-base-lg);margin-top:var(--spacing-base-xs)}.lds-tip>h1:before,.lds-tip>h2:before,.lds-tip>h3:before,.lds-tip>h4:before,.lds-tip>h5:before,.lds-tip>h6:before{margin-bottom:var(--spacing-h2-basekick-cap)}.lds-tip>h1:after,.lds-tip>h2:after,.lds-tip>h3:after,.lds-tip>h4:after,.lds-tip>h5:after,.lds-tip>h6:after{margin-top:var(--spacing-h2-basekick-baseline)}.lds-tip--buttons{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));margin-top:var(--spacing-base-xl)}@media (min-width:640px){.lds-tip--buttons{grid-template-columns:repeat(3,minmax(0,1fr))}}.lds-tip--ok-button,.lds-tip--skip-button{border-radius:.25rem;padding:var(--spacing-base-md)}.lds-tip--ok-button{background:var(--color-background-tip-button-default);color:var(--color-font-tip-button-default);font-weight:500}.lds-tip--important .lds-tip--ok-button{background:var(--color-background-tip-button-important);color:var(--color-font-tip-button-important)}.lds-tip--white .lds-tip--ok-button{background-color:var(--color-background-tip-button-white);color:var(--color-font-tip-button-white)}.lds-tip--skip-button{color:var(--color);grid-column:3}.lds-tip p{margin-bottom:var(--spacing-base-md)}.lds-step{pointer-events:none;visibility:hidden}.lds-step[data-show=true]{pointer-events:auto;visibility:visible}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/lds-tips",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Lens Design System – React Tips component",
   "author": "Mirantis Inc",
   "license": "MIT",
@@ -28,11 +28,11 @@
     "format": "eslint --fix ."
   },
   "dependencies": {
-    "@k8slens/lds": "^0.11.2"
+    "@k8slens/lds": "^0.11.3"
   },
   "devDependencies": {
-    "@k8slens/lds-icons": "^0.9.2",
-    "@k8slens/lds-tokens": "^0.12.2",
+    "@k8slens/lds-icons": "^0.9.3",
+    "@k8slens/lds-tokens": "^0.12.3",
     "@rollup/plugin-node-resolve": "15.0.1",
     "@storybook/react": "6.5.13",
     "@testing-library/react": "13.4.0"
@@ -58,5 +58,5 @@
       "\\.svg": "<rootDir>/../../__mocks__/SVGStub.js"
     }
   },
-  "gitHead": "586e729ead7372b6fd5586adb2734db1c7fe61b1"
+  "gitHead": "70400b3bbe5a35c7a4e568c23324c2d7b9354966"
 }