@carbon/ibm-products 2.0.0-rc.11 → 2.0.0-rc.13

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js

@@ -1,14 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["onClick", "setIsModalOpen", "isModalOpen", "iconTooltipLabel"];
-// @flow
+var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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 * as React from 'react';
 import PropTypes from 'prop-types';
@@ -19,8 +17,8 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
 
 var ButtonWrapper = function ButtonWrapper(_ref) {
   var _onClick = _ref.onClick,
-      setIsModalOpen = _ref.setIsModalOpen,
-      isModalOpen = _ref.isModalOpen,
+      setIsTearsheetOpen = _ref.setIsTearsheetOpen,
+      isTearsheetOpen = _ref.isTearsheetOpen,
       _ref$iconTooltipLabel = _ref.iconTooltipLabel,
       iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
       rest = _objectWithoutProperties(_ref, _excluded);
@@ -37,7 +35,7 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
     hasIconOnly: true,
     "test-id": "".concat(blockClass, "__customize-columns-trigger"),
     onClick: function onClick() {
-      setIsModalOpen(!isModalOpen);
+      setIsTearsheetOpen(!isTearsheetOpen);
 
       if (typeof _onClick === 'function') {
         _onClick();
@@ -51,8 +49,8 @@ ButtonWrapper.defaultProps = {
 };
 ButtonWrapper.propTypes = {
   iconTooltipLabel: PropTypes.string,
-  isModalOpen: PropTypes.bool.isRequired,
+  isTearsheetOpen: PropTypes.bool.isRequired,
   onClick: PropTypes.func.isRequired,
-  setIsModalOpen: PropTypes.func.isRequired
+  setIsTearsheetOpen: PropTypes.func.isRequired
 };
 export default ButtonWrapper;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -1,13 +1,11 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-// @flow
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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 PropTypes from 'prop-types';
@@ -36,8 +34,6 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
 };
 
 var Columns = function Columns(_ref) {
-  var _cx;
-
   var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
       filterString = _ref.filterString,
       columns = _ref.columns,
@@ -80,12 +76,7 @@ var Columns = function Columns(_ref) {
         e.stopPropagation();
       }
     },
-    tabIndex: 0,
-    onFocus: function onFocus(e) {
-      if (e.target === e.currentTarget) {
-        setFocusIndex(0);
-      }
-    }
+    tabIndex: 0
   }, /*#__PURE__*/React.createElement("span", {
     "aria-live": "assertive",
     className: "".concat(blockClass, "__shared-ui--assistive-text")
@@ -94,7 +85,7 @@ var Columns = function Columns(_ref) {
     className: "".concat(blockClass, "__shared-ui--assistive-text")
   }, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/React.createElement("div", {
     id: "".concat(blockClass, "__customize-columns-select-all"),
-    className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__customize-columns-select-all"), getVisibleColumnsCount() === 0), _defineProperty(_cx, "".concat(blockClass, "__customize-columns-select-all-selected"), getVisibleColumnsCount() > 0), _cx)),
+    className: cx("".concat(blockClass, "__customize-columns-select-all"), _defineProperty({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
     selected: getVisibleColumnsCount() > 0
   }, /*#__PURE__*/React.createElement(Checkbox, {
     className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
@@ -108,6 +99,26 @@ var Columns = function Columns(_ref) {
   })), columns.filter(function (colDef) {
     return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
   }).map(function (colDef, i) {
+    var searchString = new RegExp('(' + filterString + ')');
+    var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
+    var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
+    var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
+    var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
+      className: cx("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
+      checked: isColumnVisible(colDef),
+      onChange: function onChange(_, _ref2) {
+        var checked = _ref2.checked;
+        return onSelectColumn(colDef, checked);
+      },
+      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
+      labelText: colDef.Header.props.title,
+      title: colDef.Header.props.title,
+      hideLabel: true
+    }), /*#__PURE__*/React.createElement("div", {
+      dangerouslySetInnerHTML: {
+        __html: highlightedText
+      }
+    }));
     return /*#__PURE__*/React.createElement(DraggableElement, {
       key: colDef.id,
       index: i,
@@ -136,17 +147,7 @@ var Columns = function Columns(_ref) {
         }
       },
       selected: isColumnVisible(colDef)
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      className: cx("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
-      checked: isColumnVisible(colDef),
-      onChange: function onChange(_, _ref2) {
-        var checked = _ref2.checked;
-        return onSelectColumn(colDef, checked);
-      },
-      id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
-      labelText: colDef.Header.props.title,
-      title: colDef.Header.props.title
-    }));
+    }, listContents);
   }))));
 };
 

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js}

@@ -5,32 +5,30 @@ 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; }
 
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2021
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * 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.
  */
-// @flow
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from '@carbon/react';
 import { isColumnVisible } from './common';
+import { TearsheetNarrow } from '../../../../Tearsheet';
 import Columns from './Columns';
 import Actions from './Actions';
 import { pkg } from '../../../../../settings';
 import { useCallback } from 'react';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 
-var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
+var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
   var isOpen = _ref.isOpen,
-      setIsModalOpen = _ref.setIsModalOpen,
+      setIsTearsheetOpen = _ref.setIsTearsheetOpen,
       onSaveColumnPrefs = _ref.onSaveColumnPrefs,
       columnDefinitions = _ref.columnDefinitions,
       originalColumnDefinitions = _ref.originalColumnDefinitions,
-      _ref$customizeModalHe = _ref.customizeModalHeadingLabel,
-      customizeModalHeadingLabel = _ref$customizeModalHe === void 0 ? 'Customize Columns' : _ref$customizeModalHe,
+      _ref$customizeTearshe = _ref.customizeTearsheetHeadingLabel,
+      customizeTearsheetHeadingLabel = _ref$customizeTearshe === void 0 ? 'Customize columns' : _ref$customizeTearshe,
       _ref$primaryButtonTex = _ref.primaryButtonTextLabel,
       primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
       _ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
@@ -91,11 +89,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
       setIsDirty = _useState10[1];
 
   var onRequestClose = function onRequestClose() {
-    setIsModalOpen(false);
+    setIsTearsheetOpen(false);
   };
 
   var onRequestSubmit = function onRequestSubmit() {
-    setIsModalOpen(false);
+    setIsTearsheetOpen(false);
     var updatedColumns = columnObjects.map(function (colDef) {
       return {
         id: colDef.id,
@@ -135,20 +133,22 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
     setVisibleColumnsCount(getVisibleColumnsCount());
     setTotalColumns(columnObjects.length);
   }, [getVisibleColumnsCount, columnObjects.length]);
-  return /*#__PURE__*/React.createElement(Modal, {
-    className: "".concat(blockClass, "__customize-columns-modal"),
+  return /*#__PURE__*/React.createElement(TearsheetNarrow, {
+    className: "".concat(blockClass, "__customize-columns-tearsheet"),
     open: isOpen,
-    modalHeading: "".concat(customizeModalHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
-    primaryButtonText: primaryButtonTextLabel,
-    secondaryButtonText: secondaryButtonTextLabel,
-    selectorPrimaryFocus: ".".concat(blockClass, "__customize-columns-column-list--focus"),
-    primaryButtonDisabled: !isDirty,
-    onRequestClose: onRequestClose,
-    onRequestSubmit: onRequestSubmit,
-    size: "sm"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__customize-columns-instructions")
-  }, instructionsLabel), /*#__PURE__*/React.createElement(Actions, {
+    title: "".concat(customizeTearsheetHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
+    description: instructionsLabel,
+    actions: [{
+      kind: 'secondary',
+      label: secondaryButtonTextLabel,
+      onClick: onRequestClose
+    }, {
+      kind: 'primary',
+      label: primaryButtonTextLabel,
+      onClick: onRequestSubmit,
+      disabled: !isDirty
+    }]
+  }, /*#__PURE__*/React.createElement(Actions, {
     columns: columnObjects,
     originalColumnDefinitions: originalColumnDefinitions,
     searchText: searchText,
@@ -174,11 +174,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
   }));
 };
 
-CustomizeColumnsModal.propTypes = {
+CustomizeColumnsTearsheet.propTypes = {
   assistiveTextDisabledInstructionsLabel: PropTypes.string,
   assistiveTextInstructionsLabel: PropTypes.string,
   columnDefinitions: PropTypes.array.isRequired,
-  customizeModalHeadingLabel: PropTypes.string,
+  customizeTearsheetHeadingLabel: PropTypes.string,
   findColumnPlaceholderLabel: PropTypes.string,
   instructionsLabel: PropTypes.string,
   isOpen: PropTypes.bool.isRequired,
@@ -188,6 +188,6 @@ CustomizeColumnsModal.propTypes = {
   resetToDefaultLabel: PropTypes.string,
   secondaryButtonTextLabel: PropTypes.string,
   selectAllLabel: PropTypes.string,
-  setIsModalOpen: PropTypes.func.isRequired
+  setIsTearsheetOpen: PropTypes.func.isRequired
 };
-export default CustomizeColumnsModal;
+export default CustomizeColumnsTearsheet;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js

@@ -0,0 +1,56 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["onSaveColumnPrefs", "isTearsheetOpen", "setIsTearsheetOpen", "labels"];
+
+/* 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 * as React from 'react';
+import PropTypes from 'prop-types';
+import CustomizeColumnsTearsheet from './CustomizeColumnsTearsheet';
+
+var TearsheetWrapper = function TearsheetWrapper(_ref) {
+  var instance = _ref.instance;
+
+  var _instance$customizeCo = instance.customizeColumnsProps,
+      _onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
+      isTearsheetOpen = _instance$customizeCo.isTearsheetOpen,
+      setIsTearsheetOpen = _instance$customizeCo.setIsTearsheetOpen,
+      labels = _instance$customizeCo.labels,
+      rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
+
+  return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
+    isOpen: isTearsheetOpen,
+    setIsTearsheetOpen: setIsTearsheetOpen,
+    columnDefinitions: instance.allColumns,
+    originalColumnDefinitions: instance.columns,
+    onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
+      var hiddenIds = updatedColDefs.filter(function (colDef) {
+        return !colDef.isVisible;
+      }).map(function (colDef) {
+        return colDef.id;
+      });
+      instance.setHiddenColumns(hiddenIds);
+
+      if (typeof instance.setColumnOrder === 'function') {
+        instance.setColumnOrder(updatedColDefs.map(function (colDef) {
+          return colDef.id;
+        }));
+      } else {
+        // eslint-disable-next-line no-console
+        console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
+      }
+
+      if (typeof _onSaveColumnPrefs === 'function') {
+        _onSaveColumnPrefs(updatedColDefs);
+      }
+    }
+  }));
+};
+
+TearsheetWrapper.propTypes = {
+  instance: PropTypes.object.isRequired
+};
+export default TearsheetWrapper;

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js

@@ -5,5 +5,5 @@
  * US Government Users Restricted Rights - Use, duplication or disclosure
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
-export { default as CustomizeColumnsModalWrapper } from './ModalWrapper';
+export { default as CustomizeColumnsTearsheetWrapper } from './TearsheetWrapper';
 export { default as ToggleButtonWrapper } from './ButtonWrapper';

package/es/components/Datagrid/Datagrid/addons/InlineEdit/InlineEditCell/InlineEditCell.js

@@ -421,20 +421,24 @@ export var InlineEditCell = function InlineEditCell(_ref) {
   };
 
   var buildDate = function buildDate(value) {
+    var _config$inputProps2;
+
+    var dateFormat = config === null || config === void 0 ? void 0 : (_config$inputProps2 = config.inputProps) === null || _config$inputProps2 === void 0 ? void 0 : _config$inputProps2.dateFormat;
+
     if (value instanceof Date) {
-      var _config$dateFormat = config.dateFormat,
-          dateFormat = _config$dateFormat === void 0 ? 'm/d/Y' : _config$dateFormat;
       var maskedFullYear = value.getFullYear();
       var maskedMonth = padTo2Digits(value.getMonth() + 1);
       var maskedDay = padTo2Digits(value.getDate());
 
-      if (dateFormat === 'm/d/Y' || dateFormat === 'm/d/y') {
+      if (dateFormat === 'm/d/Y' || value === 'm/d/y') {
         return [maskedMonth, maskedDay, maskedFullYear].join('/');
       }
 
-      if (dateFormat === 'd/m/Y' || dateFormat === 'd/m/y') {
+      if (dateFormat === 'd/m/Y' || dateFormat === 'd/m/y' || dateFormat === undefined) {
         return [maskedDay, maskedMonth, maskedFullYear].join('/');
       }
+    } else {
+      return value;
     }
 
     return null;

package/es/components/Datagrid/useCustomizeColumns.js

@@ -16,13 +16,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * restricted by GSA ADP Schedule Contract with IBM Corp.
  */
 import * as React from 'react';
-import { CustomizeColumnsModalWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
+import { CustomizeColumnsTearsheetWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
 
 var useCustomizeColumns = function useCustomizeColumns(hooks) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
-      isModalOpen = _React$useState2[0],
-      setIsModalOpen = _React$useState2[1];
+      isTearsheetOpen = _React$useState2[0],
+      setIsTearsheetOpen = _React$useState2[1];
 
   hooks.useInstance.push(function (instance) {
     var customizeColumnsProps = instance.customizeColumnsProps;
@@ -32,17 +32,17 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
 
     Object.assign(instance, {
       customizeColumnsProps: _objectSpread(_objectSpread({}, customizeColumnsProps), {}, {
-        isModalOpen: isModalOpen,
-        setIsModalOpen: setIsModalOpen
+        isTearsheetOpen: isTearsheetOpen,
+        setIsTearsheetOpen: setIsTearsheetOpen
       }),
       CustomizeColumnsButton: function CustomizeColumnsButton(props) {
         return /*#__PURE__*/React.createElement(ToggleButtonWrapper, _extends({
           iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
-          isModalOpen: isModalOpen,
-          setIsModalOpen: setIsModalOpen
+          isTearsheetOpen: isTearsheetOpen,
+          setIsTearsheetOpen: setIsTearsheetOpen
         }, props));
       },
-      CustomizeColumnsModal: CustomizeColumnsModalWrapper
+      CustomizeColumnsTearsheet: CustomizeColumnsTearsheetWrapper
     });
   });
 };

package/es/components/Datagrid/utils/getInlineEditColumns.js

@@ -108,6 +108,7 @@ export var getInlineEditColumns = function getInlineEditColumns() {
         onChange: function onChange(newDateObj, cell) {
           console.log(newDateObj, cell);
         },
+        dateFormat: 'd/m/Y',
         // optionally pass props here to be passed through to Carbon's DatePickerInput component
         datePickerInputProps: {
           labelText: 'Change active since date'

package/es/components/Datagrid/utils/makeData.js

@@ -179,7 +179,7 @@ var newPerson = function newPerson() {
       numbers: 0
     }),
     chartType: initialChartTypeIndex === 0 ? inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? inlineEditSelectItems[1] : inlineEditSelectItems[2],
-    activeSince: activeChance > 0.66 ? activeSinceDate : activeChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
+    activeSince: activeChance > 0.66 ? activeSinceDate : activeChance > 0.33 ? yesterdayDate : '23/05/2020',
     bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
     passwordStrength: getPasswordStrength(),
     doc_link: renderDocLink()

package/es/components/index.js

@@ -37,7 +37,7 @@ export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { InlineEdit } from './InlineEdit';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering } from './Datagrid';
 export { EditTearsheet } from './EditTearsheet';
 export { EditTearsheetNarrow } from './EditTearsheetNarrow';
 export { EditFullPage } from './EditFullPage';

package/es/global/js/hooks/useCreateComponentFocus.js

@@ -1,3 +1,6 @@
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+
 /**
  * Copyright IBM Corp. 2021, 2021
  *
@@ -5,29 +8,54 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { useEffect } from 'react';
-import { getFocusableElements } from '../utils/getFocusableElements'; // Focus the first focusable element and call the onMount prop for the current step if one is provided
+import wait from '../utils/wait'; // Focus the first focusable element and call the onMount prop for the current step if one is provided
 
 export var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
   var previousState = _ref.previousState,
       currentStep = _ref.currentStep,
       blockClass = _ref.blockClass,
-      onMount = _ref.onMount;
+      onMount = _ref.onMount,
+      firstFocusElement = _ref.firstFocusElement;
   useEffect(function () {
     if (typeof onMount === 'function') {
       onMount();
     }
   }, [onMount]);
   useEffect(function () {
+    // because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
+    var awaitFocus = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(elm) {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return wait(10);
+
+              case 2:
+                elm.focus();
+
+              case 3:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      return function awaitFocus(_x) {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
-      var visibleStepInnerContent = document.querySelector(".".concat(blockClass, "__step.").concat(blockClass, "__step__step--visible-step"));
-      var focusableStepElements = visibleStepInnerContent ? getFocusableElements(visibleStepInnerContent) : [];
+      if (firstFocusElement) {
+        var elm = document.querySelector(firstFocusElement);
 
-      if (focusableStepElements && focusableStepElements.length) {
-        focusableStepElements[0].focus();
-      } else {
-        var nextButton = document.querySelector(".".concat(blockClass, "__create-button"));
-        nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
+        if (elm) {
+          awaitFocus(elm);
+        }
       }
     }
-  }, [currentStep, previousState, blockClass, onMount]);
+  }, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
 };

package/lib/components/AddSelect/AddSelectBody.js

@@ -201,7 +201,7 @@ var AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   };
 
   var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
-    if (searchTerm || globalFiltersApplied || !path || path.length === 0) {
+    if (useNormalizedItems === false || searchTerm || globalFiltersApplied) {
       return false;
     }
 

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

@@ -30,6 +30,13 @@ var usePath = function usePath() {
       path = _useState2[0],
       setPath = _useState2[1];
 
+  (0, _react.useEffect)(function () {
+    setPath([{
+      id: 'base_of_path',
+      title: itemsLabel
+    }]);
+  }, [itemsLabel]);
+
   var handler = function handler(id, title, parentId) {
     if (path.find(function (entry) {
       return entry.id === id;

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -35,7 +35,7 @@ var _hooks = require("../../global/js/hooks");
 
 var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
 
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "submitButtonText"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -65,6 +65,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
       nextButtonText = _ref.nextButtonText,
       onClose = _ref.onClose,
       onRequestSubmit = _ref.onRequestSubmit,
+      firstFocusElement = _ref.firstFocusElement,
       submitButtonText = _ref.submitButtonText,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
@@ -146,7 +147,8 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     previousState: previousState,
     currentStep: currentStep,
     blockClass: blockClass,
-    onMount: onMount
+    onMount: onMount,
+    firstFocusElement: firstFocusElement
   });
   (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
   (0, _hooks.useCreateComponentStepChange)({
@@ -269,6 +271,11 @@ CreateFullPage.propTypes = {
    */
   className: _propTypes.default.string,
 
+  /**
+   * Specifies elements to focus on first on render.
+   */
+  firstFocusElement: _propTypes.default.string,
+
   /**
    * The primary 'danger' button text in the modal
    */

package/lib/components/CreateTearsheet/CreateTearsheet.js

@@ -39,7 +39,7 @@ var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
 
 var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
 
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "submitButtonText", "title", "verticalPosition"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -75,6 +75,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onClose = _ref.onClose,
       onRequestSubmit = _ref.onRequestSubmit,
       open = _ref.open,
+      firstFocusElement = _ref.firstFocusElement,
       submitButtonText = _ref.submitButtonText,
       title = _ref.title,
       _ref$verticalPosition = _ref.verticalPosition,
@@ -159,7 +160,8 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     previousState: previousState,
     currentStep: currentStep,
     blockClass: blockClass,
-    onMount: onMount
+    onMount: onMount,
+    firstFocusElement: firstFocusElement
   });
   (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
   (0, _hooks.useResetCreateComponent)({
@@ -290,6 +292,11 @@ CreateTearsheet.propTypes = {
    */
   description: _propTypes.default.node,
 
+  /**
+   * Specifies elements to focus on first on render.
+   */
+  firstFocusElement: _propTypes.default.string,
+
   /**
    * Used to set the size of the influencer
    */

package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -64,6 +64,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
       cancelButtonText = _ref2.cancelButtonText,
       className = _ref2.className,
       description = _ref2.description,
+      firstFocusElement = _ref2.firstFocusElement,
       influencerWidth = _ref2.influencerWidth,
       label = _ref2.label,
       nextButtonText = _ref2.nextButtonText,
@@ -165,7 +166,8 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
           resolve();
         }, simulatedDelay);
       });
-    }
+    },
+    firstFocusElement: firstFocusElement
   }, /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {