@7shifts/sous-chef 3.21.0-beta.2 → 3.21.0-beta.4

package/dist/index.js

@@ -4564,7 +4564,7 @@ var DataTableHeader = function DataTableHeader(_ref) {
 var initialValue = {
   columns: [],
   numberOfRows: 0,
-  isLoadingOnBackground: false
+  state: 'SPINNER_LOADING'
 };
 var Context = React.createContext(initialValue);
 var useDataTableContext = function useDataTableContext() {
@@ -6589,7 +6589,7 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
   var _useDataTableContext = useDataTableContext(),
       columns = _useDataTableContext.columns,
       hasVerticalBorders = _useDataTableContext.hasVerticalBorders,
-      isLoadingOnBackground = _useDataTableContext.isLoadingOnBackground;
+      state = _useDataTableContext.state;
 
   var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
   var isRightAligned = column ? column.isRightAligned : false;
@@ -6606,7 +6606,7 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
     colSpan: colSpan,
     ref: ref
   }, React__default.createElement("div", {
-    className: classnames(styles$q['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$q['data-table-cell__content--with-error']] = hasError, _classnames3[styles$q['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$q['data-table-cell__content--loading']] = isLoadingOnBackground, _classnames3))
+    className: classnames(styles$q['data-table-cell__content'], (_classnames3 = {}, _classnames3[styles$q['data-table-cell__content--with-error']] = hasError, _classnames3[styles$q['data-table-cell__content--right-align']] = isRightAligned, _classnames3[styles$q['data-table-cell__content--loading']] = state === 'BACKGROUND_LOADING', _classnames3))
   }, isRightAligned && icon, children, !isRightAligned && icon));
   return React__default.createElement(Tooltip$1, {
     overlay: errorMessage,
@@ -6618,188 +6618,6 @@ var DataTableCellElement = function DataTableCellElement(_ref, ref) {
 
 var DataTableCell = React.forwardRef(DataTableCellElement);
 
-var DataTableRowActions = function DataTableRowActions(_ref) {
-  var actions = _ref.actions,
-      columnIndex = _ref.columnIndex;
-  var kebabMenuItems = actions.filter(function (action) {
-    return action.showInKebab === undefined || action.showInKebab;
-  });
-  var sideActions = actions.filter(function (action) {
-    return action.showInKebab === false;
-  });
-  return React__default.createElement(DataTableCell, {
-    columnIndex: columnIndex
-  }, React__default.createElement("div", {
-    className: styles$e['actions'],
-    "data-testid": "data-table-dropdown-menu"
-  }, sideActions.length > 0 && sideActions.map(function (action) {
-    return React__default.createElement(Button$1, Object.assign({
-      key: action.action,
-      onClick: action.onAction,
-      theme: typeof action.label === 'string' ? 'default' : 'link-icon'
-    }, action.showInKebab === false ? action.buttonProps : {}), action.label);
-  }), kebabMenuItems.length > 0 && React__default.createElement(KebabMenu, {
-    actions: kebabMenuItems
-  })));
-};
-
-var styles$B = {"data-table-editable-cell":"_qYNve","data-table-editable-cell--right-aligned":"_3w6bw","data-table-editable-cell--currency":"_2y-_5","data-table-editable-cell--invalid":"_1Mx8j","data-table-editable-cell--top-left":"_2BlhN","data-table-editable-cell--top-right":"_1qDoN","data-table-editable-cell--bottom-left":"_2NUlb","data-table-editable-cell--bottom-right":"_3Mm-v"};
-
-var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, ref) {
-  var _columns$columnIndex, _controllers$error, _classnames, _classnames2;
-
-  var name = _ref.name,
-      columnIndex = _ref.columnIndex,
-      rowIndex = _ref.rowIndex,
-      inputId = _ref.id,
-      value = _ref.value,
-      onChange = _ref.onChange,
-      onBlur = _ref.onBlur,
-      placeholder = _ref.placeholder,
-      disabled = _ref.disabled,
-      error = _ref.error,
-      prefix = _ref.prefix,
-      suffix = _ref.suffix,
-      defaultValue = _ref.defaultValue,
-      _ref$type = _ref.type,
-      type = _ref$type === void 0 ? 'text' : _ref$type,
-      testId = _ref.testId;
-
-  var _useDataTableContext = useDataTableContext(),
-      columns = _useDataTableContext.columns,
-      numberOfRows = _useDataTableContext.numberOfRows;
-
-  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
-  var isRightAligned = column ? column.isRightAligned : false;
-  var numberOfColumns = (columns === null || columns === void 0 ? void 0 : columns.length) || 0;
-  var isTopLeftCell = columnIndex === 0 && rowIndex === 0;
-  var isTopRightCell = columnIndex === numberOfColumns - 1 && rowIndex === 0;
-  var isBottomLeftCell = columnIndex === 0 && rowIndex === numberOfRows - 1;
-  var isBottomRightCell = columnIndex === numberOfColumns - 1 && rowIndex === numberOfRows - 1;
-  var controllers = useFieldControllers({
-    name: name,
-    id: inputId,
-    value: value,
-    onChange: onChange,
-    onBlur: onBlur,
-    error: error,
-    type: type
-  });
-  var hasError = !!controllers.error;
-  var errorMessage = (_controllers$error = controllers.error) === null || _controllers$error === void 0 ? void 0 : _controllers$error.toString();
-  var fieldProps = {
-    name: name,
-    id: controllers.id
-  };
-  var EditableCell = React__default.createElement("div", {
-    className: classnames((_classnames = {}, _classnames[styles$B['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$B['data-table-editable-cell']),
-    "data-testid": testId,
-    role: "cell"
-  }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
-    prefix: prefix,
-    suffix: suffix
-  }, React__default.createElement("input", {
-    name: name,
-    id: controllers.id,
-    className: classnames((_classnames2 = {}, _classnames2[styles$B['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$B['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$B['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$B['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$B['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$B['data-table-editable-cell--invalid']] = hasError, _classnames2)),
-    type: type === 'currency' ? 'number' : 'text',
-    step: type === 'currency' ? 'any' : '',
-    "data-testid": testId && testId + "-text-field",
-    "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
-    "aria-invalid": hasError,
-    disabled: disabled,
-    placeholder: placeholder,
-    defaultValue: defaultValue,
-    value: controllers.value,
-    onChange: controllers.onChange,
-    onBlur: controllers.onBlur,
-    ref: ref,
-    onWheel: function onWheel(e) {
-      e.target.blur();
-    }
-  }))));
-  return React__default.createElement(Tooltip$1, {
-    overlay: errorMessage,
-    placement: "top",
-    theme: "white"
-  }, EditableCell);
-};
-
-var DataTableEditableCell = React.forwardRef(DataTableEditableCellElement);
-
-var _excluded$2m = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
-
-var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
-  var _classnames;
-
-  var children = _ref.children,
-      onClick = _ref.onClick,
-      _ref$isSelected = _ref.isSelected,
-      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
-      _ref$actions = _ref.actions,
-      actions = _ref$actions === void 0 ? [] : _ref$actions,
-      _ref$hasDefaultCell = _ref.hasDefaultCell,
-      hasDefaultCell = _ref$hasDefaultCell === void 0 ? true : _ref$hasDefaultCell,
-      testId = _ref.testId,
-      nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2m);
-
-  var _useDataTableContext = useDataTableContext(),
-      showActionMenu = _useDataTableContext.showActionMenu;
-
-  var styleNames = classnames(styles$d['item'], (_classnames = {}, _classnames[styles$d['clickable']] = onClick, _classnames[styles$d['selected']] = isSelected, _classnames));
-
-  var renderColumn = function renderColumn(columnElement, index) {
-    var isUsingDataTableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement === null || columnElement === void 0 ? void 0 : columnElement.type) === DataTableCell;
-
-    if (isUsingDataTableCell || !hasDefaultCell) {
-      return columnElement;
-    }
-
-    var isUsingDataTableEditableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement === null || columnElement === void 0 ? void 0 : columnElement.type) === DataTableEditableCell;
-    return React__default.createElement(DataTableCell, {
-      key: index,
-      columnIndex: index,
-      noPadding: !!isUsingDataTableEditableCell
-    }, columnElement);
-  };
-
-  return React__default.createElement("tr", Object.assign({}, nativeDivProps, {
-    className: styleNames,
-    onClick: onClick ? onClick : undefined,
-    onKeyPress: onClick ? onClick : undefined,
-    "data-testid": testId && testId + "-row",
-    role: "row",
-    ref: ref
-  }), React__default.Children.toArray(children).filter(Boolean).map(function (child, index) {
-    return renderColumn(child, index);
-  }), showActionMenu && React__default.createElement(DataTableRowActions, {
-    actions: actions,
-    columnIndex: React__default.Children.count(children)
-  }));
-};
-
-var DataTableRow = React.forwardRef(DataTableRowComponent);
-
-var DataTableDefaultItemComponent = function DataTableDefaultItemComponent(_ref) {
-  var columns = _ref.columns,
-      item = _ref.item,
-      testId = _ref.testId;
-  var headingKeys = columns ? columns.map(function (column) {
-    return column.name;
-  }) : Object.keys(item);
-  var columnsToShow = headingKeys.filter(function (key) {
-    return key !== 'actions';
-  });
-  return React__default.createElement(DataTableRow, {
-    actions: item.actions,
-    testId: testId
-  }, columnsToShow.map(function (headingKey) {
-    return React__default.createElement("div", {
-      key: headingKey
-    }, item[headingKey] || '');
-  }));
-};
-
 var BANNER_THEME = {
   INFO: 'info',
   WARNING: 'warning',
@@ -6812,7 +6630,7 @@ var BUTTON_THEME = {
   UPSELL: 'upsell'
 };
 
-var styles$C = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
+var styles$B = {"banner":"_vgLin","banner__title":"_63TwY","banner__body":"_3n6S7","banner__body--multilineCTA":"_2pMYs","banner--info":"_ON6Eg","banner__icon":"_1-D-E","banner--success":"_1FFZh","banner--danger":"_2R34O","banner--warning":"_3Cfhe","banner--upsell":"_1SIOw","banner__close":"_3SNQ1","banner--single-line":"_3nLTI"};
 
 var ButtonCTA = function ButtonCTA(_ref) {
   var button = _ref.button,
@@ -6835,7 +6653,7 @@ var ButtonCTA = function ButtonCTA(_ref) {
   }, button.props));
 };
 
-var styles$D = {"banner__caption":"_1jqm8"};
+var styles$C = {"banner__caption":"_1jqm8"};
 
 var InlineBannerCTA = function InlineBannerCTA(_ref) {
   var primaryButton = _ref.primaryButton,
@@ -6866,7 +6684,7 @@ var InlineBannerCTA = function InlineBannerCTA(_ref) {
     bannerTheme: bannerTheme,
     primaryCTA: true
   })), caption && multiLine && React__default.createElement("div", {
-    className: styles$D['banner__caption']
+    className: styles$C['banner__caption']
   }, caption));
 };
 
@@ -6891,7 +6709,7 @@ var InlineBannerIcon = function InlineBannerIcon(_ref) {
   }
 };
 
-var _excluded$2n = ["children", "theme", "title", "onClose", "caption", "primaryButton", "secondaryButton", "testId"];
+var _excluded$2m = ["children", "theme", "title", "onClose", "caption", "primaryButton", "secondaryButton", "testId"];
 
 var InlineBanner = function InlineBanner(_ref) {
   var _classnames, _classnames2;
@@ -6905,7 +6723,7 @@ var InlineBanner = function InlineBanner(_ref) {
       primaryButton = _ref.primaryButton,
       secondaryButton = _ref.secondaryButton,
       testId = _ref.testId,
-      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2n);
+      positionProps = _objectWithoutPropertiesLoose(_ref, _excluded$2m);
 
   var positionStyles = usePositionStyles(positionProps);
   var multiLine = !!title;
@@ -6913,14 +6731,14 @@ var InlineBanner = function InlineBanner(_ref) {
   var Layout = multiLine ? Stack : Inline;
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$C['banner'], (_classnames = {}, _classnames[styles$C['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$C['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$C['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$C['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$C['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$C['banner--single-line']] = !multiLine, _classnames)),
+    className: classnames(styles$B['banner'], (_classnames = {}, _classnames[styles$B['banner--info']] = theme === BANNER_THEME.INFO, _classnames[styles$B['banner--warning']] = theme === BANNER_THEME.WARNING, _classnames[styles$B['banner--success']] = theme === BANNER_THEME.SUCCESS, _classnames[styles$B['banner--danger']] = theme === BANNER_THEME.DANGER, _classnames[styles$B['banner--upsell']] = theme === BANNER_THEME.UPSELL, _classnames[styles$B['banner--single-line']] = !multiLine, _classnames)),
     style: positionStyles
   }, React__default.createElement(Inline, {
     alignItems: multiLine ? undefined : 'center',
     flex: ['0 1 auto', 1],
     space: 12
   }, React__default.createElement("div", {
-    className: styles$C['banner__icon']
+    className: styles$B['banner__icon']
   }, React__default.createElement(InlineBannerIcon, {
     theme: theme
   })), React__default.createElement(Layout, {
@@ -6930,9 +6748,9 @@ var InlineBanner = function InlineBanner(_ref) {
     flex: ['min-content'],
     flexWrap: multiLine ? undefined : 'wrap'
   }, title && React__default.createElement("div", {
-    className: styles$C['banner__title']
+    className: styles$B['banner__title']
   }, title), React__default.createElement("div", {
-    className: classnames(styles$C['banner__body'], (_classnames2 = {}, _classnames2[styles$C['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
+    className: classnames(styles$B['banner__body'], (_classnames2 = {}, _classnames2[styles$B['banner__body--multilineCTA']] = primaryButton && multiLine, _classnames2))
   }, children), primaryButton && React__default.createElement(InlineBannerCTA, {
     primaryButton: primaryButton,
     secondaryButton: secondaryButton,
@@ -6940,7 +6758,7 @@ var InlineBanner = function InlineBanner(_ref) {
     multiLine: multiLine,
     bannerTheme: theme
   })), dismissable && React__default.createElement("div", {
-    className: styles$C['banner__close']
+    className: styles$B['banner__close']
   }, React__default.createElement(Button$1, {
     theme: "link-icon",
     type: "button",
@@ -6954,7 +6772,7 @@ var PERSISTENT_BANNER_THEME = {
   DANGER: 'danger'
 };
 
-var styles$E = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
+var styles$D = {"persistent-banner":"_1KO1J","persistent-banner--info":"_2mTN3","persistent-banner--danger":"_1YuCF","persistent-banner--upsell":"_tlNFk"};
 
 var PersistentBanner = function PersistentBanner(_ref) {
   var _classNames;
@@ -6983,7 +6801,7 @@ var PersistentBanner = function PersistentBanner(_ref) {
   };
 
   return React__default.createElement("div", {
-    className: classnames(styles$E['persistent-banner'], (_classNames = {}, _classNames[styles$E['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$E['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$E['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
+    className: classnames(styles$D['persistent-banner'], (_classNames = {}, _classNames[styles$D['persistent-banner--info']] = theme === PERSISTENT_BANNER_THEME.INFO, _classNames[styles$D['persistent-banner--danger']] = theme === PERSISTENT_BANNER_THEME.DANGER, _classNames[styles$D['persistent-banner--upsell']] = theme === PERSISTENT_BANNER_THEME.UPSELL, _classNames)),
     "data-testid": testId
   }, onDismiss ? React__default.createElement(Inline, {
     flex: [1],
@@ -7055,7 +6873,7 @@ var useProgress = function useProgress(progress, maxValue, getMetric) {
   };
 };
 
-var styles$F = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
+var styles$E = {"circular-progress":"_1XR7V","circular-progress__label":"_1BygP","circular-progress__track":"_1Ak-z","circular-progress__indicator":"_22YIp"};
 
 var CircularProgress = function CircularProgress(_ref) {
   var progress = _ref.progress,
@@ -7070,7 +6888,7 @@ var CircularProgress = function CircularProgress(_ref) {
 
   var determinant = metric.percentage * 2.79;
   return React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$F['circular-progress'],
+    className: styles$E['circular-progress'],
     "data-testid": testId
   }), React__default.createElement("svg", {
     viewBox: "0 0 100 100"
@@ -7079,21 +6897,21 @@ var CircularProgress = function CircularProgress(_ref) {
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$F['circular-progress__track']
+    className: styles$E['circular-progress__track']
   }), React__default.createElement("circle", {
     cx: 50,
     cy: 50,
     r: 45,
     strokeWidth: "10px",
-    className: styles$F['circular-progress__indicator'],
+    className: styles$E['circular-progress__indicator'],
     strokeDashoffset: "66",
     strokeDasharray: determinant + " " + (279 - determinant)
   })), React__default.createElement("div", {
-    className: styles$F['circular-progress__label']
+    className: styles$E['circular-progress__label']
   }, children || metric.progress + "/" + metric.maxValue));
 };
 
-var styles$G = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
+var styles$F = {"progress-bar":"_3nyZN","progress-bar__indicator":"_11TEp","progress-bar__steps":"_3XFTU"};
 
 var ProgressBar = function ProgressBar(_ref) {
   var progress = _ref.progress,
@@ -7108,15 +6926,15 @@ var ProgressBar = function ProgressBar(_ref) {
       metric = _useProgress.metric;
 
   return React__default.createElement(Stack, null, React__default.createElement("div", Object.assign({}, elementProps, {
-    className: styles$G['progress-bar'],
+    className: styles$F['progress-bar'],
     "data-testid": testId
   }), React__default.createElement("div", {
-    className: styles$G['progress-bar__indicator'],
+    className: styles$F['progress-bar__indicator'],
     style: {
       width: metric.percentage + "%"
     }
   })), steps && steps.length > 0 && React__default.createElement("div", {
-    className: styles$G['progress-bar__steps']
+    className: styles$F['progress-bar__steps']
   }, steps.map(function (step) {
     return React__default.createElement("div", {
       key: step
@@ -7124,7 +6942,7 @@ var ProgressBar = function ProgressBar(_ref) {
   })));
 };
 
-var styles$H = {"skeleton":"_3w7eX","skeleton__avatar":"_3FtIs","skeleton__avatar--small":"_3bCyy","skeleton__avatar--medium":"_2zQGs","skeleton__avatar--large":"_14IIB","skeleton__avatar--xlarge":"_1C4Xa"};
+var styles$G = {"skeleton":"_3w7eX","skeleton__avatar":"_3FtIs","skeleton__avatar--small":"_3bCyy","skeleton__avatar--medium":"_2zQGs","skeleton__avatar--large":"_14IIB","skeleton__avatar--xlarge":"_1C4Xa"};
 
 var SKELETON_COMPONENT = {
   AVATAR: 'avatar',
@@ -7134,22 +6952,210 @@ var SKELETON_COMPONENT = {
   AVATAR_XLARGE: 'avatar--xlarge'
 };
 
-var _excluded$2o = ["as", "testId"];
+var _excluded$2n = ["as", "testId"];
 
 var Skeleton = function Skeleton(_ref) {
   var _classnames;
 
   var as = _ref.as,
       testId = _ref.testId,
-      positionStyles = _objectWithoutPropertiesLoose(_ref, _excluded$2o);
+      positionStyles = _objectWithoutPropertiesLoose(_ref, _excluded$2n);
 
   return React__default.createElement("div", {
     "data-testid": testId,
-    className: classnames(styles$H['skeleton'], (_classnames = {}, _classnames[styles$H['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$H['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$H['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$H['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$H['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames)),
+    className: classnames(styles$G['skeleton'], (_classnames = {}, _classnames[styles$G['skeleton__avatar']] = as === SKELETON_COMPONENT.AVATAR, _classnames[styles$G['skeleton__avatar--small']] = as === SKELETON_COMPONENT.AVATAR_SMALL, _classnames[styles$G['skeleton__avatar--medium']] = as === SKELETON_COMPONENT.AVATAR_MEDIUM, _classnames[styles$G['skeleton__avatar--large']] = as === SKELETON_COMPONENT.AVATAR_LARGE, _classnames[styles$G['skeleton__avatar--xlarge']] = as === SKELETON_COMPONENT.AVATAR_XLARGE, _classnames)),
     style: positionStyles
   });
 };
 
+var DataTableRowActions = function DataTableRowActions(_ref) {
+  var actions = _ref.actions,
+      columnIndex = _ref.columnIndex;
+
+  var _useDataTableContext = useDataTableContext(),
+      state = _useDataTableContext.state;
+
+  var kebabMenuItems = actions.filter(function (action) {
+    return action.showInKebab === undefined || action.showInKebab;
+  });
+  var sideActions = actions.filter(function (action) {
+    return action.showInKebab === false;
+  });
+  return React__default.createElement(DataTableCell, {
+    columnIndex: columnIndex
+  }, React__default.createElement("div", {
+    className: styles$e['actions'],
+    "data-testid": "data-table-dropdown-menu"
+  }, state === 'SKELETON_LOADING' && React__default.createElement(Skeleton, {
+    width: 96
+  }), sideActions.length > 0 && sideActions.map(function (action) {
+    return React__default.createElement(Button$1, Object.assign({
+      key: action.action,
+      onClick: action.onAction,
+      theme: typeof action.label === 'string' ? 'default' : 'link-icon'
+    }, action.showInKebab === false ? action.buttonProps : {}), action.label);
+  }), kebabMenuItems.length > 0 && React__default.createElement(KebabMenu, {
+    actions: kebabMenuItems
+  })));
+};
+
+var styles$H = {"data-table-editable-cell":"_qYNve","data-table-editable-cell--right-aligned":"_3w6bw","data-table-editable-cell--currency":"_2y-_5","data-table-editable-cell--invalid":"_1Mx8j","data-table-editable-cell--top-left":"_2BlhN","data-table-editable-cell--top-right":"_1qDoN","data-table-editable-cell--bottom-left":"_2NUlb","data-table-editable-cell--bottom-right":"_3Mm-v"};
+
+var DataTableEditableCellElement = function DataTableEditableCellElement(_ref, ref) {
+  var _columns$columnIndex, _controllers$error, _classnames, _classnames2;
+
+  var name = _ref.name,
+      columnIndex = _ref.columnIndex,
+      rowIndex = _ref.rowIndex,
+      inputId = _ref.id,
+      value = _ref.value,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      placeholder = _ref.placeholder,
+      disabled = _ref.disabled,
+      error = _ref.error,
+      prefix = _ref.prefix,
+      suffix = _ref.suffix,
+      defaultValue = _ref.defaultValue,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? 'text' : _ref$type,
+      testId = _ref.testId;
+
+  var _useDataTableContext = useDataTableContext(),
+      columns = _useDataTableContext.columns,
+      numberOfRows = _useDataTableContext.numberOfRows;
+
+  var column = (_columns$columnIndex = columns === null || columns === void 0 ? void 0 : columns[columnIndex]) != null ? _columns$columnIndex : null;
+  var isRightAligned = column ? column.isRightAligned : false;
+  var numberOfColumns = (columns === null || columns === void 0 ? void 0 : columns.length) || 0;
+  var isTopLeftCell = columnIndex === 0 && rowIndex === 0;
+  var isTopRightCell = columnIndex === numberOfColumns - 1 && rowIndex === 0;
+  var isBottomLeftCell = columnIndex === 0 && rowIndex === numberOfRows - 1;
+  var isBottomRightCell = columnIndex === numberOfColumns - 1 && rowIndex === numberOfRows - 1;
+  var controllers = useFieldControllers({
+    name: name,
+    id: inputId,
+    value: value,
+    onChange: onChange,
+    onBlur: onBlur,
+    error: error,
+    type: type
+  });
+  var hasError = !!controllers.error;
+  var errorMessage = (_controllers$error = controllers.error) === null || _controllers$error === void 0 ? void 0 : _controllers$error.toString();
+  var fieldProps = {
+    name: name,
+    id: controllers.id
+  };
+  var EditableCell = React__default.createElement("div", {
+    className: classnames((_classnames = {}, _classnames[styles$H['data-table-editable-cell--currency']] = type === 'currency', _classnames), styles$H['data-table-editable-cell']),
+    "data-testid": testId,
+    role: "cell"
+  }, React__default.createElement(Field, Object.assign({}, fieldProps), React__default.createElement(AffixContainer, {
+    prefix: prefix,
+    suffix: suffix
+  }, React__default.createElement("input", {
+    name: name,
+    id: controllers.id,
+    className: classnames((_classnames2 = {}, _classnames2[styles$H['data-table-editable-cell--right-aligned']] = isRightAligned, _classnames2[styles$H['data-table-editable-cell--top-left']] = isTopLeftCell, _classnames2[styles$H['data-table-editable-cell--top-right']] = isTopRightCell, _classnames2[styles$H['data-table-editable-cell--bottom-left']] = isBottomLeftCell, _classnames2[styles$H['data-table-editable-cell--bottom-right']] = isBottomRightCell, _classnames2[styles$H['data-table-editable-cell--invalid']] = hasError, _classnames2)),
+    type: type === 'currency' ? 'number' : 'text',
+    step: type === 'currency' ? 'any' : '',
+    "data-testid": testId && testId + "-text-field",
+    "aria-describedby": hasError ? controllers.id + "-error-message" : controllers.id + "-describer",
+    "aria-invalid": hasError,
+    disabled: disabled,
+    placeholder: placeholder,
+    defaultValue: defaultValue,
+    value: controllers.value,
+    onChange: controllers.onChange,
+    onBlur: controllers.onBlur,
+    ref: ref,
+    onWheel: function onWheel(e) {
+      e.target.blur();
+    }
+  }))));
+  return React__default.createElement(Tooltip$1, {
+    overlay: errorMessage,
+    placement: "top",
+    theme: "white"
+  }, EditableCell);
+};
+
+var DataTableEditableCell = React.forwardRef(DataTableEditableCellElement);
+
+var _excluded$2o = ["children", "onClick", "isSelected", "actions", "hasDefaultPadding", "hasDefaultCell", "testId"];
+
+var DataTableRowComponent = function DataTableRowComponent(_ref, ref) {
+  var _classnames;
+
+  var children = _ref.children,
+      onClick = _ref.onClick,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$actions = _ref.actions,
+      actions = _ref$actions === void 0 ? [] : _ref$actions,
+      _ref$hasDefaultCell = _ref.hasDefaultCell,
+      hasDefaultCell = _ref$hasDefaultCell === void 0 ? true : _ref$hasDefaultCell,
+      testId = _ref.testId,
+      nativeDivProps = _objectWithoutPropertiesLoose(_ref, _excluded$2o);
+
+  var _useDataTableContext = useDataTableContext(),
+      showActionMenu = _useDataTableContext.showActionMenu;
+
+  var styleNames = classnames(styles$d['item'], (_classnames = {}, _classnames[styles$d['clickable']] = onClick, _classnames[styles$d['selected']] = isSelected, _classnames));
+
+  var renderColumn = function renderColumn(columnElement, index) {
+    var isUsingDataTableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement === null || columnElement === void 0 ? void 0 : columnElement.type) === DataTableCell;
+
+    if (isUsingDataTableCell || !hasDefaultCell) {
+      return columnElement;
+    }
+
+    var isUsingDataTableEditableCell = columnElement && typeof columnElement === 'object' && 'type' in columnElement && (columnElement === null || columnElement === void 0 ? void 0 : columnElement.type) === DataTableEditableCell;
+    return React__default.createElement(DataTableCell, {
+      key: index,
+      columnIndex: index,
+      noPadding: !!isUsingDataTableEditableCell
+    }, columnElement);
+  };
+
+  return React__default.createElement("tr", Object.assign({}, nativeDivProps, {
+    className: styleNames,
+    onClick: onClick ? onClick : undefined,
+    onKeyPress: onClick ? onClick : undefined,
+    "data-testid": testId && testId + "-row",
+    role: "row",
+    ref: ref
+  }), React__default.Children.toArray(children).filter(Boolean).map(function (child, index) {
+    return renderColumn(child, index);
+  }), showActionMenu && React__default.createElement(DataTableRowActions, {
+    actions: actions,
+    columnIndex: React__default.Children.count(children)
+  }));
+};
+
+var DataTableRow = React.forwardRef(DataTableRowComponent);
+
+var DataTableDefaultItemComponent = function DataTableDefaultItemComponent(_ref) {
+  var columns = _ref.columns,
+      item = _ref.item,
+      testId = _ref.testId;
+  var headingKeys = columns ? columns.map(function (column) {
+    return column.name;
+  }) : Object.keys(item);
+  var columnsToShow = headingKeys.filter(function (key) {
+    return key !== 'actions';
+  });
+  return React__default.createElement(DataTableRow, {
+    actions: item.actions,
+    testId: testId
+  }, columnsToShow.map(function (headingKey) {
+    return React__default.createElement("div", {
+      key: headingKey
+    }, item[headingKey] || '');
+  }));
+};
+
 var DataTable = function DataTable(_ref) {
   var _classNames, _classNames2, _classNames3;
 
@@ -7210,14 +7216,14 @@ var DataTable = function DataTable(_ref) {
     state = 'CONTENT';
   }
 
-  var skeletonRows = Array.from(Array(5).keys());
+  var skeletonRows = Array.from(Array(10).keys());
   return React__default.createElement(Context.Provider, {
     value: {
       columns: columns,
       showActionMenu: showActionMenu,
       numberOfRows: numberOfRows,
       hasVerticalBorders: hasVerticalBorders,
-      isLoadingOnBackground: state === 'BACKGROUND_LOADING'
+      state: state
     }
   }, React__default.createElement("div", {
     className: classnames(styles$a['data-table'])