@equinor/amplify-component-lib 8.16.1 → 8.17.0

package/dist/molecules/Dialog/Dialog.d.ts

@@ -25,9 +25,14 @@ export interface DialogProps extends Omit<EDSDialogProps, 'title'> {
     onClose: () => void;
     width?: number;
     actions?: DialogAction[];
-    withContentPadding?: boolean;
+    withContentPadding?: {
+        vertical?: boolean;
+        horizontal?: boolean;
+    };
     withBorders?: boolean;
     contentMaxHeight?: string;
+    hideClose?: boolean;
+    additionalInfo?: string | ReactNode;
 }
 /**
  * @param title - String or up to 2 react elements in a flex-column
@@ -35,9 +40,11 @@ export interface DialogProps extends Omit<EDSDialogProps, 'title'> {
  * @param onClose - fn to set open to false
  * @param width - width in px, defaults to just fit-content
  * @param actions - Dialog actions, { position: "right" is default }
- * @param withContentPadding - Defaults to true
+ * @param withContentPadding - Defaults to true for vertical and horizontal
  * @param withBorders - Defaults to false
  * @param contentMaxHeight - Defaults to '60vh'
+ * @param hideClose - Defaults to true. Hides the top right close button icon
+ * @param additionalInfo - Defaults to empty, and won't show the additional info button
  * Also inherits props from EDS dialog
  */
 export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/molecules/Dialog/Dialog.js

@@ -1 +1 @@
-import{jsx as i,jsxs as t}from"react/jsx-runtime";import{forwardRef as e}from"react";import{Typography as o,Button as n,Icon as r}from"@equinor/eds-core-react";import{close as d}from"@equinor/eds-icons";import{DialogElement as l,DialogTitle as s,DialogContent as c,DialogActions as h}from"./Dialog.styles.js";import{DialogAction as a}from"./DialogAction.js";const p=e((({title:e,children:p,width:g,actions:m,withContentPadding:f=!0,withBorders:x=!1,contentMaxHeight:w="60vh",...y},v)=>{const $=m?.filter((i=>"left"===i.position)),u=m?.filter((i=>"center"===i.position)),C=m?.filter((i=>void 0===i.position||"right"===i.position)),j="string"==typeof e?i(o,{variant:"h6",children:e}):e,B="string"==typeof p?i(o,{variant:"body_long",children:p}):p;return t(l,{...y,ref:v,style:{width:g?`${g}px`:void 0,...y.style},children:[t(s,{$withBorders:x,style:{width:g?`${g}px`:void 0},children:[i("section",{children:j}),i(n,{variant:"ghost_icon",onClick:y.onClose,children:i(r,{data:d})})]}),i(c,{$withContentPadding:f,style:{width:g?`${g}px`:void 0,maxHeight:w},children:B}),m&&m.length>0&&t(h,{$withBorders:x,style:{width:g?`${g}px`:void 0},children:[$&&$.length>0&&i("section",{id:"dialog-actions-left",children:$.map((t=>i(a,{...t},t.text)))}),u&&u.length>0&&i("section",{id:"dialog-actions-center",children:u.map((t=>i(a,{...t},t.text)))}),C&&C.length>0&&i("section",{id:"dialog-actions-right",children:C.map((t=>i(a,{...t},t.text)))})]})]})}));p.displayName="Dialog";export{p as Dialog};
+import{jsx as i,jsxs as t}from"react/jsx-runtime";import{forwardRef as o,useState as e}from"react";import{Typography as n,Button as d,Icon as r}from"@equinor/eds-core-react";import{info_circle as l,close as a}from"@equinor/eds-icons";import{DialogElement as s,DialogTitle as c,DialogContent as h,AdditionalInfoBanner as g,InfoIconWrapper as p,DialogActions as m}from"./Dialog.styles.js";import{DialogAction as f}from"./DialogAction.js";const v=o((({title:o,children:v,width:w,actions:x,withContentPadding:y,withBorders:$=!1,contentMaxHeight:C="60vh",hideClose:u,additionalInfo:b,...j},z)=>{const{horizontal:B=!0,vertical:D=!0}=y??{},[P,_]=e(!1),k=x?.filter((i=>"left"===i.position)),q=x?.filter((i=>"center"===i.position)),H=x?.filter((i=>void 0===i.position||"right"===i.position)),A="string"==typeof o?i(n,{variant:"h6",children:o}):o,I="string"==typeof v?i(n,{variant:"body_long",children:v}):v;return t(s,{...j,ref:z,style:{width:w?`${w}px`:void 0,...j.style},children:[t(c,{$withBorders:$,style:{width:w?`${w}px`:void 0},children:[i("section",{children:A}),t("div",{children:[b&&i(d,{variant:"ghost_icon",onClick:()=>_((i=>!i)),"data-testid":"dialog-info-button",children:i(r,{data:l})}),!u&&i(d,{variant:"ghost_icon",onClick:j.onClose,"data-testid":"dialog-close-button",children:i(r,{data:a,"data-testid":"dialog-close-icon",size:24})})]})]}),t(h,{$withContentPaddingX:B,$withContentPaddingY:D,style:{width:w?`${w}px`:void 0,maxHeight:C},children:[P&&b&&t(g,{children:[i(p,{children:i(r,{data:l,size:24})}),b]}),I]}),x&&x.length>0&&t(m,{$withBorders:$,style:{width:w?`${w}px`:void 0},children:[k&&k.length>0&&i("section",{id:"dialog-actions-left",children:k.map((t=>i(f,{...t},t.text)))}),q&&q.length>0&&i("section",{id:"dialog-actions-center",children:q.map((t=>i(f,{...t},t.text)))}),H&&H.length>0&&i("section",{id:"dialog-actions-right",children:H.map((t=>i(f,{...t},t.text)))})]})]})}));v.displayName="Dialog";export{v as Dialog};

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

@@ -24,7 +24,8 @@ export declare const DialogTitle: import("styled-components/dist/types").IStyled
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, StyledDialogProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("@equinor/eds-core-react").DialogTitleProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
 interface DialogContentProps {
-    $withContentPadding: boolean;
+    $withContentPaddingY: boolean;
+    $withContentPaddingX: boolean;
 }
 export declare const DialogContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<{
     scrollable?: boolean;
@@ -36,4 +37,6 @@ export declare const DialogContent: import("styled-components/dist/types").IStyl
 export declare const DialogActions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("@equinor/eds-core-react").DialogActionsProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, StyledDialogProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("@equinor/eds-core-react").DialogActionsProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const AdditionalInfoBanner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InfoIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

package/dist/molecules/Dialog/Dialog.styles.js

@@ -1,37 +1,36 @@
-import{Dialog as o}from"@equinor/eds-core-react";import{colors as t}from"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import e,{css as n}from"styled-components";const d=e(o)`
+import{Dialog as i}from"@equinor/eds-core-react";import{colors as o}from"../../atoms/style/colors.js";import{spacings as t}from"../../atoms/style/spacings.js";import e,{css as d}from"styled-components";const n=e(i)`
   grid-gap: 0;
-`,r=e(o.Title)`
+`,r=e(i.Title)`
   display: flex;
   align-items: center;
   justify-content: space-between;
   width: 100%;
-  padding: ${i.medium};
+  padding: ${t.medium};
 
-  ${({$withBorders:o})=>o?n`
-        border-bottom: 1px solid ${t.ui.background__medium.rgba};
+  ${({$withBorders:i})=>i?d`
+        border-bottom: 1px solid ${o.ui.background__medium.rgba};
       `:""}
   > section {
     display: flex;
     flex-direction: column;
   }
-`,s=e(o.CustomContent)`
+`,a=e(i.CustomContent)`
   min-height: unset;
   overflow: auto;
-  ${({$withContentPadding:o})=>o?n`
-        padding: ${i.medium};
-      `:n`
-      padding: 0;
+  ${({$withContentPaddingX:i,$withContentPaddingY:o})=>d`
+      padding: ${o?t.medium:0}
+        ${i?t.medium:0};
     `}
-`,a=e(o.Actions)`
-  border-top: 1px solid ${t.ui.background__medium.rgba};
+`,s=e(i.Actions)`
+  border-top: 1px solid ${o.ui.background__medium.rgba};
   display: grid;
   grid-template-columns: auto auto auto;
-  padding-top: ${i.medium};
+  padding-top: ${t.medium};
   width: 100%;
 
   > section {
     display: flex;
-    gap: ${i.small};
+    gap: ${t.small};
   }
 
   > section#dialog-actions-left {
@@ -48,9 +47,18 @@ import{Dialog as o}from"@equinor/eds-core-react";import{colors as t}from"../../a
     justify-content: flex-end;
   }
 
-  ${({$withBorders:o})=>o?n`
-        border-top: 1px solid ${t.ui.background__medium.rgba};
-      `:n`
+  ${({$withBorders:i})=>i?d`
+        border-top: 1px solid ${o.ui.background__medium.rgba};
+      `:d`
       border-top: none;
     `}
-`;export{a as DialogActions,s as DialogContent,d as DialogElement,r as DialogTitle};
+`,m=e.div`
+  display: flex;
+  flex-direction: row;
+  gap: ${t.medium};
+  padding: ${t.medium};
+  background-color: ${o.ui.background__info.rgba};
+`,l=e.div`
+  display: flex;
+  align-items: center;
+`;export{m as AdditionalInfoBanner,s as DialogActions,a as DialogContent,n as DialogElement,r as DialogTitle,l as InfoIconWrapper};

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

@@ -7,5 +7,4 @@ export declare const RichText: {
     }, import("./RichTextEditor.styles").RichTextContentProps>> & string & Omit<import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<import("@tiptap/react").EditorContentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>>, keyof import("react").Component<any, {}, any>>;
     Display: import("react").FC<import("../RichTextDisplay/RichTextDisplay").RichTextDisplayProps & import("react").HTMLAttributes<HTMLDivElement>>;
     Bar: import("react").FC<import("./MenuBar/MenuBar").MenuBarProps>;
-    Kit: import("@tiptap/core").Extension<import("./custom-extensions/AmplifyKit").AmplifyKitOptions, any>;
 };

package/dist/molecules/RichTextEditor/index.js

@@ -1 +1 @@
-import{AmplifyKit as t}from"./custom-extensions/AmplifyKit.js";import{AmplifyBar as i}from"./MenuBar/MenuBar.js";import{EditorProvider as r}from"./EditorProvider.js";import{EditorStyling as o,EditorContent as s}from"./RichTextEditor.styles.js";import{RichTextDisplay as e}from"../RichTextDisplay/RichTextDisplay.js";import"react/jsx-runtime";import"./RichTextEditor.types.js";const m={Styling:o,Provider:r,Content:s,Display:e,Bar:i,Kit:t};export{m as RichText};
+import{AmplifyBar as r}from"./MenuBar/MenuBar.js";import{EditorProvider as t}from"./EditorProvider.js";import{EditorStyling as i,EditorContent as o}from"./RichTextEditor.styles.js";import{RichTextDisplay as e}from"../RichTextDisplay/RichTextDisplay.js";import"react/jsx-runtime";import"./RichTextEditor.types.js";const s={Styling:i,Provider:t,Content:o,Display:e,Bar:r};export{s as RichText};

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

@@ -0,0 +1,8 @@
+import { FC, ReactNode } from 'react';
+interface ButtonWithMenuProps {
+    onOpenChange?: (value: boolean) => void;
+    menuItems: ReactNode[];
+    children: ReactNode[];
+}
+export declare const ButtonWithMenu: FC<ButtonWithMenuProps>;
+export {};

package/dist/organisms/Filter/ButtonWithMenu.js

@@ -0,0 +1 @@
+import{jsxs as r,Fragment as e,jsx as n}from"react/jsx-runtime";import{useState as o,useRef as t}from"react";import{Menu as c}from"@equinor/eds-core-react";const i=({onOpenChange:i,menuItems:l,children:m})=>{const[u,h]=o(!1),p=t(null);return r(e,{children:[n("button",{ref:p,onClick:()=>{h(!u),i?.(!u)},children:m}),u&&n(c,{open:!0,anchorEl:p.current,onClose:()=>{h(!1),i?.(!1)},children:l})]})};export{i as ButtonWithMenu};

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

@@ -1,22 +1,4 @@
-import { ChangeEvent, ReactNode } from 'react';
-import { IconData } from '@equinor/eds-icons';
-export interface FilterProps<T> {
-    values: {
-        key: T;
-        label: string;
-        icon?: IconData;
-    }[];
-    onClearFilter: (key: T) => void;
-    onClearAllFilters: () => void;
-    search: string;
-    onSearchChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    onSearchEnter: (value: string) => void;
-    children: ReactNode | ReactNode[];
-    initialOpen?: boolean;
-    placeholder?: string;
-    id?: string;
-    showClearFiltersButton?: boolean;
-}
+import { FilterProps } from './Filter.types';
 /**
  * @param values - Array of values to display as chips ({ value: string, label: string, icon?: IconData }[])
  * @param search - The current search value
@@ -29,5 +11,12 @@ export interface FilterProps<T> {
  * @param placeholder - Placeholder text for the search input, defaults to 'Search...'
  * @param id - ID for the search field
  * @param showClearFiltersButton - Whether to show the clear filters button, defaults to true
+ * - Sorting props
+ * @param sortValue - The current sort value
+ * @param onSortChange - Callback when a sorting is selected in the menu
+ * @param sortItems - Array of sort items ({ value: S, label: string }[])
+ * - Quick filter props
+ * @param onQuickFilter - Callback when a quick filter is selected in the menu
+ * @param quickFilterItems - Array of quick filter items ({ value: Q, label: string }[])
  */
-export declare function Filter<T>({ values, search, onSearchChange, onSearchEnter, onClearFilter, onClearAllFilters, children, initialOpen, placeholder, id, showClearFiltersButton, }: FilterProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function Filter<T, S, Q>({ values, search, onSearchChange, onSearchEnter, onClearFilter, onClearAllFilters, children, initialOpen, placeholder, id, showClearFiltersButton, ...rest }: FilterProps<T, S, Q>): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Filter/Filter.js

@@ -1 +1 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as t,useRef as i}from"react";import{Icon as n,Button as o}from"@equinor/eds-core-react";import{filter_list as a,clear as l,arrow_drop_up as c,arrow_drop_down as h}from"@equinor/eds-icons";import{Wrapper as s,Container as d,StyledChip as m,SearchField as g,Content as u}from"./Filter.styles.js";import{colors as p}from"../../atoms/style/colors.js";import{AnimatePresence as C}from"framer-motion";function y({values:y,search:f,onSearchChange:k,onSearchEnter:v,onClearFilter:_,onClearAllFilters:b,children:F,initialOpen:x=!1,placeholder:$="Search...",id:j="filter-search",showClearFiltersButton:w=!0}){const[A,B]=t(x),[D,S]=t(-1),q=i(x?"auto":0),E=()=>{B((e=>!e)),"auto"===q.current&&(q.current=0)},z=()=>{b()};return e(s,{children:[e(d,{$open:A,children:[r(n,{onClick:E,data:a,color:p.interactive.primary__resting.rgba}),e("section",{children:[y.map((({key:e,label:t,icon:i},n)=>r(m,{onDelete:()=>_(e),leadingIconData:i,$tryingToRemove:D===n,children:t},`${t}-${n}`))),r(g,{id:j,type:"search",value:f,placeholder:$,onChange:k,onKeyDownCapture:e=>{"Enter"===e.key&&""!==f?v(f):"Backspace"===e.key&&""===f&&(y.length>0&&-1===D?S(y.length-1):-1!==D&&(_(y[D].key),S(-1)))},onFocus:()=>{A||B(!0)}})]}),y.length>0&&r(o,{variant:"ghost_icon",onClick:z,"data-testid":"clear-all-x",children:r(n,{data:l,size:16,color:p.text.static_icons__tertiary.rgba})}),r(o,{variant:"ghost_icon",onClick:E,"data-testid":"toggle-open-button",children:r(n,{data:A?c:h})})]}),r(C,{children:A&&r(u,{$showClearFilterButton:w,animate:{height:"auto"},initial:{height:q.current},exit:{height:0},children:r("section",{children:Array.isArray(F)?F.map(((t,i)=>e("div",{children:[t,i===F.length-1&&w&&r(o,{variant:"outlined",onClick:z,disabled:0===y.length,children:"Clear filters"})]},i))):e("div",{children:[F,w&&r(o,{variant:"outlined",onClick:z,disabled:0===y.length,children:"Clear filters"})]})})})})]})}export{y as Filter};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as r,useRef as i}from"react";import{Icon as o,Button as n}from"@equinor/eds-core-react";import{filter_list as a,clear as l,arrow_drop_up as c,arrow_drop_down as s}from"@equinor/eds-icons";import{Wrapper as h,Container as d,StyledChip as m,SearchField as u,Content as g}from"./Filter.styles.js";import{colors as p}from"../../atoms/style/colors.js";import{QuickFilter as f}from"./QuickFilter.js";import{Sorting as y}from"./Sorting.js";import{AnimatePresence as C}from"framer-motion";function k({values:k,search:_,onSearchChange:b,onSearchEnter:v,onClearFilter:F,onClearAllFilters:x,children:j,initialOpen:S=!1,placeholder:$="Search...",id:q="filter-search",showClearFiltersButton:w=!0,...A}){const[B,D]=r(S),[E,I]=r(-1),z=i(S?"auto":0),K=()=>{D((e=>!e)),"auto"===z.current&&(z.current=0)},O=()=>{x()};return e(h,{children:[e(d,{children:[t(o,{onClick:K,data:a,color:p.text.static_icons__tertiary.rgba}),e("section",{children:[k.map((({key:e,label:r,icon:i},o)=>t(m,{onDelete:()=>F(e),leadingIconData:i,$tryingToRemove:E===o,children:r},`${r}-${o}`))),t(u,{id:q,type:"search",value:_,placeholder:$,onChange:b,onKeyDownCapture:e=>{"Enter"===e.key&&""!==_?v(_):"Backspace"===e.key&&""===_&&(k.length>0&&-1===E?I(k.length-1):-1!==E&&(F(k[E].key),I(-1)))},onFocus:()=>{B||D(!0)}})]}),k.length>0&&t(n,{variant:"ghost_icon",onClick:O,"data-testid":"clear-all-x",children:t(o,{data:l,size:16,color:p.text.static_icons__tertiary.rgba})}),"quickFilterItems"in A&&t(f,{...A}),"sortValue"in A&&t(y,{...A}),t("button",{onClick:K,"data-testid":"toggle-open-button",children:t(o,{data:B?c:s,color:p.text.static_icons__tertiary.rgba})})]}),t(C,{children:B&&t(g,{$showClearFilterButton:w,animate:{height:"auto"},initial:{height:z.current},exit:{height:0},children:t("section",{children:Array.isArray(j)?j.map(((r,i)=>e("div",{children:[r,i===j.length-1&&w&&t(n,{variant:"outlined",onClick:O,disabled:0===k.length,children:"Clear filters"})]},i))):e("div",{children:[j,w&&t(n,{variant:"outlined",onClick:O,disabled:0===k.length,children:"Clear filters"})]})})})})]})}export{k as Filter};

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

@@ -1,8 +1,5 @@
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-interface ContainerProps {
-    $open: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContainerProps>> & string;
+export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const SearchField: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, never>> & string;
 interface ContentProps {
     $showClearFilterButton: boolean;

package/dist/organisms/Filter/Filter.styles.js

@@ -1,44 +1,68 @@
-import"react";import"../../molecules/RichTextEditor/custom-extensions/AmplifyKit.js";import"../../molecules/RichTextEditor/RichTextEditor.types.js";import"../../_virtual/lodash.js";import"@equinor/subsurface-app-management";import"@microsoft/signalr";import"@tanstack/react-query";import"../../atoms/enums/Environment.js";import"../../atoms/utils/auth_environment.js";import"../TopBar/Notifications/NotificationProvider.js";import"../../providers/AuthProvider/AuthProvider.js";import"../../providers/ReleaseNotesProvider.js";import"../../providers/SideBarProvider.js";import"../../providers/SnackbarProvider/SnackbarProvider.js";import"../../providers/StepperProvider.js";import"../../providers/TableOfContentsProvider.js";import"../../providers/ThemeProvider/ThemeProvider.js";import"../../providers/TutorialStepsProvider.js";import{elevation as r,shape as t,typography as o}from"../../atoms/style/index.js";import"../../atoms/enums/Errors.js";import"../../atoms/enums/Theme.js";import"../../atoms/enums/SpacingsMode.js";import"react/jsx-runtime";import"../../deprecated/ErrorPage/illustrations/GlitchAnimation.js";import"../../deprecated/ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import{Chip as i}from"../../molecules/Chip/Chip.js";import{motion as e}from"framer-motion";import s,{css as a}from"styled-components";import{colors as n}from"../../atoms/style/colors.js";import{spacings as m}from"../../atoms/style/spacings.js";const p=s.div`
+import"react";import"../../molecules/RichTextEditor/custom-extensions/AmplifyKit.js";import"../../molecules/RichTextEditor/RichTextEditor.types.js";import"../../_virtual/lodash.js";import"@equinor/subsurface-app-management";import"@microsoft/signalr";import"@tanstack/react-query";import"../../atoms/enums/Environment.js";import"../../atoms/utils/auth_environment.js";import"../TopBar/Notifications/NotificationProvider.js";import"../../providers/AuthProvider/AuthProvider.js";import"../../providers/ReleaseNotesProvider.js";import"../../providers/SideBarProvider.js";import"../../providers/SnackbarProvider/SnackbarProvider.js";import"../../providers/StepperProvider.js";import"../../providers/TableOfContentsProvider.js";import"../../providers/ThemeProvider/ThemeProvider.js";import"../../providers/TutorialStepsProvider.js";import{shape as r,typography as t,elevation as i}from"../../atoms/style/index.js";import"../../atoms/enums/Errors.js";import"../../atoms/enums/Theme.js";import"../../atoms/enums/SpacingsMode.js";import"react/jsx-runtime";import"../../deprecated/ErrorPage/illustrations/GlitchAnimation.js";import"../../deprecated/ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import{Chip as o}from"../../molecules/Chip/Chip.js";import{motion as e}from"framer-motion";import a,{css as s}from"styled-components";import{colors as n}from"../../atoms/style/colors.js";import{spacings as d}from"../../atoms/style/spacings.js";const m=a.div`
   width: 100%;
-  box-shadow: ${r.raised};
+`,p=a.div`
+  display: flex;
   background: ${n.ui.background__default.rgba};
-  border-radius: ${t.corners.borderRadius};
-  overflow: hidden;
-`,d=s.div`
-  display: grid;
-  grid-template-columns: auto 1fr auto auto;
   align-items: center;
   width: 100%;
-  gap: ${m.small};
-  padding: ${m.medium_small} ${m.small};
-  border-bottom: 1px solid
-    ${({$open:r})=>r?n.ui.background__medium.rgba:"transparent"};
+  height: 36px;
+  padding-left: ${d.small};
+  border-bottom: 1px solid ${n.ui.background__medium.rgba};
+  border-top-left-radius: ${r.corners.borderRadius};
+  border-top-right-radius: ${r.corners.borderRadius};
   transition: border-bottom 200ms;
   cursor: pointer;
   > section {
+    margin-left: ${d.small};
+    flex-grow: 1;
     display: flex;
     flex-wrap: wrap;
-    gap: ${m.x_small};
+    gap: ${d.x_small};
   }
   > button {
+    height: 35px;
+    padding: 0 ${d.small} 0 ${d.medium_small};
+    display: flex;
+    gap: ${d.x_small};
+    align-items: center;
+    justify-content: center;
+    border-left: 1px solid ${n.ui.background__medium.rgba};
+    color: ${n.interactive.primary__resting.rgba};
+    span {
+      color: ${n.interactive.primary__resting.rgba};
+    }
+
+    &:hover {
+      background: ${n.interactive.primary__hover_alt.rgba};
+    }
+  }
+  > button[data-testid='clear-all-x'] {
     width: 24px;
     height: 24px;
+    border-left: none;
+    margin-right: ${d.small};
     &:after {
       width: 24px;
       height: 24px;
     }
   }
-  > svg:last-child {
-    grid-column: 4;
+  > button:last-child {
+    border-left: 1px solid ${n.ui.background__medium.rgba};
+    width: 36px;
+    padding: 0;
+    &:hover {
+      border-top-right-radius: ${r.corners.borderRadius};
+      background: ${n.interactive.primary__hover_alt.rgba};
+    }
   }
-`,l=s.input`
+`,l=a.input`
   background: transparent;
   width: 0;
   flex-grow: 1;
   padding: 0;
   font-family: 'Equinor', sans-serif;
-  font-size: ${o.input.text.fontSize};
-  font-weight: ${o.input.text.fontWeight};
+  font-size: ${t.input.text.fontSize};
+  font-weight: ${t.input.text.fontWeight};
   color: ${n.text.static_icons__default.rgba};
   outline: none;
   border: none;
@@ -51,17 +75,22 @@ import"react";import"../../molecules/RichTextEditor/custom-extensions/AmplifyKit
   &::-webkit-search-results-decoration {
     display: none;
   }
-`,u=s(e.div)`
+`,u=a(e.div)`
+  border-bottom-left-radius: ${r.corners.borderRadius};
+  border-bottom-right-radius: ${r.corners.borderRadius};
+  background: ${n.ui.background__default.rgba};
+  box-shadow: ${i.raised};
+  overflow: hidden;
   > section {
-    padding: ${m.medium};
+    padding: ${d.medium};
     display: flex;
     flex-direction: column;
-    gap: ${m.medium};
-    ${({$showClearFilterButton:r})=>{if(r)return a`
+    gap: ${d.medium};
+    ${({$showClearFilterButton:r})=>{if(r)return s`
           > div:last-child {
             display: grid;
             grid-template-columns: 1fr auto;
-            gap: ${m.medium};
+            gap: ${d.medium};
 
             > button {
               align-self: flex-end;
@@ -69,8 +98,8 @@ import"react";import"../../molecules/RichTextEditor/custom-extensions/AmplifyKit
           }
         `}}
   }
-`,c=s(i)`
-  ${({$tryingToRemove:r})=>{if(r)return a`
+`,c=a(o)`
+  ${({$tryingToRemove:r})=>{if(r)return s`
         background: ${n.interactive.primary__hover_alt.rgba};
       `}}
-`;export{d as Container,u as Content,l as SearchField,c as StyledChip,p as Wrapper};
+`;export{p as Container,u as Content,l as SearchField,c as StyledChip,m as Wrapper};

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

@@ -0,0 +1,38 @@
+import { ChangeEvent, ReactNode } from 'react';
+import { IconData } from '@equinor/eds-icons';
+export interface CommonFilterProps<T> {
+    values: {
+        key: T;
+        label: string;
+        icon?: IconData;
+    }[];
+    onClearFilter: (key: T) => void;
+    onClearAllFilters: () => void;
+    search: string;
+    onSearchChange: (event: ChangeEvent<HTMLInputElement>) => void;
+    onSearchEnter: (value: string) => void;
+    children: ReactNode | ReactNode[];
+    initialOpen?: boolean;
+    placeholder?: string;
+    id?: string;
+    showClearFiltersButton?: boolean;
+}
+export interface SortingProps<S> {
+    sortValue: S;
+    onSortChange: (value: S) => void;
+    sortItems: {
+        value: S;
+        label: string;
+    }[];
+}
+type FilterWithSortingProps<T, S> = CommonFilterProps<T> & SortingProps<S>;
+export interface QuickFilterProps<Q> {
+    onQuickFilter: (value: Q) => void;
+    quickFilterItems: {
+        value: Q;
+        label: string;
+    }[];
+}
+type FilterWithQuickFilterProps<T, Q> = CommonFilterProps<T> & QuickFilterProps<Q>;
+export type FilterProps<T, S, Q> = CommonFilterProps<T> | FilterWithSortingProps<T, S> | FilterWithQuickFilterProps<T, Q> | (FilterWithSortingProps<T, S> & FilterWithQuickFilterProps<T, Q>);
+export {};

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

@@ -0,0 +1,2 @@
+import { QuickFilterProps } from './Filter.types';
+export declare function QuickFilter<Q>({ quickFilterItems, onQuickFilter, }: QuickFilterProps<Q>): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Filter/QuickFilter.js

@@ -0,0 +1 @@
+import{jsxs as r,jsx as e}from"react/jsx-runtime";import{useState as t}from"react";import{Menu as i,Typography as n,Icon as o}from"@equinor/eds-core-react";import{arrow_drop_up as a,arrow_drop_down as m}from"@equinor/eds-icons";import{ButtonWithMenu as c}from"./ButtonWithMenu.js";function u({quickFilterItems:u,onQuickFilter:l}){const[p,s]=t(!1);return r(c,{onOpenChange:s,menuItems:u.map((r=>e(i.Item,{onClick:()=>l(r.value),children:r.label},r.label))),children:[e(n,{as:"span",variant:"button",group:"navigation",children:"Quick filter"}),e(o,{data:p?a:m})]})}export{u as QuickFilter};

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

@@ -0,0 +1,2 @@
+import { SortingProps } from './Filter.types';
+export declare function Sorting<S>({ sortValue, onSortChange, sortItems, }: SortingProps<S>): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Filter/Sorting.js

@@ -0,0 +1,15 @@
+import{jsxs as r,jsx as t}from"react/jsx-runtime";import{Menu as o,Icon as i,Typography as e}from"@equinor/eds-core-react";import{radio_button_selected as s,radio_button_unselected as a,sort as n}from"@equinor/eds-icons";import{ButtonWithMenu as m}from"./ButtonWithMenu.js";import"react";import"../../molecules/RichTextEditor/custom-extensions/AmplifyKit.js";import"../../molecules/RichTextEditor/RichTextEditor.types.js";import"../../_virtual/lodash.js";import"@equinor/subsurface-app-management";import"@microsoft/signalr";import"@tanstack/react-query";import"../../atoms/enums/Environment.js";import"../../atoms/utils/auth_environment.js";import"../TopBar/Notifications/NotificationProvider.js";import"../../providers/AuthProvider/AuthProvider.js";import"../../providers/ReleaseNotesProvider.js";import"../../providers/SideBarProvider.js";import"../../providers/SnackbarProvider/SnackbarProvider.js";import"../../providers/StepperProvider.js";import"../../providers/TableOfContentsProvider.js";import"../../providers/ThemeProvider/ThemeProvider.js";import"../../providers/TutorialStepsProvider.js";import{colors as p}from"../../atoms/style/colors.js";import"../../atoms/enums/Errors.js";import"../../atoms/enums/Theme.js";import"../../atoms/enums/SpacingsMode.js";import"../../deprecated/ErrorPage/illustrations/GlitchAnimation.js";import"../../deprecated/ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import l from"styled-components";const d=l(o.Item)`
+  > div {
+    grid-template-columns: 1fr auto;
+  }
+`,c=l.div`
+  position: relative;
+  > span:first-child {
+    visibility: hidden;
+  }
+  > span:last-child {
+    position: absolute;
+    white-space: nowrap;
+    left: 0;
+  }
+`;function u({sortValue:o,onSortChange:l,sortItems:u}){const v=u.find((r=>r.value===o)),h=u.sort(((r,t)=>t.label.length-r.label.length)).at(0)?.label;return r(m,{menuItems:u.map((e=>r(d,{onClick:()=>{var r;r=e.value,l(r)},children:[e.label,t(i,{color:e.value===o?p.interactive.primary__resting.rgba:p.text.static_icons__tertiary.rgba,data:e.value===o?s:a})]},e.label))),children:[r(c,{children:[r(e,{as:"span",variant:"button",group:"navigation",children:["Sort by ",h?.toLowerCase()]}),r(e,{as:"span",variant:"button",group:"navigation",children:["Sort by ",v?.label.toLowerCase()]})]}),t(i,{data:n})]})}export{u as Sorting};

package/dist/organisms/index.d.ts

@@ -3,7 +3,7 @@ export type { EdsDataGridProps as DataGridProps } from '@equinor/eds-data-grid-r
 export { FieldSelector } from './FieldSelector/FieldSelector';
 export type { FieldSelectorProps } from './FieldSelector/FieldSelector';
 export { Filter } from './Filter/Filter';
-export type { FilterProps } from './Filter/Filter';
+export type * from './Filter/Filter.types';
 export { SideBar } from './SideBar';
 export type { ItemType } from './SideBar';
 export { TopBar } from './TopBar';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-component-lib",
-  "version": "8.16.1",
+  "version": "8.17.0",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",