@eccenca/gui-elements 23.4.2-rc.0 → 23.6.0-rc.0

package/src/components/Checkbox/checkbox.scss

@@ -3,10 +3,12 @@ $eccgui-color-checkbox: $eccgui-color-workspace-text !default;
 $eccgui-color-checkbox-background: transparent !default;
 $eccgui-color-checkbox-checked: $eccgui-color-accent !default;
 $eccgui-color-checkbox-checked-background: transparent !default;
+
 // library vars
 $control-background-color: $eccgui-color-checkbox-background !default;
 $control-background-color-hover: $eccgui-color-checkbox-background !default;
 $control-background-color-active: $eccgui-color-checkbox-background !default;
+
 // $dark-control-background-color: $dark-button-background-color !default;
 // $dark-control-background-color-hover: $dark-button-background-color-hover !default;
 // $dark-control-background-color-active: $dark-button-background-color-active !default;
@@ -16,6 +18,7 @@ $control-checked-background-color-active: $eccgui-color-checkbox-checked-backgro
 $control-indicator-size: 16px; // !default;
 $control-indicator-size-large: 20px !default;
 $control-indicator-spacing: $eccgui-size-inline-whitespace !default;
+
 // $switch-background-color: rgba($gray4, 0.5) !default;
 // $switch-background-color-hover: rgba($gray2, 0.5) !default;
 // $switch-background-color-active: rgba($gray1, 0.5) !default;
@@ -42,8 +45,7 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
         }
 
         input:disabled ~ .#{$ns}-control-indicator,
-        input:disabled:checked ~ .#{$ns}-control-indicator,
-        {
+        input:disabled:checked ~ .#{$ns}-control-indicator {
             background-color: $eccgui-color-checkbox-background;
             opacity: 1;
 

package/src/components/ContextOverlay/ContextMenu.stories.tsx

@@ -1,24 +1,24 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
 
-import {
-  ContextMenu,
-  MenuItem,
-} from "../../index";
+import { ContextMenu, MenuItem } from "../../index";
 
 export default {
-  title: "Components/ContextMenu",
-  component: ContextMenu,
-  subcomponents: { MenuItem },
-  argTypes: {
-      children: {
-          control: "none",
-      }
-  },
-} as ComponentMeta<typeof ContextMenu>;
+    title: "Components/ContextMenu",
+    component: ContextMenu,
+    subcomponents: { MenuItem },
+    argTypes: {
+        children: {
+            control: "none",
+        },
+    },
+} as Meta<typeof ContextMenu>;
 
-const Template: ComponentStory<typeof ContextMenu> = (args) => (
-    <ContextMenu {...args} />
+const Template: StoryFn<typeof ContextMenu> = (args) => (
+    <OverlaysProvider>
+        <ContextMenu {...args} />
+    </OverlaysProvider>
 );
 
 export const Default = Template.bind({});
@@ -28,6 +28,6 @@ Default.args = {
         <MenuItem key="m1" text={"Item two"}>
             <MenuItem key="m2" text={"First sub option"} />
             <MenuItem key="m3" text={"Sub item two"} />
-        </MenuItem>
-    ]
-}
+        </MenuItem>,
+    ],
+};

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -1,10 +1,12 @@
-import React, {ReactElement} from "react";
+import React, { ReactElement } from "react";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ValidIconName } from "../Icon/canonicalIconNames";
+import IconButton from "../Icon/IconButton";
 import { TestableComponent } from "../interfaces";
-import ContextOverlay, { ContextOverlayProps } from "./ContextOverlay";
 import Menu from "../Menu/Menu";
-import IconButton from "../Icon/IconButton";
-import {ValidIconName} from "../Icon/canonicalIconNames";
+
+import ContextOverlay, { ContextOverlayProps } from "./ContextOverlay";
 
 export interface ContextMenuProps extends TestableComponent {
     /**
@@ -37,9 +39,9 @@ export interface ContextMenuProps extends TestableComponent {
     /**
      * Props to spread to `ContextOverlay` that is used to display the dropdown.
      */
-    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>
+    contextOverlayProps?: Partial<Omit<ContextOverlayProps, "content" | "children" | "className">>;
     /** Disables the button to open the menu. */
-    disabled?: boolean
+    disabled?: boolean;
 }
 
 /**
@@ -75,10 +77,10 @@ export const ContextMenu = ({
                     data-test-id={restProps["data-test-id"]}
                 />
             ) : (
-                togglerElement as ReactElement
+                (togglerElement as ReactElement)
             )}
         </ContextOverlay>
     );
-}
+};
 
 export default ContextMenu;

package/src/components/ContextOverlay/ContextOverlay.stories.tsx

@@ -1,148 +1,58 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { LoremIpsum } from 'react-lorem-ipsum';
-import {
-    PopoverPosition,
-    PopoverInteractionKind,
-    PopperModifiers,
-} from "@blueprintjs/core";
-import {
-    PlacementOptions
-} from "@blueprintjs/popover2";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { PopoverInteractionKind, PopperModifierOverrides } from "@blueprintjs/core";
+import { PopperPlacements } from "@blueprintjs/core";
+import { OverlaysProvider } from "@blueprintjs/core";
+import { Meta, StoryFn } from "@storybook/react";
 
-import {
-  ContextOverlay,
-  HtmlContentBlock,
-  Button
-} from "../../index";
+import { Button, ContextOverlay, HtmlContentBlock } from "../../index";
 
 export default {
-  title: "Components/ContextOverlay",
-  component: ContextOverlay,
-  argTypes: {
-      className: {
-          control: "string",
-          description: "A space-delimited list of class names to pass along to a child element."
-      },
-      defaultIsOpen: {
-          control: "boolean",
-          description: "Initial opened state when uncontrolled."
-      },
-      isOpen: {
-          control: "boolean",
-          description: "Whether the popover is visible. Passing this prop puts the popover in controlled mode, where the only way to change visibility is by updating this property."
-      },
-      interactionKind: {
-          control: "select",
-          options: {UNDEFINED: undefined, ...PopoverInteractionKind},
-          description: "The kind of interaction that triggers the display of the popover."
-      },
-      canEscapeKeyClose: {
-          control: "boolean",
-          description: "Whether pressing the esc key should invoke `onClose`."
-      },
-      onClose: {
-          control: "none",
-          description: "A callback that is invoked when user interaction causes the overlay to close, such as clicking on the overlay or pressing the esc key (if enabled).",
-          table: {
-              defaultValue: { summary: undefined },
-              type: { summary: "(event: SyntheticEvent<HTMLElement>) => void" },
-          }
-      },
-      onInteraction: {
-          control: "none",
-          description: "Callback invoked in controlled mode when the popover open state would change due to user interaction.",
-          table: {
-              defaultValue: { summary: undefined },
-              type: { summary: "(nextOpenState: boolean, e?: React.SyntheticEvent<HTMLElement>) => void" },
-          }
-      },
-      children: {
-          control: "none",
-      },
-      content: {
-          control: "none",
-          description: "Elements for overlay content."
-      },
-      minimal: {
-          control: "boolean",
-          description: "Whether to apply minimal styling to this popover or tooltip. Minimal popovers do not have an arrow pointing to their target and use a subtler animation."
-      },
-      placement: {
-          control: "select",
-          options: PlacementOptions,
-          description: "The placement (relative to the target) at which the popover should appear. Mutually exclusive with `position` prop."
-      },
-      /*
-      position: {
-          control: "select",
-          options: {UNDEFINED: undefined, ...PopoverPosition},
-          description: "The position (relative to the target) at which the popover should appear. Mutually exclusive with `placement` prop."
-      },
-      */
-      usePortal: {
-          control: "boolean",
-          description: "Whether the popover should be rendered inside a Portal attached to `portalContainer` prop."
-      },
-      modifiers: {
-          control: "object",
-          description: "Popper modifier options, passed directly to internal Popper instance. See https://popper.js.org/docs/v2/modifiers/ for complete details.",
-          table: {
-              defaultValue: { summary: undefined },
-              type: { summary: "PopperModifiers" },
-          }
-      },
-      hasBackdrop: {
-          control: "boolean",
-          description: "Enables an invisible overlay beneath the popover that captures clicks and prevents interaction with the rest of the document until the popover is closed, only available with `PopoverInteractionKind.CLICK`."
-      },
-      rootBoundary: {
-          control: "select",
-          options: {UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document"},
-          description: "A root boundary element supplied to the `flip` and `preventOverflow` modifiers, shorthand for overriding Popper.js modifier options. See: https://popper.js.org/docs/v2/utils/detect-overflow/#rootboundary",
-          table: {
-              defaultValue: { summary: "viewport" },
-              type: { summary: "RootBoundary" },
-          }
-      },
-      positioningStrategy: {
-          control: "select",
-          options: {UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed"},
-          description: "Popper.js positioning strategy. See: https://popper.js.org/docs/v2/constructors/#strategy",
-          table: {
-              defaultValue: { summary: "absolute" },
-              type: { summary: "PositioningStrategy" },
-          }
-      },
-  },
-} as ComponentMeta<typeof ContextOverlay>;
+    title: "Components/ContextOverlay",
+    component: ContextOverlay,
+    argTypes: {
+        interactionKind: {
+            options: { UNDEFINED: undefined, ...PopoverInteractionKind },
+        },
+        placement: {
+            options: PopperPlacements,
+        },
+        rootBoundary: {
+            options: { UNDEFINED: undefined, VIEWPORT: "viewport", DOCUMENT: "document" },
+        },
+        positioningStrategy: {
+            options: { UNDEFINED: undefined, ABSOLUTE: "absolute", FIXED: "fixed" },
+        },
+    },
+} as Meta<typeof ContextOverlay>;
 
-const Template: ComponentStory<typeof ContextOverlay> = (args) => (
-    <ContextOverlay {...args} />
+const Template: StoryFn<typeof ContextOverlay> = (args) => (
+    <OverlaysProvider>
+        <ContextOverlay {...args} />
+    </OverlaysProvider>
 );
 
 export const Default = Template.bind({});
 Default.args = {
     children: <Button>Target</Button>,
     content: (
-        <HtmlContentBlock style={{maxWidth: "40em", padding: "0.5rem"}}>
+        <HtmlContentBlock style={{ maxWidth: "40em", padding: "0.5rem" }}>
             Overlay:
             <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
         </HtmlContentBlock>
     ),
-    //position: PopoverPosition.RIGHT,
     placement: "auto-start",
     usePortal: true,
     minimal: false,
     defaultIsOpen: false,
     modifiers: {
         flip: {
-            enabled: true
+            enabled: true,
         },
         preventOverflow: {
             enabled: true,
-        }
-    } as PopperModifiers,
+        },
+    } as PopperModifierOverrides,
     rootBoundary: "viewport",
     hasBackdrop: false,
-}
+};

package/src/components/ContextOverlay/ContextOverlay.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Popover2 as BlueprintPopover, Popover2Props as BlueprintPopoverProps } from "@blueprintjs/popover2";
+import { Popover as BlueprintPopover, PopoverProps as BlueprintPopoverProps } from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 

package/src/components/ContextOverlay/contextoverlay.scss

@@ -3,7 +3,7 @@ $pt-popover2-background-color: $white !default;
 $pt-dark-popover2-background-color: $dark-gray4 !default;
 */
 
-@import "~@blueprintjs/popover2/src/popover2";
+@import "~@blueprintjs/core/src/components/popover/popover";
 
 .#{$ns}-portal {
     z-index: $eccgui-zindex-overlays;
@@ -32,7 +32,7 @@ $pt-dark-popover2-background-color: $dark-gray4 !default;
 
 .#{$ns}-submenu.#{$ns}-popover > .#{$ns}-popover-content {
     // fix for submenu items in overlays/popovers
-    background-color: $pt-popover2-background-color;
+    background-color: $pt-popover-background-color;
 }
 
 .#{$ns}-overlay-start-focus-trap,

package/src/components/Depiction/stories/Depiction.stories.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { OverlaysProvider } from "@blueprintjs/core";
 import { LogoReact } from "@carbon/icons-react";
 import { Meta, StoryFn } from "@storybook/react";
 
@@ -74,7 +75,11 @@ export default {
     },
 } as Meta<typeof Depiction>;
 
-const TemplateFull: StoryFn<typeof Depiction> = (args) => <Depiction {...args} />;
+const TemplateFull: StoryFn<typeof Depiction> = (args) => (
+    <OverlaysProvider>
+        <Depiction {...args} />
+    </OverlaysProvider>
+);
 
 export const FullExample = TemplateFull.bind({});
 FullExample.args = {

package/src/components/Depiction/stories/test-16to9.tsx

@@ -3,42 +3,84 @@ import React from "react";
 export const Svg16to9 = () => {
     return (
         <svg
-           width="1920"
-           height="1080"
-           viewBox="0 0 1920 1080"
-           // preserveAspectRatio="xMidYMid slice"
-           version="1.1"
-           xmlns="http://www.w3.org/2000/svg"
+            width="1920"
+            height="1080"
+            viewBox="0 0 1920 1080"
+            // preserveAspectRatio="xMidYMid slice"
+            version="1.1"
+            xmlns="http://www.w3.org/2000/svg"
         >
-          <g>
-            <rect
-               style={{fill:"#ffeeaa", stroke:"none", strokeWidth:"10", strokeLinecap:"square", strokeLinejoin:"miter", strokeDasharray:"none"}}
-               width="1920"
-               height="1080"
-               x="0"
-               y="0" />
-            <rect
-               style={{"fill":"#fff6d5", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"square", strokeLinejoin:"miter", strokeDasharray:"none"}}
-               width="1810"
-               height="970"
-               x="55"
-               y="55" />
-            <path
-               style={{"fill":"none", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"butt", strokeLinejoin:"miter", strokeOpacity:"1", strokeDasharray:"none"}}
-               d="m 55,55 1810,970"
-            />
-            <path
-               style={{"fill":"none", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"butt", strokeLinejoin:"miter", strokeOpacity:"1", strokeDasharray:"none"}}
-               d="M 55,1025 1865,55"
-            />
-            <text
-               style={{fontStyle:"normal", fontVariant:"normal", fontWeight:"normal", fontStretch:"normal", fontSize:"133.333px", lineHeight:"1.25", fontFamily:"Roboto"}}
-               x="592.71484"
-               y="587.39581"
-            ><tspan
-                 x="592.71484"
-                 y="587.39581">1920 x 1080</tspan></text>
-          </g>
+            <g>
+                <rect
+                    style={{
+                        fill: "#ffeeaa",
+                        stroke: "none",
+                        strokeWidth: "10",
+                        strokeLinecap: "square",
+                        strokeLinejoin: "miter",
+                        strokeDasharray: "none",
+                    }}
+                    width="1920"
+                    height="1080"
+                    x="0"
+                    y="0"
+                />
+                <rect
+                    style={{
+                        fill: "#fff6d5",
+                        stroke: "#ffcc00",
+                        strokeWidth: "10",
+                        strokeLinecap: "square",
+                        strokeLinejoin: "miter",
+                        strokeDasharray: "none",
+                    }}
+                    width="1810"
+                    height="970"
+                    x="55"
+                    y="55"
+                />
+                <path
+                    style={{
+                        fill: "none",
+                        stroke: "#ffcc00",
+                        strokeWidth: "10",
+                        strokeLinecap: "butt",
+                        strokeLinejoin: "miter",
+                        strokeOpacity: "1",
+                        strokeDasharray: "none",
+                    }}
+                    d="m 55,55 1810,970"
+                />
+                <path
+                    style={{
+                        fill: "none",
+                        stroke: "#ffcc00",
+                        strokeWidth: "10",
+                        strokeLinecap: "butt",
+                        strokeLinejoin: "miter",
+                        strokeOpacity: "1",
+                        strokeDasharray: "none",
+                    }}
+                    d="M 55,1025 1865,55"
+                />
+                <text
+                    style={{
+                        fontStyle: "normal",
+                        fontVariant: "normal",
+                        fontWeight: "normal",
+                        fontStretch: "normal",
+                        fontSize: "133.333px",
+                        lineHeight: "1.25",
+                        fontFamily: "Roboto",
+                    }}
+                    x="592.71484"
+                    y="587.39581"
+                >
+                    <tspan x="592.71484" y="587.39581">
+                        1920 x 1080
+                    </tspan>
+                </text>
+            </g>
         </svg>
     );
-}
+};

package/src/components/Depiction/stories/test-9to16.tsx

@@ -3,46 +3,90 @@ import React from "react";
 export const Svg9to16 = () => {
     return (
         <svg
-           width="1080"
-           height="1920"
-           viewBox="0 0 1080 1920"
-           version="1.1"
-           id="svg5"
-           xmlns="http://www.w3.org/2000/svg"
+            width="1080"
+            height="1920"
+            viewBox="0 0 1080 1920"
+            version="1.1"
+            id="svg5"
+            xmlns="http://www.w3.org/2000/svg"
         >
-          <g transform="translate(-420,420)">
-            <rect
-               style={{fill:"#ffeeaa", stroke:"none", strokeWidth:"10", strokeLinecap:"square", strokeLinejoin:"miter", strokeDasharray:"none"}}
-               width="1920"
-               height="1080"
-               x="-420"
-               y="-1500"
-               transform="rotate(90)" />
-            <rect
-               style={{"fill":"#fff6d5", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"square", strokeLinejoin:"miter", strokeDasharray:"none"}}
-               id="rect234"
-               width="1810"
-               height="970"
-               x="-365"
-               y="-1445"
-               transform="rotate(90)" />
-            <path
-               style={{"fill":"none", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"butt", strokeLinejoin:"miter", strokeOpacity:"1", strokeDasharray:"none"}}
-               d="M 1445,-365 475,1445"
-               id="path1013" />
-            <path
-               style={{"fill":"none", "stroke":"#ffcc00", strokeWidth:"10", strokeLinecap:"butt", strokeLinejoin:"miter", strokeOpacity:"1", strokeDasharray:"none"}}
-               d="m 475,-365 970,1810"
-               id="path1015" />
-            <text
-               style={{fontStyle:"normal", fontVariant:"normal", fontWeight:"normal", fontStretch:"normal", fontSize:"133.333px", lineHeight:"1.25", fontFamily:"Roboto"}}
-               x="592.71576"
-               y="587.39569"
-               id="text1797"><tspan
-                 id="tspan1795"
-                 x="592.71576"
-                 y="587.39569">1080 x 1920</tspan></text>
-          </g>
+            <g transform="translate(-420,420)">
+                <rect
+                    style={{
+                        fill: "#ffeeaa",
+                        stroke: "none",
+                        strokeWidth: "10",
+                        strokeLinecap: "square",
+                        strokeLinejoin: "miter",
+                        strokeDasharray: "none",
+                    }}
+                    width="1920"
+                    height="1080"
+                    x="-420"
+                    y="-1500"
+                    transform="rotate(90)"
+                />
+                <rect
+                    style={{
+                        fill: "#fff6d5",
+                        stroke: "#ffcc00",
+                        strokeWidth: "10",
+                        strokeLinecap: "square",
+                        strokeLinejoin: "miter",
+                        strokeDasharray: "none",
+                    }}
+                    id="rect234"
+                    width="1810"
+                    height="970"
+                    x="-365"
+                    y="-1445"
+                    transform="rotate(90)"
+                />
+                <path
+                    style={{
+                        fill: "none",
+                        stroke: "#ffcc00",
+                        strokeWidth: "10",
+                        strokeLinecap: "butt",
+                        strokeLinejoin: "miter",
+                        strokeOpacity: "1",
+                        strokeDasharray: "none",
+                    }}
+                    d="M 1445,-365 475,1445"
+                    id="path1013"
+                />
+                <path
+                    style={{
+                        fill: "none",
+                        stroke: "#ffcc00",
+                        strokeWidth: "10",
+                        strokeLinecap: "butt",
+                        strokeLinejoin: "miter",
+                        strokeOpacity: "1",
+                        strokeDasharray: "none",
+                    }}
+                    d="m 475,-365 970,1810"
+                    id="path1015"
+                />
+                <text
+                    style={{
+                        fontStyle: "normal",
+                        fontVariant: "normal",
+                        fontWeight: "normal",
+                        fontStretch: "normal",
+                        fontSize: "133.333px",
+                        lineHeight: "1.25",
+                        fontFamily: "Roboto",
+                    }}
+                    x="592.71576"
+                    y="587.39569"
+                    id="text1797"
+                >
+                    <tspan id="tspan1795" x="592.71576" y="587.39569">
+                        1080 x 1920
+                    </tspan>
+                </text>
+            </g>
         </svg>
     );
-}
+};