@equinor/amplify-component-lib 10.4.0 → 10.5.1

package/dist/molecules/EquinorLogo/EquinorLogo.d.ts

@@ -1,11 +1,11 @@
 import { SizeIconProps } from "../../atoms/types/Icon.js";
-import * as react13 from "react";
+import * as react11 from "react";
 
 //#region src/molecules/EquinorLogo/EquinorLogo.d.ts
 interface EquinorLogoProps extends Partial<SizeIconProps> {
   large?: boolean;
   color?: 'red' | 'white' | 'black';
 }
-declare const EquinorLogo: react13.ForwardRefExoticComponent<EquinorLogoProps & react13.RefAttributes<SVGSVGElement>>;
+declare const EquinorLogo: react11.ForwardRefExoticComponent<EquinorLogoProps & react11.RefAttributes<SVGSVGElement>>;
 //#endregion
 export { EquinorLogo, EquinorLogoProps };

package/dist/molecules/InformationalNotice/InformationalNotice.d.ts

@@ -0,0 +1,11 @@
+import { FC } from "react";
+
+//#region src/molecules/InformationalNotice/InformationalNotice.d.ts
+interface InformationalNoticeProps {
+  color?: 'grey' | 'white';
+  spacing?: 'compact' | 'comfortable';
+  children: string;
+}
+declare const InformationalNotice: FC<InformationalNoticeProps>;
+//#endregion
+export { InformationalNotice, InformationalNoticeProps };

package/dist/molecules/InformationalNotice/InformationalNotice.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";import{Container as t}from"./InformationalNotice.styles.js";import{getIconSize as n}from"./InformationalNotice.utils.js";import{Icon as r,Typography as i}from"@equinor/eds-core-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{info_circle as s}from"@equinor/eds-icons";const c=({children:c,color:l=`grey`,spacing:u=`comfortable`})=>o(t,{$spacing:u,$color:l,children:[a(r,{data:s,color:e.text.static_icons__default.rgba,size:n(u)}),a(i,{variant:`body_long`,children:c})]});export{c as InformationalNotice};

package/dist/molecules/InformationalNotice/InformationalNotice.styles.js

@@ -0,0 +1,9 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import n,{css as r}from"styled-components";const i={compact:{gap:t.medium_small,padding:t.small},comfortable:{gap:t.medium,padding:t.medium_small}},a=n.div`
+  display: grid;
+  grid-template-columns: auto 1fr;
+  background: ${({$color:t})=>t===`white`?e.ui.background__default.rgba:e.ui.background__light.rgba};
+  ${({$spacing:e})=>{let{gap:t,padding:n}=i[e];return r`
+      padding: ${n};
+      gap: ${t};
+    `}}
+`;export{a as Container};

package/dist/molecules/InformationalNotice/InformationalNotice.utils.js

@@ -0,0 +1 @@
+function e(e){switch(e){case`compact`:return 18;case`comfortable`:default:return 24}}export{e as getIconSize};

package/dist/molecules/ListItem/ListItem.d.ts

@@ -1,4 +1,4 @@
-import * as react90 from "react";
+import * as react100 from "react";
 import { FocusEventHandler, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
 import { IconData } from "@equinor/eds-icons";
 
@@ -15,6 +15,6 @@ interface ListItemProps extends HTMLAttributes<HTMLButtonElement> {
   isChild?: boolean;
   borderBottom?: boolean;
 }
-declare const ListItem: react90.ForwardRefExoticComponent<ListItemProps & react90.RefAttributes<HTMLButtonElement>>;
+declare const ListItem: react100.ForwardRefExoticComponent<ListItemProps & react100.RefAttributes<HTMLButtonElement>>;
 //#endregion
 export { ListItem, ListItemProps };

package/dist/molecules/ListItem/ListItem.js

@@ -29,4 +29,4 @@ import{animation as e}from"../../atoms/style/animation.js";import{colors as t}fr
   margin-left: auto;
   display: flex;
   align-items: center;
-`,f=i(({label:e,onClick:t,onFocus:n,onBlur:i,className:o,disabled:s=!1,leadingContent:f,trailingContent:p,isChild:m=!1,selected:h=!1,borderBottom:g=!1},_)=>l(u,{ref:_,className:o,$isChild:m,$selected:h,$borderBottom:g,disabled:s,onClick:t,onFocus:n,onBlur:i,children:[f&&r(f),c(`section`,{children:c(a,{variant:`button`,group:`navigation`,children:e})}),p&&c(d,{children:r(p)})]}));f.displayName=`ListItem`;export{f as ListItem};
+`,f=i(({label:e,onClick:t,onFocus:n,onBlur:i,className:o,disabled:s=!1,leadingContent:f,trailingContent:p,isChild:m=!1,selected:h=!1,borderBottom:g=!1},_)=>l(u,{ref:_,className:o,$isChild:m,$selected:h,$borderBottom:g,disabled:s,onClick:t,onFocus:n,onBlur:i,children:[f&&r(f),c(`section`,{children:c(a,{variant:`menu_title`,group:`navigation`,children:e})}),p&&c(d,{children:r(p)})]}));f.displayName=`ListItem`;export{f as ListItem};

package/dist/molecules/OptionalTooltip/OptionalTooltip.d.ts

@@ -1,4 +1,4 @@
-import * as react25 from "react";
+import * as react17 from "react";
 import { TooltipProps } from "@equinor/eds-core-react";
 import * as _floating_ui_utils0 from "@floating-ui/utils";
 
@@ -6,14 +6,14 @@ import * as _floating_ui_utils0 from "@floating-ui/utils";
 type OptionalTooltipProps = {
   textTransform?: string;
 } & TooltipProps;
-declare const OptionalTooltip: react25.ForwardRefExoticComponent<{
+declare const OptionalTooltip: react17.ForwardRefExoticComponent<{
   textTransform?: string;
 } & {
   placement?: _floating_ui_utils0.Placement;
-  title?: react25.ReactNode;
+  title?: react17.ReactNode;
   children: React.ReactElement & React.RefAttributes<HTMLElement>;
   enterDelay?: number;
   portalContainer?: HTMLElement;
-} & Omit<react25.HTMLAttributes<HTMLDivElement>, "title"> & react25.RefAttributes<HTMLDivElement>>;
+} & Omit<react17.HTMLAttributes<HTMLDivElement>, "title"> & react17.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { OptionalTooltip, OptionalTooltipProps };

package/dist/molecules/ProfileAvatar/ProfileAvatar.d.ts

@@ -1,4 +1,4 @@
-import * as react29 from "react";
+import * as react21 from "react";
 
 //#region src/molecules/ProfileAvatar/ProfileAvatar.d.ts
 interface ProfileAvatarProps {
@@ -7,6 +7,6 @@ interface ProfileAvatarProps {
   size?: 'small' | 'small-medium' | 'medium' | 'large' | 'x-large' | number;
   disabled?: boolean;
 }
-declare const ProfileAvatar: react29.ForwardRefExoticComponent<ProfileAvatarProps & react29.RefAttributes<HTMLDivElement>>;
+declare const ProfileAvatar: react21.ForwardRefExoticComponent<ProfileAvatarProps & react21.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ProfileAvatar, ProfileAvatarProps };

package/dist/molecules/RichTextEditor/index.d.ts

@@ -2,16 +2,16 @@ import { EditorStylingProps, RichTextContentProps } from "./RichTextEditor.style
 import { EditorProviderProps } from "./EditorProvider.js";
 import { MenuBarProps } from "./MenuBar/MenuBar.js";
 import { RichTextEditor } from "./RichTextEditor.js";
-import * as react17 from "react";
+import * as react23 from "react";
 import * as _tiptap_react0 from "@tiptap/react";
 import * as styled_components_dist_types0 from "styled-components/dist/types";
 
 //#region src/molecules/RichTextEditor/index.d.ts
 declare const RichText: {
-  Styling: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<react17.DetailedHTMLProps<react17.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, EditorStylingProps>> & string;
-  Provider: react17.FC<EditorProviderProps>;
-  Content: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<Omit<_tiptap_react0.EditorContentProps, "ref"> & react17.RefAttributes<HTMLDivElement>, RichTextContentProps>> & string & Omit<react17.NamedExoticComponent<Omit<_tiptap_react0.EditorContentProps, "ref"> & react17.RefAttributes<HTMLDivElement>>, keyof react17.Component<any, {}, any>>;
-  Bar: react17.FC<MenuBarProps>;
+  Styling: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<react23.DetailedHTMLProps<react23.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, EditorStylingProps>> & string;
+  Provider: react23.FC<EditorProviderProps>;
+  Content: styled_components_dist_types0.IStyledComponentBase<"web", styled_components_dist_types0.Substitute<Omit<_tiptap_react0.EditorContentProps, "ref"> & react23.RefAttributes<HTMLDivElement>, RichTextContentProps>> & string & Omit<react23.NamedExoticComponent<Omit<_tiptap_react0.EditorContentProps, "ref"> & react23.RefAttributes<HTMLDivElement>>, keyof react23.Component<any, {}, any>>;
+  Bar: react23.FC<MenuBarProps>;
 };
 //#endregion
 export { RichText };

package/dist/molecules/Select/AddTagItem.js

@@ -1 +1 @@
-import{colors as e}from"../../atoms/style/colors.js";import{MenuItemWrapper as t,StyledMenuItem as n}from"./Select.styles.js";import{Icon as r}from"@equinor/eds-core-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";import{add_box as o}from"@equinor/eds-icons";const s=({itemRefs:s,onItemKeyDown:c,index:l,onAddItem:u,addItemSingularWord:d,children:f})=>i(t,{children:a(n,{index:l,ref:e=>{s.current[l]=e},onClick:u,onKeyDownCapture:e=>{e.preventDefault(),e.key===`Enter`?u():c(e)},children:[i(r,{data:o,color:e.interactive.primary__resting.rgba}),a(`span`,{children:[`Add "`,f,`" as new `,d]})]})});export{s as AddTagItem};
+import{colors as e}from"../../atoms/style/colors.js";import{MenuItemWrapper as t,PersistentListItem as n,StyledMenuItem as r}from"./Select.styles.js";import{useMemo as i}from"react";import{Icon as a,Typography as o}from"@equinor/eds-core-react";import{Fragment as s,jsx as c,jsxs as l}from"react/jsx-runtime";import{add_box as u}from"@equinor/eds-icons";const d=({itemRefs:d,onItemKeyDown:f,index:p,onAddItem:m,addItemSingularWord:h,mode:g,children:_})=>{let v=e=>{e.preventDefault(),e.key===`Enter`?m():f(e)},y=i(()=>l(s,{children:[c(a,{data:u,color:e.interactive.primary__resting.rgba}),c(`span`,{children:l(o,{group:`navigation`,variant:`menu_title`,children:[`Add "`,_,`" as new `,h]})})]}),[h,_]);return g===`persistent`?c(t,{children:c(n,{ref:e=>{d.current[p]=e},onClick:m,onKeyDownCapture:v,children:y})}):c(t,{children:c(r,{index:p,ref:e=>{d.current[p]=e},onClick:m,onKeyDownCapture:v,children:y})})};export{d as AddTagItem};

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

@@ -2,8 +2,7 @@ import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectComm
 import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/molecules/Select/ComboBox/ComboBox.d.ts
-type ListComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & MultiSelectCommon<T> & ListSelectProps<T>;
-type GroupedComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & MultiSelectCommon<T> & GroupedSelectProps<T>;
+type ComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & MultiSelectCommon<T> & (ListSelectProps<T> | GroupedSelectProps<T>);
 /**
  * @param clearable - If users should be able to clear the input, defaults to true
  * @param loading - Show loader, defaults to false
@@ -18,6 +17,6 @@ type GroupedComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T>
  * @param showSelectedAsText - If values should be shown as "5/10 Selected", defaults to false
  * @param customMenuItemComponent - Custom component to use for rendering menu item, defaults to a checkbox with label
  */
-declare function ComboBox<T extends SelectOptionRequired>(props: ListComboBoxProps<T> | GroupedComboBoxProps<T>): react_jsx_runtime1.JSX.Element;
+declare function ComboBox<T extends SelectOptionRequired>(props: ComboBoxProps<T>): react_jsx_runtime1.JSX.Element;
 //#endregion
-export { ComboBox, GroupedComboBoxProps, ListComboBoxProps };
+export { ComboBox, ComboBoxProps };

package/dist/molecules/Select/DynamicMenuItem.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";import{PersistentListItem as t,StyledMenuItem as n}from"./Select.styles.js";import{getParentIcon as r,getParentState as i}from"./SelectMenuItem.utils.js";import{Icon as a,Typography as o}from"../index.js";import{useMemo as s}from"react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";import{checkbox as d,checkbox_outline as f}from"@equinor/eds-icons";const p=({menuItemProps:p,isSelected:m,handleOnParentKeyDown:h,children:g})=>{let{index:_,depth:v=0,item:y,itemRefs:b,onItemKeyDown:x,onItemSelect:S,CustomMenuItemComponent:C,mode:w}=p,T=m?d:f,E=m?`selected`:`none`;y.children&&y.children.length>0&&`values`in p&&(T=r(y,p.values),E=i(y,p.values));let D=e=>{e.preventDefault(),S(y)},O=e=>{h===void 0?x(e):h(e)},k=s(()=>g||(C?l(C,{item:y,selectedState:E}):u(c,{children:[`values`in p&&l(a,{color:e.interactive.primary__resting.rgba,data:T}),l(`span`,{children:l(o,{group:`navigation`,variant:`menu_title`,children:y.label})})]})),[C,T,g,y,p,E]);return w===`persistent`?l(t,{ref:e=>{b.current[_]=e},onKeyDownCapture:O,onClick:D,children:k}):l(n,{$depth:v,$selected:`value`in p?m:void 0,$paddedLeft:p.parentHasNestedItems&&`values`in p?p.parentHasNestedItems:void 0,ref:e=>{b.current[_]=e},index:_,closeMenuOnClick:`value`in p,onKeyDownCapture:O,onClick:D,children:k})};export{p as DynamicMenuItem};

package/dist/molecules/Select/GroupedSelectMenu.js

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

package/dist/molecules/Select/GroupedSelectPersistent.js

@@ -0,0 +1 @@
+import{useGroupedSelectItems as e}from"./Select.hooks.js";import{GroupTitle as t,NoItemsFoundText as n,PersistentGroupsWrapper as r}from"./Select.styles.js";import{SelectMenuItem as i}from"./SelectMenuItem.js";import{Divider as a}from"@equinor/eds-core-react";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=c=>{let{onItemSelect:l,onItemKeyDown:u,itemRefs:d,CustomMenuItemComponent:f,mode:p}=c,{filteredGroups:m,filteredGroupSum:h}=e(c);if(m.length===0)return o(n,{children:`No items found`});if(`value`in c)throw Error(`You cannot use SingleSelect with persistent mode`);return o(r,{children:m.map((e,n,r)=>s(`div`,{children:[o(t,{group:`navigation`,variant:`label`,children:e.title}),e.items.map((t,r)=>o(i,{index:r+h[n],childOffset:0,item:t,itemRefs:d,onItemKeyDown:u,onItemSelect:l,values:c.values,mode:p,CustomMenuItemComponent:f},`${e.title}-${n}-item-${t.value}`)),n<r.length-1&&o(a,{})]},`${e.title}-${n}`))})};export{c as GroupedSelectPersistent};

package/dist/molecules/Select/ListSelectMenu.js

@@ -1 +1 @@
-import{capitalize as e}from"../../atoms/utils/string.js";import{flattenOptions as t,getChildOffset as n}from"./Select.utils.js";import{NoItemsFoundText as r,NoTagFoundText as i}from"./Select.styles.js";import{SelectMenuItem as a}from"./SelectMenuItem.js";import{AddTagItem as o}from"./AddTagItem.js";import{useMemo as s}from"react";import{Menu as c}from"@equinor/eds-core-react";import{Fragment as l,jsx as u,jsxs as d}from"react/jsx-runtime";const f=f=>{let{search:p,items:m,itemRefs:h,onItemKeyDown:g,onSearchFilter:_}=f,v=s(()=>{if(p===``)return m;let e=new RegExp(p.trim(),`i`);return t(m).filter(t=>_===void 0?t.label.match(e):_(p,t))},[m,_,p]);if(v.length===0&&(!f.onAddItem||p===``))return u(r,{children:`No items found`});let y=v.some(e=>e.children&&e.children.length>0),b=v.map((e,t)=>({childOffset:n(v,t),index:t,item:e,itemValue:e.value,parentHasNestedItems:y,...f}));if(`onAddItem`in f&&f.onAddItem&&p!==``&&(v.length===1&&v.at(0)?.label.toLowerCase()!==p.trim().toLowerCase()||v.length!==1)){let t=f.itemSingularWord?f.itemSingularWord:`tag`;return d(l,{children:[u(c.Section,{title:`Add ${t}`,index:0,children:u(o,{index:0,itemRefs:h,onItemKeyDown:g,onAddItem:f.onAddItem,addItemSingularWord:t,children:p})}),u(c.Section,{title:`${e(t)} search results`,index:1,children:b.length>0?b.map((e,t)=>u(a,{...e,index:t+1},`menu-item-${t}-${e.item.value}`)):d(i,{children:[`No `,t,` for "`,p,`" found.`]})})]})}return b.map((e,t)=>u(a,{...e,index:t},`menu-item-${t}-${e.item.value}`))};export{f as ListSelectMenu};
+import{capitalize as e}from"../../atoms/utils/string.js";import{getChildOffset as t}from"./Select.utils.js";import{useListSelectItems as n}from"./Select.hooks.js";import{NoItemsFoundText as r,NoTagFoundText as i}from"./Select.styles.js";import{SelectMenuItem as a}from"./SelectMenuItem.js";import{AddTagItem as o}from"./AddTagItem.js";import{Menu as s}from"@equinor/eds-core-react";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=d=>{let{search:f,itemRefs:p,onItemKeyDown:m,mode:h}=d,{filteredItems:g}=n(d);if(g.length===0&&(!d.onAddItem||f===``))return l(r,{children:`No items found`});let _=g.some(e=>e.children&&e.children.length>0),v=g.map((e,n)=>({childOffset:t(g,n),index:n,item:e,itemValue:e.value,parentHasNestedItems:_,mode:h,...d}));if(`onAddItem`in d&&d.onAddItem&&f!==``&&(g.length===1&&g.at(0)?.label.toLowerCase()!==f.trim().toLowerCase()||g.length!==1)){let t=d.itemSingularWord?d.itemSingularWord:`tag`;return u(c,{children:[l(s.Section,{title:`Add ${t}`,index:0,children:l(o,{index:0,itemRefs:p,onItemKeyDown:m,onAddItem:d.onAddItem,addItemSingularWord:t,children:f})}),l(s.Section,{title:`${e(t)} search results`,index:1,children:v.length>0?v.map((e,t)=>l(a,{...e,index:t+1},`menu-item-${t}-${e.item.value}`)):u(i,{children:[`No `,t,` for "`,f,`" found.`]})})]})}return v.map((e,t)=>l(a,{...e,index:t},`menu-item-${t}-${e.item.value}`))};export{d as ListSelectMenu};

package/dist/molecules/Select/ListSelectPersistent.js

@@ -0,0 +1 @@
+import{capitalize as e}from"../../atoms/utils/string.js";import{getChildOffset as t}from"./Select.utils.js";import{useListSelectItems as n}from"./Select.hooks.js";import{GroupTitle as r,NoItemsFoundText as i,NoTagFoundText as a}from"./Select.styles.js";import{SelectMenuItem as o}from"./SelectMenuItem.js";import{AddTagItem as s}from"./AddTagItem.js";import{Fragment as c,jsx as l,jsxs as u}from"react/jsx-runtime";const d=d=>{let{search:f,itemRefs:p,onItemKeyDown:m,mode:h}=d,{filteredItems:g}=n(d);if(g.length===0&&(!d.onAddItem||f===``))return l(i,{children:`No items found`});let _=g.some(e=>e.children&&e.children.length>0),v=g.map((e,n)=>({childOffset:t(g,n),index:n,item:e,itemValue:e.value,parentHasNestedItems:_,...d}));if(`onAddItem`in d&&d.onAddItem&&f!==``&&(g.length===1&&g.at(0)?.label.toLowerCase()!==f.trim().toLowerCase()||g.length!==1)){let t=d.itemSingularWord?d.itemSingularWord:`tag`;return u(c,{children:[l(r,{group:`navigation`,variant:`label`,children:`Add ${t}`}),l(s,{index:0,itemRefs:p,onItemKeyDown:m,onAddItem:d.onAddItem,addItemSingularWord:t,mode:h,children:f}),l(r,{group:`navigation`,variant:`label`,children:`${e(t)} search results`}),v.length>0?v.map((e,t)=>l(o,{...e,index:t+1},`menu-item-${t}-${e.item.value}`)):u(a,{children:[`No `,t,` for "`,f,`" found.`]})]})}return v.map((e,t)=>l(o,{...e,index:t},`menu-item-${t}-${e.item.value}`))};export{d as ListSelectPersistent};

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

@@ -0,0 +1,23 @@
+import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, PersistentSelectProps, SelectOptionRequired } from "../Select.types.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
+
+//#region src/molecules/Select/PersistentComboBox/PersistentComboBox.d.ts
+type PersistentComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & MultiSelectCommon<T> & PersistentSelectProps & (GroupedSelectProps<T> | ListSelectProps<T>);
+/**
+ * @param clearable - If users should be able to clear the input, defaults to true
+ * @param loading - Show loader, defaults to false
+ * @param lightBackground - If the input should have white background, defaults to false
+ * @param sortValues - Sort the provided values, defaults to true
+ * @param inDialog - Fixes weird issue that EDS menus has when it's used in dialogs, defaults to false
+ * @param showHelperIcon - Show helper variant icon, defaults to true
+ * @param syncParentChildSelection - Syncs parents/child selections, default is true
+ * @param onAddItem - Enables the possibility to add extra tags and is called when submitting a new item, either via menu click 'add' or {Enter}. Not supported with groups prop.
+ * @param addItemSingularWord - Word to use when adding a new item, default is "tag"
+ * @param onSearchFilter - Custom filter function for search, default is "item.label.match(new RegExp(searchValue, 'i'))"
+ * @param showSelectedAsText - If values should be shown as "5/10 Selected", defaults to false
+ * @param customMenuItemComponent - Custom component to use for rendering menu item, defaults to a checkbox with label
+ * @param maxHeight - Max height of the persistent wrapper below the search field, optional
+ */
+declare function PersistentComboBox<T extends SelectOptionRequired>(props: PersistentComboBoxProps<T>): react_jsx_runtime2.JSX.Element;
+//#endregion
+export { PersistentComboBox, PersistentComboBoxProps };

package/dist/molecules/Select/PersistentComboBox/PersistentComboBox.js

@@ -0,0 +1 @@
+import{Select as e}from"../Select.js";import{jsx as t}from"react/jsx-runtime";function n(n){return t(e,{...n,mode:`persistent`})}export{n as PersistentComboBox};

package/dist/molecules/Select/SearchBar.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";import{getVariantIcon as t}from"../../atoms/utils/forms.js";import{SkeletonField as n}from"../Skeleton/SkeletonField.js";import{ClearButton as r,ComboBoxChip as i,Container as a,HelperWrapper as o,PlaceholderText as s,Section as c,ValueText as l,Wrapper as u}from"./Select.styles.js";import{Icon as d}from"../index.js";import{useMemo as f,useRef as p}from"react";import{Label as m}from"@equinor/eds-core-react";import{jsx as h,jsxs as g}from"react/jsx-runtime";import{arrow_drop_down as _,arrow_drop_up as v,clear as y}from"@equinor/eds-icons";const b=({props:b,anchorRef:x,handleOnClear:S,handleOnSearchChange:C,handleOnSearchKeyDown:w,handleToggleOpen:T,search:E,selectedValues:D,handleOnOpen:O,handleOnRemoveItem:k,open:A,searchRef:j,tryingToRemoveItem:M})=>{let{clearable:N=!0,loading:P=!1,disabled:F=!1,lightBackground:I=!1,placeholder:L=`Select...`,label:R,helperText:z,showHelperIcon:B=!0,id:V=`amplify-combobox-${R}`,variant:H,"data-testid":U,mode:W=`menu`}=b,G=p(`${Math.max(40,Math.random()*80)}%`),K=f(()=>!!z,[z]),q=f(()=>{if(B)return t(H)},[B,H]),J=f(()=>{if(`value`in b&&b.value&&`customValueComponent`in b&&b.customValueComponent)return h(b.customValueComponent,{item:b.value});if(`value`in b&&b.value)return h(l,{children:b.value.label});if(`showSelectedAsText`in b&&b.showSelectedAsText){let e=b.items?b.items.length:b.groups.flatMap(e=>e.items).length;return h(l,{children:typeof b.showSelectedAsText==`function`?b.showSelectedAsText({selectedAmount:D.length,totalAmount:e}):`${D.length}/${e} Selected`})}else return D.map(e=>`customValueComponent`in b&&b.customValueComponent?h(b.customValueComponent,{item:e,onDelete:()=>k(e),tryingToRemove:M!==void 0&&M.value===e.value},e.value):h(i,{"data-testid":`amplify-combobox-chip`,className:`amplify-combo-box-chip`,onDelete:()=>k(e),$tryingToRemove:M?.value===e.value,$lightBackground:I,children:e.label},e.value))},[D,M,I,b,k]);return g(u,{$showBackgroundColor:W===`persistent`,children:[g(a,{"data-testid":U||`combobox-container`,ref:x,onClick:O,"aria-expanded":A,$variant:H,$loading:P,$lightBackground:I,children:[g(c,{children:[!P&&E===``&&D.length===0&&h(s,{children:L}),(E===``&&`value`in b||`values`in b&&D.length>0&&(!b.showSelectedAsText||b.showSelectedAsText&&E===``))&&!P&&J,h(`input`,{id:V,disabled:F||P,ref:j,type:`search`,role:`combobox`,value:E,autoComplete:`off`,onChange:C,onKeyDownCapture:w}),P&&h(n,{role:`progressbar`,style:{width:G.current,left:0,top:`50%`,transform:`translateY(-50%)`}})]}),W===`menu`&&h(d,{onClick:T,data:A?v:_,color:P?e.interactive.disabled__fill.rgba:e.interactive.primary__resting.rgba}),N&&D.length>0&&!P&&h(r,{id:`clear`,variant:`ghost_icon`,onClick:S,"data-testid":`clearBtn`,$rightPadding:W===`menu`,children:h(d,{data:y,size:18})})]}),K&&g(o,{$borderBottom:W===`persistent`,$variant:F?`disabled`:H,children:[q&&h(d,{data:q,size:16}),h(m,{label:z,htmlFor:V})]})]})};export{b as SearchBar};

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

@@ -1,7 +1,7 @@
-import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, SelectOptionRequired, SingleSelectCommon } from "./Select.types.js";
+import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MenuModeSelectProps, MultiSelectCommon, PersistentModeSelectProps, SelectOptionRequired, SingleSelectCommon } from "./Select.types.js";
 import "react/jsx-runtime";
 
 //#region src/molecules/Select/Select.d.ts
-type SelectComponentProps<T extends SelectOptionRequired> = CommonSelectProps<T> & (SingleSelectCommon<T> | MultiSelectCommon<T>) & (ListSelectProps<T> | GroupedSelectProps<T>);
+type SelectComponentProps<T extends SelectOptionRequired> = CommonSelectProps<T> & (SingleSelectCommon<T> | MultiSelectCommon<T>) & (ListSelectProps<T> | GroupedSelectProps<T>) & (PersistentModeSelectProps | MenuModeSelectProps);
 //#endregion
 export { SelectComponentProps };

package/dist/molecules/Select/Select.hooks.js

@@ -0,0 +1 @@
+import{flattenOptions as e,getCumulativeArrayFromNumberedArray as t}from"./Select.utils.js";import{useMemo as n}from"react";const r=e=>{let{groups:r,search:i,onSearchFilter:a}=e,o=n(()=>{if(i===``)return r;let e=new RegExp(i.trim(),`i`);return r.map(t=>({title:t.title,items:t.items.filter(t=>a===void 0?t.label.match(e):a(i,t))})).filter(e=>e.items.length>0)},[r,a,i]);return{filteredGroups:o,filteredGroupSum:n(()=>t(o.map(e=>e.items.length)),[o])}},i=t=>{let{search:r,items:i,onSearchFilter:a}=t;return{filteredItems:n(()=>{if(r===``)return i;let t=new RegExp(r.trim(),`i`);return e(i).filter(e=>a===void 0?e.label.match(t):a(r,e))},[i,a,r])}};export{r as useGroupedSelectItems,i as useListSelectItems};

package/dist/molecules/Select/Select.js

@@ -1 +1 @@
-import{colors as e}from"../../atoms/style/colors.js";import{getVariantIcon as t}from"../../atoms/utils/forms.js";import{useSelect as n}from"../../atoms/hooks/useSelect.js";import{SkeletonField as r}from"../Skeleton/SkeletonField.js";import{useOutsideClick as i}from"../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";import{ClearButton as ee,ComboBoxChip as te,Container as a,HelperWrapper as ne,PlaceholderText as o,Section as s,StyledMenu as c,ValueText as l,Wrapper as re}from"./Select.styles.js";import{GroupedSelectMenu as u}from"./GroupedSelectMenu.js";import{ListSelectMenu as d}from"./ListSelectMenu.js";import{useMemo as f,useRef as p}from"react";import{Icon as m,Label as h}from"@equinor/eds-core-react";import{jsx as g,jsxs as _}from"react/jsx-runtime";import{arrow_drop_down as ie,arrow_drop_up as ae,clear as v}from"@equinor/eds-icons";const y=y=>{let{clearable:b=!0,loading:x=!1,disabled:S=!1,lightBackground:C=!1,underlineHighlight:w=!1,sortValues:T=!0,placeholder:E=`Select...`,label:D,helperText:O,showHelperIcon:k=!0,meta:A,id:j=`amplify-combobox-${D}`,variant:M,inDialog:N=!1,onSearchFilter:P,"data-testid":F,CustomMenuItemComponent:I}=y,{handleOnAddItem:L,handleOnClear:R,handleOnItemKeyDown:z,handleOnItemSelect:B,handleOnSearchChange:V,handleOnSearchKeyDown:H,handleToggleOpen:U,itemRefs:W,search:G,selectedValues:K,handleOnClose:q,handleOnOpen:oe,handleOnRemoveItem:J,open:Y,searchRef:se,tryingToRemoveItem:X}=n({...y,clearable:b,loading:x,disabled:S,lightBackground:C,underlineHighlight:w,sortValues:T,placeholder:E}),ce=p(`${Math.max(40,Math.random()*80)}%`),Z=p(null),Q=p(null),le=f(()=>!!D||!!A,[D,A]),ue=f(()=>!!O,[O]),$=f(()=>{if(k)return t(M)},[k,M]);i(Q.current,e=>{N&&Y&&e.target&&Z.current&&Q.current&&!Z.current.contains(e.target)&&!Q.current?.contains(e.target)&&q()});let de=f(()=>{if(`value`in y&&y.value&&`customValueComponent`in y&&y.customValueComponent)return g(y.customValueComponent,{item:y.value});if(`value`in y&&y.value)return g(l,{children:y.value.label});if(`showSelectedAsText`in y&&y.showSelectedAsText){let e=y.items?y.items.length:y.groups.flatMap(e=>e.items).length;return g(l,{children:typeof y.showSelectedAsText==`function`?y.showSelectedAsText({selectedAmount:K.length,totalAmount:e}):`${K.length}/${e} Selected`})}else return K.map(e=>`customValueComponent`in y&&y.customValueComponent?g(y.customValueComponent,{item:e,onDelete:()=>J(e),tryingToRemove:X!==void 0&&X.value===e.value},e.value):g(te,{"data-testid":`amplify-combobox-chip`,className:`amplify-combo-box-chip`,onDelete:()=>J(e),$tryingToRemove:X?.value===e.value,$lightBackground:C,children:e.label},e.value))},[K,X,C,y,J]);return _(`div`,{children:[le&&g(h,{label:D,meta:A,htmlFor:j,disabled:S}),_(re,{children:[_(a,{"data-testid":F||`combobox-container`,ref:Z,onClick:oe,"aria-expanded":Y,$variant:M,$loading:x,$lightBackground:C,children:[_(s,{children:[!x&&G===``&&K.length===0&&g(o,{children:E}),(G===``&&`value`in y||`values`in y&&K.length>0&&(!y.showSelectedAsText||y.showSelectedAsText&&G===``))&&!x&&de,g(`input`,{id:j,disabled:S||x,ref:se,type:`search`,role:`combobox`,value:G,autoComplete:`off`,onChange:V,onKeyDownCapture:H}),x&&g(r,{role:`progressbar`,style:{width:ce.current,left:0,top:`50%`,transform:`translateY(-50%)`}})]}),g(m,{onClick:U,data:Y?ae:ie,color:x?e.interactive.disabled__fill.rgba:e.interactive.primary__resting.rgba}),b&&K.length>0&&!x&&g(ee,{id:`clear`,variant:`ghost_icon`,onClick:R,"data-testid":`clearBtn`,children:g(m,{data:v,size:18})})]}),ue&&_(ne,{$variant:S?`disabled`:M,children:[$&&g(m,{data:$,size:16}),g(h,{label:O,htmlFor:j})]})]}),Y&&g(c,{ref:Q,open:!0,id:`combobox-menu`,anchorEl:Z.current,onClose:q,placement:`bottom`,style:{width:`${Z.current?.clientWidth}px`,maxWidth:`${Z.current?.clientWidth}px`},children:`groups`in y&&y.groups?g(u,{...y,search:G,itemRefs:W,onItemSelect:B,onItemKeyDown:z,onSearchFilter:P,CustomMenuItemComponent:I}):g(d,{...y,search:G,itemRefs:W,onAddItem:y.onAddItem?L:void 0,onItemSelect:B,onItemKeyDown:z,onSearchFilter:P,CustomMenuItemComponent:I})},`select-menu-${G}`)]})};export{y as Select};
+import{useSelect as e}from"../../atoms/hooks/useSelect.js";import{useOutsideClick as t}from"../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";import{PersistentComboBoxWrapper as n,PersistentStickyWrapper as r,StyledMenu as i}from"./Select.styles.js";import{GroupedSelectMenu as a}from"./GroupedSelectMenu.js";import{GroupedSelectPersistent as o}from"./GroupedSelectPersistent.js";import{ListSelectMenu as s}from"./ListSelectMenu.js";import{ListSelectPersistent as c}from"./ListSelectPersistent.js";import{SearchBar as l}from"./SearchBar.js";import{useMemo as u,useRef as d}from"react";import{Label as f}from"@equinor/eds-core-react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";const g=g=>{let{clearable:_=!0,loading:v=!1,disabled:y=!1,lightBackground:b=!1,underlineHighlight:x=!1,sortValues:S=!0,placeholder:C=`Select...`,label:w,meta:T,id:E=`amplify-combobox-${w}`,inDialog:D=!1,onSearchFilter:O,CustomMenuItemComponent:k,mode:A=`menu`}=g,{handleOnAddItem:j,handleOnItemKeyDown:M,handleOnItemSelect:N,itemRefs:P,search:F,handleOnClose:I,open:L,handleOnClear:R,handleOnSearchChange:z,handleOnSearchKeyDown:B,handleToggleOpen:V,selectedValues:H,handleOnOpen:U,handleOnRemoveItem:W,searchRef:G,tryingToRemoveItem:K}=e({...g,clearable:_,loading:v,disabled:y,lightBackground:b,underlineHighlight:x,sortValues:S,placeholder:C}),q=d(null),J=d(null),Y=u(()=>!!w||!!T,[w,T]);if(t(J.current,e=>{D&&L&&e.target&&q.current&&J.current&&!q.current.contains(e.target)&&!J.current?.contains(e.target)&&I()}),A===`persistent`&&`value`in g&&g.value)throw Error(`You cannot use single select with persistent mode`);return A===`persistent`?h(p,{children:[Y&&m(f,{label:w,meta:T,htmlFor:E,disabled:y}),h(n,{$maxHeight:g.mode===`persistent`&&g.maxHeight?g.maxHeight:void 0,$shouldShowLabel:Y,children:[m(r,{children:m(l,{props:g,anchorRef:q,search:F,searchRef:G,open:L,selectedValues:H,handleOnOpen:U,handleToggleOpen:V,handleOnRemoveItem:W,tryingToRemoveItem:K,handleOnSearchChange:z,handleOnSearchKeyDown:B,handleOnClear:R})}),`groups`in g&&g.groups?m(o,{...g,search:F,itemRefs:P,onItemSelect:N,onItemKeyDown:M,onSearchFilter:O,CustomMenuItemComponent:k}):m(c,{...g,search:F,itemRefs:P,onAddItem:g.onAddItem?j:void 0,onItemSelect:N,onItemKeyDown:M,onSearchFilter:O,CustomMenuItemComponent:k})]})]}):h(`div`,{children:[Y&&m(f,{label:w,meta:T,htmlFor:E,disabled:y}),m(l,{props:g,anchorRef:q,search:F,searchRef:G,open:L,selectedValues:H,handleOnOpen:U,handleToggleOpen:V,handleOnRemoveItem:W,tryingToRemoveItem:K,handleOnSearchChange:z,handleOnSearchKeyDown:B,handleOnClear:R}),L&&m(i,{ref:J,open:!0,id:`combobox-menu`,anchorEl:q.current,onClose:I,placement:`bottom`,style:{width:`${q.current?.clientWidth}px`,maxWidth:`${q.current?.clientWidth}px`},children:`groups`in g&&g.groups?m(a,{...g,search:F,itemRefs:P,onItemSelect:N,onItemKeyDown:M,onSearchFilter:O,CustomMenuItemComponent:k}):m(s,{...g,search:F,itemRefs:P,onAddItem:g.onAddItem?j:void 0,onItemSelect:N,onItemKeyDown:M,onSearchFilter:O,CustomMenuItemComponent:k})},`select-menu-${F}`)]})};export{g as Select};

package/dist/molecules/Select/Select.styles.js

@@ -1,17 +1,20 @@
-import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,VARIANT_HELPER_TEXT_COLORS as n,colors as r}from"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import{Chip as a}from"../Chip/Chip.js";import{Button as o,Menu as s,Typography as c}from"@equinor/eds-core-react";import l,{css as u}from"styled-components";const d=l.div`
+import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,VARIANT_HELPER_TEXT_COLORS as n,colors as r}from"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import{shape as a}from"../../atoms/style/index.js";import{Chip as o}from"../Chip/Chip.js";import{Button as s,Menu as c,Typography as l}from"@equinor/eds-core-react";import u,{css as d}from"styled-components";const f=u.div`
   display: flex;
   flex-direction: column;
   gap: ${i.small};
-`,f=l.span`
+  ${({$showBackgroundColor:e})=>e&&d`
+      background-color: ${r.ui.background__default.rgba};
+    `}
+`,p=u.span`
   display: flex;
   gap: ${i.small};
   align-items: center;
-  margin-left: ${i.small};
-  width: calc(100% - ${i.small});
+  padding-left: ${i.small};
+  width: 100%;
   > label {
     margin: 0;
   }
-  ${({$variant:e})=>e?u`
+  ${({$variant:e})=>e?d`
       > label {
         color: ${e===`disabled`?r.interactive.disabled__text.rgba:n[e]};
       }
@@ -20,7 +23,11 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
         fill: ${e===`disabled`?r.interactive.disabled__text.rgba:n[e]};
       }
     `:``}
-`,p=l.div`
+  ${({$borderBottom:e})=>e&&d`
+      border-bottom: 1px solid ${r.ui.background__heavy.rgba};
+      padding-bottom: ${i.small};
+    `}
+`,m=u.div`
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
@@ -34,17 +41,17 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
     background: ${r.ui.background__light_medium.rgba};
   }
 
-  ${({$variant:e})=>e?e===`dirty`?u`
+  ${({$variant:e})=>e?e===`dirty`?d`
         box-shadow: inset 0 -2px 0 0 ${t[e]};
         &:hover {
           box-shadow: inset 0 -2px 0 0 ${t[e]};
         }
-      `:u`
+      `:d`
       outline: 1px solid ${t[e]};
       &:hover {
         box-shadow: inset 0 -1px 0 0 ${t[e]};
       }
-    `:u`
+    `:d`
         box-shadow: inset 0 -1px 0 0 ${r.text.static_icons__tertiary.rgba};
         &:hover {
           box-shadow: inset 0 -2px 0 0
@@ -90,7 +97,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       width: calc(100% - 24px);
     }
   }
-`,m=l.section`
+`,h=u.section`
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -132,11 +139,11 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       }
     }
   }
-`,h=l(o)`
+`,g=u(s)`
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
-  right: 32px;
+  right: ${({$rightPadding:e})=>e?i.x_large:i.small};
   width: 24px;
   height: 24px;
   svg {
@@ -147,9 +154,13 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
     height: 24px;
     left: 0;
   }
-`,g=l(a)`
+`,_=u(o)`
   background: ${({$tryingToRemove:e,$lightBackground:t})=>e?r.interactive.primary__hover_alt.rgba:t?r.ui.background__light.rgba:r.ui.background__default.rgba} !important;
-`,_=l(s.Item)`
+`,v=u.div`
+  padding: ${i.small} 0;
+`,y=u(l)`
+  padding: ${i.small} 0 ${i.small} ${i.medium};
+`,b=u(c.Item)`
   flex-grow: 1;
   padding-left: 10px;
   
@@ -166,36 +177,62 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
     outline: 2px dashed ${r.interactive.primary__resting.rgba};
   }
 
-    ${({$selected:e})=>e?u`
+    ${({$selected:e})=>e?d`
             background: ${r.interactive.primary__selected_highlight.rgba};
 
             &:hover {
               background: ${r.interactive.primary__selected_hover.rgba};
             }
           `:``}}
-`,v=l.hr`
+`,x=u.div`
+  border: 1px solid ${r.ui.background__heavy.rgba};
+  border-radius: ${a.corners.borderRadius};
+  overflow: auto;
+  background-color: ${r.ui.background__default.rgba};
+  height: ${({$shouldShowLabel:e,$maxHeight:t})=>t||(e?d`calc(100% - 16px)`:`100%`)};
+`,S=u.div`
+  position: sticky;
+  top: 0;
+`,C=u.button`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: ${i.medium} ${i.medium};
+  justify-content: flex-start;
+  gap: ${i.small};
+  box-sizing: border-box;
+  svg {
+    flex-shrink: 0;
+  }
+  &:hover {
+    background-color: ${r.interactive.primary__hover_alt.rgba};
+  }
+  &:focus-visible {
+    outline: 2px dashed ${r.interactive.primary__resting.rgba};
+  }
+`,w=u.hr`
   height: calc(100% + ${i.medium} * 2);
   justify-self: center;
   width: ${i.x_large};
   min-width: ${i.x_large};
-`,y=l(c)`
+`,T=u(l)`
   user-select: none;
   pointer-events: none;
   position: absolute;
   color: ${r.text.static_icons__tertiary.rgba};
   top: calc(50%);
   transform: translate(0, -50%);
-`,b=l(y)`
+`,E=u(T)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: ${r.text.static_icons__default.rgba};
   max-width: 100%;
-`,x=l(c)`
+`,D=u(l)`
   margin: ${i.medium};
-`,S=l(c)`
+`,O=u(l)`
   margin-left: ${i.medium};
-`,C=l(s)`
+`,k=u(c)`
   max-height: 20rem;
   max-width: inherit;
   overflow-y: auto;
@@ -203,10 +240,10 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
     width: inherit;
     max-width: inherit;
   }
-`,w=l.div`
+`,A=u.div`
   display: flex;
   align-items: center;
-`,T=l(o)`
+`,j=u(s)`
   width: 36px;
   height: 36px;
-`;export{h as ClearButton,g as ComboBoxChip,p as Container,f as HelperWrapper,v as MenuItemSpacer,w as MenuItemWrapper,S as NoItemsFoundText,x as NoTagFoundText,y as PlaceholderText,m as Section,T as SmallButton,C as StyledMenu,_ as StyledMenuItem,b as ValueText,d as Wrapper};
+`;export{g as ClearButton,_ as ComboBoxChip,m as Container,y as GroupTitle,p as HelperWrapper,w as MenuItemSpacer,A as MenuItemWrapper,O as NoItemsFoundText,D as NoTagFoundText,x as PersistentComboBoxWrapper,v as PersistentGroupsWrapper,C as PersistentListItem,S as PersistentStickyWrapper,T as PlaceholderText,h as Section,j as SmallButton,k as StyledMenu,b as StyledMenuItem,E as ValueText,f as Wrapper};

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

@@ -39,6 +39,15 @@ type MultiSelectWithCustomValueComponent<T extends SelectOptionRequired> = {
   }>;
 } & MultiSelectBase<T>;
 type MultiSelectCommon<T extends SelectOptionRequired> = MultiSelectWithSelectedAsText<T> | MultiSelectWithCustomValueComponent<T>;
+interface MenuModeSelectProps {
+  mode?: 'menu';
+}
+interface PersistentSelectProps {
+  maxHeight?: string;
+}
+interface PersistentModeSelectProps extends PersistentSelectProps {
+  mode: 'persistent';
+}
 interface SelectGroup<T extends SelectOptionRequired> {
   title?: string;
   items: SelectOption<T>[];
@@ -88,4 +97,4 @@ type CommonSelectProps<T extends SelectOptionRequired> = {
   'data-testid'?: string;
 } & CustomMenuItemComponentProps<T>;
 //#endregion
-export { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, SelectOption, SelectOptionRequired, SingleSelectCommon };
+export { CommonSelectProps, GroupedSelectProps, ListSelectProps, MenuModeSelectProps, MultiSelectCommon, PersistentModeSelectProps, PersistentSelectProps, SelectOption, SelectOptionRequired, SingleSelectCommon };

package/dist/molecules/Select/SelectMenuItem.js

@@ -1 +1 @@
-import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as t}from"../../atoms/style/spacings.js";import{getChildOffset as n}from"./Select.utils.js";import{MenuItemSpacer as r,MenuItemWrapper as i,SmallButton as a,StyledMenuItem as o}from"./Select.styles.js";import{getParentIcon as s,getParentState as c}from"./SelectMenuItem.utils.js";import{useMemo as l,useRef as u,useState as d}from"react";import{Icon as f}from"@equinor/eds-core-react";import{Fragment as p,jsx as m,jsxs as h}from"react/jsx-runtime";import{checkbox as g,checkbox_outline as _,chevron_down as v,chevron_right as y}from"@equinor/eds-icons";const{colors:b}=e,x=e=>{let{index:S,childOffset:C,depth:w=0,item:T,itemRefs:E,onItemKeyDown:D,onItemSelect:O,parentHasNestedItems:k=!1,CustomMenuItemComponent:A}=e,[j,M]=d(!1),N=u(-1),P=u([]),F=(`values`in e?e.values.map(({value:e})=>e):[]).includes(T.value),I=l(()=>`value`in e?_:s(T,e.values),[T,e]),L=l(()=>`value`in e?`none`:c(T,e.values),[T,e]),R=l(()=>Array(w).fill(0).map((e,t)=>m(r,{},`spacer-${e+t}`)),[w]),z=e=>{e.preventDefault(),O(T)},B=e=>{e.stopPropagation(),M(e=>!e)},V=e=>{e.key===`ArrowDown`?N.current+=1:e.key===`ArrowUp`&&--N.current,N.current<=-1?(E.current[S]?.focus(),N.current=-1):N.current+C===P.current.length?(N.current=-1,D(e),M(!1)):N.current>=0&&N.current<P.current.length-C&&P.current[N.current+C]?.focus()},H=e=>{!j&&e.key===`ArrowDown`||e.key===`ArrowUp`?D(e):e.key===`ArrowRight`||e.key===`ArrowLeft`?M(e=>!e):j&&e.key===`ArrowDown`&&N.current===-1&&(N.current=0,P.current[N.current+C]?.focus())};return T.children&&T.children.length>0&&`values`in e?h(p,{children:[h(i,{style:{paddingLeft:w===0?t.small:0},children:[R,m(a,{variant:`ghost_icon`,onClick:B,"data-testid":`toggle-button`,children:m(f,{color:b.interactive.primary__resting.rgba,data:j?v:y})}),m(o,{$depth:w,ref:e=>{E.current[S]=e},index:S,closeMenuOnClick:!1,onKeyDownCapture:H,onClick:z,children:A?m(A,{item:T,selectedState:L}):h(p,{children:[m(f,{color:b.interactive.primary__resting.rgba,data:I}),m(`span`,{children:T.label})]})})]}),j&&T.children.map((t,r)=>m(x,{index:C+r,childOffset:C+n(T.children,r),depth:w+1,item:t,itemRefs:P,values:e.values,onItemKeyDown:V,onItemSelect:O,parentHasNestedItems:!0,CustomMenuItemComponent:A},`child-${r}-${t.value}-${T.value}`))]}):`values`in e?h(i,{children:[R,m(o,{$depth:w,$paddedLeft:k,ref:e=>{E.current[S]=e},index:S,tabIndex:w,closeMenuOnClick:!1,onKeyDownCapture:D,onClick:z,children:A?m(A,{item:T,selectedState:F?`selected`:`none`}):h(p,{children:[m(f,{color:b.interactive.primary__resting.rgba,data:F?g:_}),m(`span`,{children:T.label})]})})]}):m(i,{children:m(o,{$depth:w,$selected:e.value&&T.value===e.value.value,ref:e=>{E.current[S]=e},index:S,onKeyDownCapture:D,onClick:z,children:A?m(A,{item:T,selectedState:e.value&&T.value===e.value.value?`selected`:`none`}):m(`span`,{children:T.label})})})};export{x as SelectMenuItem};
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{spacings as t}from"../../atoms/style/spacings.js";import{getChildOffset as n}from"./Select.utils.js";import{MenuItemSpacer as r,MenuItemWrapper as i,SmallButton as a}from"./Select.styles.js";import{DynamicMenuItem as o}from"./DynamicMenuItem.js";import{useMemo as s,useRef as c,useState as l}from"react";import{Icon as u}from"@equinor/eds-core-react";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{chevron_down as m,chevron_right as h}from"@equinor/eds-icons";const{colors:g}=e,_=e=>{let{index:v,childOffset:y,depth:b=0,item:x,itemRefs:S,onItemKeyDown:C,onItemSelect:w,CustomMenuItemComponent:T,mode:E}=e,[D,O]=l(!1),k=c(-1),A=c([]),j=(`values`in e?e.values.map(({value:e})=>e):[]).includes(x.value),M=s(()=>Array(b).fill(0).map((e,t)=>f(r,{},`spacer-${e+t}`)),[b]),N=e=>{e.stopPropagation(),O(e=>!e)},P=e=>{!D&&e.key===`ArrowDown`||e.key===`ArrowUp`?C(e):e.key===`ArrowRight`||e.key===`ArrowLeft`?O(e=>!e):D&&e.key===`ArrowDown`&&k.current===-1&&(k.current=0,A.current[k.current+y]?.focus())},F=e=>{e.key===`ArrowDown`?k.current+=1:e.key===`ArrowUp`&&--k.current,k.current<=-1?(S.current[v]?.focus(),k.current=-1):k.current+y===A.current.length?(k.current=-1,C(e),O(!1)):k.current>=0&&k.current<A.current.length-y&&A.current[k.current+y]?.focus()};return x.children&&x.children.length>0&&`values`in e?p(d,{children:[p(i,{style:{paddingLeft:b===0?t.small:0},children:[M,f(a,{variant:`ghost_icon`,onClick:N,"data-testid":`toggle-button`,children:f(u,{color:g.interactive.primary__resting.rgba,data:D?m:h})}),f(o,{menuItemProps:e,isSelected:j,handleOnParentKeyDown:P})]}),D&&x.children.map((t,r)=>f(_,{index:y+r,childOffset:y+n(x.children,r),depth:b+1,item:t,itemRefs:A,values:e.values,onItemKeyDown:F,onItemSelect:w,mode:E,parentHasNestedItems:!0,CustomMenuItemComponent:T},`child-${r}-${t.value}-${x.value}`))]}):`values`in e?p(i,{children:[M,f(o,{menuItemProps:e,isSelected:j})]}):f(i,{children:f(o,{menuItemProps:e,isSelected:!!(e.value&&x.value===e.value.value)})})};export{_ as SelectMenuItem};

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

@@ -1,9 +1,8 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, SelectOptionRequired, SingleSelectCommon } from "../Select.types.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import * as react_jsx_runtime3 from "react/jsx-runtime";
 
 //#region src/molecules/Select/SingleSelect/SingleSelect.d.ts
-type ListSingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> & SingleSelectCommon<T> & ListSelectProps<T>;
-type GroupedSingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> & SingleSelectCommon<T> & GroupedSelectProps<T>;
+type SingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> & SingleSelectCommon<T> & (ListSelectProps<T> | GroupedSelectProps<T>);
 /**
  * @param clearable - If users should be able to clear the input, defaults to true
  * @param loading - Show loader, defaults to false
@@ -16,6 +15,6 @@ type GroupedSingleSelectProps<T extends SelectOptionRequired> = CommonSelectProp
  * @param onSearchFilter - Custom filter function for search, default is "item.label.match(new RegExp(searchValue, 'i'))"
  * @param customMenuItemComponent - Custom component to use for rendering menu item, defaults to a checkbox with label
  */
-declare function SingleSelect<T extends SelectOptionRequired>(props: ListSingleSelectProps<T> | GroupedSingleSelectProps<T>): react_jsx_runtime2.JSX.Element;
+declare function SingleSelect<T extends SelectOptionRequired>(props: SingleSelectProps<T>): react_jsx_runtime3.JSX.Element;
 //#endregion
-export { GroupedSingleSelectProps, ListSingleSelectProps, SingleSelect };
+export { SingleSelect, SingleSelectProps };

package/dist/molecules/SelectionControls/Checkbox/Checkbox.d.ts

@@ -1,4 +1,4 @@
-import * as react94 from "react";
+import * as react102 from "react";
 import { CheckboxProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/SelectionControls/Checkbox/Checkbox.d.ts
@@ -7,6 +7,6 @@ interface CheckboxProps$1 extends CheckboxProps {
   outlined?: boolean;
   error?: boolean;
 }
-declare const Checkbox$1: react94.ForwardRefExoticComponent<CheckboxProps$1 & react94.RefAttributes<HTMLInputElement>>;
+declare const Checkbox$1: react102.ForwardRefExoticComponent<CheckboxProps$1 & react102.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Checkbox$1 as Checkbox, CheckboxProps$1 as CheckboxProps };

package/dist/molecules/SelectionControls/Radio/Radio.d.ts

@@ -1,4 +1,4 @@
-import * as react92 from "react";
+import * as react104 from "react";
 import { RadioProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/SelectionControls/Radio/Radio.d.ts
@@ -7,6 +7,6 @@ interface RadioProps$1 extends RadioProps {
   outlined?: boolean;
   error?: boolean;
 }
-declare const Radio$1: react92.ForwardRefExoticComponent<RadioProps$1 & react92.RefAttributes<HTMLInputElement>>;
+declare const Radio$1: react104.ForwardRefExoticComponent<RadioProps$1 & react104.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Radio$1 as Radio, RadioProps$1 as RadioProps };

package/dist/molecules/SelectionControls/Switch/Switch.d.ts

@@ -1,10 +1,10 @@
-import * as react96 from "react";
+import * as react106 from "react";
 import { SwitchProps } from "@equinor/eds-core-react";
 
 //#region src/molecules/SelectionControls/Switch/Switch.d.ts
 interface SwitchProps$1 extends SwitchProps {
   outlined?: boolean;
 }
-declare const Switch$1: react96.ForwardRefExoticComponent<SwitchProps$1 & react96.RefAttributes<HTMLInputElement>>;
+declare const Switch$1: react106.ForwardRefExoticComponent<SwitchProps$1 & react106.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Switch$1 as Switch, SwitchProps$1 as SwitchProps };

package/dist/molecules/TableHeader/TableHeader.styles.js

@@ -7,6 +7,7 @@ import{spacings as e}from"../../atoms/style/spacings.js";import{getButtonHoverCo
   gap: ${e.small};
   padding: ${e.small};
   align-items: center;
+  height: 100%;
   > ${o} > button {
     margin-left: auto;
   }