@sap-ux/ui-components 1.0.0

package/dist/components/UIComboBox/UIComboBox.scss

@@ -0,0 +1,245 @@
+@import '../UIContextualMenu/_variables.scss';
+@import '../../styles/_variables.scss';
+@import '../../styles/_mixins.scss';
+@import './_mixins.scss';
+
+@mixin apply-combobox-error-border($border) {
+    .ms-ComboBox {
+        &,
+        &:focus-within {
+            &:after {
+                border-color: $border;
+            }
+        }
+    }
+}
+
+.ts-ComboBox {
+    .ms-ComboBox {
+        background: $dropdown-input-background;
+        height: $dropdown-input-height;
+        padding: $dropdown-input-text-padding;
+        border-radius: $dropdown-input-border-radius;
+        > .ms-Button--icon {
+            @include caretDown-icon;
+        }
+        input {
+            background: transparent;
+            font-family: var(--vscode-font-family) !important;
+            font-size: 13px;
+            min-height: unset;
+            // @include base-font;
+            // There no border like for TextField or Select - following paddings makes text position same like for TextField and Select
+            padding: $dropdown-input-border-width 0 1px $dropdown-input-border-width;
+            // Overwrite default Chrome browser focus styling
+            outline: 0;
+        }
+        // Font color
+        &,
+        &:hover {
+            input {
+                &,
+                &::placeholder {
+                    color: $dropdown-input-color;
+                }
+            }
+        }
+        input::placeholder {
+            opacity: 0.7;
+        }
+        // Overwrite default border
+        &:after {
+            border: $dropdown-input-border;
+            border-radius: $dropdown-input-border-radius;
+        }
+        &:hover,
+        &:focus-within,
+        &.is-open {
+            &:after {
+                border-color: $dropdown-input-focus-border-color;
+            }
+        }
+        &.is-disabled {
+            @include input-disabled;
+        }
+    }
+    &--error {
+        @include apply-combobox-error-border(var(--vscuie-inputValidation-errorBorder));
+    }
+    &--warning {
+        @include apply-combobox-error-border(var(--vscuie-inputValidation-warningBorder));
+    }
+    &--info {
+        @include apply-combobox-error-border(var(--vscuie-inputValidation-infoBorder));
+    }
+}
+
+@mixin callout-list-item-button(
+    $focus-background: $menu-item-hover-background,
+    $focus-foreground: $menu-color,
+    $hover-outline: null
+) {
+    @include base-font;
+    // Option Sizes
+    min-height: $menu-item-height;
+    height: $menu-item-height;
+    line-height: $menu-item-height;
+    color: $menu-color;
+    background-color: transparent;
+    letter-spacing: normal;
+    border: 0;
+    padding: $menu-item-padding;
+    font-size: $menu-item-font-size;
+
+    &:hover,
+    &:focus,
+    &:active {
+        background-color: $focus-background;
+        color: $focus-foreground;
+
+        &:after {
+            display: none;
+        }
+    }
+
+    @if $hover-outline {
+        &:hover {
+            outline: $hover-outline;
+            outline-offset: $menu-item-border-offset;
+        }
+    }
+
+    .ts-Menu-option {
+        font-size: $menu-item-font-size;
+    }
+
+    .ms-ComboBox-optionText,
+    .ts-Menu-option,
+    .ms-Dropdown-optionText {
+        height: $menu-item-height;
+    }
+
+    .ms-Dropdown-optionText {
+        margin: 0;
+    }
+}
+
+.ts-Callout-Dropdown {
+    .ms-Callout-main {
+        background: $menu-background;
+        border: $dropdown-input-border-width solid $menu-border-color;
+        box-sizing: border-box;
+        border-radius: 0;
+    }
+    // Combobox list items
+    .ms-ComboBox-optionsContainer,
+    .ms-Dropdown-items {
+        .ms-Button--command,
+        .ms-ComboBox-option,
+        .ms-Dropdown-item {
+            @include callout-list-item-button(
+                $menu-item-hover-background,
+                $menu-color,
+                $menu-item-hover-contrast-border
+            );
+        }
+        .ms-Button--command:after {
+            // focus background
+            display: none;
+        }
+        .ts-ComboBox--selected {
+            .ms-ComboBox-option.ms-Button--command {
+                background-color: $menu-item-selection-background;
+                color: $menu-item-selection-color;
+            }
+            .ms-Button--command,
+            .ms-ComboBox-option:after {
+                border: none;
+                outline: $menu-item-focus-border;
+                outline-offset: $menu-item-border-offset;
+            }
+        }
+    }
+    // Select/dropdown list items
+    .ms-Dropdown-items {
+        > .ms-Button--command {
+            display: block;
+            // Aditional separate style
+            &:focus {
+                background: $menu-item-selection-background;
+                color: $menu-item-selection-color;
+                outline: $menu-item-focus-border;
+                outline-offset: $menu-item-border-offset;
+            }
+        }
+    }
+    .ms-Checkbox {
+        &.ms-ComboBox-option,
+        &.ms-Dropdown-item {
+            .ms-Checkbox-checkbox {
+                background: var(--vscode-editor-lineHighlightBorder);
+                border-color: var(--vscode-editorWidget-border);
+                height: 16px;
+                width: 16px;
+                margin-right: 8px;
+            }
+            .ms-Checkbox-checkmark {
+                color: var(--vscode-checkbox-border);
+            }
+            &.is-checked {
+                background-color: $menu-item-selection-background;
+                color: $menu-item-selection-color;
+                .ms-Checkbox-checkmark {
+                    color: var(--vscode-input-foreground);
+                }
+                &:hover {
+                    outline: $menu-item-focus-border;
+                    outline-offset: $menu-item-border-offset;
+                }
+            }
+            &:hover {
+                .ms-Checkbox-checkbox {
+                    border-color: var(--vscode-focusBorder);
+                }
+            }
+        }
+        &.ms-ComboBox-option {
+            input {
+                display: none;
+            }
+        }
+        .ms-Checkbox-label {
+            font-size: $menu-item-font-size;
+            padding: 0;
+        }
+    }
+}
+
+// Multi select dropdown only
+.ts-Callout-Dropdown .ms-Checkbox.ms-Dropdown-item input:focus + label {
+    .ms-Dropdown-optionText {
+        z-index: 1;
+    }
+    &:before {
+        outline: none;
+        z-index: 0;
+        left: -$menu-item-horizontal-padding;
+        right: -$menu-item-horizontal-padding;
+        outline: $menu-item-focus-border;
+        outline-offset: $menu-item-border-offset;
+    }
+}
+
+.option-loading {
+    display: flex;
+    padding-left: 8px;
+    width: 262px;
+    height: 26px;
+
+    .uiLoaderXSmall {
+        .ms-Spinner-label {
+            font-size: 12px;
+            font-weight: normal;
+        }
+    }
+}

package/dist/components/UIComboBox/_mixins.scss

@@ -0,0 +1,24 @@
+@mixin caretDown-icon() {
+    right: 0;
+    width: $dropdown-input-height;
+    background: transparent;
+    height: 100%;
+    text-align: center;
+    i {
+        height: 100%;
+        fill: $dropdown-input-color;
+        svg {
+            height: 100%;
+            width: $dropdown-input-expand-icon-size;
+        }
+    }
+}
+
+@mixin input-disabled() {
+    opacity: $dropdown-input-disabled-opacity;
+    background-color: $dropdown-input-disabled-background-color;
+    font-style: italic;
+    &:after {
+        border-color: $dropdown-input-border-color;
+    }
+}

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

@@ -0,0 +1,2 @@
+export * from './UIComboBox';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/UIComboBox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/UIComboBox/index.tsx"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/components/UIComboBox/index.js

@@ -0,0 +1,14 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (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("./UIComboBox"), exports);
+//# sourceMappingURL=index.js.map

package/dist/components/UIComboBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UIComboBox/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,+CAA6B"}

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

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { IContextualMenuStyles, IContextualMenuItemStyles, ICalloutContentStyles } from '@fluentui/react';
+import { ContextualMenuItemType, IContextualMenuProps, IContextualMenuItem } from '@fluentui/react';
+export { IContextualMenuItem } from '@fluentui/react';
+export { IContextualMenuItem as UIContextualMenuItem };
+export { IContextualMenuProps as UIContextualMenuProps };
+export { ContextualMenuItemType as UIContextualMenuItemType };
+import './UIContextualMenu.scss';
+/**
+ * ContextualMenu styles prop generator.
+ *
+ * @returns - consumable styles property for ContextualMenu
+ */
+export declare function getUIcontextualMenuStyles(): Partial<IContextualMenuStyles>;
+/**
+ * ContextualMenu subcomponent styles prop generator.
+ *
+ * @returns - consumable styles property for ContextualMenuItem
+ */
+export declare function getUIContextualMenuItemStyles(): Partial<IContextualMenuItemStyles>;
+/**
+ * ContextualMenu sub-component styles prop generator.
+ *
+ * @param {number} maxWidth
+ * @returns consumable styles property for Callout
+ */
+export declare function getUIcontextualMenuCalloutStyles(maxWidth?: number): Partial<ICalloutContentStyles>;
+export interface UIIContextualMenuProps extends IContextualMenuProps {
+    maxWidth?: number;
+}
+export declare const UIContextualMenu: React.FC<UIIContextualMenuProps>;
+//# sourceMappingURL=UIContextualMenu.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIContextualMenu.d.ts","sourceRoot":"","sources":["../../../src/components/UIContextualMenu/UIContextualMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,qBAAqB,EAAE,yBAAyB,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAC/G,OAAO,EAAkB,sBAAsB,EAAE,oBAAoB,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACpH,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAEtD,OAAO,EAAE,mBAAmB,IAAI,oBAAoB,EAAE,CAAC;AACvD,OAAO,EAAE,oBAAoB,IAAI,qBAAqB,EAAE,CAAC;AACzD,OAAO,EAAE,sBAAsB,IAAI,wBAAwB,EAAE,CAAC;AAI9D,OAAO,yBAAyB,CAAC;AAIjC;;;;GAIG;AACH,wBAAgB,yBAAyB,IAAI,OAAO,CAAC,qBAAqB,CAAC,CAQ1E;AAED;;;;GAIG;AACH,wBAAgB,6BAA6B,IAAI,OAAO,CAAC,yBAAyB,CAAC,CA8BlF;AAED;;;;;GAKG;AACH,wBAAgB,gCAAgC,CAAC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,qBAAqB,CAAC,CAUlG;AAgCD,MAAM,WAAW,sBAAuB,SAAQ,oBAAoB;IAChE,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAsB7D,CAAC"}

package/dist/components/UIContextualMenu/UIContextualMenu.js

@@ -0,0 +1,124 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIContextualMenu = exports.getUIcontextualMenuCalloutStyles = exports.getUIContextualMenuItemStyles = exports.getUIcontextualMenuStyles = exports.UIContextualMenuItemType = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+Object.defineProperty(exports, "UIContextualMenuItemType", { enumerable: true, get: function () { return react_2.ContextualMenuItemType; } });
+const Icons_1 = require("../Icons");
+require("./UIContextualMenu.scss");
+const submenuIconProps = { iconName: Icons_1.UiIcons.ArrowDown };
+/**
+ * ContextualMenu styles prop generator.
+ *
+ * @returns - consumable styles property for ContextualMenu
+ */
+function getUIcontextualMenuStyles() {
+    return {
+        root: {
+            minWidth: 190,
+            background: 'var(--vscuie-input-background)',
+            border: 0
+        }
+    };
+}
+exports.getUIcontextualMenuStyles = getUIcontextualMenuStyles;
+/**
+ * ContextualMenu subcomponent styles prop generator.
+ *
+ * @returns - consumable styles property for ContextualMenuItem
+ */
+function getUIContextualMenuItemStyles() {
+    return {
+        checkmarkIcon: {
+            color: 'var(--vscode-foreground)',
+            maxHeight: 18,
+            fontSize: 16,
+            lineHeight: 18,
+            margin: 0
+        },
+        icon: {
+            marginLeft: 0,
+            marginRight: 6
+        },
+        label: {
+            fontFamily: 'var(--vscuie-font-family)',
+            lineHeight: 18,
+            height: 18
+        },
+        linkContent: {
+            fontSize: 13,
+            height: 'auto'
+        },
+        subMenuIcon: {
+            height: 16,
+            width: 16,
+            transform: 'rotate(-90deg)',
+            transformOrigin: '50% 50%',
+            lineHeight: 0
+        }
+    };
+}
+exports.getUIContextualMenuItemStyles = getUIContextualMenuItemStyles;
+/**
+ * ContextualMenu sub-component styles prop generator.
+ *
+ * @param {number} maxWidth
+ * @returns consumable styles property for Callout
+ */
+function getUIcontextualMenuCalloutStyles(maxWidth) {
+    return {
+        root: {
+            // workaround. resolves callout root element borders being cut or invisible
+            // issue appears in webkit based environments with double as devicePixelRatio value
+            animationFillMode: 'none',
+            transform: 'rotate(0.0001deg)',
+            maxWidth: maxWidth
+        }
+    };
+}
+exports.getUIcontextualMenuCalloutStyles = getUIcontextualMenuCalloutStyles;
+/**
+ * Recursively applies corresponding styles generator to each,
+ * IContextualMenuItem, ICallourProps and IContxualMenuProps item in props tree.
+ *
+ * @param items - IContextualMenu list
+ * @returns - mutated IContextualMenuItem prop with styles props generators applied to each menu tree node
+ */
+function injectContextualMenuItemsStyle(items) {
+    return items.map((item) => {
+        if (!item.itemProps) {
+            item.itemProps = {};
+        }
+        if (item.itemProps.styles) {
+            item.itemProps.styles = {
+                ...getUIContextualMenuItemStyles(),
+                ...item.itemProps.styles
+            };
+        }
+        else {
+            item.itemProps.styles = getUIContextualMenuItemStyles();
+        }
+        if (!item.submenuIconProps) {
+            item.submenuIconProps = submenuIconProps;
+        }
+        return item;
+    });
+}
+const UIContextualMenu = (props) => {
+    const className = props.className ? ` ${props.className}` : '';
+    return (react_1.default.createElement(react_2.ContextualMenu, { ...props, className: `ts-ContextualMenu${className}`, items: injectContextualMenuItemsStyle(props.items), isBeakVisible: false, calloutProps: {
+            className: 'ts-ContextualMenu-callout',
+            styles: getUIcontextualMenuCalloutStyles(props.maxWidth),
+            ...props.calloutProps
+        }, styles: { ...getUIcontextualMenuStyles(), ...props.styles }, onRenderSubMenu: (props) => {
+            if (!props) {
+                return null;
+            }
+            return react_1.default.createElement(exports.UIContextualMenu, { ...props });
+        } }));
+};
+exports.UIContextualMenu = UIContextualMenu;
+//# sourceMappingURL=UIContextualMenu.js.map

package/dist/components/UIContextualMenu/UIContextualMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UIContextualMenu.js","sourceRoot":"","sources":["../../../src/components/UIContextualMenu/UIContextualMenu.tsx"],"names":[],"mappings":"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"}

package/dist/components/UIContextualMenu/UIContextualMenu.scss

@@ -0,0 +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;
+    }
+}

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

@@ -0,0 +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;
+}
+//# sourceMappingURL=UIHighlightMenuOption.d.ts.map