@equinor/amplify-component-lib 10.0.5 → 10.1.0

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

@@ -1,6 +1,6 @@
-import * as react137 from "react";
+import * as react135 from "react";
 
 //#region src/atoms/hooks/useLocalStorage.d.ts
-declare const useLocalStorage: <T>(key: string, defaultState: T, keepAliveMs?: number) => readonly [T, react137.Dispatch<react137.SetStateAction<T>>, () => void];
+declare const useLocalStorage: <T>(key: string, defaultState: T, keepAliveMs?: number) => readonly [T, react135.Dispatch<react135.SetStateAction<T>>, () => void];
 //#endregion
 export { useLocalStorage };

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

@@ -1,6 +1,6 @@
 import { SelectOption, SelectOptionRequired } from "../../molecules/Select/Select.types.js";
 import { SelectComponentProps } from "../../molecules/Select/Select.js";
-import * as react135 from "react";
+import * as react137 from "react";
 import { ChangeEvent, KeyboardEvent } from "react";
 
 //#region src/atoms/hooks/useSelect.d.ts
@@ -16,8 +16,8 @@ declare const useSelect: <T extends SelectOptionRequired>(props: SelectComponent
   handleOnOpen: () => void;
   handleOnRemoveItem: (item: SelectOption<T>) => void;
   search: string;
-  searchRef: react135.RefObject<HTMLInputElement | null>;
-  itemRefs: react135.RefObject<(HTMLButtonElement | null)[]>;
+  searchRef: react137.RefObject<HTMLInputElement | null>;
+  itemRefs: react137.RefObject<(HTMLButtonElement | null)[]>;
   selectedValues: T[];
   open: boolean;
   tryingToRemoveItem: T | undefined;

package/dist/deprecated/ExpandingIconButton/ExpandingIconButton.d.ts

@@ -1,4 +1,4 @@
-import * as react1 from "react";
+import * as react0 from "react";
 import { IconData } from "@equinor/eds-icons";
 
 //#region src/deprecated/ExpandingIconButton/ExpandingIconButton.d.ts
@@ -12,6 +12,6 @@ interface ExpandingIconButtonProps {
 /**
  * @deprecated Being deprecated from amplify-component-lib move into app if you want the implementation
  */
-declare const ExpandingIconButton: react1.ForwardRefExoticComponent<ExpandingIconButtonProps & react1.RefAttributes<HTMLDivElement>>;
+declare const ExpandingIconButton: react0.ForwardRefExoticComponent<ExpandingIconButtonProps & react0.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ExpandingIconButton };

package/dist/deprecated/IconToggleButton.d.ts

@@ -1,4 +1,4 @@
-import * as react0 from "react";
+import * as react1 from "react";
 import { IconData } from "@equinor/eds-icons";
 
 //#region src/deprecated/IconToggleButton.d.ts
@@ -21,6 +21,6 @@ interface IconToggleButtonProps {
 /**
  * @deprecated Being deprecated from amplify-component-lib move into app if you want the implementation
  */
-declare const IconToggleButton: react0.ForwardRefExoticComponent<IconToggleButtonProps & react0.RefAttributes<HTMLButtonElement>>;
+declare const IconToggleButton: react1.ForwardRefExoticComponent<IconToggleButtonProps & react1.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { IconToggleButton };

package/dist/molecules/Badge/Badge.styles.js

@@ -1,4 +1,4 @@
-import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import r from"styled-components";const{shape:i}=e,a=e=>({light:{background:`rgba(235, 235, 235, 1)`,color:t.text.static_icons__tertiary.rgba},danger:{background:t.interactive.danger__resting.rgba,color:t.text.static_icons__primary_white.rgba},empty:{background:t.interactive.disabled__fill.rgba,color:t.interactive.disabled__text.rgba},default:{background:t.text.static_icons__tertiary.rgba,color:t.text.static_icons__primary_white.rgba}})[e],o=r.div`
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import r from"styled-components";const{shape:i}=e,a=e=>({light:{background:t.ui.background__light_medium.rgba,color:t.text.static_icons__tertiary.rgba},danger:{background:t.interactive.danger__resting.rgba,color:t.text.static_icons__primary_white.rgba},empty:{background:t.interactive.disabled__fill.rgba,color:t.interactive.disabled__text.rgba},default:{background:t.text.static_icons__tertiary.rgba,color:t.text.static_icons__primary_white.rgba}})[e],o=r.div`
   display: flex;
   align-items: center;
   justify-content: center;

package/dist/molecules/Chip/Chip.d.ts

@@ -25,6 +25,6 @@ type DeletableChipProps = BaseChipProps & InteractiveChipBase & {
   onDelete: (event: MouseEvent<HTMLButtonElement> | KeyboardEvent<HTMLButtonElement>) => void;
 };
 type ChipProps = Omit<HTMLAttributes<HTMLDivElement | HTMLButtonElement>, 'onClick'> & (ReadOnlyChipProps | ClickableChipProps | DeletableChipProps);
-declare const Chip: react5.ForwardRefExoticComponent<ChipProps & react5.RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+declare const Chip: react5.ForwardRefExoticComponent<ChipProps & react5.RefAttributes<HTMLDivElement | HTMLButtonElement>>;
 //#endregion
 export { BaseChipProps, Chip, ClickableChipProps, DeletableChipProps };

package/dist/molecules/Select/Select.styles.d.ts

@@ -11,12 +11,12 @@ interface ComboBoxChipProps {
   $lightBackground?: boolean;
   className: string;
 }
-declare const ComboBoxChip: styled_components_dist_types8.IStyledComponentBase<"web", styled_components_dist_types8.Substitute<((Omit<react43.HTMLAttributes<HTMLButtonElement | HTMLDivElement>, "onClick"> & ((BaseChipProps & {
+declare const ComboBoxChip: styled_components_dist_types8.IStyledComponentBase<"web", styled_components_dist_types8.Substitute<((Omit<react43.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react43.RefAttributes<HTMLButtonElement | HTMLDivElement>) & styled_components_dist_types8.BaseObject, ComboBoxChipProps>> & string & Omit<react43.ForwardRefExoticComponent<(Omit<react43.HTMLAttributes<HTMLButtonElement | HTMLDivElement>, "onClick"> & ((BaseChipProps & {
+}) | ClickableChipProps | DeletableChipProps)) & react43.RefAttributes<HTMLDivElement | HTMLButtonElement>) & styled_components_dist_types8.BaseObject, ComboBoxChipProps>> & string & Omit<react43.ForwardRefExoticComponent<(Omit<react43.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react43.RefAttributes<HTMLButtonElement | HTMLDivElement>>, keyof react43.Component<any, {}, any>>;
+}) | ClickableChipProps | DeletableChipProps)) & react43.RefAttributes<HTMLDivElement | HTMLButtonElement>>, keyof react43.Component<any, {}, any>>;
 //#endregion
 export { ComboBoxChip };

package/dist/organisms/Filter/Filter.d.ts

@@ -1,5 +1,5 @@
 import { FilterProps } from "./Filter.types.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 
 //#region src/organisms/Filter/Filter.d.ts
 
@@ -15,6 +15,7 @@ import * as react_jsx_runtime5 from "react/jsx-runtime";
  * @param initialOpen - Whether the filter should be open by default, defaults to false
  * @param placeholder - Placeholder text for the search input, defaults to 'Search...'
  * @param id - ID for the search field
+ * @param openOnFocus - Should the filter menu open when focusing the search field, default is true
  */
 declare function Filter<T extends string>({
   values,
@@ -29,7 +30,8 @@ declare function Filter<T extends string>({
   initialOpen,
   placeholder,
   id,
+  openOnFocus,
   ...rest
-}: FilterProps<T>): react_jsx_runtime5.JSX.Element;
+}: FilterProps<T>): react_jsx_runtime6.JSX.Element;
 //#endregion
 export { Filter };

package/dist/organisms/Filter/Filter.js

@@ -1 +1 @@
-import{colors as e}from"../../atoms/style/colors.js";import{Container as t,Content as n,SearchField as r,SearchFieldWrapper as i,Section as a,StyledChip as o,Wrapper as s}from"./Filter.styles.js";import{getFilteredAutoCompleteOptions as c}from"./Filter.utils.js";import{AutoCompleteMenu as l}from"./AutoCompleteMenu.js";import{AutoCompleteText as u}from"./AutoCompleteText.js";import{useRef as d,useState as f}from"react";import{Button as p,Icon as m,Typography as h}from"@equinor/eds-core-react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{arrow_drop_down as v,arrow_drop_up as y,clear as b,info_circle as x,search as S}from"@equinor/eds-icons";import{AnimatePresence as C,motion as w}from"framer-motion";function T({values:T,search:E,onSearchChange:D,onSearchEnter:O,onClearFilter:k,onClearAllFilters:A,children:j,topContent:M,inlineContent:N,initialOpen:P=!1,placeholder:F=`Search...`,id:I,...L}){let R=d(null),z=d(null),[B,V]=f(P),[H,U]=f(void 0),W=d(P?`auto`:0),G=()=>{V(e=>!e),W.current===`auto`&&(W.current=0)},K=()=>{B||V(!0)},q=()=>{R.current?.focus()},J=e=>{if(!(`autoCompleteOptions`in L)){O(e);return}let t=c({searchValue:e,autoCompleteOptions:L.autoCompleteOptions});if(t.length===1){L.onAutoComplete(t[0].key,t[0]);return}O(e)},Y=e=>{if(e.key===`Enter`&&E!==``)J(E);else if(e.key===`Backspace`&&E===``){if(H===void 0){for(let e of Object.keys(T).toReversed())if(T[e].length>0){U(e);break}return}k(H,T[H].length-1),U(void 0)}},X=Object.values(T).some(e=>e.length>0);return _(s,{id:I,children:[M,_(t,{children:[_(a,{ref:z,onClick:q,children:[g(m,{data:S,color:e.text.static_icons__tertiary.rgba}),Object.keys(T).flatMap(e=>T[e].map(({label:t,icon:n},r,i)=>g(o,{onDelete:()=>k(e,r),leadingIconData:n,$tryingToRemove:H===e&&r===i.length-1,children:t},`${t}-${r}-${e}`))),_(i,{children:[`autoCompleteOptions`in L&&L.autoCompleteOptions&&g(u,{search:E,autoCompleteOptions:L.autoCompleteOptions}),g(r,{ref:R,id:`filter-search-${I}`,type:`search`,autoComplete:`off`,value:E,placeholder:X?void 0:F,onChange:D,onKeyDownCapture:Y,onFocus:K})]}),Object.values(T).some(e=>e.length>0)&&g(p,{variant:`ghost_icon`,onClick:A,"data-testid":`clear-all-x`,children:g(m,{data:b,size:18,color:e.text.static_icons__tertiary.rgba})})]}),N,_(`button`,{onClick:G,"data-testid":`toggle-open-button`,children:[g(h,{variant:`button`,group:`navigation`,as:`span`,children:`Filters`}),g(m,{data:B?y:v,color:e.text.static_icons__tertiary.rgba})]})]}),g(C,{children:B&&g(w.div,{animate:{height:`auto`},initial:{height:W.current},exit:{height:0},children:_(n,{children:[_(`span`,{children:[g(m,{data:x,size:16,color:e.text.static_icons__tertiary.rgba}),g(h,{variant:`label`,group:`input`,color:e.text.static_icons__tertiary.rgba,children:`Type a keyword and press enter`})]}),j]})})}),`autoCompleteOptions`in L&&L.autoCompleteOptions&&g(l,{isFilterOpen:B,search:E,anchorElement:z.current,autoCompleteOptions:L.autoCompleteOptions,onAutoComplete:L.onAutoComplete,searchElement:R.current})]})}export{T as Filter};
+import{colors as e}from"../../atoms/style/colors.js";import{Container as t,Content as n,SearchField as r,SearchFieldWrapper as i,Section as a,StyledChip as o,Wrapper as s}from"./Filter.styles.js";import{getFilteredAutoCompleteOptions as c}from"./Filter.utils.js";import{AutoCompleteMenu as l}from"./AutoCompleteMenu.js";import{AutoCompleteText as u}from"./AutoCompleteText.js";import{useRef as d,useState as f}from"react";import{Button as p,Icon as m,Typography as h}from"@equinor/eds-core-react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{arrow_drop_down as v,arrow_drop_up as y,clear as b,info_circle as x,search as S}from"@equinor/eds-icons";import{AnimatePresence as C,motion as w}from"framer-motion";function T({values:T,search:E,onSearchChange:D,onSearchEnter:O,onClearFilter:k,onClearAllFilters:A,children:j,topContent:M,inlineContent:N,initialOpen:P=!1,placeholder:F=`Search...`,id:I,openOnFocus:L=!0,...R}){let z=d(null),B=d(null),[V,H]=f(P),[U,W]=f(void 0),G=d(P?`auto`:0),K=()=>{H(e=>!e),G.current===`auto`&&(G.current=0)},q=()=>{!V&&L&&H(!0)},J=()=>{z.current?.focus()},Y=e=>{if(!(`autoCompleteOptions`in R)){O(e);return}let t=c({searchValue:e,autoCompleteOptions:R.autoCompleteOptions});if(t.length===1){R.onAutoComplete(t[0].key,t[0]);return}O(e)},X=e=>{if(e.key===`Enter`&&E!==``)Y(E);else if(e.key===`Backspace`&&E===``){if(U===void 0){for(let e of Object.keys(T).toReversed())if(T[e].length>0){W(e);break}return}k(U,T[U].length-1),W(void 0)}},Z=Object.values(T).some(e=>e.length>0);return _(s,{id:I,children:[M,_(t,{children:[_(a,{ref:B,onClick:J,children:[g(m,{data:S,color:e.text.static_icons__tertiary.rgba}),Object.keys(T).flatMap(e=>T[e].map(({label:t,icon:n},r,i)=>g(o,{onDelete:()=>k(e,r),leadingIconData:n,$tryingToRemove:U===e&&r===i.length-1,children:t},`${t}-${r}-${e}`))),_(i,{children:[`autoCompleteOptions`in R&&R.autoCompleteOptions&&g(u,{search:E,autoCompleteOptions:R.autoCompleteOptions}),g(r,{ref:z,id:`filter-search-${I}`,type:`search`,autoComplete:`off`,value:E,placeholder:Z?void 0:F,onChange:D,onKeyDownCapture:X,onFocus:q})]}),Object.values(T).some(e=>e.length>0)&&g(p,{variant:`ghost_icon`,onClick:A,"data-testid":`clear-all-x`,children:g(m,{data:b,size:18,color:e.text.static_icons__tertiary.rgba})})]}),N,_(`button`,{onClick:K,"data-testid":`toggle-open-button`,children:[g(h,{variant:`button`,group:`navigation`,as:`span`,children:`Filters`}),g(m,{data:V?y:v,color:e.text.static_icons__tertiary.rgba})]})]}),g(C,{children:V&&g(w.div,{animate:{height:`auto`},initial:{height:G.current},exit:{height:0},children:_(n,{children:[_(`span`,{children:[g(m,{data:x,size:16,color:e.text.static_icons__tertiary.rgba}),g(h,{variant:`label`,group:`input`,color:e.text.static_icons__tertiary.rgba,children:`Type a keyword and press enter`})]}),j]})})}),`autoCompleteOptions`in R&&R.autoCompleteOptions&&g(l,{isFilterOpen:V,search:E,anchorElement:B.current,autoCompleteOptions:R.autoCompleteOptions,onAutoComplete:R.onAutoComplete,searchElement:z.current})]})}export{T as Filter};

package/dist/organisms/Filter/Filter.types.d.ts

@@ -18,6 +18,7 @@ interface CommonFilterProps<T extends string> {
   initialOpen?: boolean;
   placeholder?: string;
   id?: string;
+  openOnFocus?: boolean;
 }
 interface FilterWithAutoCompleteOptions<T extends string> extends CommonFilterProps<T> {
   autoCompleteOptions: Record<T, SelectOptionRequired[]>;

package/dist/organisms/Filter/QuickFilter.d.ts

@@ -1,6 +1,6 @@
 import { SelectOptionRequired } from "../../molecules/Select/Select.types.js";
 import { FilterProps } from "./Filter.types.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
 
 //#region src/organisms/Filter/QuickFilter.d.ts
 interface QuickFilterProps<T extends string> {
@@ -14,6 +14,6 @@ declare function QuickFilter<T extends string>({
   items,
   onQuickFilter,
   label
-}: QuickFilterProps<T>): react_jsx_runtime6.JSX.Element;
+}: QuickFilterProps<T>): react_jsx_runtime5.JSX.Element;
 //#endregion
 export { QuickFilter };

package/dist/organisms/ReleaseNotesPage/ReleaseNotesPage.js

@@ -1 +1 @@
-import{TableOfContentsProvider as e}from"../../providers/TableOfContentsProvider.js";import{TableOfContents as t}from"../TableOfContents/TableOfContents.js";import{useFilteredReleaseNotes as n}from"./hooks/useFilteredReleaseNotes.js";import{extractYearsData as r,monthValueToString as i,yearId as a}from"./ReleaseNotesPage.utils.js";import{ReleasePosts as o}from"./ReleasePosts/ReleasePosts.js";import{ReleaseNoteFilter as s}from"./ReleaseNoteFilter.js";import{Container as c,StickyRightSide as l}from"./ReleaseNotesPage.styles.js";import{useMemo as u}from"react";import{Typography as d}from"@equinor/eds-core-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=()=>{let{data:m}=n();return f(e,{items:u(()=>{let e=[];for(let t of r(m))e.push({value:a(t.value),label:t.label,children:t.months.map(e=>({label:e.label,value:i(e.value)}))});return e},[m]),children:p(c,{children:[f(d,{variant:`h1`,bold:!0,children:`Release Notes`}),p(`section`,{children:[f(s,{}),f(o,{})]}),f(l,{children:f(t,{onlyShowSelectedChildren:!1,variant:`border`})})]})})};export{m as ReleaseNotesPage};
+import{TableOfContentsProvider as e}from"../../providers/TableOfContentsProvider.js";import{TableOfContents as t}from"../TableOfContents/TableOfContents.js";import{useFilteredReleaseNotes as n}from"./hooks/useFilteredReleaseNotes.js";import{extractYearsData as r,monthValueToString as i,yearId as a}from"./ReleaseNotesPage.utils.js";import{ReleasePosts as o}from"./ReleasePosts/ReleasePosts.js";import{ReleaseNoteFilter as s}from"./ReleaseNoteFilter.js";import{Container as c,StickyRightSide as l}from"./ReleaseNotesPage.styles.js";import{useMemo as u}from"react";import{Typography as d}from"@equinor/eds-core-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m=()=>{let{data:m}=n();return f(e,{items:u(()=>{let e=[];for(let t of r(m))e.push({value:a(t.value),label:t.label,children:t.months.map(e=>({label:e.label,value:i(e.value)}))});return e},[m]),children:p(c,{children:[f(d,{variant:`h1`,bold:!0,children:`Release Notes`}),p(`section`,{children:[f(s,{}),f(o,{})]}),f(l,{children:f(t,{onlyShowSelectedChildren:!1})})]})})};export{m as ReleaseNotesPage};

package/dist/organisms/SideBar/MenuItem/MenuItem.utils.js

@@ -1 +1 @@
-const e=({currentUrl:e,link:t})=>e.includes(t)&&t!==`/`||t===e,t=({currentUrl:e,link:t})=>e.split(`?`)[0]===t,n=({currentUrl:n,link:r,disabled:i,replace:a})=>{let o=e({currentUrl:n,link:r}),s=t({currentUrl:n,link:r});return!i&&(!o||o&&!s&&a)};export{n as canNavigate,e as isCurrentUrl};
+const e=({currentUrl:e,link:t})=>decodeURIComponent(e).includes(t)&&t!==`/`||t===e,t=({currentUrl:e,link:t})=>e.split(`?`)[0]===t,n=({currentUrl:n,link:r,disabled:i,replace:a})=>{let o=e({currentUrl:n,link:r}),s=t({currentUrl:n,link:r});return!i&&(!o||o&&!s&&a)};export{n as canNavigate,e as isCurrentUrl};

package/dist/organisms/TableOfContents/TableOfContents.constants.js

@@ -1 +1 @@
-import{spacings as e}from"../../atoms/style/spacings.js";const t={buttons:`39px`,border:`34px`,borderHorizontal:`34px`},n={buttons:e.x_small,border:`0`,borderHorizontal:`0`};export{n as GAP,t as HEIGHT};
+const e=`34px`;export{e as VERTICAL_ITEM_HEIGHT};

package/dist/organisms/TableOfContents/TableOfContents.d.ts

@@ -1,11 +1,10 @@
-import { TableOfContentsVariants } from "./TableOfContents.types.js";
+import { TableOfContentsMode } from "./TableOfContents.types.js";
 import { FC } from "react";
 
 //#region src/organisms/TableOfContents/TableOfContents.d.ts
 interface TableOfContentsProps {
-  variant?: TableOfContentsVariants;
+  mode?: TableOfContentsMode;
   onlyShowSelectedChildren?: boolean;
-  isLink?: boolean;
 }
 declare const TableOfContents: FC<TableOfContentsProps>;
 //#endregion

package/dist/organisms/TableOfContents/TableOfContents.js

@@ -1 +1 @@
-import{getValues as e}from"../../providers/TableOfContentsProvider.utils.js";import{useTableOfContents as t}from"../../providers/TableOfContentsProvider.js";import{BorderItemsContainer as n,BorderItemsHorizontalContainer as r,TableOfContentsContainer as i}from"./TableOfContents.styles.js";import{TableOfContentsItem as a}from"./TableOfContentsItem.js";import{useMemo as o}from"react";import{jsx as s}from"react/jsx-runtime";const c=({variant:c=`buttons`,onlyShowSelectedChildren:l=!0,isLink:u=!1})=>{let{items:d,selected:f}=t(),p=o(()=>{for(let[t,n]of d.entries()){let r=e([],n);if(n.value===f||f&&r.includes(f))return t}return-1},[d,f]);return c===`border`?s(i,{className:`page-menu`,$variant:c,layoutRoot:!0,"data-testid":`table-of-contents-container`,children:d.map((e,t)=>s(n,{"data-testid":`border-items-container-${e.value}`,$index:t,$activeIndex:p,"aria-selected":p===t,children:s(a,{variant:c,onlyShowSelectedChildren:l,isLink:u,...e})},e.value))}):c===`borderHorizontal`?s(i,{className:`page-menu`,$variant:c,layoutRoot:!0,"data-testid":`table-of-contents-container`,children:d.map((e,t)=>s(r,{$index:t,$activeIndex:p,"aria-selected":p===t,children:s(a,{variant:c,...e,onlyShowSelectedChildren:l,isLink:u})},e.value))}):s(i,{className:`page-menu`,$variant:c,layoutRoot:!0,children:d.map(e=>s(a,{variant:c,...e,onlyShowSelectedChildren:l,isLink:u},e.value))})};export{c as TableOfContents};
+import{getValues as e}from"../../providers/TableOfContentsProvider.utils.js";import{useTableOfContents as t}from"../../providers/TableOfContentsProvider.js";import{Tabs as n}from"../../molecules/Tabs/Tabs.js";import{HorizontalItemsContainer as r,TableOfContentsContainer as i,VerticalItemsContainer as a}from"./TableOfContents.styles.js";import{TableOfContentsItem as o}from"./TableOfContentsItem.js";import{useMemo as s}from"react";import{jsx as c}from"react/jsx-runtime";const l=({mode:l=`vertical`,onlyShowSelectedChildren:u=!0})=>{let{items:d,selected:f,setSelected:p}=t(),m=s(()=>{for(let[t,n]of d.entries()){let r=e([],n);if(n.value===f||f&&r.includes(f))return t}return-1},[d,f]);return l===`horizontal`?c(r,{children:c(n,{selected:f,onChange:e=>{e&&p(e)},options:d})}):c(i,{className:`page-menu`,layoutRoot:!0,"data-testid":`table-of-contents-container`,children:d.map((e,t)=>c(a,{"data-testid":`border-items-container-${e.value}`,$index:t,$activeIndex:m,"aria-selected":m===t,children:c(o,{onlyShowSelectedChildren:u,...e})},e.value))})};export{l as TableOfContents};

package/dist/organisms/TableOfContents/TableOfContents.styles.js

@@ -1,10 +1,10 @@
-import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{animation as t}from"../../atoms/style/animation.js";import{spacings as n}from"../../atoms/style/spacings.js";import{HEIGHT as r}from"./TableOfContents.constants.js";import i,{css as a}from"styled-components";import{motion as o}from"framer-motion";import{Link as s}from"@tanstack/react-router";const{colors:c,shape:l}=e,u=i.button`
+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{VERTICAL_ITEM_HEIGHT as r}from"./TableOfContents.constants.js";import i,{css as a}from"styled-components";import{motion as o}from"framer-motion";const s=i.button`
   &:hover {
-    background: ${c.interactive.primary__hover_alt.rgba};
+    background: ${t.interactive.primary__hover_alt.rgba};
   }
   ${({$active:e})=>e?``:a`
       &:focus:not(:hover) {
-        outline: 2px dashed ${c.interactive.focus.rgba};
+        outline: 2px dashed ${t.interactive.focus.rgba};
         outline-offset: -4px;
       }
     `}
@@ -13,10 +13,10 @@ import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/ind
   grid-template-columns: auto 1fr;
   align-items: center;
   gap: ${n.small};
-  color: ${c.text.static_icons__default.rgba};
+  color: ${t.text.static_icons__default.rgba};
   cursor: pointer;
   padding: 0 ${n.medium};
-  height: ${({$variant:e})=>r[e]};
+  min-height: ${r};
   transition: background 200ms;
   > span {
     display: flex;
@@ -27,104 +27,46 @@ import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/ind
     font-weight: 700;
     font-size: 14px;
   }
-  ${({$variant:e,$active:t})=>{switch(e){case`buttons`:return a`
-          border-radius: ${l.corners.borderRadius};
-          background: ${t?c.interactive.primary__hover_alt.rgba:`none`};
-        `;case`border`:return a`
-          > span {
-            font-weight: ${t?700:500};
-            &:after {
-              height: 0;
-              display: block;
-              content: attr(title);
-              font-weight: 700;
-              font-size: 14px;
-              overflow: hidden;
-              visibility: hidden;
-            }
-          }
-        `}}}
+  ${({$active:e})=>a`
+      > span {
+        font-weight: ${e?700:500};
+        &:after {
+          height: 0;
+          display: block;
+          content: attr(title);
+          font-weight: 700;
+          font-size: 14px;
+          overflow: hidden;
+          visibility: hidden;
+        }
+      }
+    `}
   ${({$active:e})=>!e&&a`
       &:disabled {
-        color: ${c.interactive.disabled__text.rgba};
+        color: ${t.interactive.disabled__text.rgba};
         cursor: not-allowed;
       }
     `}
-`,d=i(s)`
-  text-decoration: none;
-  &:focus,
-  &:hover,
-  &:active {
-    text-decoration: none;
-    color: ${c.text.static_icons__default.rgba};
-  }
-  &:hover {
-    background: ${c.interactive.primary__hover_alt.rgba};
-  }
-  &:focus-visible {
-    color: ${c.text.static_icons__default.rgba};
-    outline: 2px dashed ${c.interactive.focus.rgba};
-    outline-offset: -4px;
-  }
-
-  ${({$disabled:e,$active:t})=>e&&!t&&a`
-      color: ${c.interactive.disabled__text.rgba} !important;
-      &:hover {
-        cursor: not-allowed;
+`,c=i.div`
+  button[role='tab'] {
+    .count {
+      background: ${t.ui.background__light_medium.rgba};
+      padding: 0 ${n.x_small};
+      > span {
+        color: ${t.text.static_icons__tertiary.rgba};
       }
-    `};
+    }
 
-  position: relative;
-  display: grid;
-  grid-template-columns: auto 1fr;
-  align-items: center;
-  gap: ${n.small};
-  color: ${c.text.static_icons__default.rgba};
-  cursor: pointer;
-  padding: 0 ${n.medium};
-  height: ${({$variant:e})=>r[e]};
-  transition: background 200ms;
-
-  > span {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    text-align: left;
-    font-family: 'Equinor', sans-serif;
-    font-weight: 700;
-    font-size: 14px;
-  }
-  ${({$variant:e,$active:t})=>{switch(e){case`buttons`:return a`
-          border-radius: ${l.corners.borderRadius};
-          background: ${t?c.interactive.primary__hover_alt.rgba:`none`};
-        `;case`border`:return a`
-          > span {
-            font-weight: ${t?700:500};
-            &:after {
-              height: 0;
-              display: block;
-              content: attr(title);
-              font-weight: 700;
-              font-size: 14px;
-              overflow: hidden;
-              visibility: hidden;
-            }
-          }
-        `}}}
-`,f=i.div`
-  display: flex;
-  position: relative;
-  &:after {
-    position: absolute;
-    left: 0;
-    bottom: ${({$activeIndex:e,$index:t})=>`${(e-t)*100}%`};
-    content: '';
-    width: 100%;
-    height: 2px;
-    background: ${c.interactive.primary__resting.rgba};
-    z-index: 100;
+    &:disabled {
+      .count {
+        background: ${t.interactive.disabled__fill.rgba};
+        > span {
+          color: ${t.interactive.disabled__text.rgba};
+        }
+      }
+    }
   }
-`,p=i.div`
+`,l=i.div`
   display: flex;
   flex-direction: column;
   position: relative;
@@ -136,57 +78,33 @@ import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/ind
     content: '';
     width: 2px;
     height: 100%;
-    background: ${c.interactive.primary__resting.rgba};
+    background: ${t.interactive.primary__resting.rgba};
     z-index: 100;
-    transition: top ${t.transitionMS};
+    transition: top ${e.transitionMS};
   }
-`,m=i(o.div)`
+`,u=i(o.div)`
   display: flex;
   flex-direction: column;
   position: relative;
-  ${({$variant:e})=>a`
-    min-height: ${r[e]};
-    ${e===`buttons`&&`gap: ${n.x_small};`}
-  `}
-`,h=i(o.div)`
+  min-height: ${r};
+`,d=i(o.div)`
   display: flex;
-  flex-direction: ${({$variant:e})=>e===`borderHorizontal`?`row`:`column`};
+  flex-direction: column;
   height: fit-content;
   overflow: hidden;
-  ${({$variant:e})=>{switch(e){case`buttons`:return`gap: ${n.small};`;case`border`:return a`
-          &:after {
-            position: absolute;
-            left: 0;
-            content: '';
-            width: 2px;
-            height: 100%;
-            background: ${c.ui.background__medium.rgba};
-          }
-        `;case`borderHorizontal`:return a`
-          &:after {
-            position: absolute;
-            left: 0;
-            bottom: 0;
-            content: '';
-            width: 100%;
-            height: 2px;
-            background: ${c.ui.background__medium.rgba};
-          }
-        `}}}
-`,g=i(o.div)`
+  &:after {
+    position: absolute;
+    left: 0;
+    content: '';
+    width: 2px;
+    height: 100%;
+    background: ${t.ui.background__medium.rgba};
+  }
+`,f=i(o.div)`
   display: flex;
   flex-direction: column;
-  ${({$shouldShowChildren:e})=>e?null:a`
-          visibility: hidden;
-          height: 0 !important;
-        `}
-  > div > button, a {
-    ${({$variant:e})=>{switch(e){case`buttons`:return a`
-            margin-left: ${n.medium};
-          `;case`border`:return a`
-            padding-left: ${n.x_large};
-          `}}}
+  > div > button,
+  a {
+    padding-left: ${n.x_large};
   }
-
-  ${({$variant:e})=>e===`buttons`&&`gap:${n.x_small};`}
-`;export{p as BorderItemsContainer,f as BorderItemsHorizontalContainer,u as Button,g as ChildContainer,d as Link,h as TableOfContentsContainer,m as TableOfContentsItemContainer};
+`;export{s as Button,f as ChildContainer,c as HorizontalItemsContainer,d as TableOfContentsContainer,u as TableOfContentsItemContainer,l as VerticalItemsContainer};

package/dist/organisms/TableOfContents/TableOfContents.types.d.ts

@@ -1,4 +1,4 @@
 //#region src/organisms/TableOfContents/TableOfContents.types.d.ts
-type TableOfContentsVariants = 'buttons' | 'border' | 'borderHorizontal';
+type TableOfContentsMode = 'vertical' | 'horizontal';
 //#endregion
-export { TableOfContentsVariants };
+export { TableOfContentsMode };

package/dist/organisms/TableOfContents/TableOfContentsItem.js

@@ -1,5 +1 @@
-import{useTableOfContents as e}from"../../providers/TableOfContentsProvider.js";import{Badge as t}from"../../molecules/Badge/Badge.js";import{GAP as n,HEIGHT as r}from"./TableOfContents.constants.js";import{Button as i,ChildContainer as a,Link as o,TableOfContentsItemContainer as s}from"./TableOfContents.styles.js";import{useEffect as c,useMemo as l,useRef as u}from"react";import{jsx as d,jsxs as f}from"react/jsx-runtime";const p=({label:m,value:h,count:g,disabled:_=!1,children:v,variant:y,onlyShowSelectedChildren:b,isLink:x=!1})=>{let{isActive:S,selected:C,setSelected:w}=e(),T=u(void 0);c(()=>{T.current===void 0&&(T.current=0)},[]);let E=l(()=>S({label:m,value:h,children:v})&&!_,[v,_,S,m,h]),D=e=>{_&&e&&e.preventDefault(),!_&&C!==h&&w(h)},O=b&&E||!b;return f(s,{$variant:y,layoutScroll:!0,layoutRoot:!0,children:[x?f(o,{$active:C===h,$variant:y,onClick:e=>D(e),to:_?``:`#${h}`,$disabled:_,tabIndex:_?-1:0,children:[d(`span`,{title:m,children:m}),g!==void 0&&d(t,{variant:g===0?`empty`:`light`,value:g})]}):f(i,{$active:C===h,$variant:y,onClick:()=>D(),disabled:_,children:[d(`span`,{title:m,children:m}),g!==void 0&&d(t,{variant:g===0?`empty`:`light`,value:g})]}),v&&d(a,{$shouldShowChildren:O,$variant:y,initial:{height:T.current},animate:{height:`
-                  calc(
-                    (${O?r[y]:`0`} * ${v.length})
-                    ${y===`buttons`?`+ (${n.buttons} * ${v.length-1})`:``}
-                  )`},transition:{duration:.4},children:v.map(e=>d(p,{onlyShowSelectedChildren:b,variant:y,...e,isLink:x},e.value))})]})};export{p as TableOfContentsItem};
+import{useTableOfContents as e}from"../../providers/TableOfContentsProvider.js";import{Badge as t}from"../../molecules/Badge/Badge.js";import{Button as n,ChildContainer as r,TableOfContentsItemContainer as i}from"./TableOfContents.styles.js";import{useMemo as a}from"react";import{jsx as o,jsxs as s}from"react/jsx-runtime";import{AnimatePresence as c}from"framer-motion";const l=({label:u,value:d,count:f,disabled:p=!1,children:m,onlyShowSelectedChildren:h})=>{let{isActive:g,selected:_,setSelected:v}=e(),y=a(()=>g({label:u,value:d,children:m})&&!p,[m,p,g,u,d]);return s(i,{layoutScroll:!0,layoutRoot:!0,children:[s(n,{$active:_===d,onClick:()=>{!p&&_!==d&&v(d)},disabled:p,children:[o(`span`,{title:u,children:u}),f!==void 0&&o(t,{variant:p?`empty`:`light`,value:f})]}),o(c,{children:m&&(h&&y||!h)&&o(r,{initial:{height:0},animate:{height:`auto`},exit:{height:0},transition:{duration:.4},children:m.map(e=>o(l,{onlyShowSelectedChildren:h,...e},e.value))})})]})};export{l as TableOfContentsItem};

package/dist/providers/AuthProvider/AuthProviderInner.js

@@ -1 +1 @@
-import{auth as e,environment as t}from"../../atoms/utils/auth_environment.js";import{FullPageSpinner as n}from"../../molecules/FullPageSpinner/FullPageSpinner.js";import{MissingAccessToApp as r}from"../../organisms/Status/collections/MissingAccessToApp.js";import{useEffect as i,useRef as a,useState as o}from"react";import{useMsal as s,useMsalAuthentication as c}from"@azure/msal-react";import{InteractionRequiredAuthError as l,InteractionType as u}from"@azure/msal-browser";import{jsx as d}from"react/jsx-runtime";import{jwtDecode as f}from"jwt-decode";const{GRAPH_ENDPOINTS:p,GRAPH_REQUESTS_LOGIN:m,GRAPH_REQUESTS_PHOTO:h,GRAPH_REQUESTS_BACKEND:g,fetchMsGraph:_,isInIframe:v}=e,{getApiScope:y}=t,b=({children:e,account:t,setAccount:b,setPhoto:x,setRoles:S,authState:C,setAuthState:w,withoutLoader:T,loadingComponent:E,unauthorizedComponent:D,withoutBackend:O})=>{let{instance:k,accounts:A,inProgress:j}=s(),{login:M,result:N,error:P,acquireToken:F}=c(u.Silent,m),[I,L]=o(!1),R=a(!1);return i(()=>{I||(async()=>{console.log(`[AuthProvider] Initializing`),await k.initialize(),console.log(`[AuthProvider] Finished initializing`),L(!0)})().catch(e=>{console.error(`[AuthProvider] Error during initialization`,e)})},[k,I]),i(()=>{I&&(P instanceof l&&!v()&&C!==`unauthorized`?(console.error(P),console.log(`[AuthProvider] No account found, need to login via. redirect`),M(u.Redirect,m).catch(e=>{console.error(`[AuthProvider] Error during login`,e)})):N?.account&&!t?(console.log(`[AuthProvider] Found account in useMsalAuth result, setting that one as active`),k.setActiveAccount(N.account),b(N.account)):A.length>0&&!t?(console.log(`[AuthProvider] Found account in accounts array, setting that one as active`),k.setActiveAccount(A[0]),b(A[0])):P&&console.error(`[AuthProvider] Unexpected error:`,P))},[t,A,P,k,I,M,N,b,C]),i(()=>{if(!t||!I||R.current||j!==`none`)return;R.current=!0;let e=async()=>{try{let e=await F(u.Silent,h);if(e){let t=await _(p.PHOTO,e.accessToken);if(t.status===404)return null;let n=await t.blob();x((window.URL??window.webkitURL).createObjectURL(n))}}catch(e){console.error(e)}},n=async()=>{try{let e=await F(u.Silent,g(y(import.meta.env.VITE_API_SCOPE)));if(console.log(`[AuthProvider] Successfully acquired token`),e&&e.accessToken){console.log(`[AuthProvider] Decoding token`);let t=f(e.accessToken);if(console.log(`[AuthProvider] Token was valid`),t.roles)console.log(`[AuthProvider] Found roles`),S(t.roles);else throw Error(`Could not find roles in token`);w(`authorized`)}}catch(e){console.error(`[AuthProvider] Token error when trying to get roles!`,e),w(`unauthorized`)}};(async()=>{await e(),O?w(`authorized`):await n()})()},[t,F,P,I,j,w,x,S,O]),C===`unauthorized`?D??d(r,{}):T?e:C===`loading`||t===void 0?E??d(n,{variant:`application`}):e};export{b as AuthProviderInner};
+import{auth as e,environment as t}from"../../atoms/utils/auth_environment.js";import{FullPageSpinner as n}from"../../molecules/FullPageSpinner/FullPageSpinner.js";import{MissingAccessToApp as r}from"../../organisms/Status/collections/MissingAccessToApp.js";import{useEffect as i,useRef as a,useState as o}from"react";import{useMsal as s,useMsalAuthentication as c}from"@azure/msal-react";import{BrowserAuthError as l,BrowserAuthErrorCodes as u,InteractionRequiredAuthError as d,InteractionType as f}from"@azure/msal-browser";import{jsx as p}from"react/jsx-runtime";import{jwtDecode as m}from"jwt-decode";const{GRAPH_ENDPOINTS:h,GRAPH_REQUESTS_LOGIN:g,GRAPH_REQUESTS_PHOTO:_,GRAPH_REQUESTS_BACKEND:v,fetchMsGraph:y,isInIframe:b}=e,{getApiScope:x}=t,S=({children:e,account:t,setAccount:S,setPhoto:C,setRoles:w,authState:T,setAuthState:E,withoutLoader:D,loadingComponent:O,unauthorizedComponent:k,withoutBackend:A})=>{let{instance:j,accounts:M,inProgress:N}=s(),{login:P,result:F,error:I,acquireToken:L}=c(f.Silent,g),[R,z]=o(!1),B=a(!1);return i(()=>{R||(async()=>{console.log(`[AuthProvider] Initializing`),await j.initialize(),console.log(`[AuthProvider] Finished initializing`),z(!0)})().catch(e=>{console.error(`[AuthProvider] Error during initialization`,e)})},[j,R]),i(()=>{R&&(I instanceof d&&!b()&&T!==`unauthorized`?(console.error(I),console.log(`[AuthProvider] No account found, need to login via. redirect`),P(f.Redirect,g).catch(e=>{console.error(`[AuthProvider] Error during login`,e)})):F?.account&&!t?(console.log(`[AuthProvider] Found account in useMsalAuth result, setting that one as active`),j.setActiveAccount(F.account),S(F.account)):M.length>0&&!t?(console.log(`[AuthProvider] Found account in accounts array, setting that one as active`),j.setActiveAccount(M[0]),S(M[0])):I instanceof l&&I.errorCode===u.monitorWindowTimeout?(console.error(I),console.log(`[AuthProvider] Trying to login again via. redirect due to monitor window timeout`),P(f.Redirect,g).catch(e=>{console.error(`[AuthProvider] Error during login`,e)})):I&&console.error(`[AuthProvider] Unexpected error:`,I))},[t,M,I,j,R,P,F,S,T]),i(()=>{if(!t||!R||B.current||N!==`none`)return;B.current=!0;let e=async()=>{try{let e=await L(f.Silent,_);if(e){let t=await y(h.PHOTO,e.accessToken);if(t.status===404)return null;let n=await t.blob();C((window.URL??window.webkitURL).createObjectURL(n))}}catch(e){console.error(e)}},n=async()=>{try{let e=await L(f.Silent,v(x(import.meta.env.VITE_API_SCOPE)));if(console.log(`[AuthProvider] Successfully acquired token`),e&&e.accessToken){console.log(`[AuthProvider] Decoding token`);let t=m(e.accessToken);if(console.log(`[AuthProvider] Token was valid`),t.roles)console.log(`[AuthProvider] Found roles`),w(t.roles);else throw Error(`Could not find roles in token`);E(`authorized`)}}catch(e){console.error(`[AuthProvider] Token error when trying to get roles!`,e),E(`unauthorized`)}};(async()=>{await e(),A?E(`authorized`):await n()})()},[t,L,I,R,N,E,C,w,A]),T===`unauthorized`?k??p(r,{}):D?e:T===`loading`||t===void 0?O??p(n,{variant:`application`}):e};export{S as AuthProviderInner};

package/package.json

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