@carbon/ibm-products 2.0.0-rc.8 → 2.0.0-rc.9

package/es/components/AddSelect/AddSelectBody.js

@@ -2,14 +2,19 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "filterByLabel", "globalFilterOpts", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "searchResultsLabel", "sortByLabel", "title", "useNormalizedItems"];
+var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "filterByLabel", "globalFilterOpts", "globalFiltersLabel", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "illustrationTheme", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "searchResultsTitle", "title", "useNormalizedItems"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
-import React, { useState } from 'react';
+import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Tag } from '@carbon/react';
@@ -28,7 +33,7 @@ import usePath from './hooks/usePath';
 import { pkg } from '../../settings';
 var blockClass = "".concat(pkg.prefix, "--add-select");
 var componentName = 'AddSelectBody';
-export var AddSelectBody = function AddSelectBody(_ref) {
+export var AddSelectBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _cx, _path$;
 
   var className = _ref.className,
@@ -39,6 +44,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
       description = _ref.description,
       filterByLabel = _ref.filterByLabel,
       globalFilterOpts = _ref.globalFilterOpts,
+      globalFiltersLabel = _ref.globalFiltersLabel,
       globalFiltersIconDescription = _ref.globalFiltersIconDescription,
       globalFiltersPlaceholderText = _ref.globalFiltersPlaceholderText,
       globalFiltersPrimaryButtonText = _ref.globalFiltersPrimaryButtonText,
@@ -46,6 +52,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
       globalSearchLabel = _ref.globalSearchLabel,
       globalSearchPlaceholder = _ref.globalSearchPlaceholder,
       globalSortBy = _ref.globalSortBy,
+      illustrationTheme = _ref.illustrationTheme,
       influencerTitle = _ref.influencerTitle,
       items = _ref.items,
       itemsLabel = _ref.itemsLabel,
@@ -64,8 +71,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
       onSubmitButtonText = _ref.onSubmitButtonText,
       open = _ref.open,
       portalTarget = _ref.portalTarget,
-      searchResultsLabel = _ref.searchResultsLabel,
-      sortByLabel = _ref.sortByLabel,
+      searchResultsTitle = _ref.searchResultsTitle,
       title = _ref.title,
       useNormalizedItems = _ref.useNormalizedItems,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -114,7 +120,8 @@ export var AddSelectBody = function AddSelectBody(_ref) {
   var _usePath = usePath(itemsLabel),
       path = _usePath.path,
       setPath = _usePath.setPath,
-      pathOnclick = _usePath.pathOnclick;
+      pathOnclick = _usePath.pathOnclick,
+      resetPath = _usePath.resetPath;
 
   var resetState = function resetState() {
     setSingleSelection('');
@@ -122,6 +129,11 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     setSearchTerm('');
     setAppliedGlobalFilters({});
     setDisplayMetaPanel({});
+    setAppliedModifiers(defaultModifiers);
+    setSortAttribute('');
+    setSortDirection('');
+    setParentSelected(null);
+    resetPath();
   };
 
   var onCloseHandler = function onCloseHandler() {
@@ -129,7 +141,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     onClose();
   };
 
-  var classNames = cx(className, blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__single"), !multi), _defineProperty(_cx, "".concat(blockClass, "__multi"), multi), _cx));
+  var tearsheetClassnames = cx(className, blockClass, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__single"), !multi), _defineProperty(_cx, "".concat(blockClass, "__multi"), multi), _cx));
   var globalFilterKeys = Object.keys(appliedGlobalFilters);
   var globalFiltersApplied = globalFilterKeys.length > 0; // handlers
 
@@ -203,12 +215,12 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     setDisplayMetaPanel: setDisplayMetaPanel,
     parentId: path[0].id
   };
-  var commonTearsheetProps = {
-    className: classNames,
+
+  var commonTearsheetProps = _objectSpread(_objectSpread({}, rest), {}, {
+    className: tearsheetClassnames,
     open: open,
     title: title,
     description: description,
-    closeIconDescription: 'temp description',
     actions: [{
       label: onCloseButtonText,
       kind: 'secondary',
@@ -219,12 +231,15 @@ export var AddSelectBody = function AddSelectBody(_ref) {
       onClick: submitHandler,
       disabled: multi ? multiSelection.length === 0 : !singleSelection
     }],
-    portalTarget: portalTarget
-  };
+    portalTarget: portalTarget,
+    ref: ref
+  });
+
   var sidebarProps = {
     appliedModifiers: appliedModifiers,
     closeIconDescription: closeIconDescription,
     displayMetalPanel: displayMetalPanel,
+    illustrationTheme: illustrationTheme,
     influencerTitle: influencerTitle,
     items: useNormalizedItems ? normalizedItems : items.entries,
     metaPanelTitle: metaPanelTitle,
@@ -245,6 +260,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     handleSearch: handleSearch,
     multi: multi,
     filterOpts: globalFilterOpts,
+    filtersLabel: globalFiltersLabel,
     handleFilter: handleFilter,
     primaryButtonText: globalFiltersPrimaryButtonText,
     secondaryButtonText: globalFiltersSecondaryButtonText,
@@ -256,14 +272,14 @@ export var AddSelectBody = function AddSelectBody(_ref) {
   }), /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__sub-header"), _defineProperty({}, "".concat(blockClass, "__sub-header-multi"), multi))
   }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__tag-container")
+    className: "".concat(blockClass, "__tags")
   }, showBreadsCrumbs ? /*#__PURE__*/React.createElement(AddSelectBreadcrumbs, {
     path: path,
     onClick: pathOnclick,
     multi: multi
   }) : /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__tag-container-label")
-  }, searchTerm ? searchResultsLabel : itemsLabel), showTags && /*#__PURE__*/React.createElement(Tag, {
+    className: "".concat(blockClass, "__tags-label")
+  }, searchTerm ? searchResultsTitle : itemsLabel), showTags && /*#__PURE__*/React.createElement(Tag, {
     type: "gray",
     size: "sm"
   }, itemsToDisplay.length)), showSort && /*#__PURE__*/React.createElement(AddSelectSort, {
@@ -272,8 +288,7 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     setSortDirection: setSortDirection,
     sortAttribute: sortAttribute,
     sortDirection: sortDirection,
-    sortBy: globalSortBy,
-    sortByLabel: sortByLabel
+    sortBy: globalSortBy
   }))), displayColumnView ? /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__columns")
   }, /*#__PURE__*/React.createElement(AddSelectColumn, _extends({}, commonListProps, {
@@ -293,13 +308,19 @@ export var AddSelectBody = function AddSelectBody(_ref) {
     className: "".concat(blockClass, "__body")
   }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
     subtitle: noResultsDescription,
-    title: noResultsTitle
+    title: noResultsTitle,
+    illustrationTheme: illustrationTheme
   }))));
-  return /*#__PURE__*/React.createElement("div", rest, multi ? /*#__PURE__*/React.createElement(Tearsheet, _extends({}, commonTearsheetProps, {
-    influencer: multi && /*#__PURE__*/React.createElement(AddSelectSidebar, sidebarProps),
-    influencerPosition: "right"
-  }), body) : /*#__PURE__*/React.createElement(TearsheetNarrow, commonTearsheetProps, body));
-};
+
+  if (multi) {
+    return /*#__PURE__*/React.createElement(Tearsheet, _extends({}, commonTearsheetProps, {
+      influencer: multi && /*#__PURE__*/React.createElement(AddSelectSidebar, sidebarProps),
+      influencerPosition: "right"
+    }), body);
+  }
+
+  return /*#__PURE__*/React.createElement(TearsheetNarrow, commonTearsheetProps, body);
+});
 AddSelectBody.propTypes = {
   className: PropTypes.string,
   clearFiltersText: PropTypes.string,
@@ -310,12 +331,14 @@ AddSelectBody.propTypes = {
   filterByLabel: PropTypes.string,
   globalFilterOpts: PropTypes.array,
   globalFiltersIconDescription: PropTypes.string,
+  globalFiltersLabel: PropTypes.string,
   globalFiltersPlaceholderText: PropTypes.string,
   globalFiltersPrimaryButtonText: PropTypes.string,
   globalFiltersSecondaryButtonText: PropTypes.string,
   globalSearchLabel: PropTypes.string.isRequired,
   globalSearchPlaceholder: PropTypes.string,
   globalSortBy: PropTypes.array,
+  illustrationTheme: PropTypes.oneOf(['light', 'dark']),
   influencerTitle: PropTypes.string,
   items: PropTypes.shape({
     modifiers: PropTypes.shape({
@@ -329,7 +352,8 @@ AddSelectBody.propTypes = {
       avatar: PropTypes.shape({
         alt: PropTypes.string,
         icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-        src: PropTypes.string
+        src: PropTypes.string,
+        theme: PropTypes.oneOf(['light', 'dark'])
       }),
       children: PropTypes.object,
       icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
@@ -360,7 +384,7 @@ AddSelectBody.propTypes = {
   onSubmitButtonText: PropTypes.string,
   open: PropTypes.bool,
   portalTarget: PropTypes.node,
-  searchResultsLabel: PropTypes.string,
+  searchResultsTitle: PropTypes.string,
   sortByLabel: PropTypes.string,
   title: PropTypes.string,
   useNormalizedItems: PropTypes.bool

package/es/components/AddSelect/AddSelectBreadcrumbs.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/es/components/AddSelect/AddSelectColumn.js

@@ -4,7 +4,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["columnInputPlaceholder", "filterByLabel", "header", "items", "multiSelection", "parentId", "path", "setMultiSelection", "setPath"];
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -211,14 +211,14 @@ export var AddSelectColumn = function AddSelectColumn(_ref) {
       }) ? true : false
     })));
   })))), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__tag-container")
+    className: "".concat(blockClass, "__tags")
   }, /*#__PURE__*/React.createElement(Checkbox, {
     id: "".concat(uuidv4(), "-select-all"),
     className: "".concat(colClass, "__select-all"),
     checked: allSelected,
     onChange: selectAllHandler,
     labelText: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-      className: "".concat(blockClass, "__tag-container-label")
+      className: "".concat(blockClass, "__tag-label")
     }, header), /*#__PURE__*/React.createElement(Tag, {
       type: "gray",
       size: "sm"

package/es/components/AddSelect/AddSelectFilter.js

@@ -7,7 +7,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -24,6 +24,7 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
   var appliedFilters = _ref.appliedFilters,
       clearFiltersText = _ref.clearFiltersText,
       filterOpts = _ref.filterOpts,
+      filtersLabel = _ref.filtersLabel,
       handleFilter = _ref.handleFilter,
       handleSearch = _ref.handleSearch,
       hasFiltersApplied = _ref.hasFiltersApplied,
@@ -95,7 +96,7 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-search")
   }, /*#__PURE__*/React.createElement(Search, {
-    id: "temp-id",
+    id: "add-select-global-search-filter",
     labelText: inputLabel,
     placeholder: inputPlaceholder,
     value: searchTerm,
@@ -119,7 +120,7 @@ export var AddSelectFilter = function AddSelectFilter(_ref) {
     className: blockClass
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-content")
-  }, /*#__PURE__*/React.createElement("p", null, "Filters"), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("p", null, filtersLabel), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "-opts")
   }, filterOpts.map(function (filterOpts) {
     return /*#__PURE__*/React.createElement(Dropdown, {
@@ -168,6 +169,7 @@ AddSelectFilter.propTypes = {
   appliedFilters: PropTypes.object,
   clearFiltersText: PropTypes.string,
   filterOpts: PropTypes.array,
+  filtersLabel: PropTypes.string,
   handleFilter: PropTypes.func,
   handleSearch: PropTypes.func,
   hasFiltersApplied: PropTypes.bool,

package/es/components/AddSelect/AddSelectList.js

@@ -2,13 +2,13 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 import React from 'react';
-import { Button, Checkbox, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody, Dropdown } from '@carbon/react';
+import { Button, Checkbox, Dropdown, RadioButton, StructuredListRow, StructuredListWrapper, StructuredListBody } from '@carbon/react';
 import { ChevronRight, View } from '@carbon/react/icons';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
@@ -74,11 +74,12 @@ export var AddSelectList = function AddSelectList(_ref) {
     var src = _ref4.src,
         alt = _ref4.alt,
         icon = _ref4.icon,
-        backgroundColor = _ref4.backgroundColor;
+        backgroundColor = _ref4.backgroundColor,
+        theme = _ref4.theme;
     return {
       className: "".concat(blockClass, "-cell-avatar"),
       size: 'lg',
-      theme: 'light',
+      theme: theme,
       image: src,
       imageDescription: alt,
       icon: icon,
@@ -123,7 +124,7 @@ export var AddSelectList = function AddSelectList(_ref) {
 
     return /*#__PURE__*/React.createElement(StructuredListRow, {
       key: item.id,
-      className: cx("".concat(blockClass, "-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "-row-selected"), isSelected(item.id)), _defineProperty(_cx2, "".concat(blockClass, "-row-meta-selected"), isInMetaPanel(item.id)), _cx2)),
+      className: cx("".concat(blockClass, "-row"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "-row--selected"), isSelected(item.id)), _defineProperty(_cx2, "".concat(blockClass, "-row-meta--selected"), isInMetaPanel(item.id)), _cx2)),
       onClick: function onClick(evt) {
         return metaPanelHandler(item, evt);
       }

package/es/components/AddSelect/AddSelectMetaPanel.js

@@ -1,4 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 import React, { isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { Close } from '@carbon/react/icons';

package/es/components/AddSelect/AddSelectSidebar.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["meta", "icon", "avatar"];
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -20,6 +20,7 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
   var appliedModifiers = _ref.appliedModifiers,
       closeIconDescription = _ref.closeIconDescription,
       displayMetalPanel = _ref.displayMetalPanel,
+      illustrationTheme = _ref.illustrationTheme,
       influencerTitle = _ref.influencerTitle,
       items = _ref.items,
       metaPanelTitle = _ref.metaPanelTitle,
@@ -106,13 +107,15 @@ export var AddSelectSidebar = function AddSelectSidebar(_ref) {
   }, /*#__PURE__*/React.createElement(NoDataEmptyState, {
     subtitle: noSelectionDescription,
     title: noSelectionTitle,
-    size: "sm"
+    size: "sm",
+    illustrationTheme: illustrationTheme
   })));
 };
 AddSelectSidebar.propTypes = {
   appliedModifiers: PropTypes.array,
   closeIconDescription: PropTypes.string,
   displayMetalPanel: PropTypes.object,
+  illustrationTheme: PropTypes.oneOf(['light', 'dark']),
   influencerTitle: PropTypes.string,
   items: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   metaPanelTitle: PropTypes.string,

package/es/components/AddSelect/AddSelectSort.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 //
-// Copyright IBM Corp. 2022
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/es/components/AddSelect/add-select-utils.js

@@ -6,6 +6,13 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
 /**
  * to be able to more easily and efficiently the child entries the data needs to be
  * normalized. this function recursively goes through the data array to build a single

package/es/components/AddSelect/hooks/useItemSort.js

@@ -1,4 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 import { useState } from 'react';
 export var useItemSort = function useItemSort() {
   var _useState = useState(''),

package/es/components/AddSelect/hooks/useParentSelect.js

@@ -1,4 +1,10 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 import { useState } from 'react';
 
 var useParentSelect = function useParentSelect() {

package/es/components/AddSelect/hooks/usePath.js

@@ -6,6 +6,12 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
+//
+// Copyright IBM Corp. 2022, 2022
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
 import { useState } from 'react';
 
 var usePath = function usePath() {
@@ -56,10 +62,18 @@ var usePath = function usePath() {
     setPath(_toConsumableArray(pathCopy));
   };
 
+  var resetPath = function resetPath() {
+    setPath([{
+      id: 'base_of_path',
+      title: itemsLabel
+    }]);
+  };
+
   return {
     path: path,
     setPath: handler,
-    pathOnclick: pathClickHandler
+    pathOnclick: pathClickHandler,
+    resetPath: resetPath
   };
 };
 

package/es/components/AddSelect/index.js

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2021
+// Copyright IBM Corp. 2022, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.

package/es/components/CreateFullPage/CreateFullPage.js

@@ -198,7 +198,10 @@ export var CreateFullPage = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__modal"),
     size: "sm",
     open: modalIsOpen,
-    "aria-label": modalTitle
+    "aria-label": modalTitle,
+    onClose: function onClose() {
+      setModalIsOpen(false);
+    }
   }, /*#__PURE__*/React.createElement(ModalHeader, {
     title: modalTitle
   }), /*#__PURE__*/React.createElement(ModalBody, null, /*#__PURE__*/React.createElement("p", null, modalDescription)), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {

package/es/components/Datagrid/Datagrid/DatagridRow.js

@@ -13,6 +13,7 @@ var _excluded = ["children"];
 // @flow
 import React, { useContext } from 'react';
 import { DataTable, SkeletonText } from '@carbon/react';
+import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import cx from 'classnames';
 import { pkg, carbon } from '../../../settings';
@@ -20,25 +21,63 @@ import { InlineEditContext } from './addons/InlineEdit/InlineEditContext/InlineE
 import { getCellIdAsObject } from './addons/InlineEdit/InlineEditContext/getCellIdAsObject';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var TableRow = DataTable.TableRow,
-    TableCell = DataTable.TableCell; // eslint-disable-next-line react/prop-types
+    TableCell = DataTable.TableCell;
+var rowHeights = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 48,
+  xl: 64
+}; // eslint-disable-next-line react/prop-types
 
 var DatagridRow = function DatagridRow(datagridState) {
   var _cx;
 
-  var row = datagridState.row;
+  var row = datagridState.row,
+      rowSize = datagridState.rowSize,
+      withNestedRows = datagridState.withNestedRows;
 
   var _useContext = useContext(InlineEditContext),
       state = _useContext.state;
 
   var activeCellId = state.activeCellId;
   var activeCellObject = activeCellId && getCellIdAsObject(activeCellId);
+
+  var getVisibleNestedRowCount = function getVisibleNestedRowCount(_ref) {
+    var isExpanded = _ref.isExpanded,
+        subRows = _ref.subRows;
+    var size = 0;
+
+    if (isExpanded && subRows) {
+      size += subRows.length;
+      subRows.forEach(function (child) {
+        size += getVisibleNestedRowCount(child);
+      });
+    }
+
+    return size;
+  };
+
   return /*#__PURE__*/React.createElement(TableRow, _extends({
     className: cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-hover-active"), activeCellObject && row.index === activeCellObject.row), _cx))
   }, row.getRowProps(), {
     key: row.id,
     onMouseEnter: function onMouseEnter(event) {
+      var _hoverRow$style, _hoverRow$style2, _hoverRow$style3;
+
+      if (!withNestedRows) {
+        return;
+      }
+
+      var subRowCount = getVisibleNestedRowCount(row);
+      var totalNestedRowIndicatorHeight = px(subRowCount * rowHeights[rowSize]);
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));
       hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.classList.add("".concat(blockClass, "__carbon-row-expanded-hover-active"));
+      var rowExpanderButton = hoverRow === null || hoverRow === void 0 ? void 0 : hoverRow.querySelector(".".concat(blockClass, "__row-expander"));
+      var rowSizeValue = rowSize || 'lg';
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style = hoverRow.style) === null || _hoverRow$style === void 0 ? void 0 : _hoverRow$style.setProperty("--".concat(blockClass, "--indicator-height"), totalNestedRowIndicatorHeight);
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style2 = hoverRow.style) === null || _hoverRow$style2 === void 0 ? void 0 : _hoverRow$style2.setProperty("--".concat(blockClass, "--row-height"), px(rowHeights[rowSizeValue]));
+      hoverRow === null || hoverRow === void 0 ? void 0 : (_hoverRow$style3 = hoverRow.style) === null || _hoverRow$style3 === void 0 ? void 0 : _hoverRow$style3.setProperty("--".concat(blockClass, "--indicator-offset-amount"), px((rowExpanderButton === null || rowExpanderButton === void 0 ? void 0 : rowExpanderButton.offsetLeft) || 0));
     },
     onMouseLeave: function onMouseLeave(event) {
       var hoverRow = event.target.closest(".".concat(blockClass, "__carbon-row-expanded"));

package/es/components/Datagrid/useNestedRows.js

@@ -1,3 +1,5 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
 /*
  * Licensed Materials - Property of IBM
  * 5724-Q36
@@ -6,6 +8,7 @@
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import { pkg } from '../../settings';
+import cx from 'classnames';
 import useNestedRowExpander from './useNestedRowExpander';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
@@ -14,9 +17,11 @@ var useNestedRows = function useNestedRows(hooks) {
   var marginLeft = 24;
 
   var getRowProps = function getRowProps(props, _ref) {
+    var _cx;
+
     var row = _ref.row;
     return [props, {
-      className: row.depth > 0 ? "".concat(blockClass, "__carbon-nested-row") : ''
+      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
     }];
   };
 
@@ -25,7 +30,7 @@ var useNestedRows = function useNestedRows(hooks) {
     return [props, {
       style: {
         marginLeft: "".concat(row.depth > 0 ? marginLeft : 0, "px"),
-        paddingLeft: "".concat(row.depth > 1 ? marginLeft * (row.depth - 1) + marginLeft : row.depth === 1 ? marginLeft : 0, "px"),
+        paddingLeft: "".concat(row.depth === 2 ? marginLeft * (row.depth - 1) + marginLeft - 8 : row.depth > 2 ? marginLeft * (row.depth - 1) + marginLeft : row.depth === 1 ? marginLeft - 16 : 0, "px"),
         maxWidth: "calc(100% - ".concat(marginLeft * row.depth, "px)")
       }
     }];
@@ -45,9 +50,16 @@ var useNestedRows = function useNestedRows(hooks) {
     }];
   };
 
+  var useInstance = function useInstance(instance) {
+    Object.assign(instance, {
+      withNestedRows: true
+    });
+  };
+
   hooks.getRowProps.push(getRowProps);
   hooks.getRowProps.push(getRowStyles);
   hooks.getCellProps.push(getCellProps);
+  hooks.useInstance.push(useInstance);
 };
 
 export default useNestedRows;