carbon-addons-iot-react 2.147.0-next.49 → 2.147.0-next.52

package/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.147.0-next.52](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.0-next.51...v2.147.0-next.52) (2021-11-09)
+
+
+### Bug Fixes
+
+* **page-title-bar:** fix compilation error in scss file ([e119bfc](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/e119bfc86349e002af275719042f3e47f4e50d9b))
+
+
+
+
+
+# [2.147.0-next.51](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.0-next.50...v2.147.0-next.51) (2021-11-09)
+
+
+### Bug Fixes
+
+* **card-code-editor:** export from package ([80b050e](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/80b050e4416de20dd90bff71030a0710ed255d7b))
+
+
+
+
+
+# [2.147.0-next.50](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.0-next.49...v2.147.0-next.50) (2021-11-09)
+
+
+### Bug Fixes
+
+* **hierarchy-list:** reset pageination and search when data changes ([6a71e46](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/6a71e46777da03466ee53c8d1007667a6d4c6b33))
+
+
+### Features
+
+* **table:** focus on first filterable column when filter row opened ([8251487](https://github.com/carbon-design-system/carbon-addons-iot-react/commit/8251487a9a3eb2e3cf9289eb4d9b63c3be8f0b6f))
+
+
+
+
+
 # [2.147.0-next.49](https://github.com/carbon-design-system/carbon-addons-iot-react/compare/v2.147.0-next.48...v2.147.0-next.49) (2021-11-09)
 
 

package/es/components/ComboBox/ComboBox.js

@@ -73,7 +73,7 @@ var defaultProps = _objectSpread(_objectSpread({}, ComboBox$1.defaultProps), {},
   horizontalDirection: 'end'
 });
 
-var ComboBox = function ComboBox(_ref) {
+var ComboBox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _classnames;
 
   var loading = _ref.loading,
@@ -99,7 +99,7 @@ var ComboBox = function ComboBox(_ref) {
       rest = _objectWithoutProperties(_ref, ["loading", "wrapperClassName", "closeButtonText", "editOptionText", "hasMultiValue", "onChange", "items", "className", "disabled", "id", "itemToString", "size", "onInputChange", "addToList", "helperText", "shouldFilterItem", "onBlur", "testId", "menuFitContent", "horizontalDirection"]);
 
   // Ref for the combobox input
-  var comboRef = /*#__PURE__*/React__default.createRef(); // Input value that is added to list
+  var comboRef = ref || /*#__PURE__*/React__default.createRef(); // Input value that is added to list
 
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -289,14 +289,12 @@ var ComboBox = function ComboBox(_ref) {
       }, itemToString(item)));
     })) : null)
   );
-};
-
+});
 ComboBox.propTypes = propTypes;
 ComboBox.defaultProps = defaultProps;
 ComboBox.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "ComboBox",
   "props": {
     "loading": {
       "defaultValue": {

package/es/components/List/HierarchyList/HierarchyList.js

@@ -331,6 +331,8 @@ var HierarchyList = function HierarchyList(_ref2) {
   useEffect(function () {
     if (!isEqual(items, previousItems)) {
       setFilteredItems(items);
+      setSearchValue('');
+      setCurrentPageNumber(1);
     }
   }, [items, previousItems]);
   var selectedItemRef = useCallback(function (node) {

package/es/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.js

@@ -88,6 +88,22 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty(_assertThisInitialized(_this), "setFirstFilterableRef", function (node) {
+      if (!_this.firstFilterableRef.current && node) {
+        _this.firstFilterableRef.current = node;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateFocus", function () {
+      if (_this.firstFilterableRef.current) {
+        if (typeof _this.firstFilterableRef.current.focus === 'function') {
+          _this.firstFilterableRef.current.focus();
+        } else if (typeof _this.firstFilterableRef.current.textInput.current.focus === 'function') {
+          _this.firstFilterableRef.current.textInput.current.focus();
+        }
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "handleApplyFilter", function () {
       var onApplyFilter = _this.props.onApplyFilter;
       var filterValues = _this.state.filterValues;
@@ -127,6 +143,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
     });
 
     _this.rowRef = /*#__PURE__*/React__default.createRef();
+    _this.firstFilterableRef = /*#__PURE__*/React__default.createRef();
     return _this;
   }
 
@@ -134,6 +151,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.updateDropdownHeight();
+      this.updateFocus();
     }
   }, {
     key: "componentDidUpdate",
@@ -202,6 +220,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
         // if unspecified
 
         var headerContent = column.isFilterable !== undefined && !column.isFilterable ? /*#__PURE__*/React__default.createElement("div", null) : column.options ? column.isMultiselect ? /*#__PURE__*/React__default.createElement(MultiSelect.Filterable, {
+          ref: _this2.setFirstFilterableRef,
           key: columnStateValue,
           className: classnames("".concat(iotPrefix, "--filterheader-multiselect"), "".concat(iotPrefix, "--filterheader-multiselect__menu--fit-content"), _defineProperty({}, "".concat(iotPrefix, "--filterheader-multiselect__menu--flip-horizontal"), isLastColumn)),
           id: "column-".concat(i),
@@ -234,6 +253,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
           light: true,
           disabled: isDisabled
         }) : /*#__PURE__*/React__default.createElement(ComboBox, {
+          ref: _this2.setFirstFilterableRef,
           menuFitContent: true,
           horizontalDirection: isLastColumn ? 'start' : 'end',
           key: columnStateValue,
@@ -267,6 +287,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
         }) : /*#__PURE__*/React__default.createElement(FormItem, {
           className: "".concat(iotPrefix, "--filter-header-row--form-item")
         }, /*#__PURE__*/React__default.createElement(TextInput, {
+          ref: _this2.setFirstFilterableRef,
           id: column.id,
           labelText: column.id,
           hideLabel: true,
@@ -459,6 +480,21 @@ FilterHeaderRow.__docgenInfo = {
     "modifiers": [],
     "params": [],
     "returns": null
+  }, {
+    "name": "setFirstFilterableRef",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "node",
+      "type": null
+    }],
+    "returns": null
+  }, {
+    "name": "updateFocus",
+    "docblock": null,
+    "modifiers": [],
+    "params": [],
+    "returns": null
   }, {
     "name": "handleApplyFilter",
     "docblock": "take the state with the filter values and send to our listener",

package/es/index.js

@@ -1,6 +1,7 @@
 import withSize from 'react-sizeme';
 export { settings } from './constants/Settings.js';
 export { default as Button } from './components/Button/Button.js';
+export { default as CardCodeEditor } from './components/CardCodeEditor/CardCodeEditor.js';
 export { default as EmptyTable } from './components/Table/EmptyTable/EmptyTable.js';
 export { default as TableHead } from './components/Table/TableHead/TableHead.js';
 export { default as TableBody } from './components/Table/TableBody/TableBody.js';

package/lib/components/ComboBox/ComboBox.js

@@ -87,7 +87,7 @@ var defaultProps = _objectSpread(_objectSpread({}, carbonComponentsReact.ComboBo
   horizontalDirection: 'end'
 });
 
-var ComboBox = function ComboBox(_ref) {
+var ComboBox = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, ref) {
   var _classnames;
 
   var loading = _ref.loading,
@@ -113,7 +113,7 @@ var ComboBox = function ComboBox(_ref) {
       rest = _objectWithoutProperties__default['default'](_ref, ["loading", "wrapperClassName", "closeButtonText", "editOptionText", "hasMultiValue", "onChange", "items", "className", "disabled", "id", "itemToString", "size", "onInputChange", "addToList", "helperText", "shouldFilterItem", "onBlur", "testId", "menuFitContent", "horizontalDirection"]);
 
   // Ref for the combobox input
-  var comboRef = /*#__PURE__*/React__default['default'].createRef(); // Input value that is added to list
+  var comboRef = ref || /*#__PURE__*/React__default['default'].createRef(); // Input value that is added to list
 
   var _useState = React.useState(''),
       _useState2 = _slicedToArray__default['default'](_useState, 2),
@@ -303,14 +303,12 @@ var ComboBox = function ComboBox(_ref) {
       }, itemToString(item)));
     })) : null)
   );
-};
-
+});
 ComboBox.propTypes = propTypes;
 ComboBox.defaultProps = defaultProps;
 ComboBox.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "ComboBox",
   "props": {
     "loading": {
       "defaultValue": {

package/lib/components/List/HierarchyList/HierarchyList.js

@@ -347,6 +347,8 @@ var HierarchyList = function HierarchyList(_ref2) {
   React.useEffect(function () {
     if (!isEqual__default['default'](items, previousItems)) {
       setFilteredItems(items);
+      setSearchValue('');
+      setCurrentPageNumber(1);
     }
   }, [items, previousItems]);
   var selectedItemRef = React.useCallback(function (node) {

package/lib/components/Table/TableHead/FilterHeaderRow/FilterHeaderRow.js

@@ -108,6 +108,22 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
       }
     });
 
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "setFirstFilterableRef", function (node) {
+      if (!_this.firstFilterableRef.current && node) {
+        _this.firstFilterableRef.current = node;
+      }
+    });
+
+    _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "updateFocus", function () {
+      if (_this.firstFilterableRef.current) {
+        if (typeof _this.firstFilterableRef.current.focus === 'function') {
+          _this.firstFilterableRef.current.focus();
+        } else if (typeof _this.firstFilterableRef.current.textInput.current.focus === 'function') {
+          _this.firstFilterableRef.current.textInput.current.focus();
+        }
+      }
+    });
+
     _defineProperty__default['default'](_assertThisInitialized__default['default'](_this), "handleApplyFilter", function () {
       var onApplyFilter = _this.props.onApplyFilter;
       var filterValues = _this.state.filterValues;
@@ -147,6 +163,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
     });
 
     _this.rowRef = /*#__PURE__*/React__default['default'].createRef();
+    _this.firstFilterableRef = /*#__PURE__*/React__default['default'].createRef();
     return _this;
   }
 
@@ -154,6 +171,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this.updateDropdownHeight();
+      this.updateFocus();
     }
   }, {
     key: "componentDidUpdate",
@@ -222,6 +240,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
         // if unspecified
 
         var headerContent = column.isFilterable !== undefined && !column.isFilterable ? /*#__PURE__*/React__default['default'].createElement("div", null) : column.options ? column.isMultiselect ? /*#__PURE__*/React__default['default'].createElement(carbonComponentsReact.MultiSelect.Filterable, {
+          ref: _this2.setFirstFilterableRef,
           key: columnStateValue,
           className: classnames__default['default']("".concat(iotPrefix, "--filterheader-multiselect"), "".concat(iotPrefix, "--filterheader-multiselect__menu--fit-content"), _defineProperty__default['default']({}, "".concat(iotPrefix, "--filterheader-multiselect__menu--flip-horizontal"), isLastColumn)),
           id: "column-".concat(i),
@@ -254,6 +273,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
           light: true,
           disabled: isDisabled
         }) : /*#__PURE__*/React__default['default'].createElement(ComboBox, {
+          ref: _this2.setFirstFilterableRef,
           menuFitContent: true,
           horizontalDirection: isLastColumn ? 'start' : 'end',
           key: columnStateValue,
@@ -287,6 +307,7 @@ var FilterHeaderRow = /*#__PURE__*/function (_Component) {
         }) : /*#__PURE__*/React__default['default'].createElement(carbonComponentsReact.FormItem, {
           className: "".concat(iotPrefix, "--filter-header-row--form-item")
         }, /*#__PURE__*/React__default['default'].createElement(carbonComponentsReact.TextInput, {
+          ref: _this2.setFirstFilterableRef,
           id: column.id,
           labelText: column.id,
           hideLabel: true,
@@ -479,6 +500,21 @@ FilterHeaderRow.__docgenInfo = {
     "modifiers": [],
     "params": [],
     "returns": null
+  }, {
+    "name": "setFirstFilterableRef",
+    "docblock": null,
+    "modifiers": [],
+    "params": [{
+      "name": "node",
+      "type": null
+    }],
+    "returns": null
+  }, {
+    "name": "updateFocus",
+    "docblock": null,
+    "modifiers": [],
+    "params": [],
+    "returns": null
   }, {
     "name": "handleApplyFilter",
     "docblock": "take the state with the filter values and send to our listener",

package/lib/index.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var withSize = require('react-sizeme');
 var Settings = require('./constants/Settings.js');
 var Button = require('./components/Button/Button.js');
+var CardCodeEditor = require('./components/CardCodeEditor/CardCodeEditor.js');
 var EmptyTable = require('./components/Table/EmptyTable/EmptyTable.js');
 var TableHead = require('./components/Table/TableHead/TableHead.js');
 var TableBody = require('./components/Table/TableBody/TableBody.js');
@@ -146,6 +147,7 @@ withSize__default['default'].noPlaceholders = true; // Settings
 
 exports.settings = Settings.settings;
 exports.Button = Button;
+exports.CardCodeEditor = CardCodeEditor;
 exports.EmptyTable = EmptyTable;
 exports.TableHead = TableHead;
 exports.TableBody = TableBody;

package/lib/scss/components/Card/_card.scss

@@ -5,6 +5,7 @@
 @import './data-state-renderer';
 @import '../../globals/mixins';
 
+// delcare variables
 $iot-header-padding: $spacing-05;
 $tooltipSize: $spacing-07;
 $lineHeightSize: 1.375em;

package/package.json

@@ -343,10 +343,10 @@
     "whatwg-fetch": "^3.0.0"
   },
   "sideEffects": false,
-  "version": "2.147.0-next.49",
+  "version": "2.147.0-next.52",
   "resolutions": {
     "chokidar": "3.3.1",
     "react-grid-layout": "1.2.2"
   },
-  "gitHead": "12687093e99ca57b238deead7febca2a490f97af"
+  "gitHead": "224036cdd5a729d89ef97904a9e57fe66b5f3e1d"
 }

package/scss/components/Card/_card.scss

@@ -5,6 +5,7 @@
 @import './data-state-renderer';
 @import '../../globals/mixins';
 
+// delcare variables
 $iot-header-padding: $spacing-05;
 $tooltipSize: $spacing-07;
 $lineHeightSize: 1.375em;