@eccenca/gui-elements 24.1.0-rc.5 → 24.1.0

package/src/components/OverviewItem/OverviewItemList.tsx

@@ -5,6 +5,7 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListElement> {
     /**
      * Displays the element using reduced height and less white space inside.
+     * @deprecated (v25) use property directly on `OverviewItem` children.
      */
     densityHigh?: boolean;
     /**
@@ -23,8 +24,8 @@ export interface OverviewItemListProps extends React.HTMLAttributes<HTMLOListEle
 }
 
 /**
- * This element can include all basic information and actions to give an overview about the item.
- * Mainly used in items list or to create basic widgets.
+ * This component is a listing container for multiple `OverviewItem` elements.
+ * It should only contains `OverviewItem` children but it does not check and control that condition.
  */
 export const OverviewItemList = ({
     children,

package/src/components/OverviewItem/stories/OverviewItem.stories.tsx

@@ -27,7 +27,7 @@ export default {
     },
     argTypes: {
         children: {
-            control: "none",
+            control: false,
             description: "Elements used as depiction, text and interactive elements of an overview-item.",
         },
     },
@@ -47,6 +47,9 @@ ItemExample.args = {
         <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions key="hiddenactions" />,
         <OverviewItemActions children={ActionsExample.args.children[1]} key="actions" />,
     ],
+    densityHigh: false,
+    hasSpacing: false,
+    hasCardWrapper: false,
 };
 
 export const ItemWithDepictionElement = Template.bind({});
@@ -69,16 +72,7 @@ ItemWithDepictionElement.args = {
         <OverviewItemActions children={ActionsExample.args.children[0]} hiddenInteractions />,
         <OverviewItemActions children={ActionsExample.args.children[1]} />,
     ],
-};
-
-const TemplateCard: StoryFn<typeof OverviewItem> = (args) => (
-    <Card isOnlyLayout>
-        <OverviewItem {...args}></OverviewItem>
-    </Card>
-);
-
-export const ItemInCard = TemplateCard.bind({});
-ItemInCard.args = {
-    ...ItemExample.args,
+    densityHigh: false,
     hasSpacing: true,
+    hasCardWrapper: true,
 };

package/src/components/TextField/SearchField.tsx

@@ -35,10 +35,38 @@ export const SearchField = ({
     className = "",
     emptySearchInputMessage = "Enter search term",
     onClearanceHandler,
-    onClearanceText = "Clear input",
+    onClearanceText = "Clear current search term",
+    onChange,
     leftIcon = <Icon name="operation-search" />,
+    rightElement,
     ...otherProps
 }: SearchFieldProps) => {
+    const [value, setValue] = React.useState<string>("");
+
+    const clearanceButton =
+        onClearanceHandler && value ? (
+            <IconButton
+                data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
+                name="operation-clear"
+                text={onClearanceText}
+                onClick={() => {
+                    setValue("");
+                    onClearanceHandler();
+                }}
+            />
+        ) : undefined;
+
+    const changeHandlerProcess = (e: React.ChangeEvent<HTMLInputElement>) => {
+        setValue(e.target.value);
+        if (onChange) {
+            onChange(e);
+        }
+    };
+
+    React.useEffect(() => {
+        setValue(otherProps.value ?? otherProps.defaultValue ?? "");
+    }, [otherProps.value, otherProps.defaultValue]);
+
     return (
         <TextField
             className={
@@ -50,16 +78,16 @@ export const SearchField = ({
             placeholder={emptySearchInputMessage}
             aria-label={emptySearchInputMessage}
             rightElement={
-                onClearanceHandler && otherProps.value ? (
-                    <IconButton
-                        data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
-                        name="operation-clear"
-                        text={onClearanceText ? onClearanceText : "Clear current search term"}
-                        onClick={onClearanceHandler}
-                    />
-                ) : undefined
+                (clearanceButton || rightElement) && (
+                    <>
+                        {rightElement}
+                        {clearanceButton}
+                    </>
+                )
             }
+            onChange={changeHandlerProcess}
             {...otherProps}
+            value={value}
             type={"search"}
             leftIcon={leftIcon}
             round={true}

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

@@ -1,12 +1,20 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../../.storybook/helpers";
+
 import SearchField from "./../SearchField";
 
 export default {
     title: "Components/SearchField",
     component: SearchField,
     argTypes: {
+        leftIcon: {
+            ...helpersArgTypes.exampleIcon,
+        },
+        rightElement: {
+            ...helpersArgTypes.exampleIcon,
+        },
         hasStatePrimary: { table: { disable: true } },
         hasStateSuccess: { table: { disable: true } },
         hasStateWarning: { table: { disable: true } },
@@ -23,7 +31,7 @@ Default.args = {
     onClearanceText: "",
 };
 
-export const SearchFieldWithClearanceIcon: StoryFn<typeof SearchField> = (args) => {
+const SearchFieldWithClearanceIconTemplate: StoryFn<typeof SearchField> = (args) => {
     const [query, setQuery] = React.useState<string>("");
     return (
         <SearchField
@@ -34,3 +42,9 @@ export const SearchFieldWithClearanceIcon: StoryFn<typeof SearchField> = (args)
         />
     );
 };
+
+export const SearchFieldWithClearanceIcon = SearchFieldWithClearanceIconTemplate.bind({});
+SearchFieldWithClearanceIcon.args = {
+    onClearanceHandler: null,
+    onClearanceText: "Clear field",
+};

package/src/components/TextField/textfield.scss

@@ -4,7 +4,8 @@
 // own vars
 $eccgui-size-textfield-height-small: $eccgui-size-block-whitespace * 2 !default;
 $eccgui-size-textfield-height-regular: $eccgui-size-textfield-height-small * $eccgui-size-type-levelratio !default;
-$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio * $eccgui-size-type-levelratio !default;
+$eccgui-size-textfield-height-large: $eccgui-size-textfield-height-regular * $eccgui-size-type-levelratio *
+    $eccgui-size-type-levelratio !default;
 $eccgui-size-textfield-padding-horizontal-regular: $eccgui-size-inline-whitespace !default;
 $eccgui-size-textfield-padding-horizontal-small: $eccgui-size-inline-whitespace * 0.5 !default;
 $eccgui-typo-textfield-fontweight: $eccgui-font-weight-regular !default;
@@ -50,10 +51,23 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
         height: 100%;
         max-height: $input-button-height-large;
 
-        & > .#{eccgui}-icon {
+        & > * {
+            vertical-align: middle;
+        }
+
+        & > .#{eccgui}-icon,
+        & > .#{eccgui}-tooltip__wrapper {
             display: inline-flex;
+            align-items: center;
             height: 100%;
-            margin: 0 0.5 * $eccgui-size-block-whitespace;
+
+            &:first-child {
+                margin-left: 0.5 * $eccgui-size-block-whitespace;
+            }
+
+            &:last-child {
+                margin-right: 0.5 * $eccgui-size-block-whitespace;
+            }
         }
     }
 }

package/src/extensions/codemirror/CodeMirror.tsx

@@ -297,7 +297,8 @@ export const CodeEditor = ({
             EditorView?.updateListener.of((v: ViewUpdate) => {
                 if (disabled) return;
 
-                if (onChange) {
+                if (onChange && v.docChanged) {
+                    // Only fire if the text has actually been changed
                     onChange(v.state.doc.toString());
                 }
 

package/src/extensions/react-flow/nodes/NodeContent.tsx

@@ -390,15 +390,19 @@ export function NodeContent<CONTENT_PROPS = any>({
         flowVersionCheck === "legacy" ? ([] as NodeContentHandleLegacyProps[]) : ([] as NodeContentHandleNextProps[]);
 
     const saveOriginalSize = () => {
+        const currentClassNames = nodeContentRef.current.classList;
+        if (currentClassNames.contains("was-resized") && !width && !height) {
+            currentClassNames.remove("was-resized");
+        }
         originalSize.current.width = nodeContentRef.current.offsetWidth as number;
         originalSize.current.height = nodeContentRef.current.offsetHeight as number;
     }
 
     React.useEffect(() => {
-        if(nodeContentRef.current && !(originalSize.current.width || originalSize.current.height)) {
+        if(nodeContentRef.current && (!(originalSize.current.width || originalSize.current.height) || !(width || height))) {
             saveOriginalSize();
         }
-    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height)])
+    }, [!!nodeContentRef.current, !(originalSize.current.width || originalSize.current.height), !(width || height)])
 
     // Update width and height when node dimensions parameters has changed
     React.useEffect(() => {
@@ -406,15 +410,11 @@ export function NodeContent<CONTENT_PROPS = any>({
         const updateHeight = nodeDimensions?.height ? validateHeight(nodeDimensions?.height) : undefined;
         setWidth(updateWidth);
         setHeight(updateHeight);
-        if (!nodeDimensions?.width && !nodeDimensions?.height) {
-            // provoke new measuring if no dimensions are set
-            saveOriginalSize();
-        }
     }, [nodeDimensions]);
 
     const isResizingActive = React.useCallback((): boolean => {
         const currentClassNames = nodeContentRef.current.classList;
-        return resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") &&
+        return resizeDirections.right === currentClassNames.contains("is-resizable-horizontal") ||
             resizeDirections.bottom === currentClassNames.contains("is-resizable-vertical");
     }, [])
 
@@ -439,17 +439,17 @@ export function NodeContent<CONTENT_PROPS = any>({
 
         if (isResizable && !resizingActive) {
             if (currentClassNames.contains("is-resizable-horizontal")) {
-                nodeContentRef.current.classList.remove("is-resizable-horizontal");
+                currentClassNames.remove("is-resizable-horizontal");
             }
             if (currentClassNames.contains("is-resizable-vertical")) {
-                nodeContentRef.current.classList.remove("is-resizable-vertical");
+                currentClassNames.remove("is-resizable-vertical");
             }
-
+            
             if (resizeDirections.right) {
-                nodeContentRef.current.classList.add("is-resizable-horizontal");
+                currentClassNames.add("is-resizable-horizontal");
             }
             if (resizeDirections.bottom) {
-                nodeContentRef.current.classList.add("is-resizable-vertical");
+                currentClassNames.add("is-resizable-vertical");
             }
         }
     }); // need to be done everytime a property is changed and the element is re-rendered, otherwise the resizing class is lost
@@ -524,8 +524,8 @@ export function NodeContent<CONTENT_PROPS = any>({
             ? {
                   width,
                   height,
-                  maxWidth: resizeMaxDimensions?.width ?? undefined,
-                  maxHeight: resizeMaxDimensions?.height ?? undefined,
+                  maxWidth: resizeDirections.right ? resizeMaxDimensions?.width ?? undefined : undefined,
+                  maxHeight: resizeDirections.bottom ? resizeMaxDimensions?.height ?? undefined : undefined,
               }
             : {};
 
@@ -705,6 +705,10 @@ export function NodeContent<CONTENT_PROPS = any>({
                         const nextHeight = resizeDirections.bottom
                             ? (height ?? originalSize.current.height ?? 0) + d.height
                             : undefined;
+                        if (nextWidth || nextHeight) {
+                            const currentClassNames = nodeContentRef.current.classList;
+                            currentClassNames.add("was-resized");
+                        }
                         if (nextWidth) {
                             nodeContentRef.current.style.width = `${nextWidth}px`;
                         }

package/src/extensions/react-flow/nodes/_nodes.scss

@@ -50,7 +50,7 @@
         box-shadow: 0 0 0 6 * $reactflow-node-border-width rgba($reactflow-edge-stroke-color-selected, 0.05);
     }
 
-    &.is-resizable-vertical {
+    &.was-resized.is-resizable-vertical {
         max-height: unset;
     }
 }

package/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx

@@ -103,11 +103,12 @@ export default {
         },
         intent: {
             control: "select",
-            options: { "Not set": undefined, ...Definitions },
+            options: [ undefined, ...Object.values(Definitions) ],
         },
         highlightColor: {
             control: "select",
-            options: {
+            options: [ "Not set", "Default", "Alternate", "Default + alternate", "Custom (red)", "Default + Custom (red)", "Custom (green) + alternate", "Custom (purple) + custom (yellow)"],
+            mapping: {
                 "Not set": undefined,
                 Default: "default",
                 Alternate: "alternate",
@@ -118,8 +119,8 @@ export default {
                 "Custom (purple) + custom (yellow)": ["purple", "yellow"],
             },
         },
-        content: { control: "none" },
-        footerContent: { control: "none" },
+        content: { control: false },
+        footerContent: { control: false },
         isConnectable: { table: { disable: true } },
         targetPosition: { table: { disable: true } },
         sourcePosition: { table: { disable: true } },
@@ -128,17 +129,52 @@ export default {
     },
 } as Meta<typeof NodeContent>;
 
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
 const NodeContentExample = (args: any) => {
     const [reactflowInstance, setReactflowInstance] = useState(null);
     const [elements, setElements] = useState([] as Elements);
 
+    const defaultElement = {
+        id: "example-1",
+        type: "default",
+        data: args,
+        position: { x: 50, y: 50 },
+    };
+
     useEffect(() => {
+        const sizeReset = {}
+        if (args.resizeMaxDimensions && args.resizeDirections) {
+            sizeReset["onNodeResize"] = (dimensions) => {
+                // eslint-disable-next-line no-console
+                console.log("call onNodeResize method")
+                if (args.onNodeResize) {
+                    args.onNodeResize(dimensions);
+                }
+                if (dimensions?.width || dimensions?.height) {
+                    sizeReset["menuButtons"] = <IconButton name="item-reset" onClick={() => {
+                        // eslint-disable-next-line no-console
+                        console.log("reset size");
+                        setElements([
+                            {
+                                ...defaultElement,
+                                data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: {} }},
+                            },
+                        ] as Elements);
+
+                    }}/>;
+                }
+                setElements([
+                    {
+                        ...defaultElement,
+                        data: {...defaultElement.data, ...sizeReset, ...{ nodeDimensions: dimensions }},
+                    },
+                ] as Elements);
+            }
+        }
         setElements([
             {
-                id: "example-1",
-                type: "default",
-                data: args,
-                position: { x: 50, y: 50 },
+                ...defaultElement,
+                data: {...defaultElement.data, ...sizeReset},
             },
         ] as Elements);
     }, [args]);
@@ -165,7 +201,7 @@ const NodeContentExample = (args: any) => {
     );
 };
 
-const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/ />;
+const Template: StoryFn<typeof NodeContent> = (args) => <NodeContentExample {...args} /*some comment*/  key={++forcedUpdateKey} />;
 
 export const Default = Template.bind({});
 Default.args = {