@equinor/roma-framework 3.0.0 → 3.0.1

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.
Files changed (7) hide show
  1. package/dev-portal/lib/dev-portal/PortalStyles.d.ts +15 -15
  2. package/dev-portal/lib/eds-event-provider.d.ts +2 -1
  3. package/dev-portal/package.json +1 -1
  4. package/lib/dev-portal/PortalStyles.d.ts +15 -15
  5. package/lib/eds-event-provider.d.ts +2 -1
  6. package/package.json +1 -1
  7. package/roma-framework.mjs +30 -3
package/dev-portal/lib/dev-portal/PortalStyles.d.ts CHANGED
@@ -1,10 +1,14 @@
1
1
  export declare const TopBarFadeIn: import('styled-components').IStyledComponent<"web", {
2
2
  children?: import('react').ReactNode;
3
3
  id?: string | undefined | undefined;
4
+ slot?: string | undefined | undefined;
5
+ style?: import('react').CSSProperties | undefined;
6
+ title?: string | undefined | undefined;
7
+ accessKey?: string | undefined | undefined;
8
+ dir?: string | undefined | undefined;
4
9
  onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
5
10
  key?: import('react').Key | null | undefined;
6
11
  hidden?: boolean | undefined | undefined;
7
- style?: import('react').CSSProperties | undefined;
8
12
  suppressHydrationWarning?: boolean | undefined | undefined;
9
13
  className?: string | undefined | undefined;
10
14
  color?: string | undefined | undefined;
@@ -227,16 +231,12 @@ export declare const TopBarFadeIn: import('styled-components').IStyledComponent<
227
231
  onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
228
232
  onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
229
233
  onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
230
- slot?: string | undefined | undefined;
231
- title?: string | undefined | undefined;
232
234
  defaultChecked?: boolean | undefined | undefined;
233
235
  defaultValue?: string | number | readonly string[] | undefined;
234
236
  suppressContentEditableWarning?: boolean | undefined | undefined;
235
- accessKey?: string | undefined | undefined;
236
237
  autoFocus?: boolean | undefined | undefined;
237
238
  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
238
239
  contextMenu?: string | undefined | undefined;
239
- dir?: string | undefined | undefined;
240
240
  draggable?: (boolean | "true" | "false") | undefined;
241
241
  nonce?: string | undefined | undefined;
242
242
  spellCheck?: (boolean | "true" | "false") | undefined;
@@ -550,11 +550,15 @@ export declare const Styled: {
550
550
  export declare const StyledSideSheet: import('styled-components').IStyledComponent<"web", {
551
551
  children?: import('react').ReactNode;
552
552
  id?: string | undefined | undefined;
553
+ slot?: string | undefined | undefined;
554
+ style?: import('react').CSSProperties | undefined;
555
+ title?: string | undefined;
556
+ accessKey?: string | undefined | undefined;
557
+ dir?: string | undefined | undefined;
553
558
  onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
554
559
  key?: import('react').Key | null | undefined;
555
560
  width?: string | undefined;
556
561
  hidden?: boolean | undefined | undefined;
557
- style?: import('react').CSSProperties | undefined;
558
562
  variant?: "small" | "medium" | "large" | "xlarge" | undefined;
559
563
  suppressHydrationWarning?: boolean | undefined | undefined;
560
564
  className?: string | undefined | undefined;
@@ -777,16 +781,12 @@ export declare const StyledSideSheet: import('styled-components').IStyledCompone
777
781
  onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
778
782
  onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
779
783
  onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
780
- slot?: string | undefined | undefined;
781
- title?: string | undefined;
782
784
  defaultChecked?: boolean | undefined | undefined;
783
785
  defaultValue?: string | number | readonly string[] | undefined;
784
786
  suppressContentEditableWarning?: boolean | undefined | undefined;
785
- accessKey?: string | undefined | undefined;
786
787
  autoFocus?: boolean | undefined | undefined;
787
788
  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
788
789
  contextMenu?: string | undefined | undefined;
789
- dir?: string | undefined | undefined;
790
790
  draggable?: (boolean | "true" | "false") | undefined;
791
791
  nonce?: string | undefined | undefined;
792
792
  spellCheck?: (boolean | "true" | "false") | undefined;
@@ -829,10 +829,14 @@ export declare const StyledSideSheet: import('styled-components').IStyledCompone
829
829
  export declare const StyledMenu: import('styled-components').IStyledComponent<"web", {
830
830
  children?: import('react').ReactNode;
831
831
  id?: string | undefined | undefined;
832
+ slot?: string | undefined | undefined;
833
+ style?: import('react').CSSProperties | undefined;
834
+ title?: string | undefined | undefined;
835
+ accessKey?: string | undefined | undefined;
836
+ dir?: string | undefined | undefined;
832
837
  onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
833
838
  key?: import('react').Key | null | undefined;
834
839
  hidden?: boolean | undefined | undefined;
835
- style?: import('react').CSSProperties | undefined;
836
840
  suppressHydrationWarning?: boolean | undefined | undefined;
837
841
  className?: string | undefined | undefined;
838
842
  color?: string | undefined | undefined;
@@ -1054,16 +1058,12 @@ export declare const StyledMenu: import('styled-components').IStyledComponent<"w
1054
1058
  onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
1055
1059
  onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
1056
1060
  onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
1057
- slot?: string | undefined | undefined;
1058
- title?: string | undefined | undefined;
1059
1061
  defaultChecked?: boolean | undefined | undefined;
1060
1062
  defaultValue?: string | number | readonly string[] | undefined;
1061
1063
  suppressContentEditableWarning?: boolean | undefined | undefined;
1062
- accessKey?: string | undefined | undefined;
1063
1064
  autoFocus?: boolean | undefined | undefined;
1064
1065
  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
1065
1066
  contextMenu?: string | undefined | undefined;
1066
- dir?: string | undefined | undefined;
1067
1067
  draggable?: (boolean | "true" | "false") | undefined;
1068
1068
  nonce?: string | undefined | undefined;
1069
1069
  spellCheck?: (boolean | "true" | "false") | undefined;
package/dev-portal/lib/eds-event-provider.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { IEventModuleProvider } from '@equinor/fusion-framework-module-event';
2
2
  import { ReactNode } from 'react';
3
- export declare const EdsEventProvider: ({ event, children }: {
3
+ export declare const EdsEventProvider: ({ event, children, portalContainer, }: {
4
4
  event: IEventModuleProvider;
5
5
  children: ReactNode;
6
+ portalContainer: string;
6
7
  }) => import("react/jsx-runtime").JSX.Element;
package/dev-portal/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/roma-framework",
3
- "version": "3.0.0",
3
+ "version": "3.0.1",
4
4
  "repository": "https://github.com/equinor/tops-roma",
5
5
  "types": "./index.d.ts",
6
6
  "private": false,
package/lib/dev-portal/PortalStyles.d.ts CHANGED
@@ -1,10 +1,14 @@
1
1
  export declare const TopBarFadeIn: import('styled-components').IStyledComponent<"web", {
2
2
  children?: import('react').ReactNode;
3
3
  id?: string | undefined | undefined;
4
+ slot?: string | undefined | undefined;
5
+ style?: import('react').CSSProperties | undefined;
6
+ title?: string | undefined | undefined;
7
+ accessKey?: string | undefined | undefined;
8
+ dir?: string | undefined | undefined;
4
9
  onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
5
10
  key?: import('react').Key | null | undefined;
6
11
  hidden?: boolean | undefined | undefined;
7
- style?: import('react').CSSProperties | undefined;
8
12
  suppressHydrationWarning?: boolean | undefined | undefined;
9
13
  className?: string | undefined | undefined;
10
14
  color?: string | undefined | undefined;
@@ -227,16 +231,12 @@ export declare const TopBarFadeIn: import('styled-components').IStyledComponent<
227
231
  onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
228
232
  onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
229
233
  onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
230
- slot?: string | undefined | undefined;
231
- title?: string | undefined | undefined;
232
234
  defaultChecked?: boolean | undefined | undefined;
233
235
  defaultValue?: string | number | readonly string[] | undefined;
234
236
  suppressContentEditableWarning?: boolean | undefined | undefined;
235
- accessKey?: string | undefined | undefined;
236
237
  autoFocus?: boolean | undefined | undefined;
237
238
  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
238
239
  contextMenu?: string | undefined | undefined;
239
- dir?: string | undefined | undefined;
240
240
  draggable?: (boolean | "true" | "false") | undefined;
241
241
  nonce?: string | undefined | undefined;
242
242
  spellCheck?: (boolean | "true" | "false") | undefined;
@@ -550,11 +550,15 @@ export declare const Styled: {
550
550
  export declare const StyledSideSheet: import('styled-components').IStyledComponent<"web", {
551
551
  children?: import('react').ReactNode;
552
552
  id?: string | undefined | undefined;
553
+ slot?: string | undefined | undefined;
554
+ style?: import('react').CSSProperties | undefined;
555
+ title?: string | undefined;
556
+ accessKey?: string | undefined | undefined;
557
+ dir?: string | undefined | undefined;
553
558
  onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
554
559
  key?: import('react').Key | null | undefined;
555
560
  width?: string | undefined;
556
561
  hidden?: boolean | undefined | undefined;
557
- style?: import('react').CSSProperties | undefined;
558
562
  variant?: "small" | "medium" | "large" | "xlarge" | undefined;
559
563
  suppressHydrationWarning?: boolean | undefined | undefined;
560
564
  className?: string | undefined | undefined;
@@ -777,16 +781,12 @@ export declare const StyledSideSheet: import('styled-components').IStyledCompone
777
781
  onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
778
782
  onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
779
783
  onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
780
- slot?: string | undefined | undefined;
781
- title?: string | undefined;
782
784
  defaultChecked?: boolean | undefined | undefined;
783
785
  defaultValue?: string | number | readonly string[] | undefined;
784
786
  suppressContentEditableWarning?: boolean | undefined | undefined;
785
- accessKey?: string | undefined | undefined;
786
787
  autoFocus?: boolean | undefined | undefined;
787
788
  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
788
789
  contextMenu?: string | undefined | undefined;
789
- dir?: string | undefined | undefined;
790
790
  draggable?: (boolean | "true" | "false") | undefined;
791
791
  nonce?: string | undefined | undefined;
792
792
  spellCheck?: (boolean | "true" | "false") | undefined;
@@ -829,10 +829,14 @@ export declare const StyledSideSheet: import('styled-components').IStyledCompone
829
829
  export declare const StyledMenu: import('styled-components').IStyledComponent<"web", {
830
830
  children?: import('react').ReactNode;
831
831
  id?: string | undefined | undefined;
832
+ slot?: string | undefined | undefined;
833
+ style?: import('react').CSSProperties | undefined;
834
+ title?: string | undefined | undefined;
835
+ accessKey?: string | undefined | undefined;
836
+ dir?: string | undefined | undefined;
832
837
  onError?: import('react').ReactEventHandler<HTMLDivElement> | undefined;
833
838
  key?: import('react').Key | null | undefined;
834
839
  hidden?: boolean | undefined | undefined;
835
- style?: import('react').CSSProperties | undefined;
836
840
  suppressHydrationWarning?: boolean | undefined | undefined;
837
841
  className?: string | undefined | undefined;
838
842
  color?: string | undefined | undefined;
@@ -1054,16 +1058,12 @@ export declare const StyledMenu: import('styled-components').IStyledComponent<"w
1054
1058
  onAnimationIterationCapture?: import('react').AnimationEventHandler<HTMLDivElement> | undefined;
1055
1059
  onTransitionEnd?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
1056
1060
  onTransitionEndCapture?: import('react').TransitionEventHandler<HTMLDivElement> | undefined;
1057
- slot?: string | undefined | undefined;
1058
- title?: string | undefined | undefined;
1059
1061
  defaultChecked?: boolean | undefined | undefined;
1060
1062
  defaultValue?: string | number | readonly string[] | undefined;
1061
1063
  suppressContentEditableWarning?: boolean | undefined | undefined;
1062
- accessKey?: string | undefined | undefined;
1063
1064
  autoFocus?: boolean | undefined | undefined;
1064
1065
  contentEditable?: "inherit" | (boolean | "true" | "false") | "plaintext-only" | undefined;
1065
1066
  contextMenu?: string | undefined | undefined;
1066
- dir?: string | undefined | undefined;
1067
1067
  draggable?: (boolean | "true" | "false") | undefined;
1068
1068
  nonce?: string | undefined | undefined;
1069
1069
  spellCheck?: (boolean | "true" | "false") | undefined;
package/lib/eds-event-provider.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { IEventModuleProvider } from '@equinor/fusion-framework-module-event';
2
2
  import { ReactNode } from 'react';
3
- export declare const EdsEventProvider: ({ event, children }: {
3
+ export declare const EdsEventProvider: ({ event, children, portalContainer, }: {
4
4
  event: IEventModuleProvider;
5
5
  children: ReactNode;
6
+ portalContainer: string;
6
7
  }) => import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@equinor/roma-framework",
3
- "version": "3.0.0",
3
+ "version": "3.0.1",
4
4
  "repository": "https://github.com/equinor/tops-roma",
5
5
  "types": "./index.d.ts",
6
6
  "private": false,
package/roma-framework.mjs CHANGED
@@ -162,18 +162,38 @@ function tap(observerOrNext, error, complete) {
162
162
  }));
163
163
  }) : identity;
164
164
  }
165
- const EdsEventProvider = ({ event, children }) => {
165
+ const EdsEventProvider = ({
166
+ event,
167
+ children,
168
+ portalContainer
169
+ }) => {
166
170
  const [density, setDensity] = useState(
167
171
  localStorage.getItem("roma__density") ?? "comfortable"
168
172
  );
169
173
  const evModule = useFramework().modules.event;
174
+ const [root, setRoot] = useState(null);
170
175
  useEffect(() => {
171
176
  const sub = evModule.event$.pipe(filter((e) => e.type === "onDensityChanged")).subscribe((e) => {
172
177
  setDensity(e.detail);
173
178
  });
174
179
  return () => sub.unsubscribe();
175
180
  }, [event]);
176
- return /* @__PURE__ */ jsx(EdsProvider, { density, children });
181
+ useEffect(() => {
182
+ if (root) return;
183
+ const interval = setInterval(() => {
184
+ setRoot(document.querySelector(`#${portalContainer}`));
185
+ }, 250);
186
+ if (root) clearInterval(interval);
187
+ return () => clearInterval(interval);
188
+ }, [root, portalContainer]);
189
+ return /* @__PURE__ */ jsx(
190
+ EdsProvider,
191
+ {
192
+ density,
193
+ rootElement: document.querySelector(`#${portalContainer}`),
194
+ children
195
+ }
196
+ );
177
197
  };
178
198
  const makeComponent = (Component, args, configure2) => lazy(async () => {
179
199
  const init = configureModules(configure2);
@@ -187,7 +207,14 @@ const makeComponent = (Component, args, configure2) => lazy(async () => {
187
207
  });
188
208
  const queryClient = args.query ?? new QueryClient();
189
209
  return {
190
- default: () => /* @__PURE__ */ jsx(FrameworkProvider, { value: fusion, children: /* @__PURE__ */ jsx(IntlProvider, { locale: navigator.language, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(StyleProvider, { scope: `roma-${appKey}`, children: /* @__PURE__ */ jsx(EdsEventProvider, { event: modules.event, children: /* @__PURE__ */ jsx(ModuleProvider, { value: modules, children: Component }) }) }) }) }) })
210
+ default: () => /* @__PURE__ */ jsx(FrameworkProvider, { value: fusion, children: /* @__PURE__ */ jsx(IntlProvider, { locale: navigator.language, children: /* @__PURE__ */ jsx(QueryClientProvider, { client: queryClient, children: /* @__PURE__ */ jsx(StyleProvider, { scope: `roma-${appKey}`, children: /* @__PURE__ */ jsx(
211
+ EdsEventProvider,
212
+ {
213
+ portalContainer: `roma-${appKey}`,
214
+ event: modules.event,
215
+ children: /* @__PURE__ */ jsx(ModuleProvider, { value: modules, children: Component })
216
+ }
217
+ ) }) }) }) })
191
218
  };
192
219
  });
193
220
  const withStyleIsolation = (children, args) => lazy(async () => {