@carbon/ibm-products 2.0.0-rc.10 → 2.0.0-rc.12

package/es/components/Datagrid/useFiltering.js

@@ -0,0 +1,90 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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; }
+
+/*
+ * Licensed Materials - Property of IBM
+ * 5724-Q36
+ * (c) Copyright IBM Corp. 2022
+ * US Government Users Restricted Rights - Use, duplication or disclosure
+ * restricted by GSA ADP Schedule Contract with IBM Corp.
+ */
+import { useMemo } from 'react';
+
+var useFiltering = function useFiltering(hooks) {
+  var filterTypes = useMemo(function () {
+    return {
+      date: function date(rows, id, _ref) {
+        var _ref2 = _slicedToArray(_ref, 2),
+            startDate = _ref2[0],
+            endDate = _ref2[1];
+
+        return rows.filter(function (row) {
+          var rowValue = row.values[id];
+
+          if (rowValue.getTime() <= endDate.getTime() && rowValue.getTime() >= startDate.getTime()) {
+            // In date range
+            return true;
+          } else {
+            // Not in date range
+            return false;
+          }
+        });
+      },
+      number: function number(rows, id, value) {
+        if (value === '') {
+          return rows;
+        }
+
+        var parsedValue = parseInt(value);
+        return rows.filter(function (row) {
+          var rowValue = row.values[id];
+          return rowValue === parsedValue;
+        });
+      },
+      checkbox: function checkbox(rows, id, value) {
+        // gets all the items that are selected and returns their value
+        var selectedItems = value.filter(function (item) {
+          return item.selected;
+        }).map(function (item) {
+          return item.value;
+        }); // if the user removed all checkboxes then display all rows
+
+        if (selectedItems.length === 0) {
+          return rows;
+        }
+
+        return rows.filter(function (row) {
+          var rowValue = row.values[id];
+          return selectedItems.includes(rowValue);
+        });
+      }
+    };
+  }, []);
+  hooks.useInstance.push(function (instance) {
+    var filterProps = instance.filterProps,
+        setAllFilters = instance.setAllFilters,
+        headers = instance.headers;
+    var defaultProps = {
+      variation: 'flyout'
+    };
+
+    var getFilterFlyoutProps = function getFilterFlyoutProps() {
+      return _objectSpread(_objectSpread(_objectSpread({}, defaultProps), filterProps), {}, {
+        setAllFilters: setAllFilters,
+        headers: headers
+      });
+    };
+
+    Object.assign(instance, {
+      filterProps: _objectSpread(_objectSpread({}, defaultProps), instance.filterProps),
+      filterTypes: filterTypes,
+      getFilterFlyoutProps: getFilterFlyoutProps
+    });
+  });
+};
+
+export default useFiltering;

package/es/components/Datagrid/useParentDimensions.js

@@ -14,6 +14,7 @@ var useParentDimensions = function useParentDimensions(hooks) {
   var headRef = useRef();
   var innerListRef = useRef();
   var listRef = useRef();
+  var gridRef = useRef();
 
   var _useState = useState(),
       _useState2 = _slicedToArray(_useState, 2),
@@ -55,7 +56,8 @@ var useParentDimensions = function useParentDimensions(hooks) {
       headRef: headRef,
       innerListRef: innerListRef,
       handleResize: handleResize,
-      listRef: listRef
+      listRef: listRef,
+      gridRef: gridRef
     });
   };
 

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

@@ -8,10 +8,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 import React, { useLayoutEffect, useState } from 'react';
 import { DataTable, Button, OverflowMenu, OverflowMenuItem, ComposedModal, ModalBody, ModalHeader, ModalFooter, Dropdown } from '@carbon/react';
-import { Download, Filter, Add, Restart, ChevronDown } from '@carbon/react/icons';
+import { Download, Add, Restart, ChevronDown } from '@carbon/react/icons';
 import { action } from '@storybook/addon-actions';
 import { pkg } from '../../../settings';
 import { ButtonMenu, ButtonMenuItem } from '../../ButtonMenu';
+import { FilterFlyout } from '../Datagrid/addons/Filtering';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 export var DatagridActions = function DatagridActions(datagridState) {
   var selectedFlatRows = datagridState.selectedFlatRows,
@@ -19,7 +20,9 @@ export var DatagridActions = function DatagridActions(datagridState) {
       CustomizeColumnsButton = datagridState.CustomizeColumnsButton,
       RowSizeDropdown = datagridState.RowSizeDropdown,
       rowSizeDropdownProps = datagridState.rowSizeDropdownProps,
-      useDenseHeader = datagridState.useDenseHeader;
+      useDenseHeader = datagridState.useDenseHeader,
+      filterProps = datagridState.filterProps,
+      getFilterFlyoutProps = datagridState.getFilterFlyoutProps;
 
   var downloadCsv = function downloadCsv() {
     alert('Downloading...');
@@ -32,10 +35,6 @@ export var DatagridActions = function DatagridActions(datagridState) {
     alert('refreshing...');
   };
 
-  var leftPanelClick = function leftPanelClick() {
-    alert('open/close left panel...');
-  };
-
   var searchForAColumn = 'Search';
   var isNothingSelected = selectedFlatRows.length === 0;
   var style = {
@@ -44,6 +43,10 @@ export var DatagridActions = function DatagridActions(datagridState) {
     }
   };
 
+  var renderFilterFlyout = function renderFilterFlyout() {
+    return (filterProps === null || filterProps === void 0 ? void 0 : filterProps.variation) === 'flyout' && /*#__PURE__*/React.createElement(FilterFlyout, getFilterFlyoutProps());
+  };
+
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
       modalOpen = _useState2[0],
@@ -77,16 +80,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     renderIcon: Download,
     iconDescription: 'Download CSV',
     onClick: downloadCsv
-  })), /*#__PURE__*/React.createElement("div", {
-    style: style
-  }, /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    hasIconOnly: true,
-    tooltipPosition: "bottom",
-    renderIcon: Filter,
-    iconDescription: 'Left panel',
-    onClick: leftPanelClick
-  })), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+  })), renderFilterFlyout(), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
     style: style,
     className: "".concat(blockClass, "__toolbar-divider")
   }, /*#__PURE__*/React.createElement(Button, {
@@ -122,14 +116,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     itemText: "Create",
     hasDivider: true,
     requireTitle: true
-  }))) : !mobileToolbar ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
-    kind: "ghost",
-    hasIconOnly: true,
-    tooltipPosition: "bottom",
-    renderIcon: Filter,
-    iconDescription: 'Left panel',
-    onClick: leftPanelClick
-  }), /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
+  }))) : !mobileToolbar ? /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,
@@ -137,7 +124,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
     onChange: function onChange(e) {
       return setGlobalFilter(e.target.value);
     }
-  }), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
+  }), renderFilterFlyout(), /*#__PURE__*/React.createElement(RowSizeDropdown, rowSizeDropdownProps), /*#__PURE__*/React.createElement("div", {
     style: style
   }, /*#__PURE__*/React.createElement(Button, {
     kind: "ghost",
@@ -169,7 +156,7 @@ export var DatagridActions = function DatagridActions(datagridState) {
   }), /*#__PURE__*/React.createElement(ButtonMenuItem, {
     itemText: "Option 3",
     onClick: action("Click on ButtonMenu Option 3")
-  })))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
+  }))) : /*#__PURE__*/React.createElement(TableToolbarContent, null, /*#__PURE__*/React.createElement(TableToolbarSearch, {
     size: "xl",
     id: "columnSearch",
     persistent: true,

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

@@ -85,5 +85,10 @@ export var ARG_TYPES = {
   customizeColumnsProps: {
     control: 'object',
     description: 'This is an object containing all of the props used with the column customization extension. _This value is set/passed inside of the `datagridState` object._'
+  },
+  filterProps: {
+    name: 'Filter props',
+    control: 'object',
+    description: 'This is an object for all the props passed into the filter flyout and filter panel'
   }
 };

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

@@ -89,8 +89,13 @@ export var getInlineEditColumns = function getInlineEditColumns() {
     accessor: 'visits',
     width: 120,
     inlineEdit: {
+      validator: function validator(n) {
+        return n && n < 10;
+      },
       type: 'number',
-      inputProps: {} // These props are passed to the Carbon component used for inline editing
+      inputProps: {
+        invalidText: 'Invalid number, must be 10 or greater'
+      } // These props are passed to the Carbon component used for inline editing
 
     }
   }, {

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

@@ -12,7 +12,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React from 'react';
 import namor from 'namor';
-import { StatusIcon } from '../../StatusIcon';
 import { inlineEditSelectItems } from './getInlineEditColumns';
 
 var getRandomInteger = function getRandomInteger(min, max, decimalPlaces) {
@@ -54,27 +53,30 @@ export var range = function range(len) {
 
   return arr;
 };
+/** This function is only to create a random data point when the person joined */
 
-var renderStatusIcon = function renderStatusIcon(statusChance) {
-  var iconProps = {
-    size: 'sm',
-    theme: 'light',
-    kind: statusChance > 0.66 ? 'critical' : statusChance > 0.33 ? 'minor-warning' : 'normal',
-    iconDescription: statusChance > 0.66 ? 'Critical' : statusChance > 0.33 ? 'Minor warning' : 'Normal'
-  };
-  return /*#__PURE__*/React.createElement(StatusIcon, iconProps);
+var getRandomDateJoined = function getRandomDateJoined() {
+  return randomDate(new Date(2022, 0, 1), new Date());
+};
+
+var getPasswordStrength = function getPasswordStrength() {
+  var chance = Math.random();
+  return chance > 0.66 ? 'critical' : chance > 0.33 ? 'minor-warning' : 'normal';
 };
 
-var renderDocLink = function renderDocLink(statusChance) {
+var renderDocLink = function renderDocLink() {
+  var chance = Math.random();
   var docLinkObj = {
-    href: statusChance > 0.66 ? 'http://carbondesignsystem.com/' : statusChance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
-    text: statusChance > 0.66 ? 'Carbon Design System' : statusChance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
+    href: chance > 0.66 ? 'http://carbondesignsystem.com/' : chance > 0.33 ? 'https://pages.github.ibm.com/cdai-design/pal/' : 'http://carbon-for-ibm-products.netlify.app/',
+    text: chance > 0.66 ? 'Carbon Design System' : chance > 0.33 ? 'Carbon for IBM Products PAL' : 'Carbon for IBM Products storybook'
   };
   return docLinkObj;
 };
 
 var newPerson = function newPerson() {
   var statusChance = Math.random();
+  var roleChance = Math.random();
+  var activeChance = Math.random();
   var initialChartTypeIndex = getRandomInteger(0, 2);
   var activeSinceDate = new Date();
   var yesterdayDate = new Date();
@@ -93,6 +95,9 @@ var newPerson = function newPerson() {
     age: Math.floor(Math.random() * 30),
     visits: Math.floor(Math.random() * 100),
     progress: Math.floor(Math.random() * 100),
+    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
+    role: roleChance > 0.66 ? 'developer' : roleChance > 0.33 ? 'designer' : 'researcher',
+    joined: getRandomDateJoined(),
     someone1: namor.generate({
       words: 1,
       numbers: 0
@@ -173,12 +178,11 @@ var newPerson = function newPerson() {
       words: 1,
       numbers: 0
     }),
-    status: statusChance > 0.66 ? 'relationship' : statusChance > 0.33 ? 'complicated' : 'single',
     chartType: initialChartTypeIndex === 0 ? inlineEditSelectItems[0] : initialChartTypeIndex === 1 ? inlineEditSelectItems[1] : inlineEditSelectItems[2],
-    activeSince: statusChance > 0.66 ? activeSinceDate : statusChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
+    activeSince: activeChance > 0.66 ? activeSinceDate : activeChance > 0.33 ? yesterdayDate : twoDaysAgoDate,
     bonus: "$\r".concat(getRandomInteger(100, 500, 2)),
-    status_icon: renderStatusIcon(statusChance),
-    doc_link: renderDocLink(statusChance)
+    passwordStrength: getPasswordStrength(),
+    doc_link: renderDocLink()
   };
 };
 
@@ -197,4 +201,8 @@ export var newPersonWithTwoLines = function newPersonWithTwoLines() {
     }),
     age: Math.floor(Math.random() * 30)
   };
+};
+
+var randomDate = function randomDate(start, end) {
+  return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
 };

package/es/components/FilterSummary/FilterSummary.js

@@ -0,0 +1,54 @@
+/**
+ * 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 { Button } from '@carbon/react';
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { TagSet } from '../TagSet';
+import { pkg } from '../../settings';
+var blockClass = "".concat(pkg.prefix, "--filter-summary");
+var FilterSummary = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className,
+      _ref$clearFiltersText = _ref.clearFiltersText,
+      clearFiltersText = _ref$clearFiltersText === void 0 ? 'Clear filters' : _ref$clearFiltersText,
+      _ref$clearFilters = _ref.clearFilters,
+      clearFilters = _ref$clearFilters === void 0 ? function () {} : _ref$clearFilters,
+      _ref$filters = _ref.filters,
+      filters = _ref$filters === void 0 ? [] : _ref$filters;
+  var tagFilters = filters.map(function (_ref2) {
+    var key = _ref2.key,
+        value = _ref2.value;
+    return {
+      type: 'gray',
+      label: "".concat(key, ": ").concat(value)
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: cx([blockClass, className])
+  }, /*#__PURE__*/React.createElement(TagSet, {
+    allTagsModalSearchLabel: "Search all tags",
+    allTagsModalSearchPlaceholderText: "Search all tags",
+    allTagsModalTitle: "All tags",
+    showAllTagsLabel: "View all tags",
+    tags: tagFilters
+  }), /*#__PURE__*/React.createElement(Button, {
+    kind: "ghost",
+    size: "sm",
+    onClick: clearFilters
+  }, clearFiltersText));
+});
+var componentName = 'FilterSummary';
+FilterSummary.displayName = componentName;
+FilterSummary.propTypes = {
+  className: PropTypes.string,
+  clearFilters: PropTypes.func.isRequired,
+  clearFiltersText: PropTypes.string,
+  filters: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+export default FilterSummary;

package/es/components/FilterSummary/index.js

@@ -0,0 +1,7 @@
+/**
+ * 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.
+ */
+export { default as FilterSummary } from './FilterSummary';

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) {

package/lib/components/DataSpreadsheet/DataSpreadsheet.js

@@ -236,10 +236,7 @@ var DataSpreadsheet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref
 
   var removeActiveCell = (0, _react.useCallback)(function () {
     var activeCellHighlight = spreadsheetRef.current.querySelector(".".concat(blockClass, "__active-cell--highlight"));
-
-    if (activeCellHighlight) {
-      activeCellHighlight.style.display = 'none';
-    }
+    activeCellHighlight.style.display = 'none';
   }, [spreadsheetRef]);
   var removeCellEditor = (0, _react.useCallback)(function () {
     setCellEditorValue('');

package/lib/components/DataSpreadsheet/utils/handleCellDeletion.js

@@ -16,6 +16,8 @@ var _rangeWithCallback = require("../../../global/js/utils/rangeWithCallback");
  * LICENSE file in the root directory of this source tree.
  */
 var handleCellDeletion = function handleCellDeletion(_ref) {
+  var _selectionAreaToEmpty, _selectionAreaToEmpty2, _selectionAreaToEmpty3, _selectionAreaToEmpty4, _selectionAreaToEmpty5, _selectionAreaToEmpty6, _selectionAreaToEmpty7, _selectionAreaToEmpty8;
+
   var activeCellCoordinates = _ref.activeCellCoordinates,
       selectionAreas = _ref.selectionAreas,
       currentMatcher = _ref.currentMatcher,
@@ -35,10 +37,10 @@ var handleCellDeletion = function handleCellDeletion(_ref) {
     return item.matcher === currentMatcher;
   });
   var selectionAreaToEmptyContents = selectionAreaClone[indexOfCurrentSelectionArea];
-  var lowestColumnIndex = Math.min(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
-  var greatestColumnIndex = Math.max(selectionAreaToEmptyContents.point1.column, selectionAreaToEmptyContents.point2.column);
-  var lowestRowIndex = Math.min(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
-  var greatestRowIndex = Math.max(selectionAreaToEmptyContents.point1.row, selectionAreaToEmptyContents.point2.row);
+  var lowestColumnIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty === void 0 ? void 0 : _selectionAreaToEmpty.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty2 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty2 === void 0 ? void 0 : _selectionAreaToEmpty2.column);
+  var greatestColumnIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty3 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty3 === void 0 ? void 0 : _selectionAreaToEmpty3.column, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty4 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty4 === void 0 ? void 0 : _selectionAreaToEmpty4.column);
+  var lowestRowIndex = Math.min(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty5 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty5 === void 0 ? void 0 : _selectionAreaToEmpty5.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty6 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty6 === void 0 ? void 0 : _selectionAreaToEmpty6.row);
+  var greatestRowIndex = Math.max(selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty7 = selectionAreaToEmptyContents.point1) === null || _selectionAreaToEmpty7 === void 0 ? void 0 : _selectionAreaToEmpty7.row, selectionAreaToEmptyContents === null || selectionAreaToEmptyContents === void 0 ? void 0 : (_selectionAreaToEmpty8 = selectionAreaToEmptyContents.point2) === null || _selectionAreaToEmpty8 === void 0 ? void 0 : _selectionAreaToEmpty8.row);
   (0, _rangeWithCallback.rangeWithCallback)(lowestColumnIndex, greatestColumnIndex, function (columnIndex) {
     (0, _rangeWithCallback.rangeWithCallback)(lowestRowIndex, greatestRowIndex, function (rowIndex) {
       var cellProps = rows[rowIndex].cells[columnIndex];