@sap-ux/ui-components 1.14.1 → 1.14.2

package/dist/components/UIButton/UIDefaultButton.js

@@ -1,256 +1,256 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIDefaultButton = exports.BASE_STYLES = void 0;
-const react_1 = __importDefault(require("react"));
-const react_2 = require("@fluentui/react");
-const UIContextualMenu_1 = require("../UIContextualMenu");
-const UIInput_1 = require("../UIInput");
-exports.BASE_STYLES = {
-    color: 'var(--vscode-button-foreground)',
-    primary: {
-        backgroundColor: 'var(--vscode-button-background)',
-        disabledBorderColor: 'var(--vscode-button-border, var(--vscode-button-background))',
-        borderColor: 'var(--vscode-button-border, var(--vscode-contrastBorder, var(--vscode-button-background)))',
-        hoverBackgroundColor: 'var(--vscode-button-hoverBackground)',
-        hoverBorderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border, var(--vscode-button-hoverBackground)))'
-    },
-    secondary: {
-        backgroundColor: 'var(--vscode-button-secondaryBackground, #5f6a79)',
-        disabledBorderColor: 'var(--vscode-button-border, var(--vscode-button-secondaryBackground, #5f6a79))',
-        borderColor: 'var(--vscode-button-border, var(--vscode-contrastBorder, var(--vscode-button-secondaryBackground, #5f6a79)))',
-        hoverBackgroundColor: 'var(--vscode-button-secondaryHoverBackground, #4c5561)',
-        hoverBorderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border, var(--vscode-button-secondaryHoverBackground, #4c5561)))',
-        color: 'var(--vscode-button-secondaryForeground, #ffffff)'
-    }
-};
-/**
- * UIDefaultButton component
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
- *
- * @exports
- * @class UIDefaultButton
- * @extends {React.Component<IButtonProps, {}>}
- */
-class UIDefaultButton extends react_1.default.Component {
-    /**
-     * Initializes component properties.
-     *
-     * @param {IButtonProps} props
-     */
-    constructor(props) {
-        super(props);
-        this.setStyle = (props) => {
-            const dividerStyle = {
-                position: 'absolute',
-                width: 1,
-                right: 21,
-                top: 0,
-                bottom: 0,
-                backgroundColor: 'var(--vscode-editor-background)'
-            };
-            return {
-                root: {
-                    minWidth: 'initial',
-                    height: 22,
-                    fontSize: '13px',
-                    fontWeight: 400,
-                    fontFamily: 'var(--vscode-font-family)',
-                    borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
-                    paddingLeft: 13,
-                    paddingRight: 13,
-                    // Add to use hard coded value here as Theia doesn't support these values correctly
-                    // as on Theia
-                    // `--vscode-button-secondaryBackground` does not exist and is replaced by:
-                    // `--vscode-secondaryButton-background` = #ffffff
-                    // `--vscode-secondaryButton-foreground` does not exist
-                    // And on VSCode `--vscode-button-secondaryForeground` exist and is equal to `#ffffff`
-                    // So if we use the declare Theia variable `--vscode-secondaryButton-background` it will be white on white!!!
-                    // And to finish these stuff of course Theia mess with the highContrast theme as it does not have any of them.
-                    // Theia colors are a mess!!!!
-                    backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
-                    borderColor: exports.BASE_STYLES.secondary.borderColor,
-                    color: exports.BASE_STYLES.secondary.color,
-                    ...(props.primary && {
-                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
-                        borderColor: exports.BASE_STYLES.primary.borderColor,
-                        color: exports.BASE_STYLES.color
-                    }),
-                    selectors: {
-                        '.ms-Fabric--isFocusVisible &:focus:after': {
-                            outlineColor: 'var(--vscode-focusBorder)',
-                            inset: -3
-                        }
-                    }
-                },
-                flexContainer: {
-                    height: 18
-                },
-                label: {
-                    marginLeft: 0,
-                    marginRight: 0,
-                    fontWeight: 400,
-                    lineHeight: 20,
-                    whiteSpace: 'nowrap'
-                },
-                rootDisabled: {
-                    opacity: '0.5 !important',
-                    // Add to use hard coded value here as Theia doesn't support these values correctly
-                    backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
-                    borderColor: exports.BASE_STYLES.secondary.disabledBorderColor,
-                    color: exports.BASE_STYLES.secondary.color,
-                    ...(props.primary && {
-                        opacity: '0.5 !important',
-                        color: exports.BASE_STYLES.color,
-                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
-                        borderColor: exports.BASE_STYLES.primary.disabledBorderColor
-                    })
-                },
-                rootHovered: {
-                    // Add to use hard coded value here as Theia doesn't support these values correctly
-                    color: exports.BASE_STYLES.secondary.color,
-                    backgroundColor: exports.BASE_STYLES.secondary.hoverBackgroundColor,
-                    borderColor: exports.BASE_STYLES.secondary.hoverBorderColor,
-                    selectors: {
-                        'svg > path, svg > rect': {
-                            fill: exports.BASE_STYLES.secondary.color
-                        }
-                    },
-                    ...(props.primary && {
-                        color: exports.BASE_STYLES.color,
-                        backgroundColor: exports.BASE_STYLES.primary.hoverBackgroundColor,
-                        borderColor: exports.BASE_STYLES.primary.hoverBorderColor,
-                        selectors: {
-                            'svg > path, svg > rect': {
-                                fill: exports.BASE_STYLES.color
-                            }
-                        }
-                    })
-                },
-                icon: {
-                    height: 16,
-                    lineHeight: 16,
-                    marginLeft: -3,
-                    color: exports.BASE_STYLES.secondary.color,
-                    selectors: {
-                        'svg > path, svg > rect': {
-                            fill: exports.BASE_STYLES.secondary.color
-                        }
-                    },
-                    ...(props.primary && {
-                        color: exports.BASE_STYLES.color,
-                        selectors: {
-                            'svg > path, svg > rect': {
-                                fill: exports.BASE_STYLES.color
-                            }
-                        }
-                    })
-                },
-                menuIcon: {
-                    selectors: {
-                        'svg > path': {
-                            fill: exports.BASE_STYLES.secondary.color
-                        },
-                        ...(props.primary && {
-                            'svg > path': {
-                                fill: exports.BASE_STYLES.color
-                            }
-                        })
-                    }
-                },
-                splitButtonMenuButton: {
-                    padding: 6,
-                    height: 22,
-                    boxSizing: 'border-box',
-                    borderRadius: `0 ${UIInput_1.COMMON_INPUT_STYLES.borderRadius}px ${UIInput_1.COMMON_INPUT_STYLES.borderRadius}px 0 !important`,
-                    borderLeft: 'none',
-                    outline: 'transparent',
-                    userSelect: 'none',
-                    display: 'inline-block',
-                    textDecoration: 'none',
-                    textAlign: 'center',
-                    cursor: 'pointer',
-                    verticalAlign: 'top',
-                    width: 22,
-                    marginLeft: -1,
-                    marginTop: 0,
-                    marginRight: 0,
-                    marginBottom: 0,
-                    backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
-                    borderColor: exports.BASE_STYLES.primary.borderColor,
-                    color: exports.BASE_STYLES.color,
-                    selectors: {
-                        '&:hover': {
-                            color: exports.BASE_STYLES.color,
-                            backgroundColor: 'var(--vscode-button-hoverBackground)',
-                            borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
-                            selectors: {
-                                'svg > path, svg > rect': {
-                                    fill: exports.BASE_STYLES.color
-                                }
-                            }
-                        }
-                    }
-                },
-                splitButtonMenuButtonDisabled: {
-                    opacity: '0.5 !important',
-                    // Add to use hard coded value here as Theia doesn't support these values correctly
-                    backgroundColor: 'var(--vscode-button-secondaryBackground,#5f6a79)',
-                    borderColor: exports.BASE_STYLES.secondary.backgroundColor,
-                    color: exports.BASE_STYLES.secondary.color,
-                    ...(props.primary && {
-                        color: exports.BASE_STYLES.color,
-                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
-                        borderColor: 'var(--vscode-button-background)'
-                    })
-                },
-                splitButtonMenuFocused: {
-                    selectors: {
-                        '&:focus': {
-                            color: 'red'
-                        }
-                    }
-                },
-                splitButtonMenuButtonExpanded: {
-                    color: exports.BASE_STYLES.color,
-                    backgroundColor: 'var(--vscode-button-hoverBackground)',
-                    borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
-                    selectors: {
-                        'svg > path, svg > rect': {
-                            fill: exports.BASE_STYLES.color
-                        },
-                        '&:hover': {
-                            color: exports.BASE_STYLES.color,
-                            backgroundColor: 'var(--vscode-button-hoverBackground)',
-                            borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
-                            selectors: {
-                                'svg > path, svg > rect': {
-                                    fill: exports.BASE_STYLES.color
-                                }
-                            }
-                        }
-                    }
-                },
-                splitButtonDivider: dividerStyle,
-                splitButtonDividerDisabled: dividerStyle,
-                splitButtonContainerFocused: {
-                    '.ms-Fabric--isFocusVisible &:focus:after': {
-                        border: 'none',
-                        outlineColor: 'var(--vscode-focusBorder)',
-                        inset: -2
-                    }
-                }
-            };
-        };
-    }
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        return react_1.default.createElement(react_2.DefaultButton, { ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu_1.UIContextualMenu });
-    }
-}
-exports.UIDefaultButton = UIDefaultButton;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIDefaultButton = exports.BASE_STYLES = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const UIContextualMenu_1 = require("../UIContextualMenu");
+const UIInput_1 = require("../UIInput");
+exports.BASE_STYLES = {
+    color: 'var(--vscode-button-foreground)',
+    primary: {
+        backgroundColor: 'var(--vscode-button-background)',
+        disabledBorderColor: 'var(--vscode-button-border, var(--vscode-button-background))',
+        borderColor: 'var(--vscode-button-border, var(--vscode-contrastBorder, var(--vscode-button-background)))',
+        hoverBackgroundColor: 'var(--vscode-button-hoverBackground)',
+        hoverBorderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border, var(--vscode-button-hoverBackground)))'
+    },
+    secondary: {
+        backgroundColor: 'var(--vscode-button-secondaryBackground, #5f6a79)',
+        disabledBorderColor: 'var(--vscode-button-border, var(--vscode-button-secondaryBackground, #5f6a79))',
+        borderColor: 'var(--vscode-button-border, var(--vscode-contrastBorder, var(--vscode-button-secondaryBackground, #5f6a79)))',
+        hoverBackgroundColor: 'var(--vscode-button-secondaryHoverBackground, #4c5561)',
+        hoverBorderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-border, var(--vscode-button-secondaryHoverBackground, #4c5561)))',
+        color: 'var(--vscode-button-secondaryForeground, #ffffff)'
+    }
+};
+/**
+ * UIDefaultButton component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
+ *
+ * @exports
+ * @class UIDefaultButton
+ * @extends {React.Component<IButtonProps, {}>}
+ */
+class UIDefaultButton extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     *
+     * @param {IButtonProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.setStyle = (props) => {
+            const dividerStyle = {
+                position: 'absolute',
+                width: 1,
+                right: 21,
+                top: 0,
+                bottom: 0,
+                backgroundColor: 'var(--vscode-editor-background)'
+            };
+            return {
+                root: {
+                    minWidth: 'initial',
+                    height: 22,
+                    fontSize: '13px',
+                    fontWeight: 400,
+                    fontFamily: 'var(--vscode-font-family)',
+                    borderRadius: UIInput_1.COMMON_INPUT_STYLES.borderRadius,
+                    paddingLeft: 13,
+                    paddingRight: 13,
+                    // Add to use hard coded value here as Theia doesn't support these values correctly
+                    // as on Theia
+                    // `--vscode-button-secondaryBackground` does not exist and is replaced by:
+                    // `--vscode-secondaryButton-background` = #ffffff
+                    // `--vscode-secondaryButton-foreground` does not exist
+                    // And on VSCode `--vscode-button-secondaryForeground` exist and is equal to `#ffffff`
+                    // So if we use the declare Theia variable `--vscode-secondaryButton-background` it will be white on white!!!
+                    // And to finish these stuff of course Theia mess with the highContrast theme as it does not have any of them.
+                    // Theia colors are a mess!!!!
+                    backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
+                    borderColor: exports.BASE_STYLES.secondary.borderColor,
+                    color: exports.BASE_STYLES.secondary.color,
+                    ...(props.primary && {
+                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
+                        borderColor: exports.BASE_STYLES.primary.borderColor,
+                        color: exports.BASE_STYLES.color
+                    }),
+                    selectors: {
+                        '.ms-Fabric--isFocusVisible &:focus:after': {
+                            outlineColor: 'var(--vscode-focusBorder)',
+                            inset: -3
+                        }
+                    }
+                },
+                flexContainer: {
+                    height: 18
+                },
+                label: {
+                    marginLeft: 0,
+                    marginRight: 0,
+                    fontWeight: 400,
+                    lineHeight: 20,
+                    whiteSpace: 'nowrap'
+                },
+                rootDisabled: {
+                    opacity: '0.5 !important',
+                    // Add to use hard coded value here as Theia doesn't support these values correctly
+                    backgroundColor: exports.BASE_STYLES.secondary.backgroundColor,
+                    borderColor: exports.BASE_STYLES.secondary.disabledBorderColor,
+                    color: exports.BASE_STYLES.secondary.color,
+                    ...(props.primary && {
+                        opacity: '0.5 !important',
+                        color: exports.BASE_STYLES.color,
+                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
+                        borderColor: exports.BASE_STYLES.primary.disabledBorderColor
+                    })
+                },
+                rootHovered: {
+                    // Add to use hard coded value here as Theia doesn't support these values correctly
+                    color: exports.BASE_STYLES.secondary.color,
+                    backgroundColor: exports.BASE_STYLES.secondary.hoverBackgroundColor,
+                    borderColor: exports.BASE_STYLES.secondary.hoverBorderColor,
+                    selectors: {
+                        'svg > path, svg > rect': {
+                            fill: exports.BASE_STYLES.secondary.color
+                        }
+                    },
+                    ...(props.primary && {
+                        color: exports.BASE_STYLES.color,
+                        backgroundColor: exports.BASE_STYLES.primary.hoverBackgroundColor,
+                        borderColor: exports.BASE_STYLES.primary.hoverBorderColor,
+                        selectors: {
+                            'svg > path, svg > rect': {
+                                fill: exports.BASE_STYLES.color
+                            }
+                        }
+                    })
+                },
+                icon: {
+                    height: 16,
+                    lineHeight: 16,
+                    marginLeft: -3,
+                    color: exports.BASE_STYLES.secondary.color,
+                    selectors: {
+                        'svg > path, svg > rect': {
+                            fill: exports.BASE_STYLES.secondary.color
+                        }
+                    },
+                    ...(props.primary && {
+                        color: exports.BASE_STYLES.color,
+                        selectors: {
+                            'svg > path, svg > rect': {
+                                fill: exports.BASE_STYLES.color
+                            }
+                        }
+                    })
+                },
+                menuIcon: {
+                    selectors: {
+                        'svg > path': {
+                            fill: exports.BASE_STYLES.secondary.color
+                        },
+                        ...(props.primary && {
+                            'svg > path': {
+                                fill: exports.BASE_STYLES.color
+                            }
+                        })
+                    }
+                },
+                splitButtonMenuButton: {
+                    padding: 6,
+                    height: 22,
+                    boxSizing: 'border-box',
+                    borderRadius: `0 ${UIInput_1.COMMON_INPUT_STYLES.borderRadius}px ${UIInput_1.COMMON_INPUT_STYLES.borderRadius}px 0 !important`,
+                    borderLeft: 'none',
+                    outline: 'transparent',
+                    userSelect: 'none',
+                    display: 'inline-block',
+                    textDecoration: 'none',
+                    textAlign: 'center',
+                    cursor: 'pointer',
+                    verticalAlign: 'top',
+                    width: 22,
+                    marginLeft: -1,
+                    marginTop: 0,
+                    marginRight: 0,
+                    marginBottom: 0,
+                    backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
+                    borderColor: exports.BASE_STYLES.primary.borderColor,
+                    color: exports.BASE_STYLES.color,
+                    selectors: {
+                        '&:hover': {
+                            color: exports.BASE_STYLES.color,
+                            backgroundColor: 'var(--vscode-button-hoverBackground)',
+                            borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
+                            selectors: {
+                                'svg > path, svg > rect': {
+                                    fill: exports.BASE_STYLES.color
+                                }
+                            }
+                        }
+                    }
+                },
+                splitButtonMenuButtonDisabled: {
+                    opacity: '0.5 !important',
+                    // Add to use hard coded value here as Theia doesn't support these values correctly
+                    backgroundColor: 'var(--vscode-button-secondaryBackground,#5f6a79)',
+                    borderColor: exports.BASE_STYLES.secondary.backgroundColor,
+                    color: exports.BASE_STYLES.secondary.color,
+                    ...(props.primary && {
+                        color: exports.BASE_STYLES.color,
+                        backgroundColor: exports.BASE_STYLES.primary.backgroundColor,
+                        borderColor: 'var(--vscode-button-background)'
+                    })
+                },
+                splitButtonMenuFocused: {
+                    selectors: {
+                        '&:focus': {
+                            color: 'red'
+                        }
+                    }
+                },
+                splitButtonMenuButtonExpanded: {
+                    color: exports.BASE_STYLES.color,
+                    backgroundColor: 'var(--vscode-button-hoverBackground)',
+                    borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
+                    selectors: {
+                        'svg > path, svg > rect': {
+                            fill: exports.BASE_STYLES.color
+                        },
+                        '&:hover': {
+                            color: exports.BASE_STYLES.color,
+                            backgroundColor: 'var(--vscode-button-hoverBackground)',
+                            borderColor: 'var(--vscode-contrastActiveBorder, var(--vscode-button-hoverBackground))',
+                            selectors: {
+                                'svg > path, svg > rect': {
+                                    fill: exports.BASE_STYLES.color
+                                }
+                            }
+                        }
+                    }
+                },
+                splitButtonDivider: dividerStyle,
+                splitButtonDividerDisabled: dividerStyle,
+                splitButtonContainerFocused: {
+                    '.ms-Fabric--isFocusVisible &:focus:after': {
+                        border: 'none',
+                        outlineColor: 'var(--vscode-focusBorder)',
+                        inset: -2
+                    }
+                }
+            };
+        };
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        return react_1.default.createElement(react_2.DefaultButton, { ...this.props, styles: this.setStyle(this.props), menuAs: UIContextualMenu_1.UIContextualMenu });
+    }
+}
+exports.UIDefaultButton = UIDefaultButton;
 //# sourceMappingURL=UIDefaultButton.js.map

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

@@ -1,38 +1,38 @@
-import React from 'react';
-import type { IButtonProps as IBaseButtonProps, IButtonStyles } from '@fluentui/react';
-export declare enum UIIconButtonSizes {
-    Default = "Default",
-    Wide = "Wide"
-}
-export interface ButtonProps extends IBaseButtonProps {
-    sizeType?: UIIconButtonSizes;
-}
-/**
- * UIIconButton component.
- * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
- *
- * @exports
- * @class UIIconButton
- * @extends {React.Component<ButtonProps, {}>}
- */
-export declare class UIIconButton extends React.Component<ButtonProps, {}> {
-    /**
-     * Initializes component properties.
-     *
-     * @param {ButtonProps} props
-     */
-    constructor(props: ButtonProps);
-    /**
-     * 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.
-     */
-    private getButtonInteractionBackgroundColor;
-    protected setStyle: (props: ButtonProps) => IButtonStyles;
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
+import React from 'react';
+import type { IButtonProps as IBaseButtonProps, IButtonStyles } from '@fluentui/react';
+export declare enum UIIconButtonSizes {
+    Default = "Default",
+    Wide = "Wide"
+}
+export interface ButtonProps extends IBaseButtonProps {
+    sizeType?: UIIconButtonSizes;
+}
+/**
+ * UIIconButton component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/button
+ *
+ * @exports
+ * @class UIIconButton
+ * @extends {React.Component<ButtonProps, {}>}
+ */
+export declare class UIIconButton extends React.Component<ButtonProps, {}> {
+    /**
+     * Initializes component properties.
+     *
+     * @param {ButtonProps} props
+     */
+    constructor(props: ButtonProps);
+    /**
+     * 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.
+     */
+    private getButtonInteractionBackgroundColor;
+    protected setStyle: (props: ButtonProps) => IButtonStyles;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UIIconButton.d.ts.map