@sap-ux/ui-components 1.14.1 → 1.15.0

package/dist/components/UIButton/UIIconButton.js

@@ -1,107 +1,107 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIIconButton = exports.UIIconButtonSizes = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@fluentui/react");
-const UIContextualMenu_1 = require("../UIContextualMenu");
-var UIIconButtonSizes;
-(function (UIIconButtonSizes) {
-    UIIconButtonSizes["Default"] = "Default";
-    UIIconButtonSizes["Wide"] = "Wide";
-})(UIIconButtonSizes = exports.UIIconButtonSizes || (exports.UIIconButtonSizes = {}));
-/**
- * UIIconButton component.
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
- *
- * @exports
- * @class UIIconButton
- * @extends {React.Component<ButtonProps, {}>}
- */
-class UIIconButton extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {ButtonProps} props
-     */
-    constructor(props) {
-        super(props);
-        this.setStyle = (props) => {
-            const sizeType = props.sizeType || UIIconButtonSizes.Default;
-            const width = sizeType === UIIconButtonSizes.Default ? 16 : 26;
-            return {
-                root: {
-                    minWidth: 'initial',
-                    height: 16,
-                    width: width,
-                    boxSizing: 'content-box',
-                    padding: 3,
-                    backgroundColor: 'transparent',
-                    borderRadius: 4,
-                    selectors: {
-                        // Focus through tab navigation
-                        '.ms-Fabric--isFocusVisible &:focus:after': {
-                            outline: '1px solid var(--vscode-focusBorder)'
-                        }
-                    }
-                },
-                rootDisabled: {
-                    backgroundColor: 'transparent',
-                    opacity: '0.4'
-                },
-                rootHasMenu: {
-                    width: width
-                },
-                rootHovered: {
-                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
-                    outline: '1px dashed var(--vscode-contrastActiveBorder)'
-                },
-                rootPressed: {
-                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-activeBackground')
-                },
-                rootExpanded: {
-                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
-                    width: width
-                },
-                rootExpandedHovered: { backgroundColor: 'transparent' },
-                flexContainer: {
-                    width: '100%',
-                    height: '100%'
-                },
-                icon: {
-                    height: 16,
-                    width: width,
-                    lineHeight: 16
-                },
-                iconHovered: {
-                    backgroundColor: 'transparent'
-                },
-                menuIconExpanded: {
-                    display: 'none'
-                },
-                menuIcon: {
-                    display: 'none'
-                }
-            };
-        };
-    }
-    /**
-     * Method which returns button interaction background with including fallback for old VSCode or BAS versions.
-     *
-     * @param {string} color First choise color.
-     * @returns {string} CSS value for background color with fallback.
-     */
-    getButtonInteractionBackgroundColor(color) {
-        return `var(${color}, var(--vscode-menubar-selectionBackground))`;
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        return react_1.default.createElement(react_2.IconButton, { ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu_1.UIContextualMenu });
-    }
-}
-exports.UIIconButton = UIIconButton;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIIconButton = exports.UIIconButtonSizes = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const UIContextualMenu_1 = require("../UIContextualMenu");
+var UIIconButtonSizes;
+(function (UIIconButtonSizes) {
+    UIIconButtonSizes["Default"] = "Default";
+    UIIconButtonSizes["Wide"] = "Wide";
+})(UIIconButtonSizes = exports.UIIconButtonSizes || (exports.UIIconButtonSizes = {}));
+/**
+ * UIIconButton component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
+ *
+ * @exports
+ * @class UIIconButton
+ * @extends {React.Component<ButtonProps, {}>}
+ */
+class UIIconButton extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {ButtonProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.setStyle = (props) => {
+            const sizeType = props.sizeType || UIIconButtonSizes.Default;
+            const width = sizeType === UIIconButtonSizes.Default ? 16 : 26;
+            return {
+                root: {
+                    minWidth: 'initial',
+                    height: 16,
+                    width: width,
+                    boxSizing: 'content-box',
+                    padding: 3,
+                    backgroundColor: 'transparent',
+                    borderRadius: 4,
+                    selectors: {
+                        // Focus through tab navigation
+                        '.ms-Fabric--isFocusVisible &:focus:after': {
+                            outline: '1px solid var(--vscode-focusBorder)'
+                        }
+                    }
+                },
+                rootDisabled: {
+                    backgroundColor: 'transparent',
+                    opacity: '0.4'
+                },
+                rootHasMenu: {
+                    width: width
+                },
+                rootHovered: {
+                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
+                    outline: '1px dashed var(--vscode-contrastActiveBorder)'
+                },
+                rootPressed: {
+                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-activeBackground')
+                },
+                rootExpanded: {
+                    backgroundColor: this.getButtonInteractionBackgroundColor('--vscode-toolbar-hoverBackground'),
+                    width: width
+                },
+                rootExpandedHovered: { backgroundColor: 'transparent' },
+                flexContainer: {
+                    width: '100%',
+                    height: '100%'
+                },
+                icon: {
+                    height: 16,
+                    width: width,
+                    lineHeight: 16
+                },
+                iconHovered: {
+                    backgroundColor: 'transparent'
+                },
+                menuIconExpanded: {
+                    display: 'none'
+                },
+                menuIcon: {
+                    display: 'none'
+                }
+            };
+        };
+    }
+    /**
+     * Method which returns button interaction background with including fallback for old VSCode or BAS versions.
+     *
+     * @param {string} color First choise color.
+     * @returns {string} CSS value for background color with fallback.
+     */
+    getButtonInteractionBackgroundColor(color) {
+        return `var(${color}, var(--vscode-menubar-selectionBackground))`;
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        return react_1.default.createElement(react_2.IconButton, { ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu_1.UIContextualMenu });
+    }
+}
+exports.UIIconButton = UIIconButton;
 //# sourceMappingURL=UIIconButton.js.map

package/dist/components/UIButton/UISmallButton.d.ts

@@ -1,35 +1,35 @@
-import React from 'react';
-import type { IButtonProps, IButtonStyles } from '@fluentui/react';
-/**
- *
- */
-export declare class UISmallButton extends React.Component<IButtonProps, {}> {
-    private buttonSecondaryForeground;
-    /**
-     * Initializes component properties.
-     *
-     * @param {IButtonProps} props The props of the component.
-     */
-    constructor(props: IButtonProps);
-    /**
-     * Method which returns the correct css color.
-     *
-     * @param {string} color First choise color.
-     * @returns {string} CSS value for background color with fallback.
-     */
-    private getColor;
-    /**
-     * Method which returns the correct css color with a fallback value.
-     *
-     * @param {string} color First choise color.
-     * @param {string} fallbackColor fallback choise color.
-     * @returns {string} CSS value for background color with fallback.
-     */
-    private getColorwithFallback;
-    protected setStyle: (props: IButtonProps) => IButtonStyles;
-    /**
-     * @returns {JSX.Element} the rendered component.
-     */
-    render(): JSX.Element;
-}
+import React from 'react';
+import type { IButtonProps, IButtonStyles } from '@fluentui/react';
+/**
+ *
+ */
+export declare class UISmallButton extends React.Component<IButtonProps, {}> {
+    private buttonSecondaryForeground;
+    /**
+     * Initializes component properties.
+     *
+     * @param {IButtonProps} props The props of the component.
+     */
+    constructor(props: IButtonProps);
+    /**
+     * Method which returns the correct css color.
+     *
+     * @param {string} color First choise color.
+     * @returns {string} CSS value for background color with fallback.
+     */
+    private getColor;
+    /**
+     * Method which returns the correct css color with a fallback value.
+     *
+     * @param {string} color First choise color.
+     * @param {string} fallbackColor fallback choise color.
+     * @returns {string} CSS value for background color with fallback.
+     */
+    private getColorwithFallback;
+    protected setStyle: (props: IButtonProps) => IButtonStyles;
+    /**
+     * @returns {JSX.Element} the rendered component.
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UISmallButton.d.ts.map

package/dist/components/UIButton/UISmallButton.js

@@ -1,116 +1,116 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UISmallButton = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@fluentui/react");
-/**
- *
- */
-class UISmallButton extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {IButtonProps} props The props of the component.
-     */
-    constructor(props) {
-        super(props);
-        this.buttonSecondaryForeground = '--vscode-button-secondaryForeground';
-        this.setStyle = (props) => {
-            return {
-                root: {
-                    minWidth: 'initial',
-                    height: 16,
-                    fontSize: '11px',
-                    fontWeight: 400,
-                    fontFamily: 'var(--vscode-font-family)',
-                    borderRadius: 20,
-                    paddingLeft: 13,
-                    paddingRight: 13,
-                    backgroundColor: 'var(--vscode-button-secondaryBackground, #5f6a79)',
-                    borderColor: 'var(--vscode-contrastBorder, var(--vscode-button-secondaryBackground, #5f6a79))',
-                    color: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff'),
-                    ...(props.primary && {
-                        backgroundColor: this.getColor('--vscode-button-background'),
-                        borderColor: 'var(--vscode-contrastBorder, var(--vscode-button-background))',
-                        color: this.getColor('--vscode-button-foreground')
-                    }),
-                    selectors: {
-                        '.ms-Fabric--isFocusVisible &:focus:after': {
-                            outlineColor: 'var(--vscode-focusBorder)',
-                            inset: -3
-                        }
-                    }
-                },
-                label: {
-                    marginLeft: 0,
-                    marginRight: 0,
-                    fontWeight: 400,
-                    lineHeight: 11,
-                    whiteSpace: 'nowrap'
-                },
-                rootDisabled: {
-                    opacity: '0.5 !important',
-                    backgroundColor: 'var(--vscode-button-secondaryBackground,#5f6a79)',
-                    borderColor: 'var(--vscode-button-secondaryBackground, #5f6a79)',
-                    color: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff'),
-                    ...(props.primary && {
-                        opacity: '0.5 !important',
-                        color: this.getColor('--vscode-button-foreground'),
-                        backgroundColor: 'var(--vscode-button-background)',
-                        borderColor: 'var(--vscode-button-background)'
-                    })
-                },
-                rootHovered: {
-                    color: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff'),
-                    backgroundColor: 'var(--vscode-button-secondaryHoverBackground, #4c5561)',
-                    borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-secondaryHoverBackground, #4c5561))',
-                    selectors: {
-                        'svg > path, svg > rect': {
-                            fill: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff')
-                        }
-                    },
-                    ...(props.primary && {
-                        color: 'var(--vscode-button-foreground)',
-                        backgroundColor: 'var(--vscode-button-hoverBackground)',
-                        borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
-                        selectors: {
-                            'svg > path, svg > rect': {
-                                fill: 'var(--vscode-button-foreground)'
-                            }
-                        }
-                    })
-                }
-            };
-        };
-    }
-    /**
-     * Method which returns the correct css color.
-     *
-     * @param {string} color First choise color.
-     * @returns {string} CSS value for background color with fallback.
-     */
-    getColor(color) {
-        return `var(${color})`;
-    }
-    /**
-     * Method which returns the correct css color with a fallback value.
-     *
-     * @param {string} color First choise color.
-     * @param {string} fallbackColor fallback choise color.
-     * @returns {string} CSS value for background color with fallback.
-     */
-    getColorwithFallback(color, fallbackColor) {
-        return `var(${color}, ${fallbackColor})`;
-    }
-    /**
-     * @returns {JSX.Element} the rendered component.
-     */
-    render() {
-        return react_1.default.createElement(react_2.DefaultButton, { ...this.props, styles: this.setStyle(this.props) });
-    }
-}
-exports.UISmallButton = UISmallButton;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UISmallButton = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+/**
+ *
+ */
+class UISmallButton extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {IButtonProps} props The props of the component.
+     */
+    constructor(props) {
+        super(props);
+        this.buttonSecondaryForeground = '--vscode-button-secondaryForeground';
+        this.setStyle = (props) => {
+            return {
+                root: {
+                    minWidth: 'initial',
+                    height: 16,
+                    fontSize: '11px',
+                    fontWeight: 400,
+                    fontFamily: 'var(--vscode-font-family)',
+                    borderRadius: 20,
+                    paddingLeft: 13,
+                    paddingRight: 13,
+                    backgroundColor: 'var(--vscode-button-secondaryBackground, #5f6a79)',
+                    borderColor: 'var(--vscode-contrastBorder, var(--vscode-button-secondaryBackground, #5f6a79))',
+                    color: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff'),
+                    ...(props.primary && {
+                        backgroundColor: this.getColor('--vscode-button-background'),
+                        borderColor: 'var(--vscode-contrastBorder, var(--vscode-button-background))',
+                        color: this.getColor('--vscode-button-foreground')
+                    }),
+                    selectors: {
+                        '.ms-Fabric--isFocusVisible &:focus:after': {
+                            outlineColor: 'var(--vscode-focusBorder)',
+                            inset: -3
+                        }
+                    }
+                },
+                label: {
+                    marginLeft: 0,
+                    marginRight: 0,
+                    fontWeight: 400,
+                    lineHeight: 11,
+                    whiteSpace: 'nowrap'
+                },
+                rootDisabled: {
+                    opacity: '0.5 !important',
+                    backgroundColor: 'var(--vscode-button-secondaryBackground,#5f6a79)',
+                    borderColor: 'var(--vscode-button-secondaryBackground, #5f6a79)',
+                    color: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff'),
+                    ...(props.primary && {
+                        opacity: '0.5 !important',
+                        color: this.getColor('--vscode-button-foreground'),
+                        backgroundColor: 'var(--vscode-button-background)',
+                        borderColor: 'var(--vscode-button-background)'
+                    })
+                },
+                rootHovered: {
+                    color: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff'),
+                    backgroundColor: 'var(--vscode-button-secondaryHoverBackground, #4c5561)',
+                    borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-secondaryHoverBackground, #4c5561))',
+                    selectors: {
+                        'svg > path, svg > rect': {
+                            fill: this.getColorwithFallback(this.buttonSecondaryForeground, '#ffffff')
+                        }
+                    },
+                    ...(props.primary && {
+                        color: 'var(--vscode-button-foreground)',
+                        backgroundColor: 'var(--vscode-button-hoverBackground)',
+                        borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
+                        selectors: {
+                            'svg > path, svg > rect': {
+                                fill: 'var(--vscode-button-foreground)'
+                            }
+                        }
+                    })
+                }
+            };
+        };
+    }
+    /**
+     * Method which returns the correct css color.
+     *
+     * @param {string} color First choise color.
+     * @returns {string} CSS value for background color with fallback.
+     */
+    getColor(color) {
+        return `var(${color})`;
+    }
+    /**
+     * Method which returns the correct css color with a fallback value.
+     *
+     * @param {string} color First choise color.
+     * @param {string} fallbackColor fallback choise color.
+     * @returns {string} CSS value for background color with fallback.
+     */
+    getColorwithFallback(color, fallbackColor) {
+        return `var(${color}, ${fallbackColor})`;
+    }
+    /**
+     * @returns {JSX.Element} the rendered component.
+     */
+    render() {
+        return react_1.default.createElement(react_2.DefaultButton, { ...this.props, styles: this.setStyle(this.props) });
+    }
+}
+exports.UISmallButton = UISmallButton;
 //# sourceMappingURL=UISmallButton.js.map

package/dist/components/UIButton/UISplitButton.d.ts

@@ -1,45 +1,45 @@
-import * as React from 'react';
-import type { UIContextualMenuProps, UIContextualMenuItem } from '../UIContextualMenu';
-export interface UISplitButtonProps {
-    button: UIContextualMenuItem;
-    menuItems: UIContextualMenuItem[];
-    callback: (key: string) => void;
-    id?: string;
-    ariaLabel?: string;
-    ariaDescription?: string;
-    disabled?: boolean;
-}
-export interface UISplitButtonState {
-    menu: UIContextualMenuProps;
-}
-/**
- * UISplitButton component
- *
- * @exports
- * @class UISplitButton
- * @extends {React.Component<UISplitButtonProps, UISplitButtonState>}
- */
-export declare class UISplitButton extends React.Component<UISplitButtonProps, UISplitButtonState> {
-    id: string;
-    /**
-     * Initializes component properties.
-     *
-     * @param {UISplitButtonProps} props
-     */
-    constructor(props: UISplitButtonProps);
-    /**
-     * Gets derived state from properties.
-     *
-     * @param {UISplitButtonProps} newProps
-     * @param {UISplitButtonState} prevState
-     * @returns {UISplitButtonState}
-     */
-    static getDerivedStateFromProps(newProps: UISplitButtonProps, prevState: UISplitButtonState): UISplitButtonState;
-    onClick: () => void;
-    onMenuItemClick: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: UIContextualMenuItem) => void;
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
+import * as React from 'react';
+import type { UIContextualMenuProps, UIContextualMenuItem } from '../UIContextualMenu';
+export interface UISplitButtonProps {
+    button: UIContextualMenuItem;
+    menuItems: UIContextualMenuItem[];
+    callback: (key: string) => void;
+    id?: string;
+    ariaLabel?: string;
+    ariaDescription?: string;
+    disabled?: boolean;
+}
+export interface UISplitButtonState {
+    menu: UIContextualMenuProps;
+}
+/**
+ * UISplitButton component
+ *
+ * @exports
+ * @class UISplitButton
+ * @extends {React.Component<UISplitButtonProps, UISplitButtonState>}
+ */
+export declare class UISplitButton extends React.Component<UISplitButtonProps, UISplitButtonState> {
+    id: string;
+    /**
+     * Initializes component properties.
+     *
+     * @param {UISplitButtonProps} props
+     */
+    constructor(props: UISplitButtonProps);
+    /**
+     * Gets derived state from properties.
+     *
+     * @param {UISplitButtonProps} newProps
+     * @param {UISplitButtonState} prevState
+     * @returns {UISplitButtonState}
+     */
+    static getDerivedStateFromProps(newProps: UISplitButtonProps, prevState: UISplitButtonState): UISplitButtonState;
+    onClick: () => void;
+    onMenuItemClick: (ev?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, item?: UIContextualMenuItem) => void;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UISplitButton.d.ts.map