@equinor/amplify-component-lib 13.2.7 → 14.0.0

package/dist/molecules/Select/GroupedSelectPersistent.js

@@ -1 +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);return m.length===0?o(n,{children:`No items found`}):`value`in c?null: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};
+import{useGroupedSelectItems as e}from"./Select.hooks.js";import{GroupTitle as t,PersistentGroupsWrapper as n,PersistentNoItemsFoundText 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);return m.length===0?o(r,{children:`No items found`}):`value`in c?null:o(n,{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/ListSelectPersistent.js

@@ -1 +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,mode:h}));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};
+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,NoTagFoundText as i,PersistentNoItemsFoundText 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(a,{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,mode:h}));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(i,{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

@@ -1,5 +1,5 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, PersistentSelectProps, SelectOptionRequired } from "../Select.types.js";
-import * as react58 from "react";
+import * as react54 from "react";
 
 //#region src/molecules/Select/PersistentComboBox/PersistentComboBox.d.ts
 type PersistentComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps<T> & MultiSelectCommon<T> & PersistentSelectProps & (GroupedSelectProps<T> | ListSelectProps<T>);
@@ -18,6 +18,6 @@ type PersistentComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps
  * @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>): react58.JSX.Element;
+declare function PersistentComboBox<T extends SelectOptionRequired>(props: PersistentComboBoxProps<T>): react54.JSX.Element;
 //#endregion
 export { PersistentComboBox, PersistentComboBoxProps };

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

@@ -1,5 +1,5 @@
 import { BaseChipProps, ClickableChipProps, DeletableChipProps } from "../Chip/Chip.js";
-import * as react59 from "react";
+import * as react55 from "react";
 import "@equinor/eds-core-react";
 import * as styled_components11 from "styled-components";
 import * as styled_components_dist_types5 from "styled-components/dist/types";
@@ -11,15 +11,15 @@ interface ComboBoxChipProps {
   $lightBackground?: boolean;
   className: string;
 }
-declare const ComboBoxChip: styled_components_dist_types5.IStyledComponentBase<"web", styled_components11.FastOmit<styled_components11.FastOmit<((Omit<react59.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
+declare const ComboBoxChip: styled_components_dist_types5.IStyledComponentBase<"web", styled_components11.FastOmit<styled_components11.FastOmit<((Omit<react55.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react59.RefAttributes<HTMLDivElement | HTMLButtonElement>) & styled_components_dist_types5.BaseObject, keyof ComboBoxChipProps> & ComboBoxChipProps, never> & Partial<Pick<styled_components11.FastOmit<((Omit<react59.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
+}) | ClickableChipProps | DeletableChipProps)) & react55.RefAttributes<HTMLDivElement | HTMLButtonElement>) & styled_components_dist_types5.BaseObject, keyof ComboBoxChipProps> & ComboBoxChipProps, never> & Partial<Pick<styled_components11.FastOmit<((Omit<react55.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react59.RefAttributes<HTMLDivElement | HTMLButtonElement>) & styled_components_dist_types5.BaseObject, keyof ComboBoxChipProps> & ComboBoxChipProps, never>>> & string & Omit<react59.ForwardRefExoticComponent<(Omit<react59.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
+}) | ClickableChipProps | DeletableChipProps)) & react55.RefAttributes<HTMLDivElement | HTMLButtonElement>) & styled_components_dist_types5.BaseObject, keyof ComboBoxChipProps> & ComboBoxChipProps, never>>> & string & Omit<react55.ForwardRefExoticComponent<(Omit<react55.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onClick"> & ((BaseChipProps & {
   onClick?: undefined;
   onDelete?: undefined;
-}) | ClickableChipProps | DeletableChipProps)) & react59.RefAttributes<HTMLDivElement | HTMLButtonElement>>, keyof react59.Component<any, {}, any>>;
+}) | ClickableChipProps | DeletableChipProps)) & react55.RefAttributes<HTMLDivElement | HTMLButtonElement>>, keyof react55.Component<any, {}, any>>;
 //#endregion
 export { ComboBoxChip };

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

@@ -1,15 +1,15 @@
-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`
+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=`calc(${i.medium} * 2 + 24px)`,p=u.div`
   display: flex;
   flex-direction: column;
   gap: ${i.small};
   ${({$showBackgroundColor:e})=>e&&d`
       background-color: ${r.ui.background__default.rgba};
     `}
-`,p=u.span`
+`,m=u.span`
   display: flex;
   gap: ${i.x_small};
   width: 100%;
-`,m=u.span`
+`,h=u.span`
   display: flex;
   gap: ${i.small};
   align-items: center;
@@ -31,7 +31,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       border-bottom: 1px solid ${r.ui.background__heavy.rgba};
       padding-bottom: ${i.small};
     `}
-`,h=u.div`
+`,g=u.div`
   position: relative;
   display: grid;
   grid-template-columns: 1fr auto;
@@ -101,7 +101,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       width: calc(100% - 24px);
     }
   }
-`,g=u.section`
+`,_=u.section`
   position: relative;
   display: flex;
   flex-wrap: wrap;
@@ -151,7 +151,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       }
     }
   }
-`,_=u(s)`
+`,v=u(s)`
   position: absolute;
   top: 50%;
   transform: translate(0, -50%);
@@ -171,13 +171,13 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
       fill: ${r.interactive.disabled__text.rgba};
     }
   }
-`,v=u(o)`
+`,y=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;
-`,y=u.div`
+`,b=u.div`
   padding: ${i.small} 0;
-`,b=u(l)`
+`,x=u(l)`
   padding: ${i.small} 0 ${i.small} ${i.medium};
-`,x=u(c.Item)`
+`,S=u(c.Item)`
   flex-grow: 1;
   padding-left: 10px;
 
@@ -201,7 +201,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
             background: ${r.interactive.primary__selected_hover.rgba};
           }
         `:``}
-`,S=u.div`
+`,C=u.div`
   position: relative;
   isolation: isolate;
   display: flex;
@@ -211,21 +211,22 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
   overflow: hidden;
   background-color: ${r.ui.background__default.rgba};
   height: ${({$shouldShowLabel:e,$maxHeight:t})=>t||(e?d`calc(100% - 16px)`:`100%`)};
-`,C=u.div`
+`,w=u.div`
   position: sticky;
   top: 0;
   z-index: 1;
-`,w=u.div`
+`,T=u.div`
   flex: 1;
   min-height: 0;
   overflow: auto;
-`,T=u.button`
+`,E=u.button`
   width: 100%;
   display: flex;
   align-items: center;
   padding: ${i.medium} ${i.medium};
   justify-content: flex-start;
   gap: ${i.small};
+  min-height: ${f};
   box-sizing: border-box;
   svg {
     flex-shrink: 0;
@@ -236,19 +237,19 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
   &:focus-visible {
     outline: 2px dashed ${r.interactive.primary__resting.rgba};
   }
-`,E=u.hr`
+`,D=u.hr`
   height: calc(100% + ${i.medium} * 2);
   justify-self: center;
   width: ${i.x_large};
   min-width: ${i.x_large};
-`,D=u(l)`
+`,O=u(l)`
   user-select: none;
   pointer-events: none;
   position: absolute;
   color: ${r.text.static_icons__tertiary.rgba};
   top: calc(50%);
   transform: translate(0, -50%);
-`,O=u(l)`
+`,k=u(l)`
   user-select: none;
   pointer-events: none;
   position: absolute;
@@ -260,11 +261,17 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
   text-overflow: ellipsis;
   color: ${r.text.static_icons__default.rgba};
   max-width: 100%;
-`,k=u(l)`
-  margin: ${i.medium};
 `,A=u(l)`
-  margin-left: ${i.medium};
-`,j=u(c)`
+  margin: ${i.medium};
+`,j=u(l).attrs({group:`navigation`,variant:`menu_title`})`
+  display: flex;
+  align-items: center;
+  margin: 0;
+  padding: ${i.medium};
+  box-sizing: border-box;
+`,M=u(j)`
+  min-height: ${f};
+`,N=u(c)`
   max-height: 20rem;
   max-width: inherit;
   overflow-y: auto;
@@ -272,16 +279,16 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
     width: inherit;
     max-width: inherit;
   }
-`,M=u.div`
+`,P=u.div`
   display: flex;
   align-items: center;
   gap: ${i.small};
-`,N=d`
+`,F=d`
   width: 36px;
   height: 36px;
   flex-shrink: 0;
-`,P=u(s)`
-  ${N}
-`,F=u.div`
-  ${N}
-`;export{F as ChevronPlaceholder,_ as ClearButton,v as ComboBoxChip,h as Container,b as GroupTitle,m as HelperWrapper,p as LabelWrapper,E as MenuItemSpacer,M as MenuItemWrapper,A as NoItemsFoundText,k as NoTagFoundText,S as PersistentComboBoxWrapper,y as PersistentGroupsWrapper,T as PersistentListItem,w as PersistentListScrollArea,C as PersistentStickyWrapper,D as PlaceholderText,g as Section,P as SmallButton,j as StyledMenu,x as StyledMenuItem,O as ValueText,f as Wrapper};
+`,I=u(s)`
+  ${F}
+`,L=u.div`
+  ${F}
+`;export{L as ChevronPlaceholder,v as ClearButton,y as ComboBoxChip,g as Container,x as GroupTitle,h as HelperWrapper,m as LabelWrapper,D as MenuItemSpacer,P as MenuItemWrapper,j as NoItemsFoundText,A as NoTagFoundText,C as PersistentComboBoxWrapper,b as PersistentGroupsWrapper,E as PersistentListItem,T as PersistentListScrollArea,M as PersistentNoItemsFoundText,w as PersistentStickyWrapper,O as PlaceholderText,_ as Section,I as SmallButton,N as StyledMenu,S as StyledMenuItem,k as ValueText,p as Wrapper};

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

@@ -1,5 +1,5 @@
 import { CommonSelectProps, GroupedSelectProps, ListSelectProps, SelectOptionRequired, SingleSelectCommon } from "../Select.types.js";
-import * as react165 from "react";
+import * as react171 from "react";
 
 //#region src/molecules/Select/SingleSelect/SingleSelect.d.ts
 type SingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> & SingleSelectCommon<T> & (ListSelectProps<T> | GroupedSelectProps<T>);
@@ -15,6 +15,6 @@ type SingleSelectProps<T extends SelectOptionRequired> = CommonSelectProps<T> &
  * @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: SingleSelectProps<T>): react165.JSX.Element;
+declare function SingleSelect<T extends SelectOptionRequired>(props: SingleSelectProps<T>): react171.JSX.Element;
 //#endregion
 export { SingleSelect, SingleSelectProps };

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

@@ -1,4 +1,4 @@
-import * as react168 from "react";
+import * as react172 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: react168.ForwardRefExoticComponent<CheckboxProps$1 & react168.RefAttributes<HTMLInputElement>>;
+declare const Checkbox$1: react172.ForwardRefExoticComponent<CheckboxProps$1 & react172.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 react170 from "react";
+import * as react176 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: react170.ForwardRefExoticComponent<RadioProps$1 & react170.RefAttributes<HTMLInputElement>>;
+declare const Radio$1: react176.ForwardRefExoticComponent<RadioProps$1 & react176.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 react172 from "react";
+import * as react178 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: react172.ForwardRefExoticComponent<SwitchProps$1 & react172.RefAttributes<HTMLInputElement>>;
+declare const Switch$1: react178.ForwardRefExoticComponent<SwitchProps$1 & react178.RefAttributes<HTMLInputElement>>;
 //#endregion
 export { Switch$1 as Switch, SwitchProps$1 as SwitchProps };

package/dist/molecules/Skeleton/SkeletonBase/SkeletonBase.d.ts

@@ -1,4 +1,4 @@
-import * as react53 from "react";
+import * as react50 from "react";
 import * as styled_components8 from "styled-components";
 import * as styled_components_dist_types4 from "styled-components/dist/types";
 import * as styled_components_dist_models_Keyframes0 from "styled-components/dist/models/Keyframes";
@@ -8,6 +8,6 @@ declare const skeletonBaseloading: styled_components_dist_models_Keyframes0.defa
 interface SkeletonBaseProps {
   $offset?: number;
 }
-declare const SkeletonBase: styled_components_dist_types4.IStyledComponentBase<"web", styled_components8.FastOmit<styled_components8.FastOmit<react53.DetailedHTMLProps<react53.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset"> & SkeletonBaseProps, never> & Partial<Pick<styled_components8.FastOmit<react53.DetailedHTMLProps<react53.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset"> & SkeletonBaseProps, never>>> & string;
+declare const SkeletonBase: styled_components_dist_types4.IStyledComponentBase<"web", styled_components8.FastOmit<styled_components8.FastOmit<react50.DetailedHTMLProps<react50.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset"> & SkeletonBaseProps, never> & Partial<Pick<styled_components8.FastOmit<react50.DetailedHTMLProps<react50.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$offset"> & SkeletonBaseProps, never>>> & string;
 //#endregion
 export { SkeletonBase, SkeletonBaseProps, skeletonBaseloading };

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

@@ -1,5 +1,5 @@
 import { Tabs as Tabs$1 } from "./Tabs.types.js";
-import * as react49 from "react";
+import * as react34 from "react";
 import { HTMLAttributes, Ref } from "react";
 
 //#region src/molecules/Tabs/Tabs.d.ts
@@ -27,6 +27,6 @@ declare function Tabs<T>({
   onHover,
   ref,
   ...rest
-}: TabsProps<T>): react49.JSX.Element;
+}: TabsProps<T>): react34.JSX.Element;
 //#endregion
 export { Tabs, TabsProps };

package/dist/molecules/TextField/TextField.js

@@ -1,4 +1,4 @@
-import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,colors as n}from"../../atoms/style/colors.js";import{spacings as r}from"../../atoms/style/spacings.js";import{shape as i}from"../../atoms/style/index.js";import{getSkeletonHeight as a,getSkeletonTop as o}from"../../atoms/utils/skeleton.js";import{SkeletonBase as s}from"../Skeleton/SkeletonBase/SkeletonBase.js";import{InputExplanation as c}from"../InputExplanation/InputExplanation.js";import{useEffect as l,useRef as u,useState as d}from"react";import{TextField as f,Typography as p}from"@equinor/eds-core-react";import m,{css as h}from"styled-components";import{jsx as g,jsxs as _}from"react/jsx-runtime";const v=m.div`
+import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS as t,colors as n}from"../../atoms/style/colors.js";import{spacings as r}from"../../atoms/style/spacings.js";import{shape as i}from"../../atoms/style/index.js";import{getSkeletonHeight as a,getSkeletonTop as o}from"../../atoms/utils/skeleton.js";import{InputExplanation as s}from"../InputExplanation/InputExplanation.js";import{SkeletonBase as c}from"../Skeleton/SkeletonBase/SkeletonBase.js";import{useEffect as l,useRef as u,useState as d}from"react";import{TextField as f,Typography as p}from"@equinor/eds-core-react";import m,{css as h}from"styled-components";import{jsx as g,jsxs as _}from"react/jsx-runtime";const v=m.div`
   position: relative;
   height: fit-content;
   input,
@@ -77,7 +77,7 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
         }
       }
     `}
-`,y=m(s)`
+`,y=m(c)`
   position: absolute;
   left: ${r.small};
   border-radius: ${i.corners.borderRadius};
@@ -89,4 +89,4 @@ import{animation as e}from"../../atoms/style/animation.js";import{VARIANT_COLORS
   display: flex;
   gap: ${r.x_small};
   align-items: center;
-`,S=e=>{if(e.maxCharacters&&`type`in e&&e.type!==`text`)throw Error('`maxCharacters` prop is not supported for input types other than "text".');if(e.explanation&&!e.label)throw Error("`explanation` prop requires a `label` to be set on the TextField.");let i={...e,variant:e.variant===`dirty`?void 0:e.variant},s=e.loading?void 0:e.variant,p=o(e),m=a(e),h=u(`${Math.max(20,Math.random()*80)}%`),[S,C]=d(typeof e.value==`string`?e.value.length:0),[w,T]=d(0),E=e=>{if(e){let t=e.getBoundingClientRect().width;T(t)}},D=t=>{e.onChange&&e.onChange(t),e.maxCharacters&&C(t.target.value.length)};return l(()=>{typeof e.value==`string`&&e.maxCharacters&&e.value.length!==S&&C(e.value.length)},[S,e.maxCharacters,e.value]),_(v,{ref:t=>{if(!t||!e.maxCharacters)return;let n=t.querySelector(`input, textarea`);n&&C(n.value.length)},$variant:s,$disabled:e.loading?!1:e.disabled,$helperRightWidth:w,style:{marginBottom:!e.helperText&&e.maxCharacters?`calc(${r.small} + 1rem)`:0},children:[g(f,{...i,label:i.label?_(x,{children:[i.label,e.explanation&&g(c,{position:e.explanationPosition,children:e.explanation})]}):void 0,disabled:e.loading||e.disabled,onChange:D}),e.loading&&g(y,{className:`skeleton`,role:`progressbar`,style:{top:p,height:m,width:h.current}}),e.maxCharacters&&_(b,{ref:E,variant:`helper`,group:`input`,color:i.variant?t[i.variant]:n.text.static_icons__tertiary.rgba,style:{bottom:e.helperText?`0`:`calc((${r.small} + 1rem) * -1)`},children:[S,` / `,e.maxCharacters]})]})};export{S as TextField};
+`,S=e=>{if(e.maxCharacters&&`type`in e&&e.type!==`text`)throw Error('`maxCharacters` prop is not supported for input types other than "text".');if(e.explanation&&!e.label)throw Error("`explanation` prop requires a `label` to be set on the TextField.");let i={...e,variant:e.variant===`dirty`?void 0:e.variant},c=e.loading?void 0:e.variant,p=o(e),m=a(e),h=u(`${Math.max(20,Math.random()*80)}%`),[S,C]=d(typeof e.value==`string`?e.value.length:0),[w,T]=d(0),E=e=>{if(e){let t=e.getBoundingClientRect().width;T(t)}},D=t=>{e.onChange&&e.onChange(t),e.maxCharacters&&C(t.target.value.length)};return l(()=>{typeof e.value==`string`&&e.maxCharacters&&e.value.length!==S&&C(e.value.length)},[S,e.maxCharacters,e.value]),_(v,{ref:t=>{if(!t||!e.maxCharacters)return;let n=t.querySelector(`input, textarea`);n&&C(n.value.length)},$variant:c,$disabled:e.loading?!1:e.disabled,$helperRightWidth:w,style:{marginBottom:!e.helperText&&e.maxCharacters?`calc(${r.small} + 1rem)`:0},children:[g(f,{...i,label:i.label?_(x,{children:[i.label,e.explanation&&g(s,{position:e.explanationPosition,children:e.explanation})]}):void 0,disabled:e.loading||e.disabled,onChange:D}),e.loading&&g(y,{className:`skeleton`,role:`progressbar`,style:{top:p,height:m,width:h.current}}),e.maxCharacters&&_(b,{ref:E,variant:`helper`,group:`input`,color:i.variant?t[i.variant]:n.text.static_icons__tertiary.rgba,style:{bottom:e.helperText?`0`:`calc((${r.small} + 1rem) * -1)`},children:[S,` / `,e.maxCharacters]})]})};export{S as TextField};

package/dist/molecules/Toast/Toast.d.ts

@@ -1,4 +1,4 @@
-import { FC, RefObject } from "react";
+import { FC, ReactNode, RefObject } from "react";
 import { IconData } from "@equinor/eds-icons";
 
 //#region src/molecules/Toast/Toast.d.ts
@@ -7,7 +7,7 @@ interface ToastProps {
   onClose: () => void;
   icon?: IconData;
   variant?: 'neutral' | 'info' | 'warning' | 'error' | 'success';
-  description?: string;
+  description?: ReactNode;
   action?: {
     onClick: () => void;
     text: string;

package/dist/molecules/Toast/Toast.js

@@ -1 +1 @@
-import{colors as e}from"../../atoms/style/colors.js";import{Button as t}from"../Button/Button.js";import{IconButton as n}from"../Button/IconButton/IconButton.js";import{getHeaderIcon as r}from"./Toast.utils.js";import{Container as i,DurationBar as a,Header as o}from"./Toast.styles.js";import{useEffect as s}from"react";import{Icon as c,Typography as l}from"@equinor/eds-core-react";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{close as f}from"@equinor/eds-icons";const p=({title:p,icon:m,onClose:h,variant:g,description:_,action:v,duration:y,ref:b})=>{if(y!==void 0&&y<=0)throw Error(`Duration must be a positive number`);s(()=>{if(!y)return;let e=setTimeout(()=>{h()},y*1e3);return()=>clearTimeout(e)},[y,h]);let x=()=>{v?.onClick(),h()},S=r({icon:m,variant:g});return d(i,{ref:b,$variant:g,children:[d(o,{children:[S&&u(c,{data:S}),u(l,{variant:`h6`,color:e.text.static_icons__default.rgba,children:p}),u(n,{icon:f,variant:`ghost`,onClick:h})]}),_&&u(l,{variant:`body_long`,color:e.text.static_icons__secondary.rgba,children:_}),v&&u(t,{variant:`outlined`,onClick:x,children:v.text}),y&&u(a,{role:`progressbar`,$variant:g,$duration:y})]})};export{p as Toast};
+import{colors as e}from"../../atoms/style/colors.js";import{getHeaderIcon as t}from"./Toast.utils.js";import{ActionButton as n,CloseButton as r,Container as i,Description as a,DurationBar as o,Header as s,HeaderIcon as c,Title as l}from"./Toast.styles.js";import{useEffect as u}from"react";import{Icon as d}from"@equinor/eds-core-react";import{jsx as f,jsxs as p}from"react/jsx-runtime";import{close as m}from"@equinor/eds-icons";const h=({title:h,icon:g,onClose:_,variant:v,description:y,action:b,duration:x,ref:S})=>{if(x!==void 0&&x<=0)throw Error(`Duration must be a positive number`);u(()=>{if(!x)return;let e=setTimeout(()=>{_()},x*1e3);return()=>clearTimeout(e)},[x,_]);let C=()=>{b?.onClick(),_()},w=t({icon:g,variant:v});return p(i,{ref:S,$variant:v,children:[p(s,{$hasIcon:!!w,children:[w&&f(c,{$variant:v,children:f(d,{data:w})}),f(l,{variant:`h6`,color:e.text.static_icons__default.rgba,children:h}),f(r,{icon:m,variant:`ghost`,onClick:_,$variant:v})]}),y&&f(a,{variant:`body_long`,color:e.text.static_icons__secondary.rgba,children:y}),b&&f(n,{variant:`outlined`,onClick:C,$variant:v,children:b.text}),x&&f(o,{role:`progressbar`,$variant:v,$duration:x})]})};export{h as Toast};

package/dist/molecules/Toast/Toast.styles.js

@@ -1,117 +1,85 @@
-import{spacings as e}from"../../atoms/style/spacings.js";import{shape as t}from"../../atoms/style/index.js";import{TOAST_COLORS as n}from"./Toast.utils.js";import r,{css as i,keyframes as a}from"styled-components";const o=r.header`
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{shape as n}from"../../atoms/style/index.js";import{Button as r}from"../Button/Button.js";import{IconButton as i}from"../Button/IconButton/IconButton.js";import{TOAST_COLORS as a}from"./Toast.utils.js";import{Typography as o}from"@equinor/eds-core-react";import s,{keyframes as c}from"styled-components";const l=e=>a[e??`neutral`],u=s.header`
   display: grid;
-  grid-template-columns: minmax(0, 1fr);
-  gap: ${e.small};
-  padding-right: 40px;
-  > h6 {
-    overflow: hidden;
-    text-overflow: ellipsis;
+  grid-template-columns: ${({$hasIcon:e})=>e?`auto minmax(0, 1fr)`:`minmax(0, 1fr)`};
+  align-items: start;
+  gap: ${t.small};
+`,d=s.span`
+  display: inline-flex;
+  align-items: center;
+
+  > svg {
+    color: ${({$variant:e})=>l(e).controlForeground};
   }
-  &:has(> svg:first-child) {
-    grid-template-columns: auto minmax(0, 1fr);
+`,f=s(o)`
+  padding-right: ${t.xx_large};
+`,p=s(r)`
+  align-self: flex-start;
+  width: fit-content;
+  margin-left: ${t.small};
+  color: ${({$variant:e})=>l(e).controlForeground};
+  border-color: ${({$variant:e})=>l(e).controlForeground};
+  &:hover {
+    background: ${({$variant:e})=>l(e).controlHoverBackground};
+    color: ${({$variant:e})=>l(e).controlForegroundHover};
+    border-color: ${({$variant:e})=>l(e).controlForegroundHover};
   }
-  > button {
-    position: absolute;
-    top: ${e.x_small};
-    right: ${e.x_small};
+`,m=s(i)`
+  position: absolute;
+  top: ${t.x_small};
+  right: ${t.x_small};
+  color: ${({$variant:e})=>l(e).controlForeground};
+  &:hover {
+    color: ${({$variant:e})=>l(e).controlForegroundHover};
+    background: ${({$variant:e})=>l(e).controlHoverBackground};
+    border-color: ${({$variant:e})=>l(e).controlHoverBackground};
+    &::before {
+      background: transparent;
+      border-color: transparent;
+    }
   }
-`,s=r.div`
+`,h=s(o)`
+  margin: 0 ${t.medium} 0 ${t.small};
+`,g=s.div`
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: ${e.small};
-  border-radius: ${t.corners.borderRadius};
-  padding: ${e.medium_small} ${e.x_small} ${e.medium_small}
-    ${e.medium_small};
+  gap: ${t.small};
+  border-radius: ${n.corners.borderRadius};
+  padding: ${t.medium_small} ${t.x_small} ${t.medium_small}
+    ${t.medium_small};
   overflow: hidden;
   min-width: 300px;
   max-width: 420px;
-  > p,
-  > button {
-    margin: 0 ${e.small};
-  }
-  > p {
-    margin-right: ${e.medium};
+  background: ${({$variant:e})=>l(e).containerBackground};
+`,_=c`
+  from {
+    width: 100%;
   }
-
-  ${({$variant:e})=>{let t=n[e??`neutral`];return i`
-      background: ${t.background};
-
-      > button {
-        margin-right: auto;
-        color: ${t.icon};
-        border-color: ${t.icon};
-        &:hover {
-          background: none;
-          color: ${t.actionHover};
-          border-color: ${t.actionHover};
-          &:before {
-            position: absolute;
-            left: 0;
-            content: '';
-            width: 100%;
-            height: 100%;
-            background: ${t.icon};
-            opacity: 0.15;
-            overflow: visible;
-          }
-        }
-      }
-
-      > ${o} {
-        > svg:first-child {
-          color: ${t.icon};
-        }
-        > button {
-          svg {
-            color: ${t.close};
-          }
-          &:hover {
-            background: none;
-            &:before {
-              position: absolute;
-              left: 0;
-              content: '';
-              width: 100%;
-              height: 100%;
-              background: ${t.close};
-              opacity: 0.15;
-              border-radius: 50%;
-              overflow: visible;
-            }
-          }
-        }
-      }
-    `}}
-`,c=a`
- from {
-   width: 100%
- }
   to {
-    width: 0
+    width: 0;
   }
-`,l=r.span`
-  background: white;
+`,v=s.span`
+  background: ${e.ui.background__default.rgba};
   width: 100%;
   height: 2px;
   position: absolute;
   bottom: 0;
   left: 0;
-  &:after {
+  &::before {
     content: '';
     position: absolute;
     width: inherit;
     height: inherit;
-    background: ${({$variant:e})=>n[e??`neutral`].background};
+    background: ${({$variant:e})=>l(e).containerBackground};
     opacity: 0.5;
   }
-  &:before {
+  &::after {
     content: '';
     position: absolute;
     width: inherit;
     height: inherit;
-    background: ${({$variant:e})=>n[e??`neutral`].duration};
-    animation: ${c} ${({$duration:e})=>e}s linear;
+    background: ${({$variant:e})=>l(e).progressFill};
+    animation: ${_} ${({$duration:e})=>e}s linear;
     animation-fill-mode: forwards;
   }
-`;export{s as Container,l as DurationBar,o as Header};
+`;export{p as ActionButton,m as CloseButton,g as Container,h as Description,v as DurationBar,u as Header,d as HeaderIcon,f as Title};

package/dist/molecules/Toast/Toast.utils.js

@@ -1 +1 @@
-import{colors as e}from"../../atoms/style/colors.js";import{check_circle_outlined as t,error_outlined as n,info_circle as r,warning_outlined as i}from"@equinor/eds-icons";function a({icon:e,variant:a}){if(e)return e;switch(a){case`info`:return r;case`warning`:return i;case`error`:return n;case`success`:return t;default:return}}const o={neutral:{background:e.ui.background__light.rgba,icon:e.text.static_icons__default.rgba,close:e.interactive.secondary__resting.rgba,actionHover:e.interactive.secondary__resting.rgba,duration:e.interactive.secondary__resting.rgba},info:{background:e.ui.background__info.rgba,icon:e.text.static_icons__default.rgba,close:e.interactive.secondary__resting.rgba,actionHover:e.interactive.secondary__resting.rgba,duration:e.interactive.secondary__resting.rgba},warning:{background:e.ui.background__warning.rgba,icon:e.interactive.warning__text.rgba,close:e.interactive.warning__text.rgba,actionHover:e.interactive.warning__hover.rgba,duration:e.interactive.warning__resting.rgba},error:{background:e.ui.background__danger.rgba,icon:e.interactive.danger__text.rgba,close:e.interactive.danger__text.rgba,actionHover:e.interactive.danger__hover.rgba,duration:e.interactive.danger__resting.rgba},success:{background:e.interactive.success__highlight.rgba,icon:e.interactive.success__text.rgba,close:e.interactive.success__text.rgba,actionHover:e.interactive.success__hover.rgba,duration:e.interactive.success__resting.rgba}};export{o as TOAST_COLORS,a as getHeaderIcon};
+import{colors as e}from"../../atoms/style/colors.js";import{check_circle_outlined as t,error_outlined as n,info_circle as r,warning_outlined as i}from"@equinor/eds-icons";function a({icon:e,variant:a}){if(e)return e;switch(a){case`info`:return r;case`warning`:return i;case`error`:return n;case`success`:return t;default:return}}const o={neutral:{containerBackground:e.ui.background__light.rgba,controlForeground:e.interactive.secondary__resting.rgba,controlForegroundHover:e.text.static_icons__default.rgba,controlHoverBackground:e.ui.background__light_medium.rgba,progressFill:e.text.static_icons__secondary.rgba},info:{containerBackground:e.ui.background__info.rgba,controlForeground:e.interactive.info__text.rgba,controlForegroundHover:e.interactive.info__text_hover.rgba,controlHoverBackground:e.interactive.info__nested_hover.rgba,progressFill:e.interactive.info__text.rgba},warning:{containerBackground:e.ui.background__warning.rgba,controlForeground:e.interactive.warning__text.rgba,controlForegroundHover:e.interactive.warning__text_hover.rgba,controlHoverBackground:e.interactive.warning__nested_hover.rgba,progressFill:e.interactive.warning__resting.rgba},error:{containerBackground:e.ui.background__danger.rgba,controlForeground:e.interactive.danger__text.rgba,controlForegroundHover:e.interactive.danger__text_hover.rgba,controlHoverBackground:e.interactive.danger__nested_hover.rgba,progressFill:e.interactive.danger__resting.rgba},success:{containerBackground:e.ui.background__success.rgba,controlForeground:e.interactive.success__text.rgba,controlForegroundHover:e.interactive.success__text_hover.rgba,controlHoverBackground:e.interactive.success__nested_hover.rgba,progressFill:e.interactive.success__resting.rgba}};export{o as TOAST_COLORS,a as getHeaderIcon};

package/dist/molecules/Tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+import { ComponentPropsWithRef, FC, ReactNode } from "react";
+
+//#region src/molecules/Tooltip/Tooltip.d.ts
+type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+type TooltipProps = {
+  title?: ReactNode;
+  placement?: TooltipPlacement;
+  disabled?: boolean;
+  enterDelay?: number;
+  exitDelay?: number;
+} & Omit<ComponentPropsWithRef<'div'>, 'title'>;
+declare const Tooltip: FC<TooltipProps>;
+//#endregion
+export { Tooltip, TooltipProps };

package/dist/molecules/Tooltip/Tooltip.js

@@ -0,0 +1 @@
+import{LeftAlignedText as e,TooltipWrapper as t,Wrapper as n}from"./Tooltip.styles.js";import{assignRef as r,getResolvedPlacement as i}from"./utils.js";import{useId as a,useRef as o,useState as s}from"react";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=({title:u,children:d,ref:f,disabled:p=!1,placement:m=`top`,enterDelay:h=0,exitDelay:g=300,..._})=>{let v=a().replace(/:/g,``),y=o(null),b=o(null),x=o(null),S=o(null),[C,w]=s({placement:m,offset:{x:void 0,y:void 0}}),T=()=>{if(!y.current?.matches(`:popover-open`))return;let e=y.current.getBoundingClientRect(),t=b.current?.getBoundingClientRect();if(!t)return;let n=i(e,t);if(n===`top`||n===`bottom`){let r=t.left+t.width/2;w({placement:n,offset:{x:Math.max(12,Math.min(r-e.left,e.width-12))}})}else{let r=t.top+t.height/2;w({placement:n,offset:{y:Math.max(12,Math.min(r-e.top,e.height-12))}})}},E=e=>{y.current=e,r(f,e)},D=()=>{x.current&&=(clearTimeout(x.current),null),!(S.current||y.current?.matches(`:popover-open`))&&(S.current=setTimeout(()=>{S.current=null,!y.current?.matches(`:popover-open`)&&(y.current?.showPopover(),requestAnimationFrame(T))},h))},O=()=>{S.current&&=(clearTimeout(S.current),null),x.current=setTimeout(()=>{x.current=null,y.current?.matches(`:popover-open`)&&y.current.hidePopover()},g)};return!u||p?d:l(n,{onMouseEnter:D,onMouseLeave:O,onFocus:D,onBlur:O,$anchor:`--tooltip-${v}`,ref:b,..._,children:[d,c(t,{ref:E,role:`tooltip`,popover:`hint`,$anchor:`--tooltip-${v}`,$placement:m,$arrow:C,children:typeof u==`string`?c(e,{children:u}):u})]})};export{u as Tooltip};