@equinor/amplify-component-lib 9.12.0 → 9.13.0-beta.0

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

@@ -1,14 +1,14 @@
-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 m,useTutorialStepImage as h}from"@equinor/subsurface-app-management";import{useTutorialHighlighting as d}from"../TutorialHighlightingProvider.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as c}from"../TutorialHighlightingProvider.constants.js";import{useTutorialPopoverPosition as g}from"./hooks/useTutorialPopoverPosition.js";import{StepIndicator as p}from"./StepIndicator.js";import{elevation as f}from"../../../atoms/style/index.js";import{motion as u}from"framer-motion";import v,{css as b}from"styled-components";import{spacings as x}from"../../../atoms/style/spacings.js";import{colors as y}from"../../../atoms/style/colors.js";const $=v(u(o))`
+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 h}from"@equinor/subsurface-app-management";import{useTutorialHighlighting as m}from"../TutorialHighlightingProvider.js";import{TUTORIAL_HIGHLIGHT_ANIMATION_PROPS as c}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: ${y.infographic.primary__moss_green_13.rgba};
+  background: ${$.ui.background__tutorial_card.rgba};
   display: flex;
   flex-direction: column;
   gap: ${x.medium};
   transition:
     top 400ms,
     left 400ms;
-  box-shadow: ${f.raised};
+  box-shadow: ${u.raised};
   pointer-events: auto;
   > header {
     display: flex;
@@ -26,7 +26,7 @@ import{jsxs as t,jsx as r,Fragment as e}from"react/jsx-runtime";import{useState
         content: '';
         width: 32px;
         height: 32px;
-        background: ${y.infographic.primary__moss_green_13.rgba};
+        background: ${$.ui.background__tutorial_card.rgba};
         position: absolute;
         ${function(t){switch(t){case"top":return b`
         left: 50%;
@@ -63,7 +63,7 @@ import{jsxs as t,jsx as r,Fragment as e}from"react/jsx-runtime";import{useState
       `}}(r)}
       }
     `}
-`,_=v.div`
+`,k=v.div`
   display: flex;
   justify-content: flex-end;
   gap: ${x.small};
@@ -72,4 +72,4 @@ import{jsxs as t,jsx as r,Fragment as e}from"react/jsx-runtime";import{useState
       margin-right: auto;
     }
   }
-`,k=({isHighlighting:o,id:f,top:u,left:v,width:b,height:x,name:k,steps:j})=>{const{customStepContent:w}=d(),{activeTutorial:P,activeStep:T,skipTutorial:C,startTutorial:S,goToNextStep:E,goToPreviousStep:H}=m(),{data:q}=h(P?.steps.at(T)?.imgUrl??void 0),[I,z]=i(void 0),{style:D,highlightingElement:N,caretPosition:A}=g({top:u,left:v,width:b,height:x,popoverSize:I}),B=t=>{z(t?{width:t.clientWidth,height:t.clientHeight}:void 0)},F=()=>{C(f)},U=()=>{S(f)};if(void 0!==T&&j[T].custom&&!w[j[T].id])throw new Error(`[TutorialHighlightingProvider]: Custom step content not found, tutorial ID: ${f}, step ID: ${j[T].id}`);return!N&&o?null:t($,P&&void 0!==T?{ref:B,style:{...D,width:j[T].custom?"auto":void 0},$caretPosition:A,$highlightingElement:N,...c,children:[j[T].custom?w[j[T].id]:t(e,{children:[t("header",{children:[r(n,{data:l,color:y.interactive.primary__resting.rgba}),r(a,{variant:"h6",children:j[T]?.title})]}),r(a,{variant:"body_short",children:j[T]?.body}),q?r("img",{src:q,alt:j[T].title}):null]}),t(_,{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,...c,children:[t("header",{children:[r(n,{data:l,color:y.interactive.primary__resting.rgba}),r(a,{variant:"h6",children:k})]}),t(_,{children:[r(s,{variant:"ghost",onClick:F,children:"Skip"}),r(s,{onClick:U,children:"Start tour"})]})]})};export{k as TutorialPopover};
+`,_=({isHighlighting:o,id:u,top:f,left:v,width:b,height:x,name:_,steps:j})=>{const{customStepContent:w}=m(),{activeTutorial:P,activeStep:T,skipTutorial:C,startTutorial:S,goToNextStep:E,goToPreviousStep:H}=d(),{data:q}=h(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,...c,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,...c,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};

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: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};

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 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};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "9.12.0",
+  "version": "9.13.0-beta.0",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -93,7 +93,7 @@
   },
   "devDependencies": {
     "@equinor/eds-icons": "^0.22.0",
-    "@equinor/subsurface-app-management": "^4.3.1",
+    "@equinor/subsurface-app-management": "4.4.2-beta.0",
     "@eslint/js": "^9.22.0",
     "@faker-js/faker": "^9.6.0",
     "@rollup/plugin-commonjs": "^28.0.3",
@@ -124,7 +124,6 @@
     "@types/random-seed": "^0.3.5",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
-    "@types/react-router-dom": "^5.3.3",
     "@types/styled-components": "^5.1.34",
     "@types/uuid": "^10.0.0",
     "@types/wicg-file-system-access": "^2023.10.5",
@@ -145,8 +144,6 @@
     "prettier": "^3.5.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-router": "^6.28.0",
-    "react-router-dom": "^6.28.0",
     "resize-observer-polyfill": "^1.5.1",
     "resolve-tspaths": "^0.8.23",
     "rollup": "^4.35.0",
@@ -168,12 +165,11 @@
   },
   "peerDependencies": {
     "@equinor/eds-icons": "*",
-    "@equinor/subsurface-app-management": ">=4.3.1",
+    "@equinor/subsurface-app-management": "4.4.2-beta.0",
     "@tanstack/react-query": "*",
+    "@tanstack/react-router": "*",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router": "^6.28.0",
-    "react-router-dom": "^6.28.0"
+    "react-dom": "^19.0.0"
   },
   "msw": {
     "workerDirectory": [

package/dist/atoms/hooks/useSearchParameter.d.ts

@@ -1,5 +0,0 @@
-export declare function useSearchParameter<T>({ key, initialValue, parser, }: {
-    key: string;
-    initialValue?: T;
-    parser?: (value: string) => T;
-}): readonly [T | undefined, (action: ((value: T | undefined) => T) | T) => void];

package/dist/atoms/hooks/useSearchParameter.js

@@ -1 +0,0 @@
-import{useRef as r}from"react";import{useSearchParams as t}from"react-router-dom";function e({key:e,initialValue:n,parser:o}){const[i,c]=t(),s=r(!1),a=i.get(e)??void 0,u=o&&a?o(a):a,f=s.current||void 0!==u?u:n,l=r=>{if(s.current||(s.current=!0),r instanceof Function){const t=r(f);l(t)}else{const t=new URLSearchParams(i),n="string"==typeof r?r:JSON.stringify(r);void 0===n||""===n||"null"===n||"[]"===n||"{}"===n?t.delete(e):t.set(e,n),c(t)}};return[f,l]}export{e as useSearchParameter};