@sap-ux/ui-components 1.11.2 → 1.11.3

package/dist/components/UICreateSelect/UICreateSelect.d.ts

@@ -0,0 +1,41 @@
+import type { FC } from 'react';
+import type { ActionMeta, MultiValue, Options, OptionsOrGroups, GetOptionLabel, GetOptionValue } from 'react-select';
+import './UICreateSelect.scss';
+export { MultiValue as UICreateSelectMultiValue };
+export { ActionMeta as UICreateSelectActionMeta };
+export { Options as UICreateSelectOptions };
+export { OptionsOrGroups as UICreateSelectOptionsOrGroups };
+export interface UICreateSelectOptionEntry {
+    readonly label: string;
+    readonly value: string;
+    __isNew__?: boolean;
+}
+export interface UICreateSelectGroupEntry {
+    readonly options: readonly UICreateSelectOptionEntry[];
+    readonly label?: string;
+}
+export interface UICreateSelectAccessors<Option> {
+    getOptionValue: GetOptionValue<Option>;
+    getOptionLabel: GetOptionLabel<Option>;
+}
+export type UICreateSelectProps = {
+    defaultMenuIsOpen?: boolean;
+    createText?: string;
+    isClearable: boolean;
+    isLoading: boolean;
+    isDisabled: boolean;
+    placeholder: string;
+    value: UICreateSelectOptionEntry | undefined;
+    options: UICreateSelectOptionEntry[];
+    isValidNewOption?: (inputValue: string, selectValue: Options<UICreateSelectOptionEntry>, selectOptions: OptionsOrGroups<UICreateSelectOptionEntry, UICreateSelectGroupEntry>, accessors: UICreateSelectAccessors<UICreateSelectOptionEntry>) => boolean;
+    handleCreate?: (inputValue: string) => void;
+    handleOnChange?: (newValue: MultiValue<UICreateSelectOptionEntry>, actionMeta: ActionMeta<UICreateSelectOptionEntry>) => void;
+};
+/**
+ * Return a UICreateSelect component.
+ *
+ * @param {UICreateSelectProps} props to be passed to the component.
+ * @returns {JSX.Element}
+ */
+export declare const UICreateSelect: FC<UICreateSelectProps>;
+//# sourceMappingURL=UICreateSelect.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UICreateSelect.d.ts","sourceRoot":"","sources":["../../../src/components/UICreateSelect/UICreateSelect.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAEhC,OAAO,KAAK,EAKR,UAAU,EACV,UAAU,EACV,OAAO,EACP,eAAe,EACf,cAAc,EACd,cAAc,EACjB,MAAM,cAAc,CAAC;AAQtB,OAAO,uBAAuB,CAAC;AAE/B,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,CAAC;AAClD,OAAO,EAAE,UAAU,IAAI,wBAAwB,EAAE,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,CAAC;AAC5C,OAAO,EAAE,eAAe,IAAI,6BAA6B,EAAE,CAAC;AAE5D,MAAM,WAAW,yBAAyB;IACtC,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,wBAAwB;IACrC,QAAQ,CAAC,OAAO,EAAE,SAAS,yBAAyB,EAAE,CAAC;IACvD,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED,MAAM,WAAW,uBAAuB,CAAC,MAAM;IAC3C,cAAc,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;IACvC,cAAc,EAAE,cAAc,CAAC,MAAM,CAAC,CAAC;CAC1C;AAED,MAAM,MAAM,mBAAmB,GAAG;IAC9B,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;IACrB,SAAS,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,yBAAyB,GAAG,SAAS,CAAC;IAC7C,OAAO,EAAE,yBAAyB,EAAE,CAAC;IACrC,gBAAgB,CAAC,EAAE,CACf,UAAU,EAAE,MAAM,EAClB,WAAW,EAAE,OAAO,CAAC,yBAAyB,CAAC,EAC/C,aAAa,EAAE,eAAe,CAAC,yBAAyB,EAAE,wBAAwB,CAAC,EACnF,SAAS,EAAE,uBAAuB,CAAC,yBAAyB,CAAC,KAC5D,OAAO,CAAC;IACb,YAAY,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5C,cAAc,CAAC,EAAE,CACb,QAAQ,EAAE,UAAU,CAAC,yBAAyB,CAAC,EAC/C,UAAU,EAAE,UAAU,CAAC,yBAAyB,CAAC,KAChD,IAAI,CAAC;CACb,CAAC;AA6EF;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,EAAE,CAAC,mBAAmB,CAyHlD,CAAC"}

package/dist/components/UICreateSelect/UICreateSelect.js

@@ -0,0 +1,172 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UICreateSelect = void 0;
+const react_1 = __importDefault(require("react"));
+const react_select_1 = require("react-select");
+const creatable_1 = __importDefault(require("react-select/creatable"));
+const UIIcon_1 = require("../UIIcon");
+const UILoader_1 = require("../UILoader");
+const UIContextualMenu_1 = require("../UIContextualMenu");
+require("./UICreateSelect.scss");
+/**
+ * Return a custom dropdown indicator component to be used in the select component.
+ *
+ * @param {DropdownIndicatorProps<UICreateSelectOptionEntry>} props
+ * @returns {JSX.Element}
+ */
+const DropdownIndicator = (props) => {
+    return (react_1.default.createElement(react_select_1.components.DropdownIndicator, { ...props },
+        react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-dropdown", iconName: "ArrowDown" })));
+};
+/**
+ * Return a custom clear indicator component to be used in the select component.
+ *
+ * @param {ClearIndicatorProps<UICreateSelectOptionEntry, true>} props
+ * @returns {JSX.Element}
+ */
+const ClearIndicator = (props) => {
+    return (react_1.default.createElement(react_select_1.components.ClearIndicator, { ...props },
+        react_1.default.createElement(UIIcon_1.UIIcon, { className: "ui-create-select-indicator-clear", iconName: "Clear" })));
+};
+/**
+ * Return a custom loading indicator component to be used in the select component.
+ *
+ * @param {LoadingIndicatorProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} _props
+ * @returns {JSX.Element}
+ */
+const LoadingIndicator = (_props) => {
+    return (react_1.default.createElement("div", { className: "ui-create-select-indicator-loading" },
+        react_1.default.createElement(UILoader_1.UILoader, { className: "uiLoaderXSmall", labelPosition: "right" })));
+};
+/**
+ * Return a custom option component to be used in the select component.
+ *
+ * @param {OptionProps<UICreateSelectOptionEntry, true, UICreateSelectGroupEntry>} props
+ * @returns {JSX.Element}
+ */
+const Option = (props) => {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        !props?.data?.__isNew__ && (react_1.default.createElement(react_select_1.components.Option, { ...props },
+            react_1.default.createElement(UIContextualMenu_1.UIHighlightMenuOption, { text: props?.data?.label, query: props?.selectProps?.inputValue }))),
+        props?.data?.__isNew__ && react_1.default.createElement(react_select_1.components.Option, { ...props })));
+};
+const getBackgroundColor = (state) => {
+    let backgroundColor = 'transparent';
+    if (state.isSelected) {
+        backgroundColor =
+            'var(--vscode-editorSuggestWidget-selectedBackground, var(--vscode-quickInputList-focusBackground))';
+    }
+    if (state.isFocused && !state.isSelected) {
+        backgroundColor = 'var(--vscode-list-hoverBackground)';
+    }
+    return backgroundColor;
+};
+/**
+ * Return a UICreateSelect component.
+ *
+ * @param {UICreateSelectProps} props to be passed to the component.
+ * @returns {JSX.Element}
+ */
+const UICreateSelect = (props) => {
+    const formatCreateLabel = (inputValue) => `${props.createText}: ${inputValue}`;
+    return (react_1.default.createElement(creatable_1.default, { defaultMenuIsOpen: props.defaultMenuIsOpen, className: "ui-create-select", classNamePrefix: "ui-create-select", isClearable: props.isClearable, isDisabled: props.isDisabled, isLoading: props.isLoading, isValidNewOption: props.isValidNewOption, openMenuOnFocus: false, createOptionPosition: "first", allowCreateWhileLoading: true, formatOptionLabel: (option) => option.label, placeholder: props.placeholder, onChange: props.handleOnChange, onCreateOption: props.handleCreate, options: props.options, value: props.value, formatCreateLabel: formatCreateLabel, components: { ClearIndicator, DropdownIndicator, LoadingIndicator, Option }, unstyled: true, styles: {
+            control: (baseStyles, state) => ({
+                ...baseStyles,
+                background: 'var(--vscode-input-background)',
+                height: '26px',
+                maxHeight: '26px',
+                minHeight: '26px',
+                padding: '0px 0px 0px 8px;',
+                boxShadow: 'none',
+                boxSizing: 'border-box',
+                borderWidth: '1px',
+                borderStyle: 'solid',
+                borderColor: state.isFocused ? 'var(--vscode-focusBorder)' : 'var(--vscode-editorWidget-border)',
+                color: 'var(--vscode-input-foreground)',
+                borderRadius: 0,
+                '&:hover': {
+                    borderColor: 'var(--vscode-focusBorder)'
+                }
+            }),
+            input: (baseStyles, _state) => ({
+                ...baseStyles,
+                color: 'var(--vscode-input-foreground)',
+                background: 'transparent',
+                fontFamily: 'var(--vscode-font-family)',
+                fontSize: '13px',
+                fontWeight: 'normal',
+                minHeight: 'unset',
+                padding: '1px 0px 1px 1px',
+                outline: 0
+            }),
+            menu: (baseStyles, _state) => ({
+                ...baseStyles,
+                background: 'var(--vscode-menu-background, var(--vscode-input-background))',
+                border: '1px solid var(--vscode-focusBorder)',
+                boxSizing: 'border-box',
+                margin: '0px',
+                borderRadius: 0
+            }),
+            option: (baseStyles, state) => ({
+                ...baseStyles,
+                fontFamily: 'var(--vscode-font-family)',
+                fontWeight: 'var(--vscode-font-weight)',
+                minHeight: '22px',
+                height: '22px',
+                lineHeight: '22px',
+                color: state.isSelected
+                    ? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
+                    : 'var(--vscode-editorSuggestWidget-foreground)',
+                backgroundColor: getBackgroundColor(state),
+                letterSpacing: 'normal',
+                border: '0',
+                padding: '0px 8px',
+                fontSize: '13px',
+                '&:hover': {
+                    backgroundColor: !state.isSelected
+                        ? 'var(--vscode-list-hoverBackground)'
+                        : getBackgroundColor(state),
+                    color: state.isSelected
+                        ? 'var(--vscode-editorSuggestWidget-selectedForeground, var(--vscode-quickInputList-focusForeground, var(--vscode-editorSuggestWidget-foreground)))'
+                        : 'var(--vscode-editorSuggestWidget-foreground)',
+                    cursor: 'pointer'
+                }
+            }),
+            placeholder: (baseStyles, _state) => ({
+                ...baseStyles,
+                fontSize: '13px',
+                fontWeight: 'normal',
+                fontFamily: 'var(--vscode-font-family)',
+                color: 'var(--vscode-input-placeholderForeground)'
+            }),
+            singleValue: (baseStyles, _state) => ({
+                ...baseStyles,
+                color: 'var(--vscode-input-foreground)',
+                background: 'transparent',
+                fontFamily: 'var(--vscode-font-family)',
+                fontSize: '13px',
+                fontWeight: 'normal',
+                minHeight: 'unset',
+                padding: '1px 0px 1px 1px',
+                outline: 0
+            }),
+            valueContainer: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
+            indicatorsContainer: (baseStyles, _state) => ({
+                ...baseStyles,
+                padding: '0px 5px 0px 0px',
+                cursor: 'pointer'
+            }),
+            indicatorSeparator: (baseStyles, _state) => ({ ...baseStyles, display: 'none' }),
+            dropdownIndicator: (baseStyles, _state) => ({ ...baseStyles, padding: '0px' }),
+            clearIndicator: (baseStyles, _state) => ({
+                ...baseStyles,
+                padding: '0px',
+                cursor: 'pointer'
+            })
+        } }));
+};
+exports.UICreateSelect = UICreateSelect;
+//# sourceMappingURL=UICreateSelect.js.map

package/dist/components/UICreateSelect/UICreateSelect.js.map

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

package/dist/components/UICreateSelect/UICreateSelect.scss

@@ -0,0 +1,49 @@
+.ui-create-select {
+    &-indicator {
+        &-clear,
+        &-dropdown {
+            display: flex;
+            height: 16px;
+            align-items: center;
+            justify-content: center;
+            align-content: center;
+        }
+        &-loading {
+            padding-right: 8px;
+        }
+    }
+    &__option {
+        position: relative;
+
+        &--is-selected {
+            .ts-Menu-option--highlighted {
+                color: var(
+                    --vscode-editorSuggestWidget-focusHighlightForeground,
+                    var(--vscode-list-focusHighlightForeground)
+                );
+            }
+            &::after {
+                content: '';
+                position: absolute;
+                inset: 1px;
+                z-index: 1;
+                outline: 1px dashed var(--vscode-contrastActiveBorder);
+                outline-offset: -1px;
+                pointer-events: none;
+                border: none;
+            }
+        }
+        &:hover {
+            &::after {
+                content: '';
+                position: absolute;
+                inset: 1px;
+                z-index: 1;
+                outline: 1px dashed var(--vscode-contrastActiveBorder);
+                outline-offset: -1px;
+                pointer-events: none;
+                border: none;
+            }
+        }
+    }
+}

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

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

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

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

package/dist/components/UICreateSelect/index.js

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

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

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

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './UICheckbox';
 export * from './UIChoiceGroup';
 export * from './UIComboBox';
 export * from './UIContextualMenu';
+export * from './UICreateSelect';
 export * from './UIDialog';
 export * from './UIDropdown';
 export * from './UIFlexibleTable';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC;AACnC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,mBAAmB,CAAC;AAClC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,aAAa,CAAC;AAC5B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAC5B,cAAc,sBAAsB,CAAC;AACrC,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC"}

package/dist/components/index.js

@@ -22,6 +22,7 @@ __exportStar(require("./UICheckbox"), exports);
 __exportStar(require("./UIChoiceGroup"), exports);
 __exportStar(require("./UIComboBox"), exports);
 __exportStar(require("./UIContextualMenu"), exports);
+__exportStar(require("./UICreateSelect"), exports);
 __exportStar(require("./UIDialog"), exports);
 __exportStar(require("./UIDropdown"), exports);
 __exportStar(require("./UIFlexibleTable"), exports);

package/dist/components/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,6CAA2B;AAC3B,iDAA+B;AAC/B,8CAA4B;AAC5B,+CAA6B;AAC7B,kDAAgC;AAChC,+CAA6B;AAC7B,qDAAmC;AACnC,6CAA2B;AAC3B,+CAA6B;AAC7B,oDAAkC;AAClC,gDAA8B;AAC9B,2CAAyB;AACzB,4CAA0B;AAC1B,4CAA0B;AAC1B,2CAAyB;AACzB,2CAAyB;AACzB,6CAA2B;AAC3B,iDAA+B;AAC/B,4CAA0B;AAC1B,8CAA4B;AAC5B,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,4CAA0B;AAC1B,2CAAyB;AACzB,6CAA2B;AAC3B,kDAAgC;AAChC,8CAA4B;AAC5B,8CAA4B;AAC5B,uDAAqC;AACrC,mDAAiC;AACjC,sDAAoC;AACpC,kDAAgC;AAChC,iDAA+B;AAC/B,oDAAkC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,0CAAwB;AACxB,6CAA2B;AAC3B,iDAA+B;AAC/B,8CAA4B;AAC5B,+CAA6B;AAC7B,kDAAgC;AAChC,+CAA6B;AAC7B,qDAAmC;AACnC,mDAAiC;AACjC,6CAA2B;AAC3B,+CAA6B;AAC7B,oDAAkC;AAClC,gDAA8B;AAC9B,2CAAyB;AACzB,4CAA0B;AAC1B,4CAA0B;AAC1B,2CAAyB;AACzB,2CAAyB;AACzB,6CAA2B;AAC3B,iDAA+B;AAC/B,4CAA0B;AAC1B,8CAA4B;AAC5B,8CAA4B;AAC5B,gDAA8B;AAC9B,gDAA8B;AAC9B,8CAA4B;AAC5B,4CAA0B;AAC1B,2CAAyB;AACzB,6CAA2B;AAC3B,kDAAgC;AAChC,8CAA4B;AAC5B,8CAA4B;AAC5B,uDAAqC;AACrC,mDAAiC;AACjC,sDAAoC;AACpC,kDAAgC;AAChC,iDAA+B;AAC/B,oDAAkC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sap-ux/ui-components",
-  "version": "1.11.2",
+  "version": "1.11.3",
   "license": "Apache-2.0",
   "description": "SAP UI Components Library",
   "repository": {
@@ -21,6 +21,7 @@
   "dependencies": {
     "@fluentui/react": "8.100.0",
     "react-movable": "2.4.0",
+    "react-select": "5.7.4",
     "react-virtualized": "9.22.3",
     "sanitize-html": "2.7.3",
     "uuid": "3.4.0"