@equinor/amplify-component-lib 8.7.4 → 8.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -12,8 +12,7 @@ declare const useSelect: <T extends SelectOptionRequired>(props: SelectComponent
12
12
  handleToggleOpen: () => void;
13
13
  handleOnClose: () => void;
14
14
  handleOnOpen: () => void;
15
- handleOnRemoveItem: (item: T) => void;
16
- handleOnMouseEnterItem: (index: number) => void;
15
+ handleOnRemoveItem: (item: SelectOption<T>) => void;
17
16
  search: string;
18
17
  searchRef: import("react").MutableRefObject<HTMLInputElement | null>;
19
18
  itemRefs: import("react").MutableRefObject<(HTMLButtonElement | null)[]>;
@@ -1 +1 @@
1
- import{useState as e,useRef as n,useMemo as r,useEffect as t}from"react";const l=l=>{const{loading:u,disabled:a,sortValues:c,onSearchChange:o,onOpenCallback:d}=l,[s,v]=e(!1),[i,h]=e(""),m=n(null),f=n([]),p=n(-1),[g,y]=e(void 0),k=n(!1),I=n(0),O=r((()=>{let e,n=[];return"values"in l?n=l.values:l.value&&(n=[l.value]),c?(e=l.groups?l.groups.flatMap((e=>e.items)):l.items.flatMap((e=>[{...e},...e.children||[]])),n.sort(((n,r)=>e.findIndex((e=>e.value===n.value))-e.findIndex((e=>e.value===r.value))))):n}),[l,c]);t((()=>{void 0!==d&&d(s)}),[d,s]),t((()=>{k.current&&I.current!==O.length&&(I.current=O.length,k.current=!1,m.current?.focus())}),[O.length]);const A=()=>{s||a||u||(m.current?.focus(),v(!0))},S=()=>{v(!1),h(""),p.current=0},w=e=>{!("values"in l)||u||a||l.onSelect(l.values.filter((n=>n.value!==e.value)),e)};return{handleOnAddItem:()=>{"onAddItem"in l&&l.onAddItem&&(l.onAddItem(i),h(""))},handleOnItemSelect:e=>{"value"in l?l.onSelect(e):l.onSelect(((e,n)=>{const r=structuredClone(e);return r.some((e=>e.value===n.value))?r.filter((e=>e.value!==n.value)):[n,...r.filter((e=>void 0===e.children||0===e.children.length||e.children.every((e=>e.value===n.value))))]})(l.values,e),e),""!==i&&h(""),k.current=!0},handleOnItemKeyDown:e=>{"ArrowDown"===e.key&&p.current<f.current.length-1?(p.current+=1,f.current.at(p.current)?.focus()):"ArrowUp"===e.key&&p.current>0?(p.current-=1,f.current.at(p.current)?.focus()):"ArrowUp"===e.key&&0===p.current&&(p.current=-1,m.current?.focus())},handleOnSearchKeyDown:e=>{"Enter"===e.key&&""!==i&&"onAddItem"in l&&l.onAddItem?(l.onAddItem(i),h("")):"Space"===e.key||"Enter"===e.key?A():"Escape"===e.key?(m.current?.blur(),S()):"ArrowDown"!==e.key&&"ArrowUp"!==e.key||!f.current.at(0)?"Backspace"===e.key&&void 0===g&&"values"in l&&""===i?y(O?.at(-1)):"Backspace"===e.key&&g&&(w(g),y(void 0)):(f.current[0]?.focus(),p.current=0)},handleOnClear:()=>{"value"in l?l.onSelect(void 0):l.onSelect([])},handleOnSearchChange:e=>{" "===e.target.value||u||a||(h(e.target.value),o?.(e.target.value),s||v(!0))},handleToggleOpen:()=>{a||u||(s?S():A())},handleOnClose:S,handleOnOpen:A,handleOnRemoveItem:w,handleOnMouseEnterItem:e=>{p.current=e,f.current.at(e)?.focus()},search:i,searchRef:m,itemRefs:f,selectedValues:O,open:s,tryingToRemoveItem:g}};export{l as useSelect};
1
+ import{useState as e,useRef as n,useMemo as r,useEffect as t}from"react";import{flattenOptions as l}from"../../molecules/Select/Select.utils.js";const a=a=>{const{loading:u,disabled:c,sortValues:o,onSearchChange:d,onOpenCallback:s}=a,[i,v]=e(!1),[h,m]=e(""),p=n(null),f=n([]),g=n(-1),[y,k]=e(void 0),S=n(!1),I=n(0),A=r((()=>{let e,n=[];return"values"in a?n=a.values:a.value&&(n=[a.value]),o?(e=a.groups?a.groups.flatMap((e=>e.items)):a.items.flatMap((e=>[{...e},...e.children||[]])),n.sort(((n,r)=>e.findIndex((e=>e.value===n.value))-e.findIndex((e=>e.value===r.value))))):n}),[a,o]);t((()=>{void 0!==s&&s(i)}),[s,i]),t((()=>{S.current&&I.current!==A.length&&(I.current=A.length,S.current=!1,p.current?.focus())}),[A.length]);const O=()=>{i||c||u||(p.current?.focus(),v(!0))},w=()=>{v(!1),m(""),g.current=0},C=e=>{!("values"in a)||u||c||a.onSelect(a.values.filter((n=>n.value!==e.value)),e)};return{handleOnAddItem:()=>{"onAddItem"in a&&a.onAddItem&&(a.onAddItem(h),m(""))},handleOnItemSelect:e=>{"value"in a?a.onSelect(e):a.onSelect(((e,n)=>{const r=structuredClone(e);return r.some((e=>e.value===n.value))?r.filter((e=>e.value!==n.value)):"values"in a&&void 0!==a.syncParentChildSelection&&!a.syncParentChildSelection?[n,...r]:[n,...r.filter((e=>(!(void 0===n.children||n.children.length>0)||!l([n]).some((n=>n.value===e.value)))&&(void 0===e.children||0===e.children.length||l([e]).every((e=>e.value!==n.value)))))]})(a.values,e),e),""!==h&&m(""),S.current=!0},handleOnItemKeyDown:e=>{"ArrowDown"===e.key&&g.current<f.current.length-1?(g.current+=1,f.current.at(g.current)?.focus()):"ArrowUp"===e.key&&g.current>0?(g.current-=1,f.current.at(g.current)?.focus()):"ArrowUp"===e.key&&0===g.current&&(g.current=-1,p.current?.focus())},handleOnSearchKeyDown:e=>{"Enter"===e.key&&""!==h&&"onAddItem"in a&&a.onAddItem?(a.onAddItem(h),m("")):"Space"===e.key||"Enter"===e.key?O():"Escape"===e.key?(p.current?.blur(),w()):"ArrowDown"!==e.key&&"ArrowUp"!==e.key||!f.current.at(0)?"Backspace"===e.key&&void 0===y&&"values"in a&&""===h?k(A?.at(-1)):"Backspace"===e.key&&y&&(C(y),k(void 0)):(f.current[0]?.focus(),g.current=0)},handleOnClear:()=>{"value"in a?a.onSelect(void 0):a.onSelect([])},handleOnSearchChange:e=>{" "===e.target.value||u||c||(m(e.target.value),d?.(e.target.value),i||v(!0))},handleToggleOpen:()=>{c||u||(i?w():O())},handleOnClose:w,handleOnOpen:O,handleOnRemoveItem:C,search:h,searchRef:p,itemRefs:f,selectedValues:A,open:i,tryingToRemoveItem:y}};export{a as useSelect};
@@ -1 +1 @@
1
- import{jsx as r,jsxs as o}from"react/jsx-runtime";import{Button as t,Icon as i}from"@equinor/eds-core-react";import"../AnimatedCheckmark/AnimatedCheckmark.styles.js";import"../ApplicationIcon/ApplicationIcon.js";import"../Badge/Badge.styles.js";import"../Banner/Banner.styles.js";import"@equinor/eds-icons";import"../Chip/Chip.js";import"../ContentMenu/ContentMenu.js";import"./Dialog.styles.js";import"../EquinorLogo/EquinorLogo.js";import"react";import"../../atoms/style/colors.js";import"../FileProgress/CompactFileProgress.styles.js";import"../RichTextEditor/custom-extensions/AmplifyKit.js";import"../RichTextEditor/MenuBar/MenuBar.js";import"@tiptap/react";import"../RichTextEditor/RichTextEditor.styles.js";import"../RichTextEditor/RichTextEditor.types.js";import"../../node_modules/lodash/lodash.js";import"@equinor/subsurface-app-management";import"@microsoft/signalr";import"@tanstack/react-query";import"../../atoms/enums/Environment.js";import"../../atoms/utils/auth_environment.js";import"../../organisms/TopBar/Notifications/NotificationProvider.js";import"../../providers/AuthProvider/AuthProvider.js";import"../../providers/ReleaseNotesProvider.js";import"../../providers/SideBarProvider.js";import"../../providers/SnackbarProvider/SnackbarProvider.js";import"../../providers/TableOfContentsProvider.js";import"../../providers/ThemeProvider/ThemeProvider.js";import"../../providers/TutorialStepsProvider.js";import"../../atoms/enums/Errors.js";import"../../atoms/enums/Theme.js";import"../../organisms/ErrorPage/illustrations/GlitchAnimation.js";import"../../organisms/ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import"../FileProgress/RegularFileProgress.styles.js";import"../FileUploadArea/FileUploadArea.js";import"../FullPageSpinner/FullPageSpinner.js";import"../InfoElement/InfoElement.js";import{OptionalTooltip as e}from"../OptionalTooltip/OptionalTooltip.js";import"../ProfileAvatar/ProfileAvatar.js";import"../RichTextEditor/MenuBar/MenuBar.styles.js";import"../RichTextEditor/MenuBar/MenuButton.js";import"../Search/Search.js";import"react-router-dom";import"../Sieve/Sieve.styles.js";import"../SingleFilterMenu/SingleFilterMenu.js";import"../Skeleton/SkeletonBase/SkeletonBase.js";import"../Stepper/Stepper.js";import"../OptionDrawer/OptionDrawer.js";import"../Select/Select.styles.js";import"../ListItem/ListItem.js";import"../SelectionControls/Checkbox/Checkbox.js";import"../SelectionControls/Radio/Radio.js";import"../SelectionControls/Switch/Switch.js";const s=({text:s,variant:m,color:n,onClick:p,icon:a,disabled:l})=>r(e,{title:"string"==typeof l?l:"",children:o(t,{variant:m,color:n,onClick:p,disabled:void 0!==l,children:[a&&r(i,{data:a}),s]})});export{s as DialogAction};
1
+ import{jsx as r,jsxs as o}from"react/jsx-runtime";import{Button as t,Icon as i}from"@equinor/eds-core-react";import"../AnimatedCheckmark/AnimatedCheckmark.styles.js";import"../ApplicationIcon/ApplicationIcon.js";import"../Badge/Badge.styles.js";import"../Banner/Banner.styles.js";import"@equinor/eds-icons";import"../Chip/Chip.js";import"../ContentMenu/ContentMenu.js";import"./Dialog.styles.js";import"../EquinorLogo/EquinorLogo.js";import"react";import"../../atoms/style/colors.js";import"../FileProgress/CompactFileProgress.styles.js";import"../RichTextEditor/custom-extensions/AmplifyKit.js";import"../RichTextEditor/MenuBar/MenuBar.js";import"@tiptap/react";import"../RichTextEditor/RichTextEditor.styles.js";import"../RichTextEditor/RichTextEditor.types.js";import"../../node_modules/lodash/lodash.js";import"@equinor/subsurface-app-management";import"@microsoft/signalr";import"@tanstack/react-query";import"../../atoms/enums/Environment.js";import"../../atoms/utils/auth_environment.js";import"../../organisms/TopBar/Notifications/NotificationProvider.js";import"../../providers/AuthProvider/AuthProvider.js";import"../../providers/ReleaseNotesProvider.js";import"../../providers/SideBarProvider.js";import"../../providers/SnackbarProvider/SnackbarProvider.js";import"../../providers/TableOfContentsProvider.js";import"../../providers/ThemeProvider/ThemeProvider.js";import"../../providers/TutorialStepsProvider.js";import"../../atoms/enums/Errors.js";import"../../atoms/enums/Theme.js";import"../../organisms/ErrorPage/illustrations/GlitchAnimation.js";import"../../organisms/ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import"../FileProgress/RegularFileProgress.styles.js";import"../FileUploadArea/FileUploadArea.js";import"../FullPageSpinner/FullPageSpinner.js";import"../InfoElement/InfoElement.js";import{OptionalTooltip as e}from"../OptionalTooltip/OptionalTooltip.js";import"../ProfileAvatar/ProfileAvatar.js";import"../RichTextEditor/MenuBar/MenuBar.styles.js";import"../RichTextEditor/MenuBar/MenuButton.js";import"../Search/Search.js";import"react-router-dom";import"../Sieve/Sieve.styles.js";import"../SingleFilterMenu/SingleFilterMenu.js";import"../Skeleton/SkeletonBase/SkeletonBase.js";import"../Stepper/Stepper.js";import"../OptionDrawer/OptionDrawer.js";import"../Select/Select.styles.js";import"../ListItem/ListItem.js";import"../SelectionControls/Checkbox/Checkbox.js";import"../SelectionControls/Radio/Radio.js";import"../SelectionControls/Switch/Switch.js";const s=({text:s,variant:m,color:n,onClick:p,icon:a,disabled:l})=>r(e,{title:"string"==typeof l?l:"",children:o(t,{variant:m,color:n,onClick:p,disabled:void 0!==l&&!!l,children:[a&&r(i,{data:a}),s]})});export{s as DialogAction};
@@ -2,7 +2,6 @@ import { FC } from 'react';
2
2
  import { MultiSelectMenuItemProps, SelectOptionRequired } from './Select.types';
3
3
  interface AddTagItemProps {
4
4
  itemRefs: MultiSelectMenuItemProps<SelectOptionRequired>['itemRefs'];
5
- onMouseEnterItem: MultiSelectMenuItemProps<SelectOptionRequired>['onMouseEnterItem'];
6
5
  onItemKeyDown: MultiSelectMenuItemProps<SelectOptionRequired>['onItemKeyDown'];
7
6
  onAddItem: () => void;
8
7
  index: number;
@@ -1 +1 @@
1
- import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Icon as o}from"@equinor/eds-core-react";import{add_box as t}from"@equinor/eds-icons";import{colors as n}from"../../atoms/style/colors.js";import{MenuItemWrapper as i,StyledMenuItem as s}from"./Select.styles.js";const m=({itemRefs:m,onMouseEnterItem:c,onItemKeyDown:a,index:d,onAddItem:l,children:p})=>e(i,{children:r(s,{index:d,ref:e=>{m.current[d]=e},onClick:l,onKeyDownCapture:e=>{e.preventDefault(),"Enter"===e.key?l():a(e)},onMouseEnter:()=>{c(d)},children:[e(o,{data:t,color:n.interactive.primary__resting.rgba}),r("span",{children:['Add "',p,'" as new tag']})]})});export{m as AddTagItem};
1
+ import{jsx as e,jsxs as r}from"react/jsx-runtime";import{Icon as o}from"@equinor/eds-core-react";import{add_box as t}from"@equinor/eds-icons";import{colors as n}from"../../atoms/style/colors.js";import{MenuItemWrapper as i,StyledMenuItem as m}from"./Select.styles.js";const s=({itemRefs:s,onItemKeyDown:c,index:a,onAddItem:d,children:l})=>e(i,{children:r(m,{index:a,ref:e=>{s.current[a]=e},onClick:d,onKeyDownCapture:e=>{e.preventDefault(),"Enter"===e.key?d():c(e)},children:[e(o,{data:t,color:n.interactive.primary__resting.rgba}),r("span",{children:['Add "',l,'" as new tag']})]})});export{s as AddTagItem};
@@ -1,3 +1,6 @@
1
1
  import { CommonSelectProps, GroupedSelectProps, ListSelectProps, MultiSelectCommon, SelectOptionRequired } from '../Select.types';
2
2
  export type ComboBoxProps<T extends SelectOptionRequired> = CommonSelectProps & MultiSelectCommon<T> & (GroupedSelectProps<T> | ListSelectProps<T>);
3
+ /**
4
+ * @param syncParentChildSelection - Syncs parents/child selections, default is true
5
+ */
3
6
  export declare function ComboBox<T extends SelectOptionRequired>(props: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{Menu as i}from"@equinor/eds-core-react";import{NoItemsFoundText as m}from"./Select.styles.js";import{getCumulativeArrayFromNumberedArray as n}from"./Select.utils.js";import{SelectMenuItem as o}from"./SelectMenuItem.js";const l=l=>{const{onItemSelect:r,onItemKeyDown:s,itemRefs:c,groups:u,search:a,onMouseEnterItem:f}=l,p=t((()=>{if(""===a)return u;const e=new RegExp(a,"i");return u.map((t=>({title:t.title,items:t.items.filter((t=>t.label.match(e)))}))).filter((e=>e.items.length>0))}),[u,a]),d=t((()=>{const e=p.map((e=>e.items.length));return n(e)}),[p]);return 0===p.length?e(m,{children:"No items found"}):"values"in l?p.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,n)=>e(o,{index:n+d[m],childOffset:0,item:i,multiselect:!0,itemRefs:c,onItemKeyDown:s,onItemSelect:r,onMouseEnterItem:f,values:l.values},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`))):p.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,n)=>e(o,{index:n+d[m],childOffset:0,item:i,itemRefs:c,onItemKeyDown:s,onItemSelect:r,onMouseEnterItem:f},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`)))};export{l as GroupedSelectMenu};
1
+ import{jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{Menu as i}from"@equinor/eds-core-react";import{NoItemsFoundText as m}from"./Select.styles.js";import{getCumulativeArrayFromNumberedArray as l}from"./Select.utils.js";import{SelectMenuItem as n}from"./SelectMenuItem.js";const r=r=>{const{onItemSelect:o,onItemKeyDown:s,itemRefs:c,groups:a,search:f}=r,u=t((()=>{if(""===f)return a;const e=new RegExp(f,"i");return a.map((t=>({title:t.title,items:t.items.filter((t=>t.label.match(e)))}))).filter((e=>e.items.length>0))}),[a,f]),p=t((()=>{const e=u.map((e=>e.items.length));return l(e)}),[u]);return 0===u.length?e(m,{children:"No items found"}):"values"in r?u.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,l)=>e(n,{index:l+p[m],childOffset:0,item:i,multiselect:!0,itemRefs:c,onItemKeyDown:s,onItemSelect:o,values:r.values},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`))):u.map(((t,m)=>e(i.Section,{index:m,title:t.title,children:t.items.map(((i,l)=>e(n,{index:l+p[m],childOffset:0,item:i,itemRefs:c,onItemKeyDown:s,onItemSelect:o},`${t.title}-${m}-item-${i.value}`)))},`${t.title}-${m}`)))};export{r as GroupedSelectMenu};
@@ -1,2 +1,2 @@
1
1
  import { ListSelectProps, MultiSelectCommon, SelectMenuProps, SelectOptionRequired, SingleSelectCommon } from './Select.types';
2
- export declare const ListSelectMenu: <T extends SelectOptionRequired>(props: ListSelectProps<T> & SelectMenuProps<T> & (Omit<MultiSelectCommon<T>, "onAddItem"> | SingleSelectCommon<T>)) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
2
+ export declare const ListSelectMenu: <T extends SelectOptionRequired>(props: ListSelectProps<T> & SelectMenuProps<T> & (Omit<MultiSelectCommon<T>, "onAddItem" | "syncParentChildSelection"> | SingleSelectCommon<T>)) => import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
@@ -1 +1 @@
1
- import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useMemo as m}from"react";import{Menu as o}from"@equinor/eds-core-react";import{AddTagItem as i}from"./AddTagItem.js";import{NoItemsFoundText as r,NoTagFoundText as l}from"./Select.styles.js";import{flattenOptions as s,getChildOffset as a}from"./Select.utils.js";import{SelectMenuItem as c}from"./SelectMenuItem.js";const d=d=>{const{search:u,items:f,onItemSelect:I,itemRefs:h,onItemKeyDown:p,onMouseEnterItem:x,selectableParent:g}=d,S=m((()=>{if(""===u)return f;const e=new RegExp(u,"i");return s(f).map((({value:e,label:t})=>({value:e,label:t}))).filter((t=>t.label.match(e)))}),[f,u]);if(0===S.length&&!d.onAddItem)return e(r,{children:"No items found"});const v=S.some((e=>e.children&&e.children.length>0));if("values"in d){const m=S.map(((e,t)=>({childOffset:a(S,t),index:t,item:e,itemRefs:h,onItemKeyDown:p,onItemSelect:I,onMouseEnterItem:x,itemValue:e.value,values:d.values,selectableParent:g,parentHasNestedItems:v})));return"onAddItem"in d&&d.onAddItem&&""!==u?t(n,{children:[e(o.Section,{title:"Add tag",index:0,children:e(i,{index:0,itemRefs:h,onItemKeyDown:p,onMouseEnterItem:x,onAddItem:d.onAddItem,children:u})}),e(o.Section,{title:"Tag search results",index:1,children:m.length>0?m.map(((t,n)=>e(c,{multiselect:!0,...t,index:n+1},`menu-item-${n}-${t.itemValue}`))):t(l,{children:['No tag for "',u,'" found.']})})]}):m.map(((t,n)=>e(c,{multiselect:!0,...t},`menu-item-${n}-${t.itemValue}`)))}return S.map(((t,n)=>e(c,{childOffset:a(S,n),index:n,item:t,itemRefs:h,onItemKeyDown:p,onItemSelect:I,onMouseEnterItem:x,selectableParent:g,parentHasNestedItems:v},`menu-item-${n}-${t.value}`)))};export{d as ListSelectMenu};
1
+ import{jsx as e,jsxs as t,Fragment as n}from"react/jsx-runtime";import{useMemo as m}from"react";import{Menu as i}from"@equinor/eds-core-react";import{AddTagItem as o}from"./AddTagItem.js";import{NoItemsFoundText as r,NoTagFoundText as l}from"./Select.styles.js";import{flattenOptions as s,getChildOffset as d}from"./Select.utils.js";import{SelectMenuItem as a}from"./SelectMenuItem.js";const c=c=>{const{search:u,items:f,onItemSelect:h,itemRefs:p,onItemKeyDown:I}=c,x=m((()=>{if(""===u)return f;const e=new RegExp(u,"i");return s(f).map((({value:e,label:t})=>({value:e,label:t}))).filter((t=>t.label.match(e)))}),[f,u]);if(0===x.length&&!c.onAddItem)return e(r,{children:"No items found"});const g=x.some((e=>e.children&&e.children.length>0));if("values"in c){const m=x.map(((e,t)=>({childOffset:d(x,t),index:t,item:e,itemRefs:p,onItemKeyDown:I,onItemSelect:h,itemValue:e.value,values:c.values,parentHasNestedItems:g})));return"onAddItem"in c&&c.onAddItem&&""!==u?t(n,{children:[e(i.Section,{title:"Add tag",index:0,children:e(o,{index:0,itemRefs:p,onItemKeyDown:I,onAddItem:c.onAddItem,children:u})}),e(i.Section,{title:"Tag search results",index:1,children:m.length>0?m.map(((t,n)=>e(a,{multiselect:!0,...t,index:n+1},`menu-item-${n}-${t.itemValue}`))):t(l,{children:['No tag for "',u,'" found.']})})]}):m.map(((t,n)=>e(a,{multiselect:!0,...t},`menu-item-${n}-${t.itemValue}`)))}return x.map(((t,n)=>e(a,{childOffset:d(x,n),index:n,item:t,itemRefs:p,onItemKeyDown:I,onItemSelect:h,parentHasNestedItems:g},`menu-item-${n}-${t.value}`)))};export{c as ListSelectMenu};
@@ -1 +1 @@
1
- import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as n,useMemo as o}from"react";import{Label as r,CircularProgress as l,Icon as a}from"@equinor/eds-core-react";import{thumbs_up as i,warning_filled as c,error_filled as s,arrow_drop_up as d,arrow_drop_down as m,clear as h}from"@equinor/eds-icons";import{tokens as u}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useSelect as p}from"../../atoms/hooks/useSelect.js";import{GroupedSelectMenu as g}from"./GroupedSelectMenu.js";import{ListSelectMenu as b}from"./ListSelectMenu.js";import{ValueText as f,StyledChip as v,Wrapper as x,Container as y,Section as I,PlaceholderText as O,ClearButton as k,HelperWrapper as C,StyledMenu as S}from"./Select.styles.js";import{useOutsideClick as w}from"../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";const{colors:$}=u,j=u=>{const{clearable:j=!0,loading:D=!1,disabled:R=!1,lightBackground:B=!1,underlineHighlight:K=!1,sortValues:M=!0,placeholder:_="Select...",label:q,helperText:E,meta:T,id:z=`amplify-combobox-${q}`,variant:A,inDialog:V=!1}=u,{handleOnAddItem:W,handleOnClear:F,handleOnItemKeyDown:H,handleOnItemSelect:P,handleOnSearchChange:G,handleOnSearchKeyDown:L,handleToggleOpen:N,itemRefs:J,search:Q,selectedValues:U,handleOnClose:X,handleOnOpen:Y,handleOnRemoveItem:Z,handleOnMouseEnterItem:ee,open:te,searchRef:ne,tryingToRemoveItem:oe}=p({...u,clearable:j,loading:D,disabled:R,lightBackground:B,underlineHighlight:K,sortValues:M,placeholder:_}),re=n(null),le=n(null),ae=o((()=>!!q||!!T),[q,T]),ie=o((()=>!!E),[E]),ce=o((()=>{switch(A){case"error":return s;case"warning":return c;case"success":return i}}),[A]);w(le.current,(e=>{V&&te&&e.target&&re.current&&le.current&&!re.current.contains(e.target)&&!le.current?.contains(e.target)&&X()}));const se=o((()=>"value"in u&&u.value?e(f,{children:u.value.label}):U.map((t=>e(v,{"data-testid":"amplify-combobox-chip",className:"amplify-combo-box-chip",onDelete:()=>Z(t),$tryingToRemove:oe?.value===t.value,$lightBackground:B,children:t.label},t.value)))),[U,oe,B,u,Z]);return t("div",{children:[ae&&e(r,{label:q,meta:T,htmlFor:z}),t(x,{children:[t(y,{"data-testid":"combobox-container",ref:re,onClick:Y,"aria-expanded":te,$variant:A,$lightBackground:B,children:[t(I,{children:[""===Q&&0===U.length&&e(O,{children:_}),(""===Q||"values"in u&&U.length>0)&&se,e("input",{id:z,disabled:R||D,ref:ne,type:"search",role:"combobox",value:Q,autoComplete:"off",onChange:G,onKeyDownCapture:L})]}),D?e(l,{size:16}):e(a,{onClick:N,data:te?d:m,color:$.interactive.primary__resting.rgba}),j&&U.length>0&&!D&&e(k,{id:"clear",variant:"ghost_icon",onClick:F,"data-testid":"clearBtn",children:e(a,{data:h,size:18})})]}),ie&&t(C,{$variant:A,children:[ce&&e(a,{data:ce,size:16}),e(r,{label:E,htmlFor:z})]})]}),te&&e(S,{ref:le,open:!0,id:"combobox-menu",anchorEl:re.current,onClose:X,placement:"bottom",style:{width:`${re.current?.clientWidth}px`,maxWidth:`${re.current?.clientWidth}px`},children:u.groups?e(g,{...u,search:Q,itemRefs:J,onItemSelect:P,onItemKeyDown:H,onMouseEnterItem:ee}):e(b,{...u,search:Q,itemRefs:J,onAddItem:"values"in u&&u.onAddItem?W:void 0,onItemSelect:P,onItemKeyDown:H,onMouseEnterItem:ee,selectableParent:"values"in u&&u.selectableParent})})]})};export{j as Select};
1
+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useRef as n,useMemo as o}from"react";import{Label as r,CircularProgress as l,Icon as a}from"@equinor/eds-core-react";import{thumbs_up as i,warning_filled as c,error_filled as d,arrow_drop_up as s,arrow_drop_down as m,clear as h}from"@equinor/eds-icons";import{tokens as u}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{useSelect as p}from"../../atoms/hooks/useSelect.js";import{GroupedSelectMenu as g}from"./GroupedSelectMenu.js";import{ListSelectMenu as b}from"./ListSelectMenu.js";import{ValueText as f,StyledChip as v,Wrapper as x,Container as y,Section as O,PlaceholderText as k,ClearButton as C,HelperWrapper as I,StyledMenu as S}from"./Select.styles.js";import{useOutsideClick as w}from"../../node_modules/@equinor/eds-utils/dist/esm/hooks/useOutsideClick.js";const{colors:$}=u,j=u=>{const{clearable:j=!0,loading:D=!1,disabled:R=!1,lightBackground:B=!1,underlineHighlight:K=!1,sortValues:_=!0,placeholder:q="Select...",label:T,helperText:z,meta:A,id:V=`amplify-combobox-${T}`,variant:W,inDialog:F=!1}=u,{handleOnAddItem:H,handleOnClear:M,handleOnItemKeyDown:E,handleOnItemSelect:G,handleOnSearchChange:L,handleOnSearchKeyDown:N,handleToggleOpen:J,itemRefs:P,search:Q,selectedValues:U,handleOnClose:X,handleOnOpen:Y,handleOnRemoveItem:Z,open:ee,searchRef:te,tryingToRemoveItem:ne}=p({...u,clearable:j,loading:D,disabled:R,lightBackground:B,underlineHighlight:K,sortValues:_,placeholder:q}),oe=n(null),re=n(null),le=o((()=>!!T||!!A),[T,A]),ae=o((()=>!!z),[z]),ie=o((()=>{switch(W){case"error":return d;case"warning":return c;case"success":return i}}),[W]);w(re.current,(e=>{F&&ee&&e.target&&oe.current&&re.current&&!oe.current.contains(e.target)&&!re.current?.contains(e.target)&&X()}));const ce=o((()=>"value"in u&&u.value?e(f,{children:u.value.label}):U.map((t=>e(v,{"data-testid":"amplify-combobox-chip",className:"amplify-combo-box-chip",onDelete:()=>Z(t),$tryingToRemove:ne?.value===t.value,$lightBackground:B,children:t.label},t.value)))),[U,ne,B,u,Z]);return t("div",{children:[le&&e(r,{label:T,meta:A,htmlFor:V}),t(x,{children:[t(y,{"data-testid":"combobox-container",ref:oe,onClick:Y,"aria-expanded":ee,$variant:W,$lightBackground:B,children:[t(O,{children:[""===Q&&0===U.length&&e(k,{children:q}),(""===Q||"values"in u&&U.length>0)&&ce,e("input",{id:V,disabled:R||D,ref:te,type:"search",role:"combobox",value:Q,autoComplete:"off",onChange:L,onKeyDownCapture:N})]}),D?e(l,{size:16}):e(a,{onClick:J,data:ee?s:m,color:$.interactive.primary__resting.rgba}),j&&U.length>0&&!D&&e(C,{id:"clear",variant:"ghost_icon",onClick:M,"data-testid":"clearBtn",children:e(a,{data:h,size:18})})]}),ae&&t(I,{$variant:W,children:[ie&&e(a,{data:ie,size:16}),e(r,{label:z,htmlFor:V})]})]}),ee&&e(S,{ref:re,open:!0,id:"combobox-menu",anchorEl:oe.current,onClose:X,placement:"bottom",style:{width:`${oe.current?.clientWidth}px`,maxWidth:`${oe.current?.clientWidth}px`},children:u.groups?e(g,{...u,search:Q,itemRefs:P,onItemSelect:G,onItemKeyDown:E}):e(b,{...u,search:Q,itemRefs:P,onAddItem:"values"in u&&u.onAddItem?H:void 0,onItemSelect:G,onItemKeyDown:E})})]})};export{j as Select};
@@ -142,9 +142,9 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
142
142
  height: 24px;
143
143
  left: 0;
144
144
  }
145
- `,u=s(n)`
145
+ `,h=s(n)`
146
146
  background: ${({$tryingToRemove:t,$lightBackground:e})=>t?i.interactive.primary__hover_alt.rgba:e?i.ui.background__light.rgba:i.ui.background__default.rgba} !important;
147
- `,h=s(e.Item)`
147
+ `,u=s(e.Item)`
148
148
  flex-grow: 1;
149
149
  border-radius: 2px;
150
150
  ${({$paddedLeft:t})=>t&&"margin-left: 36px"};
@@ -156,16 +156,11 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
156
156
  }
157
157
 
158
158
  &:hover {
159
- background: none;
160
- }
161
-
162
- &:focus {
163
- outline: none;
164
159
  background: ${i.interactive.primary__hover_alt.rgba};
165
160
  }
166
161
 
167
162
  &:focus-visible {
168
- background: ${i.interactive.primary__hover_alt.rgba};
163
+ outline: 2px dashed ${i.interactive.primary__resting.rgba};
169
164
  }
170
165
  `,x=s.hr`
171
166
  height: calc(100% + ${o.medium} * 2);
@@ -184,9 +179,9 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
184
179
  max-width: 100%;
185
180
  `,f=s(r)`
186
181
  margin: ${o.medium};
187
- `,v=s(r)`
182
+ `,$=s(r)`
188
183
  margin-left: ${o.medium};
189
- `,$=s(e)`
184
+ `,v=s(e)`
190
185
  max-height: 20rem;
191
186
  max-width: inherit;
192
187
  overflow-y: auto;
@@ -201,4 +196,4 @@ import{Button as t,Menu as e,Typography as r}from"@equinor/eds-core-react";expor
201
196
  `,y=s(t)`
202
197
  width: 36px;
203
198
  height: 36px;
204
- `;export{b as ClearButton,p as Container,c as HelperWrapper,x as MenuItemSpacer,w as MenuItemWrapper,v as NoItemsFoundText,f as NoTagFoundText,m as PlaceholderText,g as Section,y as SmallButton,u as StyledChip,$ as StyledMenu,h as StyledMenuItem,_ as ValueText,d as Wrapper};
199
+ `;export{b as ClearButton,p as Container,c as HelperWrapper,x as MenuItemSpacer,w as MenuItemWrapper,$ as NoItemsFoundText,f as NoTagFoundText,m as PlaceholderText,g as Section,y as SmallButton,h as StyledChip,v as StyledMenu,u as StyledMenuItem,_ as ValueText,d as Wrapper};
@@ -14,7 +14,7 @@ export interface SingleSelectCommon<T extends SelectOptionRequired> {
14
14
  export interface MultiSelectCommon<T extends SelectOptionRequired> {
15
15
  values: SelectOption<T>[];
16
16
  onSelect: (values: SelectOption<T>[], selectedValue?: SelectOption<T>) => void;
17
- selectableParent?: boolean;
17
+ syncParentChildSelection?: boolean;
18
18
  onAddItem?: (item: string) => void;
19
19
  }
20
20
  export interface GroupedSelectProps<T extends SelectOptionRequired> {
@@ -34,8 +34,6 @@ export interface SelectMenuProps<T extends SelectOptionRequired> {
34
34
  itemRefs: MutableRefObject<(HTMLButtonElement | null)[]>;
35
35
  onItemKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => void;
36
36
  onItemSelect: (item: SelectOption<T>) => void;
37
- onMouseEnterItem: (index: number) => void;
38
- selectableParent?: boolean;
39
37
  }
40
38
  interface SelectMenuItemProps<T extends SelectOptionRequired> {
41
39
  item: SelectOption<T>;
@@ -1 +1 @@
1
- import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import{useState as t,useRef as o,useMemo as c}from"react";import{Icon as i}from"@equinor/eds-core-react";import{checkbox_outline as l,checkbox as a,checkbox_indeterminate as u,chevron_down as s,chevron_right as d}from"@equinor/eds-icons";import{tokens as m}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{MenuItemSpacer as p,MenuItemWrapper as h,SmallButton as f,StyledMenuItem as v}from"./Select.styles.js";import{getChildOffset as y,flattenOptions as g}from"./Select.utils.js";const{colors:w}=m,k=m=>{const{index:b,childOffset:_,depth:x=0,item:C,multiselect:I,itemRefs:A,onItemKeyDown:D,onMouseEnterItem:$,onItemSelect:M,selectableParent:E=!0,parentHasNestedItems:K=!1}=m,[j,O]=t(!1),S=o(-1),q=o([]),P=("values"in m?m.values.map((({value:e})=>e)):[]).includes(C.value),R=c((()=>{if(!I||!C.children||0===C.children.length)return l;if(P)return a;if([C,...C.children].some((e=>m.values.find((r=>r.value===e.value)))))return u;const e=m.values.map((({value:e})=>e)),r=g([C])?.map((({value:e})=>e));return r.some((r=>e.includes(r)))?u:l}),[C,I,m,P]),H=c((()=>new Array(x).fill(0).map(((r,n)=>e(p,{},`spacer-${r+n}`)))),[x]),L=()=>{if(M(C),!I)return void O((e=>!e));const e=!m.values.map((({value:e})=>e)).includes(C.value);O(e)},N=()=>{$(b)},U=e=>{e.stopPropagation(),O((e=>!e))},z=e=>{"ArrowDown"===e.key?S.current+=1:"ArrowUp"===e.key&&(S.current-=1),S.current<=-1?(A.current[b]?.focus(),S.current=-1):S.current+_===q.current.length?(S.current=-1,D(e),O(!1)):S.current>=0&&S.current<q.current.length-_&&q.current[S.current+_]?.focus()},B=e=>{j||"ArrowDown"!==e.key&&"ArrowUp"!==e.key?"ArrowRight"===e.key||"ArrowLeft"===e.key?O((e=>!e)):j&&"ArrowDown"===e.key&&-1===S.current&&(S.current=0,q.current[S.current+_]?.focus()):D(e)},F=e=>{S.current=e,q.current.at(e)?.focus()};return C.children&&C.children.length>0&&I?r(n,{children:[r(h,{children:[H,e(f,{variant:"ghost_icon",onClick:U,"data-testid":"toggle-button",children:e(i,{color:w.interactive.primary__resting.rgba,data:j?s:d})}),r(v,{$depth:x,ref:e=>{A.current[b]=e},index:b,closeMenuOnClick:!1,onKeyDownCapture:B,onMouseEnter:N,onClick:L,children:[e(i,{color:E?w.interactive.primary__resting.rgba:w.interactive.disabled__fill.rgba,data:R}),e("span",{children:C.label})]})]}),j&&C.children.map(((r,n)=>e(k,{index:_+n,childOffset:_+y(C.children,n),depth:x+1,multiselect:!0,item:r,itemRefs:q,values:m.values,onItemKeyDown:z,onItemSelect:M,onMouseEnterItem:F,selectableParent:E,parentHasNestedItems:!0},`child-${n}-${r.value}-${C.value}`)))]}):I?r(h,{children:[H,r(v,{$depth:x,$paddedLeft:K,ref:e=>{A.current[b]=e},index:b,tabIndex:x,closeMenuOnClick:!1,onKeyDownCapture:D,onClick:L,onMouseEnter:N,children:[e(i,{color:w.interactive.primary__resting.rgba,data:P?a:l}),e("span",{children:C.label})]})]}):e(h,{children:e(v,{$depth:x,ref:e=>{A.current[b]=e},index:b,onKeyDownCapture:D,onClick:L,onMouseEnter:N,children:e("span",{children:C.label})})})};export{k as SelectMenuItem};
1
+ import{jsx as e,jsxs as r,Fragment as n}from"react/jsx-runtime";import{useState as t,useRef as i,useMemo as c}from"react";import{Icon as o}from"@equinor/eds-core-react";import{checkbox_outline as l,checkbox as a,checkbox_indeterminate as u,chevron_down as s,chevron_right as d}from"@equinor/eds-icons";import{tokens as m}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{MenuItemSpacer as p,MenuItemWrapper as h,SmallButton as f,StyledMenuItem as v}from"./Select.styles.js";import{getChildOffset as y,flattenOptions as w}from"./Select.utils.js";const{colors:g}=m,k=m=>{const{index:b,childOffset:x,depth:C=0,item:A,multiselect:D,itemRefs:$,onItemKeyDown:_,onItemSelect:I,parentHasNestedItems:K=!1}=m,[j,O]=t(!1),S=i(-1),q=i([]),R=("values"in m?m.values.map((({value:e})=>e)):[]).includes(A.value),H=c((()=>{if(!D||!A.children||0===A.children.length)return l;if(R)return a;if([A,...A.children].some((e=>m.values.find((r=>r.value===e.value)))))return u;const e=m.values.map((({value:e})=>e)),r=w([A])?.map((({value:e})=>e));return r.some((r=>e.includes(r)))?u:l}),[A,D,m,R]),L=c((()=>new Array(C).fill(0).map(((r,n)=>e(p,{},`spacer-${r+n}`)))),[C]),M=()=>{I(A)},N=e=>{e.stopPropagation(),O((e=>!e))},U=e=>{"ArrowDown"===e.key?S.current+=1:"ArrowUp"===e.key&&(S.current-=1),S.current<=-1?($.current[b]?.focus(),S.current=-1):S.current+x===q.current.length?(S.current=-1,_(e),O(!1)):S.current>=0&&S.current<q.current.length-x&&q.current[S.current+x]?.focus()},P=e=>{!j&&"ArrowDown"===e.key||"ArrowUp"===e.key?_(e):"ArrowRight"===e.key||"ArrowLeft"===e.key?O((e=>!e)):j&&"ArrowDown"===e.key&&-1===S.current&&(S.current=0,q.current[S.current+x]?.focus())};return A.children&&A.children.length>0&&D?r(n,{children:[r(h,{children:[L,e(f,{variant:"ghost_icon",onClick:N,"data-testid":"toggle-button",children:e(o,{color:g.interactive.primary__resting.rgba,data:j?s:d})}),r(v,{$depth:C,ref:e=>{$.current[b]=e},index:b,closeMenuOnClick:!1,onKeyDownCapture:P,onClick:M,children:[e(o,{color:g.interactive.primary__resting.rgba,data:H}),e("span",{children:A.label})]})]}),j&&A.children.map(((r,n)=>e(k,{index:x+n,childOffset:x+y(A.children,n),depth:C+1,multiselect:!0,item:r,itemRefs:q,values:m.values,onItemKeyDown:U,onItemSelect:I,parentHasNestedItems:!0},`child-${n}-${r.value}-${A.value}`)))]}):D?r(h,{children:[L,r(v,{$depth:C,$paddedLeft:K,ref:e=>{$.current[b]=e},index:b,tabIndex:C,closeMenuOnClick:!1,onKeyDownCapture:_,onClick:M,children:[e(o,{color:g.interactive.primary__resting.rgba,data:R?a:l}),e("span",{children:A.label})]})]}):e(h,{children:e(v,{$depth:C,ref:e=>{$.current[b]=e},index:b,onKeyDownCapture:_,onClick:M,children:e("span",{children:A.label})})})};export{k as SelectMenuItem};
@@ -1 +1 @@
1
- import"../../atoms/style/colors.js";import{spacings as o}from"../../atoms/style/spacings.js";const s={buttons:"39px",border:"34px"},t={buttons:o.x_small,border:"0"};export{t as GAP,s as HEIGHT};
1
+ import"../../atoms/style/colors.js";import{spacings as o}from"../../atoms/style/spacings.js";const r={buttons:"39px",border:"34px",borderHorizontal:"34px"},t={buttons:o.x_small,border:"0",borderHorizontal:"0"};export{t as GAP,r as HEIGHT};
@@ -1 +1 @@
1
- import{jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{TableOfContentsContainer as r,BorderItemsContainer as o}from"./TableOfContents.styles.js";import{TableOfContentsItem as n}from"./TableOfContentsItem.js";import{useTableOfContents as i}from"../../providers/TableOfContentsProvider.js";import{getValues as a}from"../../providers/TableOfContentsProvider.utils.js";const s=({variant:s="buttons",onlyShowSelectedChildren:l=!0,isLink:d=!1})=>{const{items:m,selected:c}=i(),u=t((()=>{for(const[e,t]of m.entries()){const r=a([],t);if(t.value===c||c&&r.includes(c))return e}return-1}),[m,c]);return e(r,"border"===s?{className:"page-menu",$variant:s,layoutRoot:!0,children:m.map(((t,r)=>e(o,{"data-testid":`border-items-container-${t.value}`,$index:r,$activeIndex:u,"aria-selected":u===r,children:e(n,{variant:s,...t,onlyShowSelectedChildren:l,isLink:d})},t.value)))}:{className:"page-menu",$variant:s,layoutRoot:!0,children:m.map((t=>e(n,{variant:s,...t,onlyShowSelectedChildren:l,isLink:d},t.value)))})};export{s as TableOfContents};
1
+ import{jsx as e}from"react/jsx-runtime";import{useMemo as t}from"react";import{TableOfContentsContainer as n,BorderItemsContainer as r,BorderItemsHorizontalContainer as a}from"./TableOfContents.styles.js";import{TableOfContentsItem as o}from"./TableOfContentsItem.js";import{useTableOfContents as i}from"../../providers/TableOfContentsProvider.js";import{getValues as l}from"../../providers/TableOfContentsProvider.utils.js";const s=({variant:s="buttons",onlyShowSelectedChildren:d=!0,isLink:c=!1})=>{const{items:m,selected:u}=i(),v=t((()=>{for(const[e,t]of m.entries()){const n=l([],t);if(t.value===u||u&&n.includes(u))return e}return-1}),[m,u]);return e(n,"border"===s?{className:"page-menu",$variant:s,layoutRoot:!0,"data-testid":"table-of-contents-container",children:m.map(((t,n)=>e(r,{"data-testid":`border-items-container-${t.value}`,$index:n,$activeIndex:v,"aria-selected":v===n,children:e(o,{variant:s,...t,onlyShowSelectedChildren:d,isLink:c})},t.value)))}:"borderHorizontal"===s?{className:"page-menu",$variant:s,layoutRoot:!0,"data-testid":"table-of-contents-container",children:m.map(((t,n)=>e(a,{$index:n,$activeIndex:v,"aria-selected":v===n,children:e(o,{variant:s,...t,onlyShowSelectedChildren:d,isLink:c})},t.value)))}:{className:"page-menu",$variant:s,layoutRoot:!0,children:m.map((t=>e(o,{variant:s,...t,onlyShowSelectedChildren:d,isLink:c},t.value)))})};export{s as TableOfContents};
@@ -10,6 +10,11 @@ interface LinkProps extends ButtonProps {
10
10
  export declare const Link: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>, "ref"> & {
11
11
  ref?: ((instance: HTMLAnchorElement | 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<HTMLAnchorElement> | null | undefined;
12
12
  }, LinkProps>> & string & Omit<import("react").ForwardRefExoticComponent<import("react-router-dom").LinkProps & import("react").RefAttributes<HTMLAnchorElement>>, keyof import("react").Component<any, {}, any>>;
13
+ interface BorderItemsHorizontalContainerProps {
14
+ $activeIndex: number;
15
+ $index: number;
16
+ }
17
+ export declare const BorderItemsHorizontalContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, BorderItemsHorizontalContainerProps>> & string;
13
18
  interface BorderItemsContainerProps {
14
19
  $activeIndex: number;
15
20
  $index: number;
@@ -110,6 +110,20 @@ import{Link as t}from"react-router-dom";import{tokens as e}from"../../node_modul
110
110
  }
111
111
  `}}}
112
112
  `,u=a.div`
113
+ display: flex;
114
+ flex-direction:;
115
+ position: relative;
116
+ &:after {
117
+ position: absolute;
118
+ left: 0;
119
+ bottom: ${({$activeIndex:t,$index:e})=>100*(t-e)+"%"};
120
+ content: '';
121
+ width: 100%;
122
+ height: 2px;
123
+ background: ${s.interactive.primary__resting.rgba};
124
+ z-index: 100;
125
+ }
126
+ `,f=a.div`
113
127
  display: flex;
114
128
  flex-direction: column;
115
129
  position: relative;
@@ -123,7 +137,7 @@ import{Link as t}from"react-router-dom";import{tokens as e}from"../../node_modul
123
137
  background: ${s.interactive.primary__resting.rgba};
124
138
  z-index: 100;
125
139
  }
126
- `,f=a(r.div)`
140
+ `,p=a(r.div)`
127
141
  display: flex;
128
142
  flex-direction: column;
129
143
  position: relative;
@@ -131,9 +145,9 @@ import{Link as t}from"react-router-dom";import{tokens as e}from"../../node_modul
131
145
  min-height: ${o[t]};
132
146
  ${"buttons"===t&&`gap: ${i.x_small};`}
133
147
  `}
134
- `,p=a(r.div)`
148
+ `,g=a(r.div)`
135
149
  display: flex;
136
- flex-direction: column;
150
+ flex-direction: ${({$variant:t})=>"borderHorizontal"===t?"row":"column"};
137
151
  height: fit-content;
138
152
  overflow: hidden;
139
153
  ${({$variant:t})=>{switch(t){case"buttons":return`gap: ${i.small};`;case"border":return n`
@@ -145,8 +159,19 @@ import{Link as t}from"react-router-dom";import{tokens as e}from"../../node_modul
145
159
  height: 100%;
146
160
  background: ${s.ui.background__medium.rgba};
147
161
  }
162
+ `;case"borderHorizontal":return n`
163
+ &:after {
164
+ position: absolute;
165
+ left: 0;
166
+ bottom: 0;
167
+ content: '';
168
+ width: 100%;
169
+ height: 2px;
170
+ background: ${s.ui.background__medium.rgba};
171
+ }
148
172
  `}}}
149
- `,m=a(r.div)`
173
+ data-testid="table-of-contents-container"
174
+ `,b=a(r.div)`
150
175
  display: flex;
151
176
  flex-direction: column;
152
177
  ${({$shouldShowChildren:t})=>t?null:n`
@@ -162,4 +187,4 @@ import{Link as t}from"react-router-dom";import{tokens as e}from"../../node_modul
162
187
  }
163
188
 
164
189
  ${({$variant:t})=>"buttons"===t&&`gap:${i.x_small};`}
165
- `;export{u as BorderItemsContainer,d as Button,m as ChildContainer,c as Link,p as TableOfContentsContainer,f as TableOfContentsItemContainer};
190
+ `;export{f as BorderItemsContainer,u as BorderItemsHorizontalContainer,d as Button,b as ChildContainer,c as Link,g as TableOfContentsContainer,p as TableOfContentsItemContainer};
@@ -1 +1 @@
1
- export type TableOfContentsVariants = 'buttons' | 'border';
1
+ export type TableOfContentsVariants = 'buttons' | 'border' | 'borderHorizontal';
@@ -1 +1 @@
1
- import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useState as r,useMemo as t}from"react";import{Button as i,Icon as s,Typography as l,DotProgress as m}from"@equinor/eds-core-react";import{arrow_back as a}from"@equinor/eds-icons";import{useAllAppRoles as n}from"../hooks/useAllAppRoles.js";import{useCreateImpersonation as p}from"../hooks/useCreateImpersonation.js";import{Container as c,Header as u,Section as d}from"./CreateNewUser.styles.js";import{environment as j}from"../../../../../atoms/utils/auth_environment.js";import"../../../../../molecules/AnimatedCheckmark/AnimatedCheckmark.styles.js";import"../../../../../molecules/ApplicationIcon/ApplicationIcon.js";import"../../../../../molecules/Badge/Badge.styles.js";import"../../../../../molecules/Banner/Banner.styles.js";import"../../../../../molecules/Chip/Chip.js";import"../../../../../molecules/ContentMenu/ContentMenu.js";import"../../../../../molecules/Dialog/Dialog.styles.js";import"../../../../../molecules/EquinorLogo/EquinorLogo.js";import"../../../../../atoms/style/colors.js";import"../../../../../molecules/FileProgress/CompactFileProgress.styles.js";import"../../../../../molecules/RichTextEditor/custom-extensions/AmplifyKit.js";import"../../../../../molecules/RichTextEditor/MenuBar/MenuBar.js";import"@tiptap/react";import"../../../../../molecules/RichTextEditor/RichTextEditor.styles.js";import"../../../../../molecules/RichTextEditor/RichTextEditor.types.js";import"../../../../../node_modules/lodash/lodash.js";import"@equinor/subsurface-app-management";import"@microsoft/signalr";import"@tanstack/react-query";import"../../../../../atoms/enums/Environment.js";import"../../../Notifications/NotificationProvider.js";import"../../../../../providers/AuthProvider/AuthProvider.js";import"../../../../../providers/ReleaseNotesProvider.js";import"../../../../../providers/SideBarProvider.js";import"../../../../../providers/SnackbarProvider/SnackbarProvider.js";import"../../../../../providers/TableOfContentsProvider.js";import"../../../../../providers/ThemeProvider/ThemeProvider.js";import"../../../../../providers/TutorialStepsProvider.js";import"../../../../../atoms/enums/Errors.js";import"../../../../../atoms/enums/Theme.js";import"../../../../ErrorPage/illustrations/GlitchAnimation.js";import"../../../../ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import"../../../../../molecules/FileProgress/RegularFileProgress.styles.js";import"../../../../../molecules/FileUploadArea/FileUploadArea.js";import"../../../../../molecules/FullPageSpinner/FullPageSpinner.js";import"../../../../../molecules/InfoElement/InfoElement.js";import"../../../../../molecules/OptionalTooltip/OptionalTooltip.js";import"../../../../../molecules/ProfileAvatar/ProfileAvatar.js";import"../../../../../molecules/RichTextEditor/MenuBar/MenuBar.styles.js";import"../../../../../molecules/RichTextEditor/MenuBar/MenuButton.js";import"../../../../../molecules/Search/Search.js";import"react-router-dom";import"../../../../../molecules/Sieve/Sieve.styles.js";import"../../../../../molecules/SingleFilterMenu/SingleFilterMenu.js";import"../../../../../molecules/Skeleton/SkeletonBase/SkeletonBase.js";import"../../../../../molecules/Stepper/Stepper.js";import"../../../../../molecules/OptionDrawer/OptionDrawer.js";import"../../../../../molecules/Select/Select.styles.js";import"../../../../../molecules/ListItem/ListItem.js";import"../../../../../molecules/SelectionControls/Checkbox/Checkbox.js";import"../../../../../molecules/SelectionControls/Radio/Radio.js";import{Switch as h}from"../../../../../molecules/SelectionControls/Switch/Switch.js";import{TextField as v}from"../../../../../molecules/TextField/TextField.js";const g=({onBack:g,onClose:C})=>{const[f,S]=r([]),[P,A]=r(""),[k,y]=r(""),{data:E,isLoading:T}=n(),{mutateAsync:x,isPending:B}=p(),R=t((()=>""===P||""===k||0===f.length),[P,k,f.length]);return e(c,{children:[e(u,{children:[o(i,{variant:"ghost_icon",onClick:g,children:o(s,{data:a})}),o(l,{variant:"h6",children:"Create new user"})]}),e(d,{children:[o(v,{id:"first-name",label:"First name",placeholder:"Add first name...",value:P,onChange:e=>{A(e.target.value)}}),o(v,{id:"last-name",label:"Last name",placeholder:"Add last name...",value:k,onChange:e=>{y(e.target.value)}})]}),e(d,{children:[o(l,{variant:"label",group:"navigation",children:"Roles"}),T&&o(m,{color:"primary"}),E?.map((e=>o(h,{label:e.value,onChange:()=>(e=>{S((o=>o.includes(e)?o.filter((o=>o!==e)):[...o,e]))})(e.value)},e.id)))]}),e(d,{children:[o(i,{variant:"outlined",onClick:g,children:"Cancel"}),o(i,B?{children:o(m,{})}:{onClick:async()=>{await x({firstName:P,lastName:k,roles:f,uniqueName:`${P}.${k}`.toLowerCase(),appName:j.getAppName(import.meta.env.VITE_NAME),activeUsers:[]}),C()},disabled:R,children:"Create and impersonate"})]})]})};export{g as CreateNewUser};
1
+ import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useState as r,useMemo as t}from"react";import{Button as i,Icon as s,Typography as l,DotProgress as m}from"@equinor/eds-core-react";import{arrow_back as a}from"@equinor/eds-icons";import{useAllAppRoles as n}from"../hooks/useAllAppRoles.js";import{useCreateImpersonation as p}from"../hooks/useCreateImpersonation.js";import{Container as c,Header as u,Section as d}from"./CreateNewUser.styles.js";import{environment as j}from"../../../../../atoms/utils/auth_environment.js";import"../../../../../molecules/AnimatedCheckmark/AnimatedCheckmark.styles.js";import"../../../../../molecules/ApplicationIcon/ApplicationIcon.js";import"../../../../../molecules/Badge/Badge.styles.js";import"../../../../../molecules/Banner/Banner.styles.js";import"../../../../../molecules/Chip/Chip.js";import"../../../../../molecules/ContentMenu/ContentMenu.js";import"../../../../../molecules/Dialog/Dialog.styles.js";import"../../../../../molecules/EquinorLogo/EquinorLogo.js";import"../../../../../atoms/style/colors.js";import"../../../../../molecules/FileProgress/CompactFileProgress.styles.js";import"../../../../../molecules/RichTextEditor/custom-extensions/AmplifyKit.js";import"../../../../../molecules/RichTextEditor/MenuBar/MenuBar.js";import"@tiptap/react";import"../../../../../molecules/RichTextEditor/RichTextEditor.styles.js";import"../../../../../molecules/RichTextEditor/RichTextEditor.types.js";import"../../../../../node_modules/lodash/lodash.js";import"@equinor/subsurface-app-management";import"@microsoft/signalr";import"@tanstack/react-query";import"../../../../../atoms/enums/Environment.js";import"../../../Notifications/NotificationProvider.js";import"../../../../../providers/AuthProvider/AuthProvider.js";import"../../../../../providers/ReleaseNotesProvider.js";import"../../../../../providers/SideBarProvider.js";import"../../../../../providers/SnackbarProvider/SnackbarProvider.js";import"../../../../../providers/TableOfContentsProvider.js";import"../../../../../providers/ThemeProvider/ThemeProvider.js";import"../../../../../providers/TutorialStepsProvider.js";import"../../../../../atoms/enums/Errors.js";import"../../../../../atoms/enums/Theme.js";import"../../../../ErrorPage/illustrations/GlitchAnimation.js";import"../../../../ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";import"../../../../../molecules/FileProgress/RegularFileProgress.styles.js";import"../../../../../molecules/FileUploadArea/FileUploadArea.js";import"../../../../../molecules/FullPageSpinner/FullPageSpinner.js";import"../../../../../molecules/InfoElement/InfoElement.js";import"../../../../../molecules/OptionalTooltip/OptionalTooltip.js";import"../../../../../molecules/ProfileAvatar/ProfileAvatar.js";import"../../../../../molecules/RichTextEditor/MenuBar/MenuBar.styles.js";import"../../../../../molecules/RichTextEditor/MenuBar/MenuButton.js";import"../../../../../molecules/Search/Search.js";import"react-router-dom";import"../../../../../molecules/Sieve/Sieve.styles.js";import"../../../../../molecules/SingleFilterMenu/SingleFilterMenu.js";import"../../../../../molecules/Skeleton/SkeletonBase/SkeletonBase.js";import"../../../../../molecules/Stepper/Stepper.js";import"../../../../../molecules/OptionDrawer/OptionDrawer.js";import{ComboBox as h}from"../../../../../molecules/Select/ComboBox/ComboBox.js";import"../../../../../molecules/Select/Select.styles.js";import"../../../../../molecules/ListItem/ListItem.js";import"../../../../../molecules/SelectionControls/Checkbox/Checkbox.js";import"../../../../../molecules/SelectionControls/Radio/Radio.js";import"../../../../../molecules/SelectionControls/Switch/Switch.js";import{TextField as v}from"../../../../../molecules/TextField/TextField.js";const g=({onBack:g,onClose:C})=>{const[S,f]=r([]),[P,A]=r(""),[k,y]=r(""),{data:E,isLoading:T}=n(),x=t((()=>E?.map((e=>({value:e.value,label:e.value})))??[]),[E]),{mutateAsync:B,isPending:R}=p(),b=t((()=>""===P||""===k||0===S.length),[P,k,S.length]);return e(c,{children:[e(u,{children:[o(i,{variant:"ghost_icon",onClick:g,children:o(s,{data:a})}),o(l,{variant:"h6",children:"Create new user"})]}),e(d,{children:[o(v,{id:"first-name",label:"First name",placeholder:"Add first name...",value:P,onChange:e=>{A(e.target.value)}}),o(v,{id:"last-name",label:"Last name",placeholder:"Add last name...",value:k,onChange:e=>{y(e.target.value)}})]}),e(d,{children:[o(l,{variant:"label",group:"navigation",children:"Roles"}),T&&o(m,{color:"primary"}),o(h,{placeholder:"Select roles...",values:S,onSelect:e=>{f(e)},items:x})]}),e(d,{children:[o(i,{variant:"outlined",onClick:g,children:"Cancel"}),o(i,R?{children:o(m,{})}:{onClick:async()=>{await B({firstName:P,lastName:k,roles:S.map((e=>e.value)).sort(),uniqueName:`${P}.${k}`.toLowerCase(),appName:j.getAppName(import.meta.env.VITE_NAME),activeUsers:[]}),C()},disabled:b,children:"Create and impersonate"})]})]})};export{g as CreateNewUser};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/amplify-component-lib",
3
- "version": "8.7.4",
3
+ "version": "8.8.0",
4
4
  "description": "Frontend Typescript components for the Amplify team",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
@@ -141,7 +141,7 @@
141
141
  "eslint-plugin-storybook": "^0.8.0",
142
142
  "jest-environment-jsdom": "^29.7.0",
143
143
  "jest-styled-components": "^7.2.0",
144
- "msw": "^2.3.5",
144
+ "msw": "^2.4.9",
145
145
  "msw-storybook-addon": "^2.0.3",
146
146
  "ora": "^8.1.0",
147
147
  "prettier": "^3.3.3",