@k8slens/lds-tips 0.1.4 → 0.1.5

package/lib/cjs/TipPointer/TipPointer.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import React, { HTMLAttributes } from "react";
 import type { Step } from "../Tips/Steps";
 interface TipPointerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick" | "id" | "style" | "ref"> {
     step: Step;
@@ -6,11 +6,15 @@ interface TipPointerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onCli
     target: HTMLElement;
     hidden: boolean;
     mutationsListenerElement: HTMLElement;
+    /**
+     * Optional ref to the pointer.
+     */
+    pointerRef?: React.MutableRefObject<HTMLButtonElement | null>;
 }
 /**
  * TipPointer component
  *
  * Used with `Tips` component to highlight a tip target.
  */
-export default function TipPointer({ step, onClick, target, hidden, mutationsListenerElement, ...props }: TipPointerProps): JSX.Element;
+export default function TipPointer({ step, onClick, target, hidden, mutationsListenerElement, pointerRef, ...props }: TipPointerProps): JSX.Element;
 export {};

package/lib/cjs/TipPointer/TipPointer.js

@@ -1 +1 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),s=require("lodash"),n=require("react-popper"),i=require("rooks"),o=require("./TipPointer.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=u(t),l=u(r),c={subtree:!0,childList:!0,attributes:!1,characterData:!1};module.exports=function(r){var u=r.step,f=r.onClick,p=r.target,d=r.hidden,m=r.mutationsListenerElement,_=e.__rest(r,["step","onClick","target","hidden","mutationsListenerElement"]),h=t.useRef(m),v=u.pointerOffset,b=u.placement,q=u.id,g=u.pointerStyles,k=t.useRef(null),y=t.useMemo((function(){return v?[v[1],v[0]]:[0,0]}),[v]),C=t.useState(!1),E=C[0],j=C[1],L=t.useMemo((function(){return[{name:"offset",options:{offset:y}}]}),[y]),M=n.usePopper(p,k.current,{placement:b,modifiers:L}),N=M.styles,x=M.attributes,O=M.update,P=s.throttle((function(){var e;null===(e=null==O?void 0:O())||void 0===e||e.catch((function(e){console.error(e)}))}),250);return t.useEffect((function(){j(!0)}),[]),i.useMutationObserver(h,P,c),a.default.createElement("button",e.__assign({},_,{ref:k,"data-show":E&&!d,id:"pointer-for-".concat(q),onClick:f,className:l.default(_.className,o.pointer,u.pointerClassName),style:e.__assign(e.__assign({},N.popper),g)},x.popper))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react"),r=require("clsx"),n=require("lodash"),s=require("react-popper"),i=require("rooks"),o=require("./TipPointer.module.css.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=u(t),c=u(r),l={subtree:!0,childList:!0,attributes:!1,characterData:!1};module.exports=function(r){var u=r.step,f=r.onClick,p=r.target,d=r.hidden,m=r.mutationsListenerElement,_=r.pointerRef,v=e.__rest(r,["step","onClick","target","hidden","mutationsListenerElement","pointerRef"]),b=t.useRef(m),h=u.pointerOffset,q=u.placement,g=u.id,k=u.pointerStyles,C=t.useState(),y=C[0],E=C[1],j=t.useCallback((function(e){E(e),void 0!==_&&(_.current=e)}),[_]),L=t.useMemo((function(){return h?[h[1],h[0]]:[0,0]}),[h]),M=t.useState(!1),N=M[0],R=M[1],S=t.useMemo((function(){return[{name:"offset",options:{offset:L}}]}),[L]),x=s.usePopper(p,y,{placement:q,modifiers:S}),O=x.styles,P=x.attributes,w=x.update,D=n.throttle((function(){var e;null===(e=null==w?void 0:w())||void 0===e||e.catch((function(e){console.error(e)}))}),250);return t.useEffect((function(){R(!0)}),[]),i.useMutationObserver(b,D,l),a.default.createElement("button",e.__assign({},v,{ref:j,"data-show":N&&!d,id:"pointer-for-".concat(g),onClick:f,className:c.default(v.className,o.pointer,u.pointerClassName),style:e.__assign(e.__assign({},O.popper),k)},P.popper))};

package/lib/cjs/Tips/Step.js

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

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

@@ -5,8 +5,20 @@ export interface Step {
     selector: string;
     pointer?: string;
     content: React.ReactNode;
-    placement?: TipProps["placement"];
     theme?: TipProps["theme"];
+    /**
+     * If true, the Tip will be placed based on the pointer position.
+     * Otherwise it will be placed based on the target position (default).
+     */
+    targetPointer?: boolean;
+    /**
+     * Popper placement of the TipPointer element
+     */
+    placement?: TipProps["placement"];
+    /**
+     * Popper placement of the Tip element
+     */
+    popupPlacement?: TipProps["placement"];
     popupOffset?: TipProps["offset"];
     popupStyles?: React.CSSProperties;
     popupClassName?: string;

package/lib/es/TipPointer/TipPointer.d.ts

@@ -1,4 +1,4 @@
-import { HTMLAttributes } from "react";
+import React, { HTMLAttributes } from "react";
 import type { Step } from "../Tips/Steps";
 interface TipPointerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onClick" | "id" | "style" | "ref"> {
     step: Step;
@@ -6,11 +6,15 @@ interface TipPointerProps extends Omit<HTMLAttributes<HTMLButtonElement>, "onCli
     target: HTMLElement;
     hidden: boolean;
     mutationsListenerElement: HTMLElement;
+    /**
+     * Optional ref to the pointer.
+     */
+    pointerRef?: React.MutableRefObject<HTMLButtonElement | null>;
 }
 /**
  * TipPointer component
  *
  * Used with `Tips` component to highlight a tip target.
  */
-export default function TipPointer({ step, onClick, target, hidden, mutationsListenerElement, ...props }: TipPointerProps): JSX.Element;
+export default function TipPointer({ step, onClick, target, hidden, mutationsListenerElement, pointerRef, ...props }: TipPointerProps): JSX.Element;
 export {};

package/lib/es/TipPointer/TipPointer.js

@@ -1 +1 @@
-import{__rest as t,__assign as e}from"../_virtual/_tslib.js";import r,{useRef as o,useMemo as n,useState as i,useEffect as s}from"react";import a from"clsx";import{throttle as p}from"lodash";import{usePopper as l}from"react-popper";import{useMutationObserver as c}from"rooks";import m from"./TipPointer.module.css.js";var f={subtree:!0,childList:!0,attributes:!1,characterData:!1};function u(u){var d=u.step,h=u.onClick,v=u.target,b=u.hidden,k=u.mutationsListenerElement,C=t(u,["step","onClick","target","hidden","mutationsListenerElement"]),y=o(k),E=d.pointerOffset,L=d.placement,N=d.id,g=d.pointerStyles,j=o(null),x=n((function(){return E?[E[1],E[0]]:[0,0]}),[E]),_=i(!1),w=_[0],D=_[1],O=n((function(){return[{name:"offset",options:{offset:x}}]}),[x]),P=l(v,j.current,{placement:L,modifiers:O}),S=P.styles,T=P.attributes,q=P.update,z=p((function(){var t;null===(t=null==q?void 0:q())||void 0===t||t.catch((function(t){console.error(t)}))}),250);return s((function(){D(!0)}),[]),c(y,z,f),r.createElement("button",e({},C,{ref:j,"data-show":w&&!b,id:"pointer-for-".concat(N),onClick:h,className:a(C.className,m.pointer,d.pointerClassName),style:e(e({},S.popper),g)},T.popper))}export{u as default};
+import{__rest as t,__assign as e}from"../_virtual/_tslib.js";import o,{useRef as r,useState as n,useCallback as i,useMemo as s,useEffect as a}from"react";import p from"clsx";import{throttle as c}from"lodash";import{usePopper as m}from"react-popper";import{useMutationObserver as f}from"rooks";import l from"./TipPointer.module.css.js";var u={subtree:!0,childList:!0,attributes:!1,characterData:!1};function d(d){var h=d.step,v=d.onClick,b=d.target,k=d.hidden,C=d.mutationsListenerElement,y=d.pointerRef,E=t(d,["step","onClick","target","hidden","mutationsListenerElement","pointerRef"]),L=r(C),N=h.pointerOffset,g=h.placement,j=h.id,x=h.pointerStyles,R=n(),_=R[0],w=R[1],D=i((function(t){w(t),void 0!==y&&(y.current=t)}),[y]),O=s((function(){return N?[N[1],N[0]]:[0,0]}),[N]),P=n(!1),S=P[0],T=P[1],q=s((function(){return[{name:"offset",options:{offset:O}}]}),[O]),z=m(b,_,{placement:g,modifiers:q}),A=z.styles,B=z.attributes,F=z.update,G=c((function(){var t;null===(t=null==F?void 0:F())||void 0===t||t.catch((function(t){console.error(t)}))}),250);return a((function(){T(!0)}),[]),f(L,G,u),o.createElement("button",e({},E,{ref:D,"data-show":S&&!k,id:"pointer-for-".concat(j),onClick:v,className:p(E.className,l.pointer,h.pointerClassName),style:e(e({},A.popper),x)},B.popper))}export{d as default};

package/lib/es/Tips/Step.js

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

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

@@ -5,8 +5,20 @@ export interface Step {
     selector: string;
     pointer?: string;
     content: React.ReactNode;
-    placement?: TipProps["placement"];
     theme?: TipProps["theme"];
+    /**
+     * If true, the Tip will be placed based on the pointer position.
+     * Otherwise it will be placed based on the target position (default).
+     */
+    targetPointer?: boolean;
+    /**
+     * Popper placement of the TipPointer element
+     */
+    placement?: TipProps["placement"];
+    /**
+     * Popper placement of the Tip element
+     */
+    popupPlacement?: TipProps["placement"];
     popupOffset?: TipProps["offset"];
     popupStyles?: React.CSSProperties;
     popupClassName?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k8slens/lds-tips",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Lens Design System – React Tips component",
   "author": "Mirantis Inc",
   "license": "MIT",
@@ -28,11 +28,11 @@
     "format": "eslint --fix ."
   },
   "dependencies": {
-    "@k8slens/lds": "^0.11.3"
+    "@k8slens/lds": "^0.11.4"
   },
   "devDependencies": {
-    "@k8slens/lds-icons": "^0.9.3",
-    "@k8slens/lds-tokens": "^0.12.3",
+    "@k8slens/lds-icons": "^0.9.4",
+    "@k8slens/lds-tokens": "^0.12.4",
     "@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": "70400b3bbe5a35c7a4e568c23324c2d7b9354966"
+  "gitHead": "bc565a20b240e8b15901d783ef980965b0611d5e"
 }