@equinor/amplify-component-lib 8.7.5 → 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.
- package/dist/atoms/hooks/useSelect.d.ts +1 -2
- package/dist/atoms/hooks/useSelect.js +1 -1
- package/dist/molecules/Select/AddTagItem.d.ts +0 -1
- package/dist/molecules/Select/AddTagItem.js +1 -1
- package/dist/molecules/Select/ComboBox/ComboBox.d.ts +3 -0
- package/dist/molecules/Select/GroupedSelectMenu.js +1 -1
- package/dist/molecules/Select/ListSelectMenu.d.ts +1 -1
- package/dist/molecules/Select/ListSelectMenu.js +1 -1
- package/dist/molecules/Select/Select.js +1 -1
- package/dist/molecules/Select/Select.styles.js +6 -11
- package/dist/molecules/Select/Select.types.d.ts +1 -3
- package/dist/molecules/Select/SelectMenuItem.js +1 -1
- package/dist/organisms/TableOfContents/TableOfContents.constants.js +1 -1
- package/dist/organisms/TableOfContents/TableOfContents.js +1 -1
- package/dist/organisms/TableOfContents/TableOfContents.styles.d.ts +5 -0
- package/dist/organisms/TableOfContents/TableOfContents.styles.js +30 -5
- package/dist/organisms/TableOfContents/TableOfContents.types.d.ts +1 -1
- package/dist/organisms/TopBar/Account/ImpersonateMenu/CreateNewUser/CreateNewUser.js +1 -1
- package/package.json +2 -2
|
@@ -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
|
|
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};
|
|
@@ -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
|
|
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
|
|
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
|
|
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
|
|
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
|
-
`,
|
|
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
|
-
`,
|
|
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
|
-
|
|
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
|
-
|
|
182
|
+
`,$=s(r)`
|
|
188
183
|
margin-left: ${o.medium};
|
|
189
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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
|
|
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
|
|
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
|
-
`,
|
|
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
|
-
`,
|
|
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
|
-
|
|
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{
|
|
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
|
|
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.
|
|
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.
|
|
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",
|