@eccenca/gui-elements 23.7.0-rc.0 → 23.7.0-rc.1

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

@@ -0,0 +1,89 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from "react";
+import { utils } from "../../common/index.js";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants.js";
+/**
+ * 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 var StickyTarget = function (_a) {
+    var className = _a.className, _b = _a.to, to = _b === void 0 ? "top" : _b, _c = _a.local, local = _c === void 0 ? false : _c, _d = _a.background, background = _d === void 0 ? "transparent" : _d, offset = _a.offset, style = _a.style, getConnectedElement = _a.getConnectedElement, otherDivProps = __rest(_a, ["className", "to", "local", "background", "offset", "style", "getConnectedElement"]);
+    var stickyTargetRef = React.useRef(null);
+    var offsetStyle = {};
+    if (typeof offset !== "undefined") {
+        offsetStyle = __assign(__assign({}, style), { "--eccgui-sticky-target-localoffset": offset });
+    }
+    var connectedOffset = 0;
+    React.useEffect(function () {
+        /**
+         * If the target should be sticky to a defined element then:
+         * * check for the element and its scroll parent
+         * * listen to scroll events and use the elements position as offset
+         */
+        if (getConnectedElement && stickyTargetRef) {
+            var stickyConnection_1 = getConnectedElement(stickyTargetRef);
+            if (stickyConnection_1) {
+                var scrollParent_1 = utils.getScrollParent(stickyConnection_1);
+                var scrollParentFallback_1 = !scrollParent_1 ? document.documentElement : false;
+                if (scrollParent_1 || scrollParentFallback_1) {
+                    var updateTargetOffset_1 = function () {
+                        var _a;
+                        var scrollParentPosition = (scrollParent_1 || scrollParentFallback_1).getBoundingClientRect();
+                        var stickyConnectionPosition = stickyConnection_1.getBoundingClientRect();
+                        if (to === "top") {
+                            connectedOffset =
+                                stickyConnectionPosition.top -
+                                    Math.max(0, scrollParentPosition.top) +
+                                    stickyConnectionPosition.height;
+                        }
+                        if (to === "bottom") {
+                            connectedOffset =
+                                Math.max(scrollParentPosition.height, scrollParentPosition.bottom) -
+                                    stickyConnectionPosition.bottom +
+                                    stickyConnectionPosition.height;
+                        }
+                        (_a = stickyTargetRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty("--eccgui-sticky-target-applicationoffset", "".concat(connectedOffset, "px"));
+                    };
+                    updateTargetOffset_1();
+                    var eventListeningTarget_1 = scrollParent_1 || window;
+                    var eventListeningMethod_1 = function (_event) {
+                        updateTargetOffset_1();
+                    };
+                    eventListeningTarget_1.addEventListener("scroll", eventListeningMethod_1);
+                    return function () {
+                        eventListeningTarget_1.removeEventListener("scroll", eventListeningMethod_1);
+                    };
+                }
+            }
+        }
+        return;
+    }, [getConnectedElement, stickyTargetRef, to]);
+    return (React.createElement("div", __assign({ ref: stickyTargetRef, className: "".concat(eccgui, "-sticky__target") +
+            (to ? " ".concat(eccgui, "-sticky__target--").concat(to) : "") +
+            (local ? " ".concat(eccgui, "-sticky__target--localscrollarea") : "") +
+            (background ? " ".concat(eccgui, "-sticky__target--bg-").concat(background) : "") +
+            (className ? " ".concat(className) : ""), style: offset ? offsetStyle : style }, otherDivProps)));
+};
+export default StickyTarget;
+//# sourceMappingURL=StickyTarget.js.map

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

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

package/dist/esm/components/Sticky/index.js

@@ -0,0 +1,2 @@
+export * from "./StickyTarget.js";
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Sticky/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/esm/components/index.js

@@ -36,6 +36,7 @@ export * from "./Separation/Divider.js";
 export * from "./Separation/Spacing.js";
 export * from "./Skeleton/Skeleton.js";
 export * from "./Spinner/Spinner.js";
+export * from "./Sticky/index.js";
 export * from "./Structure/index.js";
 export * from "./Switch/Switch.js";
 export * from "./Table/index.js";

package/dist/esm/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,6BAA6B,CAAC;AAC5C,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,mCAAmC,CAAC;AAClD,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,QAAQ,CAAC;AACvB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,gBAAgB,CAAC;AAC/B,cAAc,6BAA6B,CAAC;AAC5C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,yBAAyB,CAAC;AACxC,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC;AAChC,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,OAAO,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,mBAAmB,CAAC;AAClC,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,aAAa,CAAC;AAE5B,cAAc,cAAc,CAAC"}

package/dist/types/common/index.d.ts

@@ -21,6 +21,7 @@ export declare const utils: {
     };
     getGlobalVar: (varname: string) => Window;
     setGlobalVar: (varname: string, value: any) => any;
+    getScrollParent: (element: Element) => false | HTMLElement;
 };
 export declare const Utilities: {
     openInNewTab: (event: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>, handler?: ((e: import("react").MouseEvent<HTMLAnchorElement, MouseEvent>) => void) | undefined, url?: string | undefined) => void;
@@ -44,4 +45,5 @@ export declare const Utilities: {
     };
     getGlobalVar: (varname: string) => Window;
     setGlobalVar: (varname: string, value: any) => any;
+    getScrollParent: (element: Element) => false | HTMLElement;
 };

package/dist/types/common/utils/getScrollParent.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Find the scroll parent of an element, returns `false` if it cannot be found.
+ * In case of a `false` return the very probably `document.documentElement` is the parent.
+ * In this case `window` object should be used for scroll event listeners.
+ * See `src/components/Sticky/StickyTarget.tsx` for an usage example.
+ * @param element
+ * @returns HTMLElement | false
+ */
+export declare const getScrollParent: (element: Element) => HTMLElement | false;

package/dist/types/components/AutocompleteField/AutoCompleteField.d.ts

@@ -109,6 +109,8 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
      * Use the full available width of the parent container.
      */
     fill?: boolean;
+    /** Utility that fetches more options when clicked*/
+    loadMoreResults?: () => Promise<T[]>;
 }
 export declare type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
 /**

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

@@ -0,0 +1,32 @@
+import React from "react";
+export interface StickyTargetProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Set the side the element need to be sticky on.
+     */
+    to?: "top" | "bottom";
+    /**
+     * The sticky area is positioned relatively to a local scroll area.
+     * The application header is not taken into offset calculation
+     */
+    local?: boolean;
+    /**
+     * 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.
+     */
+    offset?: `${number}${string}`;
+    /**
+     * Callback that returns an DOM element.
+     * The position of `StickyTarget` is then calculated relative to that element.
+     */
+    getConnectedElement?: (ref: React.MutableRefObject<HTMLDivElement | null>) => Element | false;
+}
+/**
+ * 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 default StickyTarget;

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

@@ -0,0 +1 @@
+export * from "./StickyTarget";

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

@@ -36,6 +36,7 @@ export * from "./Separation/Divider";
 export * from "./Separation/Spacing";
 export * from "./Skeleton/Skeleton";
 export * from "./Spinner/Spinner";
+export * from "./Sticky";
 export * from "./Structure";
 export * from "./Switch/Switch";
 export * from "./Table";

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.0",
+    "version": "23.7.0-rc.1",
     "license": "Apache-2.0",
     "homepage": "https://github.com/eccenca/gui-elements",
     "bugs": "https://github.com/eccenca/gui-elements/issues",

package/src/common/index.ts

@@ -1,6 +1,7 @@
 import { invisibleZeroWidthCharacters } from "./utils/characters";
 import decideContrastColorValue from "./utils/colorDecideContrastvalue";
 import getColorConfiguration from "./utils/getColorConfiguration";
+import { getScrollParent } from "./utils/getScrollParent";
 import { getGlobalVar, setGlobalVar } from "./utils/globalVars";
 import { openInNewTab } from "./utils/openInNewTab";
 
@@ -11,6 +12,8 @@ export const utils = {
     invisibleZeroWidthCharacters,
     getGlobalVar,
     setGlobalVar,
+    getScrollParent,
 };
+
 // @deprecated use `utils`
 export const Utilities = utils;

package/src/common/utils/getScrollParent.ts

@@ -0,0 +1,20 @@
+/**
+ * Find the scroll parent of an element, returns `false` if it cannot be found.
+ * In case of a `false` return the very probably `document.documentElement` is the parent.
+ * In this case `window` object should be used for scroll event listeners.
+ * See `src/components/Sticky/StickyTarget.tsx` for an usage example.
+ * @param element
+ * @returns HTMLElement | false
+ */
+export const getScrollParent = (element: Element): HTMLElement | false => {
+    let scrollParent = element.parentElement;
+    while (scrollParent) {
+        const { overflow } = window.getComputedStyle(scrollParent);
+        if (overflow.split(" ").every((value) => value === "auto" || value === "scroll")) {
+            return scrollParent;
+        }
+        scrollParent = scrollParent.parentElement;
+    }
+
+    return false;
+};

package/src/components/AutocompleteField/AutoCompleteField.tsx

@@ -156,6 +156,8 @@ export interface AutoCompleteFieldProps<T, UPDATE_VALUE> {
      * Use the full available width of the parent container.
      */
     fill?: boolean;
+    /** Utility that fetches more options when clicked*/
+    loadMoreResults?: () => Promise<T[]>;
 }
 
 export type IAutoCompleteFieldProps<T, UPDATE_VALUE> = AutoCompleteFieldProps<T, UPDATE_VALUE>;
@@ -195,6 +197,7 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
         requestErrorPrefix,
         hasBackDrop,
         fill,
+        loadMoreResults,
         ...otherProps
     } = props;
     const [selectedItem, setSelectedItem] = useState<T | undefined>(initialValue);
@@ -334,6 +337,7 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
             disabled: modifiers.disabled,
             highlightingEnabled: highlightingEnabled,
         };
+
         const renderedItem = itemRenderer(item, query, relevantModifiers, handleClick);
         if (typeof renderedItem === "string") {
             return (
@@ -442,6 +446,26 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
               createNewItemPosition,
           }
         : {};
+
+    const handleMenuScroll = React.useCallback(
+        async (event: any) => {
+            const menu = event.target;
+            const { scrollTop, scrollHeight, clientHeight } = menu;
+            // Check if scrolled to the bottom of the list
+            if (scrollTop + clientHeight >= scrollHeight && loadMoreResults) {
+                const results = await loadMoreResults();
+                if (results) {
+                    setFiltered((prev) => [...prev, ...results]);
+                    setTimeout(() => {
+                        menu.scrollTop = scrollHeight; //safari adaptation
+                        menu.scrollTo({ left: 0, top: scrollHeight, behavior: "auto" });
+                    });
+                }
+            }
+        },
+        [loadMoreResults]
+    );
+
     return (
         <BlueprintSuggest<T>
             className={`${eccgui}-autocompletefield__input` + (className ? ` ${className}` : "")}
@@ -455,7 +479,11 @@ export function AutoCompleteField<T, UPDATE_VALUE>(props: AutoCompleteFieldProps
             noResults={<MenuItem disabled={true} text={noResultText} />}
             onItemSelect={onSelectionChange}
             onQueryChange={(q) => setQuery(q)}
+            resetOnQuery={false}
             closeOnSelect={true}
+            menuProps={{
+                onScroll: handleMenuScroll,
+            }}
             query={query}
             // This leads to odd compile errors without "as any"
             popoverProps={updatedContextOverlayProps as any}

package/src/components/AutocompleteField/autocompletefield.scss

@@ -1,5 +1,5 @@
 .#{$eccgui}-autocompletefield__options {
-    .#{$ns}-popover2-content {
+    .#{$ns}-popover-content {
         .#{$ns}-menu {
             max-height: 45vh;
             overflow: auto;

package/src/components/MultiSelect/MultiSelect.tsx

@@ -229,16 +229,15 @@ export function MultiSelect<T>({
     ]);
 
     /**
-     * Update selected items if the component is controlled and we get
-     * new selected items from outside
+     * Update selected items if we get new selected items from outside
      */
     React.useEffect(() => {
-        if (!isControlled) {
+        if (!externalSelectedItems) {
             return;
         }
 
         setSelectedItems(externalSelectedItems);
-    }, [isControlled, externalSelectedItems]);
+    }, [externalSelectedItems]);
 
     /**
      * using the equality prop specified checks if an item has already been selected

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

@@ -2,7 +2,7 @@ import React, { useCallback, useMemo, useState } from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
 
-import { MultiSelectSelectionProps, MultiSuggestField } from "./../../../index";
+import { MultiSelectSelectionProps, MultiSuggestField, SimpleDialog } from "./../../../index";
 
 const testLabels = loremIpsum({
     p: 1,
@@ -78,6 +78,40 @@ predefinedNotControlledValues.args = {
     itemLabel: (item) => item.testLabel,
 };
 
+const DeferredSelectionTemplate: StoryFn = () => {
+    const initialSelected: Array<{ testId: string; testLabel: string }> = [];
+    const [loaded, setLoaded] = useState(false);
+
+    const selected = loaded ? selectedItems : initialSelected;
+
+    const identity = useCallback((item: string): string => item, []);
+
+    return (
+        <>
+            <div>Selected items loaded: {loaded.toString()}</div>
+
+            <br />
+
+            <MultiSuggestField<string>
+                items={items.map(({ testId }) => testId)}
+                selectedItems={selected.map(({ testId }) => testId)}
+                itemId={identity}
+                itemLabel={(itemId) => items.find(({ testId }) => testId === itemId)?.testLabel ?? itemId}
+                createNewItemFromQuery={(query) => query}
+            />
+
+            <br />
+
+            <button onClick={() => setLoaded((prev) => !prev)}>Toggle selected</button>
+        </>
+    );
+};
+
+/**
+ *
+ */
+export const deferredSelection = DeferredSelectionTemplate.bind({});
+
 /**
  * New item creation, add to a existing list
  */
@@ -160,3 +194,44 @@ const WithResetButton: StoryFn = () => {
  * Reset values
  */
 export const withResetItemAndCreation = WithResetButton.bind({});
+
+const WithinModal = (): JSX.Element => {
+    const [isOpen, setIsOpen] = useState(false);
+
+    const copy: Array<{ testLabel: string; testId: string }> = [items[2]];
+
+    const [selected, setSelected] = useState(copy);
+
+    const handleOnSelect = useCallback((params) => {
+        const items = params.selectedItems;
+        setSelected(items);
+    }, []);
+
+    const handleReset = (): void => {
+        setSelected(copy);
+    };
+
+    return (
+        <>
+            <button onClick={() => setIsOpen(true)}>open modal</button>
+
+            <SimpleDialog isOpen={isOpen} onClose={() => setIsOpen(false)} canOutsideClickClose>
+                <div>
+                    <button onClick={handleReset}>Reset</button>
+                    <br />
+                    <br />
+                    <MultiSuggestField<{ testLabel: string; testId: string }>
+                        items={items}
+                        selectedItems={selected}
+                        onSelection={handleOnSelect}
+                        itemId={({ testId }) => testId}
+                        itemLabel={({ testLabel }) => testLabel}
+                        createNewItemFromQuery={(query) => ({ testId: `${query}-id`, testLabel: query })}
+                    />
+                </div>
+            </SimpleDialog>
+        </>
+    );
+};
+
+export const withinModal = WithinModal.bind({});