@carbon/ibm-products 2.15.1 → 2.16.0

package/es/components/InlineTip/InlineTip.js

@@ -0,0 +1,217 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "action", "title", "media"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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, { useEffect, useMemo, useRef, useState } from 'react';
+
+// Other standard imports.
+import { Close, Crossroads, Idea } from '@carbon/react/icons';
+import { Button, IconButton } from '@carbon/react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getComponentText } from './utils';
+import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import uuidv4 from '../../global/js/utils/uuidv4';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--inline-tip");
+var componentName = 'InlineTip';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values for props
+var defaults = {
+  closeIconDescription: 'Close',
+  collapsible: false,
+  collapseButtonLabel: 'Read less',
+  expandButtonLabel: 'Read more',
+  narrow: false,
+  onClick: function onClick() {},
+  onClose: function onClose() {}
+};
+
+/**
+ * Inline tips are messages embedded within other components that
+ * provide an ambient way to deliver learning content without
+ * distracting the user from their flow.
+ */
+export var InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    _ref$closeIconDescrip = _ref.closeIconDescription,
+    closeIconDescription = _ref$closeIconDescrip === void 0 ? defaults.closeIconDescription : _ref$closeIconDescrip,
+    _ref$collapsible = _ref.collapsible,
+    collapsible = _ref$collapsible === void 0 ? defaults.collapsible : _ref$collapsible,
+    _ref$collapseButtonLa = _ref.collapseButtonLabel,
+    collapseButtonLabel = _ref$collapseButtonLa === void 0 ? defaults.collapseButtonLabel : _ref$collapseButtonLa,
+    _ref$expandButtonLabe = _ref.expandButtonLabel,
+    expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
+    _ref$narrow = _ref.narrow,
+    narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
+    onClick = _ref.onClick,
+    onClose = _ref.onClose,
+    tertiaryButtonLabel = _ref.tertiaryButtonLabel,
+    action = _ref.action,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? defaults.title : _ref$title,
+    media = _ref.media,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(collapsible),
+    _useState2 = _slicedToArray(_useState, 2),
+    isCollapsed = _useState2[0],
+    setIsCollapsed = _useState2[1];
+  var labelId = useRef(uuidv4()).current;
+  var previewText = useMemo(function () {
+    return getComponentText(React.Children.toArray(children));
+  }, [children]);
+  var childrenToRender = children;
+  if (!media && collapsible && isCollapsed) {
+    childrenToRender = /*#__PURE__*/React.createElement("p", {
+      className: "".concat(blockClass, "__preview-text")
+    }, previewText);
+  }
+
+  // If `collapsible` is changed after initial render...
+  useEffect(function () {
+    setIsCollapsed(collapsible);
+  }, [collapsible]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    "aria-labelledby": labelId,
+    className: cx(blockClass, className, [collapsible ? "".concat(blockClass, "__collapsible") : null], [isCollapsed ? "".concat(blockClass, "__collapsible-collapsed") : null], [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], [media ? "".concat(blockClass, "__has-media") : null]),
+    ref: ref,
+    role: "complementary"
+  }, getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__close-icon-wrapper")
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    className: "".concat(blockClass, "__close-icon"),
+    kind: "ghost",
+    label: closeIconDescription,
+    onClick: onClose,
+    size: "lg"
+  }, /*#__PURE__*/React.createElement(Close, {
+    size: 16
+  }))), (!media && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__icon-idea"),
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Idea, {
+    size: 16
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__content")
+  }, /*#__PURE__*/React.createElement("h6", {
+    id: labelId,
+    className: "".concat(blockClass, "__title")
+  }, title), /*#__PURE__*/React.createElement("section", {
+    className: "".concat(blockClass, "__body")
+  }, childrenToRender, action && (!collapsible || collapsible && !isCollapsed) && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__secondary-btn")
+  }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/React.createElement("footer", {
+    className: "".concat(blockClass, "__footer")
+  }, collapsible && !media && /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(blockClass, "__toggle-btn"),
+    kind: "ghost",
+    size: "md",
+    onClick: function onClick() {
+      setIsCollapsed(function (prevState) {
+        return !prevState;
+      });
+    }
+  }, isCollapsed ? expandButtonLabel : collapseButtonLabel), tertiaryButtonLabel && /*#__PURE__*/React.createElement(Button, {
+    className: "".concat(blockClass, "__close-btn"),
+    size: "md",
+    onClick: onClick,
+    kind: "tertiary",
+    renderIcon: function renderIcon() {
+      return /*#__PURE__*/React.createElement(Crossroads, {
+        size: 16
+      });
+    }
+  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, media.render()) : /*#__PURE__*/React.createElement(SteppedAnimatedMedia, {
+    className: "".concat(blockClass, "__media"),
+    filePaths: media.filePaths
+  })));
+});
+InlineTip = pkg.checkComponentEnabled(InlineTip, componentName);
+InlineTip.displayName = componentName;
+InlineTip.propTypes = {
+  /**
+   * Optional "call to action" ghost button or link that can appear
+   * directly below the content. This component comes with pre-styled
+   * elements available to use: `InlineTipLink` and `InlineTipButton`.
+   */
+  action: PropTypes.node,
+  /**
+   * Provide the contents of the InlineTip.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string,
+  /**
+   * Tooltip text and aria label for the Close button icon.
+   */
+  closeIconDescription: PropTypes.string,
+  /**
+   * The label for the collapse button.
+   * This button is not visible if `media` is specified.
+   */
+  collapseButtonLabel: PropTypes.string,
+  /**
+   * If set to `true`, it will truncate the body text to
+   * one line and expose an expand/collapse button toggle.
+   *
+   * This feature is disabled if `media` is specified.
+   */
+  collapsible: PropTypes.bool,
+  /**
+   * The label for the expand button.
+   * This button is not visible if `media` is specified.
+   */
+  expandButtonLabel: PropTypes.string,
+  /**
+   * The object describing an image in one of two shapes.
+   * - If a single media element is required, use `{render}`.
+   * - If a stepped animation is required, use `{filePaths}`.
+   *
+   * Enabling `media` disables the `collapsible` feature.
+   */
+  media: PropTypes.oneOfType([PropTypes.shape({
+    render: PropTypes.func
+  }), PropTypes.shape({
+    filePaths: PropTypes.string
+  })]),
+  /**
+   * Set to `true` to arrange the information in a format
+   * that is easier to read in a limited space.
+   */
+  narrow: PropTypes.bool,
+  /**
+   * Function to call when the tertiary button is clicked.
+   */
+  onClick: PropTypes.func,
+  /**
+   * Function to call when the InlineTip is closed via the "X" button.
+   */
+  onClose: PropTypes.func,
+  /**
+   * Defining the label will show a the tertiary button with the crossroads icon.
+   * You will still need to define the `onClose` method to trigger a callback.
+   */
+  tertiaryButtonLabel: PropTypes.string,
+  /**
+   * The title of the InlineTip.
+   */
+  title: PropTypes.string.isRequired
+};

package/es/components/InlineTip/InlineTipButton.js

@@ -0,0 +1,53 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Button } from '@carbon/react';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--inline-tip__button");
+var componentName = 'InlineTipButton';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * This is a standard Carbon button, styled specifically for use inside InlineTip.
+ */
+export var InlineTipButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, getDevtoolsProps(componentName), {
+    size: "md",
+    kind: "ghost"
+  }), children);
+});
+InlineTipButton.propTypes = {
+  /**
+   * Provide the contents of the InlineTipButton.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string
+
+  /* TODO: add types and DocGen for all props. */
+};

package/es/components/InlineTip/InlineTipLink.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className"];
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 from 'react';
+
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { Launch } from '@carbon/react/icons';
+import { Link } from '@carbon/react';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--inline-tip__link");
+var componentName = 'InlineTipLink';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+/**
+ * This is a standard Carbon link, styled specifically for use inside InlineTip.
+ */
+export var InlineTipLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
+    className: cx(blockClass, className),
+    ref: ref
+  }, getDevtoolsProps(componentName), {
+    renderIcon: function renderIcon() {
+      return /*#__PURE__*/React.createElement(Launch, {
+        size: 16
+      });
+    }
+  }), children);
+});
+InlineTipLink.propTypes = {
+  /**
+   * Provide the contents of the InlineTipLink.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: PropTypes.string
+
+  /* TODO: add types and DocGen for all props. */
+};

package/es/components/InlineTip/index.js

@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 { InlineTip } from './InlineTip';
+export { InlineTipButton } from './InlineTipButton';
+export { InlineTipLink } from './InlineTipLink';

package/es/components/InlineTip/utils.js

@@ -0,0 +1,36 @@
+import _typeof from "@babel/runtime/helpers/typeof";
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 var getComponentText = function getComponentText(reactNode) {
+  var _reactNode$props;
+  var tmpChildren = (reactNode === null || reactNode === void 0 || (_reactNode$props = reactNode.props) === null || _reactNode$props === void 0 ? void 0 : _reactNode$props.children) || undefined;
+  if (Array.isArray(reactNode)) {
+    var joinedNodes = [];
+    reactNode.forEach(function (node) {
+      if (_typeof(node) === 'object') {
+        joinedNodes.push(getComponentText(node));
+      } else if (typeof node === 'string') {
+        joinedNodes.push(node);
+      }
+    });
+    return joinedNodes.join(' ');
+  }
+  if (tmpChildren === undefined) {
+    if (typeof reactNode === 'string') {
+      return reactNode;
+    } else {
+      return ' ';
+    }
+  }
+  if (_typeof(tmpChildren) === 'object') {
+    return getComponentText(reactNode.props.children);
+  }
+  if (typeof tmpChildren === 'string') {
+    return reactNode.props.children;
+  }
+};

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.docs-page.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
+import * as stories from './SteppedAnimatedMedia.stories';
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/React.createElement(StoryDocsPage, {
+    blocks: [{
+      story: stories.steppedAnimatedMedia
+    }]
+  });
+};
+export default DocsPage;

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "playStep", "filePaths"];
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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, { useEffect, useRef, useState } from 'react';
+import lottie from 'lottie-web';
+import clamp from 'lodash/clamp';
+// Other standard imports.
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(pkg.prefix, "--stepped-animated-media");
+var componentName = 'SteppedAnimatedMedia';
+
+// NOTE: the component SCSS is not imported here: it is rolled up separately.
+
+// Default values for props
+var defaults = {
+  playStep: 0
+};
+
+/**
+ * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
+ */
+export var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    _ref$playStep = _ref.playStep,
+    playStep = _ref$playStep === void 0 ? defaults.playStep : _ref$playStep,
+    filePaths = _ref.filePaths,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    jsonData = _useState2[0],
+    setJsonData = _useState2[1];
+  var animRef = useRef();
+  var backupRef = useRef();
+  var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
+  // load animation source
+  useEffect(function () {
+    var isJsonFile = function isJsonFile(filePath) {
+      return filePath.includes('.json');
+    };
+    function loadArtifact() {
+      return _loadArtifact.apply(this, arguments);
+    }
+    function _loadArtifact() {
+      _loadArtifact = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        var allJsonArtifacts, rawResponse, jsonResponse, fileData;
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              if (!(filePaths && filePaths.every(isJsonFile))) {
+                _context.next = 10;
+                break;
+              }
+              allJsonArtifacts = filePaths.map(function (el) {
+                return fetch(el);
+              });
+              _context.next = 4;
+              return Promise.all(allJsonArtifacts);
+            case 4:
+              rawResponse = _context.sent;
+              jsonResponse = rawResponse.map(function (el) {
+                return el.json();
+              });
+              _context.next = 8;
+              return Promise.all(jsonResponse);
+            case 8:
+              fileData = _context.sent;
+              setJsonData(fileData);
+            case 10:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return _loadArtifact.apply(this, arguments);
+    }
+    loadArtifact();
+  }, [filePaths]);
+  useEffect(function () {
+    var _window;
+    var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;
+    if (localRef.current) {
+      var _animRef$current, _animRef$current2, _animRef$current3;
+      (_animRef$current = animRef.current) === null || _animRef$current === void 0 || _animRef$current.destroy();
+      animRef.current = lottie.loadAnimation({
+        container: localRef.current,
+        renderer: 'svg',
+        animationData: jsonData[clamp(playStep, 0, jsonData.length - 1)],
+        loop: false,
+        autoplay: false,
+        rendererSettings: {
+          preserveAspectRatio: 'xMidYMid slice'
+        }
+      });
+      prefersReducedMotion ? (_animRef$current2 = animRef.current) === null || _animRef$current2 === void 0 ? void 0 : _animRef$current2.goToAndStop(0) : (_animRef$current3 = animRef.current) === null || _animRef$current3 === void 0 ? void 0 : _animRef$current3.goToAndPlay(0);
+    }
+    return function () {
+      var _animRef$current4;
+      return (_animRef$current4 = animRef.current) === null || _animRef$current4 === void 0 ? void 0 : _animRef$current4.destroy();
+    };
+  }, [jsonData, localRef, playStep]);
+  if (!jsonData) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, className),
+    role: "img",
+    ref: localRef
+  }, getDevtoolsProps(componentName)));
+});
+SteppedAnimatedMedia.displayName = componentName;
+SteppedAnimatedMedia.propTypes = {
+  /**
+   * Optional class name for this component.
+   */
+  className: PropTypes.string,
+  /**
+   * The file path(s) to json formatted Lottie animation files.
+   */
+  filePaths: PropTypes.arrayOf(PropTypes.string).isRequired,
+  /**
+   * Which animation step from the filePaths array to play.
+   */
+  playStep: PropTypes.number
+};

package/es/components/SteppedAnimatedMedia/assets/index.js

@@ -0,0 +1,4 @@
+var HowACaseIsCreated1 = new URL('./illustrations/how-a-case-is-created-1', import.meta.url).pathname;
+var HowACaseIsCreated2 = new URL('./illustrations/how-a-case-is-created-2', import.meta.url).pathname;
+var HowACaseIsCreated3 = new URL('./illustrations/how-a-case-is-created-3', import.meta.url).pathname;
+export { HowACaseIsCreated1, HowACaseIsCreated2, HowACaseIsCreated3 };

package/es/components/SteppedAnimatedMedia/index.js

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * 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 { SteppedAnimatedMedia } from './SteppedAnimatedMedia';

package/es/global/js/package-settings.js

@@ -72,7 +72,8 @@ var defaults = {
     /* new component flags here - comment used by generate CLI */
 
     // Novice to pro components not yet reviewed and released:
-    Checklist: false
+    Checklist: false,
+    InlineTip: false
   },
   // feature level flags
   feature: {

package/lib/components/Datagrid/Datagrid/DatagridContent.js

@@ -39,7 +39,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var gcClass = "".concat(blockClass, "__grid-container");
 var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
-  var _cx4;
+  var _cx5;
   var datagridState = _ref.datagridState,
     title = _ref.title;
   var _useContext = (0, _react.useContext)(_InlineEditContext.InlineEditContext),
@@ -52,8 +52,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   var activeCellId = inlineEditState.activeCellId,
     gridActive = inlineEditState.gridActive,
     editId = inlineEditState.editId;
-  var _datagridState$getTab = datagridState.getTableProps,
-    getTableProps = _datagridState$getTab === void 0 ? function () {} : _datagridState$getTab,
+  var getTableProps = datagridState.getTableProps,
     getFilterFlyoutProps = datagridState.getFilterFlyoutProps,
     withVirtualScroll = datagridState.withVirtualScroll,
     DatagridPagination = datagridState.DatagridPagination,
@@ -76,6 +75,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
     state = datagridState.state,
     page = datagridState.page,
     rows = datagridState.rows;
+  var columnResizing = state.columnResizing;
   var contentRows = DatagridPagination && page || rows;
   var gridAreaRef = (0, _react.useRef)();
   var multiKeyTrackingRef = (0, _react.useRef)();
@@ -97,10 +97,11 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   var renderTable = function renderTable() {
     var _getTableProps;
     return /*#__PURE__*/_react.default.createElement(_react2.Table, (0, _extends2.default)({}, getTableProps(), {
-      className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
+      className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
       role: withInlineEdit ? 'grid' : undefined,
       tabIndex: withInlineEdit ? 0 : -1,
-      onKeyDown: withInlineEdit ? function (event) {
+      onKeyDown: /* istanbul ignore next */
+      withInlineEdit && function (event) {
         return (0, _handleGridKeyPress.handleGridKeyPress)({
           event: event,
           dispatch: dispatch,
@@ -109,10 +110,10 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
           state: inlineEditState,
           usingMac: usingMac
         });
-      } : null,
-      onFocus: withInlineEdit ? function () {
+      },
+      onFocus: withInlineEdit && function () {
         return (0, _handleGridFocus.handleGridFocus)(inlineEditState, dispatch);
-      } : null,
+      },
       title: title
     }), !withVirtualScroll && /*#__PURE__*/_react.default.createElement(_DatagridHead.default, datagridState), /*#__PURE__*/_react.default.createElement(_DatagridBody.default, (0, _extends2.default)({}, datagridState, {
       rows: contentRows
@@ -141,6 +142,8 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
   (0, _hooks3.useSubscribeToEventEmitter)(_constants.CLEAR_SINGLE_FILTER, function (id) {
     return (0, _FilterProvider.clearSingleFilter)(id, setAllFilters, state);
   });
+
+  /* istanbul ignore next */
   var renderFilterSummary = function renderFilterSummary() {
     return state.filters.length > 0 && /*#__PURE__*/_react.default.createElement(_FilterSummary.FilterSummary, {
       className: "".concat(blockClass, "__filter-summary"),
@@ -153,7 +156,7 @@ var DatagridContent = exports.DatagridContent = function DatagridContent(_ref) {
     });
   };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.TableContainer, {
-    className: (0, _classnames.default)("".concat(gcClass), (_cx4 = {}, (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-active"), gridActive), (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), (0, _defineProperty2.default)(_cx4, "".concat(gcClass, "-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__with-pagination"), DatagridPagination), (0, _defineProperty2.default)(_cx4, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx4)),
+    className: (0, _classnames.default)("".concat(gcClass), (_cx5 = {}, (0, _defineProperty2.default)(_cx5, "".concat(gcClass, "-active"), gridActive), (0, _defineProperty2.default)(_cx5, "".concat(gcClass, "-active--without-toolbar"), withInlineEdit && !DatagridActions), (0, _defineProperty2.default)(_cx5, "".concat(gcClass, "-inline-edit"), withInlineEdit), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__full-height"), withVirtualScroll || fullHeightDatagrid), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__with-pagination"), DatagridPagination), (0, _defineProperty2.default)(_cx5, "".concat(blockClass, "__dense-header"), useDenseHeader), _cx5)),
     title: gridTitle,
     description: gridDescription
   }, /*#__PURE__*/_react.default.createElement(_DatagridToolbar.default, datagridState), /*#__PURE__*/_react.default.createElement("div", {

package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -20,10 +20,10 @@ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentComponent) {
   return function (datagridState) {
     var row = datagridState.row;
-    var _ref = row || {},
-      expandedContentHeight = _ref.expandedContentHeight;
+    var expandedContentHeight = row.expandedContentHeight;
     var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
       var _event$target;
+      /* istanbul ignore else */
       if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && (_event$target = _event$target.parentNode) !== null && _event$target !== void 0 && _event$target.previousElementSibling) {
         var parentNode = event.target.parentNode.previousElementSibling;
         if (eventType === 'enter') {
@@ -44,9 +44,9 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
     }, /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(blockClass, "__expanded-row-content"),
       style: {
-        height: expandedContentHeight ? expandedContentHeight : null
+        height: expandedContentHeight && expandedContentHeight
       }
-    }, ExpandedRowContentComponent(datagridState)));
+    }, /*#__PURE__*/_react.default.createElement(ExpandedRowContentComponent, datagridState)));
   };
 };
 var _default = exports.default = DatagridExpandedRow;