@sap-ux/ui-components 1.0.0

package/dist/components/UIDialog/UIDialog.js

@@ -0,0 +1,250 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIDialog = exports.UIDialogScrollArea = exports.DIALOG_STYLES = exports.DIALOG_MAX_HEIGHT_OFFSET = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+const UIButton_1 = require("../UIButton");
+const DeepMerge_1 = require("../../utilities/DeepMerge");
+exports.DIALOG_MAX_HEIGHT_OFFSET = 32;
+exports.DIALOG_STYLES = {
+    background: 'var(--vscode-editorWidget-background)',
+    boxShadow: '0px 4px 10px rgba(0, 0, 0, 0.3)',
+    borderColor: 'var(--vscode-editorWidget-border)',
+    vPadding: 20,
+    vPaddingHalf: 10,
+    hPadding: 45,
+    title: {
+        color: 'var(--vscode-panelTitle-activeForeground)'
+    },
+    contentText: {
+        fontSize: 13,
+        color: 'var(--vscode-foreground)',
+        fontFamily: 'var(--vscode-font-family)'
+    }
+};
+var UIDialogScrollArea;
+(function (UIDialogScrollArea) {
+    // Header and footer freezed and content is scrollable
+    UIDialogScrollArea["Content"] = "Content";
+    // Whole dialog is scrollable - default FluentUI behaviour, but it is buggy with large content
+    UIDialogScrollArea["Dialog"] = "Dialog";
+})(UIDialogScrollArea = exports.UIDialogScrollArea || (exports.UIDialogScrollArea = {}));
+/**
+ * UIDialog component.
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog
+ * and https://app.abstract.com/projects/42046ab5-889d-4a59-88e6-1089e98cba67/branches/master/commits/f1fcd77447bb2b32aab3498311c1c39517e47e49/files/1455D538-559B-48EF-8D9F-1C2884ED540B/layers/AFDAAFD3-BFA6-4E96-BB6D-057DD13753E5
+ *
+ * @exports
+ * @class UIDialog
+ * @extends {React.Component<IDialogProps, {}>}
+ */
+class UIDialog extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {DialogProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.onResize = this.onResize.bind(this);
+        this.attachResize = this.attachResize.bind(this);
+        this.detachResize = this.detachResize.bind(this);
+        this.onHeaderMouseDown = this.onHeaderMouseDown.bind(this);
+        this.state = {
+            resizeMaxHeight: this.getResizeMaxHeight()
+        };
+    }
+    /**
+     * Called when component is rerendered.
+     * @param {Readonly<DialogProps>} prevProps
+     */
+    componentDidUpdate(prevProps) {
+        const { scrollArea } = this.props;
+        if (prevProps.scrollArea !== scrollArea) {
+            if (scrollArea === UIDialogScrollArea.Content) {
+                this.attachResize();
+            }
+            else {
+                this.detachResize();
+            }
+        }
+    }
+    /**
+     * Method attaches to window resize event.
+     */
+    attachResize() {
+        // Window resize handled
+        window.addEventListener('resize', this.onResize);
+        this.onResize();
+    }
+    /**
+     * Method detaches from window resize event.
+     */
+    detachResize() {
+        window.removeEventListener('resize', this.onResize);
+    }
+    /**
+     * Method handles window resizer event to update calculation for content scrollarea size.
+     */
+    onResize() {
+        this.setState({
+            resizeMaxHeight: this.getResizeMaxHeight()
+        });
+    }
+    /**
+     * Method returns maximal height for dialog content "scrollArea=Content" mode.
+     *
+     * @returns {number} Max size of dialog.
+     */
+    getResizeMaxHeight() {
+        return window.innerHeight - exports.DIALOG_MAX_HEIGHT_OFFSET;
+    }
+    /**
+     * Method returns footer element depending in component props.
+     * Three states.
+     * 1. Accept/Decline buttons.
+     * 2. Custom content of footer.
+     * 3. No footer.
+     *
+     * @returns {JSX.Element | null} Footer element to render.
+     */
+    getFooter() {
+        const { acceptButtonText, cancelButtonText, onAccept, onCancel, acceptButtonId, cancelButtonId, footer } = this.props;
+        const dialogFooterProps = {
+            styles: {
+                actionsRight: {
+                    width: '100%',
+                    textAlign: 'center',
+                    margin: '0px'
+                },
+                actions: {
+                    margin: `${exports.DIALOG_STYLES.vPaddingHalf}px 0 ${exports.DIALOG_STYLES.vPadding}px`,
+                    lineHeight: 'auto'
+                },
+                action: {
+                    margin: '0px 5px'
+                }
+            }
+        };
+        if (footer) {
+            return react_1.default.createElement(react_2.DialogFooter, { ...dialogFooterProps }, footer);
+        }
+        else if (onAccept || onCancel) {
+            return (react_1.default.createElement(react_2.DialogFooter, { ...dialogFooterProps },
+                onAccept ? (react_1.default.createElement(UIButton_1.UIDefaultButton, { onClick: onAccept, primary: true, style: { height: '26px' }, id: acceptButtonId }, acceptButtonText)) : (''),
+                onCancel ? (react_1.default.createElement(UIButton_1.UIDefaultButton, { onClick: onCancel, style: { height: '26px' }, id: cancelButtonId }, cancelButtonText)) : ('')));
+        }
+    }
+    /**
+     * Method handles mousedown event for dialog header area.
+     * Method added to handle scenario when we open dropdown menu and move dialog.
+     * Code in method sets focus to focuszone's placeholder - it triggers close for opened dropdown menu.
+     *
+     * @param {React.MouseEvent} event Mousedown event
+     */
+    onHeaderMouseDown(event) {
+        if (!this.props.modalProps?.dragOptions) {
+            // No need to handle non draggable
+            return;
+        }
+        const dialogFocusZone = event.target.closest('.ms-Dialog-main');
+        if (dialogFocusZone && dialogFocusZone.firstChild) {
+            const focusPlaceholder = dialogFocusZone.firstChild;
+            focusPlaceholder.focus();
+        }
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const { closeButtonVisible, multiLineTitle, scrollArea = UIDialogScrollArea.Content, children, ...rest } = this.props;
+        const dialogProps = {
+            minWidth: '460px',
+            modalProps: {
+                layerProps: {
+                    onLayerDidMount: this.attachResize,
+                    onLayerWillUnmount: this.detachResize
+                }
+            },
+            styles: {
+                main: {
+                    backgroundColor: exports.DIALOG_STYLES.background,
+                    border: `1px solid ${exports.DIALOG_STYLES.borderColor}`,
+                    boxShadow: exports.DIALOG_STYLES.boxShadow,
+                    borderRadius: 0,
+                    minHeight: 100,
+                    ...(scrollArea === UIDialogScrollArea.Content && {
+                        overflow: 'hidden',
+                        '.ms-Modal-scrollableContent': {
+                            overflow: 'hidden',
+                            height: '100%'
+                        }
+                    })
+                }
+            },
+            dialogContentProps: {
+                title: this.props.title,
+                titleProps: {
+                    className: 'ui-medium-header',
+                    style: {
+                        padding: `${exports.DIALOG_STYLES.vPadding}px 0  5px`,
+                        textAlign: 'center',
+                        color: exports.DIALOG_STYLES.title.color,
+                        ...(!multiLineTitle && {
+                            whiteSpace: 'nowrap',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            padding: `${exports.DIALOG_STYLES.vPadding}px ${exports.DIALOG_STYLES.hPadding}px 5px`
+                        })
+                    },
+                    onMouseDown: this.onHeaderMouseDown
+                },
+                styles: {
+                    button: {
+                        display: !closeButtonVisible ? 'none' : undefined
+                    },
+                    inner: {
+                        padding: '0',
+                        ...(scrollArea === UIDialogScrollArea.Content && {
+                            height: '100%',
+                            overflow: 'hidden',
+                            display: 'flex',
+                            flexDirection: 'column'
+                        })
+                    },
+                    subText: {
+                        margin: '0',
+                        lineHeight: 18,
+                        ...exports.DIALOG_STYLES.contentText
+                    },
+                    content: {
+                        ...exports.DIALOG_STYLES.contentText,
+                        ...(scrollArea === UIDialogScrollArea.Content && {
+                            height: '100%',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            maxHeight: this.state.resizeMaxHeight
+                        })
+                    },
+                    innerContent: {
+                        padding: `${exports.DIALOG_STYLES.vPaddingHalf}px ${exports.DIALOG_STYLES.hPadding}px`,
+                        boxSizing: 'border-box',
+                        ...(scrollArea === UIDialogScrollArea.Content && {
+                            height: '100%',
+                            overflow: 'auto',
+                            boxSizing: 'border-box'
+                        })
+                    }
+                }
+            }
+        };
+        const props = DeepMerge_1.deepMerge(dialogProps, rest);
+        return (react_1.default.createElement(react_2.Dialog, { ...props },
+            children,
+            this.getFooter()));
+    }
+}
+exports.UIDialog = UIDialog;
+//# sourceMappingURL=UIDialog.js.map

package/dist/components/UIDialog/UIDialog.js.map

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

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

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

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

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

package/dist/components/UIDialog/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("./UIDialog"), exports);
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/UIDialog/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,6CAA2B"}

package/dist/components/UIDropdown/UIDropdown.d.ts

@@ -0,0 +1,76 @@
+import React from 'react';
+import type { IDropdownProps, ICalloutContentStyleProps, ICalloutContentStyles } from '@fluentui/react';
+import { DropdownMenuItemType, IDropdownOption } from '@fluentui/react';
+import type { UIMessagesExtendedProps } from '../../helper/ValidationMessage';
+import './UIDropdown.scss';
+export { IDropdownOption as UIDropdownOption };
+export { DropdownMenuItemType as UIDropdownMenuItemType };
+export interface UIDropdownProps extends IDropdownProps, UIMessagesExtendedProps {
+    onHandleChange?(option: IDropdownOption, index: number): void;
+    onHandleOpen?(): void;
+    onHandleRenderTitle?(items: IDropdownOption[] | undefined): JSX.Element;
+    useDropdownAsMenuMinWidth?: boolean;
+}
+export interface UIDropdownState {
+    options: IDropdownOption[];
+    isOpen: boolean;
+}
+/**
+ * UIDropdown component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
+ *
+ * @exports
+ * @class UIDropdown
+ * @extends {React.Component<UIDropdownProps, UIDropdownState>}
+ */
+export declare class UIDropdown extends React.Component<UIDropdownProps, UIDropdownState> {
+    /**
+     * Initializes component properties.
+     * @param {UIDropdownProps} props
+     */
+    constructor(props: UIDropdownProps);
+    onRenderCaretDown: () => JSX.Element;
+    onRenderTitle: (items: IDropdownOption[] | undefined) => JSX.Element;
+    onClick: () => void;
+    onChange: (event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption<any> | undefined, index?: number | undefined) => void;
+    /**
+     * Method stops event propagation.
+     *
+     * @param {React.MouseEvent<HTMLDivElement>} event Mouse event.
+     */
+    stopEventPropagation: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * Method used as workaround to separate focus and hover.
+     * Default behaviour of fluent ui is that focus follows hover, but we need separe them.
+     *
+     * @param {IDropdownOption} [props] Dropdown props.
+     * @param {(props?: IDropdownOption) => JSX.Element | null} [defaultRender] Default option renderer.
+     * @returns {JSX.Element | null} Returns dropdown option element.
+     */
+    private readonly onRenderOption;
+    /**
+     * Method called on combobox item render.
+     * We should pass query to it and avoid rendering if it is hidden.
+     *
+     * @param {IComboBoxOption} props Combobox item props.
+     * @param {Function} defaultRender Combobox item default renderer.
+     * @returns {JSX.Element | null} Element to render.
+     */
+    private onRenderItem;
+    /**
+     * Method returns styles for callout to support property 'useDropdownAsMenuMinWidth'.
+     * States:
+     * 1. Min width of callout is equals to width of droipdown input box;
+     * 2. Max width equals to windows size minus 10px;
+     * 3. Width is auto - it allows to make callout wider if menu option size exceeds size of dropdown input(min-width).
+     *
+     * @param {ICalloutContentStyleProps} calloutStyleProps Current callout styles.
+     * @returns {Partial<ICalloutContentStyles>} Styles for callout.
+     */
+    getCalloutStylesForUseAsMinWidth(calloutStyleProps: ICalloutContentStyleProps): Partial<ICalloutContentStyles>;
+    /**
+     * @returns {JSX.Element}
+     */
+    render(): JSX.Element;
+}
+//# sourceMappingURL=UIDropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UIDropdown.d.ts","sourceRoot":"","sources":["../../../src/components/UIDropdown/UIDropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EACR,cAAc,EAEd,yBAAyB,EACzB,qBAAqB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAY,oBAAoB,EAAE,eAAe,EAAkB,MAAM,iBAAiB,CAAC;AAGlG,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,gCAAgC,CAAC;AAI9E,OAAO,mBAAmB,CAAC;AAE3B,OAAO,EAAE,eAAe,IAAI,gBAAgB,EAAE,CAAC;AAC/C,OAAO,EAAE,oBAAoB,IAAI,sBAAsB,EAAE,CAAC;AAE1D,MAAM,WAAW,eAAgB,SAAQ,cAAc,EAAE,uBAAuB;IAC5E,cAAc,CAAC,CAAC,MAAM,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IAC9D,YAAY,CAAC,IAAI,IAAI,CAAC;IACtB,mBAAmB,CAAC,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,SAAS,GAAG,GAAG,CAAC,OAAO,CAAC;IACxE,yBAAyB,CAAC,EAAE,OAAO,CAAC;CACvC;AAED,MAAM,WAAW,eAAe;IAC5B,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,MAAM,EAAE,OAAO,CAAC;CACnB;AAID;;;;;;;GAOG;AACH,qBAAa,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,EAAE,eAAe,CAAC;IAC7E;;;OAGG;gBACgB,KAAK,EAAE,eAAe;IASzC,iBAAiB,QAAO,WAAW,CAEjC;IAEF,aAAa,UAAW,eAAe,EAAE,GAAG,SAAS,KAAG,WAAW,CAYjE;IAEF,OAAO,QAA6F,IAAI,CAStG;IAEF,QAAQ,UAAW,MAAM,SAAS,CAAC,cAAc,CAAC,4EAA6C,IAAI,CAMjG;IAEF;;;;OAIG;IACH,oBAAoB,UAAW,gBAAgB,CAAC,cAAc,CAAC,KAAG,IAAI,CAEpE;IAEF;;;;;;;OAOG;IACH,OAAO,CAAC,QAAQ,CAAC,cAAc,CAc7B;IAEF;;;;;;;OAOG;IACH,OAAO,CAAC,YAAY,CAalB;IAEF;;;;;;;;;OASG;IACH,gCAAgC,CAAC,iBAAiB,EAAE,yBAAyB,GAAG,OAAO,CAAC,qBAAqB,CAAC;IAU9G;;OAEG;IACH,MAAM,IAAI,GAAG,CAAC,OAAO;CAgDxB"}

package/dist/components/UIDropdown/UIDropdown.js

@@ -0,0 +1,166 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UIDropdown = exports.UIDropdownMenuItemType = void 0;
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@fluentui/react");
+Object.defineProperty(exports, "UIDropdownMenuItemType", { enumerable: true, get: function () { return react_2.DropdownMenuItemType; } });
+const UIIcon_1 = require("../UIIcon");
+const ValidationMessage_1 = require("../../helper/ValidationMessage");
+const UILabel_1 = require("../UILabel");
+require("./UIDropdown.scss");
+const ERROR_BORDER_COLOR = 'var(--vscode-inputValidation-errorBorder)';
+/**
+ * UIDropdown component
+ * based on https://developer.microsoft.com/en-us/fluentui#/controls/web/dropdown
+ *
+ * @exports
+ * @class UIDropdown
+ * @extends {React.Component<UIDropdownProps, UIDropdownState>}
+ */
+class UIDropdown extends react_1.default.Component {
+    /**
+     * Initializes component properties.
+     * @param {UIDropdownProps} props
+     */
+    constructor(props) {
+        super(props);
+        this.onRenderCaretDown = () => {
+            return react_1.default.createElement(UIIcon_1.UIIcon, { iconName: "ArrowDown", style: { height: '100%' } });
+        };
+        this.onRenderTitle = (items) => {
+            if (this.props.multiSelect && this.props.onHandleRenderTitle) {
+                return this.props.onHandleRenderTitle(items);
+            }
+            else {
+                const { multiSelectDelimiter = ', ' } = this.props;
+                if (items) {
+                    const title = items.map((i) => i.text).join(multiSelectDelimiter);
+                    return react_1.default.createElement(react_1.default.Fragment, null, title);
+                }
+                else {
+                    return react_1.default.createElement(react_1.default.Fragment, null, this.props.title);
+                }
+            }
+        };
+        this.onClick = ( /* event: React.FormEvent<HTMLDivElement>, option?: IDropdownOption, index?: number */) => {
+            this.setState({ isOpen: !this.state.isOpen }, () => {
+                if (this.props.multiSelect && this.props.onHandleOpen) {
+                    if (this.state.isOpen) {
+                        this.setState({ isOpen: !this.state.isOpen });
+                        this.props.onHandleOpen();
+                    }
+                }
+            });
+        };
+        this.onChange = (event, option, index) => {
+            if (this.props.multiSelect && this.props.onHandleChange) {
+                if (option && index) {
+                    this.props.onHandleChange(option, index);
+                }
+            }
+        };
+        /**
+         * Method stops event propagation.
+         *
+         * @param {React.MouseEvent<HTMLDivElement>} event Mouse event.
+         */
+        this.stopEventPropagation = (event) => {
+            event.stopPropagation();
+        };
+        /**
+         * Method used as workaround to separate focus and hover.
+         * Default behaviour of fluent ui is that focus follows hover, but we need separe them.
+         *
+         * @param {IDropdownOption} [props] Dropdown props.
+         * @param {(props?: IDropdownOption) => JSX.Element | null} [defaultRender] Default option renderer.
+         * @returns {JSX.Element | null} Returns dropdown option element.
+         */
+        this.onRenderOption = (props, defaultRender) => {
+            return (react_1.default.createElement(react_1.default.Fragment, null,
+                defaultRender?.(props),
+                react_1.default.createElement("div", { onMouseEnter: this.stopEventPropagation.bind(this), onMouseLeave: this.stopEventPropagation.bind(this), onMouseMove: this.stopEventPropagation.bind(this), className: "ts-dropdown-item-blocker" })));
+        };
+        /**
+         * Method called on combobox item render.
+         * We should pass query to it and avoid rendering if it is hidden.
+         *
+         * @param {IComboBoxOption} props Combobox item props.
+         * @param {Function} defaultRender Combobox item default renderer.
+         * @returns {JSX.Element | null} Element to render.
+         */
+        this.onRenderItem = (props, defaultRender) => {
+            if (defaultRender && props) {
+                if (props.title === undefined) {
+                    // Apply title by default if property not provided
+                    // In older fluent-ui versions it was applied by default, but behavior changed in version '8.66.2'
+                    props.title = props.text;
+                }
+                return defaultRender(props);
+            }
+            return null;
+        };
+        this.state = {
+            options: [],
+            isOpen: false
+        };
+    }
+    /**
+     * Method returns styles for callout to support property 'useDropdownAsMenuMinWidth'.
+     * States:
+     * 1. Min width of callout is equals to width of droipdown input box;
+     * 2. Max width equals to windows size minus 10px;
+     * 3. Width is auto - it allows to make callout wider if menu option size exceeds size of dropdown input(min-width).
+     *
+     * @param {ICalloutContentStyleProps} calloutStyleProps Current callout styles.
+     * @returns {Partial<ICalloutContentStyles>} Styles for callout.
+     */
+    getCalloutStylesForUseAsMinWidth(calloutStyleProps) {
+        return {
+            root: {
+                minWidth: calloutStyleProps.calloutWidth,
+                width: 'auto',
+                maxWidth: 'calc(100% - 10px)'
+            }
+        };
+    }
+    /**
+     * @returns {JSX.Element}
+     */
+    render() {
+        const messageInfo = ValidationMessage_1.getMessageInfo(this.props);
+        const errorSuffix = messageInfo.message ? ValidationMessage_1.MESSAGE_TYPES_CLASSNAME_MAP.get(messageInfo.type) : undefined;
+        const dropdownStyles = () => ({
+            ...{
+                label: {
+                    ...UILabel_1.labelGlobalStyle,
+                    ...(this.props.disabled && {
+                        opacity: '0.4'
+                    }),
+                    ...(this.props.required && {
+                        selectors: {
+                            '::after': {
+                                content: `' *'`,
+                                color: ERROR_BORDER_COLOR,
+                                paddingRight: 12
+                            }
+                        }
+                    })
+                },
+                errorMessage: [messageInfo.style]
+            }
+        });
+        const propClassName = this.props.className ? ` ${this.props.className}` : '';
+        return (react_1.default.createElement(react_2.Dropdown, { calloutProps: {
+                calloutMaxHeight: 200,
+                styles: this.props.useDropdownAsMenuMinWidth ? this.getCalloutStylesForUseAsMinWidth : undefined,
+                className: 'ts-Callout ts-Callout-Dropdown'
+            }, onRenderCaretDown: this.onRenderCaretDown, onClick: this.onClick, onChange: this.onChange, onRenderTitle: this.onRenderTitle, onRenderOption: this.onRenderOption.bind(this), onRenderItem: this.onRenderItem.bind(this), 
+            // Use default responsiveMode as xxxLarge, which does not enter mobile mode.
+            responsiveMode: react_2.ResponsiveMode.xxxLarge, ...this.props, styles: dropdownStyles, className: `ts-SelectBox${messageInfo.message ? ' ts-SelectBox--' + errorSuffix : ''}${propClassName}`, errorMessage: messageInfo.message }));
+    }
+}
+exports.UIDropdown = UIDropdown;
+//# sourceMappingURL=UIDropdown.js.map

package/dist/components/UIDropdown/UIDropdown.js.map

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

package/dist/components/UIDropdown/UIDropdown.scss

@@ -0,0 +1,80 @@
+@import '../../styles/_variables.scss';
+@import '../../styles/_mixins.scss';
+@import '../UIComboBox/_mixins.scss';
+
+@mixin apply-dropdown-error-border($border) {
+    .ms-Dropdown {
+        &,
+        &.is-open {
+            &:after {
+                border-color: $border;
+            }
+        }
+    }
+}
+
+.ts-SelectBox {
+    .ms-Dropdown {
+        background: $dropdown-input-background;
+        .ms-Dropdown-title {
+            background: transparent;
+            height: $dropdown-input-height;
+            line-height: $dropdown-input-height;
+            border: $dropdown-input-border-width solid transparent;
+            padding: $dropdown-input-text-padding;
+            @include base-font;
+        }
+        > .ms-Dropdown-caretDownWrapper {
+            @include caretDown-icon;
+            i {
+                margin-top: -$dropdown-input-border-width;
+            }
+        }
+        // Font color
+        &,
+        &:hover {
+            .ms-Dropdown-title {
+                color: $dropdown-input-color;
+            }
+        }
+        &:after {
+            pointer-events: none;
+            content: '';
+            position: absolute;
+            box-sizing: border-box;
+            top: 0px;
+            left: 0px;
+            width: 100%;
+            height: 100%;
+            border: $dropdown-input-border;
+            border-radius: $dropdown-input-border-radius;
+        }
+        &.is-open,
+        &:focus,
+        &:hover {
+            &:after {
+                border: $dropdown-input-border-width solid $dropdown-input-focus-border-color;
+            }
+        }
+        &.is-disabled {
+            @include input-disabled;
+        }
+    }
+    &--error {
+        @include apply-dropdown-error-border(var(--vscuie-inputValidation-errorBorder));
+    }
+    &--warning {
+        @include apply-dropdown-error-border(var(--vscuie-inputValidation-warningBorder));
+    }
+    &--info {
+        @include apply-dropdown-error-border(var(--vscuie-inputValidation-infoBorder));
+    }
+}
+
+.ts-dropdown-item-blocker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+}

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

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

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

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

package/dist/components/UIDropdown/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("./UIDropdown"), exports);
+//# sourceMappingURL=index.js.map

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

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