@equinor/amplify-component-lib 9.10.1 → 9.11.0

package/dist/molecules/RichTextEditor/MenuBar/AddImageButton.js

@@ -1 +1 @@
-import{jsxs as t,Fragment as e,jsx as r}from"react/jsx-runtime";import{useRef as i}from"react";import{camera_add_photo as n}from"@equinor/eds-icons";import{EditorMenu as o}from"./MenuBar.js";import{RichTextEditorFeatures as c}from"../RichTextEditor.types.js";const s=({onImageUpload:s,editor:a,features:u})=>{const l=i(null);if(!s)return null;if(u&&!u.includes(c.IMAGES))return null;return t(e,{children:[r("input",{ref:l,type:"file",id:"img-input",multiple:!1,onChange:async t=>{const e=t.target.files;if(!e?.[0])return void console.error("Files undefined");const r=await s(e[0]);r&&a?.chain().focus().setImage({src:r.src,alt:r.alt}).run()},style:{display:"none"},accept:"image/*, video/*"}),r(o.Button,{"data-testid":"add-image-button",icon:n,onClick:()=>{l.current&&l.current.click()}})]})};export{s as AddImageButton};
+import{jsxs as t,Fragment as e,jsx as r}from"react/jsx-runtime";import{useRef as i}from"react";import{camera_add_photo as n}from"@equinor/eds-icons";import{EditorMenu as o}from"./MenuBar.js";import{RichTextEditorFeatures as c}from"../RichTextEditor.types.js";const s=({onImageUpload:s,editor:a,features:u})=>{const l=i(null);if(u&&!u.includes(c.IMAGES))return null;return t(e,{children:[r("input",{ref:l,type:"file",id:"img-input",multiple:!1,onChange:async t=>{const e=t.target.files;if(!e?.[0])return void console.error("Files undefined");const r=await(s?.(e[0]));r&&a?.chain().focus().setImage({src:r.src,alt:r.alt}).run()},style:{display:"none"},accept:"image/*, video/*"}),r(o.Button,{"data-testid":"add-image-button",icon:n,onClick:()=>{l.current&&l.current.click()}})]})};export{s as AddImageButton};

package/dist/molecules/RichTextEditor/MenuBar/MenuBar.js

@@ -1,10 +1,10 @@
-import{jsxs as r,jsx as e}from"react/jsx-runtime";import{TextTable as t}from"./Table/Table.js";import{TableMenuBar as o}from"./Table/TableBar.js";import{AddImageButton as i}from"./AddImageButton.js";import{MenuSection as s}from"./MenuBar.styles.js";import{MenuButton as m}from"./MenuButton.js";import{TextAlignment as a}from"./TextAlignment.js";import{TextClearFormating as d}from"./TextClearFormating.js";import{TextCode as l}from"./TextCode.js";import{TextColor as f}from"./TextColor.js";import{TextFormating as n}from"./TextFormating.js";import{TextHeaders as p}from"./TextHeaders.js";import{TextHistory as u}from"./TextHistory.js";import{TextLinks as j}from"./TextLinks.js";import{TextLists as g}from"./TextLists.js";import{colors as x}from"../../../atoms/style/colors.js";import{spacings as T}from"../../../atoms/style/spacings.js";import c from"styled-components";const b=c.div`
+import{jsxs as r,jsx as t}from"react/jsx-runtime";import{TextTable as e}from"./Table/Table.js";import{TableMenuBar as o}from"./Table/TableBar.js";import{AddImageButton as i}from"./AddImageButton.js";import{MenuSection as s}from"./MenuBar.styles.js";import{MenuButton as m}from"./MenuButton.js";import{TextAlignment as a}from"./TextAlignment.js";import{TextCode as d}from"./TextCode.js";import{TextColor as l}from"./TextColor.js";import{TextHeaders as f}from"./TextHeaders.js";import{TextHistory as n}from"./TextHistory.js";import{TextLinks as p}from"./TextLinks.js";import{TextLists as u}from"./TextLists.js";import{colors as j}from"../../../atoms/style/colors.js";import{spacings as g}from"../../../atoms/style/spacings.js";import{TextClearFormatting as x}from"./TextClearFormatting.js";import{TextFormatting as T}from"./TextFormatting.js";import c from"styled-components";const b=c.div`
   display: flex;
   flex-direction: column;
 `,B=c.div`
   display: flex;
   flex-wrap: wrap;
-  gap: ${T.small};
-  padding: ${T.small};
-  border-bottom: 1px solid ${x.ui.background__medium.rgba};
-`,y=({editor:s,features:m,onImageUpload:x})=>0===m.length?null:r(b,{children:[r(B,{children:[e(u,{editor:s,features:m}),e(n,{editor:s,features:m}),e(p,{editor:s,features:m}),e(g,{editor:s,features:m}),e(f,{editor:s,features:m}),e(l,{editor:s,features:m}),e(a,{editor:s,features:m}),e(j,{editor:s,features:m}),e(i,{editor:s,features:m,onImageUpload:x}),e(t,{editor:s,features:m}),e(d,{editor:s,features:m})]}),e(o,{editor:s})]}),C={Bar:B,Bars:b,Button:m,Section:s,AddImageButton:i},A={History:u,Formating:n,Headers:p,Lists:g,Color:f,Code:l,Links:j,Table:t,TableBar:o,Alignment:a,ClearFormating:d};export{y as AmplifyBar,C as EditorMenu,A as EditorText};
+  gap: ${g.small};
+  padding: ${g.small};
+  border-bottom: 1px solid ${j.ui.background__medium.rgba};
+`,y=({editor:s,features:m,onImageUpload:j})=>0===m.length?null:r(b,{children:[r(B,{children:[t(n,{editor:s,features:m}),t(T,{editor:s,features:m}),t(f,{editor:s,features:m}),t(u,{editor:s,features:m}),t(l,{editor:s,features:m}),t(d,{editor:s,features:m}),t(a,{editor:s,features:m}),t(p,{editor:s,features:m}),t(i,{editor:s,features:m,onImageUpload:j}),t(e,{editor:s,features:m}),t(x,{editor:s,features:m})]}),t(o,{editor:s})]}),C={Bar:B,Bars:b,Button:m,Section:s,AddImageButton:i},A={History:n,Formating:T,Headers:f,Lists:u,Color:l,Code:d,Links:p,Table:e,TableBar:o,Alignment:a,ClearFormating:x};export{y as AmplifyBar,C as EditorMenu,A as EditorText};

package/dist/molecules/RichTextEditor/MenuBar/TextAlignment.js

@@ -1 +1 @@
-import{jsxs as t,jsx as i}from"react/jsx-runtime";import{format_align_left as e,format_align_center as n,format_align_right as c}from"@equinor/eds-icons";import{RichTextEditorFeatures as o}from"../RichTextEditor.types.js";import{EditorMenu as r}from"./MenuBar.js";const s=({editor:s,features:u})=>{if(!u||u.includes(o.ALIGNMENT))return t(r.Section,{children:[i(r.Button,{active:s.isActive({textAlign:"left"}),icon:e,onClick:()=>s.chain().focus().setTextAlign("left").run()}),i(r.Button,{active:s.isActive({textAlign:"center"}),icon:n,onClick:()=>s.chain().focus().setTextAlign("center").run()}),i(r.Button,{active:s.isActive({textAlign:"right"}),icon:c,onClick:()=>s.chain().focus().setTextAlign("right").run()})]})};export{s as TextAlignment};
+import{jsxs as t,jsx as i}from"react/jsx-runtime";import{format_align_left as e,format_align_center as n,format_align_right as o}from"@equinor/eds-icons";import{RichTextEditorFeatures as c}from"../RichTextEditor.types.js";import{EditorMenu as r}from"./MenuBar.js";const s=({editor:s,features:a})=>{if(!a||a.includes(c.ALIGNMENT))return t(r.Section,{children:[i(r.Button,{active:s.isActive({textAlign:"left"}),"data-testid":"align-left-button",icon:e,onClick:()=>s.chain().focus().setTextAlign("left").run()}),i(r.Button,{active:s.isActive({textAlign:"center"}),"data-testid":"align-center-button",icon:n,onClick:()=>s.chain().focus().setTextAlign("center").run()}),i(r.Button,{active:s.isActive({textAlign:"right"}),"data-testid":"align-right-button",icon:o,onClick:()=>s.chain().focus().setTextAlign("right").run()})]})};export{s as TextAlignment};

package/dist/molecules/RichTextEditor/MenuBar/{TextClearFormating.d.ts → TextClearFormatting.d.ts}

@@ -1,3 +1,3 @@
 import { FC } from 'react';
 import { EditorPanel } from '../RichTextEditor.types';
-export declare const TextClearFormating: FC<EditorPanel>;
+export declare const TextClearFormatting: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextClearFormatting.js

@@ -0,0 +1,4 @@
+import{jsxs as o,Fragment as r,jsx as e}from"react/jsx-runtime";import{format_clear as t}from"@equinor/eds-icons";import{tokens as i}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{RichTextEditorFeatures as s}from"../RichTextEditor.types.js";import{EditorMenu as n}from"./MenuBar.js";import m from"styled-components";const{colors:d}=i,c=m.hr`
+  width: 1px;
+  background: ${d.ui.background__medium.rgba};
+`,u=({editor:i,features:m})=>{if(!m||m.includes(s.CLEAR_FORMATTING))return o(r,{children:[e(c,{}),e(n.Button,{icon:t,onClick:()=>i.chain().focus().clearNodes().unsetAllMarks().run(),"data-testid":"clear-formatting"})]})};export{u as TextClearFormatting};

package/dist/molecules/RichTextEditor/MenuBar/TextCode.js

@@ -1 +1 @@
-import{jsx as o}from"react/jsx-runtime";import{code as r}from"@equinor/eds-icons";import{RichTextEditorFeatures as t}from"../RichTextEditor.types.js";import{EditorMenu as e}from"./MenuBar.js";const i=({editor:i,features:c})=>{if(!c||c.includes(t.CODE))return o(e.Button,{active:i.isActive("codeBlock"),icon:r,onClick:()=>i.chain().focus().toggleCodeBlock().run()})};export{i as TextCode};
+import{jsx as o}from"react/jsx-runtime";import{code as t}from"@equinor/eds-icons";import{RichTextEditorFeatures as e}from"../RichTextEditor.types.js";import{EditorMenu as i}from"./MenuBar.js";const r=({editor:r,features:c})=>{if(!c||c.includes(e.CODE))return o(i.Button,{active:r.isActive("codeBlock"),icon:t,onClick:()=>r.chain().focus().toggleCodeBlock().run(),"data-testid":"code-button"})};export{r as TextCode};

package/dist/molecules/RichTextEditor/MenuBar/TextColor.js

@@ -35,11 +35,11 @@ import{jsxs as t,jsx as e}from"react/jsx-runtime";import{Icon as o}from"@equinor
   top: calc(50% + ${l.comfortable.x_small} / 2);
   transform: translate(-50%, -50%);
   pointer-events: none;
-`,m=s.span`
+`,p=s.span`
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
   bottom: 5px;
   height: 4px;
   width: 24px;
-`,p=({editor:i,features:s})=>s&&!s.includes(a.TEXT_COLOR)?null:t(d,{children:[e("input",{type:"color",onInput:t=>{i.chain().focus().setColor(t.target.value).run()},value:i.getAttributes("textStyle")?.color||n.text.static_icons__default.hex}),e(u,{children:e(o,{data:r})}),e(m,{style:{background:i.getAttributes("textStyle")?.color||n.text.static_icons__default.hex}})]});export{p as TextColor};
+`,m=({editor:i,features:s})=>s&&!s.includes(a.TEXT_COLOR)?null:t(d,{children:[e("input",{type:"color",onInput:t=>{i.chain().focus().setColor(t.target.value).run()},"data-testid":"text-color-input",value:i.getAttributes("textStyle")?.color||n.text.static_icons__default.hex}),e(u,{children:e(o,{data:r})}),e(p,{style:{background:i.getAttributes("textStyle")?.color||n.text.static_icons__default.hex}})]});export{m as TextColor};

package/dist/molecules/RichTextEditor/MenuBar/{TextFormating.d.ts → TextFormatting.d.ts}

@@ -1,3 +1,3 @@
 import { FC } from 'react';
 import { EditorPanel } from '../RichTextEditor.types';
-export declare const TextFormating: FC<EditorPanel>;
+export declare const TextFormatting: FC<EditorPanel>;

package/dist/molecules/RichTextEditor/MenuBar/TextFormatting.js

@@ -0,0 +1 @@
+import{jsxs as t,jsx as i}from"react/jsx-runtime";import{format_bold as o,format_italics as e}from"@equinor/eds-icons";import{RichTextEditorFeatures as c}from"../RichTextEditor.types.js";import{EditorMenu as n}from"./MenuBar.js";const r=({editor:r,features:s})=>{if(!s||s.includes(c.FORMATTING))return t(n.Section,{children:[i(n.Button,{active:r.isActive("bold"),"data-testid":"bold-button",icon:o,onClick:()=>r.chain().focus().toggleBold().run()}),i(n.Button,{active:r.isActive("italic"),"data-testid":"italic-button",icon:e,onClick:()=>r.chain().focus().toggleItalic().run()})]})};export{r as TextFormatting};

package/dist/molecules/RichTextEditor/MenuBar/TextHeaders.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{RichTextEditorFeatures as t}from"../RichTextEditor.types.js";import{EditorMenu as o}from"./MenuBar.js";import{amplify_h2 as n,amplify_h3 as r}from"../../../atoms/icons/wysiwyg.js";const c=({editor:c,features:s})=>{if(!s||s.includes(t.HEADERS))return e(o.Section,{children:[i(o.Button,{active:c.isActive("heading",{level:2}),icon:n,onClick:()=>c.chain().focus().toggleHeading({level:2}).run()}),i(o.Button,{active:c.isActive("heading",{level:3}),icon:r,onClick:()=>c.chain().focus().toggleHeading({level:3}).run()})]})};export{c as TextHeaders};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{RichTextEditorFeatures as i}from"../RichTextEditor.types.js";import{EditorMenu as o}from"./MenuBar.js";import{amplify_h2 as n,amplify_h3 as r}from"../../../atoms/icons/wysiwyg.js";const c=({editor:c,features:s})=>{if(!s||s.includes(i.HEADERS))return t(o.Section,{children:[e(o.Button,{"data-testid":"h2-button",active:c.isActive("heading",{level:2}),icon:n,onClick:()=>c.chain().focus().toggleHeading({level:2}).run()}),e(o.Button,{"data-testid":"h3-button",active:c.isActive("heading",{level:3}),icon:r,onClick:()=>c.chain().focus().toggleHeading({level:3}).run()})]})};export{c as TextHeaders};

package/dist/molecules/RichTextEditor/MenuBar/TextHistory.js

@@ -1 +1 @@
-import{jsxs as o,jsx as n}from"react/jsx-runtime";import{undo as r,redo as i}from"@equinor/eds-icons";import{RichTextEditorFeatures as e}from"../RichTextEditor.types.js";import{EditorMenu as t}from"./MenuBar.js";const c=({editor:c,features:u})=>{if(!u||u.includes(e.HISTORY))return o(t.Section,{children:[n(t.Button,{icon:r,onClick:()=>c.chain().focus().undo().run(),disabled:!c.can().undo()}),n(t.Button,{icon:i,onClick:()=>c.chain().focus().redo().run(),disabled:!c.can().redo()})]})};export{c as TextHistory};
+import{jsxs as o,jsx as t}from"react/jsx-runtime";import{undo as n,redo as i}from"@equinor/eds-icons";import{RichTextEditorFeatures as r}from"../RichTextEditor.types.js";import{EditorMenu as e}from"./MenuBar.js";const d=({editor:d,features:c})=>{if(!c||c.includes(r.HISTORY))return o(e.Section,{children:[t(e.Button,{icon:n,onClick:()=>d.chain().focus().undo().run(),"data-testid":"undo-button",disabled:!d.can().undo()}),t(e.Button,{icon:i,onClick:()=>d.chain().focus().redo().run(),"data-testid":"redo-button",disabled:!d.can().redo()})]})};export{d as TextHistory};

package/dist/molecules/RichTextEditor/MenuBar/TextLinks.js

@@ -1,6 +1,6 @@
-import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{useState as n,useRef as i}from"react";import{Popover as o,Icon as c,Button as s}from"@equinor/eds-core-react";import{link as l,link_off as u}from"@equinor/eds-icons";import{tokens as a}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{RichTextEditorFeatures as d}from"../RichTextEditor.types.js";import{EditorMenu as m}from"./MenuBar.js";import{isValidUrl as f}from"../../../atoms/utils/url.js";import{TextField as p}from"../../TextField/TextField.js";import h from"styled-components";const{spacings:k}=a,g=h.div`
+import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{useState as r,useRef as i}from"react";import{Popover as o,Icon as c,Button as s}from"@equinor/eds-core-react";import{link as l,link_off as u}from"@equinor/eds-icons";import{tokens as a}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{RichTextEditorFeatures as d}from"../RichTextEditor.types.js";import{EditorMenu as m}from"./MenuBar.js";import{isValidUrl as f}from"../../../atoms/utils/url.js";import{TextField as p}from"../../TextField/TextField.js";import h from"styled-components";const{spacings:k}=a,g=h.div`
   display: flex;
   gap: ${k.comfortable.medium};
   padding: ${k.comfortable.small};
   width: 15rem;
-`,v=({editor:a,features:h})=>{const[k,v]=n(!1),x=i(null),b=i(""),[j,y]=n(!1),C=()=>{v(!1),b.current="",a.chain().focus().unsetHighlight().run()},q=()=>{f(b.current)?(b.current.includes("http")||(b.current=`https://${b.current}`),a.chain().focus().extendMarkRange("link").setLink({href:b.current}).run(),C(),j&&y(!1)):y(!0)};if(!h||h.includes(d.LINKS))return e(t,{children:[e(m.Section,{children:[r(m.Button,{active:k,ref:x,icon:l,onClick:()=>{v((e=>!e)),a.chain().focus().setHighlight({color:"#accef7"}).run()},disabled:a.state.selection.empty,"data-testid":"link-button"}),r(m.Button,{icon:u,onClick:()=>a?.chain().focus().unsetLink().run(),disabled:!a.isActive("link")})]}),k&&r(o,{open:!0,anchorEl:x.current,onClose:C,children:e(g,{children:[r(p,{inputRef:e=>{e?.focus()},id:"link",placeholder:"Insert link",autoComplete:"off",inputIcon:r(c,{data:l}),onChange:e=>{b.current=e.target.value},onKeyDown:e=>{"Enter"===e.key&&q()},variant:j?"error":void 0}),r(s,{variant:"outlined",onClick:q,children:"Save"})]})})]})};export{v as TextLinks};
+`,v=({editor:a,features:h})=>{const[k,v]=r(!1),x=i(null),b=i(""),[j,y]=r(!1),C=()=>{v(!1),b.current="",a.chain().focus().unsetHighlight().run()},q=()=>{f(b.current)?(b.current.includes("http")||(b.current=`https://${b.current}`),a.chain().focus().extendMarkRange("link").setLink({href:b.current}).run(),C(),j&&y(!1)):y(!0)};if(!h||h.includes(d.LINKS))return e(t,{children:[e(m.Section,{children:[n(m.Button,{active:k,ref:x,icon:l,onClick:()=>{v((e=>!e)),a.chain().focus().setHighlight({color:"#accef7"}).run()},disabled:a.state.selection.empty,"data-testid":"link-button"}),n(m.Button,{icon:u,onClick:()=>a?.chain().focus().unsetLink().run(),disabled:!a.isActive("link"),"data-testid":"unsetlink-button"})]}),k&&n(o,{open:!0,anchorEl:x.current,onClose:C,children:e(g,{children:[n(p,{inputRef:e=>{e?.focus()},id:"link",placeholder:"Insert link",autoComplete:"off",inputIcon:n(c,{data:l}),onChange:e=>{b.current=e.target.value},onKeyDown:e=>{"Enter"===e.key&&q()},variant:j?"error":void 0}),n(s,{variant:"outlined",onClick:q,children:"Save"})]})})]})};export{v as TextLinks};

package/dist/molecules/RichTextEditor/MenuBar/TextLists.js

@@ -1 +1 @@
-import{jsxs as t,jsx as i}from"react/jsx-runtime";import{format_list_bulleted as e,format_list_numbered as o}from"@equinor/eds-icons";import{RichTextEditorFeatures as r}from"../RichTextEditor.types.js";import{EditorMenu as c}from"./MenuBar.js";const n=({editor:n,features:s})=>{if(!s||s.includes(r.LISTS))return t(c.Section,{children:[i(c.Button,{active:n.isActive("bulletList"),icon:e,onClick:()=>n.chain().focus().toggleBulletList().run()}),i(c.Button,{active:n.isActive("orderedList"),icon:o,onClick:()=>n.chain().focus().toggleOrderedList().run()})]})};export{n as TextLists};
+import{jsxs as t,jsx as i}from"react/jsx-runtime";import{format_list_bulleted as e,format_list_numbered as o}from"@equinor/eds-icons";import{RichTextEditorFeatures as r}from"../RichTextEditor.types.js";import{EditorMenu as n}from"./MenuBar.js";const s=({editor:s,features:c})=>{if(!c||c.includes(r.LISTS))return t(n.Section,{children:[i(n.Button,{active:s.isActive("bulletList"),icon:e,onClick:()=>s.chain().focus().toggleBulletList().run(),"data-testid":"bullet-list-button"}),i(n.Button,{active:s.isActive("orderedList"),icon:o,onClick:()=>s.chain().focus().toggleOrderedList().run(),"data-testid":"ordered-list-button"})]})};export{s as TextLists};

package/dist/molecules/Select/GroupedSelectMenu.js

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{Menu as i}from"@equinor/eds-core-react";import{NoItemsFoundText as m}from"./Select.styles.js";import{getCumulativeArrayFromNumberedArray as l}from"./Select.utils.js";import{SelectMenuItem as r}from"./SelectMenuItem.js";const n=n=>{const{onItemSelect:o,onItemKeyDown:s,itemRefs:c,groups:a,search:f,onSearchFilter:u}=n,p=t((()=>{if(""===f)return a;const e=new RegExp(f.trim(),"i");return a.map((t=>({title:t.title,items:t.items.filter((t=>void 0!==u?u(f,t):t.label.match(e)))}))).filter((e=>e.items.length>0))}),[a,u,f]),d=t((()=>{const e=p.map((e=>e.items.length));return l(e)}),[p]);return 0===p.length?e(m,{children:"No items found"}):"values"in n?p.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,l)=>e(r,{index:l+d[m],childOffset:0,item:i,itemRefs:c,onItemKeyDown:s,onItemSelect:o,values:n.values},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`))):p.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,l)=>e(r,{index:l+d[m],childOffset:0,item:i,itemRefs:c,onItemKeyDown:s,onItemSelect:o,value:n.value},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`)))};export{n as GroupedSelectMenu};
+import{jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{Menu as i}from"@equinor/eds-core-react";import{NoItemsFoundText as m}from"./Select.styles.js";import{getCumulativeArrayFromNumberedArray as n}from"./Select.utils.js";import{SelectMenuItem as o}from"./SelectMenuItem.js";const l=l=>{const{onItemSelect:r,onItemKeyDown:s,itemRefs:c,groups:u,search:a,onSearchFilter:p,CustomMenuItemComponent:f}=l,d=t((()=>{if(""===a)return u;const e=new RegExp(a.trim(),"i");return u.map((t=>({title:t.title,items:t.items.filter((t=>void 0!==p?p(a,t):t.label.match(e)))}))).filter((e=>e.items.length>0))}),[u,p,a]),h=t((()=>{const e=d.map((e=>e.items.length));return n(e)}),[d]);return 0===d.length?e(m,{children:"No items found"}):"values"in l?d.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,n)=>e(o,{index:n+h[m],childOffset:0,item:i,itemRefs:c,onItemKeyDown:s,onItemSelect:r,values:l.values,CustomMenuItemComponent:f},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`))):d.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,n)=>e(o,{index:n+h[m],childOffset:0,item:i,itemRefs:c,onItemKeyDown:s,onItemSelect:r,value:l.value,CustomMenuItemComponent:f},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`)))};export{l as GroupedSelectMenu};

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

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

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

@@ -7,4 +7,5 @@ interface LineProps {
 }
 export declare const Line: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, LineProps>> & string;
 export declare const ActiveLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("framer-motion").HTMLMotionProps<"span">, "ref"> & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("framer-motion").ForwardRefComponent<HTMLSpanElement, import("framer-motion").HTMLMotionProps<"span">>, keyof import("react").Component<any, {}, any>>;
+export declare const Count: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
 export {};

package/dist/molecules/Tabs/Tab.styles.js

@@ -1,10 +1,10 @@
-import{colors as t}from"../../atoms/style/colors.js";import{spacings as r}from"../../atoms/style/spacings.js";import{motion as e}from"framer-motion";import i from"styled-components";const a=i.button`
+import{shape as r}from"../../atoms/style/index.js";import{motion as t}from"framer-motion";import e from"styled-components";import{spacings as i}from"../../atoms/style/spacings.js";import{colors as a}from"../../atoms/style/colors.js";const o=e.button`
   position: relative;
-  padding: ${r.medium};
+  padding: ${i.medium};
   display: flex;
   align-items: center;
-  justify-content: ${({$centered:t})=>t?"center":"flex-start"};
-  gap: ${r.small};
+  justify-content: ${({$centered:r})=>r?"center":"flex-start"};
+  gap: ${i.small};
   width: auto;
   flex-grow: 1;
   height: 48px;
@@ -12,7 +12,7 @@ import{colors as t}from"../../atoms/style/colors.js";import{spacings as r}from".
   cursor: pointer;
 
   > svg {
-    fill: ${t.text.static_icons__tertiary.rgba};
+    fill: ${a.text.static_icons__tertiary.rgba};
   }
 
   > label {
@@ -20,33 +20,33 @@ import{colors as t}from"../../atoms/style/colors.js";import{spacings as r}from".
     pointer-events: none;
     display: block;
     height: 16px;
-    color: ${t.text.static_icons__tertiary.rgba};
+    color: ${a.text.static_icons__tertiary.rgba};
   }
 
   &[aria-selected='true'] {
     > svg {
-      fill: ${t.interactive.primary__resting.rgba};
+      fill: ${a.interactive.primary__resting.rgba};
     }
 
     > label {
-      color: ${t.interactive.primary__resting.rgba};
+      color: ${a.interactive.primary__resting.rgba};
     }
   }
 
   &:hover:not(:disabled) {
-    background: ${t.interactive.primary__hover_alt.rgba};
+    background: ${a.interactive.primary__hover_alt.rgba};
 
     &[aria-selected='true'] {
       > svg {
-        fill: ${t.interactive.primary__hover.rgba};
+        fill: ${a.interactive.primary__hover.rgba};
       }
 
       > label {
-        color: ${t.interactive.primary__hover.rgba};
+        color: ${a.interactive.primary__hover.rgba};
       }
 
-      > span:last-child {
-        background: ${t.interactive.primary__hover.rgba};
+      > span:not(.count):last-child {
+        background: ${a.interactive.primary__hover.rgba};
       }
     }
   }
@@ -55,28 +55,36 @@ import{colors as t}from"../../atoms/style/colors.js";import{spacings as r}from".
     cursor: not-allowed;
 
     > svg {
-      fill: ${t.interactive.disabled__fill.rgba};
+      fill: ${a.interactive.disabled__fill.rgba};
     }
 
     > label {
-      color: ${t.interactive.disabled__text.rgba};
+      color: ${a.interactive.disabled__text.rgba};
     }
 
     > span.static-line {
-      background: ${t.ui.background__medium.rgba};
+      background: ${a.ui.background__medium.rgba};
     }
   }
-`,o=i.span`
+`,s=e.span`
   position: absolute;
   height: 2px;
   width: 100%;
   bottom: 0;
   left: 0;
-  background: ${({$active:r})=>r?t.interactive.primary__resting.rgba:t.ui.background__heavy.rgba};
-`,l=i(e.span)`
+  background: ${({$active:r})=>r?a.interactive.primary__resting.rgba:a.ui.background__heavy.rgba};
+`,n=e(t.span)`
   position: absolute;
   height: 2px;
   width: 100%;
   bottom: 0;
-  background: ${t.interactive.primary__resting.rgba};
-`;export{l as ActiveLine,a as Button,o as Line};
+  background: ${a.interactive.primary__resting.rgba};
+`,l=e.span`
+  display: flex;
+  padding: ${i.x_small} ${i.small};
+  background: ${a.interactive.primary__resting.rgba};
+  border-radius: ${r.rounded.borderRadius};
+  > span {
+    color: ${a.text.static_icons__primary_white.rgba};
+  }
+`;export{n as ActiveLine,o as Button,l as Count,s as Line};

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

@@ -2,6 +2,7 @@ import { IconData } from '@equinor/eds-icons';
 export interface Tab<T> {
     value: T;
     label: string;
+    count?: number;
     leadingIcon?: IconData;
     disabled?: boolean;
 }

package/dist/organisms/TopBar/Account/ImpersonateMenu/hooks/useAllAppRoles.js

@@ -1 +1 @@
-import{AmplifyApplicationService as e}from"@equinor/subsurface-app-management";import{useQuery as t}from"@tanstack/react-query";import{AVAILABLE_ROLES as r}from"../Impersonate.constants.js";import{environment as m}from"../../../../../atoms/utils/auth_environment.js";function n(n=!0){return t({queryKey:[r],queryFn:()=>e.getAllAppRoles(m.getApiClientId(import.meta.env.VITE_API_CLIENT_ID)),enabled:n,staleTime:1/0,gcTime:1/0})}export{n as useAllAppRoles};
+import{AmplifyApplicationService as e}from"@equinor/subsurface-app-management";import{useQuery as t}from"@tanstack/react-query";import{AVAILABLE_ROLES as r}from"../Impersonate.constants.js";import{environment as m}from"../../../../../atoms/utils/auth_environment.js";function n(n=!0){return t({queryKey:[r],queryFn:()=>e.getAllAppRoles(m.getApiClientId(import.meta.env.VITE_API_CLIENT_ID)),enabled:n&&!!m.getApiClientId(import.meta.env.VITE_API_CLIENT_ID),staleTime:1/0,gcTime:1/0})}export{n as useAllAppRoles};

package/package.json

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

package/dist/molecules/RichTextEditor/MenuBar/TextClearFormating.js

@@ -1,4 +0,0 @@
-import{jsxs as o,Fragment as r,jsx as e}from"react/jsx-runtime";import{format_clear as i}from"@equinor/eds-icons";import{tokens as t}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{RichTextEditorFeatures as s}from"../RichTextEditor.types.js";import{EditorMenu as n}from"./MenuBar.js";import m from"styled-components";const{colors:d}=t,u=m.hr`
-  width: 1px;
-  background: ${d.ui.background__medium.rgba};
-`,c=({editor:t,features:m})=>{if(!m||m.includes(s.CLEAR_FORMATTING))return o(r,{children:[e(u,{}),e(n.Button,{icon:i,onClick:()=>t.chain().focus().clearNodes().unsetAllMarks().run()})]})};export{c as TextClearFormating};

package/dist/molecules/RichTextEditor/MenuBar/TextFormating.js

@@ -1 +0,0 @@
-import{jsxs as i,jsx as o}from"react/jsx-runtime";import{format_bold as t,format_italics as c}from"@equinor/eds-icons";import{RichTextEditorFeatures as e}from"../RichTextEditor.types.js";import{EditorMenu as r}from"./MenuBar.js";const n=({editor:n,features:s})=>{if(!s||s.includes(e.FORMATTING))return i(r.Section,{children:[o(r.Button,{active:n.isActive("bold"),icon:t,onClick:()=>n.chain().focus().toggleBold().run()}),o(r.Button,{active:n.isActive("italic"),icon:c,onClick:()=>n.chain().focus().toggleItalic().run()})]})};export{n as TextFormating};