@eccenca/gui-elements 24.0.0-rc.1 → 24.0.0-rc.3

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -2,12 +2,35 @@ import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-export type PropertyValueListProps = React.HTMLAttributes<HTMLDListElement>;
+import { PropertyValuePair } from "./PropertyValuePair";
+
+export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {
+    /**
+     * Only use one single column and put property label and value below each other.
+     * This property is forwardd to direct `PropertyValuePair` children.
+     */
+    singleColumn?: boolean;
+}
+
+export const PropertyValueList = ({
+    className = "",
+    children,
+    singleColumn = false,
+    ...otherProps
+}: PropertyValueListProps) => {
+    const alteredChildren = singleColumn
+        ? React.Children.map(children, (child) => {
+              const originalChild = child as React.ReactElement;
+              if (originalChild && originalChild.type && originalChild.type === PropertyValuePair) {
+                  return React.cloneElement(originalChild, { singleColumn: true });
+              }
+              return child;
+          })
+        : children;
 
-export const PropertyValueList = ({ className = "", children, ...otherProps }: PropertyValueListProps) => {
     return (
         <dl className={`${eccgui}-propertyvalue__list` + (className ? " " + className : "")} {...otherProps}>
-            {children}
+            {alteredChildren}
         </dl>
     );
 };

package/src/components/PropertyValuePair/PropertyValuePair.tsx

@@ -18,6 +18,10 @@ export interface PropertyValuePairProps extends React.HTMLAttributes<HTMLDivElem
      * Forward the `nowrap` option to it `PropertyName` and `PropertyValue` children.
      */
     nowrap?: boolean;
+    /**
+     * Only use one single column and put property label and value below each other.
+     */
+    singleColumn?: boolean;
 }
 
 export const PropertyValuePair = ({
@@ -26,6 +30,7 @@ export const PropertyValuePair = ({
     nowrap,
     hasSpacing = false,
     hasDivider = false,
+    singleColumn = false,
     ...otherProps
 }: PropertyValuePairProps) => {
     const alteredChildren = nowrap
@@ -44,7 +49,8 @@ export const PropertyValuePair = ({
                 `${eccgui}-propertyvalue__pair` +
                 (className ? " " + className : "") +
                 (hasSpacing ? ` ${eccgui}-propertyvalue__pair--hasspacing` : "") +
-                (hasDivider ? ` ${eccgui}-propertyvalue__pair--hasdivider` : "")
+                (hasDivider ? ` ${eccgui}-propertyvalue__pair--hasdivider` : "") +
+                (singleColumn ? ` ${eccgui}-propertyvalue__pair--singlecolumn` : "")
             }
             {...otherProps}
         >

package/src/components/PropertyValuePair/propertyvalue.scss

@@ -34,32 +34,41 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    min-height: $eccgui-size-textfield-height-regular;
+
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        min-height: $eccgui-size-textfield-height-regular;
+    }
 }
 
 .#{$eccgui}-propertyvalue__property {
-    float: left;
-    width: math.div(3, 16) * 100%;
-    overflow: hidden;
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        float: left;
+        width: math.div(3, 16) * 100%;
+        overflow: hidden;
 
-    & > div {
-        margin-right: $eccgui-size-block-whitespace;
+        & > div {
+            margin-right: $eccgui-size-block-whitespace;
+        }
     }
 }
 
 .#{$eccgui}-propertyvalue__property--small {
-    width: math.div(2, 16) * 100%;
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        width: math.div(2, 16) * 100%;
 
-    & + .#{$eccgui}-propertyvalue__value {
-        margin-left: math.div(2, 16) * 100%;
+        & + .#{$eccgui}-propertyvalue__value {
+            margin-left: math.div(2, 16) * 100%;
+        }
     }
 }
 
 .#{$eccgui}-propertyvalue__property--large {
-    width: math.div(5, 16) * 100%;
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        width: math.div(5, 16) * 100%;
 
-    & + .#{$eccgui}-propertyvalue__value {
-        margin-left: math.div(5, 16) * 100%;
+        & + .#{$eccgui}-propertyvalue__value {
+            margin-left: math.div(5, 16) * 100%;
+        }
     }
 }
 
@@ -70,7 +79,10 @@
 
 .#{$eccgui}-propertyvalue__value {
     box-sizing: content-box;
-    margin-left: math.div(3, 16) * 100%;
+
+    :not(.#{$eccgui}-propertyvalue__pair--singlecolumn) > & {
+        margin-left: math.div(3, 16) * 100%;
+    }
 
     &:not(:last-child) {
         .#{$eccgui}-propertyvalue__pair--hasdivider > & {

package/src/components/PropertyValuePair/stories/PropertyValueList.stories.tsx

@@ -14,7 +14,7 @@ export default {
     argTypes: {
         children: {
             control: "none",
-            description: "Shoukd be one or more `<PropertyValuePair />` elements.",
+            description: "Should be one or more `<PropertyValuePair />` elements.",
         },
     },
 } as Meta<typeof PropertyValueList>;

package/src/components/PropertyValuePair/stories/PropertyValuePair.stories.tsx

@@ -16,7 +16,7 @@ export default {
     argTypes: {
         children: {
             control: "none",
-            description: "Shoukd be `<PropertyName/>` and `<PropertyValue/>`, 1 of each.",
+            description: "Should be `<PropertyName/>` and `<PropertyValue/>`, 1 of each.",
         },
     },
 } as Meta<typeof PropertyValuePair>;

package/src/components/Select/Select.tsx

@@ -142,14 +142,4 @@ export function Select<T>({
     );
 }
 
-/** @deprecated: instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />` */
-function ofType<U>() {
-    console.warn(
-        "Usage of `ofType()` is deprecated! Instead of `const MySelect = Select.ofType<MyType>()` use directly `<Select<MyType> {...props} />`"
-    );
-    return (props: SelectProps<U>) => <Select<U> {...props} />;
-}
-
-Select.ofType = ofType;
-
 export default Select;

package/src/components/Spinner/Spinner.tsx

@@ -8,12 +8,9 @@ import {
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-// @deprecated use `SpinnerProps['position']`
-export type SpinnerPosition = "local" | "inline" | "global";
-// @deprecated use `SpinnerProps['size']`
-export type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
-// @deprecated use `SpinnerProps['stroke']`
-export type SpinnerStroke = "thin" | "medium" | "bold";
+type SpinnerPosition = "local" | "inline" | "global";
+type SpinnerSize = "tiny" | "small" | "medium" | "large" | "xlarge" | "inherit";
+type SpinnerStroke = "thin" | "medium" | "bold";
 type Intent = "inherit" | "primary" | "success" | "warning" | "danger";
 
 /** A spinner that is either displayed globally or locally. */

package/src/components/SuggestField/SuggestField.tsx

@@ -1,8 +1,13 @@
 import React from "react";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import { AutoCompleteField, AutoCompleteFieldProps } from "../AutocompleteField/AutoCompleteField";
+import AutoCompleteField, { AutoCompleteFieldProps } from "../AutocompleteField/AutoCompleteField";
 
+/**
+ * Parameters for the auto-complete field parameterized by T and U.
+ * @param T is the input data structure/type of the items that can be selected.
+ * @param UPDATE_VALUE The value type that will be pushed into the onChange callback.
+ */
 export type SuggestFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
 
 /**

package/src/components/Table/Table.tsx

@@ -4,8 +4,8 @@ import { DataTableSize as CarbonDataTableSize, Table as CarbonTable } from "@car
 // import { TableProps as CarbonTableProps } from "@carbon/react/es/components/DataTable/Table"; // TODO: check later again, currently interface is not exported
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-type TableRowHeightSizeDepracted = "compact" | "tall"; // @deprecated
-export type TableRowHeightSize = "small" | "medium" | "large" | TableRowHeightSizeDepracted;
+// @deprecated (v25) use `TableProps["size"]`
+export type TableRowHeightSize = "small" | "medium" | "large";
 
 // workaround to get type/interface
 type CarbonTableProps = React.ComponentProps<typeof CarbonTable>;
@@ -14,8 +14,6 @@ export interface TableProps
         React.TableHTMLAttributes<HTMLTableElement> {
     /**
      * Sets basically the height of a row inside the table.
-     * Please use only `small`, `medium` and `large`.
-     * `compact` and `tall` are deprecated.
      */
     size?: TableRowHeightSize;
     /**
@@ -42,9 +40,6 @@ export const tableRowHeightSizes: Record<string, CarbonDataTableSize> = {
     small: "xs",
     medium: "sm",
     large: "md",
-    // deprecated values
-    compact: "xs",
-    tall: "md",
 };
 
 export function Table({

package/src/components/Tag/Tag.tsx

@@ -47,14 +47,6 @@ export interface TagProps
      * 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;
 }
 
 function Tag({
@@ -76,6 +68,7 @@ function Tag({
         try {
             color = Color(backgroundColor);
         } catch (ex) {
+            // eslint-disable-next-line no-console
             console.warn("Received invalid background color for tag: " + backgroundColor);
         }
 

package/src/components/TextField/TextArea.tsx

@@ -15,26 +15,6 @@ import { ValidIconName } from "../Icon/canonicalIconNames";
 import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
 export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
-    /**
-     * when set to true the input takes a blue border color
-     * @deprecated Use the `intent` property.
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * when set to true the input takes a green border color
-     * @deprecated Use the `intent` property.
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * when set to true the input takes an orange border color
-     * @deprecated Use the `intent` property.
-     */
-    hasStateWarning?: boolean;
-    /**
-     * when set to true the input takes a red border color
-     * @deprecated Use the `intent` property.
-     */
-    hasStateDanger?: boolean;
     /**
      * Intent state of the text area.
      */
@@ -62,16 +42,13 @@ export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
 
 export const TextArea = ({
     className = "",
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     rows = 5,
     invisibleCharacterWarning,
     leftIcon,
     rightElement,
     wrapperDivProps,
-    ...otherProps
+    intent,
+    ...otherBlueprintTextAreaProps
 }: TextAreaProps) => {
     const textAreaCallback = React.useCallback(
         (textAreaElement: HTMLTextAreaElement) => {
@@ -148,26 +125,6 @@ export const TextArea = ({
         [leftIcon, rightElement]
     );
 
-    let deprecatedIntent;
-    switch (true) {
-        case hasStatePrimary:
-            deprecatedIntent = IntentDefinitions.PRIMARY;
-            break;
-        case hasStateSuccess:
-            deprecatedIntent = IntentDefinitions.SUCCESS;
-            break;
-        case hasStateWarning:
-            deprecatedIntent = IntentDefinitions.WARNING;
-            break;
-        case hasStateDanger:
-            deprecatedIntent = IntentDefinitions.DANGER;
-            break;
-        default:
-            break;
-    }
-
-    const { intent = deprecatedIntent, ...otherBlueprintTextAreaProps } = otherProps;
-
     let iconIntent;
     switch (intent) {
         case "edited":

package/src/components/TextField/TextField.tsx

@@ -3,7 +3,7 @@ import {
     Classes as BlueprintClassNames,
     HTMLInputProps,
     InputGroup as BlueprintInputGroup,
-    InputGroupProps2,
+    InputGroupProps as BlueprintInputGroupProps,
     Intent as BlueprintIntent,
     MaybeElement,
 } from "@blueprintjs/core";
@@ -16,27 +16,7 @@ import Icon from "../Icon/Icon";
 import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
 export interface TextFieldProps
-    extends Partial<Omit<InputGroupProps2, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
-    /**
-     * The input element is displayed with primary color scheme.
-     * @deprecated
-     */
-    hasStatePrimary?: boolean;
-    /**
-     * The input element is displayed with success (some type of green) color scheme.
-     * @deprecated
-     */
-    hasStateSuccess?: boolean;
-    /**
-     * The input element is displayed with warning (some type of orange) color scheme.
-     * @deprecated
-     */
-    hasStateWarning?: boolean;
-    /**
-     * The input element is displayed with danger (some type of red) color scheme.
-     * @deprecated
-     */
-    hasStateDanger?: boolean;
+    extends Partial<Omit<BlueprintInputGroupProps, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
     /**
      * Intent state of the text field.
      */
@@ -63,39 +43,19 @@ export interface TextFieldProps
  */
 export const TextField = ({
     className = "",
-    hasStatePrimary = false,
-    hasStateSuccess = false,
-    hasStateWarning = false,
-    hasStateDanger = false,
     fullWidth = true,
     leftIcon,
     invisibleCharacterWarning,
     escapeToBlur = false,
-    ...otherProps
+    intent,
+    ...otherBlueprintInputGroupProps
 }: TextFieldProps) => {
     const inputRef = React.useRef<HTMLInputElement | null>(null);
-    let deprecatedIntent;
-    switch (true) {
-        case hasStatePrimary:
-            deprecatedIntent = IntentDefinitions.PRIMARY;
-            break;
-        case hasStateSuccess:
-            deprecatedIntent = IntentDefinitions.SUCCESS;
-            break;
-        case hasStateWarning:
-            deprecatedIntent = IntentDefinitions.WARNING;
-            break;
-        case hasStateDanger:
-            deprecatedIntent = IntentDefinitions.DANGER;
-            break;
-        default:
-            break;
-    }
 
     const handleLabelEscape = React.useCallback(() => {
         inputRef.current?.blur();
-        if (otherProps.inputRef) {
-            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>;
+        if (otherBlueprintInputGroupProps.inputRef) {
+            const otherInputRef = otherBlueprintInputGroupProps.inputRef as RefObject<HTMLInputElement>;
             if (otherInputRef.current) {
                 otherInputRef.current.blur();
             }
@@ -109,13 +69,11 @@ export const TextField = ({
                 handleLabelEscape();
                 return false;
             }
-            return otherProps.onKeyDown?.(event);
+            return otherBlueprintInputGroupProps.onKeyDown?.(event);
         },
-        [otherProps.onKeyDown, escapeToBlur]
+        [otherBlueprintInputGroupProps.onKeyDown, escapeToBlur]
     );
 
-    const { intent = deprecatedIntent, ...otherBlueprintInputGroupProps } = otherProps;
-
     let iconIntent;
     switch (intent) {
         case "edited":
@@ -169,7 +127,7 @@ export const TextField = ({
             }
             dir={"auto"}
             onChange={maybeWrappedOnChange}
-            onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
+            onKeyDown={otherBlueprintInputGroupProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
         />
     );
 };

package/src/components/Tooltip/Tooltip.tsx

@@ -7,7 +7,7 @@ import {
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
-import { Markdown, MarkdownParserProps } from "./../../cmem/markdown/Markdown";
+import { Markdown, MarkdownProps } from "./../../cmem/markdown/Markdown";
 
 export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
@@ -32,7 +32,7 @@ export interface TooltipProps extends Omit<BlueprintTooltipProps, "position"> {
     /**
      * Set properties for the Markdown parser
      */
-    markdownProps?: Omit<MarkdownParserProps, "children">;
+    markdownProps?: Omit<MarkdownProps, "children">;
 }
 
 export const Tooltip = ({

package/src/components/Typography/Highlighter.tsx

@@ -51,26 +51,23 @@ const escapeRegexWord = (str: string) => {
 
 /**
  * Extracts search words separated by white space.
- * @deprecated moved to `highlighterUtils.extractSearchWords`
  */
-export function extractSearchWords(textQuery: string, toLowerCase = false): string[] {
+function extractSearchWords(textQuery: string, toLowerCase = false): string[] {
     const words = textQuery.split(RegExp("\\s+")).filter((word) => word !== "");
     return toLowerCase ? words.map((w) => w.toLowerCase()) : words;
 }
 
 /**
  * Returns true if all search words are included in the given text
- * @deprecated moved to `highlighterUtils.matchesAllWords`
  */
-export function matchesAllWords(text: string, searchWords: string[]): boolean {
+function matchesAllWords(text: string, searchWords: string[]): boolean {
     return searchWords.every((w) => text.includes(w));
 }
 
 /**
  * Creates a case-insensitive multi-word regex, that matches any of the given words.
- * @deprecated moved to `highlighterUtils.createMultiWordRegex`
  */
-export function createMultiWordRegex(multiWordQuery: string[], global = true) {
+function createMultiWordRegex(multiWordQuery: string[], global = true) {
     const regexString = multiWordQuery.map(escapeRegexWord).join("|");
     return RegExp(regexString, (global ? "g" : "") + "i");
 }

package/src/components/Typography/index.ts

@@ -1,12 +1,3 @@
-import { createMultiWordRegex, extractSearchWords, matchesAllWords } from "./Highlighter";
-
-// @deprecated use `highlighterUtils`
-export const HighlighterFunctions = {
-    extractSearchWords,
-    matchesAllWords,
-    createMultiWordRegex,
-};
-
 export * from "./Highlighter";
 export * from "./HtmlContentBlock";
 export * from "./OverflowText";

package/src/components/Typography/typography.scss

@@ -296,3 +296,54 @@ table {
         }
     }
 }
+
+// Highlight spots in text bodies
+
+:is(#{$eccgui-selector-text-spot-highlight}) {
+    position: relative;
+    text-decoration: none;
+    transition: text-decoration 2s allow-discrete;
+
+    &::before {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 0;
+        height: 0;
+        overflow: hidden;
+        content: " ";
+        background-color: $eccgui-color-primary;
+        opacity: 1;
+        transition: all 1s ease-in;
+    }
+
+    &:empty {
+        &::before {
+            border-radius: 100%;
+        }
+    }
+
+    &:target,
+    &.#{$eccgui}-typography--spothighlight {
+        text-decoration: underline;
+        text-decoration-style: dotted;
+        text-decoration-color: $eccgui-color-accent;
+
+        &::before {
+            top: -50%;
+            left: -50%;
+            width: 200%;
+            height: 200%;
+            opacity: 0;
+        }
+
+        &:empty {
+            &::before {
+                top: -2.5 * $eccgui-size-block-whitespace;
+                left: -2.5 * $eccgui-size-block-whitespace;
+                width: 5 * $eccgui-size-block-whitespace;
+                height: 5 * $eccgui-size-block-whitespace;
+            }
+        }
+    }
+}

package/src/components/Workspace/WorkspaceContent.tsx

@@ -10,7 +10,7 @@ export type WorkspaceContentProps = GridProps;
 
 export const WorkspaceContent = ({ children, className = "", ...restProps }: WorkspaceContentProps) => {
     return (
-        <Grid {...restProps} as={"article"} className={`${eccgui}-workspace__content ` + className} fullWidth={true}>
+        <Grid {...restProps} as={"article"} className={`${eccgui}-workspace__content ` + className}>
             <GridRow dontWrapColumns={false}>{children}</GridRow>
         </Grid>
     );

package/src/components/index.scss

@@ -6,6 +6,7 @@
 @import "./Checkbox/checkbox";
 @import "./Depiction/depiction";
 @import "./Dialog/dialog";
+@import "./FlexibleLayout/flexiblelayout";
 @import "./Form/form";
 @import "./Grid/grid";
 @import "./HoverToggler/hovertoggler";

package/src/components/index.ts

@@ -12,6 +12,7 @@ export * from "./Checkbox/Checkbox";
 export * from "./ContextOverlay";
 export * from "./Depiction/Depiction";
 export * from "./Dialog";
+export * from "./FlexibleLayout";
 export * from "./Form";
 export * from "./Grid";
 export * from "./HoverToggler/HoverToggler";
@@ -25,7 +26,6 @@ export * from "./Menu";
 export * from "./MultiSelect/MultiSelect";
 export * from "./MultiSuggestField/MultiSuggestField";
 export * from "./Notification";
-export * from "./NumericInput/NumericInput";
 export * from "./OverviewItem";
 export * from "./Pagination/Pagination";
 export * from "./ProgressBar";

package/src/configuration/_variables.scss

@@ -80,6 +80,10 @@ $eccgui-opacity-invisible: 0 !default;
 $eccgui-zindex-modals: 8001 !default; // higher than carbon ui shell header
 $eccgui-zindex-overlays: 10001 !default; // add delta to dialog portals
 
+// -- Dynamic selectors --------------------------------------------------------
+
+$eccgui-selector-text-spot-highlight: "unknownelement" !default;
+
 // -- Calculation of more config vars ------------------------------------------
 
 /*