@equinor/amplify-component-lib 8.12.1 → 8.13.0

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

@@ -1,4 +1,4 @@
-import{tokens as r}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{colors as o}from"../../../atoms/style/colors.js";import t from"styled-components";const{spacings:i,shape:s}=r,e=t.section`
+import{tokens as r}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{colors as t}from"../../../atoms/style/colors.js";import i from"styled-components";const{spacings:e,shape:o}=r,a=i.section`
   display: flex;
   > button:not(:first-child):not(:last-child) {
     border-radius: 0;
@@ -11,24 +11,24 @@ import{tokens as r}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/
     border-bottom-left-radius: 0;
     border-top-left-radius: 0;
   }
-`,a=t.button`
+`,s=i.button`
   display: flex;
   align-items: center;
-  border-radius: ${s.button.borderRadius};
-  padding: ${i.comfortable.x_small};
-  color: ${r=>l(r)};
+  border-radius: ${o.button.borderRadius};
+  padding: ${e.comfortable.x_small};
+  color: ${r=>d(r)};
   background: ${r=>n(r)};
   transition: 200ms;
   > svg {
-    fill: ${r=>l(r)};
+    fill: ${r=>d(r)};
     transition: 200ms fill;
   }
 
   &:hover:not(:disabled) {
     background: ${r=>b(r)};
-    color: ${r=>d(r)};
+    color: ${r=>l(r)};
     > svg {
-      fill: ${r=>d(r)};
+      fill: ${r=>l(r)};
     }
   }
 
@@ -37,6 +37,6 @@ import{tokens as r}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/
   }
 
   &:disabled > svg {
-    fill: ${o.interactive.disabled__text.rgba};
+    fill: ${t.interactive.disabled__text.rgba};
   }
-`,l=r=>r.$customColors?r.$customColors.resting:r.$active?o.ui.background__light.rgba:o.interactive.primary__resting.rgba,d=r=>r.$customColors?r.$customColors.hover:o.interactive.primary__hover.rgba,n=r=>r.$active?o.interactive.primary__resting.rgba:o.ui.background__light.rgba,b=r=>r.$customColors?r.$customColors.backgroundHover:o.interactive.primary__hover_alt.rgba;export{a as MenuButtonStyle,e as MenuSection};
+`,d=r=>r.$active?t.ui.background__light.rgba:t.interactive.primary__resting.rgba,l=r=>r.$active?t.text.static_icons__primary_white.rgba:t.interactive.primary__hover.rgba,n=r=>r.$active?t.interactive.primary__resting.rgba:t.ui.background__light.rgba,b=r=>r.$active?t.interactive.primary__hover.rgba:t.interactive.primary__hover_alt.rgba;export{s as MenuButtonStyle,a as MenuSection};

package/dist/molecules/RichTextEditor/MenuBar/MenuButton.d.ts

@@ -8,10 +8,5 @@ export interface MenuButtonProps {
     active?: boolean;
     disabled?: boolean;
     tooltip?: string;
-    customColors?: {
-        resting: string;
-        hover: string;
-        backgroundHover: string;
-    };
 }
 export declare const MenuButton: import("react").ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -1 +1 @@
-import{jsx as o,jsxs as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Icon as i}from"@equinor/eds-core-react";import{MenuButtonStyle as r}from"./MenuBar.styles.js";import{OptionalTooltip as l}from"../../OptionalTooltip/OptionalTooltip.js";const c=e((({icon:e,onClick:c,customColors:m,active:n=!1,disabled:a=!1,tooltip:p,children:s,...d},u)=>o(l,{title:p,placement:"bottom",children:t(r,{ref:u,$active:n,$customColors:m,onClick:c,disabled:a,type:"button",...d,children:[o(i,{data:e}),s]})})));c.displayName="MenuButton";export{c as MenuButton};
+import{jsx as t,jsxs as o}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Icon as i}from"@equinor/eds-core-react";import{MenuButtonStyle as r}from"./MenuBar.styles.js";import{OptionalTooltip as l}from"../../OptionalTooltip/OptionalTooltip.js";const n=e((({icon:e,onClick:n,active:a=!1,disabled:c=!1,tooltip:m,children:p,...d},s)=>t(l,{title:m,placement:"bottom",children:o(r,{ref:s,$active:a,onClick:n,disabled:c,type:"button",...d,children:[t(i,{data:e}),p]})})));n.displayName="MenuButton";export{n as MenuButton};

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

@@ -1,4 +1,4 @@
-import{jsxs as r,Fragment as o,jsx as e}from"react/jsx-runtime";import{format_clear as i}from"@equinor/eds-icons";import{tokens as n}from"../../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{RichTextEditorFeatures as t}from"../RichTextEditor.types.js";import{EditorMenu as s}from"./MenuBar.js";import a from"styled-components";const{colors:c}=n,u=a.hr`
+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: ${c.ui.background__medium.rgba};
-`,m=({editor:n,features:a})=>{if(!a||a.includes(t.CLEAR_FORMATTING))return r(o,{children:[e(u,{}),e(s.Button,{icon:i,onClick:()=>n.chain().focus().clearNodes().unsetAllMarks().run(),customColors:{resting:c.interactive.warning__resting.rgba,hover:c.interactive.warning__hover.rgba,backgroundHover:c.ui.background__warning.rgba}})]})};export{m as TextClearFormating};
+  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/custom-extensions/ExtendedHeaders.js

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import o from"@tiptap/extension-heading";import{ReactNodeViewRenderer as t,NodeViewWrapper as e,NodeViewContent as i}from"@tiptap/react";import"../../AnimatedCheckmark/AnimatedCheckmark.styles.js";import"../../ApplicationIcon/ApplicationIcon.js";import"../../Badge/Badge.styles.js";import{Typography as s}from"@equinor/eds-core-react";import"../../Banner/Banner.styles.js";import"@equinor/eds-icons";import"../../Chip/Chip.js";import"../../ContentMenu/ContentMenu.js";import"../../Dialog/Dialog.js";import"../../EquinorLogo/EquinorLogo.js";import"react";import"../../../atoms/style/colors.js";import"../../FileProgress/CompactFileProgress.styles.js";import"./AmplifyKit.js";import"../MenuBar/MenuBar.js";import"../RichTextEditor.styles.js";import"../RichTextEditor.types.js";import"../../../_virtual/lodash.js";import"@equinor/subsurface-app-management";import"@microsoft/signalr";import"@tanstack/react-query";import"../../../atoms/enums/Environment.js";import"../../../atoms/utils/auth_environment.js";import"../../../organisms/TopBar/Notifications/NotificationProvider.js";import"../../../providers/AuthProvider/AuthProvider.js";import"../../../providers/ReleaseNotesProvider.js";import"../../../providers/SideBarProvider.js";import"../../../providers/SnackbarProvider/SnackbarProvider.js";import"../../../providers/StepperProvider.js";import"../../../providers/TableOfContentsProvider.js";import"../../../providers/ThemeProvider/ThemeProvider.js";import"../../../providers/TutorialStepsProvider.js";import"../../../atoms/enums/Errors.js";import"../../../atoms/enums/Theme.js";import"../../../atoms/enums/SpacingsMode.js";import"../../../organisms/ErrorPage/illustrations/GlitchAnimation.js";import"../../../organisms/ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import"../../FileProgress/RegularFileProgress.styles.js";import"../../FileUploadArea/FileUploadArea.js";import"../../FullPageSpinner/FullPageSpinner.js";import"../../InfoElement/InfoElement.js";import"../../OptionalTooltip/OptionalTooltip.js";import"../../ProfileAvatar/ProfileAvatar.js";import"../MenuBar/MenuBar.styles.js";import"../MenuBar/MenuButton.js";import"../../Search/Search.js";import"react-router-dom";import"../../Sieve/Sieve.styles.js";import"../../SingleFilterMenu/SingleFilterMenu.js";import"../../Skeleton/SkeletonBase/SkeletonBase.js";import"../../Stepper/Stepper.js";import"../../OptionDrawer/OptionDrawer.js";import"../../Select/Select.styles.js";import"../../ListItem/ListItem.js";import"../../SelectionControls/Checkbox/Checkbox.js";import"../../SelectionControls/Radio/Radio.js";import"../../SelectionControls/Switch/Switch.js";const p=o=>{const t=o.node.attrs.level;let p="h1";return 2===t&&(p="h2"),3===t&&(p="h3"),4===t&&(p="h4"),5===t&&(p="h5"),6===t&&(p="h6"),r(e,{children:r(s,{variant:p,children:r(i,{className:"content is-editable"})})})};var n=o.extend({content:"inline*",addNodeView:()=>t(p)});export{n as default};
+import{jsx as r}from"react/jsx-runtime";import o from"@tiptap/extension-heading";import{ReactNodeViewRenderer as t,NodeViewWrapper as e,NodeViewContent as i}from"@tiptap/react";import"../../AnimatedCheckmark/AnimatedCheckmark.styles.js";import"../../ApplicationIcon/ApplicationIcon.js";import"../../Badge/Badge.styles.js";import{Typography as s}from"@equinor/eds-core-react";import"../../Banner/Banner.styles.js";import"@equinor/eds-icons";import"../../Chip/Chip.js";import"../../ContentMenu/ContentMenu.js";import"../../Dialog/Dialog.js";import"../../EquinorLogo/EquinorLogo.js";import"react";import"../../FileProgress/CompactFileProgress.styles.js";import"../../../atoms/style/colors.js";import"./AmplifyKit.js";import"../MenuBar/MenuBar.js";import"../RichTextEditor.styles.js";import"../RichTextEditor.types.js";import"../../../_virtual/lodash.js";import"@equinor/subsurface-app-management";import"@microsoft/signalr";import"@tanstack/react-query";import"../../../atoms/enums/Environment.js";import"../../../atoms/utils/auth_environment.js";import"../../../organisms/TopBar/Notifications/NotificationProvider.js";import"../../../providers/AuthProvider/AuthProvider.js";import"../../../providers/ReleaseNotesProvider.js";import"../../../providers/SideBarProvider.js";import"../../../providers/SnackbarProvider/SnackbarProvider.js";import"../../../providers/StepperProvider.js";import"../../../providers/TableOfContentsProvider.js";import"../../../providers/ThemeProvider/ThemeProvider.js";import"../../../providers/TutorialStepsProvider.js";import"../../../atoms/enums/Errors.js";import"../../../atoms/enums/Theme.js";import"../../../atoms/enums/SpacingsMode.js";import"../../../organisms/ErrorPage/illustrations/GlitchAnimation.js";import"../../../organisms/ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import"../../FileProgress/RegularFileProgress.styles.js";import"../../FileUploadArea/FileUploadArea.js";import"../../FullPageSpinner/FullPageSpinner.js";import"../../InfoElement/InfoElement.js";import"../../OptionalTooltip/OptionalTooltip.js";import"../../ProfileAvatar/ProfileAvatar.js";import"../MenuBar/MenuBar.styles.js";import"../MenuBar/MenuButton.js";import"../../Search/Search.js";import"react-router-dom";import"../../Sieve/Sieve.styles.js";import"../../SingleFilterMenu/SingleFilterMenu.js";import"../../Skeleton/SkeletonBase/SkeletonBase.js";import"../../Stepper/Stepper.js";import"../../OptionDrawer/OptionDrawer.js";import"../../Select/Select.styles.js";import"../../ListItem/ListItem.js";import"../../SelectionControls/Checkbox/Checkbox.js";import"../../SelectionControls/Radio/Radio.js";import"../../SelectionControls/Switch/Switch.js";const p=o=>{const t=o.node.attrs.level;let p="h1";return 2===t&&(p="h2"),3===t&&(p="h3"),4===t&&(p="h4"),5===t&&(p="h5"),6===t&&(p="h6"),r(e,{children:r(s,{variant:p,children:r(i,{className:"content is-editable"})})})};var n=o.extend({content:"inline*",addNodeView:()=>t(p)});export{n as default};

package/dist/molecules/Search/Search.js

@@ -1,13 +1,20 @@
-import{jsx as e}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Search as r}from"@equinor/eds-core-react";import{tokens as t}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import i from"styled-components";const{colors:s}=t,n=i(r)`
+import{jsx as t}from"react/jsx-runtime";import{forwardRef as o}from"react";import{Search as r}from"@equinor/eds-core-react";import{animation as i}from"../../atoms/style/animation.js";import{colors as a}from"../../atoms/style/colors.js";import e from"styled-components";const n=e(r)`
   input {
-    color: ${s.text.static_icons__default.rgba};
+    color: ${a.text.static_icons__default.rgba};
+    transition:
+      background ${i.transitionMS},
+      box-shadow ${i.transitionMS};
+    &:hover {
+      background: ${a.ui.background__light_medium.rgba};
+      box-shadow: inset 0 -2px 0 0 ${a.text.static_icons__tertiary.rgba};
+    }
   }
 
   div:focus-within {
     outline: none !important;
 
     input {
-      box-shadow: inset 0 -2px 0 0 ${s.interactive.primary__resting.rgba};
+      box-shadow: inset 0 -2px 0 0 ${a.interactive.primary__resting.rgba};
     }
   }
-`,a=o(((o,r)=>e(n,{...o,ref:r,autoComplete:"off"})));a.displayName="HeaderDrawer";export{a as Search};
+`,s=o(((o,r)=>t(n,{...o,ref:r,autoComplete:"off"})));s.displayName="HeaderDrawer";export{s as Search};

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

@@ -1,6 +1,6 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, SelectOptionRequired } from '../Select.types';
-export type ListComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps & MultiSelectCommon<T> & ListSelectProps<T>;
-export type GroupedComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps & MultiSelectCommon<T> & GroupedSelectProps<T>;
+export type ListComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & MultiSelectCommon<T> & ListSelectProps<T>;
+export type GroupedComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & MultiSelectCommon<T> & GroupedSelectProps<T>;
 /**
  * @param clearable - If users should be able to clear the input, defaults to true
  * @param loading - Show loader, defaults to false
@@ -9,5 +9,7 @@ export type GroupedComboBoxProps<T extends SelectOptionRequired> = CommonSelectP
  * @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 onSearchFilter - Custom filter function for search, default is "item.label.match(new RegExp(searchValue, 'i'))"
  */
 export declare function ComboBox<T extends SelectOptionRequired>(props: ListComboBoxProps<T> | GroupedComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;

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 n}from"./SelectMenuItem.js";const r=r=>{const{onItemSelect:o,onItemKeyDown:s,itemRefs:c,groups:a,search:f}=r,u=t((()=>{if(""===f)return a;const e=new RegExp(f,"i");return a.map((t=>({title:t.title,items:t.items.filter((t=>t.label.match(e)))}))).filter((e=>e.items.length>0))}),[a,f]),p=t((()=>{const e=u.map((e=>e.items.length));return l(e)}),[u]);return 0===u.length?e(m,{children:"No items found"}):"values"in r?u.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,l)=>e(n,{index:l+p[m],childOffset:0,item:i,multiselect:!0,itemRefs:c,onItemKeyDown:s,onItemSelect:o,values:r.values},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`))):u.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,l)=>e(n,{index:l+p[m],childOffset:0,item:i,itemRefs:c,onItemKeyDown:s,onItemSelect:o},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`)))};export{r 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 l}from"./Select.utils.js";import{SelectMenuItem as n}from"./SelectMenuItem.js";const r=r=>{const{onItemSelect:o,onItemKeyDown:s,itemRefs:c,groups:a,search:f,onSearchFilter:u}=r,p=t((()=>{if(""===f)return a;const e=new RegExp(f,"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 r?p.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,l)=>e(n,{index:l+d[m],childOffset:0,item:i,multiselect:!0,itemRefs:c,onItemKeyDown:s,onItemSelect:o,values:r.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(n,{index:l+d[m],childOffset:0,item:i,itemRefs:c,onItemKeyDown:s,onItemSelect:o},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`)))};export{r as GroupedSelectMenu};

package/dist/molecules/Select/ListSelectMenu.js

@@ -1 +1 @@
-import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useMemo as m}from"react";import{Menu as i}from"@equinor/eds-core-react";import{AddTagItem as o}from"./AddTagItem.js";import{NoItemsFoundText as r,NoTagFoundText as l}from"./Select.styles.js";import{flattenOptions as s,getChildOffset as d}from"./Select.utils.js";import{SelectMenuItem as a}from"./SelectMenuItem.js";const c=c=>{const{search:u,items:f,onItemSelect:h,itemRefs:p,onItemKeyDown:I}=c,x=m((()=>{if(""===u)return f;const e=new RegExp(u,"i");return s(f).map((({value:e,label:t})=>({value:e,label:t}))).filter((t=>t.label.match(e)))}),[f,u]);if(0===x.length&&!c.onAddItem)return e(r,{children:"No items found"});const g=x.some((e=>e.children&&e.children.length>0));if("values"in c){const m=x.map(((e,t)=>({childOffset:d(x,t),index:t,item:e,itemRefs:p,onItemKeyDown:I,onItemSelect:h,itemValue:e.value,values:c.values,parentHasNestedItems:g})));return"onAddItem"in c&&c.onAddItem&&""!==u?t(n,{children:[e(i.Section,{title:"Add tag",index:0,children:e(o,{index:0,itemRefs:p,onItemKeyDown:I,onAddItem:c.onAddItem,children:u})}),e(i.Section,{title:"Tag search results",index:1,children:m.length>0?m.map(((t,n)=>e(a,{multiselect:!0,...t,index:n+1},`menu-item-${n}-${t.itemValue}`))):t(l,{children:['No tag for "',u,'" found.']})})]}):m.map(((t,n)=>e(a,{multiselect:!0,...t},`menu-item-${n}-${t.itemValue}`)))}return x.map(((t,n)=>e(a,{childOffset:d(x,n),index:n,item:t,itemRefs:p,onItemKeyDown:I,onItemSelect:h,parentHasNestedItems:g},`menu-item-${n}-${t.value}`)))};export{c as ListSelectMenu};
+import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useMemo as m}from"react";import{Menu as i}from"@equinor/eds-core-react";import{AddTagItem as o}from"./AddTagItem.js";import{NoItemsFoundText as r,NoTagFoundText as l}from"./Select.styles.js";import{flattenOptions as s,getChildOffset as d}from"./Select.utils.js";import{SelectMenuItem as c}from"./SelectMenuItem.js";const a=a=>{const{search:u,items:f,onItemSelect:h,itemRefs:I,onItemKeyDown:p,onSearchFilter:x}=a,S=m((()=>{if(""===u)return f;const e=new RegExp(u,"i");return s(f).filter((t=>void 0!==x?x(u,t):t.label.match(e)))}),[f,x,u]);if(0===S.length&&!a.onAddItem)return e(r,{children:"No items found"});const g=S.some((e=>e.children&&e.children.length>0));if("values"in a){const m=S.map(((e,t)=>({childOffset:d(S,t),index:t,item:e,itemRefs:I,onItemKeyDown:p,onItemSelect:h,itemValue:e.value,values:a.values,parentHasNestedItems:g})));return"onAddItem"in a&&a.onAddItem&&""!==u?t(n,{children:[e(i.Section,{title:"Add tag",index:0,children:e(o,{index:0,itemRefs:I,onItemKeyDown:p,onAddItem:a.onAddItem,children:u})}),e(i.Section,{title:"Tag search results",index:1,children:m.length>0?m.map(((t,n)=>e(c,{multiselect:!0,...t,index:n+1},`menu-item-${n}-${t.itemValue}`))):t(l,{children:['No tag for "',u,'" found.']})})]}):m.map(((t,n)=>e(c,{multiselect:!0,...t},`menu-item-${n}-${t.itemValue}`)))}return S.map(((t,n)=>e(c,{childOffset:d(S,n),index:n,item:t,itemRefs:I,onItemKeyDown:p,onItemSelect:h,parentHasNestedItems:g},`menu-item-${n}-${t.value}`)))};export{a as ListSelectMenu};

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

@@ -1,3 +1,3 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, SelectOptionRequired, SingleSelectCommon } from './Select.types';
-export type SelectComponentProps<T extends SelectOptionRequired> = CommonSelectProps & (SingleSelectCommon<T> | MultiSelectCommon<T>) & (ListSelectProps<T> | GroupedSelectProps<T>);
+export type SelectComponentProps<T extends SelectOptionRequired> = CommonSelectProps<T> & (SingleSelectCommon<T> | MultiSelectCommon<T>) & (ListSelectProps<T> | GroupedSelectProps<T>);
 export declare const Select: <T extends SelectOptionRequired>(props: SelectComponentProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Select/Select.js

@@ -1 +1 @@
-import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useRef as t,useMemo as o}from"react";import{Label as r,CircularProgress as l,Icon as a}from"@equinor/eds-core-react";import{thumbs_up as i,warning_filled as c,error_filled as s,arrow_drop_up as d,arrow_drop_down as m,clear as h}from"@equinor/eds-icons";import{tokens as u}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useSelect as p}from"../../atoms/hooks/useSelect.js";import{GroupedSelectMenu as g}from"./GroupedSelectMenu.js";import{ListSelectMenu as b}from"./ListSelectMenu.js";import{ValueText as f,StyledChip as v,Wrapper as x,Container as y,Section as I,PlaceholderText as O,ClearButton as k,HelperWrapper as C,StyledMenu as S}from"./Select.styles.js";import{useOutsideClick as w}from"../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";const{colors:$}=u,j=u=>{const{clearable:j=!0,loading:D=!1,disabled:R=!1,lightBackground:B=!1,underlineHighlight:K=!1,sortValues:_=!0,placeholder:q="Select...",label:T,helperText:z,showHelperIcon:A=!0,meta:H,id:V=`amplify-combobox-${T}`,variant:W,inDialog:F=!1}=u,{handleOnAddItem:M,handleOnClear:E,handleOnItemKeyDown:G,handleOnItemSelect:L,handleOnSearchChange:N,handleOnSearchKeyDown:J,handleToggleOpen:P,itemRefs:Q,search:U,selectedValues:X,handleOnClose:Y,handleOnOpen:Z,handleOnRemoveItem:ee,open:ne,searchRef:te,tryingToRemoveItem:oe}=p({...u,clearable:j,loading:D,disabled:R,lightBackground:B,underlineHighlight:K,sortValues:_,placeholder:q}),re=t(null),le=t(null),ae=o((()=>!!T||!!H),[T,H]),ie=o((()=>!!z),[z]),ce=o((()=>{if(A)switch(W){case"error":return s;case"warning":return c;case"success":return i}}),[A,W]);w(le.current,(e=>{F&&ne&&e.target&&re.current&&le.current&&!re.current.contains(e.target)&&!le.current?.contains(e.target)&&Y()}));const se=o((()=>"value"in u&&u.value?e(f,{children:u.value.label}):X.map((n=>e(v,{"data-testid":"amplify-combobox-chip",className:"amplify-combo-box-chip",onDelete:()=>ee(n),$tryingToRemove:oe?.value===n.value,$lightBackground:B,children:n.label},n.value)))),[X,oe,B,u,ee]);return n("div",{children:[ae&&e(r,{label:T,meta:H,htmlFor:V}),n(x,{children:[n(y,{"data-testid":"combobox-container",ref:re,onClick:Z,"aria-expanded":ne,$variant:W,$lightBackground:B,children:[n(I,{children:[""===U&&0===X.length&&e(O,{children:q}),(""===U||"values"in u&&X.length>0)&&se,e("input",{id:V,disabled:R||D,ref:te,type:"search",role:"combobox",value:U,autoComplete:"off",onChange:N,onKeyDownCapture:J})]}),D?e(l,{size:16}):e(a,{onClick:P,data:ne?d:m,color:$.interactive.primary__resting.rgba}),j&&X.length>0&&!D&&e(k,{id:"clear",variant:"ghost_icon",onClick:E,"data-testid":"clearBtn",children:e(a,{data:h,size:18})})]}),ie&&n(C,{$variant:W,children:[ce&&e(a,{data:ce,size:16}),e(r,{label:z,htmlFor:V})]})]}),ne&&e(S,{ref:le,open:!0,id:"combobox-menu",anchorEl:re.current,onClose:Y,placement:"bottom",style:{width:`${re.current?.clientWidth}px`,maxWidth:`${re.current?.clientWidth}px`},children:"groups"in u&&u.groups?e(g,{...u,search:U,itemRefs:Q,onItemSelect:L,onItemKeyDown:G}):e(b,{...u,search:U,itemRefs:Q,onAddItem:"values"in u&&u.onAddItem?M:void 0,onItemSelect:L,onItemKeyDown:G})})]})};export{j as Select};
+import{jsx as e,jsxs as n}from"react/jsx-runtime";import{useRef as o,useMemo as t}from"react";import{Label as r,CircularProgress as l,Icon as a}from"@equinor/eds-core-react";import{thumbs_up as i,warning_filled as c,error_filled as s,arrow_drop_up as d,arrow_drop_down as m,clear as u}from"@equinor/eds-icons";import{tokens as h}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useSelect as p}from"../../atoms/hooks/useSelect.js";import{GroupedSelectMenu as g}from"./GroupedSelectMenu.js";import{ListSelectMenu as b}from"./ListSelectMenu.js";import{ValueText as v,ComboBoxChip as f,Wrapper as y,Container as x,Section as C,PlaceholderText as S,ClearButton as I,HelperWrapper as O,StyledMenu as k}from"./Select.styles.js";import{useOutsideClick as w}from"../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";const{colors:D}=h,R=h=>{const{clearable:R=!0,loading:$=!1,disabled:j=!1,lightBackground:V=!1,underlineHighlight:B=!1,sortValues:F=!0,placeholder:K="Select...",label:T,helperText:_,showHelperIcon:q=!0,meta:z,id:A=`amplify-combobox-${T}`,variant:H,inDialog:W=!1,onSearchFilter:M}=h,{handleOnAddItem:E,handleOnClear:G,handleOnItemKeyDown:L,handleOnItemSelect:N,handleOnSearchChange:J,handleOnSearchKeyDown:P,handleToggleOpen:Q,itemRefs:U,search:X,selectedValues:Y,handleOnClose:Z,handleOnOpen:ee,handleOnRemoveItem:ne,open:oe,searchRef:te,tryingToRemoveItem:re}=p({...h,clearable:R,loading:$,disabled:j,lightBackground:V,underlineHighlight:B,sortValues:F,placeholder:K}),le=o(null),ae=o(null),ie=t((()=>!!T||!!z),[T,z]),ce=t((()=>!!_),[_]),se=t((()=>{if(q)switch(H){case"error":return s;case"warning":return c;case"success":return i}}),[q,H]);w(ae.current,(e=>{W&&oe&&e.target&&le.current&&ae.current&&!le.current.contains(e.target)&&!ae.current?.contains(e.target)&&Z()}));const de=t((()=>"value"in h&&h.value?e(v,{children:h.value.label}):Y.map((n=>"customValueComponent"in h&&h.customValueComponent?e(h.customValueComponent,{item:n,onDelete:()=>ne(n),tryingToRemove:void 0!==re&&re.value===n.value},n.value):e(f,{"data-testid":"amplify-combobox-chip",className:"amplify-combo-box-chip",onDelete:()=>ne(n),$tryingToRemove:re?.value===n.value,$lightBackground:V,children:n.label},n.value)))),[Y,re,V,h,ne]);return n("div",{children:[ie&&e(r,{label:T,meta:z,htmlFor:A}),n(y,{children:[n(x,{"data-testid":"combobox-container",ref:le,onClick:ee,"aria-expanded":oe,$variant:H,$lightBackground:V,children:[n(C,{children:[""===X&&0===Y.length&&e(S,{children:K}),(""===X||"values"in h&&Y.length>0)&&de,e("input",{id:A,disabled:j||$,ref:te,type:"search",role:"combobox",value:X,autoComplete:"off",onChange:J,onKeyDownCapture:P})]}),$?e(l,{size:16}):e(a,{onClick:Q,data:oe?d:m,color:D.interactive.primary__resting.rgba}),R&&Y.length>0&&!$&&e(I,{id:"clear",variant:"ghost_icon",onClick:G,"data-testid":"clearBtn",children:e(a,{data:u,size:18})})]}),ce&&n(O,{$variant:H,children:[se&&e(a,{data:se,size:16}),e(r,{label:_,htmlFor:A})]})]}),oe&&e(k,{ref:ae,open:!0,id:"combobox-menu",anchorEl:le.current,onClose:Z,placement:"bottom",style:{width:`${le.current?.clientWidth}px`,maxWidth:`${le.current?.clientWidth}px`},children:"groups"in h&&h.groups?e(g,{...h,search:X,itemRefs:U,onItemSelect:N,onItemKeyDown:L,onSearchFilter:M}):e(b,{...h,search:X,itemRefs:U,onAddItem:"values"in h&&h.onAddItem?E:void 0,onItemSelect:N,onItemKeyDown:L,onSearchFilter:M})})]})};export{R as Select};

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

@@ -24,12 +24,12 @@ declare const ClearButton: import("styled-components/dist/types").IStyledCompone
     Group: typeof import("@equinor/eds-core-react/dist/types/components/Button/ButtonGroup").ButtonGroup;
     Toggle: typeof import("@equinor/eds-core-react/dist/types/components/Button/ToggleButton/ToggleButton").ToggleButton;
 }, keyof import("react").Component<any, {}, any>>;
-interface StyledChipProps {
+interface ComboBoxChipProps {
     $tryingToRemove: boolean;
     $lightBackground?: boolean;
     className: string;
 }
-declare const StyledChip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<import("react").HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & import("../Chip/Chip").BaseChipProps & import("../Chip/Chip").InteractiveChipBase & {
+declare const ComboBoxChip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<(Omit<Omit<import("react").HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & import("../Chip/Chip").BaseChipProps & import("../Chip/Chip").InteractiveChipBase & {
     onClick: (event: import("react").MouseEvent<HTMLButtonElement> | import("react").KeyboardEvent<HTMLButtonElement>) => void;
     onDelete?: undefined;
 } & import("react").RefAttributes<HTMLDivElement | HTMLButtonElement>, "ref"> & {
@@ -44,7 +44,7 @@ declare const StyledChip: import("styled-components/dist/types").IStyledComponen
     onDelete?: undefined;
 } & import("react").RefAttributes<HTMLDivElement | HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | HTMLButtonElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement | HTMLButtonElement> | null | undefined;
-}), StyledChipProps>> & string & Omit<import("react").ForwardRefExoticComponent<(Omit<import("react").HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & (import("../Chip/Chip").ClickableChipProps | import("../Chip/Chip").DeletableChipProps | (import("../Chip/Chip").BaseChipProps & {
+}), ComboBoxChipProps>> & string & Omit<import("react").ForwardRefExoticComponent<(Omit<import("react").HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & (import("../Chip/Chip").ClickableChipProps | import("../Chip/Chip").DeletableChipProps | (import("../Chip/Chip").BaseChipProps & {
     onClick?: undefined;
     onDelete?: undefined;
 }))) & import("react").RefAttributes<HTMLDivElement | HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
@@ -128,4 +128,4 @@ declare const SmallButton: import("styled-components/dist/types").IStyledCompone
     Group: typeof import("@equinor/eds-core-react/dist/types/components/Button/ButtonGroup").ButtonGroup;
     Toggle: typeof import("@equinor/eds-core-react/dist/types/components/Button/ToggleButton/ToggleButton").ToggleButton;
 }, keyof import("react").Component<any, {}, any>>;
-export { Button, ClearButton, Container, MenuItemSpacer, StyledMenu, NoTagFoundText, NoItemsFoundText, PlaceholderText, StyledChip, Section, MenuItemWrapper, SmallButton, StyledMenuItem, ValueText, };
+export { Button, ClearButton, Container, MenuItemSpacer, StyledMenu, NoTagFoundText, NoItemsFoundText, PlaceholderText, ComboBoxChip, Section, MenuItemWrapper, SmallButton, StyledMenuItem, ValueText, };

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

@@ -1,56 +1,60 @@
-import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";export{Button}from"@equinor/eds-core-react";import{VARIANT_HELPER_COLORS as a,colors as i,VARIANT_COLORS as o}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import{Chip as s}from"../Chip/Chip.js";import l,{css as d}from"styled-components";const c=l.div`
+import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";export{Button}from"@equinor/eds-core-react";import{animation as a}from"../../atoms/style/animation.js";import{VARIANT_HELPER_COLORS as i,colors as o,VARIANT_COLORS as n}from"../../atoms/style/colors.js";import{spacings as s}from"../../atoms/style/spacings.js";import{Chip as l}from"../Chip/Chip.js";import d,{css as c}from"styled-components";const p=d.div`
   display: flex;
   flex-direction: column;
-  gap: ${n.small};
-`,p=l.span`
+  gap: ${s.small};
+`,g=d.span`
   display: flex;
-  gap: ${n.small};
+  gap: ${s.small};
   align-items: center;
-  margin-left: ${n.small};
-  width: calc(100% - ${n.small});
+  margin-left: ${s.small};
+  width: calc(100% - ${s.small});
   > label {
     margin: 0;
   }
-  ${({$variant:t})=>t?d`
+  ${({$variant:t})=>t?c`
       > label {
-        color: ${a[t]};
+        color: ${i[t]};
       }
       > svg {
         flex-shrink: 0;
-        fill: ${a[t]};
+        fill: ${i[t]};
       }
     `:""}
-`,g=l.div`
+`,b=d.div`
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
   align-items: center;
   padding: 6px 8px;
+  transition:
+    background ${a.transitionMS},
+    box-shadow ${a.transitionMS};
   &:hover:not(:has(input:disabled)) {
     cursor: pointer;
+    background: ${o.ui.background__light_medium.rgba};
   }
 
-  ${({$variant:t})=>t?"dirty"===t?d`
-        box-shadow: inset 0 -2px 0 0 ${o[t]};
+  ${({$variant:t})=>t?"dirty"===t?c`
+        box-shadow: inset 0 -2px 0 0 ${n[t]};
         &:hover {
-          box-shadow: inset 0 -2px 0 0 ${o[t]};
+          box-shadow: inset 0 -2px 0 0 ${n[t]};
         }
-      `:d`
-      outline: 1px solid ${o[t]};
+      `:c`
+      outline: 1px solid ${n[t]};
       &:hover {
-        box-shadow: inset 0 -1px 0 0 ${o[t]};
+        box-shadow: inset 0 -1px 0 0 ${n[t]};
       }
-    `:d`
-        box-shadow: inset 0 -1px 0 0 ${i.text.static_icons__tertiary.rgba};
+    `:c`
+        box-shadow: inset 0 -1px 0 0 ${o.text.static_icons__tertiary.rgba};
         &:hover {
-          box-shadow: inset 0 -2px 0 0 ${i.text.static_icons__tertiary.rgba};
+          box-shadow: inset 0 -2px 0 0 ${o.text.static_icons__tertiary.rgba};
         }
       `}
 
-  ${({$lightBackground:t})=>t?`background-color: ${i.ui.background__default.rgba}`:`background-color: ${i.ui.background__light.rgba}`};
+  ${({$lightBackground:t})=>t?`background-color: ${o.ui.background__default.rgba}`:`background-color: ${o.ui.background__light.rgba}`};
 
   &[aria-expanded='true'] {
-    box-shadow: inset 0 -2px 0 0 ${i.interactive.primary__resting.rgba};
+    box-shadow: inset 0 -2px 0 0 ${o.interactive.primary__resting.rgba};
   }
   &:has(input:disabled) {
     outline: none;
@@ -63,7 +67,7 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
   > svg:not([role='progressbar']) {
     cursor: pointer;
     &:hover {
-      background: ${i.interactive.primary__hover_alt.rgba};
+      background: ${o.interactive.primary__hover_alt.rgba};
       border-radius: 50%;
     }
   }
@@ -73,13 +77,13 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
     box-shadow: none;
     > svg:not([role='progressbar']) {
       cursor: not-allowed;
-      fill: ${i.interactive.disabled__text.rgba};
+      fill: ${o.interactive.disabled__text.rgba};
       &:hover {
         background: transparent;
       }
     }
     > label {
-      color: ${i.interactive.disabled__text.rgba};
+      color: ${o.interactive.disabled__text.rgba};
     }
   }
 
@@ -88,11 +92,11 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
       width: calc(100% - 24px);
     }
   }
-`,b=l.section`
+`,u=d.section`
   position: relative;
   display: flex;
   flex-wrap: wrap;
-  gap: ${n.x_small};
+  gap: ${s.x_small};
   min-height: 24px;
   input[type='search'] {
     background: transparent;
@@ -100,7 +104,7 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
     flex-grow: 1;
     padding: 0;
     font-family: 'Equinor', sans-serif;
-    color: ${i.text.static_icons__default.rgba};
+    color: ${o.text.static_icons__default.rgba};
     outline: none;
     border: none;
   }
@@ -115,14 +119,14 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
   }
   &:has(input:disabled) {
     > p {
-      color: ${i.interactive.disabled__text.rgba};
+      color: ${o.interactive.disabled__text.rgba};
     }
     > .amplify-combo-box-chip {
       cursor: not-allowed;
-      background: ${i.interactive.disabled__fill.rgba};
-      color: ${i.interactive.disabled__text.rgba};
+      background: ${o.interactive.disabled__fill.rgba};
+      color: ${o.interactive.disabled__text.rgba};
       > svg {
-        fill: ${i.interactive.disabled__text.rgba};
+        fill: ${o.interactive.disabled__text.rgba};
         &:hover {
           cursor: not-allowed;
           background: none;
@@ -130,7 +134,7 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
       }
     }
   }
-`,h=l(t)`
+`,h=d(t)`
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
@@ -138,16 +142,16 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
   width: 24px;
   height: 24px;
   svg {
-    fill: ${i.text.static_icons__secondary.rgba};
+    fill: ${o.text.static_icons__secondary.rgba};
   }
   &:after {
     width: 24px;
     height: 24px;
     left: 0;
   }
-`,u=l(s)`
-  background: ${({$tryingToRemove:t,$lightBackground:e})=>t?i.interactive.primary__hover_alt.rgba:e?i.ui.background__light.rgba:i.ui.background__default.rgba} !important;
-`,x=l(e.Item)`
+`,m=d(l)`
+  background: ${({$tryingToRemove:t,$lightBackground:e})=>t?o.interactive.primary__hover_alt.rgba:e?o.ui.background__light.rgba:o.ui.background__default.rgba} !important;
+`,x=d(e.Item)`
   flex-grow: 1;
   border-radius: 2px;
   ${({$paddedLeft:t})=>t&&"margin-left: 36px"};
@@ -159,32 +163,32 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
   }
 
   &:hover {
-    background: ${i.interactive.primary__hover_alt.rgba};
+    background: ${o.interactive.primary__hover_alt.rgba};
   }
 
   &:focus-visible {
-    outline: 2px dashed ${i.interactive.primary__resting.rgba};
+    outline: 2px dashed ${o.interactive.primary__resting.rgba};
   }
-`,m=l.hr`
-  height: calc(100% + ${n.medium} * 2);
+`,_=d.hr`
+  height: calc(100% + ${s.medium} * 2);
   justify-self: center;
-  width: ${n.x_large};
-`,_=l(r)`
+  width: ${s.x_large};
+`,f=d(r)`
   position: absolute;
-  color: ${i.text.static_icons__tertiary.rgba};
+  color: ${o.text.static_icons__tertiary.rgba};
   top: calc(50%);
   transform: translate(0, -50%);
-`,f=l(_)`
+`,$=d(f)`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  color: ${i.text.static_icons__default.rgba};
+  color: ${o.text.static_icons__default.rgba};
   max-width: 100%;
-`,$=l(r)`
-  margin: ${n.medium};
-`,v=l(r)`
-  margin-left: ${n.medium};
-`,w=l(e)`
+`,v=d(r)`
+  margin: ${s.medium};
+`,w=d(r)`
+  margin-left: ${s.medium};
+`,y=d(e)`
   max-height: 20rem;
   max-width: inherit;
   overflow-y: auto;
@@ -192,11 +196,11 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
     width: inherit;
     max-width: inherit;
   }
-`,y=l.div`
+`,k=d.div`
   display: flex;
   align-items: center;
-  padding: 0 ${n.small};
-`,k=l(t)`
+  padding: 0 ${s.small};
+`,j=d(t)`
   width: 36px;
   height: 36px;
-`;export{h as ClearButton,g as Container,p as HelperWrapper,m as MenuItemSpacer,y as MenuItemWrapper,v as NoItemsFoundText,$ as NoTagFoundText,_ as PlaceholderText,b as Section,k as SmallButton,u as StyledChip,w as StyledMenu,x as StyledMenuItem,f as ValueText,c as Wrapper};
+`;export{h as ClearButton,m as ComboBoxChip,b as Container,g as HelperWrapper,_ as MenuItemSpacer,k as MenuItemWrapper,w as NoItemsFoundText,v as NoTagFoundText,f as PlaceholderText,u as Section,j as SmallButton,y as StyledMenu,x as StyledMenuItem,$ as ValueText,p as Wrapper};

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

@@ -1,4 +1,4 @@
-import { KeyboardEvent, MutableRefObject } from 'react';
+import { FC, KeyboardEvent, MutableRefObject } from 'react';
 import { Variants } from '../../atoms/types/variants';
 export interface SelectOptionRequired {
     value: string;
@@ -16,6 +16,11 @@ export interface MultiSelectCommon<T extends SelectOptionRequired> {
     onSelect: (values: SelectOption<T>[], selectedValue?: SelectOption<T>) => void;
     syncParentChildSelection?: boolean;
     onAddItem?: (item: string) => void;
+    customValueComponent?: FC<{
+        item: SelectOption<T>;
+        onDelete: () => void;
+        tryingToRemove: boolean;
+    }>;
 }
 export interface SelectGroup<T extends SelectOptionRequired> {
     title: string;
@@ -37,6 +42,7 @@ export interface SelectMenuProps<T extends SelectOptionRequired> {
     itemRefs: MutableRefObject<(HTMLButtonElement | null)[]>;
     onItemKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
     onItemSelect: (item: SelectOption<T>) => void;
+    onSearchFilter?: (searchValue: string, item: T) => void;
 }
 interface SelectMenuItemProps<T extends SelectOptionRequired> {
     item: SelectOption<T>;
@@ -56,7 +62,7 @@ export type MultiSelectMenuItemProps<T extends SelectOptionRequired> = {
     values: SelectOption<T>[];
 } & Omit<SelectMenuProps<T>, 'search'> & SelectMenuItemProps<T>;
 export declare const VARIANT_OPTIONS: Variants[];
-export interface CommonSelectProps {
+export interface CommonSelectProps<T extends SelectOptionRequired> {
     id?: string;
     variant?: Variants;
     label?: string;
@@ -73,5 +79,6 @@ export interface CommonSelectProps {
     onSearchChange?: (inputValue: string) => void;
     inDialog?: boolean;
     onOpenCallback?: (value: boolean) => void;
+    onSearchFilter?: (searchValue: string, item: T) => void;
 }
 export {};

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

@@ -1,6 +1,6 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, SelectOptionRequired, SingleSelectCommon } from '../Select.types';
-export type ListSingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps & SingleSelectCommon<T> & ListSelectProps<T>;
-export type GroupedSingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps & SingleSelectCommon<T> & GroupedSelectProps<T>;
+export type ListSingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> & SingleSelectCommon<T> & ListSelectProps<T>;
+export type GroupedSingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> & SingleSelectCommon<T> & GroupedSelectProps<T>;
 /**
  * @param clearable - If users should be able to clear the input, defaults to true
  * @param loading - Show loader, defaults to false
@@ -8,5 +8,6 @@ export type GroupedSingleSelectProps<T extends SelectOptionRequired> = CommonSel
  * @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 onSearchFilter - Custom filter function for search, default is "item.label.match(new RegExp(searchValue, 'i'))"
  */
 export declare function SingleSelect<T extends SelectOptionRequired>(props: ListSingleSelectProps<T> | GroupedSingleSelectProps<T>): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/Stepper/Step/Step.js

@@ -1,7 +1,11 @@
-import{jsxs as t,jsx as r}from"react/jsx-runtime";import{useState as e,useMemo as o}from"react";import{Typography as i}from"@equinor/eds-core-react";import{colors as l}from"../../../atoms/style/colors.js";import{spacings as n}from"../../../atoms/style/spacings.js";import{StepIcon as s}from"./StepIcon.js";import{useStepper as c}from"../../../providers/StepperProvider.js";import a from"styled-components";const p=a.div`
+import{jsxs as r,jsx as t}from"react/jsx-runtime";import{useMemo as e}from"react";import{Typography as o}from"@equinor/eds-core-react";import{colors as i}from"../../../atoms/style/colors.js";import{spacings as s}from"../../../atoms/style/spacings.js";import{StepIcon as a}from"./StepIcon.js";import{useStepper as c}from"../../../providers/StepperProvider.js";import n,{css as l}from"styled-components";const p=n.div`
   display: flex;
-  gap: ${n.small};
+  gap: ${s.small};
   align-items: center;
   white-space: nowrap;
-  ${t=>t.$clickable&&"\n    &:hover {\n        cursor: pointer;\n    }\n  "}
-`,d=({index:n,onlyShowCurrentStepLabel:a=!1,children:d})=>{const{currentStep:m,setCurrentStep:u}=c(),[f,h]=e(null),b=o((()=>n<m?"body_short":"body_short_bold"),[m,n]),x=o((()=>n>m?l.interactive.disabled__text.rgba:l.text.static_icons__default.rgba),[m,n]);return t(p,{"data-testid":"step",ref:t=>{null===f&&null!==t&&h(t)},style:null===f||a?void 0:{width:`calc(${f.clientWidth}px)`},$clickable:n<m,onClick:()=>{n<m&&u(n)},children:[r(s,{index:n}),(!a||m===n)&&r(i,{variant:b,color:x,children:d})]})};export{d as Step,d as default};
+  ${r=>r.$clickable&&l`
+      &:hover {
+        cursor: pointer;
+      }
+    `}
+`,m=({index:s,onlyShowCurrentStepLabel:n=!1,children:l})=>{const{currentStep:m,setCurrentStep:d}=c(),f=e((()=>s<m?"body_short":"body_short_bold"),[m,s]),b=e((()=>s>m?i.interactive.disabled__text.rgba:i.text.static_icons__default.rgba),[m,s]);return r(p,{"data-testid":"step",$clickable:s<m,onClick:()=>{s<m&&d(s)},children:[t(a,{index:s}),(!n||m===s)&&t(o,{variant:f,color:b,children:l})]})};export{m as Step,m as default};