carbon-addons-iot-react 2.98.2 → 2.100.1

package/es/src/components/ComboBox/ComboBox.jsx

@@ -0,0 +1,375 @@
+import { Tag } from 'carbon-components-react';
+import PropTypes from 'prop-types';
+import React, { useState, useEffect, useMemo } from 'react';
+import classnames from 'classnames';
+import 'core-js/modules/es.symbol';
+import 'core-js/modules/es.array.filter';
+import 'core-js/modules/es.array.for-each';
+import 'core-js/modules/es.object.get-own-property-descriptor';
+import 'core-js/modules/es.object.get-own-property-descriptors';
+import 'core-js/modules/es.object.keys';
+import 'core-js/modules/web.dom-collections.for-each';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { settings } from '../../constants/Settings.js';
+import 'core-js/modules/es.array.concat';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import 'core-js/modules/es.array.map';
+import 'core-js/modules/es.array.slice';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import 'core-js/modules/es.array.join';
+import 'core-js/modules/es.array.reduce';
+import 'core-js/modules/es.regexp.exec';
+import deprecate from '../../internal/deprecate.js';
+import 'core-js/modules/es.array.splice';
+import 'core-js/modules/es.string.trim';
+import 'core-js/modules/es.string.split';
+import 'core-js/modules/es.array.index-of';
+import 'core-js/modules/es.string.starts-with';
+import ComboBox from './CarbonComboBox.jsx';
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+var iotPrefix = settings.iotPrefix;
+
+var propTypes = _objectSpread({}, ComboBox.propTypes, {
+  loading: PropTypes.bool,
+  // Callback that is called with the value of the input on change
+  onChange: PropTypes.func.isRequired,
+  // OPtional classname to be applied to wrapper
+  wrapperClassName: PropTypes.string,
+  // String to pass to input field option
+  editOptionText: PropTypes.string,
+  // String to pass for tags close button aria-label. Will be prepended to value name
+  closeButtonText: PropTypes.string,
+  // Bit that will allow mult value and tag feature
+  hasMultiValue: deprecate(PropTypes.bool, '\nThe prop `hasMultiValue` for Combobox is experimental. The functionality that is enabled by this prop is subject to change until Combobbox moves out of experimental.')
+});
+
+var defaultProps = _objectSpread({}, ComboBox.defaultProps, {
+  loading: false,
+  wrapperClassName: null,
+  closeButtonText: 'Close',
+  editOptionText: '-Create',
+  hasMultiValue: false,
+  items: []
+});
+
+var ComboBox$1 = function ComboBox$$1(_ref) {
+  var loading = _ref.loading,
+      wrapperClassName = _ref.wrapperClassName,
+      closeButtonText = _ref.closeButtonText,
+      editOptionText = _ref.editOptionText,
+      hasMultiValue = _ref.hasMultiValue,
+      onChange = _ref.onChange,
+      comboProps = _objectWithoutProperties(_ref, ["loading", "wrapperClassName", "closeButtonText", "editOptionText", "hasMultiValue", "onChange"]);
+
+  var items = comboProps.items,
+      ariaLabel = comboProps.ariaLabel,
+      className = comboProps.className,
+      disabled = comboProps.disabled,
+      id = comboProps.id,
+      initialSelectedItem = comboProps.initialSelectedItem,
+      downshiftProps = comboProps.downshiftProps,
+      itemToString = comboProps.itemToString,
+      itemToElement = comboProps.itemToElement,
+      placeholder = comboProps.placeholder,
+      shouldFilterItem = comboProps.shouldFilterItem,
+      type = comboProps.type,
+      invalid = comboProps.invalid,
+      invalidText = comboProps.invalidText,
+      translateWithId = comboProps.translateWithId,
+      size = comboProps.size,
+      onInputChange = comboProps.onInputChange,
+      light = comboProps.light,
+      direction = comboProps.direction; // Ref for the combobox input
+
+  var comboRef = /*#__PURE__*/React.createRef(); // Input value that is added to list
+
+  var _useState = useState(''),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputValue = _useState2[0],
+      setInputValue = _useState2[1]; // Current selected item that shows in the input
+
+
+  var _useState3 = useState(null),
+      _useState4 = _slicedToArray(_useState3, 2),
+      selectedItem = _useState4[0],
+      setSelectedItem = _useState4[1]; // Array that populates list
+
+
+  var _useState5 = useState(items),
+      _useState6 = _slicedToArray(_useState5, 2),
+      listItems = _useState6[0],
+      setListItems = _useState6[1]; // Array that populates tags
+
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      tagItems = _useState8[0],
+      setTagItems = _useState8[1]; // Highlighted index for list dropdown
+
+
+  var _useState9 = useState(-1),
+      _useState10 = _slicedToArray(_useState9, 2),
+      highlightedIndex = _useState10[0],
+      setHighlightedIndex = _useState10[1];
+
+  useEffect(function () {
+    // If there are tags then clear and focus the input
+    if (hasMultiValue) {
+      setSelectedItem(null);
+    }
+  });
+
+  var handleOnClose = function handleOnClose(e) {
+    var _e$currentTarget$pare, _e$currentTarget$pare2, _e$currentTarget$pare3, _e$currentTarget$pare4, _e$currentTarget$pare5, _e$currentTarget$pare6, _e$currentTarget$pare7, _e$currentTarget$pare8;
+
+    // Get close target's text
+    var closedValue = (_e$currentTarget$pare = e.currentTarget.parentNode) === null || _e$currentTarget$pare === void 0 ? void 0 : (_e$currentTarget$pare2 = _e$currentTarget$pare.children[0]) === null || _e$currentTarget$pare2 === void 0 ? void 0 : _e$currentTarget$pare2.textContent; // If there is a tag with the same value then remove from tag array
+
+    tagItems.forEach(function (item, idx) {
+      if (itemToString(item) === closedValue) {
+        tagItems.splice(idx, 1);
+        setTagItems(_toConsumableArray(tagItems));
+      }
+    }); // Send new value to users onChange callback
+
+    onChange(_toConsumableArray(tagItems)); // eslint-disable-next-line no-unused-expressions
+
+    (_e$currentTarget$pare3 = e.currentTarget.parentNode) === null || _e$currentTarget$pare3 === void 0 ? void 0 : (_e$currentTarget$pare4 = _e$currentTarget$pare3.parentNode) === null || _e$currentTarget$pare4 === void 0 ? void 0 : (_e$currentTarget$pare5 = _e$currentTarget$pare4.parentNode) === null || _e$currentTarget$pare5 === void 0 ? void 0 : (_e$currentTarget$pare6 = _e$currentTarget$pare5.firstChild) === null || _e$currentTarget$pare6 === void 0 ? void 0 : (_e$currentTarget$pare7 = _e$currentTarget$pare6.children[0]) === null || _e$currentTarget$pare7 === void 0 ? void 0 : (_e$currentTarget$pare8 = _e$currentTarget$pare7.children[1]) === null || _e$currentTarget$pare8 === void 0 ? void 0 : _e$currentTarget$pare8.focus();
+  };
+
+  var handleOnChange = function handleOnChange(_ref2) {
+    var downShiftSelectedItem = _ref2.selectedItem;
+    var newItem = downShiftSelectedItem && Object.keys(downShiftSelectedItem).reduce(function (acc, currentId) {
+      return _objectSpread({}, acc, _defineProperty({}, currentId, downShiftSelectedItem[currentId].trim()));
+    }, {});
+    var currentValue = itemToString(newItem); // Check that there is no existing tag
+
+    var hasNoExistingTag = tagItems.filter(function (x) {
+      return itemToString(x) === currentValue;
+    }).length < 1; // Check if value is part of items array
+
+    var matchedItem = listItems.filter(function (x) {
+      return itemToString(x).trim() === currentValue;
+    })[0];
+
+    if (hasMultiValue) {
+      // If tags array does not contain new value
+      if (newItem && hasNoExistingTag) {
+        // Add new value to tags array
+        setTagItems(function (inputValues) {
+          return [].concat(_toConsumableArray(inputValues), [newItem]);
+        }); // pass the combobox value to user's onChange callback
+
+        onChange([].concat(_toConsumableArray(tagItems), [newItem]));
+      }
+    } else {
+      onChange(newItem);
+    }
+
+    if ((newItem === null || newItem === void 0 ? void 0 : newItem.id.startsWith("".concat(iotPrefix, "-input-"))) && !matchedItem) {
+      // Add new item to items array
+      setListItems(function (currentList) {
+        return [newItem].concat(_toConsumableArray(currentList));
+      });
+    }
+
+    setSelectedItem(newItem);
+    setInputValue(null);
+  };
+
+  var handleOnKeypress = function handleOnKeypress(evt) {
+    // Current value of input
+    var currentValue = comboRef.current.textInput.current.value.trim();
+
+    if (evt.key === 'Enter' && currentValue && highlightedIndex < 0) {
+      var newItem = {
+        id: "".concat(iotPrefix, "-input-").concat(currentValue.split(' ').join('-'), "-").concat(currentValue.length),
+        text: currentValue
+      };
+      handleOnChange({
+        selectedItem: newItem
+      });
+    }
+  };
+
+  var handleInputChange = function handleInputChange(e) {
+    var matchedItem = listItems.filter(function (x) {
+      return itemToString(x) === e;
+    })[0];
+
+    if (e !== '' && !matchedItem) {
+      setInputValue({
+        id: "".concat(iotPrefix, "-input-").concat(e.split(' ').join('-'), "-").concat(e.length),
+        text: e
+      });
+    } else {
+      setInputValue(null);
+    } // Pass on to user callback
+
+
+    onInputChange(e);
+  };
+
+  var findHighlightedIndex = function findHighlightedIndex(_ref3, carbonInputValue) {
+    var carbonItems = _ref3.items;
+
+    if (!carbonInputValue) {
+      return -1;
+    }
+
+    var searchValue = carbonItems[0].id.startsWith("".concat(iotPrefix, "-input")) ? carbonInputValue.slice(0, -1).toLowerCase() : carbonInputValue.toLowerCase(); // eslint-disable-next-line no-plusplus
+
+    for (var i = 0; i < carbonItems.length; i++) {
+      var item = itemToString(carbonItems[i]).toLowerCase();
+
+      if (item.indexOf(searchValue) !== -1 && searchValue && searchValue.trim() === item.trim()) {
+        return i;
+      }
+    }
+
+    return -1;
+  };
+
+  var combinedItems = useMemo(function () {
+    return inputValue ? [inputValue].concat(_toConsumableArray(listItems)) : listItems;
+  }, [inputValue, listItems]);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    React.createElement("div", {
+      className: classnames("".concat(iotPrefix, "--combobox"), _defineProperty({}, wrapperClassName, wrapperClassName), _defineProperty({}, "".concat(iotPrefix, "--combobox-add"), inputValue)),
+      onKeyDown: function onKeyDown(evt) {
+        return handleOnKeypress(evt);
+      },
+      "data-testid": "combo-wrapper"
+    }, /*#__PURE__*/React.createElement(ComboBox, {
+      "data-testid": "combo-box",
+      ariaLabel: ariaLabel,
+      id: id,
+      type: type,
+      placeholder: placeholder,
+      shouldFilterItem: shouldFilterItem,
+      size: size,
+      invalid: invalid,
+      light: light,
+      direction: direction,
+      invalidText: invalidText,
+      translateWithId: translateWithId,
+      initialSelectedItem: initialSelectedItem,
+      downshiftProps: downshiftProps,
+      findHighlightedIndex: findHighlightedIndex,
+      onHighligtedIndexChange: setHighlightedIndex,
+      ref: comboRef,
+      selectedItem: comboProps.selectedItem || selectedItem,
+      items: combinedItems,
+      itemToString: itemToString,
+      itemToElement: itemToElement,
+      editOptionText: editOptionText,
+      onChange: handleOnChange,
+      onInputChange: handleInputChange,
+      className: classnames(className, "".concat(iotPrefix, "--combobox-input")),
+      disabled: disabled || loading !== undefined && loading !== false
+    }), /*#__PURE__*/React.createElement("ul", {
+      "data-testid": "combo-tags",
+      className: "".concat(iotPrefix, "--combobox-tags")
+    }, tagItems.map(function (item, idx) {
+      return /*#__PURE__*/React.createElement("li", {
+        key: "li-".concat(item === null || item === void 0 ? void 0 : item.id, "-").concat(idx)
+      }, /*#__PURE__*/React.createElement(Tag, {
+        key: "tag-".concat(item === null || item === void 0 ? void 0 : item.id, "-").concat(idx),
+        filter: true,
+        onClose: function onClose(e) {
+          return handleOnClose(e);
+        },
+        title: closeButtonText
+      }, itemToString(item)));
+    })))
+  );
+};
+
+ComboBox$1.propTypes = propTypes;
+ComboBox$1.defaultProps = defaultProps;
+ComboBox$1.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ComboBox",
+  "props": {
+    "loading": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "wrapperClassName": {
+      "defaultValue": {
+        "value": "null",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "closeButtonText": {
+      "defaultValue": {
+        "value": "'Close'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "editOptionText": {
+      "defaultValue": {
+        "value": "'-Create'",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "hasMultiValue": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "type": {
+        "name": "custom",
+        "raw": "deprecate(\n  PropTypes.bool,\n  '\\nThe prop `hasMultiValue` for Combobox is experimental. The functionality that is enabled by this prop is subject to change until Combobbox moves out of experimental.'\n)"
+      },
+      "required": false,
+      "description": ""
+    },
+    "items": {
+      "defaultValue": {
+        "value": "[]",
+        "computed": false
+      },
+      "required": false
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": true,
+      "description": ""
+    }
+  },
+  "composes": ["./CarbonComboBox"]
+};
+
+export default ComboBox$1;

package/es/src/components/ComposedModal/ComposedModal.jsx

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
 import classnames from 'classnames';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import { settings } from '../../constants/Settings.js';
 import 'core-js/modules/es.array.concat';
 import _extends from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
@@ -49,6 +50,7 @@ function _templateObject() {
 
   return data;
 }
+var iotPrefix = settings.iotPrefix;
 var StyledModal = styled(ComposedModal)(_templateObject(), rem(515), rem(600), rem(800), rem(600), rem(1024), rem(1200), rem(200));
 var StyledMessageBox = styled(InlineNotification)(_templateObject2(), PADDING.horizontalWrapPadding, PADDING.verticalPadding);
 var StyledModalFooter = styled(ModalFooter)(_templateObject3());
@@ -225,7 +227,9 @@ var ComposedModal$1 = /*#__PURE__*/function (_React$Component) {
         iconDescription: iconDescription
       }, helpText ? /*#__PURE__*/React.createElement("p", {
         className: "bx--modal-content__text"
-      }, helpText) : null), children ? /*#__PURE__*/React.createElement(ModalBody, null, children) : null, error ? /*#__PURE__*/React.createElement(StyledMessageBox, {
+      }, helpText) : null), children ? /*#__PURE__*/React.createElement(ModalBody, {
+        className: classnames(_defineProperty({}, "".concat(iotPrefix, "--composed-modal__body--small-margin-bottom"), error))
+      }, children) : null, error ? /*#__PURE__*/React.createElement(StyledMessageBox, {
         title: error,
         subtitle: "",
         kind: "error",

package/es/src/index.js

@@ -1,5 +1,5 @@
 import withSize from 'react-sizeme';
-export { BreadcrumbItem, BreadcrumbSkeleton, Accordion, AccordionItem, Checkbox, CodeSnippet, ComboBox, ModalHeader, ModalBody, ModalFooter, ContentSwitcher, Copy, CopyButton, DangerButton, DataTable, DatePicker, DatePickerInput, Dropdown, Filename, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, Form, FormGroup, FormItem, FormLabel, Icon, InlineLoading, Link, ListItem, Loading, Modal, ModalWrapper, MultiSelect, ToastNotification, InlineNotification, NotificationActionButton, NotificationButton, NotificationTextDetails, NumberInput, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PrimaryButton, ProgressStep, RadioButton, RadioButtonGroup, Search, SearchFilterButton, SearchLayoutButton, SecondaryButton, Select, SelectItem, SelectItemGroup, Switch, Slider, StructuredListWrapper, StructuredListHead, StructuredListBody, StructuredListRow, StructuredListInput, StructuredListCell, Tab, TabContent, Tabs, Tag, TextArea, TextInput, Tile, ClickableTile, SelectableTile, ExpandableTile, TileAboveTheFoldContent, TileBelowTheFoldContent, RadioTile, TileGroup, TimePicker, TimePickerSelect, Toggle, ToggleSmall, Toolbar, ToolbarItem, ToolbarTitle, ToolbarOption, ToolbarDivider, ToolbarSearch, Tooltip, TooltipDefinition, TooltipIcon, UnorderedList, SkeletonText, SkeletonPlaceholder, DataTableSkeleton, AccordionSkeleton, ButtonSkeleton, CheckboxSkeleton, CodeSnippetSkeleton, DropdownSkeleton, FileUploaderSkeleton, NumberInputSkeleton, ProgressIndicatorSkeleton, RadioButtonSkeleton, SearchSkeleton, SelectSkeleton, SliderSkeleton, StructuredListSkeleton, TabsSkeleton, TagSkeleton, TextAreaSkeleton, TextInputSkeleton, ToggleSkeleton, ToggleSmallSkeleton, IconSkeleton, DatePickerSkeleton, Content, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Switcher, SwitcherItem, SwitcherDivider, SkipToContent, SideNavDetails, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher } from 'carbon-components-react';
+export { BreadcrumbItem, BreadcrumbSkeleton, Accordion, AccordionItem, Checkbox, CodeSnippet, ModalHeader, ModalBody, ModalFooter, ContentSwitcher, Copy, CopyButton, DangerButton, DataTable, DatePicker, DatePickerInput, Dropdown, Filename, FileUploader, FileUploaderButton, FileUploaderDropContainer, FileUploaderItem, Form, FormGroup, FormItem, FormLabel, Icon, InlineLoading, Link, ListItem, Loading, Modal, ModalWrapper, MultiSelect, ToastNotification, InlineNotification, NotificationActionButton, NotificationButton, NotificationTextDetails, NumberInput, OrderedList, OverflowMenu, OverflowMenuItem, Pagination, PrimaryButton, ProgressStep, RadioButton, RadioButtonGroup, Search, SearchFilterButton, SearchLayoutButton, SecondaryButton, Select, SelectItem, SelectItemGroup, Switch, Slider, StructuredListWrapper, StructuredListHead, StructuredListBody, StructuredListRow, StructuredListInput, StructuredListCell, Tab, TabContent, Tabs, Tag, TextArea, TextInput, Tile, ClickableTile, SelectableTile, ExpandableTile, TileAboveTheFoldContent, TileBelowTheFoldContent, RadioTile, TileGroup, TimePicker, TimePickerSelect, Toggle, ToggleSmall, Toolbar, ToolbarItem, ToolbarTitle, ToolbarOption, ToolbarDivider, ToolbarSearch, Tooltip, TooltipDefinition, TooltipIcon, UnorderedList, SkeletonText, SkeletonPlaceholder, DataTableSkeleton, AccordionSkeleton, ButtonSkeleton, CheckboxSkeleton, CodeSnippetSkeleton, DropdownSkeleton, FileUploaderSkeleton, NumberInputSkeleton, ProgressIndicatorSkeleton, RadioButtonSkeleton, SearchSkeleton, SelectSkeleton, SliderSkeleton, StructuredListSkeleton, TabsSkeleton, TagSkeleton, TextAreaSkeleton, TextInputSkeleton, ToggleSkeleton, ToggleSmallSkeleton, IconSkeleton, DatePickerSkeleton, Content, HeaderContainer, HeaderGlobalAction, HeaderGlobalBar, HeaderMenu, HeaderMenuButton, HeaderMenuItem, HeaderName, HeaderNavigation, HeaderPanel, HeaderSideNavItems, Switcher, SwitcherItem, SwitcherDivider, SkipToContent, SideNavDetails, SideNavFooter, SideNavHeader, SideNavIcon, SideNavItem, SideNavItems, SideNavLink, SideNavLinkText, SideNavMenu, SideNavMenuItem, SideNavSwitcher } from 'carbon-components-react';
 export { default as AddCard } from './components/AddCard/AddCard.jsx';
 export { default as Button } from './components/Button/Button.jsx';
 export { CARD_TYPES, CARD_SIZES, CARD_ACTIONS, DASHBOARD_BREAKPOINTS, DASHBOARD_SIZES, TIME_SERIES_TYPES, BAR_CHART_TYPES } from './constants/LayoutConstants.js';
@@ -71,6 +71,7 @@ export { default as StatefulTileGallery } from './components/TileGallery/Statefu
 export { default as SimpleList } from './components/List/SimpleList/SimpleList.jsx';
 export { default as IconSwitch, ICON_SWITCH_SIZES } from './components/IconSwitch/IconSwitch.jsx';
 export { default as AccordionItemDefer } from './components/Accordion/AccordionItemDefer.jsx';
+export { default as ComboBox } from './components/ComboBox/ComboBox.jsx';
 
 // Needed so that any component that uses sizeme can be jest tested
 withSize.noPlaceholders = true; // Components

package/lib/css/carbon-addons-iot-react.css

@@ -2344,39 +2344,6 @@ html[dir='rtl'] .chart-holder .axis {
   html[dir='rtl'] .chart-holder .axis .axis-title {
     direction: ltr; }
 
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-style: italic;
-  font-weight: 300;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-LightItalic.woff2) format("woff2"); }
-
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-style: italic;
-  font-weight: 400;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-Italic.woff2) format("woff2"); }
-
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-style: italic;
-  font-weight: 600;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-SemiBoldItalic.woff2) format("woff2"); }
-
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-weight: 300;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-Light.woff2) format("woff2"); }
-
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-weight: 400;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-Regular.woff2) format("woff2"); }
-
-@font-face {
-  font-family: 'IBM Plex Sans Condensed';
-  font-weight: 600;
-  src: url(//unpkg.com/@ibm/plex/IBM-Plex-Sans-Condensed/fonts/complete/woff2/IBMPlexSansCondensed-SemiBold.woff2) format("woff2"); }
-
 .bx--btn-set {
   display: flex; }
 
@@ -4282,6 +4249,35 @@ input:not(output):not([data-invalid]):-moz-ui-invalid {
 .bx--list-box__field {
   padding: 0; }
 
+.iot--combobox {
+  display: flex;
+  flex-flow: column-reverse;
+  position: relative;
+  padding-top: 2.5rem; }
+  .iot--combobox .bx--form__helper-text,
+  .iot--combobox .bx--label {
+    bottom: 100%;
+    position: absolute; }
+  .iot--combobox .bx--label {
+    -webkit-transform: translateY(25px);
+            transform: translateY(25px); }
+  .iot--combobox .bx--form__helper-text {
+    -webkit-transform: translateY(40px);
+            transform: translateY(40px); }
+  .iot--combobox-tags {
+    margin-bottom: 0.5rem; }
+    .iot--combobox-tags li {
+      display: inline-block;
+      max-width: 100%; }
+  .iot--combobox.iot--combobox-add .bx--list-box__menu-item:first-child::after {
+    content: attr(data-text);
+    color: #a8a8a8;
+    position: absolute;
+    right: 0.5rem;
+    top: 50%;
+    -webkit-transform: translateY(-50%);
+            transform: translateY(-50%); }
+
 .bx--radio-button-group {
   display: flex;
   align-items: center;
@@ -12979,6 +12975,13 @@ a.bx--tabs__nav-link:active {
         -webkit-animation: none;
                 animation: none; } }
 
+html[dir='rtl'] .bx--tag--filter {
+  padding-right: 0.5rem;
+  padding-left: 0.125rem; }
+
+html[dir='rtl'] .bx--tag__close-icon {
+  margin: 0 0.25rem 0 0; }
+
 .bx--data-table-container + .bx--pagination {
   border-top: 0; }
 
@@ -15830,6 +15833,9 @@ html[dir='rtl'] .iot--card--header .iot--card--toolbar {
 .iot--card .bx--chart-holder {
   background-color: #ffffff; }
 
+.iot--composed-modal__body--small-margin-bottom {
+  margin-bottom: 1rem; }
+
 .react-grid-layout {
   position: relative;
   transition: height 200ms ease; }