@sap-ux/ui-components 1.13.5 → 1.14.1

package/dist/components/UICallout/CalloutCollisionTransform.js

@@ -1,161 +1,161 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CalloutCollisionTransform = void 0;
-// Default properties which applies for dialog scenario with footer buttons
-const defaultProps = {
-    target: '.ms-Dialog-actions',
-    container: '.ms-Dialog-main',
-    absolute: true,
-    minPagePadding: 10
-};
-const TRANSFORMATION_OFFSET = 20;
-/**
- * This class is responsible for Dialog/Container element transformation to avoid collision/overlap between Callout/Dropdown Menu and target element.
- * In example when multi select dropdown is used inside dialog with actions,
- *  then class will apply transformation dialog to make sure that dialog actions and dropdown menu is visible.
- */
-class CalloutCollisionTransform {
-    /**
-     * Initializes class with options.
-     *
-     * @param source Source element.
-     * @param callout Dropdown menu/callout element.
-     * @param props Transformation properties.
-     */
-    constructor(source, callout, props = defaultProps) {
-        // Original style properties of container
-        this.originalStyle = {};
-        this.source = source;
-        this.callout = callout;
-        this.props = props;
-        this.applyTransformation = this.applyTransformation.bind(this);
-        this.resetTransformation = this.resetTransformation.bind(this);
-        this.preventDismissOnEvent = this.preventDismissOnEvent.bind(this);
-    }
-    /**
-     * Method creates placeholder element with given size.
-     *
-     * @param size Size of placeholder.
-     * @returns HTML element for placeholder.
-     */
-    createPlaceholder(size) {
-        const element = document.createElement('div');
-        element.classList.add('ts-Callout-transformation');
-        element.style.height = `${size}px`;
-        return element;
-    }
-    /**
-     * Method returns DOM elements and rectangles of associated elements(container, target, callout).
-     *
-     * @returns DOM elements and rectangles of associated elements.
-     */
-    getElements() {
-        const source = this.source.current;
-        const container = source?.closest(this.props.container);
-        if (container && source) {
-            const target = container?.querySelector(this.props.target);
-            if (target) {
-                const elements = {
-                    container: {
-                        dom: container,
-                        rect: container.getBoundingClientRect()
-                    },
-                    target: {
-                        dom: target,
-                        rect: target.getBoundingClientRect()
-                    },
-                    source: {
-                        dom: source,
-                        rect: source.getBoundingClientRect()
-                    }
-                };
-                const callout = this.callout.current;
-                if (callout) {
-                    elements.callout = { dom: callout, rect: callout.getBoundingClientRect() };
-                }
-                return elements;
-            }
-        }
-        return undefined;
-    }
-    /**
-     * Method calculates callout overlap with target and applies transformation to make target visible.
-     */
-    applyTransformation() {
-        const elements = this.getElements();
-        if (!elements) {
-            return;
-        }
-        const { container, target, callout, source } = elements;
-        if (callout) {
-            const maxHeight = window.innerHeight - defaultProps.minPagePadding;
-            const height = callout.rect.height;
-            const top = source.rect.bottom;
-            // Calculate if action is overlaps
-            let diff = top + height - target.rect.top;
-            let bottomPosition = top + callout.rect.height;
-            if (diff <= 0 || bottomPosition >= maxHeight) {
-                return;
-            }
-            // Apply additional offset to make target more visible
-            bottomPosition += target.rect.height;
-            if (bottomPosition <= maxHeight) {
-                diff += TRANSFORMATION_OFFSET;
-            }
-            // Apply absolute position to fix position and avoid recentering
-            if (this.props.absolute) {
-                const containerStyle = container.dom.style;
-                this.originalStyle = {
-                    transform: containerStyle.transform,
-                    position: containerStyle.position,
-                    top: containerStyle.top,
-                    left: containerStyle.left
-                };
-                containerStyle.transform = '';
-                containerStyle.position = 'absolute';
-                containerStyle.top = `${container.rect.top}px`;
-                containerStyle.left = `${container.rect.left}px`;
-            }
-            // Apply placeholder element - gap to make target visible
-            this.placeholder = this.createPlaceholder(diff);
-            target.dom.prepend(this.placeholder);
-        }
-    }
-    /**
-     * Method resets current applied transformation.
-     */
-    resetTransformation() {
-        const elements = this.getElements();
-        if (!elements) {
-            return;
-        }
-        const { container, target } = elements;
-        for (const styleName in this.originalStyle) {
-            const styleValue = this.originalStyle[styleName];
-            if (typeof styleValue === 'string') {
-                container.dom.style[styleName] = styleValue;
-            }
-        }
-        this.originalStyle = {};
-        // Remove placeholder element
-        if (this.placeholder) {
-            target.dom.removeChild(this.placeholder);
-            this.placeholder = undefined;
-        }
-    }
-    /**
-     * Method prevents callout dismiss/close if focus/click on target elements.
-     *
-     * @param event Triggered event to check.
-     * @returns Returns true if callout should not be closed.
-     */
-    preventDismissOnEvent(event) {
-        const elements = this.getElements();
-        if (event.type === 'focus' && elements?.target.dom.contains(event.target)) {
-            return true;
-        }
-        return false;
-    }
-}
-exports.CalloutCollisionTransform = CalloutCollisionTransform;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CalloutCollisionTransform = void 0;
+// Default properties which applies for dialog scenario with footer buttons
+const defaultProps = {
+    target: '.ms-Dialog-actions',
+    container: '.ms-Dialog-main',
+    absolute: true,
+    minPagePadding: 10
+};
+const TRANSFORMATION_OFFSET = 20;
+/**
+ * This class is responsible for Dialog/Container element transformation to avoid collision/overlap between Callout/Dropdown Menu and target element.
+ * In example when multi select dropdown is used inside dialog with actions,
+ *  then class will apply transformation dialog to make sure that dialog actions and dropdown menu is visible.
+ */
+class CalloutCollisionTransform {
+    /**
+     * Initializes class with options.
+     *
+     * @param source Source element.
+     * @param callout Dropdown menu/callout element.
+     * @param props Transformation properties.
+     */
+    constructor(source, callout, props = defaultProps) {
+        // Original style properties of container
+        this.originalStyle = {};
+        this.source = source;
+        this.callout = callout;
+        this.props = props;
+        this.applyTransformation = this.applyTransformation.bind(this);
+        this.resetTransformation = this.resetTransformation.bind(this);
+        this.preventDismissOnEvent = this.preventDismissOnEvent.bind(this);
+    }
+    /**
+     * Method creates placeholder element with given size.
+     *
+     * @param size Size of placeholder.
+     * @returns HTML element for placeholder.
+     */
+    createPlaceholder(size) {
+        const element = document.createElement('div');
+        element.classList.add('ts-Callout-transformation');
+        element.style.height = `${size}px`;
+        return element;
+    }
+    /**
+     * Method returns DOM elements and rectangles of associated elements(container, target, callout).
+     *
+     * @returns DOM elements and rectangles of associated elements.
+     */
+    getElements() {
+        const source = this.source.current;
+        const container = source?.closest(this.props.container);
+        if (container && source) {
+            const target = container?.querySelector(this.props.target);
+            if (target) {
+                const elements = {
+                    container: {
+                        dom: container,
+                        rect: container.getBoundingClientRect()
+                    },
+                    target: {
+                        dom: target,
+                        rect: target.getBoundingClientRect()
+                    },
+                    source: {
+                        dom: source,
+                        rect: source.getBoundingClientRect()
+                    }
+                };
+                const callout = this.callout.current;
+                if (callout) {
+                    elements.callout = { dom: callout, rect: callout.getBoundingClientRect() };
+                }
+                return elements;
+            }
+        }
+        return undefined;
+    }
+    /**
+     * Method calculates callout overlap with target and applies transformation to make target visible.
+     */
+    applyTransformation() {
+        const elements = this.getElements();
+        if (!elements) {
+            return;
+        }
+        const { container, target, callout, source } = elements;
+        if (callout) {
+            const maxHeight = window.innerHeight - defaultProps.minPagePadding;
+            const height = callout.rect.height;
+            const top = source.rect.bottom;
+            // Calculate if action is overlaps
+            let diff = top + height - target.rect.top;
+            let bottomPosition = top + callout.rect.height;
+            if (diff <= 0 || bottomPosition >= maxHeight) {
+                return;
+            }
+            // Apply additional offset to make target more visible
+            bottomPosition += target.rect.height;
+            if (bottomPosition <= maxHeight) {
+                diff += TRANSFORMATION_OFFSET;
+            }
+            // Apply absolute position to fix position and avoid recentering
+            if (this.props.absolute) {
+                const containerStyle = container.dom.style;
+                this.originalStyle = {
+                    transform: containerStyle.transform,
+                    position: containerStyle.position,
+                    top: containerStyle.top,
+                    left: containerStyle.left
+                };
+                containerStyle.transform = '';
+                containerStyle.position = 'absolute';
+                containerStyle.top = `${container.rect.top}px`;
+                containerStyle.left = `${container.rect.left}px`;
+            }
+            // Apply placeholder element - gap to make target visible
+            this.placeholder = this.createPlaceholder(diff);
+            target.dom.prepend(this.placeholder);
+        }
+    }
+    /**
+     * Method resets current applied transformation.
+     */
+    resetTransformation() {
+        const elements = this.getElements();
+        if (!elements) {
+            return;
+        }
+        const { container, target } = elements;
+        for (const styleName in this.originalStyle) {
+            const styleValue = this.originalStyle[styleName];
+            if (typeof styleValue === 'string') {
+                container.dom.style[styleName] = styleValue;
+            }
+        }
+        this.originalStyle = {};
+        // Remove placeholder element
+        if (this.placeholder) {
+            target.dom.removeChild(this.placeholder);
+            this.placeholder = undefined;
+        }
+    }
+    /**
+     * Method prevents callout dismiss/close if focus/click on target elements.
+     *
+     * @param event Triggered event to check.
+     * @returns Returns true if callout should not be closed.
+     */
+    preventDismissOnEvent(event) {
+        const elements = this.getElements();
+        if (event.type === 'focus' && elements?.target.dom.contains(event.target)) {
+            return true;
+        }
+        return false;
+    }
+}
+exports.CalloutCollisionTransform = CalloutCollisionTransform;
 //# sourceMappingURL=CalloutCollisionTransform.js.map

package/dist/components/UICallout/UICallout.d.ts

@@ -1,49 +1,49 @@
-import React from 'react';
-import type { ICalloutProps, ICalloutContentStyles } from '@fluentui/react';
-export interface UICalloutProps extends ICalloutProps {
-    calloutMinWidth?: number;
-    contentPadding?: UICalloutContentPadding;
-    focusTargetSiblingOnTabPress?: boolean;
-}
-import '../../styles/_shadows.scss';
-export declare const CALLOUT_STYLES: {
-    background: string;
-    boxShadow: string;
-    text: string;
-    font: string;
-    borderRadius: number;
-};
-export declare enum UICalloutContentPadding {
-    None = "None",
-    Standard = "Standard"
-}
-export declare const getCalloutStyle: (props: UICalloutProps) => ICalloutContentStyles;
-/**
- * UICallout component.
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/callout
- *
- * @exports
- * @class UICallout
- * @extends {React.Component<ICalloutProps, {}>}
- */
-export declare class UICallout extends React.Component<UICalloutProps, {}> {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UICalloutProps} props
-     */
-    constructor(props: UICalloutProps);
-    /**
-     * Method handles keydown event.
-     * If "focusTargetSiblingOnTabPress" property is set and 'Tab' key is pressed,
-     *  then method tries to focus next/previous sibling based on target.
-     *
-     * @param event Keydown event
-     */
-    private onKeyDown;
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
+import React from 'react';
+import type { ICalloutProps, ICalloutContentStyles } from '@fluentui/react';
+export interface UICalloutProps extends ICalloutProps {
+    calloutMinWidth?: number;
+    contentPadding?: UICalloutContentPadding;
+    focusTargetSiblingOnTabPress?: boolean;
+}
+import '../../styles/_shadows.scss';
+export declare const CALLOUT_STYLES: {
+    background: string;
+    boxShadow: string;
+    text: string;
+    font: string;
+    borderRadius: number;
+};
+export declare enum UICalloutContentPadding {
+    None = "None",
+    Standard = "Standard"
+}
+export declare const getCalloutStyle: (props: UICalloutProps) => ICalloutContentStyles;
+/**
+ * UICallout component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/callout
+ *
+ * @exports
+ * @class UICallout
+ * @extends {React.Component<ICalloutProps, {}>}
+ */
+export declare class UICallout extends React.Component<UICalloutProps, {}> {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UICalloutProps} props
+     */
+    constructor(props: UICalloutProps);
+    /**
+     * Method handles keydown event.
+     * If "focusTargetSiblingOnTabPress" property is set and 'Tab' key is pressed,
+     *  then method tries to focus next/previous sibling based on target.
+     *
+     * @param event Keydown event
+     */
+    private onKeyDown;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UICallout.d.ts.map

package/dist/components/UICallout/UICallout.js

@@ -1,123 +1,123 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UICallout = exports.getCalloutStyle = exports.UICalloutContentPadding = exports.CALLOUT_STYLES = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@fluentui/react");
-const utilities_1 = require("../../utilities");
-require("../../styles/_shadows.scss");
-exports.CALLOUT_STYLES = {
-    background: 'var(--vscode-editorSuggestWidget-background)',
-    boxShadow: 'var(--ui-box-shadow-small)',
-    text: 'var(--vscode-editorSuggestWidget-foreground)',
-    font: 'var(--vscode-font-family)',
-    borderRadius: 4
-};
-var UICalloutContentPadding;
-(function (UICalloutContentPadding) {
-    UICalloutContentPadding["None"] = "None";
-    UICalloutContentPadding["Standard"] = "Standard";
-})(UICalloutContentPadding = exports.UICalloutContentPadding || (exports.UICalloutContentPadding = {}));
-// Control content padding with different states to avoid different hardcoded values across extensions
-const CALLOUT_CONTENT_PADDING = new Map([[UICalloutContentPadding.Standard, 8]]);
-/**
- * Method receives callout style and extracts into raw styles object.
- *
- * @param {IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles> | undefined} styles Callout styles.
- * @param {keyof ICalloutContentStyles} name Callout style type.
- * @returns {IRawStyle} Raw style object.
- */
-const extractRawStyles = (styles, name) => {
-    if (typeof styles === 'object' && typeof styles[name] === 'object') {
-        return styles[name];
-    }
-    return {};
-};
-const getCalloutStyle = (props) => {
-    return {
-        root: {
-            boxShadow: exports.CALLOUT_STYLES.boxShadow,
-            backgroundColor: 'transparent',
-            borderRadius: exports.CALLOUT_STYLES.borderRadius,
-            ...extractRawStyles(props.styles, 'root')
-        },
-        beak: {
-            backgroundColor: exports.CALLOUT_STYLES.background,
-            boxShadow: exports.CALLOUT_STYLES.boxShadow,
-            ...extractRawStyles(props.styles, 'beak')
-        },
-        beakCurtain: {
-            backgroundColor: exports.CALLOUT_STYLES.background,
-            borderRadius: exports.CALLOUT_STYLES.borderRadius,
-            ...extractRawStyles(props.styles, 'beakCurtain')
-        },
-        calloutMain: {
-            backgroundColor: exports.CALLOUT_STYLES.background,
-            color: exports.CALLOUT_STYLES.text,
-            fontFamily: exports.CALLOUT_STYLES.font,
-            borderRadius: exports.CALLOUT_STYLES.borderRadius,
-            minWidth: props.calloutMinWidth ?? 300,
-            boxSizing: 'border-box',
-            padding: CALLOUT_CONTENT_PADDING.get(props.contentPadding || UICalloutContentPadding.None),
-            ...extractRawStyles(props.styles, 'calloutMain')
-        },
-        container: extractRawStyles(props.styles, 'container')
-    };
-};
-exports.getCalloutStyle = getCalloutStyle;
-/**
- * UICallout component.
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/callout
- *
- * @exports
- * @class UICallout
- * @extends {React.Component<ICalloutProps, {}>}
- */
-class UICallout extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UICalloutProps} props
-     */
-    constructor(props) {
-        super(props);
-        this.onKeyDown = this.onKeyDown.bind(this);
-    }
-    /**
-     * Method handles keydown event.
-     * If "focusTargetSiblingOnTabPress" property is set and 'Tab' key is pressed,
-     *  then method tries to focus next/previous sibling based on target.
-     *
-     * @param event Keydown event
-     */
-    onKeyDown(event) {
-        const { onKeyDown, focusTargetSiblingOnTabPress, target } = this.props;
-        if (focusTargetSiblingOnTabPress && event.key === 'Tab' && target) {
-            let targetRef = null;
-            if (typeof target === 'string') {
-                const currentDoc = (0, react_2.getDocument)();
-                targetRef = currentDoc?.querySelector(target);
-            }
-            else if ('getBoundingClientRect' in target && (0, utilities_1.isHTMLElement)(target)) {
-                targetRef = target;
-            }
-            if (targetRef && (0, utilities_1.focusToSibling)(targetRef, !event.shiftKey)) {
-                // Stop event bubbling to avoid default browser behavior
-                event.stopPropagation();
-                event.preventDefault();
-            }
-        }
-        // Call external subscriber
-        onKeyDown?.(event);
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        return (react_1.default.createElement(react_2.Callout, { ...this.props, onKeyDown: this.onKeyDown, styles: (0, exports.getCalloutStyle)(this.props) }, this.props.children));
-    }
-}
-exports.UICallout = UICallout;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UICallout = exports.getCalloutStyle = exports.UICalloutContentPadding = exports.CALLOUT_STYLES = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const utilities_1 = require("../../utilities");
+require("../../styles/_shadows.scss");
+exports.CALLOUT_STYLES = {
+    background: 'var(--vscode-editorSuggestWidget-background)',
+    boxShadow: 'var(--ui-box-shadow-small)',
+    text: 'var(--vscode-editorSuggestWidget-foreground)',
+    font: 'var(--vscode-font-family)',
+    borderRadius: 4
+};
+var UICalloutContentPadding;
+(function (UICalloutContentPadding) {
+    UICalloutContentPadding["None"] = "None";
+    UICalloutContentPadding["Standard"] = "Standard";
+})(UICalloutContentPadding = exports.UICalloutContentPadding || (exports.UICalloutContentPadding = {}));
+// Control content padding with different states to avoid different hardcoded values across extensions
+const CALLOUT_CONTENT_PADDING = new Map([[UICalloutContentPadding.Standard, 8]]);
+/**
+ * Method receives callout style and extracts into raw styles object.
+ *
+ * @param {IStyleFunctionOrObject<ICalloutContentStyleProps, ICalloutContentStyles> | undefined} styles Callout styles.
+ * @param {keyof ICalloutContentStyles} name Callout style type.
+ * @returns {IRawStyle} Raw style object.
+ */
+const extractRawStyles = (styles, name) => {
+    if (typeof styles === 'object' && typeof styles[name] === 'object') {
+        return styles[name];
+    }
+    return {};
+};
+const getCalloutStyle = (props) => {
+    return {
+        root: {
+            boxShadow: exports.CALLOUT_STYLES.boxShadow,
+            backgroundColor: 'transparent',
+            borderRadius: exports.CALLOUT_STYLES.borderRadius,
+            ...extractRawStyles(props.styles, 'root')
+        },
+        beak: {
+            backgroundColor: exports.CALLOUT_STYLES.background,
+            boxShadow: exports.CALLOUT_STYLES.boxShadow,
+            ...extractRawStyles(props.styles, 'beak')
+        },
+        beakCurtain: {
+            backgroundColor: exports.CALLOUT_STYLES.background,
+            borderRadius: exports.CALLOUT_STYLES.borderRadius,
+            ...extractRawStyles(props.styles, 'beakCurtain')
+        },
+        calloutMain: {
+            backgroundColor: exports.CALLOUT_STYLES.background,
+            color: exports.CALLOUT_STYLES.text,
+            fontFamily: exports.CALLOUT_STYLES.font,
+            borderRadius: exports.CALLOUT_STYLES.borderRadius,
+            minWidth: props.calloutMinWidth ?? 300,
+            boxSizing: 'border-box',
+            padding: CALLOUT_CONTENT_PADDING.get(props.contentPadding || UICalloutContentPadding.None),
+            ...extractRawStyles(props.styles, 'calloutMain')
+        },
+        container: extractRawStyles(props.styles, 'container')
+    };
+};
+exports.getCalloutStyle = getCalloutStyle;
+/**
+ * UICallout component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/callout
+ *
+ * @exports
+ * @class UICallout
+ * @extends {React.Component<ICalloutProps, {}>}
+ */
+class UICallout extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UICalloutProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.onKeyDown = this.onKeyDown.bind(this);
+    }
+    /**
+     * Method handles keydown event.
+     * If "focusTargetSiblingOnTabPress" property is set and 'Tab' key is pressed,
+     *  then method tries to focus next/previous sibling based on target.
+     *
+     * @param event Keydown event
+     */
+    onKeyDown(event) {
+        const { onKeyDown, focusTargetSiblingOnTabPress, target } = this.props;
+        if (focusTargetSiblingOnTabPress && event.key === 'Tab' && target) {
+            let targetRef = null;
+            if (typeof target === 'string') {
+                const currentDoc = (0, react_2.getDocument)();
+                targetRef = currentDoc?.querySelector(target);
+            }
+            else if ('getBoundingClientRect' in target && (0, utilities_1.isHTMLElement)(target)) {
+                targetRef = target;
+            }
+            if (targetRef && (0, utilities_1.focusToSibling)(targetRef, !event.shiftKey)) {
+                // Stop event bubbling to avoid default browser behavior
+                event.stopPropagation();
+                event.preventDefault();
+            }
+        }
+        // Call external subscriber
+        onKeyDown?.(event);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        return (react_1.default.createElement(react_2.Callout, { ...this.props, onKeyDown: this.onKeyDown, styles: (0, exports.getCalloutStyle)(this.props) }, this.props.children));
+    }
+}
+exports.UICallout = UICallout;
 //# sourceMappingURL=UICallout.js.map