@equinor/amplify-component-lib 9.9.0 → 9.9.1

package/dist/molecules/Tabs/Tab.d.ts

@@ -1,10 +1,11 @@
 import { Tab as TabType, Tabs } from './Tabs.types';
 type TabProps<T> = {
     onChange: Tabs<T>['onChange'];
+    onHover?: Tabs<T>['onHover'];
     selectedIndex: number;
     index: number;
     centered: boolean;
     animated: boolean;
 } & TabType<T>;
-export declare function Tab<T>({ value, label, selectedIndex, index, onChange, centered, animated, disabled, leadingIcon, }: TabProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Tab<T>({ value, label, selectedIndex, index, onChange, onHover, centered, animated, disabled, leadingIcon, }: TabProps<T>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/molecules/Tabs/Tab.js

@@ -1 +1 @@
-import{jsxs as e,jsx as a,Fragment as t}from"react/jsx-runtime";import{Icon as i,Typography as n}from"@equinor/eds-core-react";import{Button as l,Line as r,ActiveLine as c}from"./Tab.styles.js";function s({value:s,label:d,selectedIndex:o,index:m,onChange:u,centered:b,animated:f,disabled:p,leadingIcon:g}){return e(l,{role:"tab","aria-selected":o===m,onClick:()=>{u(s)},$centered:b,disabled:p,children:[g?a(i,{data:g,size:24}):null,a(n,{as:"label",variant:"menu_tabs",group:"navigation",children:d}),f?e(t,{children:[a(r,{className:"static-line"}),a(c,{animate:{left:100*(o-m)+"%"}})]}):a(r,{className:"static-line",$active:o===m})]})}export{s as Tab};
+import{jsxs as e,jsx as a,Fragment as n}from"react/jsx-runtime";import{Icon as t,Typography as i}from"@equinor/eds-core-react";import{Button as r,Line as l,ActiveLine as o}from"./Tab.styles.js";function s({value:s,label:c,selectedIndex:d,index:m,onChange:u,onHover:b,centered:f,animated:p,disabled:v,leadingIcon:g}){return e(r,{role:"tab","aria-selected":d===m,onClick:()=>{u(s)},onMouseEnter:()=>{b&&b(s)},$centered:f,disabled:v,children:[g?a(t,{data:g,size:24}):null,a(i,{as:"label",variant:"menu_tabs",group:"navigation",children:c}),p?e(n,{children:[a(l,{className:"static-line"}),a(o,{animate:{left:100*(d-m)+"%"}})]}):a(l,{className:"static-line",$active:d===m})]})}export{s as Tab};

package/dist/molecules/Tabs/Tabs.d.ts

@@ -13,4 +13,4 @@ export type TabsProps<T> = TabsType<T> & {
  * @param onChange - Callback when tab is selected
  * @param ref - Container ref
  */
-export declare function Tabs<T>({ options, selected, centered, animated, scrollable, amountPerScrollPage, onChange, ref, ...rest }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Tabs<T>({ options, selected, centered, animated, scrollable, amountPerScrollPage, onChange, onHover, ref, ...rest }: TabsProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Tabs/Tabs.js

@@ -15,4 +15,4 @@ import{jsxs as e,jsx as r,Fragment as t}from"react/jsx-runtime";import{useRef as
   align-items: center;
   overflow: hidden;
   order: 1;
-`;function p({options:m,selected:h,centered:p=!0,animated:b=!0,scrollable:g=!0,amountPerScrollPage:v,onChange:x,ref:w,...y}){const C=o(null),[S,T]=l(!1),[j,P]=l(0),[W,k]=l(!0),[z,A]=l(!0);if(void 0!==v&&v<=0)throw new Error("[ACL - Tabs]: Amount per scroll page must be greater than 0");if(void 0!==v&&!g)throw new Error("[ACL - Tabs]: amountPerScrollPage was set but scrollable is false!");const L=m.findIndex((e=>e.value===h));n((()=>{if(!g||!C.current)return void(S&&T(!1));const e=new ResizeObserver((([e])=>{const r=e.target;P(Math.round(e.borderBoxSize[0].inlineSize)),T(r.scrollWidth>r.clientWidth),r.scrollTo(0,0)}));return e.observe(C.current,{box:"border-box"}),k(!0),A(!1),()=>{e.disconnect()}}),[g,S]);const M=e=>()=>{if(!C.current||!j)return;let r=C.current.scrollLeft;"left"===e?(r-=j,r=Math.max(0,r)):(r+=j,r=Math.min(r,C.current.scrollWidth)),C.current.scrollTo({top:0,left:r,behavior:"smooth"}),k(r<=0),A(r+j>=C.current.scrollWidth)};return e(f,{...y,ref:w,children:[r(u,{ref:C,style:v&&S?{display:"grid",gridTemplateColumns:`repeat(${m.length}, ${j/v}px)`}:void 0,children:m.map(((e,t)=>r(d,{selectedIndex:L,index:t,onChange:x,centered:p,animated:b,...e},e.label)))}),S?e(t,{children:[r(i,{"aria-label":"Scroll tabs left",variant:"ghost_icon",disabled:W,onClick:M("left"),children:r(a,{data:s})}),r(i,{"aria-label":"Scroll tabs right",variant:"ghost_icon",disabled:z,onClick:M("right"),children:r(a,{data:c})})]}):null]})}export{p as Tabs};
+`;function p({options:m,selected:h,centered:p=!0,animated:b=!0,scrollable:g=!0,amountPerScrollPage:v,onChange:x,onHover:w,ref:y,...C}){const S=o(null),[T,j]=l(!1),[P,W]=l(0),[k,z]=l(!0),[A,L]=l(!0);if(void 0!==v&&v<=0)throw new Error("[ACL - Tabs]: Amount per scroll page must be greater than 0");if(void 0!==v&&!g)throw new Error("[ACL - Tabs]: amountPerScrollPage was set but scrollable is false!");const M=m.findIndex((e=>e.value===h));n((()=>{if(!g||!S.current)return void(T&&j(!1));const e=new ResizeObserver((([e])=>{const r=e.target;W(Math.round(e.borderBoxSize[0].inlineSize)),j(r.scrollWidth>r.clientWidth),r.scrollTo(0,0)}));return e.observe(S.current,{box:"border-box"}),z(!0),L(!1),()=>{e.disconnect()}}),[g,T]);const $=e=>()=>{if(!S.current||!P)return;let r=S.current.scrollLeft;"left"===e?(r-=P,r=Math.max(0,r)):(r+=P,r=Math.min(r,S.current.scrollWidth)),S.current.scrollTo({top:0,left:r,behavior:"smooth"}),z(r<=0),L(r+P>=S.current.scrollWidth)};return e(f,{...C,ref:y,children:[r(u,{ref:S,style:v&&T?{display:"grid",gridTemplateColumns:`repeat(${m.length}, ${P/v}px)`}:void 0,children:m.map(((e,t)=>r(d,{selectedIndex:M,index:t,onChange:x,onHover:w,centered:p,animated:b,...e},e.label)))}),T?e(t,{children:[r(i,{"aria-label":"Scroll tabs left",variant:"ghost_icon",disabled:k,onClick:$("left"),children:r(a,{data:s})}),r(i,{"aria-label":"Scroll tabs right",variant:"ghost_icon",disabled:A,onClick:$("right"),children:r(a,{data:c})})]}):null]})}export{p as Tabs};

package/dist/molecules/Tabs/Tabs.types.d.ts

@@ -8,6 +8,7 @@ export interface Tab<T> {
 export interface Tabs<T> {
     selected: T;
     onChange: (value: T) => void;
+    onHover?: (hoveredTabValue: T) => void;
     options: Tab<T>[];
     scrollable?: boolean;
     amountPerScrollPage?: number;

package/dist/providers/TableOfContentsProvider.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as t,useState as r,useMemo as n,useEffect as o,useCallback as i,useRef as s,useContext as l}from"react";import{useNavigate as c,useLocation as u}from"react-router";import{useOnScreenMultiple as a}from"../atoms/hooks/useOnScreenMultiple.js";import{getValues as m}from"./TableOfContentsProvider.utils.js";const d=t(void 0);function f(){const e=l(d);if(void 0===e)throw new Error("'useTableOfContents' must be used within provider");return e}const h=({items:t,children:l,hashNavigation:f})=>{const h=c(),{hash:p}=u(),[v,g]=r(t[0]?.value),[b,w]=r([]),[I,O]=r(""!==p),j=n((()=>t.flatMap((e=>m([],e)))),[t]);o((()=>{w(j.map((e=>document.getElementById(e))))}),[j]);const x=i((e=>{if(e.value===v)return!0;if(e.children&&v){return m([],e).includes(v)}return!1}),[v]),A=a(b),C=s(-1),M=i(((e,t)=>{const r=j.findIndex((t=>t===e)),n=b[r];if(n){const e=t?.shouldInstantlyJumpOnMount&&I?"instant":t?.behavior??"smooth";n.scrollIntoView({block:"start",behavior:e}),C.current=r;let o=1/0,i=0;const s=()=>{const e=n?.getBoundingClientRect().top;if(e===o){if(i+=1,i>1)return g(j[r]),f&&(h(`#${j[r]}`,{replace:!0}),O(!1)),void(C.current=-1)}else i=0,o=e;requestAnimationFrame(s)};requestAnimationFrame(s)}}),[b,f,h,I,j]);return o((()=>{if(0===A.length||A.length!==j.length||-1!==C.current)return;let e=-1;for(let t=A.length-1;t>=0;t--)A[t]&&(e=t);-1!==e&&void 0!==j.at(e)&&(g(j[e]),f&&h(`#${j[e]}`,{replace:!0}))}),[f,h,j,A]),e(d.Provider,{value:{items:t,selected:v,setSelected:M,isActive:x},children:l})};export{h as TableOfContentsProvider,f as useTableOfContents};
+import{jsx as t}from"react/jsx-runtime";import{createContext as e,useState as r,useRef as n,useMemo as o,useEffect as i,useCallback as s,useContext as u}from"react";import{useNavigate as l,useLocation as c}from"react-router";import{useOnScreenMultiple as a}from"../atoms/hooks/useOnScreenMultiple.js";import{getValues as m}from"./TableOfContentsProvider.utils.js";const d=e(void 0);function h(){const t=u(d);if(void 0===t)throw new Error("'useTableOfContents' must be used within provider");return t}const f=({items:e,children:u,hashNavigation:h})=>{const f=l(),{hash:p}=c(),[v,g]=r(e[0]?.value),[b,I]=r([]),[O,w]=r(""!==p),M=n(!1),j=o((()=>e.flatMap((t=>m([],t)))),[e]);i((()=>{I(j.map((t=>document.getElementById(t))))}),[j]),i((()=>{p.length||(M.current=!0)}),[p]);const x=s((t=>{if(t.value===v)return!0;if(t.children&&v){return m([],t).includes(v)}return!1}),[v]),y=a(b),A=n(-1),C=s(((t,e)=>{const r=j.findIndex((e=>e===t)),n=b[r];if(n){const t=e?.shouldInstantlyJumpOnMount&&O?"instant":e?.behavior??"smooth";n.scrollIntoView({block:"start",behavior:t}),A.current=r;let o=1/0,i=0;const s=()=>{const t=n?.getBoundingClientRect().top;if(t===o){if(i+=1,i>1)return g(j[r]),h&&(f(`#${j[r]}`,{replace:!0}),w(!1)),void(A.current=-1)}else i=0,o=t;requestAnimationFrame(s)};requestAnimationFrame(s)}}),[b,h,f,O,j]);return i((()=>{if(0===y.length||y.length!==j.length||-1!==A.current)return;let t=-1;for(let e=y.length-1;e>=0;e--)y[e]&&(t=e);if(-1===t||void 0===j.at(t))return;const e=p.replace("#","");if(!M.current&&e.length&&j.includes(e))return C(e,{behavior:"instant",shouldInstantlyJumpOnMount:!0}),void(M.current=!0);g(j[t]),h&&f(`#${j[t]}`,{replace:!0})}),[h,f,j,y]),t(d.Provider,{value:{items:e,selected:v,setSelected:C,isActive:x},children:u})};export{f as TableOfContentsProvider,h as useTableOfContents};

package/package.json

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