@eccenca/gui-elements 24.0.0 → 24.1.0-featureimprovepublishingprocesscmem6356.0

package/src/components/Menu/menu.scss

@@ -48,6 +48,7 @@ $menu-background-color: transparent !default;
 @import "~@blueprintjs/core/src/components/menu/menu";
 
 .#{$ns}-menu {
+    min-width: auto;
     padding: 0;
 
     .#{$ns}-popover2-content > & {

package/src/components/MultiSelect/MultiSelect.tsx

@@ -323,6 +323,7 @@ function MultiSelect<T>({
      * @param query
      */
     const onQueryChange = (query: string) => {
+        setFilteredItems([]);
         if (query.length && query !== requestState.current.query) {
             requestState.current.query = query;
             if (requestState.current.timeoutId) {

package/src/components/OverviewItem/OverviewItem.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import Card, { CardProps } from "../Card/Card";
 
 export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
@@ -11,6 +12,17 @@ export interface OverviewItemProps extends React.HTMLAttributes<HTMLDivElement>
      * Add a bit white space around the element.
      */
     hasSpacing?: boolean;
+    /**
+     * Uses a `Card` element to wrap the `OverviewItem` inside.
+     * It is always used with `isOnlyLayout` set to `true`.
+     * Should be used together with `hasSpacing`.
+     */
+    hasCardWrapper?: boolean;
+    /**
+     * Forwarding basic `Card` properties to the wrapper element.
+     * Only used if `hasCardWrapper` is set to `true`.
+     */
+    cardProps?: Omit<CardProps, "children" | "isOnlyLayout" | "fullHeight" | "whitespaceAmount" | "compact">;
 }
 
 /**
@@ -22,6 +34,8 @@ export const OverviewItem = ({
     className = "",
     densityHigh = false,
     hasSpacing = false,
+    hasCardWrapper = false,
+    cardProps,
     ...otherProps
 }: OverviewItemProps) => {
     const item = (
@@ -38,6 +52,7 @@ export const OverviewItem = ({
         </div>
     );
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const accessibilityParameters: { [key: string]: any } = Object.create(null);
     if (typeof otherProps.onClick !== "undefined" || typeof otherProps.onKeyDown !== "undefined") {
         accessibilityParameters["tabIndex"] = 0;
@@ -46,7 +61,15 @@ export const OverviewItem = ({
         accessibilityParameters["role"] = "button";
     }
 
-    return React.cloneElement(item, accessibilityParameters);
+    const element = React.cloneElement(item, accessibilityParameters);
+
+    return hasCardWrapper ? (
+        <Card isOnlyLayout {...cardProps}>
+            {element}
+        </Card>
+    ) : (
+        element
+    );
 };
 
 export default OverviewItem;

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/overviewitem.scss

@@ -193,7 +193,10 @@ $eccgui-size-overviewitem-line-typo-large-lineheight: $eccgui-size-typo-subtitle
 
     .#{$eccgui}-overviewitem__item:hover &,
     .#{$eccgui}-overviewitem__item:focus &,
-    .#{$eccgui}-overviewitem__item:active & {
+    .#{$eccgui}-overviewitem__item:active &,
+    &:focus-within,
+    &:has(.#{$ns}-active),
+    &:has(.#{$ns}-popover-open) {
         display: flex;
     }
 }

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/Select/Select.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, Depiction, MenuItem, Select } from "../../index";
@@ -30,7 +31,7 @@ Default.args = {
             return { label: item };
         }),
     itemRenderer: (item, props) => {
-        return <MenuItem text={item.label} title={item.label} />;
+        return <MenuItem text={item.label} title={item.label} {...props} />;
     },
     fill: true,
 };
@@ -53,6 +54,7 @@ ControlledTarget.args = {
     ...Default.args,
     fill: false,
     children: <Button text="Controlled select target" intent="primary" />,
+    onActiveItemChange: fn(),
 };
 
 /**
@@ -70,4 +72,5 @@ ClearanceOption.args = {
     onClearanceHandler: () => {
         alert("Reset now.");
     },
+    onActiveItemChange: fn(),
 };

package/src/components/Switch/Switch.tsx

@@ -1,26 +1,45 @@
-import React, { memo, SyntheticEvent } from "react";
-import { Switch as BlueprintSwitch, SwitchProps as BlueprintSwitchProps } from "@blueprintjs/core";
+import React, { memo } from "react";
+import {
+    Classes as BlueprintClasses,
+    Switch as BlueprintSwitch,
+    SwitchProps as BlueprintSwitchProps,
+} from "@blueprintjs/core";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { Label } from "../Label/Label";
 
 export interface SwitchProps extends Omit<BlueprintSwitchProps, "onChange"> {
     /**
      * Event handler for changed state.
      */
-    onChange?: (value: boolean) => any;
+    onChange?: (value: boolean) => void;
     /**
      * class names
      */
     className?: string;
 }
 
-export const Switch = ({ onChange, className, ...otherProps }: SwitchProps) => {
-    const handleChange = (e: SyntheticEvent<HTMLInputElement>) => {
-        const checked = !!(e as any).target?.checked;
-        onChange && onChange(checked);
+export const Switch = ({ onChange, className, label, ...otherProps }: SwitchProps) => {
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (onChange) {
+            onChange(!!e.target?.checked);
+        }
     };
 
-    return <BlueprintSwitch className={`${eccgui}-switch ${className}`} {...otherProps} onChange={handleChange} />;
+    return (
+        <BlueprintSwitch
+            className={`${eccgui}-switch ${className ?? ""} ${
+                label && !otherProps.labelElement ? BlueprintClasses.INLINE : ""
+            }`}
+            labelElement={
+                label ? (
+                    <Label text={label} isLayoutForElement="span" disabled={otherProps.disabled} inline />
+                ) : undefined
+            }
+            {...otherProps}
+            onChange={handleChange}
+        />
+    );
 };
 
 export default memo(Switch);

package/src/components/Tag/TagList.tsx

@@ -10,11 +10,11 @@ function TagList({ children, className = "", label = "", ...otherProps }: TagLis
     const tagList = (
         <ul className={`${eccgui}-tag__list` + (className && !label ? " " + className : "")} {...otherProps}>
             {React.Children.map(children, (child, i) => {
-                return (
+                return child ? (
                     <li className={`${eccgui}-tag__list-item`} key={"tagitem_" + i}>
                         {child}
                     </li>
-                );
+                ) : null;
             })}
         </ul>
     );

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/stories/TextField.stories.tsx

@@ -31,6 +31,7 @@ Default.args = {
     fullWidth: false,
     placeholder: "placeholder text",
     readOnly: false,
+    disabled: false,
 };
 
 /** Text field with default value that contains a zero width/invisible character.
@@ -46,7 +47,7 @@ const invisibleCharacterWarningProps: TextFieldProps = {
                 const codePointsString = [...Array.from(codePoints)]
                     .map((n) => {
                         const info = characters.invisibleZeroWidthCharacters.codePointMap.get(n);
-                        return info.fullLabel;
+                        return info?.fullLabel;
                     })
                     .join(", ");
                 alert("Invisible character detected in input string. Code points: " + codePointsString);

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/components/Typography/OverflowText.tsx

@@ -1,13 +1,34 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { TestableComponent } from "../../components/interfaces";
 
-export interface OverflowTextProps {
-    ellipsis?: "reverse" | "none";
+export interface OverflowTextProps extends React.HTMLAttributes<HTMLElement>, TestableComponent {
+    /**
+     * How is ellipsis used to cut text overflows.
+     * Use `reverse`to use the ellipis on text start and display the end of the text.
+     */
+    ellipsis?: "add" | "reverse" | "none";
+    /**
+     * Display component as inline element.
+     */
     inline?: boolean;
+    /**
+     * Using text overflow on all children elements.
+     */
     passDown?: boolean;
+    /**
+     * Additional CSS class name.
+     */
     className?: string;
+    /**
+     * HTML element that is used for the component.
+     */
     useHtmlElement?: "p" | "div" | "span";
+    /**
+     * Used for all other necessary properties.
+     * @deprecated (v25) we will allow only basic HTML element properties and testing IDs
+     */
     [key: string]: any;
 }
 
@@ -15,7 +36,7 @@ export interface OverflowTextProps {
 export const OverflowText = ({
     className = "",
     children,
-    ellipsis,
+    ellipsis = "add",
     inline = false,
     passDown = false,
     useHtmlElement,

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

@@ -0,0 +1,33 @@
+import React from "react";
+import LoremIpsum, { loremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { OverflowText } from "../../../index";
+
+const config = {
+    title: "Components/Typography/OverflowText",
+    component: OverflowText,
+    argTypes: {
+        children: {
+            control: "select",
+            options: ["simple text", "2 paragraphs"],
+            mapping: {
+                "simple text": loremIpsum({
+                    p: 1,
+                    avgSentencesPerParagraph: 4,
+                    random: false,
+                }),
+                "2 paragraphs": <LoremIpsum p={2} avgSentencesPerParagraph={4} random={false} />
+            },
+            description: "Content of the element.",
+        },
+    },
+} as Meta<typeof OverflowText>;
+export default config;
+
+const Template: StoryFn<typeof OverflowText> = (args) => <OverflowText {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    children: config?.argTypes?.children?.mapping ? config.argTypes.children.mapping["simple text"] : "Overflow text",
+};

package/src/components/index.scss

@@ -41,3 +41,4 @@
 @import "./Badge/badge";
 @import "./PropertyValuePair/propertyvalue";
 @import "./MultiSuggestField/multisuggestfield";
+@import "./ContentGroup/contentgroup";

package/src/components/index.ts

@@ -48,5 +48,6 @@ export * from "./Tooltip/Tooltip";
 export * from "./Tree/Tree";
 export * from "./Typography";
 export * from "./Workspace";
+export * from "./ContentGroup/ContentGroup";
 
 export * from "./interfaces";

package/src/extensions/codemirror/CodeMirror.stories.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 
+import { helpersArgTypes } from "../../../.storybook/helpers";
+
 import { CodeEditor } from "./CodeMirror";
 
 export default {
@@ -11,14 +13,30 @@ export default {
         onChange: {
             action: "value changed",
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
     },
 } as Meta<typeof CodeEditor>;
 
-const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} />;
+let forcedUpdateKey = 0; // @see https://github.com/storybookjs/storybook/issues/13375#issuecomment-1291011856
+const TemplateFull: StoryFn<typeof CodeEditor> = (args) => <CodeEditor {...args} key={++forcedUpdateKey} />;
 
 export const BasicExample = TemplateFull.bind({});
 BasicExample.args = {
     name: "codeinput",
     mode: "markdown",
     defaultValue: "**test me**",
+    useToolbar: true,
+    disabled: false,
+    readOnly: true,
+};
+
+export const LinterExample = TemplateFull.bind({});
+LinterExample.args = {
+    name: "codeinput",
+    defaultValue: "**test me**",
+    mode: "javascript",
+    useLinting: true,
+    autoFocus: true,
 };