@eccenca/gui-elements 23.0.0-rc.7 → 23.1.0-rc.1

package/src/components/Tag/Tag.stories.tsx

@@ -10,6 +10,9 @@ export default {
         icon: {
             ...helpersArgTypes.exampleIcon,
         },
+        intent: {
+            ...helpersArgTypes.exampleIntent,
+        },
         backgroundColor: {
             control: "color",
         },
@@ -24,10 +27,12 @@ export default {
 } as ComponentMeta<typeof Tag>;
 
 const Template: ComponentStory<typeof Tag> = (args) => (
-  <Tag {...args}>Tag label</Tag>
+  <Tag {...args} />
 );
 
 export const Default = Template.bind({});
 Default.args = {
-  small: false,
+    children: "Tag label",
+    onClick: undefined,
+    onRemove: undefined,
 };

package/src/components/Tag/Tag.tsx

@@ -4,20 +4,26 @@ import {
     TagProps as BlueprintTagProps
 } from "@blueprintjs/core";
 import Color from "color";
+import Icon, { IconProps } from "../Icon/Icon";
+import { TestIconProps } from "../Icon/TestIcon";
+import { ValidIconName } from "../Icon/canonicalIconNames";
+import {
+    IntentTypes,
+    intentClassName
+} from "../../common/Intent";
 import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface TagProps extends Omit<
+export interface TagProps extends Omit<
     BlueprintTagProps,
     // currently not supported
     "active" |
     "fill" |
+    "icon" |
+    "intent" |
     "large" |
     "multiline" |
-    "intent" |
     "rightIcon"
-    // Removed round to have chip-like elements, since they are currently missing
-    // "round"
 > {
     // own properties
 
@@ -42,10 +48,19 @@ interface TagProps extends Omit<
      * display tag in a large version
      */
     large?: boolean;
+    /**
+     * Meaning of the tag.
+     */
+    intent?: IntentTypes;
+    /**
+     * Icon displayed left from the tag label.
+     */
+    icon?: ValidIconName | React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
 
     // deprecated
 
     /**
+     * @deprecated
      * **deprecated**, use `minimal=false` plus `emphasis="stronger"`
      */
     emphasized?: never;
@@ -54,6 +69,8 @@ interface TagProps extends Omit<
 function Tag({
     children,
     className = '',
+    intent,
+    icon,
     emphasis = "normal",
     minimal = true,
     small = false,
@@ -79,16 +96,19 @@ function Tag({
             }
         }
     }
+    const leftIcon = (!!icon && typeof icon === "string") ? <Icon name={icon} /> : icon;
     return (
         <BlueprintTag
             {...otherProps}
             className={
                 `${eccgui}-tag__item ${eccgui}-tag--${emphasis}emphasis` +
+                (!!intent ? ` ${intentClassName(intent)}` : '') +
                 (small ? ` ${eccgui}-tag--small` : '') +
                 (large ? ` ${eccgui}-tag--large` : '') +
                 (className ? ' ' + className : '')
             }
             minimal={minimal}
+            icon={!!leftIcon ? React.cloneElement(leftIcon, { small: !large}) : undefined}
         >
             {children}
         </BlueprintTag>

package/src/components/Tag/tag.scss

@@ -15,7 +15,7 @@ $tag-padding: $tag-padding-top * 2; // !default;
 $tag-margin: 0; // !default;
 $tag-height-small: $eccgui-size-typo-tag; // !default;
 $tag-line-height-small: $tag-height-small; // !default;
-$tag-padding-small: $tag-padding * 0.5; // !default;
+$tag-padding-small: $tag-padding-top * 0.5; // !default;
 $tag-height-large: $eccgui-size-typo-tag-large * $eccgui-size-typo-tag-large-lineheight; // !default;
 $tag-line-height-large: $eccgui-size-typo-tag-large; // !default;
 $tag-padding-large: ($tag-height-large - $tag-line-height-large); // !default;
@@ -30,11 +30,22 @@ $tag-round-adjustment: 0px !default;
     flex-grow: 0;
     max-height: calc(#{$tag-height} - 2px);
     min-height: calc(#{$tag-height} - 2px);
+    min-width: calc(#{$tag-height} - 2px);
+    padding: 0 $tag-padding-top;
 
     &.#{$ns}-round {
         border-radius: $tag-height * 0.5;
     }
 
+    .#{$ns}-fill {
+        padding: $tag-padding-top 0;
+    }
+
+    .#{$ns}-tag-remove {
+        margin: 0 !important;
+        padding: 0;
+    }
+
     .#{$eccgui}-overviewitem__description > & {
         max-width: 39%;
     }
@@ -44,11 +55,15 @@ $tag-round-adjustment: 0px !default;
         min-height: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
         min-width: calc(#{$tag-height-small} + #{$tag-padding-small} - 2px);
         line-height: calc(#{$tag-height-small} - 2px);
-        padding: $tag-padding-small * 0.5 $tag-padding-small;
+        padding: 0 $tag-padding-small;
 
         &.#{$ns}-round {
             border-radius: $tag-height-small * 0.5;
         }
+
+        .#{$ns}-fill {
+            padding: $tag-padding-small 0;
+        }
     }
 
     &.#{$eccgui}-tag--large {
@@ -57,7 +72,6 @@ $tag-round-adjustment: 0px !default;
         min-width: calc(#{$tag-height-large} + #{$tag-padding-large} - 2px);
         line-height: calc(#{$tag-height-large} - 2px);
         font-size: $eccgui-size-typo-tag-large;
-        padding: $tag-padding-large * 0.5 $tag-padding-large;
 
         &.#{$ns}-round {
             border-radius: $tag-height-large * 0.5;
@@ -102,10 +116,12 @@ $tag-round-adjustment: 0px !default;
 }
 
 .#{$ns}-tag-remove {
+    color: inherit !important;
     .#{$ns}-icon,
     svg {
         height: $eccgui-size-typo-tag;
         width: $eccgui-size-typo-tag;
+        fill: currentColor;
     }
 }
 
@@ -158,5 +174,70 @@ $tag-round-adjustment: 0px !default;
                 background-color: rgba(mix(rgba($tag-default-color, 0), #fff), 0.5);
             }
         }
+
+        &.#{$eccgui}-intent--primary {
+            border-color: $eccgui-color-primary;
+            background-color: $eccgui-color-primary;
+            color: $eccgui-color-primary-contrast;
+        }
+        &.#{$eccgui}-intent--accent {
+            border-color: $eccgui-color-accent;
+            background-color: $eccgui-color-accent;
+            color: $eccgui-color-accent-contrast;
+        }
+        &.#{$eccgui}-intent--info {
+            border-color: $eccgui-color-info-text;
+            background-color: $eccgui-color-info-text;
+            color: $eccgui-color-info-background;
+        }
+        &.#{$eccgui}-intent--success {
+            border-color: $eccgui-color-success-text;
+            background-color: $eccgui-color-success-text;
+            color: $eccgui-color-success-background;
+        }
+        &.#{$eccgui}-intent--warning {
+            border-color: $eccgui-color-warning-text;
+            background-color: $eccgui-color-warning-text;
+            color: $eccgui-color-warning-background;
+        }
+        &.#{$eccgui}-intent--danger {
+            border-color: $eccgui-color-danger-text;
+            background-color: $eccgui-color-danger-text;
+            color: $eccgui-color-danger-background;
+        }
+
+        &.#{$ns}-minimal,
+        &.#{$ns}-minimal.#{$ns}-interactive {
+            &.#{$eccgui}-intent--primary {
+                border-color: $eccgui-color-primary;
+                color: $eccgui-color-primary;
+                background-color: $eccgui-color-primary-contrast;
+            }
+            &.#{$eccgui}-intent--accent {
+                border-color: $eccgui-color-accent;
+                color: $eccgui-color-accent;
+                background-color: $eccgui-color-accent-contrast;
+            }
+            &.#{$eccgui}-intent--info {
+                border-color: $eccgui-color-info-text;
+                color: $eccgui-color-info-text;
+                background-color: $eccgui-color-info-background;
+            }
+            &.#{$eccgui}-intent--success {
+                border-color: $eccgui-color-success-text;
+                color: $eccgui-color-success-text;
+                background-color: $eccgui-color-success-background;
+            }
+            &.#{$eccgui}-intent--warning {
+                border-color: $eccgui-color-warning-text;
+                color: $eccgui-color-warning-text;
+                background-color: $eccgui-color-warning-background;
+            }
+            &.#{$eccgui}-intent--danger {
+                border-color: $eccgui-color-danger-text;
+                color: $eccgui-color-danger-text;
+                background-color: $eccgui-color-danger-background;
+            }
+        }
     }
 }

package/src/components/TagInput/taginput.scss

@@ -1 +1,7 @@
 @import "~@blueprintjs/core/src/components/tag-input/tag-input";
+
+.#{$ns}-tag-input {
+    .#{$eccgui}-spinner--position-inline {
+        height: $pt-button-height-small;
+    }
+}

package/src/components/TextField/TextArea.tsx

@@ -5,8 +5,9 @@ import {
   TextAreaProps as BlueprintTextAreaProps,
 } from "@blueprintjs/core";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
-interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
+export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
   /**
    * when set to true the input takes a blue border color
    */
@@ -23,6 +24,10 @@ interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
    * when set to true the input takes a red border color
    */
   hasStateDanger?: boolean;
+    /**
+     * If set, allows to be informed of invisible, hard to spot characters in the string value.
+     */
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps
 }
 
 function TextArea({
@@ -32,6 +37,7 @@ function TextArea({
   hasStateWarning = false,
   hasStateDanger = false,
   rows = 5,
+  invisibleCharacterWarning,
   ...otherProps
 }: TextAreaProps) {
   let intent;
@@ -52,6 +58,8 @@ function TextArea({
       break;
   }
 
+  const maybeWrappedOnChange = useTextValidation({...otherProps, invisibleCharacterWarning})
+
   return (
     <BlueprintTextArea
       className={`${eccgui}-textarea ` + className}
@@ -59,6 +67,7 @@ function TextArea({
       rows={rows ? rows : undefined}
       {...otherProps}
       dir={"auto"}
+      onChange={maybeWrappedOnChange}
     />
   );
 }

package/src/components/TextField/TextField.tsx

@@ -10,6 +10,7 @@ import {
 import Icon from "../Icon/Icon";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import {ValidIconName} from "../Icon/canonicalIconNames";
+import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
 export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" | "leftIcon"> & HTMLInputProps> {
     /**
@@ -36,6 +37,10 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps, "intent" |
      * Left aligned icon, can be a canonical icon name or an `Icon` element.
      */
     leftIcon?: ValidIconName | MaybeElement;
+    /**
+     * If set, allows to be informed of invisible, hard to spot characters in the string value.
+     */
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps
 }
 
 /**
@@ -49,6 +54,7 @@ function TextField({
   hasStateDanger = false,
   fullWidth = true,
   leftIcon,
+  invisibleCharacterWarning,
   ...otherProps
 }: TextFieldProps) {
   let intent;
@@ -69,6 +75,8 @@ function TextField({
       break;
   }
 
+  const maybeWrappedOnChange = useTextValidation({...otherProps, invisibleCharacterWarning})
+
   if ((otherProps.readOnly || otherProps.disabled) && !!otherProps.value && !otherProps.title) {
       otherProps["title"] = otherProps.value;
   }
@@ -93,6 +101,7 @@ function TextField({
         ) : undefined
       }
       dir={"auto"}
+      onChange={maybeWrappedOnChange}
     />
   );
 }

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

@@ -35,6 +35,6 @@ export const SearchFieldWithClearanceIcon: ComponentStory<typeof SearchField> =
       value={query}
       onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
       onClearanceHandler={() => setQuery("")}
-    ></SearchField>
+    />
   );
 };

package/src/components/TextField/textfield.scss

@@ -41,6 +41,18 @@ $input-button-height-small: math.div($eccgui-size-textfield-height-small, $eccgu
     &.#{$ns}-fill {
         display: block;
     }
+
+    .#{$ns}-input-action {
+        // right element need to be adjusted for cases when there are no button with the same hight like the input
+        height: 100%;
+        max-height: $input-button-height-large;
+
+        & > .#{eccgui}-icon {
+            display: inline-flex;
+            height: 100%;
+            margin: 0 0.5 * $eccgui-size-block-whitespace;
+        }
+    }
 }
 
 // enhancements

package/src/components/TextField/useTextValidation.ts

@@ -0,0 +1,103 @@
+import React, {ChangeEventHandler} from "react";
+import chars from "../../common/utils/characters"
+
+export interface InvisibleCharacterWarningProps {
+    /**
+     * If set, the function is called after every value change what invisible characters have been detected.
+     */
+    callback: (detectedCodePoints: Set<number>) => any
+    /**
+     * The delay in milliseconds after which an input string should be checked. Only the most recent value will be checked.
+     * A higher value will reduce the probability that the typing stalls.
+     *
+     * Default: 500
+     */
+    callbackDelay?: number
+}
+
+interface Props<T = Element> {
+    /** Forwarded TextField props */
+    value?: string | ReadonlyArray<string> | number | undefined;
+    readOnly?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ChangeEventHandler<T>
+    /**
+     * If set, allows to be informed of invisible, hard to spot characters in the string value.
+     */
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps
+}
+
+/** Validates the string value for invisible characters. */
+export const useTextValidation = <T>({value, onChange, invisibleCharacterWarning}: Props<T>) => {
+    const callback = invisibleCharacterWarning?.callback
+    const callbackDelay = invisibleCharacterWarning?.callbackDelay
+    const state = React.useRef<{
+        checkedValue?: string | ReadonlyArray<string> | number,
+        timeout?: number,
+        detectedCodePoints: Set<number>
+    }>({detectedCodePoints: new Set()})
+    const clearState = React.useCallback(() => {
+        state.current.timeout && clearTimeout(state.current.timeout)
+        state.current.checkedValue = undefined
+        state.current.detectedCodePoints = new Set()
+    }, [])
+    const detectionRegex = React.useMemo(() => chars.invisibleZeroWidthCharacters.createRegex(), [])
+    const detectIssues = React.useCallback((value: string): void => {
+        detectionRegex.lastIndex = 0
+        let matchArray = detectionRegex.exec(value)
+        while(matchArray) {
+            const codePoint = matchArray[0].codePointAt(0)
+            if(codePoint) {
+                state.current.detectedCodePoints.add(codePoint)
+            }
+            matchArray = detectionRegex.exec(value)
+        }
+    }, [detectionRegex])
+    // Checks if the value contains any problematic characters with a small delay.
+    const checkValue = React.useCallback((value: string | ReadonlyArray<string> | number) => {
+        state.current.detectedCodePoints = new Set()
+        if(typeof value === "number") {
+            clearState()
+        } else if(typeof value === "string") {
+            detectIssues(value)
+        } else {
+            value.forEach((arrayValue) => detectIssues(arrayValue))
+        }
+        callback?.(state.current.detectedCodePoints)
+    }, [callback, clearState, detectIssues])
+    const scheduleCheck = React.useCallback((value: string | ReadonlyArray<string> | number) => {
+        if(state.current.checkedValue === value) {
+            return
+        }
+        state.current.checkedValue = value
+        state.current.timeout = window.setTimeout(() => {
+            if(state.current.checkedValue === value) {
+                checkValue(value)
+                clearState()
+            }
+        }, callbackDelay ?? 500)
+    }, [checkValue, clearState, callbackDelay])
+    // Do check via onChange handler
+    const wrappedOnChangeHandler: ChangeEventHandler<T> = React.useCallback((event) => {
+        const {value} = event.target as any
+        if(value != null && typeof value === "string") {
+            scheduleCheck(value)
+        } else {
+            clearState()
+        }
+        onChange?.(event)
+    }, [clearState, onChange, scheduleCheck])
+    // No callback, return
+    if(!callback) {
+        return onChange
+    }
+    if(value == null && onChange == null) {
+        return onChange
+    }
+    if(value != null) {
+        scheduleCheck(value)
+        return onChange
+    } else {
+        return wrappedOnChangeHandler
+    }
+}

package/src/components/Tooltip/tooltip.scss

@@ -16,7 +16,7 @@ $tooltip2-padding-horizontal: $eccgui-size-block-whitespace * 0.5; // !default;
     font-size: $eccgui-size-typo-tooltip;
     line-height: $eccgui-size-typo-tooltip-lineheight;
     white-space: normal;
-    word-wrap: break-word;
+    overflow-wrap: break-word;
 }
 
 .#{$eccgui}-tooltip--small {

package/src/components/Tree/Tree.stories.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { Tree, TreeNodeInfo, Tag, OverflowText, Icon } from "./../../index";
+import { LogoReact } from "@carbon/icons-react";
+import { Tree, TreeNodeInfo, Tag, OverflowText, Icon, TestIcon } from "./../../index";
 import { TreeNodeShadow as TreeNode } from "./Tree";
 
 export default {
@@ -52,6 +53,11 @@ Default.args = {
                     label: "Tree item 1d with icon",
                     icon: <Icon name="item-info" />
                 },
+                {
+                    id: 5,
+                    label: "Tree item 1e with test icon",
+                    icon: <TestIcon tryout={LogoReact} />
+                },
             ]
         },
         {

package/src/components/Tree/Tree.tsx

@@ -6,6 +6,7 @@ import {
     TreeNodeInfo as BlueprintTreeNodeInfo,
 } from "@blueprintjs/core";
 import { IconProps } from "./../Icon/Icon";
+import { TestIconProps } from "./../Icon/TestIcon";
 
 /* This is basically a tunnel to the Blueprint elements but we change a view thigs regarding the icons */
 
@@ -19,7 +20,7 @@ export interface TreeNodeInfo<T = {}> extends Omit<BlueprintTreeNodeInfo<T>, "ch
     /**
      * `<Icon />` element to render next to the node's label.
      */
-    icon?: React.ReactElement<IconProps>;
+    icon?: React.ReactElement<IconProps> | React.ReactElement<TestIconProps>;
 }
 
 //export const TreeNode = BlueprintTreeNode;

package/src/components/Typography/Highlighter.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 
-interface IHighlighterProps {
+export interface HighlighterProps {
     label?: string;
     searchValue?: string;
 }
@@ -10,7 +10,7 @@ interface IHighlighterProps {
  * @param label       The string to highlight.
  * @param searchValue The mutli-word search query from which single words should be highlighted in the label.
  */
-function Highlighter({ label, searchValue }: IHighlighterProps) {
+function Highlighter({ label, searchValue }: HighlighterProps) {
     return <>{getSearchHighlight(label, searchValue)}</>;
 }
 

package/src/components/Typography/OverflowText.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-interface IProps {
+export interface OverflowTextProps {
     ellipsis?: "reverse" | "none"
     inline?: boolean
     passDown?: boolean
@@ -19,7 +19,7 @@ function OverflowText({
     passDown = false,
     useHtmlElement,
     ...otherProps
-}: IProps) {
+}: OverflowTextProps) {
     const defaultHtmlElement = inline ? "span" : "div";
     const overflowtextElement = useHtmlElement
         ? React.createElement(useHtmlElement)

package/src/components/Typography/WhiteSpaceContainer.tsx

@@ -1,19 +1,66 @@
 import React from "react";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import * as TypographyClassNames from "./classnames";
 
+type WhiteSpaceSizes = "tiny" | "small" | "regular" | "large" | "xlarge";
+
+export interface WhiteSpaceContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Insert line breaks within an otherwise unbreakable string to prevent text from overflowing the container.
+     */
+    linebreakForced?: boolean;
+    /**
+     * Size of top margin around the container.
+     */
+    marginTop?: WhiteSpaceSizes;
+    /**
+     * Size of right margin around the container.
+     */
+    marginRight?: WhiteSpaceSizes;
+    /**
+     * Size of bottom margin around the container.
+     */
+    marginBottom?: WhiteSpaceSizes;
+    /**
+     * Size of left margin around the container.
+     */
+    marginLeft?: WhiteSpaceSizes;
+    /**
+     * Size of top padding inside the container.
+     */
+    paddingTop?: WhiteSpaceSizes;
+    /**
+     * Size of right padding inside the container.
+     */
+    paddingRight?: WhiteSpaceSizes;
+    /**
+     * Size of bottom padding inside the container.
+     */
+    paddingBottom?: WhiteSpaceSizes;
+    /**
+     * Size of left padding inside the container.
+     */
+    paddingLeft?: WhiteSpaceSizes;
+}
+
+/**
+ * Simple container to add whitespace inside and around of it without adding style attributes directly.
+ * This way the added whitespace keeps visually connected to the other whitespaces used in the application.
+ */
 function WhiteSpaceContainer({
-    className = "",
+    className,
     children,
-    marginTop = "", // tiny, small, regular, large, xlarge
-    marginRight = "",
-    marginBottom = "",
-    marginLeft = "",
-    paddingTop = "", // tiny, small, regular, large, xlarge
-    paddingRight = "",
-    paddingBottom = "",
-    paddingLeft = "",
-    ...otherProps
-}: any) {
+    marginTop,
+    marginRight,
+    marginBottom,
+    marginLeft,
+    paddingTop,
+    paddingRight,
+    paddingBottom,
+    paddingLeft,
+    linebreakForced = false,
+    ...otherDivProps
+}: WhiteSpaceContainerProps) {
 
     const elementClassName = `${eccgui}-typography__whitespace`;
 
@@ -21,17 +68,18 @@ function WhiteSpaceContainer({
         <div
             className={
                 elementClassName +
-                (className ? " " + className : "") +
-                (marginTop ? ` ${elementClassName}-margintop-${marginTop}` : "") +
-                (marginRight ? ` ${elementClassName}-marginright-${marginRight}` : "") +
-                (marginBottom ? ` ${elementClassName}-marginbottom-${marginBottom}` : "") +
-                (marginLeft ? ` ${elementClassName}-marginleft-${marginLeft}` : "") +
-                (paddingTop ? ` ${elementClassName}-paddingtop-${paddingTop}` : "") +
-                (paddingRight ? ` ${elementClassName}-paddingright-${paddingRight}` : "") +
-                (paddingBottom ? ` ${elementClassName}-paddingbottom-${paddingBottom}` : "") +
-                (paddingLeft ? ` ${elementClassName}-paddingleft-${paddingLeft}` : "")
+                (!!className ? " " + className : "") +
+                (!!marginTop ? ` ${elementClassName}-margintop-${marginTop}` : "") +
+                (!!marginRight ? ` ${elementClassName}-marginright-${marginRight}` : "") +
+                (!!marginBottom ? ` ${elementClassName}-marginbottom-${marginBottom}` : "") +
+                (!!marginLeft ? ` ${elementClassName}-marginleft-${marginLeft}` : "") +
+                (!!paddingTop ? ` ${elementClassName}-paddingtop-${paddingTop}` : "") +
+                (!!paddingRight ? ` ${elementClassName}-paddingright-${paddingRight}` : "") +
+                (!!paddingBottom ? ` ${elementClassName}-paddingbottom-${paddingBottom}` : "") +
+                (!!paddingLeft ? ` ${elementClassName}-paddingleft-${paddingLeft}` : "") +
+                (linebreakForced ? " " + TypographyClassNames.FORCELINEBREAK : "")
             }
-            {...otherProps}
+            {...otherDivProps}
         >
             {children}
         </div>