@equinor/amplify-component-lib 9.14.0-beta.3 → 9.14.1-beta.0

package/dist/providers/TutorialHighlightingProvider/TutorialHighlightingProvider.d.ts

@@ -1,10 +1,11 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, RefObject } from 'react';
 interface TutorialHighlightingContextType {
     customStepContent: Record<string, ReactElement>;
 }
 export declare function useTutorialHighlighting(): TutorialHighlightingContextType;
 interface TutorialHighlightingProviderProps {
     children: ReactElement | ReactElement[];
+    contentRef: RefObject<HTMLElement | null>;
     customStepContent?: Record<string, ReactElement>;
 }
 export declare const TutorialHighlightingProvider: FC<TutorialHighlightingProviderProps>;

package/dist/providers/TutorialHighlightingProvider/TutorialHighlightingProvider.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{createContext as t,useContext as i}from"react";import{TutorialProvider as o}from"@equinor/subsurface-app-management";import{TutorialHighlightingProviderInner as e}from"./TutorialHighlightingProviderInner.js";const n=t(void 0);function u(){const r=i(n);if(!r)throw new Error("useTutorialHighlighting must be used within a TutorialHighlightingProvider");return r}const m=({children:t,customStepContent:i})=>r(n.Provider,{value:{customStepContent:i??{}},children:r(o,{children:r(e,{children:t})})});export{m as TutorialHighlightingProvider,u as useTutorialHighlighting};
+import{jsx as t}from"react/jsx-runtime";import{createContext as r,useContext as e}from"react";import{TutorialProvider as i}from"@equinor/subsurface-app-management";import{TutorialHighlightingProviderInner as n}from"./TutorialHighlightingProviderInner.js";const o=r(void 0);function c(){const t=e(o);if(!t)throw new Error("useTutorialHighlighting must be used within a TutorialHighlightingProvider");return t}const u=({children:r,contentRef:e,customStepContent:c})=>t(o.Provider,{value:{customStepContent:c??{}},children:t(i,{children:t(n,{contentRef:e,children:r})})});export{u as TutorialHighlightingProvider,c as useTutorialHighlighting};

package/dist/providers/TutorialHighlightingProvider/TutorialHighlightingProviderInner.d.ts

@@ -1,6 +1,7 @@
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, RefObject } from 'react';
 interface TutorialHighlightingProviderInnerProps {
     children: ReactElement | ReactElement[];
+    contentRef: RefObject<HTMLElement | null>;
 }
 export declare const TutorialHighlightingProviderInner: FC<TutorialHighlightingProviderInnerProps>;
 export {};

package/dist/providers/TutorialHighlightingProvider/TutorialHighlightingProviderInner.js

@@ -1,4 +1,4 @@
-import{jsxs as t,Fragment as i,jsx as e}from"react/jsx-runtime";import{useState as r,useEffect as n}from"react";import{useTutorials as o}from"@equinor/subsurface-app-management";import{useIsFetching as s}from"@tanstack/react-query";import{useReversedScrollY as h}from"./hooks/useReversedScrollY.js";import{TutorialPopover as l}from"./TutorialPopover/TutorialPopover.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as a}from"./TutorialHighlightingProvider.constants.js";import"../../atoms/style/colors.js";import{spacings as d}from"../../atoms/style/spacings.js";import{getHighlightElementBoundingBox as m}from"../../atoms/utils/tutorials.js";import{motion as c}from"framer-motion";import p from"styled-components";const g=p.svg`
+import{jsxs as t,Fragment as i,jsx as e}from"react/jsx-runtime";import{useState as n,useEffect as r}from"react";import{useTutorials as o}from"@equinor/subsurface-app-management";import{useIsFetching as s}from"@tanstack/react-query";import{useReversedScrollY as h}from"./hooks/useReversedScrollY.js";import{TutorialPopover as l}from"./TutorialPopover/TutorialPopover.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as a}from"./TutorialHighlightingProvider.constants.js";import"../../atoms/style/colors.js";import{spacings as d}from"../../atoms/style/spacings.js";import{getHighlightElementBoundingBox as m}from"../../atoms/utils/tutorials.js";import{motion as c}from"framer-motion";import p from"styled-components";const g=p.svg`
   position: fixed;
   top: 0;
   left: 0;
@@ -21,4 +21,4 @@ import{jsxs as t,Fragment as i,jsx as e}from"react/jsx-runtime";import{useState
   height: 100vh;
   background: none;
   pointer-events: none;
-`,u=({children:d})=>{const{activeTutorial:p,activeStep:u,unseenTutorialsOnThisPage:w}=o(),v=s()>0,$=h(),[y,j]=r({width:window.innerWidth,height:window.innerHeight});n(()=>{const t=()=>{j({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const[k,x]=r([]);n(()=>{if(v)return;(async()=>{if(p&&void 0!==u){if(!p.steps[u].highlightElement)return x([]);const t=await m(p.id,u,y);return x(t?[t]:[])}const t=await Promise.all(w.map(t=>{if(t.steps.at(0)?.highlightElement)return m(t.id,0,y)}));x(t.filter(t=>void 0!==t))})()},[u,p,v,w,y]);const E=p?[p]:w.filter(t=>t.steps[0].highlightElement&&k.some(t=>t.id)||!t.steps[0].highlightElement);return E.length>0?t(i,{children:[d,e(f,{children:E.map(t=>{const i=k.find(i=>i.id===t.id);return e(l,{isHighlighting:k.length>0,...t,...i},t.id)})}),t(g,{children:[t("mask",{id:"tutorials-rectangles",children:[e("rect",{width:"100%",height:"100%",fill:"white"}),e(c.g,{style:{translateY:$},children:k.map(t=>e(c.path,{"data-testid":`tutorial-mask-${t.id}`,initial:{opacity:0,d:`M ${t.left} ${t.top} h ${t.width} v ${t.height} h -${t.width} Z`},animate:{opacity:1,d:`M ${t.left} ${t.top} h ${t.width} v ${t.height} h -${t.width} Z`},fill:"black"},t.id))})]}),e(c.rect,{width:"100%",height:"100%",fill:"rgba(111, 111, 111, 0.35)",mask:"url(#tutorials-rectangles)",...a})]})]}):e(i,{children:d})};export{u as TutorialHighlightingProviderInner};
+`,u=({children:d,contentRef:p})=>{const{activeTutorial:u,activeStep:w,unseenTutorialsOnThisPage:v}=o(),$=s()>0,y=h(p),[j,k]=n({width:window.innerWidth,height:window.innerHeight});r(()=>{const t=()=>{k({width:window.innerWidth,height:window.innerHeight})};return window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[]);const[x,E]=n([]);r(()=>{if($)return;(async()=>{if(u&&void 0!==w){if(!u.steps[w].highlightElement)return E([]);const t=await m(u.id,w,j);return E(t?[t]:[])}const t=await Promise.all(v.map(t=>{if(t.steps.at(0)?.highlightElement)return m(t.id,0,j)}));E(t.filter(t=>void 0!==t))})()},[w,u,$,v,j]);const T=u?[u]:v.filter(t=>t.steps[0].highlightElement&&x.some(t=>t.id)||!t.steps[0].highlightElement);return T.length>0?t(i,{children:[d,e(f,{children:T.map(t=>{const i=x.find(i=>i.id===t.id);return e(l,{isHighlighting:x.length>0,contentRef:p,...t,...i},t.id)})}),t(g,{children:[t("mask",{id:"tutorials-rectangles",children:[e("rect",{width:"100%",height:"100%",fill:"white"}),e(c.g,{style:{translateY:y},children:x.map(t=>e(c.path,{"data-testid":`tutorial-mask-${t.id}`,initial:{opacity:0,d:`M ${t.left} ${t.top} h ${t.width} v ${t.height} h -${t.width} Z`},animate:{opacity:1,d:`M ${t.left} ${t.top} h ${t.width} v ${t.height} h -${t.width} Z`},fill:"black"},t.id))})]}),e(c.rect,{width:"100%",height:"100%",fill:"rgba(111, 111, 111, 0.35)",mask:"url(#tutorials-rectangles)",...a})]})]}):e(i,{children:d})};export{u as TutorialHighlightingProviderInner};

package/dist/providers/TutorialHighlightingProvider/TutorialPopover/TutorialPopover.d.ts

@@ -1,6 +1,7 @@
-import { FC } from 'react';
+import { FC, RefObject } from 'react';
 import { MyTutorialDto } from '@equinor/subsurface-app-management';
 interface TutorialPopoverProps extends MyTutorialDto {
+    contentRef: RefObject<HTMLElement | null>;
     isHighlighting: boolean;
     top?: number;
     left?: number;

package/dist/providers/TutorialHighlightingProvider/TutorialPopover/TutorialPopover.js

@@ -1,4 +1,4 @@
-import{jsxs as t,jsx as r,Fragment as i}from"react/jsx-runtime";import{useState as e}from"react";import{Card as o,Icon as a,Typography as n,Button as s}from"@equinor/eds-core-react";import{info_circle as l}from"@equinor/eds-icons";import{useTutorials as d,useTutorialStepImage as m}from"@equinor/subsurface-app-management";import{useTutorialHighlighting as c}from"../TutorialHighlightingProvider.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as h}from"../TutorialHighlightingProvider.constants.js";import{useTutorialPopoverPosition as g}from"./hooks/useTutorialPopoverPosition.js";import{StepIndicator as p}from"./StepIndicator.js";import{elevation as u}from"../../../atoms/style/index.js";import{motion as f}from"framer-motion";import v,{css as b}from"styled-components";import{spacings as x}from"../../../atoms/style/spacings.js";import{colors as $}from"../../../atoms/style/colors.js";const y=v(f(o))`
+import{jsxs as t,jsx as r,Fragment as e}from"react/jsx-runtime";import{useState as i}from"react";import{Card as o,Icon as n,Typography as a,Button as s}from"@equinor/eds-core-react";import{info_circle as l}from"@equinor/eds-icons";import{useTutorials as c,useTutorialStepImage as d}from"@equinor/subsurface-app-management";import{useTutorialHighlighting as m}from"../TutorialHighlightingProvider.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as h}from"../TutorialHighlightingProvider.constants.js";import{useTutorialPopoverPosition as g}from"./hooks/useTutorialPopoverPosition.js";import{StepIndicator as p}from"./StepIndicator.js";import{elevation as u}from"../../../atoms/style/index.js";import{motion as f}from"framer-motion";import v,{css as b}from"styled-components";import{spacings as x}from"../../../atoms/style/spacings.js";import{colors as $}from"../../../atoms/style/colors.js";const y=v(f(o))`
   width: 360px;
   padding: ${x.medium};
   background: ${$.ui.background__tutorial_card.rgba};
@@ -72,4 +72,4 @@ import{jsxs as t,jsx as r,Fragment as i}from"react/jsx-runtime";import{useState
       margin-right: auto;
     }
   }
-`,_=({isHighlighting:o,id:u,top:f,left:v,width:b,height:x,name:_,steps:j})=>{const{customStepContent:w}=c(),{activeTutorial:P,activeStep:T,skipTutorial:C,startTutorial:S,goToNextStep:E,goToPreviousStep:H}=d(),{data:q}=m(P?.steps.at(T)?.imgUrl??void 0),[I,z]=e(void 0),{style:D,highlightingElement:N,caretPosition:A}=g({top:f,left:v,width:b,height:x,popoverSize:I}),B=t=>{z(t?{width:t.clientWidth,height:t.clientHeight}:void 0)},F=()=>{C(u)},U=()=>{S(u)};if(void 0!==T&&j[T].custom&&!w[j[T].id])throw new Error(`[TutorialHighlightingProvider]: Custom step content not found, tutorial ID: ${u}, step ID: ${j[T].id}`);return!N&&o?null:t(y,P&&void 0!==T?{ref:B,style:{...D,width:j[T].custom?"auto":void 0},$caretPosition:A,$highlightingElement:N,...h,children:[j[T].custom?w[j[T].id]:t(i,{children:[t("header",{children:[r(a,{data:l,color:$.interactive.primary__resting.rgba}),r(n,{variant:"h6",children:j[T]?.title})]}),r(n,{variant:"body_short",children:j[T]?.body}),q?r("img",{src:q,alt:j[T].title}):null]}),t(k,{children:[r(s,{variant:"outlined",disabled:0===T,onClick:H,children:"Back"}),r(s,{variant:"ghost",onClick:F,children:"Cancel"}),r(s,{onClick:E,children:T===j.length-1?"Finish":"Next"})]}),r(p,{stepAmount:j.length})]}:{ref:B,style:{...D},$highlightingElement:N,$caretPosition:A,...h,children:[t("header",{children:[r(a,{data:l,color:$.interactive.primary__resting.rgba}),r(n,{variant:"h6",children:_})]}),t(k,{children:[r(s,{variant:"ghost",onClick:F,children:"Skip"}),r(s,{onClick:U,children:"Start tour"})]})]})};export{_ as TutorialPopover};
+`,_=({contentRef:o,isHighlighting:u,id:f,top:v,left:b,width:x,height:_,name:j,steps:w})=>{const{customStepContent:P}=m(),{activeTutorial:T,activeStep:C,skipTutorial:S,startTutorial:E,goToNextStep:H,goToPreviousStep:q}=c(),{data:I}=d(T?.steps.at(C)?.imgUrl??void 0),[z,D]=i(void 0),{style:N,highlightingElement:R,caretPosition:A}=g({contentRef:o,top:v,left:b,width:x,height:_,popoverSize:z}),B=t=>{D(t?{width:t.clientWidth,height:t.clientHeight}:void 0)},F=()=>{S(f)},U=()=>{E(f)};if(void 0!==C&&w[C].custom&&!P[w[C].id])throw new Error(`[TutorialHighlightingProvider]: Custom step content not found, tutorial ID: ${f}, step ID: ${w[C].id}`);return!R&&u?null:t(y,T&&void 0!==C?{ref:B,style:{...N,width:w[C].custom?"auto":void 0},$caretPosition:A,$highlightingElement:R,...h,children:[w[C].custom?P[w[C].id]:t(e,{children:[t("header",{children:[r(n,{data:l,color:$.interactive.primary__resting.rgba}),r(a,{variant:"h6",children:w[C]?.title})]}),r(a,{variant:"body_short",children:w[C]?.body}),I?r("img",{src:I,alt:w[C].title}):null]}),t(k,{children:[r(s,{variant:"outlined",disabled:0===C,onClick:q,children:"Back"}),r(s,{variant:"ghost",onClick:F,children:"Cancel"}),r(s,{onClick:H,children:C===w.length-1?"Finish":"Next"})]}),r(p,{stepAmount:w.length})]}:{ref:B,style:{...N},$highlightingElement:R,$caretPosition:A,...h,children:[t("header",{children:[r(n,{data:l,color:$.interactive.primary__resting.rgba}),r(a,{variant:"h6",children:j})]}),t(k,{children:[r(s,{variant:"ghost",onClick:F,children:"Skip"}),r(s,{onClick:U,children:"Start tour"})]})]})};export{_ as TutorialPopover};

package/dist/providers/TutorialHighlightingProvider/TutorialPopover/hooks/useTutorialPopoverPosition.d.ts

@@ -1,6 +1,8 @@
+import { RefObject } from 'react';
 import { MotionStyle } from 'framer-motion';
 export declare const CARET_OFFSET = 16;
 interface UseTutorialPopoverPositionArgs {
+    contentRef: RefObject<HTMLElement | null>;
     top?: number;
     left?: number;
     width?: number;
@@ -17,5 +19,5 @@ export interface UseTutorialPopoverPositionReturn {
     highlightingElement: boolean;
     caretPosition: VerticalPosition | HorizontalPosition | `${VerticalPosition}-${HorizontalPosition}`;
 }
-export declare function useTutorialPopoverPosition({ top, left, width, height, popoverSize, }: UseTutorialPopoverPositionArgs): UseTutorialPopoverPositionReturn;
+export declare function useTutorialPopoverPosition({ top, left, width, height, popoverSize, contentRef, }: UseTutorialPopoverPositionArgs): UseTutorialPopoverPositionReturn;
 export {};

package/dist/providers/TutorialHighlightingProvider/TutorialPopover/hooks/useTutorialPopoverPosition.js

@@ -1 +1 @@
-import{useReversedScrollY as i}from"../../hooks/useReversedScrollY.js";import{useTransform as o}from"framer-motion";const t=16;function d({top:d,left:e,width:h,height:n,popoverSize:v}){const r=i();let w=d&&n?d+n+t:void 0,l=e&&h?e+h/2:void 0;const s=!!w&&!!l;let g="top";const p=(v?.width??0)/2+t,c=window.innerWidth-t,f=window.innerHeight-t,m=void 0!==d&&void 0!==n&&void 0!==e&&void 0!==h&&void 0!==l&&void 0!==v&&l<v.width/2,u=void 0!==d&&void 0!==n&&void 0!==e&&void 0!==h&&void 0!==l&&void 0!==v&&l+v.width>window.innerWidth;m?(l=e+h+v.width/2+t,w=d-v.height/2-4,g="left"):u&&(l=e-v.width/2-t,w=d-v.height/2-4,g="right");const b=void 0!==d&&void 0!==n&&void 0!==w&&void 0!==v&&d+n/2+v.height>=window.innerHeight,a=void 0!==d&&void 0!==n&&void 0!==w&&void 0!==v&&w<v.height;a?w=d+n+t:b&&(w=d-v.height-n-32),m&&(a||b)?l=e+v?.width/2:u&&(a||b)&&(l=e+h-v?.width/2),a&&m?g="top-left":a&&u&&(g="top-right"),b&&m?g="bottom-left":b&&u?g="bottom-right":b&&(g="bottom");const H=o(r,i=>{if(!s||!w)return null;const o=i+w;return o<32?32:o>f?f:o});return l&&l<p?l=p:l&&l>c&&(l=c),{style:{position:s?"absolute":void 0,top:H,left:l},highlightingElement:s,caretPosition:g}}export{t as CARET_OFFSET,d as useTutorialPopoverPosition};
+import{useReversedScrollY as i}from"../../hooks/useReversedScrollY.js";import{useTransform as o}from"framer-motion";const t=16;function d({top:d,left:e,width:n,height:h,popoverSize:v,contentRef:r}){const w=i(r);let l=d&&h?d+h+t:void 0,s=e&&n?e+n/2:void 0;const g=!!l&&!!s;let c="top";const f=(v?.width??0)/2+t,p=window.innerWidth-t,m=window.innerHeight-t,u=void 0!==d&&void 0!==h&&void 0!==e&&void 0!==n&&void 0!==s&&void 0!==v&&s<v.width/2,b=void 0!==d&&void 0!==h&&void 0!==e&&void 0!==n&&void 0!==s&&void 0!==v&&s+v.width>window.innerWidth;u?(s=e+n+v.width/2+t,l=d-v.height/2-4,c="left"):b&&(s=e-v.width/2-t,l=d-v.height/2-4,c="right");const a=void 0!==d&&void 0!==h&&void 0!==l&&void 0!==v&&d+h/2+v.height>=window.innerHeight,H=void 0!==d&&void 0!==h&&void 0!==l&&void 0!==v&&l<v.height;H?l=d+h+t:a&&(l=d-v.height-h-32),u&&(H||a)?s=e+v?.width/2:b&&(H||a)&&(s=e+n-v?.width/2),H&&u?c="top-left":H&&b&&(c="top-right"),a&&u?c="bottom-left":a&&b?c="bottom-right":a&&(c="bottom");const R=o(w,i=>{if(!g||!l)return null;const o=i+l;return o<32?32:o>m?m:o});return s&&s<f?s=f:s&&s>p&&(s=p),{style:{position:g?"absolute":void 0,top:R,left:s},highlightingElement:g,caretPosition:c}}export{t as CARET_OFFSET,d as useTutorialPopoverPosition};

package/dist/providers/TutorialHighlightingProvider/hooks/useReversedScrollY.d.ts

@@ -1 +1,2 @@
-export declare function useReversedScrollY(): import("motion-dom").MotionValue<number>;
+import { RefObject } from 'react';
+export declare function useReversedScrollY(contentRef: RefObject<HTMLElement | null>): import("motion-dom").MotionValue<number>;

package/dist/providers/TutorialHighlightingProvider/hooks/useReversedScrollY.js

@@ -1 +1 @@
-import{useScroll as t,useTransform as n}from"framer-motion";function o(){const{scrollY:o}=t({container:{current:document.getElementById("content")}});return n(o,t=>t>0?-1*t:0)}export{o as useReversedScrollY};
+import{useScroll as o,useTransform as r}from"framer-motion";function n(n){const{scrollY:t}=o({container:n});return r(t,o=>o>0?-1*o:0)}export{n as useReversedScrollY};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "9.14.0-beta.3",
+  "version": "9.14.1-beta.0",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",