@equinor/amplify-component-lib 9.15.3 → 9.16.0-beta.0

package/dist/providers/SnackbarProvider/SnackbarProvider.styles.js

@@ -1,41 +0,0 @@
-import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{Snackbar as n}from"@equinor/eds-core-react";import r,{css as i}from"styled-components";const a={info:{outline:e.text.static_icons__default.rgba,text:e.text.static_icons__primary_white.rgba,icon:e.text.static_icons__primary_white.rgba},warning:{outline:e.interactive.warning__highlight.rgba,text:e.ui.background__warning.rgba,icon:e.interactive.warning__resting.rgba},error:{outline:e.interactive.danger__highlight.rgba,text:e.ui.background__danger.rgba,icon:e.interactive.danger__resting.rgba}},o=r(n)`
-  display: grid;
-  align-items: center;
-  grid-template-columns: auto 1fr auto;
-  gap: ${t.small};
-  max-width: 512px;
-  min-width: calc(300px - ${t.medium} * 2);
-  background: ${e.text.static_icons__default.rgba};
-  padding: ${t.small} ${t.small} ${t.small}
-    ${t.medium};
-  min-height: unset;
-  &:has(div > button) {
-    grid-template-columns: auto 1fr auto auto;
-  }
-  > div > button:hover,
-  > button:hover {
-    color: ${e.text.static_icons__default.rgba};
-    background: ${e.ui.background__light.rgba};
-    svg {
-      fill: ${e.text.static_icons__default.rgba};
-    }
-  }
-  > button {
-    height: 36px;
-    width: 36px;
-  }
-  ${({$variant:e})=>{if(!e)return``;let{outline:t,text:n,icon:r}=a[e];return i`
-      outline: 1px solid ${t};
-
-      p,
-      button {
-        color: ${n};
-      }
-      svg {
-        fill: ${n};
-      }
-      > svg:first-child {
-        fill: ${r};
-      }
-    `}}
-`;export{o as StyledSnackbar};

package/dist/providers/SnackbarProvider/SnackbarProvider.utils.js

@@ -1 +0,0 @@
-import{error_outlined as e,info_circle as t,warning_outlined as n}from"@equinor/eds-icons";function r(r){switch(r){case`info`:return t;case`warning`:return n;case`error`:return e}}export{r as snackbarIcon};

package/dist/providers/TableOfContentsProvider.utils.js

@@ -1 +0,0 @@
-function e(t,n){if(n.children){let r=[...t,n.value];for(let t of n.children)r.push(...e([],t));return r}return[...t,n.value]}export{e as getValues};

package/dist/providers/TutorialHighlightingProvider/TutorialHighlightingProvider.constants.js

@@ -1 +0,0 @@
-const e={initial:{opacity:0},animate:{opacity:1},transition:{delay:.5,duration:.5}};export{e as TUTORIAL_HIGHLIGHT_ANIMATION_PROPS};

package/dist/providers/TutorialHighlightingProvider/TutorialHighlightingProvider.js

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

package/dist/providers/TutorialHighlightingProvider/TutorialHighlightingProviderInner.js

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

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

@@ -1,20 +0,0 @@
-import{animation as e}from"../../../atoms/style/animation.js";import{colors as t}from"../../../atoms/style/colors.js";import{spacings as n}from"../../../atoms/style/spacings.js";import{shape as r}from"../../../atoms/style/index.js";import i from"styled-components";import{jsx as a}from"react/jsx-runtime";import{useTutorials as o}from"@equinor/subsurface-app-management";const s=i.div`
-  display: grid;
-  gap: ${n.x_small};
-`,c=i.span`
-  overflow: hidden;
-  height: 4px;
-  width: 100%;
-  background: ${t.interactive.tutorial__inactive_step.rgba};
-  border-radius: ${r.rounded.borderRadius};
-  position: relative;
-  &:after {
-    content: '';
-    position: absolute;
-    background: ${t.interactive.tutorial__active_step.rgba};
-    width: 100%;
-    height: 100%;
-    transition: left ${e.transitionMS};
-    left: calc(${({$index:e,$activeIndex:t})=>(t-e)*100}%);
-  }
-`,l=({stepAmount:e})=>{let{activeStep:t}=o();return a(s,{style:{gridTemplateColumns:`repeat(${e}, 1fr)`},children:Array.from({length:e}).map((e,n)=>a(c,{$index:n,$activeIndex:t},n))})};export{l as StepIndicator};

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

@@ -1,75 +0,0 @@
-import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}from"../../../atoms/style/spacings.js";import{elevation as n}from"../../../atoms/style/index.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as r}from"../TutorialHighlightingProvider.constants.js";import{useTutorialPopoverPosition as i}from"./hooks/useTutorialPopoverPosition.js";import{StepIndicator as a}from"./StepIndicator.js";import{useTutorialHighlighting as o}from"../TutorialHighlightingProvider.js";import{useState as s}from"react";import{Button as c,Card as l,Icon as u,Typography as d}from"@equinor/eds-core-react";import f,{css as p}from"styled-components";import{Fragment as m,jsx as h,jsxs as g}from"react/jsx-runtime";import{info_circle as _}from"@equinor/eds-icons";import{motion as v}from"framer-motion";import{useTutorialStepImage as y,useTutorials as b}from"@equinor/subsurface-app-management";function x(e){switch(e){case`top`:return p`
-        left: 50%;
-        top: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`top-right`:return p`
-        right: 0;
-        top: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`right`:return p`
-        right: 0;
-        top: 50%;
-        transform: translate(0, -50%) rotate(45deg);
-      `;case`bottom-right`:return p`
-        right: 0;
-        bottom: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`bottom`:return p`
-        left: 50%;
-        bottom: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`bottom-left`:return p`
-        left: 24px;
-        bottom: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `;case`left`:return p`
-        left: 0;
-        top: 50%;
-        transform: translate(0, -50%) rotate(45deg);
-      `;case`top-left`:return p`
-        left: 24px;
-        top: 0;
-        transform: translate(-50%, 0) rotate(45deg);
-      `}}const S=f(v(l))`
-  width: 360px;
-  padding: ${t.medium};
-  background: ${e.ui.background__tutorial_card.rgba};
-  display: flex;
-  flex-direction: column;
-  gap: ${t.medium};
-  transition:
-    top 400ms,
-    left 400ms;
-  box-shadow: ${n.above_scrim};
-  pointer-events: auto;
-  > header {
-    display: flex;
-    gap: ${t.small};
-    align-items: center;
-  }
-  > img {
-    max-height: 170px;
-    object-fit: contain;
-  }
-  ${({$highlightingElement:t,$caretPosition:n})=>t&&p`
-      transform: translateX(-50%);
-      &:before {
-        z-index: -1;
-        content: '';
-        width: 32px;
-        height: 32px;
-        background: ${e.ui.background__tutorial_card.rgba};
-        position: absolute;
-        ${x(n)}
-      }
-    `}
-`,C=f.div`
-  display: flex;
-  justify-content: flex-end;
-  gap: ${t.small};
-  &:has(> :last-child:nth-child(3)) {
-    > button:first-child {
-      margin-right: auto;
-    }
-  }
-`,w=({contentRef:t,isHighlighting:n,id:l,top:f,left:p,width:v,height:x,name:w,steps:T})=>{let{customStepContent:E}=o(),{activeTutorial:D,activeStep:O,skipTutorial:k,startTutorial:A,goToNextStep:j,goToPreviousStep:M}=b(),{data:N}=y(D?.steps.at(O)?.imgUrl??void 0),[P,F]=s(void 0),{style:I,highlightingElement:L,caretPosition:R}=i({contentRef:t,top:f,left:p,width:v,height:x,popoverSize:P}),z=e=>{if(!e){F(void 0);return}F({width:e.clientWidth,height:e.clientHeight})},B=()=>{k(l)},V=()=>{A(l)};if(O!==void 0&&T[O].custom&&!E[T[O].id])throw Error(`[TutorialHighlightingProvider]: Custom step content not found, tutorial ID: ${l}, step ID: ${T[O].id}`);return!L&&n?null:!D||O===void 0?g(S,{ref:z,style:{...I},$highlightingElement:L,$caretPosition:R,...r,children:[g(`header`,{children:[h(u,{data:_,color:e.interactive.primary__resting.rgba}),h(d,{variant:`h6`,children:w})]}),g(C,{children:[h(c,{variant:`ghost`,onClick:B,children:`Skip`}),h(c,{onClick:V,children:`Start tour`})]})]}):g(S,{ref:z,style:{...I,width:T[O].custom?`auto`:void 0},$caretPosition:R,$highlightingElement:L,...r,children:[T[O].custom?E[T[O].id]:g(m,{children:[g(`header`,{children:[h(u,{data:_,color:e.interactive.primary__resting.rgba}),h(d,{variant:`h6`,children:T[O]?.title})]}),h(d,{variant:`body_short`,children:T[O]?.body}),N?h(`img`,{src:N,alt:T[O].title}):null]}),g(C,{children:[h(c,{variant:`outlined`,disabled:O===0,onClick:M,children:`Back`}),h(c,{variant:`ghost`,onClick:B,children:`Cancel`}),h(c,{onClick:j,children:O===T.length-1?`Finish`:`Next`})]}),h(a,{stepAmount:T.length})]})};export{w as TutorialPopover};

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

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

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

@@ -1 +0,0 @@
-import{useScroll as e,useTransform as t}from"framer-motion";function n(n){let{scrollY:r}=e({container:n});return t(r,e=>e>0?e*-1:0)}export{n as useReversedScrollY};