@eccenca/gui-elements 25.2.0 → 26.0.0-rc.0

package/src/components/TextField/TextArea.tsx

@@ -32,12 +32,17 @@ export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
      * Element to render on right side of text area. Should be not too large.
      * This will update right padding on the text area.
      */
-    rightElement?: JSX.Element;
+    rightElement?: React.JSX.Element;
     /**
      * Add HTML properties to the wrapper element.
      * The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.
      */
     wrapperDivProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    /**
+     * Whether the text area should automatically grow vertically to accommodate content.
+     * @deprecated (v27) use the `autoResize` property instead.
+     */
+    growVertically?: boolean;
 }
 
 export const TextArea = ({
@@ -81,7 +86,7 @@ export const TextArea = ({
                     } else {
                         leftIconElement.style.setProperty(
                             "top",
-                            `${((textAreaElementRect.height ?? 0) - (leftIconElementRect.height ?? 0)) * 0.5}px`
+                            `${((textAreaElementRect.height ?? 0) - (leftIconElementRect.height ?? 0)) * 0.5}px`,
                         );
                     }
                     leftIconElement.style.setProperty("left", textAreaStyle.paddingLeft);
@@ -89,7 +94,7 @@ export const TextArea = ({
                         "padding-left",
                         `calc(${leftIconElementRect.width ? 2 : 1} * ${textAreaStyle.paddingLeft} + ${
                             leftIconElementRect.width ?? 0
-                        }px)`
+                        }px)`,
                     );
                     leftIconElement.addEventListener("click", () => {
                         textAreaElement.focus();
@@ -98,7 +103,7 @@ export const TextArea = ({
 
                 if (rightElement && wrapperElement) {
                     const rightElementElement = wrapperElement.querySelector(
-                        `.${eccgui}-textarea__options`
+                        `.${eccgui}-textarea__options`,
                     ) as HTMLElement;
                     const rightElementElementRect = rightElementElement.getBoundingClientRect();
                     if (
@@ -109,7 +114,7 @@ export const TextArea = ({
                     } else {
                         rightElementElement.style.setProperty(
                             "top",
-                            `${((textAreaElementRect.height ?? 0) - (rightElementElementRect.height ?? 0)) * 0.5}px`
+                            `${((textAreaElementRect.height ?? 0) - (rightElementElementRect.height ?? 0)) * 0.5}px`,
                         );
                     }
                     rightElementElement.style.setProperty("right", textAreaStyle.paddingRight);
@@ -117,12 +122,12 @@ export const TextArea = ({
                         "padding-right",
                         `calc(${rightElementElementRect.width ? 2 : 1} * ${textAreaStyle.paddingRight} + ${
                             rightElementElementRect.width ?? 0
-                        }px)`
+                        }px)`,
                     );
                 }
             }
         },
-        [leftIcon, rightElement]
+        [leftIcon, rightElement],
     );
 
     let iconIntent;

package/src/components/TextField/TextField.tsx

@@ -15,8 +15,9 @@ import Icon from "../Icon/Icon";
 
 import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
-export interface TextFieldProps
-    extends Partial<Omit<BlueprintInputGroupProps, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
+export interface TextFieldProps extends Partial<
+    Omit<BlueprintInputGroupProps, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps
+> {
     /**
      * Intent state of the text field.
      */
@@ -71,7 +72,7 @@ export const TextField = ({
             }
             return otherBlueprintInputGroupProps.onKeyDown?.(event);
         },
-        [otherBlueprintInputGroupProps.onKeyDown, escapeToBlur]
+        [otherBlueprintInputGroupProps.onKeyDown, escapeToBlur],
     );
 
     let iconIntent;

package/src/components/TextField/stories/TextArea.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 
-import { Button, IconButton, TextArea } from "./../../../../index";
+import { Button, IconButton, TextArea } from "./../../../components";
 type TextAreaType = typeof TextArea;
 
 export default {

package/src/components/TextField/stories/TextField.stories.tsx

@@ -3,9 +3,7 @@ import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../../.storybook/helpers";
 import characters from "../../../common/utils/characters";
-import { TextFieldProps } from "../TextField";
-
-import { TextField } from "./../../../../index";
+import { TextField, TextFieldProps } from "../TextField";
 
 export default {
     title: "Forms/TextField",

package/src/components/TextField/useTextValidation.ts

@@ -65,7 +65,7 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
                 }
             }
         },
-        [detectionRegex, segmenter, emojiRegex]
+        [detectionRegex, segmenter, emojiRegex],
     );
     // Checks if the value contains any problematic characters with a small delay.
     const checkValue = React.useCallback(
@@ -80,7 +80,7 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
             }
             callback?.(state.current.detectedCodePoints);
         },
-        [callback, clearState, detectIssues]
+        [callback, clearState, detectIssues],
     );
     const scheduleCheck = React.useCallback(
         (value: string | ReadonlyArray<string> | number) => {
@@ -95,7 +95,7 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
                 }
             }, callbackDelay ?? 500);
         },
-        [checkValue, clearState, callbackDelay]
+        [checkValue, clearState, callbackDelay],
     );
     // Do check via onChange handler
     const wrappedOnChangeHandler: ChangeEventHandler<T> = React.useCallback(
@@ -108,7 +108,7 @@ export const useTextValidation = <T>({ value, onChange, invisibleCharacterWarnin
             }
             onChange?.(event);
         },
-        [clearState, onChange, scheduleCheck]
+        [clearState, onChange, scheduleCheck],
     );
     // No callback, return
     if (!callback) {

package/src/components/TextReducer/TextReducer.stories.tsx

@@ -2,7 +2,10 @@ import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { HtmlContentBlock, Markdown, TextReducer } from "../../../index";
+import { Markdown } from "../../cmem/markdown/Markdown";
+import { HtmlContentBlock } from "../Typography";
+
+import { TextReducer } from "./TextReducer";
 
 export default {
     title: "Components/TextReducer",

package/src/components/TextReducer/TextReducer.test.tsx

@@ -27,7 +27,7 @@ describe("TextReducer", () => {
         const { queryByText } = render(
             <TextReducer decodeHtmlEntities>
                 <Markdown>&</Markdown>&amp foo&ampbar
-            </TextReducer>
+            </TextReducer>,
         );
         textMustExist(queryByText, "& &amp foo&ampbar");
         textMustNotExist(queryByText, "& & foo&ampbar");
@@ -36,7 +36,7 @@ describe("TextReducer", () => {
         const { queryByText } = render(
             <TextReducer decodeHtmlEntities decodeHtmlEntitiesOptions={{ strict: false }}>
                 <Markdown>&</Markdown>&amp foo&ampbar
-            </TextReducer>
+            </TextReducer>,
         );
         textMustNotExist(queryByText, "& &amp foo&ampbar");
         textMustExist(queryByText, "& & foo&ampbar");

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { OverlaysProvider } from "@blueprintjs/core";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { Tooltip } from "../../index";
 

package/src/components/Tooltip/Tooltip.test.tsx

@@ -20,19 +20,19 @@ describe("Tooltip", () => {
     });
     it("should render no placeholder automatically for html tooltip", () => {
         const { container } = render(
-            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} />
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} />,
         );
         checkForPlaceholderClass(container, 0);
     });
     it("should render placeholder when `usePlaceholder===true`", () => {
         const { container } = render(
-            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} usePlaceholder={true} />
+            <Tooltip {...TooltipStory.args} content={<div>this is a simple text tooltip</div>} usePlaceholder={true} />,
         );
         checkForPlaceholderClass(container, 1);
     });
     it("should render no placeholder when `usePlaceholder===false`", () => {
         const { container } = render(
-            <Tooltip {...TooltipStory.args} content="this is a simple text tooltip" usePlaceholder={false} />
+            <Tooltip {...TooltipStory.args} content="this is a simple text tooltip" usePlaceholder={false} />,
         );
         checkForPlaceholderClass(container, 0);
     });
@@ -68,7 +68,7 @@ describe("Tooltip", () => {
             <>
                 <button>previous element</button>
                 <Tooltip {...TooltipStory.args} usePlaceholder={false} />
-            </>
+            </>,
         );
         const user = userEvent.setup();
         await user.tab(); // focuses "previous element"
@@ -84,7 +84,7 @@ describe("Tooltip", () => {
                 <Tooltip {...TooltipStory.args} usePlaceholder={true}>
                     <button>tooltip target</button>
                 </Tooltip>
-            </>
+            </>,
         );
         const user = userEvent.setup();
         await user.tab(); // focuses "previous element"

package/src/components/Tooltip/Tooltip.tsx

@@ -77,7 +77,7 @@ export const Tooltip = ({
             otherTooltipProps.renderTarget === undefined &&
             swapDelayTime > 0 &&
             hoverOpenDelay > swapDelayTime &&
-            (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false))
+            (usePlaceholder === true || (typeof content === "string" && usePlaceholder !== false)),
     );
 
     const targetClassName =
@@ -127,12 +127,12 @@ export const Tooltip = ({
         return () => {};
     }, [!!placeholderRef.current]);
 
-    const refocus = React.useCallback((node) => {
+    const refocus = React.useCallback((node: any) => {
         if (eventMemory.current && node) {
             // we do not have a `targetRef` here, so we need to workaround it
             // const target = node.targetRef.current.children[0];
             const target = document.body.querySelector(
-                `[data-postplaceholder=id${eventMemory.current}${searchId.current}]`
+                `[data-postplaceholder=id${eventMemory.current}${searchId.current}]`,
             )?.children[0];
             if (target) {
                 switch (eventMemory.current) {
@@ -147,7 +147,7 @@ export const Tooltip = ({
                             {
                                 capture: true,
                                 once: true,
-                            }
+                            },
                         );
                         break;
                 }
@@ -173,7 +173,7 @@ export const Tooltip = ({
                 className:
                     childTarget.props.className ?? "" + (otherTooltipProps.fill ? ` ${BlueprintClasses.FILL}` : ""),
                 tabIndex: 0,
-            })
+            }),
         );
     };
 

package/src/components/Typography/stories/OverflowText.stories.tsx

@@ -17,7 +17,7 @@ const config = {
                     avgSentencesPerParagraph: 4,
                     random: false,
                 }),
-                "2 paragraphs": <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+                "2 paragraphs": <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />,
             },
             description: "Content of the element.",
         },

package/src/components/Typography/typography.scss

@@ -74,12 +74,14 @@ mark {
     line-height: $eccgui-size-typo-text-lineheight;
 }
 
-.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small {
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small,
+.#{$eccgui}-typography--small {
     font-size: $eccgui-size-typo-caption;
     line-height: $eccgui-size-typo-caption-lineheight;
 }
 
-.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large {
+.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large,
+.#{$eccgui}-typography--large {
     font-size: $eccgui-size-typo-subtitle;
     line-height: $eccgui-size-typo-subtitle-lineheight;
 }

package/src/components/VisualTour/VisualTour.tsx

@@ -70,10 +70,6 @@ export const VisualTour = ({
     usableStepTarget = false,
     isOpen = false,
 }: VisualTourProps) => {
-    if (isOpen === false) {
-        return null;
-    }
-
     const [currentStepIndex, setCurrentStepIndex] = React.useState<number>(0);
     const [currentStepComponent, setCurrentStepComponent] = React.useState<React.JSX.Element | null>(null);
 
@@ -170,7 +166,7 @@ export const VisualTour = ({
                         titleOption={titleOptions}
                         actionButtons={actionButtons}
                         step={step}
-                    />
+                    />,
                 );
             } else {
                 setCurrentStepComponent(
@@ -179,7 +175,7 @@ export const VisualTour = ({
                         actionButtons={actionButtons}
                         step={step}
                         onClose={closeTour}
-                    />
+                    />,
                 );
             }
         };
@@ -234,7 +230,11 @@ export const VisualTour = ({
         };
     }, [currentStepIndex, usableStepTarget]);
 
-    return currentStepComponent;
+    if (isOpen === false) {
+        return null;
+    } else {
+        return currentStepComponent;
+    }
 };
 
 interface StepModalProps {
@@ -272,7 +272,7 @@ const StepModal = ({ step, titleOption, onClose, actionButtons }: StepModalProps
             preventSimpleClosing={true}
             onClose={onClose}
             actions={actionButtons}
-            size={step.size === "medium" ? "regular" : step.size ?? "regular"}
+            size={step.size === "medium" ? "regular" : (step.size ?? "regular")}
             overlayClassName={`${eccgui}-visual-tour__dialog`}
         >
             <StepContent step={step} />
@@ -317,7 +317,7 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
             }
             return;
         },
-        [highlightedElement]
+        [highlightedElement],
     );
 
     // map to only tooltip size because the `DecoupledOverlay` only supports them
@@ -354,7 +354,7 @@ const StepPopover = ({ highlightedElement, step, titleOption, actionButtons }: S
                 </Card>
             </DecoupledOverlay>
         </div>,
-        document.body
+        document.body,
     );
 };
 

package/src/components/index.ts

@@ -25,6 +25,7 @@ export * from "./Link/Link";
 export * from "./List/List";
 export * from "./Menu";
 export * from "./MultiSuggestField";
+export * from "./NotAvailable/NotAvailable";
 export * from "./Notification";
 export * from "./OverviewItem";
 export * from "./Pagination/Pagination";

package/src/configuration/_variables.scss

@@ -18,20 +18,18 @@
 
 // -- Configuration stack of colors --------------------------------------------
 
-// @deprecated (v26) those variable cannot be set by other SCSS, the will only set here (no `default!` anymore)
-
-$eccgui-color-primary: eccgui-color-var("identity", "brand", "900") !default;
-$eccgui-color-primary-contrast: eccgui-color-var("identity", "brand", "100") !default;
-$eccgui-color-accent: eccgui-color-var("identity", "accent", "900") !default;
-$eccgui-color-accent-contrast: eccgui-color-var("identity", "accent", "100") !default;
-$eccgui-color-success-text: eccgui-color-var("semantic", "success", "900") !default;
-$eccgui-color-success-background: eccgui-color-var("semantic", "success", "100") !default;
-$eccgui-color-info-text: eccgui-color-var("semantic", "info", "900") !default;
-$eccgui-color-info-background: eccgui-color-var("semantic", "info", "100") !default;
-$eccgui-color-warning-text: eccgui-color-var("semantic", "warning", "900") !default;
-$eccgui-color-warning-background: eccgui-color-var("semantic", "warning", "100") !default;
-$eccgui-color-danger-text: eccgui-color-var("semantic", "danger", "900") !default;
-$eccgui-color-danger-background: eccgui-color-var("semantic", "danger", "100") !default;
+$eccgui-color-primary: eccgui-color-var("identity", "brand", "900");
+$eccgui-color-primary-contrast: eccgui-color-var("identity", "brand", "100");
+$eccgui-color-accent: eccgui-color-var("identity", "accent", "900");
+$eccgui-color-accent-contrast: eccgui-color-var("identity", "accent", "100");
+$eccgui-color-success-text: eccgui-color-var("semantic", "success", "900");
+$eccgui-color-success-background: eccgui-color-var("semantic", "success", "100");
+$eccgui-color-info-text: eccgui-color-var("semantic", "info", "900");
+$eccgui-color-info-background: eccgui-color-var("semantic", "info", "100");
+$eccgui-color-warning-text: eccgui-color-var("semantic", "warning", "900");
+$eccgui-color-warning-background: eccgui-color-var("semantic", "warning", "100");
+$eccgui-color-danger-text: eccgui-color-var("semantic", "danger", "900");
+$eccgui-color-danger-background: eccgui-color-var("semantic", "danger", "100");
 $eccgui-color-applicationheader-text: eccgui-color-var("identity", "text", "900") !default;
 $eccgui-color-applicationheader-background: eccgui-color-var("identity", "background", "500") !default;
 $eccgui-color-workspace-text: eccgui-color-var("identity", "text", "700") !default;
@@ -45,7 +43,9 @@ $eccgui-font-family-sans: "Roboto", sans-serif !default;
 $eccgui-font-family-sans-condensed: "Roboto Condensed", sans-serif !default;
 $eccgui-font-family-monospace: "Roboto Mono", monospace !default;
 $eccgui-font-family-monospace-condensed: "Roboto Mono", monospace !default;
-$eccgui-font-family-cursive: #{$eccgui-font-family-serif-condensed}, cursive !default;
+$eccgui-font-family-cursive:
+    #{$eccgui-font-family-serif-condensed},
+    cursive !default;
 $eccgui-font-family-fantasy: fantasy !default;
 $eccgui-font-family-default: $eccgui-font-family-sans !default;
 $eccgui-size-typo-base: 14px !default; // size including absolute unit, preferable px