@sap-ux/ui-components 1.14.1 → 1.15.0

package/dist/components/UITooltip/UITooltip.d.ts

@@ -1,30 +1,30 @@
-import React from 'react';
-import type { ITooltipHostProps, ITooltipProps } from '@fluentui/react';
-import { TooltipDelay } from '@fluentui/react';
-export { TooltipDelay as UITooltipDelay, ITooltipProps as UIToolTipProps };
-export interface UITooltipProps extends ITooltipHostProps {
-    maxWidth?: number | string;
-    showOnFocus?: boolean;
-}
-/**
- * UITooltip component
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip
- * it can be used like <UITooltip tooltipProps={TooltipUtils.renderContent(value.name)}>{value.name}</UITooltip>
- *
- * @exports
- * @class UITooltip
- * @extends {React.Component<UITooltipProps, {}>}
- */
-export declare class UITooltip extends React.Component<UITooltipProps, {}> {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UITooltipProps} props
-     */
-    constructor(props: UITooltipProps);
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
+import React from 'react';
+import type { ITooltipHostProps, ITooltipProps } from '@fluentui/react';
+import { TooltipDelay } from '@fluentui/react';
+export { TooltipDelay as UITooltipDelay, ITooltipProps as UIToolTipProps };
+export interface UITooltipProps extends ITooltipHostProps {
+    maxWidth?: number | string;
+    showOnFocus?: boolean;
+}
+/**
+ * UITooltip component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip
+ * it can be used like <UITooltip tooltipProps={TooltipUtils.renderContent(value.name)}>{value.name}</UITooltip>
+ *
+ * @exports
+ * @class UITooltip
+ * @extends {React.Component<UITooltipProps, {}>}
+ */
+export declare class UITooltip extends React.Component<UITooltipProps, {}> {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UITooltipProps} props
+     */
+    constructor(props: UITooltipProps);
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UITooltip.d.ts.map

package/dist/components/UITooltip/UITooltip.js

@@ -1,78 +1,78 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UITooltip = exports.UITooltipDelay = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@fluentui/react");
-Object.defineProperty(exports, "UITooltipDelay", { enumerable: true, get: function () { return react_2.TooltipDelay; } });
-const UICallout_1 = require("../UICallout");
-/**
- * UITooltip component
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip
- * it can be used like <UITooltip tooltipProps={TooltipUtils.renderContent(value.name)}>{value.name}</UITooltip>
- *
- * @exports
- * @class UITooltip
- * @extends {React.Component<UITooltipProps, {}>}
- */
-class UITooltip extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {UITooltipProps} props
-     */
-    constructor(props) {
-        super(props);
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        const maxWidth = this.props.maxWidth !== undefined ? this.props.maxWidth : 200;
-        const TooltipHostStyles = () => ({
-            ...{
-                root: {
-                    display: 'inline-block'
-                },
-                content: {
-                    backgroundColor: UICallout_1.CALLOUT_STYLES.background,
-                    color: UICallout_1.CALLOUT_STYLES.text,
-                    fontFamily: UICallout_1.CALLOUT_STYLES.font
-                }
-            },
-            ...this.props.styles
-        });
-        const CalloutStyles = () => {
-            // We can not reuse `UICallout` component from `UITooltip`, but we can reuse same styles from `UICallout` component
-            // In result callout in Tooltip would look same/similar
-            return (0, UICallout_1.getCalloutStyle)({
-                calloutMinWidth: 0,
-                // Apply some different styles
-                styles: {
-                    root: {
-                        display: 'inline-block'
-                    },
-                    calloutMain: {
-                        padding: 10,
-                        maxWidth
-                    }
-                }
-            });
-        };
-        const CalloutProps = {
-            beakWidth: 10,
-            styles: CalloutStyles
-        };
-        const tooltipHost = (react_1.default.createElement(react_2.TooltipHost, { ...this.props, styles: TooltipHostStyles, calloutProps: { ...CalloutProps, ...this.props.calloutProps } }));
-        return this.props.showOnFocus ? (tooltipHost) : (react_1.default.createElement("div", { onFocusCapture: (event) => {
-                if (event.target.parentElement && event.target.parentElement.classList.contains('ms-TooltipHost')) {
-                    // Stop propagation to avoid display of tooltip on focus
-                    event.stopPropagation();
-                }
-            } }, tooltipHost));
-    }
-}
-exports.UITooltip = UITooltip;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UITooltip = exports.UITooltipDelay = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+Object.defineProperty(exports, "UITooltipDelay", { enumerable: true, get: function () { return react_2.TooltipDelay; } });
+const UICallout_1 = require("../UICallout");
+/**
+ * UITooltip component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/tooltip
+ * it can be used like <UITooltip tooltipProps={TooltipUtils.renderContent(value.name)}>{value.name}</UITooltip>
+ *
+ * @exports
+ * @class UITooltip
+ * @extends {React.Component<UITooltipProps, {}>}
+ */
+class UITooltip extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {UITooltipProps} props
+     */
+    constructor(props) {
+        super(props);
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const maxWidth = this.props.maxWidth !== undefined ? this.props.maxWidth : 200;
+        const TooltipHostStyles = () => ({
+            ...{
+                root: {
+                    display: 'inline-block'
+                },
+                content: {
+                    backgroundColor: UICallout_1.CALLOUT_STYLES.background,
+                    color: UICallout_1.CALLOUT_STYLES.text,
+                    fontFamily: UICallout_1.CALLOUT_STYLES.font
+                }
+            },
+            ...this.props.styles
+        });
+        const CalloutStyles = () => {
+            // We can not reuse `UICallout` component from `UITooltip`, but we can reuse same styles from `UICallout` component
+            // In result callout in Tooltip would look same/similar
+            return (0, UICallout_1.getCalloutStyle)({
+                calloutMinWidth: 0,
+                // Apply some different styles
+                styles: {
+                    root: {
+                        display: 'inline-block'
+                    },
+                    calloutMain: {
+                        padding: 10,
+                        maxWidth
+                    }
+                }
+            });
+        };
+        const CalloutProps = {
+            beakWidth: 10,
+            styles: CalloutStyles
+        };
+        const tooltipHost = (react_1.default.createElement(react_2.TooltipHost, { ...this.props, styles: TooltipHostStyles, calloutProps: { ...CalloutProps, ...this.props.calloutProps } }));
+        return this.props.showOnFocus ? (tooltipHost) : (react_1.default.createElement("div", { onFocusCapture: (event) => {
+                if (event.target.parentElement && event.target.parentElement.classList.contains('ms-TooltipHost')) {
+                    // Stop propagation to avoid display of tooltip on focus
+                    event.stopPropagation();
+                }
+            } }, tooltipHost));
+    }
+}
+exports.UITooltip = UITooltip;
 //# sourceMappingURL=UITooltip.js.map

package/dist/components/UITooltip/UITooltipUtils.d.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-import type { ITooltipProps, ITooltipStyles } from '@fluentui/react';
-/**
- * UITooltipUtil class for rendering content
- *
- * @class UITooltipUtils
- */
-export declare class UITooltipUtils {
-    /**
-     * Method returns styles for tooltip content.
-     *
-     * @returns {ITooltipStyles} Object with tooltip styles.
-     */
-    static getStyles(): ITooltipStyles;
-    static renderContent: (content: string | React.ReactElement | null) => ITooltipProps;
-    static renderHTMLContent: (content: string) => ITooltipProps;
-}
+import React from 'react';
+import type { ITooltipProps, ITooltipStyles } from '@fluentui/react';
+/**
+ * UITooltipUtil class for rendering content
+ *
+ * @class UITooltipUtils
+ */
+export declare class UITooltipUtils {
+    /**
+     * Method returns styles for tooltip content.
+     *
+     * @returns {ITooltipStyles} Object with tooltip styles.
+     */
+    static getStyles(): ITooltipStyles;
+    static renderContent: (content: string | React.ReactElement | null) => ITooltipProps;
+    static renderHTMLContent: (content: string) => ITooltipProps;
+}
 //# sourceMappingURL=UITooltipUtils.d.ts.map

package/dist/components/UITooltip/UITooltipUtils.js

@@ -1,46 +1,46 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UITooltipUtils = void 0;
-const react_1 = __importDefault(require("react"));
-const sanitize_html_1 = __importDefault(require("sanitize-html"));
-const UICallout_1 = require("../UICallout");
-/**
- * UITooltipUtil class for rendering content
- *
- * @class UITooltipUtils
- */
-class UITooltipUtils {
-    /**
-     * Method returns styles for tooltip content.
-     *
-     * @returns {ITooltipStyles} Object with tooltip styles.
-     */
-    static getStyles() {
-        return {
-            root: {},
-            content: {
-                background: UICallout_1.CALLOUT_STYLES.background,
-                color: UICallout_1.CALLOUT_STYLES.text
-            },
-            subText: {}
-        };
-    }
-}
-exports.UITooltipUtils = UITooltipUtils;
-UITooltipUtils.renderContent = (content) => {
-    return {
-        onRenderContent: () => react_1.default.createElement("span", null, content ?? ''),
-        styles: UITooltipUtils.getStyles()
-    };
-};
-UITooltipUtils.renderHTMLContent = (content) => {
-    const sanitized = (0, sanitize_html_1.default)(content);
-    return {
-        onRenderContent: () => react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: sanitized } }),
-        styles: UITooltipUtils.getStyles()
-    };
-};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UITooltipUtils = void 0;
+const react_1 = __importDefault(require("react"));
+const sanitize_html_1 = __importDefault(require("sanitize-html"));
+const UICallout_1 = require("../UICallout");
+/**
+ * UITooltipUtil class for rendering content
+ *
+ * @class UITooltipUtils
+ */
+class UITooltipUtils {
+    /**
+     * Method returns styles for tooltip content.
+     *
+     * @returns {ITooltipStyles} Object with tooltip styles.
+     */
+    static getStyles() {
+        return {
+            root: {},
+            content: {
+                background: UICallout_1.CALLOUT_STYLES.background,
+                color: UICallout_1.CALLOUT_STYLES.text
+            },
+            subText: {}
+        };
+    }
+}
+exports.UITooltipUtils = UITooltipUtils;
+UITooltipUtils.renderContent = (content) => {
+    return {
+        onRenderContent: () => react_1.default.createElement("span", null, content ?? ''),
+        styles: UITooltipUtils.getStyles()
+    };
+};
+UITooltipUtils.renderHTMLContent = (content) => {
+    const sanitized = (0, sanitize_html_1.default)(content);
+    return {
+        onRenderContent: () => react_1.default.createElement("span", { dangerouslySetInnerHTML: { __html: sanitized } }),
+        styles: UITooltipUtils.getStyles()
+    };
+};
 //# sourceMappingURL=UITooltipUtils.js.map

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

@@ -1,3 +1,3 @@
-export * from './UITooltip';
-export * from './UITooltipUtils';
+export * from './UITooltip';
+export * from './UITooltipUtils';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/UITooltip/index.js

@@ -1,19 +1,19 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./UITooltip"), exports);
-__exportStar(require("./UITooltipUtils"), exports);
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./UITooltip"), exports);
+__exportStar(require("./UITooltipUtils"), exports);
 //# sourceMappingURL=index.js.map

package/dist/components/UITranslationInput/UIFormattedText.d.ts

@@ -1,47 +1,47 @@
-import type { ReactElement } from 'react';
-interface MessageTextValues {
-    [key: string]: string;
-}
-export interface UIFormattedTextProps {
-    children: string;
-    values?: MessageTextValues;
-}
-interface ParseResult {
-    texts: Array<string>;
-    bolds: Array<string>;
-}
-/**
- * Method separates given text between found values and rest unformatted text.
- *
- * @param text Text to parse.
- * @param values Map with values to search.
- * @returns Object containing separated `texts` and `formatted` arrays.
- */
-export declare const parseText: (text: string, values: MessageTextValues) => ParseResult;
-/**
- * Method formats text with callback method to provide option to use different markup to highligh matching result in text.
- *
- * @param text Text to parse.
- * @param values Map with values to search.
- * @param cb Callback method to apply text highlight.
- * @returns Array with formatted text parts.
- */
-export declare function formatTextGeneric<T>(text: string, values: MessageTextValues, cb: (index: number, textPart: string, match?: string) => T): T[];
-/**
- * Method formats string text with replacing matching values with same string without any highlight.
- *
- * @param text Text to parse.
- * @param values Map with values to search.
- * @returns Formatted text string.
- */
-export declare function formatText(text: string, values: MessageTextValues): string;
-/**
- * Component to show formatted text with highlighting matching entries.
- * Entries with '{{{key}}}' will be replaced with passed value and wrapped in bold.
- *
- * @param props Component properties.
- * @returns Component to render formatted text.
- */
-export declare function UIFormattedText(props: UIFormattedTextProps): ReactElement;
-export {};
+import type { ReactElement } from 'react';
+interface MessageTextValues {
+    [key: string]: string;
+}
+export interface UIFormattedTextProps {
+    children: string;
+    values?: MessageTextValues;
+}
+interface ParseResult {
+    texts: Array<string>;
+    bolds: Array<string>;
+}
+/**
+ * Method separates given text between found values and rest unformatted text.
+ *
+ * @param text Text to parse.
+ * @param values Map with values to search.
+ * @returns Object containing separated `texts` and `formatted` arrays.
+ */
+export declare const parseText: (text: string, values: MessageTextValues) => ParseResult;
+/**
+ * Method formats text with callback method to provide option to use different markup to highligh matching result in text.
+ *
+ * @param text Text to parse.
+ * @param values Map with values to search.
+ * @param cb Callback method to apply text highlight.
+ * @returns Array with formatted text parts.
+ */
+export declare function formatTextGeneric<T>(text: string, values: MessageTextValues, cb: (index: number, textPart: string, match?: string) => T): T[];
+/**
+ * Method formats string text with replacing matching values with same string without any highlight.
+ *
+ * @param text Text to parse.
+ * @param values Map with values to search.
+ * @returns Formatted text string.
+ */
+export declare function formatText(text: string, values: MessageTextValues): string;
+/**
+ * Component to show formatted text with highlighting matching entries.
+ * Entries with '{{{key}}}' will be replaced with passed value and wrapped in bold.
+ *
+ * @param props Component properties.
+ * @returns Component to render formatted text.
+ */
+export declare function UIFormattedText(props: UIFormattedTextProps): ReactElement;
+export {};
 //# sourceMappingURL=UIFormattedText.d.ts.map