@equinor/amplify-component-lib 8.10.1 → 8.10.3
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.js +1 -1
- package/dist/molecules/Dialog/Dialog.d.ts +2 -0
- package/dist/molecules/Dialog/Dialog.js +1 -1
- package/dist/molecules/Dialog/Dialog.styles.js +1 -0
- package/dist/organisms/Template/Template.js +9 -5
- package/dist/organisms/TopBar/Settings.js +11 -11
- package/dist/providers/ThemeProvider/ThemeProvider.d.ts +2 -1
- package/dist/providers/ThemeProvider/ThemeProvider.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
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 u=u=>{const{loading:a,disabled:c,sortValues:o,onSearchChange:d,onOpenCallback:s}=u,[i
|
|
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 u=u=>{const{loading:a,disabled:c,sortValues:o,onSearchChange:d,onOpenCallback:s}=u,[v,i]=e(!1),[h,m]=e(""),f=n(null),g=n([]),p=n(-1),[y,k]=e(void 0),S=n(!1),I=n(0),A=r((()=>{let e,n=[];return"values"in u?n=u.values:u.value&&(n=[u.value]),o?(e=u.groups?u.groups.flatMap((e=>e.items)):u.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}),[u,o]);t((()=>{void 0!==s&&s(v)}),[s,v]),t((()=>{S.current&&I.current!==A.length&&(I.current=A.length,S.current=!1,f.current?.focus())}),[A.length]);const O=()=>{v||c||a||(f.current?.focus(),i(!0))},w=()=>{i(!1),m(""),p.current=0},C=e=>{!("values"in u)||a||c||u.onSelect(u.values.filter((n=>n.value!==e.value)),e)};return{handleOnAddItem:()=>{"onAddItem"in u&&u.onAddItem&&(u.onAddItem(h),m(""))},handleOnItemSelect:e=>{"value"in u?u.onSelect(e):u.onSelect(((e,n)=>{const r=structuredClone(e);return r.some((e=>e.value===n.value))?r.filter((e=>e.value!==n.value)):"values"in u&&void 0!==u.syncParentChildSelection&&!u.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)))))]})(u.values,e),e),""!==h&&m(""),S.current=!0},handleOnItemKeyDown:e=>{"ArrowDown"===e.key&&p.current<g.current.length-1?(p.current+=1,g.current.at(p.current)?.focus()):"ArrowUp"===e.key&&p.current>0?(p.current-=1,g.current.at(p.current)?.focus()):"ArrowUp"===e.key&&0===p.current&&(p.current=-1,f.current?.focus())},handleOnSearchKeyDown:e=>{"Enter"===e.key&&""!==h&&"onAddItem"in u&&u.onAddItem?(e.preventDefault(),u.onAddItem(h),m("")):"Space"===e.key||"Enter"===e.key?O():"Escape"===e.key?(f.current?.blur(),w()):"ArrowDown"!==e.key&&"ArrowUp"!==e.key||!g.current.at(0)?"Backspace"===e.key&&void 0===y&&"values"in u&&""===h?k(A?.at(-1)):"Backspace"===e.key&&y&&(C(y),k(void 0)):(g.current[0]?.focus(),p.current=0)},handleOnClear:()=>{"value"in u?u.onSelect(void 0):u.onSelect([])},handleOnSearchChange:e=>{" "===e.target.value||a||c||(m(e.target.value),d?.(e.target.value),v||i(!0),A.length>0&&""!==e.target.value&&setTimeout((()=>{f.current?.focus()})))},handleToggleOpen:()=>{c||a||(v?w():O())},handleOnClose:w,handleOnOpen:O,handleOnRemoveItem:C,search:h,searchRef:f,itemRefs:g,selectedValues:A,open:v,tryingToRemoveItem:y}};export{u as useSelect};
|
|
@@ -27,6 +27,7 @@ export interface DialogProps extends Omit<EDSDialogProps, 'title'> {
|
|
|
27
27
|
actions?: DialogAction[];
|
|
28
28
|
withContentPadding?: boolean;
|
|
29
29
|
withBorders?: boolean;
|
|
30
|
+
contentMaxHeight?: string;
|
|
30
31
|
}
|
|
31
32
|
/**
|
|
32
33
|
* @param title - String or up to 2 react elements in a flex-column
|
|
@@ -36,6 +37,7 @@ export interface DialogProps extends Omit<EDSDialogProps, 'title'> {
|
|
|
36
37
|
* @param actions - Dialog actions, { position: "right" is default }
|
|
37
38
|
* @param withContentPadding - Defaults to true
|
|
38
39
|
* @param withBorders - Defaults to false
|
|
40
|
+
* @param contentMaxHeight - Defaults to '60vh'
|
|
39
41
|
* Also inherits props from EDS dialog
|
|
40
42
|
*/
|
|
41
43
|
export declare const Dialog: import("react").ForwardRefExoticComponent<DialogProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as i,jsxs as t}from"react/jsx-runtime";import{forwardRef as
|
|
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};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import{tokens as o}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import{darkTokens as t}from"../../atoms/style/darkTokens.js";import{lightTokens as
|
|
1
|
+
import{tokens as o}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import"../../atoms/style/colors.js";import{spacings as i}from"../../atoms/style/spacings.js";import{darkTokens as t}from"../../atoms/style/darkTokens.js";import{lightTokens as n}from"../../atoms/style/lightTokens.js";import{spacingTokens as e}from"../../atoms/style/spacingTokens.js";import s,{createGlobalStyle as a}from"styled-components";const{colors:r}=o,d=s.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: column;
|
|
4
4
|
min-height: 100vh;
|
|
@@ -6,7 +6,7 @@ import{tokens as o}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/ind
|
|
|
6
6
|
background: ${r.ui.background__light.rgba};
|
|
7
7
|
`,l=s.div`
|
|
8
8
|
display: flex;
|
|
9
|
-
`,
|
|
9
|
+
`,c=s.div`
|
|
10
10
|
display: flex;
|
|
11
11
|
/* 64px is height of TopBar */
|
|
12
12
|
min-height: calc(100vh - 64px);
|
|
@@ -17,15 +17,19 @@ import{tokens as o}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/ind
|
|
|
17
17
|
&:not(:has(.select-field)) {
|
|
18
18
|
padding: 0 ${i.xxx_large};
|
|
19
19
|
}
|
|
20
|
-
`,
|
|
20
|
+
`,m=a`
|
|
21
21
|
${t}
|
|
22
|
-
${e}
|
|
23
22
|
${n}
|
|
23
|
+
${e}
|
|
24
24
|
|
|
25
25
|
* {
|
|
26
26
|
box-sizing: border-box;
|
|
27
27
|
}
|
|
28
28
|
|
|
29
|
+
dialog {
|
|
30
|
+
background: ${r.ui.background__default.rgba};
|
|
31
|
+
}
|
|
32
|
+
|
|
29
33
|
button {
|
|
30
34
|
border: none;
|
|
31
35
|
background: none;
|
|
@@ -61,4 +65,4 @@ import{tokens as o}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/ind
|
|
|
61
65
|
}
|
|
62
66
|
}
|
|
63
67
|
|
|
64
|
-
`,p=d;p.Container=l,p.Content=
|
|
68
|
+
`,p=d;p.Container=l,p.Content=c,p.GlobalStyles=m;export{p as Template};
|
|
@@ -1,25 +1,25 @@
|
|
|
1
|
-
import{jsxs as e,Fragment as o,jsx as r}from"react/jsx-runtime";import{useRef as t,useState as i,useMemo as
|
|
1
|
+
import{jsxs as e,Fragment as o,jsx as r}from"react/jsx-runtime";import{useRef as t,useState as i,useContext as l,useMemo as n}from"react";import{Icon as a,Typography as s,Radio as m}from"@equinor/eds-core-react";import{settings as d}from"@equinor/eds-icons";import{tokens as p}from"../../node_modules/@equinor/eds-tokens/dist/esm/base/index.js";import{TopBarButton as c}from"./TopBar.styles.js";import{TopBarMenu as h}from"./TopBarMenu.js";import"../../atoms/enums/Errors.js";import"../../atoms/enums/Environment.js";import{Theme as u}from"../../atoms/enums/Theme.js";import"../../atoms/enums/SpacingsMode.js";import"../../atoms/style/colors.js";import{spacings as f}from"../../atoms/style/spacings.js";import{ThemeProviderContext as g}from"../../providers/ThemeProvider/ThemeProvider.js";import v from"styled-components";const{elevation:x}=p,$=v.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: row;
|
|
4
4
|
align-items: center;
|
|
5
|
-
gap: ${
|
|
6
|
-
padding: 0 ${
|
|
5
|
+
gap: ${f.x_small};
|
|
6
|
+
padding: 0 ${f.large} 0 ${f.small};
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
> span {
|
|
9
|
-
padding: ${
|
|
9
|
+
padding: ${f.small} ${f.x_small};
|
|
10
10
|
}
|
|
11
|
-
|
|
11
|
+
`,b=v.div`
|
|
12
12
|
width: 64px;
|
|
13
13
|
height: 32px;
|
|
14
14
|
background-color: ${e=>e.$color};
|
|
15
|
-
box-shadow: ${
|
|
15
|
+
box-shadow: ${x.raised};
|
|
16
16
|
border-radius: 4px;
|
|
17
|
-
`,
|
|
17
|
+
`,j=v.div`
|
|
18
18
|
display: flex;
|
|
19
19
|
flex-direction: column;
|
|
20
|
-
gap: ${
|
|
20
|
+
gap: ${f.medium};
|
|
21
21
|
> div > p {
|
|
22
|
-
padding-top: ${
|
|
23
|
-
padding-left: ${
|
|
22
|
+
padding-top: ${f.small};
|
|
23
|
+
padding-left: ${f.medium};
|
|
24
24
|
}
|
|
25
|
-
`,
|
|
25
|
+
`,T=({allSettings:p})=>{const f=t(null),[v,x]=i(!1),T=l(g),y=n((()=>T?[{title:"Theme",value:T.theme,onChange:e=>T.setTheme(e),items:[{label:"Light Mode",name:"theme-group",value:u.LIGHT,colorBox:"#ffffff"},{label:"Dark Mode",name:"theme-group",value:u.DARK,colorBox:"#243746"}]},...p??[]]:p??[]),[p,T]);if(0===y.length)throw new Error("Empty settings in TopBar.Settings!");return e(o,{children:[r(c,{variant:"ghost_icon",onClick:()=>x(!v),ref:f,children:r(a,{data:d,size:24})}),r(h,{open:v,title:"Settings",onClose:()=>x(!1),anchorEl:f.current,children:r(j,{children:y.map(((o,t)=>e("div",{children:[r(s,{variant:"overline",children:o.title}),o.items.map(((t,i)=>e($,{children:[r(m,{disabled:t.disabled,label:t.label,name:t.name,value:`${t.label}-${i}`,checked:o.value===t.value,onChange:()=>o.onChange?.(t.value)}),t.colorBox&&r(b,{$color:t.colorBox,"data-testid":`colorbox-${t.colorBox}`}),t.text&&r(s,{variant:"h6",children:t.text}),t.element&&t.element]},i)))]},t)))})})]})};T.displayName="TopBar.Settings";export{T as Settings};
|
|
@@ -4,7 +4,8 @@ interface ThemeProviderContextType {
|
|
|
4
4
|
theme: Theme;
|
|
5
5
|
setTheme: (theme: Theme) => void;
|
|
6
6
|
}
|
|
7
|
-
export declare
|
|
7
|
+
export declare const ThemeProviderContext: import("react").Context<ThemeProviderContextType | undefined>;
|
|
8
|
+
export declare function useThemeProvider(): ThemeProviderContextType;
|
|
8
9
|
interface ThemeProviderProps {
|
|
9
10
|
children: ReactNode;
|
|
10
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as r}from"react/jsx-runtime";import{createContext as t,useContext as o,useEffect as i}from"react";import{THEME_LOCALSTORAGE_KEY as e}from"./ThemeProvider.constants.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{useLocalStorage as s}from"../../atoms/hooks/useLocalStorage.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"../AuthProvider/AuthProvider.js";import"../ReleaseNotesProvider.js";import"../SideBarProvider.js";import"../SnackbarProvider/SnackbarProvider.js";import"../TableOfContentsProvider.js";import"../TutorialStepsProvider.js";import"../../atoms/style/colors.js";import"../../atoms/enums/Errors.js";import{Theme as m}from"../../atoms/enums/Theme.js";import"../../atoms/enums/SpacingsMode.js";import"../../organisms/ErrorPage/illustrations/GlitchAnimation.js";import"../../organisms/ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";const n=t(void 0);function a(){const r=o(n);
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{createContext as t,useContext as o,useEffect as i}from"react";import{THEME_LOCALSTORAGE_KEY as e}from"./ThemeProvider.constants.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{useLocalStorage as s}from"../../atoms/hooks/useLocalStorage.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"../AuthProvider/AuthProvider.js";import"../ReleaseNotesProvider.js";import"../SideBarProvider.js";import"../SnackbarProvider/SnackbarProvider.js";import"../TableOfContentsProvider.js";import"../TutorialStepsProvider.js";import"../../atoms/style/colors.js";import"../../atoms/enums/Errors.js";import{Theme as m}from"../../atoms/enums/Theme.js";import"../../atoms/enums/SpacingsMode.js";import"../../organisms/ErrorPage/illustrations/GlitchAnimation.js";import"../../organisms/ErrorPage/illustrations/QuestioningAnimation.js";import"proj4";import"html2canvas";const n=t(void 0);function a(){const r=o(n);if(void 0===r)throw new Error("ThemeProvider must be used within Provider");return r}const p=({children:t})=>{const[o,a]=s(e,m.LIGHT);i((()=>{document.documentElement.setAttribute("data-theme",o)}),[o]);return r(n.Provider,{value:{theme:o,setTheme:r=>{a(r)}},children:t})};export{p as ThemeProvider,n as ThemeProviderContext,a as useThemeProvider};
|