ebta-workflow-prod 4.1.8 → 4.1.9

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "ebta-workflow-prod",
     "private": false,
-    "version": "4.1.8",
+    "version": "4.1.9",
     "description": "",
     "license": "UNLICENSED",
     "author": "",

package/src/elements/CsColorPicker.tsx

@@ -4,9 +4,9 @@ import { FormElementProps, FormElementRegistration  } from "@vertigis/workflow";
 import { ColorInput, ColorPicker } from '@mantine/core';
 type ColorFormat = "hex" | "rgba" | "rgb" | "hsl" | "hsla";
 
-import "@mantine/core/styles.css";
+//import "@mantine/core/styles.css";
 //Causing shrink
-//import "../styles/mantine-scoped.css";
+
 import Color from "@arcgis/core/Color";
 
 
@@ -49,6 +49,7 @@ function CsColorPickerV2(props: CsColorPickerV2Props): React.ReactElement {
         swatchesPerRow, 
         componentType
     } = props;
+      const rootRef = React.useRef<HTMLDivElement>(null);
 
     const handleChange = (color: string) => {
         let esriColor: Color;
@@ -80,32 +81,40 @@ function CsColorPickerV2(props: CsColorPickerV2Props): React.ReactElement {
     };
 
     return (
-        <MantineProvider withStaticClasses withGlobalClasses classNamesPrefix="ebta-mantime">
-            {componentType === "ColorInput" ? (
-                <ColorInput
-                    swatches={swatches? swatches : undefined}
-                    swatchesPerRow={swatches ? swatchesPerRow : undefined}
-                    value={value}
-                    size={colorPickerSize}
-                    onChange={handleChange}
-                    description={description ? description : undefined}
-                    placeholder={placeholder ? placeholder : undefined}
-                    format={colorType}
-                    defaultValue={defaultValue}
-                />
-            ) : (
-                <ColorPicker
-                    fullWidth
-                    size={colorPickerSize}
-                    swatches={swatches? swatches : undefined}
-                    swatchesPerRow={swatches ? swatchesPerRow : undefined}
-                    value={value}
-                    onChange={handleChange}
-                    format={colorType}
-                    defaultValue={defaultValue}
-                />
-            )}
-        </MantineProvider>
+        <div ref={rootRef} className="cs-color-picker-root">
+            <MantineProvider
+                withStaticClasses
+                withGlobalClasses
+                classNamesPrefix="ebta-mantime"
+                cssVariablesSelector=".cs-color-picker-root"
+                getRootElement={() => rootRef.current ?? undefined}
+            >
+                {componentType === "ColorInput" ? (
+                    <ColorInput
+                        swatches={swatches? swatches : undefined}
+                        swatchesPerRow={swatches ? swatchesPerRow : undefined}
+                        value={value}
+                        size={colorPickerSize}
+                        onChange={handleChange}
+                        description={description ? description : undefined}
+                        placeholder={placeholder ? placeholder : undefined}
+                        format={colorType}
+                        defaultValue={defaultValue}
+                    />
+                ) : (
+                    <ColorPicker
+                        fullWidth
+                        size={colorPickerSize}
+                        swatches={swatches? swatches : undefined}
+                        swatchesPerRow={swatches ? swatchesPerRow : undefined}
+                        value={value}
+                        onChange={handleChange}
+                        format={colorType}
+                        defaultValue={defaultValue}
+                    />
+                )}
+            </MantineProvider>
+        </div>
     );
 }
 

package/src/elements/PanovideoPlayer.tsx

@@ -777,7 +777,7 @@ video.removeEventListener("progress", onProgress);
             </div>
 
             <div style={barStyle}>
-                <button type="button" style={btnStyle} onClick={togglePlay} title="Play / pause">
+                <button type="button" style={btnStyle} onClick={togglePlay} title="Play / pause or 'Space' key">
                     {playing ? "⏸" : "▶"}
                 </button>
                 {/* <button type="button" style={btnStyle} onClick={toggleMute} title="Sound on / off">

package/src/elements/Timeline.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { FormElementProps, FormElementRegistration } from "@vertigis/workflow";
 import { Timeline as MainTimeLine, Text } from '@mantine/core';
 import { MantineProvider } from '@mantine/core';
-//import "../styles/mantine-scoped.css";
+
 
 /**
  * The generic type argument provided to `FormElementProps<T>` controls the type
@@ -40,8 +40,14 @@ interface TimelineProps extends FormElementProps<string> {
 function Timeline(props: TimelineProps): React.ReactElement {
     const { itemDetails, iconSize, lineWidth, active, color, reverseActive } = props;
     iconSize * 0.6
+
+    const rootRef = React.useRef<HTMLDivElement>(null);
     return (
-            <MantineProvider>
+        <div ref={rootRef} className="cs-timeline-root">
+            <MantineProvider
+                cssVariablesSelector=".cs-timeline-root"
+                getRootElement={() => rootRef.current ?? undefined}
+            >
                 <MainTimeLine active={active} bulletSize={iconSize} lineWidth={lineWidth} color={color} reverseActive={reverseActive}>
 
                     {itemDetails.map((item, index) => {
@@ -62,6 +68,7 @@ function Timeline(props: TimelineProps): React.ReactElement {
                     })}
                 </MainTimeLine>
             </MantineProvider>
+        </div>
     );
 }
 

package/src/main.ts

@@ -1,4 +1,6 @@
 import * as index from "./index";
+import "@mantine/core/styles.css";
+import "./styles/mantine-body-reset.css";
 
 let mainResult: Promise<any> | undefined;
 

package/src/styles/mantine-body-reset.css

@@ -0,0 +1,9 @@
+body {
+  font-family: inherit !important;
+  font-size: inherit !important;
+  line-height: inherit !important;
+  color: inherit !important;
+  background-color: inherit !important;
+  -webkit-font-smoothing: initial !important;
+  -moz-osx-font-smoothing: initial !important;
+}