@eccenca/gui-elements 23.7.0-rc.2 → 23.7.0-rc.4

package/dist/esm/components/Sticky/StickyTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"StickyTarget.js","sourceRoot":"","sources":["../../../../src/components/Sticky/StickyTarget.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"StickyTarget.js","sourceRoot":"","sources":["../../../../src/components/Sticky/StickyTarget.tsx"],"names":[],"mappings":"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"}

package/dist/types/cmem/ActivityControl/ActivityControlTypes.d.ts

@@ -7,6 +7,7 @@ export interface IActivityStatus {
     failed: boolean;
     statusName: "Waiting" | "Finished" | "Idle" | "Running" | "Canceling";
     progress: number;
+    lastUpdateTime: number;
     message: string;
     cancelled: boolean;
     concreteStatus: ConcreteActivityStatus;

package/dist/types/components/Depiction/Depiction.d.ts

@@ -48,6 +48,12 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
      * The amount of padding is defined relative to the depiction size, so a small padding on a small depiction is displayed smaller than a small padding on a large depiction.
      */
     padding?: "none" | "tiny" | "small" | "medium" | "large";
+    /**
+     * Reduce opacity to let it appear as inactive.
+     * Even if it is no form control element it could be used inside one.
+     * Use this property if the `disabled` state there is not adapted automatically to the depiction.
+     */
+    disabled?: boolean;
     /**
      * Description of the depiction.
      */
@@ -68,4 +74,4 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
 /**
  * Display a graphical representation and attache a caption or a badge to it.
  */
-export declare function Depiction({ className, image, forceInlineSvg, size, resizing, ratio, caption, captionPosition, backgroundColor, border, rounded, padding, badge, tooltipProps, ...otherFigureProps }: DepictionProps): React.JSX.Element;
+export declare function Depiction({ className, image, forceInlineSvg, size, resizing, ratio, caption, captionPosition, backgroundColor, border, rounded, padding, disabled, badge, tooltipProps, ...otherFigureProps }: DepictionProps): React.JSX.Element;

package/dist/types/components/MultiSelect/MultiSelect.d.ts

@@ -9,11 +9,7 @@ export interface MultiSelectSelectionProps<T> {
     createdItems: Partial<T>[];
 }
 export declare type SelectedParamsType<T> = MultiSelectSelectionProps<T>;
-export interface MultiSelectProps<T> extends TestableComponent, Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
-    /**
-     * Predefined selected values
-     */
-    selectedItems?: T[];
+interface MultiSelectCommonProps<T> extends TestableComponent, Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
     /**
      * Additional class name, space separated.
      */
@@ -27,10 +23,6 @@ export interface MultiSelectProps<T> extends TestableComponent, Pick<BlueprintMu
      * this would be used in the item selection list as well as the multi-select input
      */
     itemLabel: (item: T) => string;
-    /**
-     * When set to true will set the multi-select value with all the items provided
-     */
-    prePopulateWithItems?: boolean;
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
@@ -107,6 +99,19 @@ export interface MultiSelectProps<T> extends TestableComponent, Pick<BlueprintMu
      */
     wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
+export declare type MultiSelectProps<T> = MultiSelectCommonProps<T> & ({
+    /**
+     * Predefined selected values
+     */
+    selectedItems?: T[];
+    prePopulateWithItems?: never;
+} | {
+    selectedItems?: never;
+    /**
+     * When set to true will set the multi-select value with all the items provided
+     */
+    prePopulateWithItems?: boolean;
+});
 /**
  * **Element is deprecated for the current type of usage.**
  * Use `MultiSuggestField` as replacement.

package/dist/types/components/Sticky/StickyTarget.d.ts

@@ -9,15 +9,26 @@ export interface StickyTargetProps extends React.HTMLAttributes<HTMLDivElement>
      * The application header is not taken into offset calculation
      */
     local?: boolean;
+    /**
+     * Set additional distance to original sticky position.
+     */
+    offset?: `${number}${string}`;
     /**
      * Set the background color used for the sticky area.
      * As it can overlay other content readability could be harmed if the overlayed content is shining through.
      */
     background?: "card" | "application" | "transparent";
     /**
-     * Set additional distance to original sticky position.
+     * In some situations there could be a gap between sticky target area and the border of the related scroll area.
+     * The main gap is the gap towards the direction of the sticky behaviour, specified by `to`.
+     * You can fill this gap with a gradient or full background color.
      */
-    offset?: `${number}${string}`;
+    fillMainGap?: "full" | "gradient";
+    /**
+     * The secondary gap is the gap against the direction of the sticky behaviour.
+     * So in case of `to="top"` this is rendered on the bottom of the sticky area.
+     */
+    fillSecondaryGap?: "full" | "gradient";
     /**
      * Callback that returns an DOM element.
      * The position of `StickyTarget` is then calculated relative to that element.
@@ -28,5 +39,5 @@ export interface StickyTargetProps extends React.HTMLAttributes<HTMLDivElement>
  * Element wraps the content that need to be displayed sticky.
  * The content then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor).
  */
-export declare const StickyTarget: ({ className, to, local, background, offset, style, getConnectedElement, ...otherDivProps }: StickyTargetProps) => React.JSX.Element;
+export declare const StickyTarget: ({ className, to, local, offset, background, fillMainGap, fillSecondaryGap, style, getConnectedElement, ...otherDivProps }: StickyTargetProps) => React.JSX.Element;
 export default StickyTarget;

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@eccenca/gui-elements",
     "description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
-    "version": "23.7.0-rc.2",
+    "version": "23.7.0-rc.4",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/cmem/ActivityControl/ActivityControlTypes.ts

@@ -16,6 +16,8 @@ export interface IActivityStatus {
     statusName: "Waiting" | "Finished" | "Idle" | "Running" | "Canceling";
     // A number between 0 and 100
     progress: number;
+    // timestamp for last update
+    lastUpdateTime: number;
     // More information corresponding to the status
     message: string;
     // If the activity has been cancelled

package/src/components/Depiction/Depiction.tsx

@@ -56,6 +56,12 @@ export interface DepictionProps extends React.HTMLAttributes<HTMLElement> {
      * The amount of padding is defined relative to the depiction size, so a small padding on a small depiction is displayed smaller than a small padding on a large depiction.
      */
     padding?: "none" | "tiny" | "small" | "medium" | "large";
+    /**
+     * Reduce opacity to let it appear as inactive.
+     * Even if it is no form control element it could be used inside one.
+     * Use this property if the `disabled` state there is not adapted automatically to the depiction.
+     */
+    disabled?: boolean;
     /**
      * Description of the depiction.
      */
@@ -90,6 +96,7 @@ export function Depiction({
     border,
     rounded,
     padding = "none",
+    disabled,
     badge,
     tooltipProps,
     ...otherFigureProps
@@ -105,6 +112,7 @@ export function Depiction({
                 [`--${eccgui}-depiction-color`]: decideContrastColorValue({ testColor: color }),
             };
         } catch (ex) {
+            // eslint-disable-next-line no-console
             console.warn("Received invalid background color for depiction: " + backgroundColor);
         }
     }
@@ -171,7 +179,8 @@ export function Depiction({
                 (backgroundColor ? ` ${eccgui}-depiction__image--color-config` : "") +
                 (border ? ` ${eccgui}-depiction__image--hasborder` : "") +
                 (rounded ? ` ${eccgui}-depiction__image--roundedborder` : "") +
-                (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : "")
+                (padding && padding !== "none" ? ` ${eccgui}-depiction__image--padding-${padding}` : "") +
+                (disabled ? ` ${eccgui}-depiction__image--disabled` : "")
             }
             style={styleDepictionColors as React.CSSProperties}
         >

package/src/components/Depiction/depiction.scss

@@ -21,6 +21,20 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     & + .#{$eccgui}-overviewitem__description {
         margin-left: mini-units(1);
     }
+
+    .#{$ns}-button & {
+        .#{$eccgui}-icon:first-child:last-child {
+            margin-right: 0;
+            margin-left: 0;
+        }
+    }
+
+    .#{$ns}-button &:first-child {
+        margin-left: -($pt-button-height - $pt-icon-size-standard) * 0.5;
+    }
+    .#{$ns}-button &:last-child {
+        margin-right: -($pt-button-height - $pt-icon-size-standard) * 0.5;
+    }
 }
 
 .#{$eccgui}-depiction__image {
@@ -35,6 +49,13 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
         height: 100%;
     }
 
+    *:disabled & {
+        img,
+        svg:not(.#{$eccgui}-icon) {
+            opacity: $eccgui-opacity-disabled;
+        }
+    }
+
     .#{$eccgui}-icon {
         vertical-align: initial;
     }
@@ -53,6 +74,10 @@ $eccgui-size-depiction-border-radius: $pt-border-radius !default;
     }
 }
 
+.#{$eccgui}-depiction__image--disabled {
+    opacity: $eccgui-opacity-disabled;
+}
+
 .#{$eccgui}-depiction__image--ratio-source {
     aspect-ratio: auto;
 

package/src/components/MultiSelect/MultiSelect.tsx

@@ -21,14 +21,9 @@ export interface MultiSelectSelectionProps<T> {
 // @deprecated use `MultiSelectSelectionProps<T>`
 export type SelectedParamsType<T> = MultiSelectSelectionProps<T>;
 
-export interface MultiSelectProps<T>
+interface MultiSelectCommonProps<T>
     extends TestableComponent,
         Pick<BlueprintMultiSelectProps<T>, "items" | "placeholder" | "openOnKeyDown"> {
-    /**
-     * Predefined selected values
-     */
-
-    selectedItems?: T[];
     /**
      * Additional class name, space separated.
      */
@@ -42,10 +37,7 @@ export interface MultiSelectProps<T>
      * this would be used in the item selection list as well as the multi-select input
      */
     itemLabel: (item: T) => string;
-    /**
-     * When set to true will set the multi-select value with all the items provided
-     */
-    prePopulateWithItems?: boolean;
+
     /**
      *  function handler that would be called anytime an item is selected/deselected or an item is created/removed
      */
@@ -127,6 +119,24 @@ export interface MultiSelectProps<T>
     wrapperProps?: React.HTMLAttributes<HTMLDivElement>;
 }
 
+export type MultiSelectProps<T> = MultiSelectCommonProps<T> &
+    (
+        | {
+              /**
+               * Predefined selected values
+               */
+              selectedItems?: T[];
+              prePopulateWithItems?: never;
+          }
+        | {
+              selectedItems?: never;
+              /**
+               * When set to true will set the multi-select value with all the items provided
+               */
+              prePopulateWithItems?: boolean;
+          }
+    );
+
 /**
  * **Element is deprecated for the current type of usage.**
  * Use `MultiSuggestField` as replacement.
@@ -169,7 +179,7 @@ export function MultiSelect<T>({
     const [externalItems, setExternalItems] = React.useState<T[]>([...items]);
     // All options (created and passed) that match the query
     const [filteredItems, setFilteredItems] = React.useState<T[]>([]);
-    // All options (created and passed) selected by a user, if the component is uncontrolled
+    // All options (created and passed) selected by a user
     const [selectedItems, setSelectedItems] = React.useState<T[]>(() =>
         prePopulateWithItems ? [...items] : externalSelectedItems ? [...externalSelectedItems] : []
     );
@@ -201,10 +211,6 @@ export function MultiSelect<T>({
             break;
     }
 
-    // If the component is contolled from outside, we don't need to store selected state within the component
-    // when user selects or removes selection - options will be set in a parent component
-    const isControlled = !!(externalSelectedItems && onSelection);
-
     /** Update external items when they change
      *  e.g for auto-complete when query change
      */
@@ -214,15 +220,13 @@ export function MultiSelect<T>({
     }, [items.map((item) => itemId(item)).join("|")]);
 
     React.useEffect(() => {
-        !isControlled &&
-            onSelection &&
+        onSelection &&
             onSelection({
                 newlySelected: selectedItems.slice(-1)[0],
                 createdItems: createdItems.current,
                 selectedItems,
             });
     }, [
-        isControlled,
         onSelection,
         selectedItems.map((item) => itemId(item)).join("|"),
         createdItems.current.map((item) => itemId(item)).join("|"),
@@ -237,7 +241,7 @@ export function MultiSelect<T>({
         }
 
         setSelectedItems(externalSelectedItems);
-    }, [externalSelectedItems]);
+    }, [externalSelectedItems?.map((item) => itemId(item)).join("|")]);
 
     /**
      * using the equality prop specified checks if an item has already been selected
@@ -254,15 +258,7 @@ export function MultiSelect<T>({
      */
     const removeItemSelection = (matcher: string) => {
         const filteredItems = selectedItems.filter((item) => itemId(item) !== matcher);
-
-        if (isControlled) {
-            onSelection({
-                createdItems: createdItems.current,
-                selectedItems: filteredItems,
-            });
-        } else {
-            setSelectedItems(filteredItems);
-        }
+        setSelectedItems(filteredItems);
     };
 
     /**
@@ -273,12 +269,6 @@ export function MultiSelect<T>({
     const onItemSelect = (item: T) => {
         if (itemHasBeenSelectedAlready(itemId(item))) {
             removeItemSelection(itemId(item));
-        } else if (isControlled) {
-            onSelection({
-                newlySelected: item,
-                createdItems: createdItems.current,
-                selectedItems: [...selectedItems, item],
-            });
         } else {
             setSelectedItems((items) => [...items, item]);
         }
@@ -358,15 +348,7 @@ export function MultiSelect<T>({
     const handleClear = () => {
         requestState.current.query = "";
 
-        if (isControlled) {
-            onSelection({
-                selectedItems: [],
-                createdItems: createdItems.current,
-            });
-        } else {
-            setSelectedItems([]);
-        }
-
+        setSelectedItems([]);
         setFilteredItems([...externalItems, ...createdItems.current]);
     };
 

package/src/components/MultiSuggestField/MultiSuggestField.stories.tsx

@@ -125,7 +125,7 @@ uncontrolledNewItemCreation.args = {
 };
 
 const CreationTemplate: StoryFn = () => {
-    const [selectedValues, setSelectedValues] = useState<string[]>([]);
+    const [selectedValues, setSelectedValues] = useState<string[]>(["foo"]);
 
     const items = useMemo<string[]>(() => ["foo", "bar", "baz"], []);
 
@@ -145,7 +145,6 @@ const CreationTemplate: StoryFn = () => {
             itemId={identity}
             itemLabel={identity}
             createNewItemFromQuery={identity}
-            prePopulateWithItems
         />
     );
 };

package/src/components/MultiSuggestField/tests/MultiSuggestField.test.tsx

@@ -47,7 +47,7 @@ export const TestComponent = (): JSX.Element => {
 };
 
 describe("MultiSuggestField", () => {
-    describe("uncontrolled", () => {
+    describe("uncontrolled (when only selectedItems or onSelect is provided)", () => {
         it("should render default input", () => {
             const { container } = render(<MultiSuggestField {...Default.args} />);
             const [input] = container.getElementsByClassName("eccgui-multiselect");
@@ -262,7 +262,7 @@ describe("MultiSuggestField", () => {
         });
     });
 
-    describe("controlled", () => {
+    describe("controlled (when both selectedItems and onSelect are provided)", () => {
         it("should render default selected items", async () => {
             const onSelection = jest.fn();
 
@@ -287,7 +287,12 @@ describe("MultiSuggestField", () => {
             });
 
             const { container } = render(
-                <MultiSuggestField {...dropdownOnFocus.args} items={items} onSelection={onSelection} />
+                <MultiSuggestField
+                    {...dropdownOnFocus.args}
+                    items={items}
+                    selectedItems={[]}
+                    onSelection={onSelection}
+                />
             );
 
             const [inputContainer] = container.getElementsByClassName("eccgui-multiselect");
@@ -355,7 +360,6 @@ describe("MultiSuggestField", () => {
                     newlySelected: items[0],
                     selectedItems: [items[0]],
                 };
-                expect(onSelection).toHaveBeenCalledTimes(1);
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
             });
 
@@ -381,7 +385,6 @@ describe("MultiSuggestField", () => {
                     selectedItems: [...selectedItems, items[0]],
                 };
 
-                expect(onSelection).toHaveBeenCalledTimes(2);
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
             });
 
@@ -399,9 +402,90 @@ describe("MultiSuggestField", () => {
                     selectedItems: [],
                 };
 
-                expect(onSelection).toHaveBeenCalledTimes(3);
                 expect(onSelection).toHaveBeenCalledWith(expectedObject);
             });
         });
+
+        it("should set prePopulateWithItems as selected values and override passed values", async () => {
+            const onSelection = jest.fn((values) => {
+                // eslint-disable-next-line no-console
+                console.log("Mocked onSelection function values: ", values);
+            });
+
+            const items = dropdownOnFocus.args.items;
+
+            const args = { ...dropdownOnFocus.args, onSelection: onSelection };
+
+            const { container } = render(
+                <MultiSuggestField {...args} data-test-id="multi-suggest-field" prePopulateWithItems />
+            );
+
+            await waitFor(() => {
+                const expectedObject = {
+                    createdItems: [],
+                    newlySelected: items.at(-1),
+                    selectedItems: items,
+                };
+                expect(onSelection).toHaveBeenCalledWith(expectedObject);
+            });
+
+            const tags = container.querySelectorAll("span[data-tag-index]");
+
+            expect(tags.length).toBe(items.length);
+        });
+
+        it("should correctly deselect all tags from input", async () => {
+            const onSelection = jest.fn((values) => {
+                // eslint-disable-next-line no-console
+                console.log("Mocked onSelection function values 111: ", values);
+            });
+
+            const items = predefinedNotControlledValues.args.items;
+
+            const args = { ...predefinedNotControlledValues.args, selectedItems: undefined, onSelection: onSelection };
+
+            const { container } = render(
+                <MultiSuggestField {...args} data-test-id="multi-suggest-field" prePopulateWithItems />
+            );
+
+            await waitFor(() => {
+                const expectedObject = {
+                    createdItems: [],
+                    newlySelected: items.at(-1),
+                    selectedItems: items,
+                };
+                expect(onSelection).toHaveBeenCalledWith(expectedObject);
+            });
+
+            let tags = container.querySelectorAll("span[data-tag-index]");
+            expect(tags.length).toBe(items.length);
+
+            for (let i = 0; i < items.length; i += 1) {
+                const tag = tags[0];
+                expect(tag.querySelector("span")).toHaveTextContent(items[i].testLabel);
+
+                const removeTagButton = tag.querySelector("button");
+                expect(removeTagButton).toBeTruthy();
+
+                fireEvent.click(removeTagButton!);
+
+                await waitFor(() => {
+                    const selected = items.slice(i + 1);
+
+                    const expectedObject = {
+                        createdItems: [],
+                        newlySelected: selected.at(-1),
+                        selectedItems: selected,
+                    };
+
+                    expect(onSelection).toHaveBeenCalledWith(expectedObject);
+                });
+
+                tags = container.querySelectorAll("span[data-tag-index]");
+            }
+
+            const tagsAfterRemove = container.querySelectorAll("span[data-tag-index]");
+            expect(tagsAfterRemove.length).toBe(0);
+        });
     });
 });

package/src/components/Select/Select.stories.tsx

@@ -3,7 +3,8 @@ import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
-import { Button, MenuItem, Select } from "../../index";
+import { Button, Depiction, MenuItem, Select } from "../../index";
+import { FullExample as DepictionExample } from "../Depiction/stories/Depiction.stories";
 
 export default {
     title: "Forms/Select",
@@ -32,7 +33,15 @@ Default.args = {
         return <MenuItem text={item.label} title={item.label} />;
     },
     fill: true,
-    // placeholder: loremIpsum({ p: 1, avgSentencesPerParagraph: 5, random: false })
+};
+
+/**
+ * Using a `Depiction` element instead of a simple `icon` name
+ */
+export const UsingDepictionAsIcon = Template.bind({});
+UsingDepictionAsIcon.args = {
+    ...Default.args,
+    icon: <Depiction {...DepictionExample.args} size="tiny" resizing="cover" ratio="1:1" />,
 };
 
 /**