@equinor/amplify-component-lib 13.2.7 → 14.1.0

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};

package/dist/molecules/Tooltip/Tooltip.styles.js

@@ -0,0 +1,91 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{elevation as n,shape as r,typography as i}from"../../atoms/style/index.js";import{typographyTemplate as a}from"../../node_modules/@equinor/eds-utils/dist/esm/utils/templates/index.js";import o,{css as s}from"styled-components";const c=o.span`
+  anchor-name: ${e=>e.$anchor};
+  display: inline-block;
+`,l=o.div`
+  position-anchor: ${e=>e.$anchor};
+
+  /* UA popover reset */
+  position: fixed;
+  margin: 0;
+  inset: auto;
+  border: none;
+  overflow: visible;
+
+  /* custom popover styles */
+  //has to be set before color to not override the color tokens
+  ${a(i.ui.tooltip)}
+
+  min-width: 56px;
+  max-width: 280px;
+  background-color: ${e.text.static_icons__default.rgba};
+  box-shadow: ${n.raised};
+  border-radius: ${r.corners.borderRadius};
+  color: ${e.text.static_icons__primary_white.rgba};
+  padding: ${t.small};
+  text-align: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    z-index: -1;
+    background: inherit;
+    margin: inherit;
+    ${({$arrow:e})=>{switch(e.placement){case`top`:return s`
+            inset: 0 0 -${`4px`} 0;
+          `;case`bottom`:return s`
+            inset: -${`4px`} 0 0 0;
+          `;case`left`:return s`
+            inset: 0 -${`4px`} 0 0;
+          `;case`right`:return s`
+            inset: 0 0 0 -${`4px`};
+          `}}}
+
+    ${({$arrow:{offset:e}})=>{let t=e.x?`${e.x}px`:`50%`,n=e.y?`${e.y}px`:`50%`;return s`
+        clip-path: polygon(
+          /* top */ 
+          calc(${t} - ${`4px`}) ${`4px`},
+          ${t} 0,
+          ${t} 0,
+          calc(${t} + ${`4px`}) ${`4px`},
+          /* right */ 
+          calc(100% - ${`4px`})
+          calc(${n} - ${`4px`}),
+          100% ${n},
+          100% ${n},
+          calc(100% - ${`4px`}) calc(${n} + ${`4px`}),
+          /* bottom */ 
+          calc(${t} + ${`4px`})
+          calc(100% - ${`4px`}),
+          ${t} 100%,
+          ${t} 100%,
+          calc(${t} - ${`4px`}) calc(100% - ${`4px`}),
+          /* left */ 
+          ${`4px`} calc(${n} + ${`4px`}),
+          0 ${n},
+          0 ${n},
+          ${`4px`} calc(${n} - ${`4px`})
+        );
+      `}};
+  }
+
+  ${e=>{switch(e.$placement){case`top`:return s`
+          position-area: top;
+          bottom: ${`5px`};
+          position-try-fallbacks: flip-block;
+        `;case`bottom`:return s`
+          position-area: bottom;
+          top: ${`5px`};
+          position-try-fallbacks: flip-block;
+        `;case`left`:return s`
+          position-area: left;
+          right: ${`5px`};
+          position-try-fallbacks: flip-inline;
+        `;case`right`:return s`
+          position-area: right;
+          left: ${`5px`};
+          position-try-fallbacks: flip-inline;
+        `}}})
+`,u=o.span`
+  display: inline-block;
+  text-align: left;
+`;export{u as LeftAlignedText,l as TooltipWrapper,c as Wrapper};

package/dist/molecules/Tooltip/utils.js

@@ -0,0 +1 @@
+const e=(e,t)=>e.bottom<=t.top?`top`:e.top>=t.bottom?`bottom`:e.right<=t.left?`left`:`right`;function t(e,t){typeof e==`function`?e(t):e&&(e.current=t)}export{t as assignRef,e as getResolvedPlacement};

package/dist/molecules/index.d.ts

@@ -23,7 +23,7 @@ import { IconCellColor, IconCellColorObject, IconCellColors, IconCellState, Icon
 import { IconCell, IconCellProps } from "./IconCell/IconCell.js";
 import { InfoElement, InfoElementProps } from "./InfoElement/InfoElement.js";
 import { InformationalNotice, InformationalNoticeProps } from "./InformationalNotice/InformationalNotice.js";
-import { OptionalTooltip, OptionalTooltipProps } from "./OptionalTooltip/OptionalTooltip.js";
+import { Tooltip as Tooltip$1, TooltipProps as TooltipProps$1 } from "./Tooltip/Tooltip.js";
 import { ProfileAvatar, ProfileAvatarProps } from "./ProfileAvatar/ProfileAvatar.js";
 import { RichTextDisplay, RichTextDisplayProps } from "./RichTextDisplay/RichTextDisplay.js";
 import { AmplifyBar, EditorMenu, EditorText } from "./RichTextEditor/MenuBar/MenuBar.js";
@@ -51,5 +51,5 @@ import { Checkbox as Checkbox$1, CheckboxProps as CheckboxProps$1 } from "./Sele
 import { Radio as Radio$1, RadioProps as RadioProps$1 } from "./SelectionControls/Radio/Radio.js";
 import { Switch as Switch$1, SwitchProps as SwitchProps$1 } from "./SelectionControls/Switch/Switch.js";
 import { Waves } from "./Waves/Waves.js";
-import { Accordion, AccordionHeaderActionsProps, AccordionHeaderProps, AccordionHeaderTitleProps, AccordionItemProps, AccordionPanelProps, AccordionProps, BreadcrumbProps, Breadcrumbs, BreadcrumbsProps, CircularProgress as CircularProgress$1, CircularProgressProps, Dialog as EDSDialog, DialogProps as EDSDialogProps, Divider as Divider$1, DividerProps, DotProgress as DotProgress$1, DotProgressProps, Icon as Icon$1, IconProps as IconProps$1, LinearProgress as LinearProgress$1, LinearProgressProps, Menu as Menu$1, MenuProps, SearchProps as SearchProps$1, Typography as Typography$1, TypographyProps } from "@equinor/eds-core-react";
-export { Accordion, type AccordionHeaderActionsProps, type AccordionHeaderProps, type AccordionHeaderTitleProps, type AccordionItemProps, type AccordionPanelProps, type AccordionProps, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, CircularProgress$1 as CircularProgress, type CircularProgressProps, Divider$1 as Divider, type DividerProps, DotProgress$1 as DotProgress, type DotProgressProps, EDSDialog, type EDSDialogProps, Icon$1 as Icon, type IconProps$1 as IconProps, LinearProgress$1 as LinearProgress, type LinearProgressProps, Menu$1 as Menu, type MenuProps, type SearchProps$1 as SearchProps, Typography$1 as Typography, type TypographyProps };
+import { Accordion, AccordionHeaderActionsProps, AccordionHeaderProps, AccordionHeaderTitleProps, AccordionItemProps, AccordionPanelProps, AccordionProps, BreadcrumbProps, Breadcrumbs, BreadcrumbsProps, CircularProgress as CircularProgress$1, CircularProgressProps, Dialog as EDSDialog, DialogProps as EDSDialogProps, Divider as Divider$1, DividerProps, DotProgress as DotProgress$1, DotProgressProps, Icon as Icon$1, IconProps as IconProps$1, LinearProgress as LinearProgress$1, LinearProgressProps, Menu as Menu$1, MenuProps, Popover as Popover$1, PopoverActions, PopoverActionsProps, PopoverContent, PopoverContentProps, PopoverHeader, PopoverHeaderProps, PopoverProps, PopoverTitle, PopoverTitleProps, SearchProps as SearchProps$1, Typography as Typography$1, TypographyProps } from "@equinor/eds-core-react";
+export { Accordion, type AccordionHeaderActionsProps, type AccordionHeaderProps, type AccordionHeaderTitleProps, type AccordionItemProps, type AccordionPanelProps, type AccordionProps, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, CircularProgress$1 as CircularProgress, type CircularProgressProps, Divider$1 as Divider, type DividerProps, DotProgress$1 as DotProgress, type DotProgressProps, EDSDialog, type EDSDialogProps, Icon$1 as Icon, type IconProps$1 as IconProps, LinearProgress$1 as LinearProgress, type LinearProgressProps, Menu$1 as Menu, type MenuProps, Popover$1 as Popover, PopoverActions, type PopoverActionsProps, PopoverContent, type PopoverContentProps, PopoverHeader, type PopoverHeaderProps, type PopoverProps, PopoverTitle, type PopoverTitleProps, type SearchProps$1 as SearchProps, Typography$1 as Typography, type TypographyProps };

package/dist/molecules/index.js

@@ -1 +1 @@
-import"./FullPageSpinner/FullPageSpinner.js";import"./RichTextEditor/RichTextEditor.types.js";import"./RichTextEditor/custom-extensions/AmplifyKit.js";import"./AnimatedCheckmark/AnimatedCheckmark.js";import"./ApplicationIcon/ApplicationIcon.js";import"./Badge/Badge.js";import"./Banner/Banner.js";import"./Button/Button.js";import"./Button/IconButton/IconButton.js";import"./Chip/Chip.js";import"./Confetti/Confetti.js";import"./Skeleton/SkeletonBase/SkeletonBase.js";import"./DatePicker/DatePicker.js";import"./DateRangePicker/DateRangePicker.js";import"./OptionalTooltip/OptionalTooltip.js";import"./Dialog/Dialog.js";import"./EquinorLogo/EquinorLogo.js";import"./FileProgress/FileProgress.js";import"./FileUploadArea/FileUploadArea.js";import"./IconCell/IconCell.types.js";import"./IconCell/IconCell.js";import"./InfoElement/InfoElement.js";import"./InformationalNotice/InformationalNotice.js";import"./ProfileAvatar/ProfileAvatar.js";import"./RichTextDisplay/RichTextDisplay.js";import"./RichTextEditor/MenuBar/Table/TableBar.js";import"./TextField/TextField.js";import"./RichTextEditor/MenuBar/MenuBar.js";import"./RichTextEditor/RichTextEditor.js";import"./RichTextEditor/index.js";import"./Tabs/Tabs.js";import"./Search/Search.js";import"./Skeleton/SkeletonGradient/SkeletonGradient.js";import"./Stepper/Stepper.js";import"./OptionDrawer/OptionDrawer.js";import"./Select/Select.styles.js";import"./Select/ComboBox/ComboBox.js";import"./Select/PersistentComboBox/PersistentComboBox.js";import"./Select/SingleSelect/SingleSelect.js";import"./Tag/Tag.js";import"./TableHeader/TableHeader.js";import"./FeedBackIcon/FeedBackIcon.js";import"./ListItem/ListItem.js";import"./SelectionControls/Checkbox/Checkbox.js";import"./SelectionControls/Radio/Radio.js";import"./SelectionControls/Switch/Switch.js";import"./Waves/Waves.js";import"./Toast/Toast.js";import{Accordion as e,Breadcrumbs as t,CircularProgress as n,Dialog as r,Divider as i,DotProgress as a,Icon as o,LinearProgress as s,Menu as c,Typography as l}from"@equinor/eds-core-react";export{e as Accordion,t as Breadcrumbs,n as CircularProgress,i as Divider,a as DotProgress,r as EDSDialog,o as Icon,s as LinearProgress,c as Menu,l as Typography};
+import"./FullPageSpinner/FullPageSpinner.js";import"./RichTextEditor/RichTextEditor.types.js";import"./RichTextEditor/custom-extensions/AmplifyKit.js";import"./Button/Button.js";import"./Button/IconButton/IconButton.js";import"./Toast/Toast.js";import"./Confetti/Confetti.js";import"./Skeleton/SkeletonBase/SkeletonBase.js";import"./TextField/TextField.js";import"./SelectionControls/Checkbox/Checkbox.js";import"./SelectionControls/Radio/Radio.js";import"./AnimatedCheckmark/AnimatedCheckmark.js";import"./ApplicationIcon/ApplicationIcon.js";import"./Badge/Badge.js";import"./Banner/Banner.js";import"./Chip/Chip.js";import"./DatePicker/DatePicker.js";import"./DateRangePicker/DateRangePicker.js";import"./Dialog/Dialog.js";import"./EquinorLogo/EquinorLogo.js";import"./FileProgress/FileProgress.js";import"./FileUploadArea/FileUploadArea.js";import"./IconCell/IconCell.types.js";import"./IconCell/IconCell.js";import"./InfoElement/InfoElement.js";import"./InformationalNotice/InformationalNotice.js";import"./Tooltip/Tooltip.js";import"./ProfileAvatar/ProfileAvatar.js";import"./RichTextDisplay/RichTextDisplay.js";import"./RichTextEditor/MenuBar/Table/TableBar.js";import"./RichTextEditor/MenuBar/MenuBar.js";import"./RichTextEditor/RichTextEditor.js";import"./RichTextEditor/index.js";import"./Tabs/Tabs.js";import"./Search/Search.js";import"./Skeleton/SkeletonGradient/SkeletonGradient.js";import"./Stepper/Stepper.js";import"./OptionDrawer/OptionDrawer.js";import"./Select/Select.styles.js";import"./Select/ComboBox/ComboBox.js";import"./Select/PersistentComboBox/PersistentComboBox.js";import"./Select/SingleSelect/SingleSelect.js";import"./Tag/Tag.js";import"./TableHeader/TableHeader.js";import"./FeedBackIcon/FeedBackIcon.js";import"./ListItem/ListItem.js";import"./SelectionControls/Switch/Switch.js";import"./Waves/Waves.js";import{Accordion as e,Breadcrumbs as t,CircularProgress as n,Dialog as r,Divider as i,DotProgress as a,Icon as o,LinearProgress as s,Menu as c,Popover as l,PopoverActions as u,PopoverContent as d,PopoverHeader as f,PopoverTitle as p,Typography as m}from"@equinor/eds-core-react";export{e as Accordion,t as Breadcrumbs,n as CircularProgress,i as Divider,a as DotProgress,r as EDSDialog,o as Icon,s as LinearProgress,c as Menu,l as Popover,u as PopoverActions,d as PopoverContent,f as PopoverHeader,p as PopoverTitle,m as Typography};

package/dist/organisms/Comments/AddComment.js

@@ -0,0 +1,13 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import"../../molecules/RichTextEditor/RichTextEditor.types.js";import{IconButton as n}from"../../molecules/Button/IconButton/IconButton.js";import{RichTextEditor as r}from"../../molecules/RichTextEditor/RichTextEditor.js";import{getSuggestions as i}from"./mentions/suggestions.js";import{extractMentions as a}from"./mentions/utils.js";import{isRichTextEmpty as o}from"./utils.js";import{useState as s}from"react";import{Icon as c,Typography as l}from"@equinor/eds-core-react";import u from"styled-components";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{info_circle as p,send as m}from"@equinor/eds-icons";import h from"@tiptap/extension-mention";const g=u.div`
+  background: ${e.ui.background__light.rgba};
+  padding: ${t.large};
+  margin-top: auto;
+`,_=u.div`
+  display: flex;
+  gap: ${t.x_small};
+  padding: ${t.x_small} ${t.small};
+`,v=u.div`
+  display: flex;
+`,y=u(n)`
+  margin-left: auto;
+`,b=({onAddComment:t,users:n,zIndex:u})=>{let[b,x]=s(``);return f(g,{children:[d(r,{value:b,onChange:x,lightBackground:!0,maxHeight:`50vh`,minHeight:`130px`,footer:d(v,{children:d(y,{"data-testid":`send-comment-button`,variant:`ghost`,icon:m,disabled:o(b),onClick:()=>{t?.({text:b,mentions:a(b)}),x(``)}})}),removeFeatures:[`alignment`,`images`,`table`,`links`,`undoRedo`,`headers`,`text-color`,`code`],extensions:[h.configure({HTMLAttributes:{class:`mention`},suggestions:i(n||[],u)})]}),!!n?.length&&f(_,{children:[d(c,{color:e.text.static_icons__tertiary.rgba,data:p,size:16}),d(l,{group:`input`,variant:`label`,color:e.text.static_icons__tertiary.rgba,children:`Type @ to mention team members.`})]})]})};export{b as AddComment};

package/dist/organisms/Comments/Comment.d.ts

@@ -0,0 +1,40 @@
+import { FC } from "react";
+
+//#region src/organisms/Comments/Comment.d.ts
+
+/**
+ * Controls the visibility and enabled state of a comment action button.
+ */
+interface CommentAction {
+  /**
+   * Whether the button is visible but cannot be clicked.
+   *
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Whether the button is not rendered at all.
+   *
+   * @default false
+   */
+  hidden?: boolean;
+  /**
+   * The tooltip displayed when the button is disabled.
+   *
+   * Ignored unless `disabled` is `true`.
+   */
+  disabledReason?: string;
+}
+interface CommentData {
+  id: string;
+  text: string;
+  editAction?: CommentAction;
+  deleteAction?: CommentAction;
+  timestamp: Date | string;
+  author: {
+    name: string;
+    avatar?: string;
+  };
+}
+//#endregion
+export { CommentData };

package/dist/organisms/Comments/Comment.js

@@ -0,0 +1,32 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{formatDateTime as n}from"../../atoms/utils/date.js";import{DEFAULT_FEATURES as r}from"../../molecules/RichTextEditor/RichTextEditor.types.js";import{useAmplifyKit as i}from"../../atoms/hooks/useAmplifyKit.js";import{Button as a}from"../../molecules/Button/Button.js";import{IconButton as o}from"../../molecules/Button/IconButton/IconButton.js";import{Tooltip as s}from"../../molecules/Tooltip/Tooltip.js";import{ProfileAvatar as c}from"../../molecules/ProfileAvatar/ProfileAvatar.js";import{RichTextDisplay as l}from"../../molecules/RichTextDisplay/RichTextDisplay.js";import{RichTextEditor as u}from"../../molecules/RichTextEditor/RichTextEditor.js";import{DeleteConfirmation as d}from"./DeleteConfirmation.js";import{getSuggestions as f}from"./mentions/suggestions.js";import{extractMentions as p}from"./mentions/utils.js";import{isRichTextEmpty as m}from"./utils.js";import{VerticalDivider as h}from"./VerticalDivider.js";import{useEffect as g,useRef as _,useState as v}from"react";import{Typography as y}from"@equinor/eds-core-react";import{styled as b}from"styled-components";import{Fragment as x,jsx as S,jsxs as C}from"react/jsx-runtime";import{delete_forever as w,edit as T}from"@equinor/eds-icons";import E from"@tiptap/extension-mention";const D=b.div`
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+
+  > div:first-child {
+    flex-shrink: 0;
+  }
+`,O=b.div`
+  display: flex;
+  flex-grow: 1;
+  flex-direction: column;
+  gap: ${t.small};
+`,k=b.div`
+  display: none;
+`,A=b.div`
+  margin-right: auto;
+`,j=b.div`
+  display: flex;
+`,M=b.div`
+  display: flex;
+  gap: ${t.small};
+  cursor: auto;
+
+  &:hover ${k} {
+    display: block;
+  }
+`,N=b.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: ${t.medium_small};
+`,P=({comment:t,onDelete:b,onEdit:P,readonly:F,users:I,zIndex:L})=>{let R=i({features:r}),z=_(null),[B,V]=v(t.text),[H,U]=v(!1),[W,G]=v(!1);return g(()=>{W&&z.current?.scrollIntoView({behavior:`smooth`,block:`end`})},[W]),C(x,{children:[C(M,{ref:z,children:[C(D,{children:[S(c,{url:t.author.avatar,name:t.author.name}),S(h,{})]}),C(O,{children:[C(j,{children:[C(A,{children:[S(y,{group:`paragraph`,variant:`body_short_bold`,children:t.author.name}),S(y,{group:`paragraph`,variant:`meta`,color:e.text.static_icons__tertiary.rgba,children:n(t.timestamp)})]}),!F&&C(k,{"data-testid":`comment-actions`,children:[!t.editAction?.hidden&&S(s,{title:t.editAction?.disabled&&t.editAction?.disabledReason,children:S(o,{"data-testid":`edit-comment-button`,icon:T,variant:`ghost`,disabled:t.editAction?.disabled,onClick:()=>G(e=>!e)})}),!t.deleteAction?.hidden&&S(s,{title:t.deleteAction?.disabled&&t.deleteAction?.disabledReason,children:S(o,{"data-testid":`delete-comment-button`,icon:w,variant:`ghost`,onClick:()=>U(!0),disabled:t.deleteAction?.disabled})})]})]}),W?S(u,{value:B,onChange:V,lightBackground:!0,maxHeight:`130px`,minHeight:`130px`,footer:C(N,{children:[S(a,{variant:`ghost`,onClick:()=>{V(t.text),G(!1)},children:`Cancel`}),S(a,{disabled:m(B),variant:`outlined`,onClick:()=>{P?.({id:t.id,text:B,mentions:p(B)}),G(!1)},children:`Update`})]}),removeFeatures:[`alignment`,`images`,`table`,`links`,`undoRedo`,`headers`,`text-color`,`code`],extensions:[E.configure({HTMLAttributes:{class:`mention`},suggestions:f(I||[],L)})]}):S(l,{value:t.text,padding:`none`,extensions:[R,E.configure({HTMLAttributes:{class:`mention`},suggestions:f(I||[],L)})]})]})]}),H&&S(d,{onClose:()=>U(!1),onConfirm:()=>{U(!1),b?.(t.id)}})]})};export{P as Comment};

package/dist/organisms/Comments/Comments.d.ts

@@ -0,0 +1,33 @@
+import { SideSheetProps } from "../SideSheet/SideSheet.types.js";
+import { CommentData } from "./Comment.js";
+import { FC, ReactNode } from "react";
+
+//#region src/organisms/Comments/Comments.d.ts
+type DistributiveOmit<T, K extends PropertyKey> = T extends unknown ? Omit<T, K> : never;
+type CommentsProps = {
+  comments: CommentData[];
+  readonly?: boolean;
+  onAddComment?: ({
+    text,
+    mentions
+  }: {
+    text: string;
+    mentions: string[];
+  }) => void;
+  onEditComment?: ({
+    id,
+    text,
+    mentions
+  }: {
+    id: string;
+    text: string;
+    mentions: string[];
+  }) => void;
+  onDeleteComment?: (commentId: string) => void;
+  subHeaderElements?: ReactNode;
+  emptyContent?: ReactNode;
+  users?: string[];
+} & DistributiveOmit<SideSheetProps, 'children'>;
+declare const Comments: FC<CommentsProps>;
+//#endregion
+export { Comments, CommentsProps };

package/dist/organisms/Comments/Comments.js

@@ -0,0 +1,15 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import{SideSheet as n}from"../SideSheet/SideSheet.js";import{Comment as r}from"./Comment.js";import{AddComment as i}from"./AddComment.js";import{useEffect as a,useRef as o}from"react";import{Divider as s,Typography as c}from"@equinor/eds-core-react";import{styled as l}from"styled-components";import{Fragment as u,jsx as d,jsxs as f}from"react/jsx-runtime";const p=l(s)`
+  margin: 0;
+`,m=l.div`
+  padding: ${t.medium};
+  display: flex;
+  flex-direction: column;
+  gap: ${t.medium};
+  overflow: auto;
+`,h=l.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border: 1px dashed ${e.ui.background__medium.rgba};
+  padding: ${t.medium} ${t.large};
+`,g=({subHeaderElements:t,comments:s,onDeleteComment:l,onAddComment:g,onEditComment:_,readonly:v,users:y,emptyContent:b,...x})=>{let S=o(null),C=`zIndex`in x&&x.zIndex!=null?Number(x.zIndex):void 0,w=s.at(-1)?.id;return a(()=>{S.current?.scrollTo({top:S.current.scrollHeight,behavior:`smooth`})},[w]),f(n,{...x,children:[t!=null&&f(u,{children:[t,d(p,{})]}),d(m,{ref:S,children:s.length>0?s.map(e=>d(r,{comment:e,onDelete:l,readonly:v,onEdit:_,users:y,zIndex:C},e.id)):b??d(h,{children:d(c,{group:`paragraph`,variant:`body_short`,color:e.text.static_icons__tertiary.rgba,children:`No comments yet.`})})}),!v&&d(i,{onAddComment:g,users:y,zIndex:C})]})};export{g as Comments};

package/dist/organisms/Comments/DeleteConfirmation.js

@@ -0,0 +1 @@
+import{Dialog as e}from"../../molecules/Dialog/Dialog.js";import{jsx as t}from"react/jsx-runtime";const n=({onClose:n,onConfirm:r})=>t(e,{open:!0,title:`Delete this comment`,width:400,actions:[{text:`Cancel`,variant:`outlined`,onClick:n},{text:`Delete`,variant:`filled`,color:`danger`,onClick:r}],onClose:n,children:`You are about to delete your comment.`});export{n as DeleteConfirmation};

package/dist/organisms/Comments/VerticalDivider.js

@@ -0,0 +1,16 @@
+import{colors as e}from"../../atoms/style/colors.js";import t from"styled-components";const n=t.div`
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-0.5px);
+    width: 1px;
+    background: ${e.ui.background__medium.rgba};
+  }
+`;export{n as VerticalDivider};

package/dist/organisms/Comments/mentions/MentionList.js

@@ -0,0 +1 @@
+import{DropDown as e,DropDownButton as t,NoResult as n}from"./MentionList.styles.js";import{useEffect as r,useImperativeHandle as i,useState as a}from"react";import{Typography as o}from"@equinor/eds-core-react";import{jsx as s}from"react/jsx-runtime";const c=c=>{let[l,u]=a(0),d=e=>{let t=c.items[e];t&&c.command({id:t})},f=()=>{u((l+c.items.length-1)%c.items.length)},p=()=>{u((l+1)%c.items.length)},m=()=>{d(l)};return r(()=>u(0),[c.items]),i(c.ref,()=>({onKeyDown:({event:e})=>e.key===`ArrowUp`?(f(),!0):e.key===`ArrowDown`?(p(),!0):e.key===`Enter`?(m(),!0):!1})),s(e,{children:c.items.length?c.items.map((e,n)=>s(t,{$isSelected:n===l,onMouseEnter:()=>u(n),onClick:()=>d(n),children:s(o,{variant:`menu_title`,group:`navigation`,children:e})},n)):s(n,{children:s(o,{variant:`menu_title`,group:`navigation`,children:`No result`})})})};export{c as MentionList};

package/dist/organisms/Comments/mentions/MentionList.styles.js

@@ -0,0 +1,22 @@
+import{colors as e}from"../../../atoms/style/colors.js";import{spacings as t}from"../../../atoms/style/spacings.js";import{elevation as n}from"../../../atoms/style/index.js";import r from"styled-components";const i=r.div`
+  background: ${e.ui.background__default.rgba};
+  border-radius: 2px;
+  box-shadow: ${n.raised};
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+  position: relative;
+  padding: ${t.small} 0;
+`,a=r.button`
+  align-items: center;
+  background-color: transparent;
+  display: flex;
+  text-align: left;
+  height: 48px;
+  padding: ${t.small} ${t.medium};
+  width: 100%;
+
+  ${({$isSelected:t})=>t&&`background-color: ${e.interactive.primary__hover_alt.rgba};`}
+`,o=r.div`
+  padding: ${t.small} ${t.medium};
+`;export{i as DropDown,a as DropDownButton,o as NoResult};

package/dist/organisms/Comments/mentions/suggestions.js

@@ -0,0 +1 @@
+import{MentionList as e}from"./MentionList.js";import{ReactRenderer as t,posToDOMRect as n}from"@tiptap/react";const r=(e,t)=>{let r=n(e.view,e.state.selection.from,e.state.selection.to);t.style.width=`max-content`,t.style.position=`absolute`;let{width:i,height:a}=t.getBoundingClientRect(),o=document.documentElement.clientWidth,s=document.documentElement.clientHeight,c=r.left,l=r.bottom,u=s-r.bottom,d=r.top;a>u&&a<=d&&(l=r.top-a),c+i>o&&(c=o-i),c<0&&(c=0),t.style.left=`${c+window.scrollX}px`,t.style.top=`${l+window.scrollY}px`},i=(n,i)=>[{items:({query:e})=>n.filter(t=>t.toLowerCase().startsWith(e.toLowerCase())).slice(0,3),render:()=>{let n;return{onStart:a=>{n=new t(e,{props:a,editor:a.editor}),a.clientRect&&(n.element.style.position=`absolute`,i!==void 0&&(n.element.style.zIndex=String(i+1)),document.body.appendChild(n.element),r(a.editor,n.element))},onUpdate(e){n.updateProps(e),e.clientRect&&r(e.editor,n.element)},onKeyDown(e){return e.event.key===`Escape`?(n.destroy(),!0):n.ref?.onKeyDown(e)??!1},onExit(){n.destroy()}}}}];export{i as getSuggestions};

package/dist/organisms/Comments/mentions/utils.js

@@ -0,0 +1 @@
+const e=e=>{if(typeof document>`u`||!e)return[];let t=document.createElement(`div`);t.innerHTML=e;let n=t.querySelectorAll(`[data-type="mention"], .mention`),r=Array.from(n).map(e=>e.getAttribute(`data-id`)).filter(e=>!!e);return[...new Set(r)]};export{e as extractMentions};

package/dist/organisms/Comments/utils.js

@@ -0,0 +1 @@
+const e=e=>{let t=document.createElement(`div`);return t.innerHTML=e,!t.textContent.trim()};export{e as isRichTextEmpty};

package/dist/organisms/DataGrid/DataGrid.d.ts

@@ -1,7 +1,7 @@
-import * as react174 from "react";
+import * as react180 from "react";
 import { EdsDataGridProps } from "@equinor/eds-data-grid-react";
 
 //#region src/organisms/DataGrid/DataGrid.d.ts
-declare const DataGrid: <T>(props: EdsDataGridProps<T>) => react174.JSX.Element;
+declare const DataGrid: <T>(props: EdsDataGridProps<T>) => react180.JSX.Element;
 //#endregion
 export { DataGrid };

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

@@ -1,5 +1,5 @@
 import { FilterProps } from "./Filter.types.js";
-import * as react210 from "react";
+import * as react220 from "react";
 
 //#region src/organisms/Filter/Filter.d.ts
 
@@ -32,6 +32,6 @@ declare function Filter<T extends string>({
   id,
   openOnFocus,
   ...rest
-}: FilterProps<T>): react210.JSX.Element;
+}: FilterProps<T>): react220.JSX.Element;
 //#endregion
 export { Filter };

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

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

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

@@ -1,4 +1,4 @@
-import * as react212 from "react";
+import * as react219 from "react";
 
 //#region src/organisms/Filter/SortMenu.d.ts
 interface SortMenuProps<S> {
@@ -13,6 +13,6 @@ declare function SortMenu<S>({
   value,
   onChange,
   items
-}: SortMenuProps<S>): react212.JSX.Element;
+}: SortMenuProps<S>): react219.JSX.Element;
 //#endregion
 export { SortMenu };

package/dist/organisms/ReleaseNote/ReleaseNote.d.ts

@@ -1,4 +1,4 @@
-import * as react180 from "react";
+import * as react186 from "react";
 import { ReactNode } from "react";
 import { ReleaseNote } from "@equinor/subsurface-app-management";
 
@@ -7,9 +7,9 @@ type ReleaseNoteProps = {
   actionMenu?: ReactNode;
   expanded?: boolean;
 } & ReleaseNote;
-declare const ReleaseNote$1: react180.ForwardRefExoticComponent<{
+declare const ReleaseNote$1: react186.ForwardRefExoticComponent<{
   actionMenu?: ReactNode;
   expanded?: boolean;
-} & ReleaseNote & react180.RefAttributes<HTMLDivElement>>;
+} & ReleaseNote & react186.RefAttributes<HTMLDivElement>>;
 //#endregion
 export { ReleaseNote$1 as ReleaseNote, ReleaseNoteProps };

package/dist/organisms/SideBar/CreateItem.js

@@ -1 +1 @@
-import{useSideBar as e}from"../../providers/SideBarProvider.js";import{OptionalTooltip as t}from"../../molecules/OptionalTooltip/OptionalTooltip.js";import{CreateButton as n,MenuItemContainer as r}from"./CreateItem.styles.js";import{Icon as i}from"@equinor/eds-core-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{add as s}from"@equinor/eds-icons";const c=({createLabel:c,onCreate:l,disabled:u=!1,active:d=!1})=>{let{isOpen:f}=e(),p=u?void 0:l;return f?a(r,{$active:d,onClick:p,"data-testid":`create-item-container`,children:o(n,{$open:!0,variant:`contained`,disabled:u,children:[a(i,{data:s}),c]})}):a(t,{title:c,placement:`right`,children:a(r,{$active:d,onClick:p,"data-testid":`create-item-container`,children:a(n,{variant:`contained`,disabled:u,children:a(i,{data:s})})})})};export{c as CreateItem};
+import{useSideBar as e}from"../../providers/SideBarProvider.js";import{CreateButton as t,MenuItemContainer as n}from"./CreateItem.styles.js";import{Icon as r,Tooltip as i}from"@equinor/eds-core-react";import{jsx as a,jsxs as o}from"react/jsx-runtime";import{add as s}from"@equinor/eds-icons";const c=({createLabel:c,onCreate:l,disabled:u=!1,active:d=!1})=>{let{isOpen:f}=e(),p=u?void 0:l;return f?a(n,{$active:d,onClick:p,"data-testid":`create-item-container`,children:o(t,{$open:!0,variant:`contained`,disabled:u,children:[a(r,{data:s}),c]})}):a(i,{title:c,placement:`right`,children:a(n,{$active:d,onClick:p,"data-testid":`create-item-container`,children:a(t,{variant:`contained`,disabled:u,children:a(r,{data:s})})})})};export{c as CreateItem};