@sap-ux/ui-components 1.8.0 → 1.8.2

package/dist/components/UIContextualMenu/UIContextualMenu.scss

@@ -1,211 +1,211 @@
-@import './_variables.scss';
-
-@mixin menu-item-contrast-border($outline: null) {
-    &:after {
-        @if $outline {
-            content: '';
-            position: absolute;
-            inset: 1px;
-            z-index: 1;
-            outline: $outline;
-            outline-offset: $menu-item-border-offset;
-            pointer-events: none;
-        } @else {
-            outline: none;
-        }
-
-        border: none;
-    }
-}
-
-@mixin menu-item-color($background, $color, $iconColor: null, $outline: null) {
-    background-color: $background;
-    color: $color;
-
-    // Focus border
-    @include menu-item-contrast-border($outline);
-
-    @if $iconColor {
-        svg > path {
-            fill: $color;
-        }
-    }
-}
-
-.ts-ContextualMenu-callout {
-    box-shadow: none;
-    background: $menu-background;
-    border: 1px solid $menu-border-color;
-    border-radius: 0;
-
-    .ms-Callout-main {
-        border-radius: 0;
-        background: $menu-background;
-        // workaround. resolves callout root element borders being cut or invisible
-        transform: translateZ(0);
-    }
-}
-
-.ts-ContextualMenu {
-    background: $menu-background;
-
-    .ms-ContextualMenu-item {
-        > div,
-        > .ms-ContextualMenu-link,
-        > div > button {
-            min-height: $menu-item-height;
-            height: auto;
-        }
-
-        > .ms-ContextualMenu-link,
-        > div > button {
-            font-size: 13px;
-            color: $menu-color;
-            padding: $menu-item-padding;
-            padding-right: 3px;
-
-            svg > path {
-                fill: $menu-color;
-            }
-
-            &.is-disabled {
-                opacity: $menu-item-disabled-opacity;
-            }
-
-            &:hover,
-            &:active,
-            &.is-expanded {
-                @include menu-item-color($menu-item-hover-background, $menu-item-hover-color, $menu-item-hover-color);
-
-                & ~ .ms-ContextualMenu-splitMenu {
-                    @include menu-item-color(
-                        $menu-item-hover-background,
-                        $menu-item-hover-color,
-                        $menu-item-hover-color
-                    );
-                }
-            }
-        }
-
-        // Part of split menu item
-        > div > button {
-            padding-right: 0;
-            width: calc(100% - #{$menu-item-height});
-
-            + span {
-                display: none;
-            }
-        }
-
-        // split button
-        .ms-ContextualMenu-splitMenu {
-            padding: 0;
-            width: $menu-item-height;
-            min-width: $menu-item-height;
-        }
-
-        // High contrast
-        // Single item - high contrast
-        > .ms-ContextualMenu-link,
-        > div {
-            &:hover {
-                @include menu-item-contrast-border($menu-item-hover-contrast-border);
-            }
-        }
-
-        // Keyboard navigation and focus
-        // Single menu item
-        > .ms-ContextualMenu-link {
-            &:focus {
-                @include menu-item-color(
-                    $menu-item-selection-background,
-                    $menu-item-selection-color,
-                    $menu-item-selection-color,
-                    $menu-item-focus-border
-                );
-
-                // Context menu focus follows hover - use hover as more important
-                &:hover {
-                    @include menu-item-color(
-                        $menu-item-hover-background,
-                        $menu-item-hover-color,
-                        $menu-item-hover-color,
-                        $menu-item-hover-contrast-border
-                    );
-                }
-            }
-        }
-        // Split menu item
-        > div {
-            &:hover,
-            &:focus {
-                // Overwrite fluent style
-                background: transparent;
-            }
-            // Menu item
-            &:focus {
-                > button:first-child {
-                    @include menu-item-color(
-                        $menu-item-selection-background,
-                        $menu-item-selection-color,
-                        $menu-item-selection-color
-                    );
-
-                    & ~ .ms-ContextualMenu-splitMenu {
-                        @include menu-item-color(
-                            $menu-item-selection-background,
-                            $menu-item-selection-color,
-                            $menu-item-selection-color
-                        );
-                    }
-                }
-
-                // Context menu focus follows hover - use hover as more important
-                &:hover > button:first-child {
-                    @include menu-item-color(
-                        $menu-item-hover-background,
-                        $menu-item-hover-color,
-                        $menu-item-hover-color
-                    );
-
-                    & ~ .ms-ContextualMenu-splitMenu {
-                        @include menu-item-color(
-                            $menu-item-hover-background,
-                            $menu-item-hover-color,
-                            $menu-item-hover-color
-                        );
-                    }
-                }
-
-                // High contrast
-                @include menu-item-contrast-border($menu-item-focus-border);
-            }
-
-            // High contrast
-            &:hover {
-                @include menu-item-contrast-border($menu-item-hover-contrast-border);
-            }
-
-            // Right split button as separate
-            .ms-ContextualMenu-splitMenu.is-expanded {
-                @include menu-item-color(
-                    $menu-item-selection-background,
-                    $menu-item-selection-color,
-                    $menu-item-selection-color
-                );
-
-                &:hover {
-                    @include menu-item-color(
-                        $menu-item-hover-background,
-                        $menu-item-hover-color,
-                        $menu-item-hover-color
-                    );
-                }
-            }
-        }
-    }
-
-    .ms-ContextualMenu-itemText {
-        margin: 0;
-    }
-}
+@import './_variables.scss';
+
+@mixin menu-item-contrast-border($outline: null) {
+    &:after {
+        @if $outline {
+            content: '';
+            position: absolute;
+            inset: 1px;
+            z-index: 1;
+            outline: $outline;
+            outline-offset: $menu-item-border-offset;
+            pointer-events: none;
+        } @else {
+            outline: none;
+        }
+
+        border: none;
+    }
+}
+
+@mixin menu-item-color($background, $color, $iconColor: null, $outline: null) {
+    background-color: $background;
+    color: $color;
+
+    // Focus border
+    @include menu-item-contrast-border($outline);
+
+    @if $iconColor {
+        svg > path {
+            fill: $color;
+        }
+    }
+}
+
+.ts-ContextualMenu-callout {
+    box-shadow: none;
+    background: $menu-background;
+    border: 1px solid $menu-border-color;
+    border-radius: 0;
+
+    .ms-Callout-main {
+        border-radius: 0;
+        background: $menu-background;
+        // workaround. resolves callout root element borders being cut or invisible
+        transform: translateZ(0);
+    }
+}
+
+.ts-ContextualMenu {
+    background: $menu-background;
+
+    .ms-ContextualMenu-item {
+        > div,
+        > .ms-ContextualMenu-link,
+        > div > button {
+            min-height: $menu-item-height;
+            height: auto;
+        }
+
+        > .ms-ContextualMenu-link,
+        > div > button {
+            font-size: 13px;
+            color: $menu-color;
+            padding: $menu-item-padding;
+            padding-right: 3px;
+
+            svg > path {
+                fill: $menu-color;
+            }
+
+            &.is-disabled {
+                opacity: $menu-item-disabled-opacity;
+            }
+
+            &:hover,
+            &:active,
+            &.is-expanded {
+                @include menu-item-color($menu-item-hover-background, $menu-item-hover-color, $menu-item-hover-color);
+
+                & ~ .ms-ContextualMenu-splitMenu {
+                    @include menu-item-color(
+                        $menu-item-hover-background,
+                        $menu-item-hover-color,
+                        $menu-item-hover-color
+                    );
+                }
+            }
+        }
+
+        // Part of split menu item
+        > div > button {
+            padding-right: 0;
+            width: calc(100% - #{$menu-item-height});
+
+            + span {
+                display: none;
+            }
+        }
+
+        // split button
+        .ms-ContextualMenu-splitMenu {
+            padding: 0;
+            width: $menu-item-height;
+            min-width: $menu-item-height;
+        }
+
+        // High contrast
+        // Single item - high contrast
+        > .ms-ContextualMenu-link,
+        > div {
+            &:hover {
+                @include menu-item-contrast-border($menu-item-hover-contrast-border);
+            }
+        }
+
+        // Keyboard navigation and focus
+        // Single menu item
+        > .ms-ContextualMenu-link {
+            &:focus {
+                @include menu-item-color(
+                    $menu-item-selection-background,
+                    $menu-item-selection-color,
+                    $menu-item-selection-color,
+                    $menu-item-focus-border
+                );
+
+                // Context menu focus follows hover - use hover as more important
+                &:hover {
+                    @include menu-item-color(
+                        $menu-item-hover-background,
+                        $menu-item-hover-color,
+                        $menu-item-hover-color,
+                        $menu-item-hover-contrast-border
+                    );
+                }
+            }
+        }
+        // Split menu item
+        > div {
+            &:hover,
+            &:focus {
+                // Overwrite fluent style
+                background: transparent;
+            }
+            // Menu item
+            &:focus {
+                > button:first-child {
+                    @include menu-item-color(
+                        $menu-item-selection-background,
+                        $menu-item-selection-color,
+                        $menu-item-selection-color
+                    );
+
+                    & ~ .ms-ContextualMenu-splitMenu {
+                        @include menu-item-color(
+                            $menu-item-selection-background,
+                            $menu-item-selection-color,
+                            $menu-item-selection-color
+                        );
+                    }
+                }
+
+                // Context menu focus follows hover - use hover as more important
+                &:hover > button:first-child {
+                    @include menu-item-color(
+                        $menu-item-hover-background,
+                        $menu-item-hover-color,
+                        $menu-item-hover-color
+                    );
+
+                    & ~ .ms-ContextualMenu-splitMenu {
+                        @include menu-item-color(
+                            $menu-item-hover-background,
+                            $menu-item-hover-color,
+                            $menu-item-hover-color
+                        );
+                    }
+                }
+
+                // High contrast
+                @include menu-item-contrast-border($menu-item-focus-border);
+            }
+
+            // High contrast
+            &:hover {
+                @include menu-item-contrast-border($menu-item-hover-contrast-border);
+            }
+
+            // Right split button as separate
+            .ms-ContextualMenu-splitMenu.is-expanded {
+                @include menu-item-color(
+                    $menu-item-selection-background,
+                    $menu-item-selection-color,
+                    $menu-item-selection-color
+                );
+
+                &:hover {
+                    @include menu-item-color(
+                        $menu-item-hover-background,
+                        $menu-item-hover-color,
+                        $menu-item-hover-color
+                    );
+                }
+            }
+        }
+    }
+
+    .ms-ContextualMenu-itemText {
+        margin: 0;
+    }
+}

package/dist/components/UIContextualMenu/UIHighlightMenuOption.d.ts

@@ -1,20 +1,20 @@
-import React from 'react';
-import './UIHighlightMenuOption.scss';
-export interface UIHighlightMenuOptionProps {
-    text: string;
-    query?: string;
-}
-/**
- * UIHighlightMenuOption component.
- *
- * @exports
- * @class UIHighlightMenuOption
- * @extends {React.Component<UIHighlightMenuOptionProps>}
- */
-export declare class UIHighlightMenuOption extends React.Component<UIHighlightMenuOptionProps> {
-    /**
-     * @returns {JSX.Element}
-     */
-    render(): JSX.Element;
-}
+import React from 'react';
+import './UIHighlightMenuOption.scss';
+export interface UIHighlightMenuOptionProps {
+    text: string;
+    query?: string;
+}
+/**
+ * UIHighlightMenuOption component.
+ *
+ * @exports
+ * @class UIHighlightMenuOption
+ * @extends {React.Component<UIHighlightMenuOptionProps>}
+ */
+export declare class UIHighlightMenuOption extends React.Component<UIHighlightMenuOptionProps> {
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
 //# sourceMappingURL=UIHighlightMenuOption.d.ts.map

package/dist/components/UIContextualMenu/UIHighlightMenuOption.js

@@ -1,51 +1,51 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UIHighlightMenuOption = void 0;
-const react_1 = __importDefault(require("react"));
-require("./UIHighlightMenuOption.scss");
-/**
- * UIHighlightMenuOption component.
- *
- * @exports
- * @class UIHighlightMenuOption
- * @extends {React.Component<UIHighlightMenuOptionProps>}
- */
-class UIHighlightMenuOption extends react_1.default.Component {
-    /**
-     * @returns {JSX.Element}
-     */
-    render() {
-        let text = this.props.text;
-        let query = this.props.query;
-        const parts = [];
-        if (text && query) {
-            // There is search query - highlight occureance
-            text = text.toString();
-            query = query.toLowerCase();
-            const simpleText = text.toLowerCase();
-            const chars = query.length;
-            let startIndex = 0;
-            let index = simpleText.indexOf(query);
-            const fnAddPart = (part) => (part ? parts.push(part) : null);
-            // Highlight all occureances
-            while (index !== -1) {
-                fnAddPart(react_1.default.createElement("span", { key: 'text-' + startIndex }, text.substring(startIndex, index)));
-                fnAddPart(react_1.default.createElement("span", { className: "ts-Menu-option--highlighted", key: 'highlight-' + index }, text.substr(index, chars)));
-                startIndex = index + chars;
-                index = simpleText.indexOf(query, index + chars);
-                if (index === -1) {
-                    fnAddPart(react_1.default.createElement("span", { key: 'text-' + startIndex }, text.substring(startIndex, simpleText.length)));
-                }
-            }
-        }
-        if (parts.length === 0) {
-            parts.push(text);
-        }
-        return react_1.default.createElement("div", { className: "ts-Menu-option" }, parts);
-    }
-}
-exports.UIHighlightMenuOption = UIHighlightMenuOption;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIHighlightMenuOption = void 0;
+const react_1 = __importDefault(require("react"));
+require("./UIHighlightMenuOption.scss");
+/**
+ * UIHighlightMenuOption component.
+ *
+ * @exports
+ * @class UIHighlightMenuOption
+ * @extends {React.Component<UIHighlightMenuOptionProps>}
+ */
+class UIHighlightMenuOption extends react_1.default.Component {
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        let text = this.props.text;
+        let query = this.props.query;
+        const parts = [];
+        if (text && query) {
+            // There is search query - highlight occureance
+            text = text.toString();
+            query = query.toLowerCase();
+            const simpleText = text.toLowerCase();
+            const chars = query.length;
+            let startIndex = 0;
+            let index = simpleText.indexOf(query);
+            const fnAddPart = (part) => (part ? parts.push(part) : null);
+            // Highlight all occureances
+            while (index !== -1) {
+                fnAddPart(react_1.default.createElement("span", { key: 'text-' + startIndex }, text.substring(startIndex, index)));
+                fnAddPart(react_1.default.createElement("span", { className: "ts-Menu-option--highlighted", key: 'highlight-' + index }, text.substr(index, chars)));
+                startIndex = index + chars;
+                index = simpleText.indexOf(query, index + chars);
+                if (index === -1) {
+                    fnAddPart(react_1.default.createElement("span", { key: 'text-' + startIndex }, text.substring(startIndex, simpleText.length)));
+                }
+            }
+        }
+        if (parts.length === 0) {
+            parts.push(text);
+        }
+        return react_1.default.createElement("div", { className: "ts-Menu-option" }, parts);
+    }
+}
+exports.UIHighlightMenuOption = UIHighlightMenuOption;
 //# sourceMappingURL=UIHighlightMenuOption.js.map

package/dist/components/UIContextualMenu/UIHighlightMenuOption.scss

@@ -1,23 +1,23 @@
-$combobox-list-option-highlighted-color: var(--vscode-editorSuggestWidget-highlightForeground);
-// Two vars because one exists in VSCode Insiders only so far - it can be removed to single var when it will be officially released
-$combobox-list-option-selected-highlighted-color: var(
-    --vscode-editorSuggestWidget-focusHighlightForeground,
-    var(--vscode-list-focusHighlightForeground)
-);
-.ts-Menu-option {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    &--highlighted {
-        color: $combobox-list-option-highlighted-color;
-        font-weight: bold;
-    }
-}
-
-.ts-ComboBox--selected,
-.ts-ContextualMenu .ms-ContextualMenu-item > .ms-ContextualMenu-link:focus,
-.ts-ContextualMenu .ms-ContextualMenu-item > div:focus {
-    .ts-Menu-option--highlighted {
-        color: $combobox-list-option-selected-highlighted-color;
-    }
-}
+$combobox-list-option-highlighted-color: var(--vscode-editorSuggestWidget-highlightForeground);
+// Two vars because one exists in VSCode Insiders only so far - it can be removed to single var when it will be officially released
+$combobox-list-option-selected-highlighted-color: var(
+    --vscode-editorSuggestWidget-focusHighlightForeground,
+    var(--vscode-list-focusHighlightForeground)
+);
+.ts-Menu-option {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    &--highlighted {
+        color: $combobox-list-option-highlighted-color;
+        font-weight: bold;
+    }
+}
+
+.ts-ComboBox--selected,
+.ts-ContextualMenu .ms-ContextualMenu-item > .ms-ContextualMenu-link:focus,
+.ts-ContextualMenu .ms-ContextualMenu-item > div:focus {
+    .ts-Menu-option--highlighted {
+        color: $combobox-list-option-selected-highlighted-color;
+    }
+}

package/dist/components/UIContextualMenu/_variables.scss

@@ -1,30 +1,30 @@
-@import '../../styles/_variables.scss';
-@import '../../styles/_mixins.scss';
-
-$menu-background: var(--vscode-menu-background, var(--vscode-input-background));
-$menu-color: var(--vscode-editorSuggestWidget-foreground);
-$menu-border-color: var(--vscode-focusBorder);
-
-$menu-item-height: 22px;
-$menu-item-horizontal-padding: 8px;
-$menu-item-vertical-padding: 0px;
-$menu-item-padding: $menu-item-vertical-padding $menu-item-horizontal-padding;
-$menu-item-font-size: 13px;
-$menu-item-hover-background: var(--vscode-list-hoverBackground);
-$menu-item-hover-color: var(--vscode-editorSuggestWidget-foreground);
-
-$menu-item-selection-background: var(
-    --vscode-editorSuggestWidget-selectedBackground,
-    var(--vscode-quickInputList-focusBackground)
-);
-// Two vars because one exists in VSCode Insiders only so far - it can be removed to single var when it will be officially released
-$menu-item-selection-color: var(
-    --vscode-editorSuggestWidget-selectedForeground,
-    var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground))
-);
-
-$menu-item-focus-border: 1px solid var(--vscode-focusBorder);
-$menu-item-hover-contrast-border: 1px dashed var(--vscode-contrastActiveBorder);
-$menu-item-border-offset: -1px;
-
-$menu-item-disabled-opacity: 0.2;
+@import '../../styles/_variables.scss';
+@import '../../styles/_mixins.scss';
+
+$menu-background: var(--vscode-menu-background, var(--vscode-input-background));
+$menu-color: var(--vscode-editorSuggestWidget-foreground);
+$menu-border-color: var(--vscode-focusBorder);
+
+$menu-item-height: 22px;
+$menu-item-horizontal-padding: 8px;
+$menu-item-vertical-padding: 0px;
+$menu-item-padding: $menu-item-vertical-padding $menu-item-horizontal-padding;
+$menu-item-font-size: 13px;
+$menu-item-hover-background: var(--vscode-list-hoverBackground);
+$menu-item-hover-color: var(--vscode-editorSuggestWidget-foreground);
+
+$menu-item-selection-background: var(
+    --vscode-editorSuggestWidget-selectedBackground,
+    var(--vscode-quickInputList-focusBackground)
+);
+// Two vars because one exists in VSCode Insiders only so far - it can be removed to single var when it will be officially released
+$menu-item-selection-color: var(
+    --vscode-editorSuggestWidget-selectedForeground,
+    var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground))
+);
+
+$menu-item-focus-border: 1px solid var(--vscode-focusBorder);
+$menu-item-hover-contrast-border: 1px dashed var(--vscode-contrastActiveBorder);
+$menu-item-border-offset: -1px;
+
+$menu-item-disabled-opacity: 0.2;