@equinor/amplify-component-lib 9.15.2 → 9.15.3-beta.1

package/dist/molecules/FullPageSpinner/FullPageSpinner.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactNode } from "react";
+
+//#region src/molecules/FullPageSpinner/FullPageSpinner.d.ts
+interface FullPageSpinnerProps {
+  variant?: 'equinor' | 'circle' | 'dots' | 'application';
+  withScrim?: boolean;
+  fixedPosition?: boolean;
+  children?: ReactNode | ReactNode[];
+}
+declare const FullPageSpinner: FC<FullPageSpinnerProps>;
+//#endregion
+export { FullPageSpinner, FullPageSpinnerProps };

package/dist/molecules/FullPageSpinner/FullPageSpinner.js

@@ -0,0 +1,29 @@
+import{colors as e}from"../../atoms/style/colors.js";import{useMemo as t}from"react";import{Progress as n,Scrim as r,StarProgress as i}from"@equinor/eds-core-react";import a,{css as o}from"styled-components";import{jsx as s,jsxs as c}from"react/jsx-runtime";const l=a.div`
+  ${({$fixedPosition:e})=>e?o`
+        position: fixed;
+        z-index: 500;
+        top: 0;
+        left: 0;
+        width: 100vw;
+        height: 100vh;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      `:o`
+      position: absolute;
+      z-index: 500;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    `}
+`,u=a.div`
+  display: none;
+  visibility: hidden;
+`,d=a(n.Circular)`
+  circle {
+    stroke: ${e.interactive.primary__resting.rgba};
+  }
+  circle:first-child {
+    stroke: ${e.interactive.primary__hover_alt.rgba};
+  }
+`,f=({variant:e=`application`,withScrim:a=!1,fixedPosition:o=!1,children:f})=>{let p=t(()=>{switch(e){case`dots`:return s(n.Dots,{color:`primary`,"data-testid":`full-page-spinner-${e}`,size:48});case`circle`:return s(d,{"data-testid":`full-page-spinner-${e}`,size:48});case`equinor`:return s(i,{"data-testid":`full-page-spinner-${e}`,size:48});case`application`:return s(d,{"data-testid":`app-icon-svg`,size:48})}},[e]);return a?c(r,{open:!0,children:[p,f&&s(u,{children:f})]}):c(l,{$fixedPosition:o,children:[p,f&&s(u,{children:f})]})};export{f as FullPageSpinner};

package/dist/molecules/InfoElement/CopyText.js

@@ -0,0 +1,41 @@
+import{colors as e}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import n,{useEffect as r,useRef as i,useState as a}from"react";import{Icon as o,Typography as s}from"@equinor/eds-core-react";import c,{keyframes as l}from"styled-components";import{jsx as u,jsxs as d}from"react/jsx-runtime";import{copy as f}from"@equinor/eds-icons";const p=c.div`
+  position: relative;
+  pointer-events: auto;
+  width: fit-content;
+  &:hover {
+    cursor: pointer;
+  }
+`,m=l`
+  from {
+    opacity: 0;
+    background: none;
+  }
+
+  to {
+    opacity: 1;
+    background: ${e.ui.background__light.rgba};
+  }
+`,h=c.div`
+  position: absolute;
+  padding: ${t.xx_small};
+  z-index: 1000;
+  top: 50%;
+  right: calc(${t.x_small} * -1);
+  transform: translate(100%, -50%);
+  animation: ${m} 0.25s;
+  background: ${e.ui.background__light.rgba};
+  border: 1px solid ${e.ui.background__medium.rgba};
+  border-radius: 2px;
+  p,
+  svg {
+    color: ${e.interactive.primary__resting.rgba};
+  }
+  p {
+    font-weight: 700;
+    margin-top: 2px;
+  }
+  display: grid;
+  grid-template-columns: auto 2.75rem;
+  grid-gap: ${t.xx_small};
+  align-items: center;
+`,g=({children:e,textToCopy:t})=>{let n=i(!1),[c,l]=a(!1),[m,g]=a(`Copy`),_=()=>{navigator.clipboard.writeText(t),g(`Copied!`),setTimeout(()=>{n.current&&g(`Copy`)},3e3)};return r(()=>(n.current=!0,()=>{n.current=!1}),[]),d(p,{onClick:_,onMouseOver:()=>l(!0),onMouseOut:()=>l(!1),children:[e,c&&d(h,{children:[u(o,{data:f,size:16}),u(s,{variant:`overline`,children:m})]})]})};export{g as default};

package/dist/molecules/InfoElement/InfoElement.d.ts

@@ -0,0 +1,18 @@
+import React, { ReactElement } from "react";
+
+//#region src/molecules/InfoElement/InfoElement.d.ts
+interface InfoElementProps {
+  title: string;
+  content: string | ReactElement;
+  capitalizeContent?: boolean;
+  copyableContent?: boolean;
+}
+/**
+ * @param title - String
+ * @param content - String | ReactElement
+ * @param copyableContent - Should the content be copyable via hover - Defaults to false (only works when content is string)
+ * @param capitalizeContent - Should the content be capitalized - Defaults to false (only works when content is string)
+ */
+declare const InfoElement: React.ForwardRefExoticComponent<InfoElementProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { InfoElement, InfoElementProps };

package/dist/molecules/InfoElement/InfoElement.js

@@ -0,0 +1 @@
+import e from"./CopyText.js";import t,{forwardRef as n}from"react";import{Typography as r}from"@equinor/eds-core-react";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=n(({title:t,content:n,copyableContent:o,capitalizeContent:s},c)=>{if(typeof n!=`string`&&(o||s))throw Error(`copyableContent and capitalizeContent only works when content is string`);let l=typeof n==`string`?i(r,{variant:`h6`,children:s?n.toUpperCase():n}):n;return a(`div`,{ref:c,children:[i(r,{group:`paragraph`,variant:`overline`,children:t?.toUpperCase()}),o&&typeof n==`string`?i(e,{textToCopy:n,children:l}):l]})});o.displayName=`InfoElement`;export{o as InfoElement};

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

@@ -0,0 +1,20 @@
+import * as react91 from "react";
+import { FocusEventHandler, HTMLAttributes, MouseEventHandler, ReactNode } from "react";
+import { IconData } from "@equinor/eds-icons";
+
+//#region src/molecules/ListItem/ListItem.d.ts
+interface ListItemProps extends HTMLAttributes<HTMLButtonElement> {
+  label: string;
+  onClick: MouseEventHandler<HTMLButtonElement>;
+  onFocus?: FocusEventHandler<HTMLButtonElement>;
+  onBlur?: FocusEventHandler<HTMLButtonElement>;
+  leadingContent?: ReactNode | IconData;
+  trailingContent?: ReactNode | IconData;
+  disabled?: boolean;
+  selected?: boolean;
+  isChild?: boolean;
+  borderBottom?: boolean;
+}
+declare const ListItem: react91.ForwardRefExoticComponent<ListItemProps & react91.RefAttributes<HTMLButtonElement>>;
+//#endregion
+export { ListItem, ListItemProps };

package/dist/molecules/ListItem/ListItem.js

@@ -0,0 +1,32 @@
+import{animation as e}from"../../atoms/style/animation.js";import{colors as t}from"../../atoms/style/colors.js";import{spacings as n}from"../../atoms/style/spacings.js";import{renderContent as r}from"./ListItem.utils.js";import{forwardRef as i}from"react";import{Typography as a}from"@equinor/eds-core-react";import o,{css as s}from"styled-components";import{jsx as c,jsxs as l}from"react/jsx-runtime";const u=o.button`
+  display: flex;
+  gap: ${n.small};
+  align-items: center;
+  min-width: 210px;
+  padding: ${({$isChild:e,$borderBottom:t})=>{let r=`${n.small} ${n.large} ${n.small}`;return t&&(r=`${n.small} ${n.large} calc(${n.small} - 1px)`),e?`${r} ${n.xx_large}`:`${r} ${n.medium}`}};
+  background: ${({$selected:e})=>e?t.interactive.primary__selected_highlight.rgba:`transparent`};
+  transition: background ${e.transitionMS};
+  ${({$borderBottom:e})=>e?s`
+        border-bottom: 1px solid ${t.ui.background__medium.rgba};
+      `:``}
+  &:disabled {
+      cursor: not-allowed;
+      background: transparent;
+      > section > p {
+        color: ${t.interactive.disabled__text.rgba};
+      }
+  }
+  &:focus:not(:disabled) {
+      outline: 1px dashed ${t.interactive.primary__resting.rgba};
+  }
+  &:hover:not(:disabled) {
+    background: ${({$selected:e})=>e?t.interactive.primary__selected_hover.rgba:t.interactive.primary__hover_alt.rgba};
+  }
+  > section {
+      padding: ${n.small} 0};
+  }
+`,d=o.span`
+  margin-left: auto;
+  display: flex;
+  align-items: center;
+`,f=i(({label:e,onClick:t,onFocus:n,onBlur:i,className:o,disabled:s=!1,leadingContent:f,trailingContent:p,isChild:m=!1,selected:h=!1,borderBottom:g=!1},_)=>l(u,{ref:_,className:o,$isChild:m,$selected:h,$borderBottom:g,disabled:s,onClick:t,onFocus:n,onBlur:i,children:[f&&r(f),c(`section`,{children:c(a,{variant:`button`,group:`navigation`,children:e})}),p&&c(d,{children:r(p)})]}));f.displayName=`ListItem`;export{f as ListItem};

package/dist/molecules/ListItem/ListItem.utils.js

@@ -0,0 +1 @@
+import{colors as e}from"../../atoms/style/colors.js";import{Icon as t}from"@equinor/eds-core-react";import{jsx as n}from"react/jsx-runtime";const r=r=>r&&typeof r==`object`&&`prefix`in r?n(t,{data:r,color:e.interactive.primary__resting.rgba}):r;export{r as renderContent};

package/dist/molecules/OptionDrawer/OptionDrawer.d.ts

@@ -0,0 +1,50 @@
+import { ChangeEvent, MouseEvent } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/molecules/OptionDrawer/OptionDrawer.d.ts
+interface ToggleEventProps<T> {
+  items: T[];
+  toggle: boolean;
+  event: MouseEvent | ChangeEvent;
+}
+interface OptionDrawerProps<T extends {
+  id: string;
+  label: string;
+  disabled?: boolean;
+  parentId?: string;
+  children?: T[];
+}> {
+  item: T;
+  onToggle: ({
+    items,
+    toggle,
+    event
+  }: ToggleEventProps<T>) => void;
+  section?: number;
+  selectedItems?: T[];
+  singleSelect?: boolean;
+  openAll?: boolean;
+  showIntermediateParent?: boolean;
+  parentHasNestedItems?: boolean;
+}
+declare const OptionDrawer: {
+  <T extends {
+    id: string;
+    label: string;
+    disabled?: boolean;
+    parentId?: string;
+    children?: T[];
+  }>({
+    item,
+    onToggle,
+    section,
+    selectedItems,
+    singleSelect,
+    openAll,
+    showIntermediateParent,
+    parentHasNestedItems
+  }: OptionDrawerProps<T>): react_jsx_runtime0.JSX.Element;
+  displayName: string;
+};
+//#endregion
+export { OptionDrawer, OptionDrawerProps };

package/dist/molecules/OptionDrawer/OptionDrawer.js

@@ -0,0 +1 @@
+import{StyledOption as e,StyledOptionItem as t,StyledOptionWrapper as n}from"./OptionDrawer.styles.js";import{getStatus as r}from"./OptionDrawer.utils.js";import{useEffect as i,useState as a}from"react";import{Button as o,Checkbox as s,Icon as c}from"@equinor/eds-core-react";import{jsx as l,jsxs as u}from"react/jsx-runtime";import{chevron_down as d,chevron_right as f}from"@equinor/eds-icons";const p=({item:m,onToggle:h,section:g=0,selectedItems:_=[],singleSelect:v=!1,openAll:y,showIntermediateParent:b=!1,parentHasNestedItems:x=!1})=>{let[S,C]=a(!1),[w,T]=a(r(m,_,v,b));i(()=>{T(r(m,_,v,b))},[m,_,v,b]),i(()=>{C(!!y)},[y]);let E=e=>{m.children&&m.children.length!==0&&C(e=>!e);let t=m.children?.length!==0&&!v&&m.children!==void 0?[...m.children]:[m];w===`CHECKED`?(h({items:t,toggle:!1,event:e}),C(!1)):(w===`NONE`||w===`INTERMEDIATE`)&&(h({items:t,toggle:!0,event:e}),C(!0))},D=()=>{C(e=>!e)},O=m.children&&m.children.length!==0;return u(n,{$section:g,"data-testid":m.id,children:[u(t,{$paddedLeft:x&&!O,children:[O&&l(o,{variant:`ghost_icon`,onClick:D,"data-testid":`chevron-toggler-option-drawer`,children:l(c,{data:S?d:f})}),u(e,{$section:g,onClick:E,disabled:!!m.disabled,children:[l(s,{indeterminate:w===`INTERMEDIATE`,checked:w===`CHECKED`,color:`secondary`,disabled:!!m.disabled,onChange:()=>null}),m.label]})]}),S&&m.children?.map(e=>l(p,{section:g+1,onToggle:h,selectedItems:_,item:e,singleSelect:v,openAll:y,showIntermediateParent:b,parentHasNestedItems:!0},`OptionDrawer-${e.id}`))]},`StyledOptionWrapper-${m.id}`)};p.displayName=`OptionDrawer`;export{p as OptionDrawer};

package/dist/molecules/OptionDrawer/OptionDrawer.styles.js

@@ -0,0 +1,36 @@
+import{colors as e}from"../../atoms/style/colors.js";import t from"styled-components";const n=t.div`
+  margin-left: ${({$section:e})=>e>0?`22px`:``};
+  opacity: 1;
+  color: ${e.text.static_icons__default.rgba};
+`,r=t.button`
+  position: relative;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  cursor: pointer;
+  transition: background-color 0.1s ease-in;
+  font-family: 'Equinor', sans-serif;
+  font-size: 1rem;
+  color: ${e.text.static_icons__default.rgba};
+  &:hover:not(:disabled) {
+    background-color: ${e.interactive.primary__hover_alt.rgba};
+  }
+  &:disabled {
+    cursor: not-allowed;
+    color: ${e.interactive.disabled__text.rgba};
+    > button {
+      cursor: not-allowed;
+    }
+  }
+  > span::before {
+    display: none;
+  }
+
+  svg {
+    fill: ${e.interactive.primary__resting.rgba};
+  }
+`,i=t.div`
+  display: flex;
+  align-items: center;
+  ${({$paddedLeft:e})=>e&&`margin-left: 40px`};
+`;export{r as StyledOption,i as StyledOptionItem,n as StyledOptionWrapper};

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

@@ -0,0 +1,9 @@
+//#region src/molecules/OptionDrawer/OptionDrawer.types.d.ts
+interface OptionDrawerSelectItem<T> {
+  object: T;
+  id: string;
+  label: string;
+  children: OptionDrawerSelectItem<T>[];
+}
+//#endregion
+export { OptionDrawerSelectItem };

package/dist/molecules/OptionDrawer/OptionDrawer.utils.js

@@ -0,0 +1 @@
+const e=t=>{if(t.length===0)return[];let n=[];return t.forEach(t=>{let r=e(t?.children??[]);n=[t,...n,...r]}),n},t=(t,n,r,i)=>{let a=n.find(e=>e.id===t.id)!==void 0;if(a)return`CHECKED`;if(t.children===void 0||t.children.length===0||r&&!i)return`NONE`;let o=e(t?.children).map(e=>n.find(t=>t.id===e.id)!==void 0);return!r&&o.every(Boolean)?`CHECKED`:o.every(e=>!e)?`NONE`:`INTERMEDIATE`};export{t as getStatus};

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

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

package/dist/molecules/OptionalTooltip/OptionalTooltip.js

@@ -0,0 +1,4 @@
+import{forwardRef as e}from"react";import{Tooltip as t}from"@equinor/eds-core-react";import n from"styled-components";import{Fragment as r,jsx as i}from"react/jsx-runtime";const a=n(t)`
+  color: white;
+  text-transform: ${e=>e.textTransform};
+`,o=e(({title:e,children:t,...n},o)=>e===void 0?i(r,{children:t}):i(a,{ref:o,title:e,...n,children:t}));o.displayName=`OptionalTooltip`;export{o as OptionalTooltip};

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

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

package/dist/molecules/ProfileAvatar/ProfileAvatar.js

@@ -0,0 +1,26 @@
+import{tokens as e}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{colors as t}from"../../atoms/style/colors.js";import{forwardRef as n,useMemo as r}from"react";import{Avatar as i,Icon as a}from"@equinor/eds-core-react";import o from"styled-components";import{jsx as s}from"react/jsx-runtime";import{person as c}from"@equinor/eds-icons";const{shape:l,typography:u}=e,d=[t.infographic.primary__energy_red_55.rgba,t.infographic.primary__moss_green_55.rgba,t.infographic.substitute__green_mint.rgba,t.infographic.substitute__blue_overcast.rgba];function f(e){let t=e.replace(/ *\([^)]*\) */g,``).toUpperCase(),n=t.split(` `),r=t.includes(`,`),i=e=>{let t=e.split(`,`);return t[1].trim().charAt(0)};if(n.length===1&&n[0]!==``)return n[0].charAt(0);if(r)return i(t)+n[0].charAt(0);if(n.length>=2)return n[0].charAt(0)+n[n.length-1].charAt(0)}function p(e){let t=0;if(e)for(let n=0;n<e.length;n++)t+=e.charCodeAt(n);return d[t%d.length]}const m=o.div`
+  width: ${e=>e.$size}px;
+  height: ${e=>e.$size}px;
+  position: relative;
+  font-size: ${e=>e.$fontSize}px;
+  font-family: ${u.heading.h6.fontFamily};
+  border-radius: ${l.circle.borderRadius};
+  background: ${e=>e.disabled?t.interactive.disabled__border.rgba:e.$background};
+  color: ${e=>e.disabled?t.text.static_icons__default.rgba:t.text.static_icons__primary_white.rgba};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  > span {
+    line-height: ${e=>e.$fontSize-4}px;
+    height: ${e=>e.$fontSize-4}px;
+  }
+`,h=o(a)`
+  width: 70%;
+`,g=o.div`
+  width: ${({$size:e})=>e}px;
+  height: ${({$size:e})=>e}px;
+  > div {
+    width: inherit;
+    height: inherit;
+  }
+`,_=n(({url:e,name:t,size:n=`medium`,disabled:a=!1},o)=>{let l=r(()=>!t||t.trim().length===0?s(h,{data:c}):f(t),[t]),u=r(()=>{switch(n){case`small`:return 16;case`small-medium`:return 24;case`medium`:case void 0:return 32;case`large`:return 40;case`x-large`:return 48;default:return n}},[n]),d=r(()=>{switch(n){case`small`:return 6;case`small-medium`:return 10;case`medium`:case void 0:return 14;case`large`:return 16;case`x-large`:return 18;default:return n/2}},[n]),_=r(()=>{if(e)try{if(btoa(atob(e))===e)return`data:image/png;base64, ${e}`}catch{return e}return``},[e]);return _===``?s(m,{$background:p(t),$size:u,$fontSize:d,disabled:a,ref:o,children:s(`span`,{children:l})}):s(g,{$size:u,"data-testid":`avatar-wrapper`,children:s(i,{alt:`user-avatar-${t}`,src:_,disabled:a,ref:o})})});_.displayName=`ProfileAvatar`;export{_ as ProfileAvatar};

package/dist/molecules/RichTextDisplay/RichTextDisplay.d.ts

@@ -0,0 +1,29 @@
+import { ImageExtensionFnProps } from "../RichTextEditor/RichTextEditor.types.js";
+import { FC, HTMLAttributes, ReactNode } from "react";
+import { Editor, Extensions } from "@tiptap/react";
+
+//#region src/molecules/RichTextDisplay/RichTextDisplay.d.ts
+interface RichTextDisplayProps extends Pick<ImageExtensionFnProps, 'onImageRead'> {
+  value: string | null | undefined;
+  /**
+   * @deprecated - Use OnImageRead instead
+   */
+  imgReadToken?: string;
+  lightBackground?: boolean;
+  padding?: 'sm' | 'md' | 'lg' | 'none';
+  extensions?: Extensions;
+  children?: (editor: Editor) => ReactNode;
+}
+/**
+ *
+ * @param value - Rich text content
+ * @param imgReadToken - Deprecated, use onImageRead instead
+ * @param onImageRead - handler used when loading images, expects b64 string to be returned
+ * @param lightBackground - if it should have a light BG color
+ * @param padding - padding in the editor
+ * @param extensions - additional extensions to be added
+ * @param children - render prop for custom rendering, provides editor via callback
+ */
+declare const RichTextDisplay: FC<RichTextDisplayProps & HTMLAttributes<HTMLDivElement>>;
+//#endregion
+export { RichTextDisplay, RichTextDisplayProps };

package/dist/molecules/RichTextDisplay/RichTextDisplay.js

@@ -0,0 +1 @@
+import{DEFAULT_FEATURES as e}from"../RichTextEditor/RichTextEditor.types.js";import{useAmplifyKit as t}from"../../atoms/hooks/useAmplifyKit.js";import{EditorContent as n,EditorStyling as r}from"../RichTextEditor/RichTextEditor.styles.js";import{useEffect as i,useRef as a}from"react";import{jsx as o}from"react/jsx-runtime";import{useEditor as s}from"@tiptap/react";const c=({value:c,imgReadToken:l,onImageRead:u,lightBackground:d=!0,padding:f=`md`,extensions:p,children:m,...h})=>{let g=t({features:e,onImageRead:u}),_=s({shouldRerenderOnTransaction:!0,extensions:p||[g],content:l?c?.replaceAll(/(<img src=")(.+)("\/>)/g,`$1$2?${l}$3`):c,editable:!1}),v=a(c);return i(()=>{_&&c&&c!==v.current&&(_.commands.setContent(c),v.current=c)},[_,c]),_?m?m(_):o(r,{$lightBackground:d,$padding:f,...h,children:o(n,{editor:_,readOnly:!0})}):null};export{c as RichTextDisplay};

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

@@ -0,0 +1,15 @@
+import { ImageExtensionFnProps, RichTextEditorFeatures } from "./RichTextEditor.types.js";
+import { FC, ReactNode } from "react";
+import { Editor, Extensions } from "@tiptap/react";
+
+//#region src/molecules/RichTextEditor/EditorProvider.d.ts
+interface EditorProviderProps extends ImageExtensionFnProps {
+  children: (editor: Editor) => ReactNode;
+  content: string | null | undefined;
+  extensions?: Extensions;
+  onUpdate?: (html: string) => void;
+  placeholder?: string;
+  features?: RichTextEditorFeatures[];
+}
+//#endregion
+export { EditorProviderProps };

package/dist/molecules/RichTextEditor/EditorProvider.js

@@ -0,0 +1 @@
+import{useAmplifyKit as e}from"../../atoms/hooks/useAmplifyKit.js";import{useEffect as t,useRef as n}from"react";import{useEditor as r}from"@tiptap/react";import{useQueryClient as i}from"@tanstack/react-query";const a=({children:a,content:o,features:s,placeholder:c,onUpdate:l,onImageUpload:u,onImageRead:d,onImageRemove:f,onRemovedImagesChange:p,extensions:m=[]})=>{let h=e({features:s,placeholder:c,onImageUpload:u,onImageRead:d}),g=i(),_=n([]),v=n([]),y=n([]),b=e=>{let t=[];e.getJSON().content?.forEach(e=>{e.type===`image`&&e.attrs?.src&&t.push(e.attrs.src)});for(let e of t)if(!_.current.includes(e))_.current.push(e);else if(_.current.includes(e)&&f){let t=g.getQueryData([e]);if(t){let n=t.split(`,`),r=n[0].match(/:(.*?);/)[1],i=atob(n[n.length-1]),a=i.length,o=new Uint8Array(a);for(;a--;)o[a]=i.charCodeAt(a);let s=new File([o],e,{type:r});u?.(s)}}let n=_.current.filter(e=>!t.includes(e)&&!v.current.includes(e));if(f)for(let e of n)f?.(e),v.current.push(e);p&&y.current.length!==n.length&&(p(v.current),y.current=n)},x=r({content:o,shouldRerenderOnTransaction:!0,extensions:[h,...m],onCreate:({editor:e})=>{b(e)},onUpdate:({editor:e})=>{b(e),l?.(e.getHTML())}});return t(()=>{x&&o!==x.getHTML()&&x.commands.setContent(o||``)},[o]),x?a(x):null};export{a as EditorProvider};

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

@@ -0,0 +1,7 @@
+import { EditorPanel, ImageExtensionFnProps } from "../RichTextEditor.types.js";
+import { FC } from "react";
+
+//#region src/molecules/RichTextEditor/MenuBar/AddImageButton.d.ts
+interface AddImageProps extends EditorPanel, Pick<ImageExtensionFnProps, 'onImageUpload'> {}
+//#endregion
+export { AddImageProps };

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

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

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

@@ -0,0 +1,39 @@
+import { EditorPanel, ImageExtensionFnProps, RichTextEditorFeatures } from "../RichTextEditor.types.js";
+import { MenuButtonProps } from "./MenuButton.js";
+import { AddImageProps } from "./AddImageButton.js";
+import * as react32 from "react";
+import { FC } from "react";
+import * as styled_components0 from "styled-components";
+import { Editor } from "@tiptap/react";
+import * as styled_components_dist_types3 from "styled-components/dist/types";
+
+//#region src/molecules/RichTextEditor/MenuBar/MenuBar.d.ts
+interface MenuBarProps extends Pick<ImageExtensionFnProps, 'onImageUpload'> {
+  editor: Editor;
+  features: RichTextEditorFeatures[];
+}
+declare const AmplifyBar: FC<MenuBarProps>;
+declare const EditorMenu: {
+  Bar: styled_components_dist_types3.IStyledComponentBase<"web", styled_components0.FastOmit<react32.DetailedHTMLProps<react32.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+  Bars: styled_components_dist_types3.IStyledComponentBase<"web", styled_components0.FastOmit<react32.DetailedHTMLProps<react32.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+  Button: react32.ForwardRefExoticComponent<Omit<MenuButtonProps, "ref"> & react32.RefAttributes<HTMLButtonElement>>;
+  Section: styled_components_dist_types3.IStyledComponentBase<"web", styled_components0.FastOmit<react32.DetailedHTMLProps<react32.HTMLAttributes<HTMLElement>, HTMLElement>, never>> & string;
+  AddImageButton: FC<AddImageProps>;
+};
+declare const EditorText: {
+  History: FC<EditorPanel>;
+  Formatting: FC<EditorPanel>;
+  Headers: FC<EditorPanel>;
+  Lists: FC<EditorPanel>;
+  Color: FC<EditorPanel>;
+  Code: FC<EditorPanel>;
+  Links: FC<EditorPanel>;
+  Table: FC<EditorPanel>;
+  TableBar: FC<{
+    editor: Editor;
+  }>;
+  Alignment: FC<EditorPanel>;
+  ClearFormatting: FC<EditorPanel>;
+};
+//#endregion
+export { AmplifyBar, EditorMenu, EditorText, MenuBarProps };

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

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

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

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

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

@@ -0,0 +1,15 @@
+import { ReactNode, RefObject } from "react";
+import { IconData } from "@equinor/eds-icons";
+
+//#region src/molecules/RichTextEditor/MenuBar/MenuButton.d.ts
+interface MenuButtonProps {
+  ref?: RefObject<HTMLButtonElement>;
+  children?: ReactNode;
+  icon: IconData;
+  onClick: () => void;
+  active?: boolean;
+  disabled?: boolean;
+  tooltip?: string;
+}
+//#endregion
+export { MenuButtonProps };

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

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

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

@@ -0,0 +1 @@
+import{RichTextEditorFeatures as e}from"../../RichTextEditor.types.js";import{MenuButton as t}from"../MenuButton.js";import{jsx as n}from"react/jsx-runtime";import{table_chart as r}from"@equinor/eds-icons";const i=({editor:i,features:a})=>{if(!(a&&!a.includes(e.TABLE))&&!i.isActive(`table`))return n(t,{"data-testid":`add-table-button`,icon:r,onClick:()=>{i.chain().focus().insertTable({rows:1,cols:3,withHeaderRow:!1}).run()},tooltip:`Add Table`})};export{i as TextTable};

package/dist/molecules/RichTextEditor/MenuBar/Table/TableBar.d.ts

@@ -0,0 +1,26 @@
+import { FC } from "react";
+import { Editor } from "@tiptap/react";
+
+//#region src/molecules/RichTextEditor/MenuBar/Table/TableBar.d.ts
+declare const TableMenuBar: FC<{
+  editor: Editor;
+}>;
+declare const TextTable: {
+  delete: FC<{
+    editor: Editor;
+  }>;
+  toggle: FC<{
+    editor: Editor;
+  }>;
+  column: FC<{
+    editor: Editor;
+  }>;
+  row: FC<{
+    editor: Editor;
+  }>;
+  merge: FC<{
+    editor: Editor;
+  }>;
+};
+//#endregion
+export { TableMenuBar, TextTable };

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

@@ -0,0 +1 @@
+import{TableColumn as e}from"./TableColumn.js";import{TableDelete as t}from"./TableDelete.js";import{TableMerge as n}from"./TableMerge.js";import{TableRow as r}from"./TableRow.js";import{ToggleTable as i}from"./ToggleTable.js";import{EditorMenu as a}from"../MenuBar.js";import{jsx as o,jsxs as s}from"react/jsx-runtime";const c=({editor:c})=>c.isActive(`table`)?s(a.Bar,{children:[o(t,{editor:c}),o(i,{editor:c}),o(e,{editor:c}),o(r,{editor:c}),o(n,{editor:c})]}):null,l={delete:t,toggle:i,column:e,row:r,merge:n};export{c as TableMenuBar,l as TextTable};

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

@@ -0,0 +1 @@
+import{amplify_table_add_column_left as e,amplify_table_add_column_right as t,amplify_table_remove_column as n}from"../../../../atoms/icons/wysiwyg.js";import{MenuSection as r}from"../MenuBar.styles.js";import{MenuButton as i}from"../MenuButton.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({editor:s})=>{let c=()=>s.chain().focus().addColumnBefore().run(),l=()=>s.chain().focus().addColumnAfter().run(),u=()=>s.chain().focus().deleteColumn().run();return o(r,{children:[a(i,{tooltip:`Add column left`,icon:e,onClick:c,disabled:!s.can().addColumnBefore()}),a(i,{tooltip:`Add column right`,icon:t,onClick:l,disabled:!s.can().addColumnAfter()}),a(i,{tooltip:`Remove column`,icon:n,onClick:u,disabled:!s.can().deleteColumn()})]})};export{s as TableColumn};

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

@@ -0,0 +1 @@
+import{MenuButton as e}from"../MenuButton.js";import{jsx as t}from"react/jsx-runtime";import{table_chart as n}from"@equinor/eds-icons";const r=({editor:r})=>{let i=()=>r.chain().focus().deleteTable().run();return t(e,{active:!0,"data-testid":`remove-table`,tooltip:`Remove table`,icon:n,onClick:i})};export{r as TableDelete};

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

@@ -0,0 +1 @@
+import{amplify_table_merge_cells as e,amplify_table_split_cell as t}from"../../../../atoms/icons/wysiwyg.js";import{MenuSection as n}from"../MenuBar.styles.js";import{MenuButton as r}from"../MenuButton.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({editor:o})=>{let s=()=>o.chain().focus().mergeCells().run(),c=()=>o.chain().focus().splitCell().run();return a(n,{children:[i(r,{tooltip:`Merge selected cells`,icon:e,onClick:s,disabled:!o.can().mergeCells()}),i(r,{tooltip:`Split selected cell`,icon:t,onClick:c,disabled:!o.can().splitCell()})]})};export{o as TableMerge};

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

@@ -0,0 +1 @@
+import{amplify_table_add_row_above as e,amplify_table_add_row_below as t,amplify_table_remove_row as n}from"../../../../atoms/icons/wysiwyg.js";import{MenuSection as r}from"../MenuBar.styles.js";import{MenuButton as i}from"../MenuButton.js";import{jsx as a,jsxs as o}from"react/jsx-runtime";const s=({editor:s})=>{let c=()=>s.chain().focus().addRowAfter().run(),l=()=>s.chain().focus().addRowBefore().run(),u=()=>s.chain().focus().deleteRow().run();return o(r,{children:[a(i,{tooltip:`Add row below`,icon:t,onClick:c,disabled:!s.can().addRowAfter()}),a(i,{tooltip:`Add row above`,icon:e,onClick:l,disabled:!s.can().addRowBefore()}),a(i,{tooltip:`Remove row`,icon:n,onClick:u,disabled:!s.can().deleteRow()})]})};export{s as TableRow};

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

@@ -0,0 +1 @@
+import{amplify_table_column_heading as e,amplify_table_row_heading as t}from"../../../../atoms/icons/wysiwyg.js";import{MenuSection as n}from"../MenuBar.styles.js";import{MenuButton as r}from"../MenuButton.js";import{jsx as i,jsxs as a}from"react/jsx-runtime";const o=({editor:o})=>{let s=()=>o.chain().focus().toggleHeaderRow().run(),c=()=>o.chain().focus().toggleHeaderColumn().run();return a(n,{children:[i(r,{tooltip:`Toggle header row`,icon:t,onClick:s,disabled:!o.can().toggleHeaderRow()}),i(r,{tooltip:`Toggle header column`,icon:e,onClick:c,disabled:!o.can().toggleHeaderColumn()})]})};export{o as ToggleTable};

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

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

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

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

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

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