@carbon/ibm-products 1.4.0 → 1.7.0

package/es/components/CreateTearsheet/CreateTearsheet.js

@@ -9,7 +9,7 @@ var _excluded = ["backButtonText", "cancelButtonText", "children", "className",
  * 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, { forwardRef, useState, useRef, createContext } from 'react';
+import React, { forwardRef, useState, useRef, createContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Grid, Form } from 'carbon-components-react';
@@ -19,6 +19,7 @@ import { CreateInfluencer } from '../CreateInfluencer';
 import { pkg } from '../../settings';
 import { usePreviousValue, useValidCreateStepCount, useResetCreateComponent, useCreateComponentFocus, useCreateComponentStepChange } from '../../global/js/hooks';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { lastIndexInArray } from '../../global/js/utils/lastIndexInArray';
 var componentName = 'CreateTearsheet';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create"); // This is a general context for the steps container
 // containing information about the state of the container
@@ -86,12 +87,35 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
       stepData = _useState16[0],
       setStepData = _useState16[1];
 
-  var totalStepCount = React.Children.count(children);
+  var _useState17 = useState(1),
+      _useState18 = _slicedToArray(_useState17, 2),
+      firstIncludedStep = _useState18[0],
+      setFirstIncludedStep = _useState18[1];
+
+  var _useState19 = useState(null),
+      _useState20 = _slicedToArray(_useState19, 2),
+      lastIncludedStep = _useState20[0],
+      setLastIncludedStep = _useState20[1];
+
   var previousState = usePreviousValue({
     currentStep: currentStep,
     open: open
   });
   var contentRef = useRef();
+  useEffect(function () {
+    var firstItem = stepData.findIndex(function (item) {
+      return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
+    }) + 1;
+    var lastItem = lastIndexInArray(stepData, 'shouldIncludeStep', true);
+
+    if (firstItem !== firstIncludedStep) {
+      setFirstIncludedStep(firstItem);
+    }
+
+    if (lastItem !== lastIncludedStep) {
+      setLastIncludedStep(lastItem);
+    }
+  }, [stepData, firstIncludedStep, lastIncludedStep]);
   useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
@@ -100,15 +124,18 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
   useValidCreateStepCount(stepData.length, componentName);
   useResetCreateComponent({
+    firstIncludedStep: firstIncludedStep,
     previousState: previousState,
     open: open,
     setCurrentStep: setCurrentStep,
     initialStep: initialStep,
-    totalSteps: totalStepCount,
+    totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
     componentName: componentName
   });
   useCreateComponentStepChange({
-    totalStepCount: totalStepCount,
+    firstIncludedStep: firstIncludedStep,
+    lastIncludedStep: lastIncludedStep,
+    stepData: stepData,
     onNext: onNext,
     isSubmitDisabled: isDisabled,
     setCurrentStep: setCurrentStep,
@@ -181,8 +208,7 @@ export var CreateTearsheet = /*#__PURE__*/forwardRef(function (_ref, ref) {
         });
       },
       setStepData: setStepData,
-      stepData: stepData,
-      totalStepCount: totalStepCount
+      stepData: stepData
     }
   }, React.Children.map(children, function (child, index) {
     return /*#__PURE__*/React.createElement(StepNumberContext.Provider, {

package/es/components/CreateTearsheet/CreateTearsheetStep.js

@@ -1,20 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 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, { forwardRef, useContext, useEffect } from 'react';
+import React, { forwardRef, useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Column, FormGroup, Row } from 'carbon-components-react';
 import { StepsContext, StepNumberContext } from './CreateTearsheet';
 import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole';
-import { usePreviousValue } from '../../global/js/hooks';
+import { usePreviousValue, useRetrieveStepData } from '../../global/js/hooks';
 var componentName = 'CreateTearsheetStep';
 var blockClass = "".concat(pkg.prefix, "--tearsheet-create__step");
 export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -22,57 +22,57 @@ export var CreateTearsheetStep = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var children = _ref.children,
       className = _ref.className,
-      subtitle = _ref.subtitle,
       description = _ref.description,
       disableSubmit = _ref.disableSubmit,
-      introStep = _ref.introStep,
-      title = _ref.title,
-      hasFieldset = _ref.hasFieldset,
       fieldsetLegendText = _ref.fieldsetLegendText,
+      hasFieldset = _ref.hasFieldset,
+      includeStep = _ref.includeStep,
+      introStep = _ref.introStep,
       onNext = _ref.onNext,
       onMount = _ref.onMount,
-      secondaryLabel = _ref.secondaryLabel;
-  var steps = useContext(StepsContext);
+      secondaryLabel = _ref.secondaryLabel,
+      subtitle = _ref.subtitle,
+      title = _ref.title;
+  var stepsContext = useContext(StepsContext);
   var stepNumber = useContext(StepNumberContext);
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      shouldIncludeStep = _useState2[0],
+      setShouldIncludeStep = _useState2[1];
+
   var previousState = usePreviousValue({
-    currentStep: steps === null || steps === void 0 ? void 0 : steps.currentStep
+    currentStep: stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep
+  });
+  useRetrieveStepData({
+    stepsContext: stepsContext,
+    stepNumber: stepNumber,
+    introStep: introStep,
+    shouldIncludeStep: shouldIncludeStep,
+    secondaryLabel: secondaryLabel,
+    title: title
   }); // This useEffect reports back the onNext and onMount values so that they can be used
   // in the appropriate custom hooks.
 
   useEffect(function () {
-    if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
-      steps === null || steps === void 0 ? void 0 : steps.setOnNext(onNext);
-      steps === null || steps === void 0 ? void 0 : steps.setOnMount(onMount);
+    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep) && (previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnNext(onNext);
+      stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.setOnMount(onMount);
     }
-  }, [onMount, onNext, steps, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // This useEffect makes sure that every CreateTearsheetStep reports back it's
-  // title, secondaryLabel, and introStep props so that it can be sent to the CreateInfluencer.
+  }, [onMount, onNext, stepsContext, stepNumber, previousState === null || previousState === void 0 ? void 0 : previousState.currentStep]); // Used to take the `includeStep` prop and use it as a local state value
 
   useEffect(function () {
-    var _steps$stepData, _steps$stepData2;
-
-    var stepHasReported = steps === null || steps === void 0 ? void 0 : (_steps$stepData = steps.stepData) === null || _steps$stepData === void 0 ? void 0 : _steps$stepData.includes(function (item) {
-      return item.title === title;
-    });
-
-    if (!stepHasReported && (steps === null || steps === void 0 ? void 0 : (_steps$stepData2 = steps.stepData) === null || _steps$stepData2 === void 0 ? void 0 : _steps$stepData2.length) < (steps === null || steps === void 0 ? void 0 : steps.totalStepCount)) {
-      steps === null || steps === void 0 ? void 0 : steps.setStepData(function (prev) {
-        return [].concat(_toConsumableArray(prev), [{
-          title: title,
-          secondaryLabel: secondaryLabel,
-          introStep: introStep
-        }]);
-      });
-    }
-  }, [steps, title, secondaryLabel, introStep]); // Whenever we are the current step, supply our disableSubmit value to the
+    setShouldIncludeStep(includeStep);
+  }, [includeStep, stepsContext, title]); // Whenever we are the current step, supply our disableSubmit value to the
   // steps container context so that it can manage the 'Next' button appropriately.
 
   useEffect(function () {
-    if (stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)) {
-      steps.setIsDisabled(disableSubmit);
+    if (stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)) {
+      stepsContext.setIsDisabled(disableSubmit);
     }
-  }, [steps, stepNumber, disableSubmit, onNext]);
-  return steps ? /*#__PURE__*/React.createElement("div", {
-    className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (steps === null || steps === void 0 ? void 0 : steps.currentStep)), _cx)),
+  }, [stepsContext, stepNumber, disableSubmit, onNext]);
+  return stepsContext ? /*#__PURE__*/React.createElement("div", {
+    className: cx(blockClass, className, (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__step--hidden-step"), stepNumber !== (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _defineProperty(_cx, "".concat(blockClass, "__step--visible-step"), stepNumber === (stepsContext === null || stepsContext === void 0 ? void 0 : stepsContext.currentStep)), _cx)),
     ref: ref
   }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
     xlg: 12,
@@ -130,6 +130,12 @@ CreateTearsheetStep.propTypes = {
    */
   hasFieldset: PropTypes.bool,
 
+  /**
+   * This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
+   * steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
+   */
+  includeStep: PropTypes.bool,
+
   /**
    * This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
    */
@@ -168,5 +174,6 @@ CreateTearsheetStep.propTypes = {
 // component needs to make a choice or assumption when a prop is not supplied.
 
 CreateTearsheetStep.defaultProps = {
-  hasFieldset: true
+  hasFieldset: true,
+  includeStep: true
 };

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

@@ -6,13 +6,13 @@ var _excluded = ["value1", "setValue1"];
 /* eslint-disable react/prop-types */
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 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 { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, Row, TextInput, Toggle, NumberInput } from 'carbon-components-react';
+import { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, Row, TextInput, Toggle, NumberInput, Checkbox } from 'carbon-components-react';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
@@ -107,6 +107,11 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
       isInvalid = _useState22[0],
       setIsInvalid = _useState22[1];
 
+  var _useState23 = useState(false),
+      _useState24 = _slicedToArray(_useState23, 2),
+      shouldIncludeAdditionalStep = _useState24[0],
+      setShouldIncludeAdditionalStep = _useState24[1];
+
   var clearCreateData = function clearCreateData() {
     setStepOneTextInputValue('');
     setTopicDescriptionValue('');
@@ -117,6 +122,7 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     setIsInvalid(false);
     setOpen(false);
     setValue1('');
+    setShouldIncludeAdditionalStep(false);
   };
 
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
@@ -219,12 +225,26 @@ export var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
     onToggle: function onToggle(event) {
       return setShouldReject(event);
     }
-  })))), /*#__PURE__*/React.createElement(CustomStep, {
+  }), /*#__PURE__*/React.createElement(Checkbox, {
+    labelText: "Include additional step",
+    id: "include-additional-step-checkbox",
+    onChange: function onChange(value) {
+      return setShouldIncludeAdditionalStep(value);
+    },
+    checked: shouldIncludeAdditionalStep
+  })))), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    title: "Dynamic step",
+    subtitle: "Dynamic step subtitle",
+    description: "This is an example showing how to include a dynamic step into the CreateTearsheet",
+    hasFieldset: false,
+    includeStep: shouldIncludeAdditionalStep
+  }, "dynamic step content"), /*#__PURE__*/React.createElement(CustomStep, {
     title: "Location",
     subtitle: "Custom step subtitle",
     description: "Custom step description (see storybook implementation for new custom step capability)",
     value1: value1,
-    setValue1: setValue1
+    setValue1: setValue1,
+    hasFieldset: false
   }), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     title: "Partitions",
     disableSubmit: !stepTwoTextInputValue,

package/es/components/CreateTearsheet/preview-components/MultiStepWithIntro.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /* eslint-disable react/prop-types */
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 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.
@@ -154,14 +154,16 @@ export var MultiStepWithIntro = function MultiStepWithIntro(_ref) {
     size: "lg"
   }), /*#__PURE__*/React.createElement("span", {
     className: "".concat(pkg.prefix, "--tearsheet-create-multi-step--custom-tile-label")
-  }, "Plus")))), selectedCategory === 'plus' && /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+  }, "Plus")))), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     title: "Conditional step",
     subtitle: "This step will only show for plus category creation flows",
-    hasFieldset: false
-  }, "conditional step content"), selectedCategory === 'standard' && /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'plus'
+  }, "This step will only show for plus create flows"), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     title: "Standard step only",
-    hasFieldset: false
-  }, "This step will only show for standard flows"), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
+    hasFieldset: false,
+    includeStep: selectedCategory === 'standard'
+  }, "This step will only show for standard create flows"), /*#__PURE__*/React.createElement(CreateTearsheetStep, {
     onNext: function onNext() {
       return new Promise(function (resolve, reject) {
         setTimeout(function () {

package/es/components/DataSpreadsheet/DataSpreadsheet.js

@@ -0,0 +1,154 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "columns", "data"];
+
+/**
+ * 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 portions of React that are needed.
+import React, { useMemo } from 'react';
+import { useBlockLayout, useTable } from 'react-table';
+import { FixedSizeList } from 'react-window'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg
+/*, carbon */
+} from '../../settings';
+import { getScrollbarWidth } from '../../global/js/utils/getScrollbarWidth'; // The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(pkg.prefix, "--data-spreadsheet");
+var componentName = 'DataSpreadsheet';
+/**
+ * DataSpreadsheet: used to organize and display large amounts of structured data, separated by columns and rows in a grid-like format.
+ */
+
+export var DataSpreadsheet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+      columns = _ref.columns,
+      data = _ref.data,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var defaultColumn = useMemo(function () {
+    return {
+      width: 150,
+      rowHeaderWidth: 64
+    };
+  }, []);
+  var scrollBarSize = useMemo(function () {
+    return getScrollbarWidth();
+  }, []);
+
+  var _useTable = useTable({
+    columns: columns,
+    data: data,
+    defaultColumn: defaultColumn
+  }, useBlockLayout),
+      getTableProps = _useTable.getTableProps,
+      getTableBodyProps = _useTable.getTableBodyProps,
+      headerGroups = _useTable.headerGroups,
+      rows = _useTable.rows,
+      totalColumnsWidth = _useTable.totalColumnsWidth,
+      prepareRow = _useTable.prepareRow;
+
+  var RenderRow = React.useCallback(function (_ref2) {
+    var index = _ref2.index,
+        style = _ref2.style;
+    var row = rows[index];
+    prepareRow(row);
+    return /*#__PURE__*/React.createElement("div", _extends({}, row.getRowProps({
+      style: style
+    }), {
+      className: "tr",
+      "data-row-index": index
+    }), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: cx("".concat(blockClass, "__td"), "".concat(blockClass, "__td-th")),
+      style: {
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth,
+        display: 'flex',
+        justifyContent: 'flex-end',
+        alignItems: 'center'
+      }
+    }, index + 1), row.cells.map(function (cell, index) {
+      return /*#__PURE__*/React.createElement("button", _extends({
+        key: "cell_".concat(index)
+      }, cell.getCellProps(), {
+        type: "button",
+        className: "".concat(blockClass, "__td")
+      }), cell.render('Cell'));
+    }));
+  }, [prepareRow, rows, defaultColumn.rowHeaderWidth]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, getTableProps(), getDevtoolsProps(componentName), {
+    className: cx(blockClass, className),
+    ref: ref,
+    role: "grid"
+  }), /*#__PURE__*/React.createElement("div", null, headerGroups.map(function (headerGroup, index) {
+    return /*#__PURE__*/React.createElement("div", _extends({
+      key: "header_".concat(index)
+    }, headerGroup.getHeaderGroupProps(), {
+      className: "".concat(blockClass, "__tr")
+    }), /*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "".concat(blockClass, "__th"),
+      style: {
+        width: defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.rowHeaderWidth
+      }
+    }, "\xA0"), headerGroup.headers.map(function (column, index) {
+      return /*#__PURE__*/React.createElement("button", _extends({
+        key: "column_".concat(index)
+      }, column.getHeaderProps(), {
+        type: "button",
+        className: "".concat(blockClass, "__th")
+      }), column.render('Header'));
+    }));
+  })), /*#__PURE__*/React.createElement("div", getTableBodyProps(), /*#__PURE__*/React.createElement(FixedSizeList, {
+    height: 400,
+    itemCount: rows.length,
+    itemSize: 36,
+    width: totalColumnsWidth + scrollBarSize
+  }, RenderRow)));
+}); // Return a placeholder if not released and not enabled by feature flag
+
+DataSpreadsheet = pkg.checkComponentEnabled(DataSpreadsheet, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+DataSpreadsheet.displayName = componentName; // The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+
+DataSpreadsheet.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+
+  /**
+   * The data that will build the column headers
+   */
+  columns: PropTypes.arrayOf(PropTypes.shape({
+    Header: PropTypes.string,
+    accessor: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    Cell: PropTypes.func // optional cell formatter
+
+  })),
+
+  /**
+   * The spreadsheet data that will be rendered in the body of the spreadsheet component
+   */
+  data: PropTypes.arrayOf(PropTypes.shape)
+  /* TODO: add types and DocGen for all props. */
+
+}; // Default values for component props. Default values are not required for
+// props that are required, nor for props where the component can apply
+// 'undefined' values reasonably. Default values should be provided when the
+// component needs to make a choice or assumption when a prop is not supplied.
+
+DataSpreadsheet.defaultProps = {
+  data: [],
+  columns: []
+};

package/es/components/DataSpreadsheet/generateData.js

@@ -0,0 +1,47 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+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; }
+
+// cspell:disable
+var pets = ['dog', 'cat', 'bird', 'lizard', 'frog', 'hamster', 'fish', 'rabbit', 'snake'];
+var petNames = ['Bruno', 'Willow', 'Kona', 'Heidi', 'Rusty', 'Bonnie', 'Cash', 'Gucci', 'Brody', 'Emma', 'Loki', 'Angel', 'Astro', 'Sherman', 'Layla', 'Peanut', 'Grace', 'Mickey', 'Sasha', 'Finn', 'Tucker', 'Bear', 'Mocha', 'Roscoe']; // cspell:enable
+
+var range = function range(len) {
+  var arr = [];
+
+  for (var i = 0; i < len; i++) {
+    arr.push(i);
+  }
+
+  return arr;
+};
+
+var newPet = function newPet() {
+  return {
+    petType: pets[Math.floor(Math.random() * pets.length)],
+    firstName: petNames[Math.floor(Math.random() * petNames.length)],
+    age: Math.floor(Math.random() * 30),
+    visits: Math.floor(Math.random() * 40),
+    health: Math.floor(Math.random() * 100)
+  };
+};
+
+export var generateData = function generateData() {
+  for (var _len = arguments.length, lens = new Array(_len), _key = 0; _key < _len; _key++) {
+    lens[_key] = arguments[_key];
+  }
+
+  var makeDataLevel = function makeDataLevel() {
+    var depth = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    var len = lens[depth];
+    return range(len).map(function () {
+      return _objectSpread(_objectSpread({}, newPet()), {}, {
+        subRows: lens[depth + 1] ? makeDataLevel(depth + 1) : undefined
+      });
+    });
+  };
+
+  return makeDataLevel();
+};

package/es/components/DataSpreadsheet/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 { DataSpreadsheet } from './DataSpreadsheet';

package/es/components/EmptyStates/EmptyState.js

@@ -107,7 +107,7 @@ EmptyState.propTypes = {
   /**
    * Empty state subtext
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state heading

package/es/components/EmptyStates/EmptyStateContent.js

@@ -30,7 +30,7 @@ export var EmptyStateContent = function EmptyStateContent(_ref) {
       title = _ref.title;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("h3", {
     className: cx("".concat(blockClass, "__header"), _defineProperty({}, "".concat(blockClass, "__header--small"), size === 'sm'))
-  }, title), /*#__PURE__*/React.createElement("p", {
+  }, title), subtitle && /*#__PURE__*/React.createElement("p", {
     className: cx("".concat(blockClass, "__subtitle"), _defineProperty({}, "".concat(blockClass, "__subtitle--small"), size === 'sm'))
   }, subtitle), (action === null || action === void 0 ? void 0 : action.text) && (action === null || action === void 0 ? void 0 : action.onClick) && /*#__PURE__*/React.createElement(Button, _extends({}, action, {
     className: "".concat(blockClass, "__action-button"),
@@ -76,7 +76,7 @@ EmptyStateContent.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -99,7 +99,7 @@ ErrorEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -99,7 +99,7 @@ NoDataEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -99,7 +99,7 @@ NoTagsEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -99,7 +99,7 @@ NotFoundEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -99,7 +99,7 @@ NotificationsEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -99,7 +99,7 @@ UnauthorizedEmptyState.propTypes = {
   /**
    * Empty state subtitle
    */
-  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
+  subtitle: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 
   /**
    * Empty state title