@carbon/ibm-products 1.61.0 → 1.61.1

package/es/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -8,14 +8,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * LICENSE file in the root directory of this source tree.
  */
 
-// @flow
 import React, { useState, useEffect } from 'react';
 import cx from 'classnames';
 import { DataTable } from 'carbon-components-react';
 import { px } from '@carbon/layout';
 import { selectionColumnId } from '../common-column-ids';
 import { pkg } from '../../../settings';
-import { handleColumnResizeEndEvent, handleColumnResizeStartEvent, handleColumnResizingEvent } from './addons/stateReducer';
+import { handleColumnResizeEndEvent, handleColumnResizingEvent } from './addons/stateReducer';
 import { getNodeTextContent } from '../../../global/js/utils/getNodeTextContent';
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
@@ -58,38 +57,6 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var _useState = useState(2),
     _useState2 = _slicedToArray(_useState, 1),
     incrementAmount = _useState2[0];
-  var getClientXPosition = function getClientXPosition(event) {
-    var isTouchEvent = false;
-    if (event.type === 'touchstart') {
-      // Do not respond to multiple touches (e.g. 2 or 3 fingers)
-      if (event.touches && event.touches.length > 1) {
-        return;
-      }
-      isTouchEvent = true;
-    }
-    var clientX = isTouchEvent ? Math.round(event.touches[0].clientX) : event.clientX;
-    var closestHeader = event.target.closest('th');
-    var closestHeaderCoords = closestHeader.getBoundingClientRect();
-    var headerOffset = closestHeaderCoords.left;
-    var offsetValue = clientX - headerOffset;
-    return offsetValue;
-  };
-  useEffect(function () {
-    var isResizing = datagridState.state.isResizing;
-    if (isResizing) {
-      var onColResizeEnd = datagridState.onColResizeEnd;
-      document.addEventListener('mouseup', function () {
-        handleColumnResizeEndEvent(datagridState.dispatch, onColResizeEnd, isResizing);
-        document.activeElement.blur();
-      });
-    }
-    return function () {
-      document.removeEventListener('mouseup', function () {
-        return handleColumnResizeEndEvent(datagridState.dispatch);
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datagridState.state.isResizing]);
   return /*#__PURE__*/React.createElement(TableRow, _extends({}, headerGroup.getHeaderGroupProps({
     role: false
   }), {
@@ -112,32 +79,21 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       state = datagridState.state,
       dispatch = datagridState.dispatch,
       onColResizeEnd = datagridState.onColResizeEnd;
-    var columnResizing = state.columnResizing,
-      isResizing = state.isResizing;
+    var columnResizing = state.columnResizing;
     var columnWidths = columnResizing.columnWidths;
     var originalCol = visibleColumns[index];
     return /*#__PURE__*/React.createElement(TableHeader, _extends({}, header.getHeaderProps({
       role: false
     }), {
-      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
-      key: header.id
+      className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), _defineProperty(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), _defineProperty(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), _defineProperty(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
+      key: header.id,
+      "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({}, header.getResizerProps(), {
-      onMouseMove: function onMouseMove(event) {
-        if (isResizing) {
-          var newWidth = getClientXPosition(event);
-          // Sets a min width for resizing so at least one character from the column header is visible
-          if (newWidth >= 50) {
-            handleColumnResizingEvent(dispatch, header, newWidth);
-          }
-        }
-      },
-      onMouseDown: function onMouseDown() {
-        return handleColumnResizeStartEvent(dispatch, header.id);
-      },
       onKeyDown: function onKeyDown(event) {
         var key = event.key;
         if (key === 'ArrowLeft' || key === 'ArrowRight') {
-          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < 90 ? 90 : originalCol.width);
+          var originalColMinWidth = originalCol.minWidth || 90;
+          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < originalColMinWidth ? originalColMinWidth : originalCol.width);
           if (key === 'ArrowLeft') {
             if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
               var newWidth = currentColumnWidth - incrementAmount;
@@ -151,7 +107,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
         }
       },
       onKeyUp: function onKeyUp() {
-        return handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id);
+        return handleColumnResizeEndEvent(dispatch, onColResizeEnd, header.id, true);
       },
       className: cx("".concat(blockClass, "__col-resizer-range")),
       type: "range",

package/es/components/Datagrid/Datagrid/addons/stateReducer.js

@@ -1,3 +1,4 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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; }
@@ -9,24 +10,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * LICENSE file in the root directory of this source tree.
  */
 
+import { pkg } from '../../../../settings';
 var COLUMN_RESIZE_START = 'columnStartResizing';
 var COLUMN_RESIZING = 'columnResizing';
 var COLUMN_RESIZE_END = 'columnDoneResizing';
 var INIT = 'init';
-export var handleColumnResizeStartEvent = function handleColumnResizeStartEvent(dispatch, headerId) {
-  dispatch({
-    type: COLUMN_RESIZE_START,
-    payload: {
-      headerId: headerId
-    }
-  });
-};
-export var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId) {
+var blockClass = "".concat(pkg.prefix, "--datagrid");
+export var handleColumnResizeEndEvent = function handleColumnResizeEndEvent(dispatch, onColResizeEnd, headerId, isKeyEvent) {
   dispatch({
     type: COLUMN_RESIZE_END,
     payload: {
       onColResizeEnd: onColResizeEnd,
-      headerId: headerId
+      headerId: headerId,
+      isKeyEvent: isKeyEvent
     }
   });
 };
@@ -60,42 +56,45 @@ export var stateReducer = function stateReducer(newState, action) {
       }
     case COLUMN_RESIZE_START:
       {
-        var headerId = action.payload.headerId;
+        var _ref = action.payload || {},
+          headerId = _ref.headerId;
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: headerId
         });
       }
     case COLUMN_RESIZING:
       {
-        var _ref = action.payload || {},
-          _headerId = _ref.headerId,
-          newWidth = _ref.newWidth,
-          defaultWidth = _ref.defaultWidth;
+        var _ref2 = action.payload || {},
+          _headerId = _ref2.headerId,
+          newWidth = _ref2.newWidth,
+          defaultWidth = _ref2.defaultWidth;
         var newColumnWidth = {};
         if (typeof _headerId === 'undefined') {
           return _objectSpread({}, newState);
         }
         newColumnWidth[_headerId] = newWidth;
-        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref2) {
-          var _ref3 = _slicedToArray(_ref2, 2),
-            _ = _ref3[0],
-            value = _ref3[1];
+        var cleanedWidths = Object.fromEntries(Object.entries(newState.columnResizing.columnWidths).filter(function (_ref3) {
+          var _ref4 = _slicedToArray(_ref3, 2),
+            _ = _ref4[0],
+            value = _ref4[1];
           return !isNaN(value);
         }));
+        var headerIdArray = newState.columnResizing.headerIdWidths || [];
         return _objectSpread(_objectSpread({}, newState), {}, {
           isResizing: _headerId,
           columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
             columnWidth: defaultWidth,
             columnWidths: _objectSpread(_objectSpread({}, cleanedWidths), newColumnWidth),
-            headerIdWidths: [_headerId, newWidth]
+            headerIdWidths: [].concat(_toConsumableArray(headerIdArray), [[_headerId, newWidth]])
           })
         });
       }
     case COLUMN_RESIZE_END:
       {
-        var _action$payload = action.payload,
-          onColResizeEnd = _action$payload.onColResizeEnd,
-          _headerId2 = _action$payload.headerId;
+        var _ref5 = action.payload || {},
+          onColResizeEnd = _ref5.onColResizeEnd,
+          _headerId2 = _ref5.headerId,
+          isKeyEvent = _ref5.isKeyEvent;
         var currentColumn = {};
         currentColumn[_headerId2] = newState.columnResizing.columnWidths[_headerId2];
         var allChangedColumns = newState.columnResizing.columnWidths;
@@ -103,8 +102,22 @@ export var stateReducer = function stateReducer(newState, action) {
         if (isResizing) {
           onColResizeEnd === null || onColResizeEnd === void 0 ? void 0 : onColResizeEnd(currentColumn, allChangedColumns);
         }
+        if (!isKeyEvent) {
+          if (typeof isKeyEvent === 'undefined') {
+            // Blur resizer input if it has focus and is not from a key event resize
+            if (document.activeElement.classList.contains("".concat(blockClass, "__col-resizer-range"))) {
+              var _document, _document$activeEleme;
+              (_document = document) === null || _document === void 0 ? void 0 : (_document$activeEleme = _document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : _document$activeEleme.blur();
+            }
+            return;
+          }
+        }
         return _objectSpread(_objectSpread({}, newState), {}, {
-          isResizing: false
+          isResizing: false,
+          columnResizing: _objectSpread(_objectSpread({}, newState.columnResizing), {}, {
+            isResizingColumn: false,
+            startX: null
+          })
         });
       }
   }

package/es/components/Datagrid/useColumnCenterAlign.js

@@ -2,13 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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; }
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 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 React from 'react';
 import cx from 'classnames';
 import { pkg } from '../../settings';

package/es/components/Datagrid/useColumnRightAlign.js

@@ -2,13 +2,13 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 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; }
-/*
- * Licensed Materials - Property of IBM
- * 5724-Q36
- * (c) Copyright IBM Corp. 2020
- * US Government Users Restricted Rights - Use, duplication or disclosure
- * restricted by GSA ADP Schedule Contract with IBM Corp.
+/**
+ * Copyright IBM Corp. 2020, 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 React from 'react';
 import cx from 'classnames';
 import { pkg } from '../../settings';

package/es/components/Datagrid/useNestedRowExpander.js

@@ -1,6 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
 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; }
 /* eslint-disable react/prop-types */
 /**
  * Copyright IBM Corp. 2020, 2023
@@ -25,6 +27,13 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
       Cell: function Cell(_ref) {
         var _cx;
         var row = _ref.row;
+        var expanderButtonProps = _objectSpread(_objectSpread({}, row.getToggleRowExpandedProps()), {}, {
+          onClick: function onClick(event) {
+            // Prevents `onRowClick` from being called if `useOnRowClick` is included
+            event.stopPropagation();
+            row.toggleRowExpanded();
+          }
+        });
         var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
           _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
           expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
@@ -35,7 +44,7 @@ var useNestedRowExpander = function useNestedRowExpander(hooks) {
           type: "button",
           "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, row.getToggleRowExpandedProps(), {
+        }, expanderButtonProps, {
           title: expanderTitle
         }), /*#__PURE__*/React.createElement(ChevronRight16, {
           className: cx("".concat(blockClass, "__expander-icon"), "".concat(blockClass, "__row-expander--icon"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__expander-icon--not-open"), !row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__expander-icon--open"), row.isExpanded), _cx))

package/es/components/Datagrid/useRowExpander.js

@@ -1,5 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _extends from "@babel/runtime/helpers/extends";
+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; }
 /* eslint-disable react/prop-types */
 /**
  * Copyright IBM Corp. 2020, 2023
@@ -23,6 +26,13 @@ var useRowExpander = function useRowExpander(hooks) {
       id: 'expander',
       Cell: function Cell(_ref) {
         var row = _ref.row;
+        var expanderButtonProps = _objectSpread(_objectSpread({}, row.getToggleRowExpandedProps()), {}, {
+          onClick: function onClick(event) {
+            // Prevents `onRowClick` from being called if `useOnRowClick` is included
+            event.stopPropagation();
+            row.toggleRowExpanded();
+          }
+        });
         var _ref2 = (tempState === null || tempState === void 0 ? void 0 : tempState.current) || {},
           _ref2$expanderButtonT = _ref2.expanderButtonTitleExpanded,
           expanderButtonTitleExpanded = _ref2$expanderButtonT === void 0 ? 'Collapse row' : _ref2$expanderButtonT,
@@ -33,7 +43,7 @@ var useRowExpander = function useRowExpander(hooks) {
           type: "button",
           "aria-label": expanderTitle,
           className: cx("".concat(blockClass, "__row-expander"), "".concat(carbon.prefix, "--btn"), "".concat(carbon.prefix, "--btn--ghost"))
-        }, row.getToggleRowExpandedProps(), {
+        }, expanderButtonProps, {
           title: expanderTitle
         }), row.isExpanded ? /*#__PURE__*/React.createElement(ChevronUp16, {
           className: "".concat(blockClass, "__row-expander--icon")

package/es/components/Datagrid/useSortableColumns.js

@@ -108,7 +108,7 @@ var useSortableColumns = function useSortableColumns(hooks) {
       };
       return _objectSpread(_objectSpread({}, column), {}, {
         Header: Header,
-        minWidth: column.disableSortBy === true ? 0 : 90
+        minWidth: column.disableSortBy === true ? 0 : column.minWidth ? column.minWidth : 90
       });
     });
     return (_instance$customizeCo = instance.customizeColumnsProps) !== null && _instance$customizeCo !== void 0 && _instance$customizeCo.isTearsheetOpen ? visibleColumns : _toConsumableArray(sortableColumns);

package/es/components/Guidebanner/Guidebanner.js

@@ -176,12 +176,12 @@ Guidebanner.propTypes = {
       error = new Error('`Guidebanner` requires one or more children of type `GuidebannerElement`.');
     }
     React.Children.forEach(prop, function (child) {
-      if (child.type.name !== 'GuidebannerElement') {
-        var _child$type;
+      if (child.type.displayName !== 'GuidebannerElement') {
+        var _child$type, _child$type2;
         // If not GuidebannerElement, then show:
         // React component name(child.type?.name) or
         // HTML element name(child.type).
-        error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.name) || child.type, "` instead."));
+        error = new Error("`Guidebanner` only accepts children of type `GuidebannerElement`, found `".concat(((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) || ((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.name) || child.type, "` instead."));
       }
     });
     return error;

package/es/components/Guidebanner/GuidebannerElement.js

@@ -28,7 +28,7 @@ var componentName = 'GuidebannerElement';
  * The GuidebannerElement is a required child component of the Guidebanner,
  * and acts as a container for a CarouselItem.
  */
-var GuidebannerElement = function GuidebannerElement(_ref) {
+export var GuidebannerElement = function GuidebannerElement(_ref) {
   var button = _ref.button,
     className = _ref.className,
     description = _ref.description,
@@ -45,6 +45,13 @@ var GuidebannerElement = function GuidebannerElement(_ref) {
   }, button));
 };
 
+// Return a placeholder if not released and not enabled by feature flag
+GuidebannerElement = pkg.checkComponentEnabled(GuidebannerElement, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+GuidebannerElement.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.
@@ -67,5 +74,4 @@ GuidebannerElement.propTypes = {
    * The title of the element.
    */
   title: PropTypes.string
-};
-export { GuidebannerElement };
+};

package/es/components/Guidebanner/GuidebannerElementButton.js

@@ -29,7 +29,7 @@ var componentName = 'GuidebannerElementButton';
 /**
  * One of two buttons styled specifically for the GuidebannerElement.
  */
-var GuidebannerElementButton = function GuidebannerElementButton(_ref) {
+export var GuidebannerElementButton = function GuidebannerElementButton(_ref) {
   var children = _ref.children,
     className = _ref.className,
     type = _ref.type,
@@ -52,6 +52,13 @@ var GuidebannerElementButton = function GuidebannerElementButton(_ref) {
   }, getDevtoolsProps(componentName)), children);
 };
 
+// Return a placeholder if not released and not enabled by feature flag
+GuidebannerElementButton = pkg.checkComponentEnabled(GuidebannerElementButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+GuidebannerElementButton.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.
@@ -71,6 +78,4 @@ GuidebannerElementButton.propTypes = {
   type: PropTypes.string
 
   /* TODO: add types and DocGen for all props. */
-};
-
-export { GuidebannerElementButton };
+};

package/es/components/Guidebanner/GuidebannerElementLink.js

@@ -28,7 +28,7 @@ var componentName = 'GuidebannerElementLink';
 /**
  * A link styled specifically for the GuidebannerElement.
  */
-var GuidebannerElementLink = function GuidebannerElementLink(_ref) {
+export var GuidebannerElementLink = function GuidebannerElementLink(_ref) {
   var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -40,6 +40,13 @@ var GuidebannerElementLink = function GuidebannerElementLink(_ref) {
   }, getDevtoolsProps(componentName)), children);
 };
 
+// Return a placeholder if not released and not enabled by feature flag
+GuidebannerElementLink = pkg.checkComponentEnabled(GuidebannerElementLink, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+GuidebannerElementLink.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.
@@ -52,5 +59,4 @@ GuidebannerElementLink.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string
-};
-export { GuidebannerElementLink };
+};

package/es/components/InlineTip/InlineTipButton.js

@@ -65,6 +65,13 @@ export var InlineTipButton = /*#__PURE__*/React.forwardRef(function (_ref, ref)
   }), children);
 });
 
+// Return a placeholder if not released and not enabled by feature flag
+InlineTipButton = pkg.checkComponentEnabled(InlineTipButton, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InlineTipButton.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.

package/es/components/InlineTip/InlineTipLink.js

@@ -65,6 +65,13 @@ export var InlineTipLink = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }), children);
 });
 
+// Return a placeholder if not released and not enabled by feature flag
+InlineTipLink = pkg.checkComponentEnabled(InlineTipLink, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+InlineTipLink.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.

package/es/components/index.js

@@ -44,7 +44,7 @@ export { EditFullPage } from './EditFullPage';
 export { EditUpdateCards } from './EditUpdateCards';
 export { InlineEdit } from './InlineEdit';
 export { EditInPlace } from './EditInPlace';
-export { Guidebanner } from './Guidebanner';
+export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from './Guidebanner';
 export { NonLinearReading } from './NonLinearReading';
 export { Coachmark } from './Coachmark';
 export { CoachmarkFixed } from './CoachmarkFixed';
@@ -53,5 +53,5 @@ export { CoachmarkButton } from './CoachmarkButton';
 export { CoachmarkOverlayElements } from './CoachmarkOverlayElements';
 export { CoachmarkOverlayElement } from './CoachmarkOverlayElement';
 export { CoachmarkStack } from './CoachmarkStack';
-export { InlineTip } from './InlineTip';
+export { InlineTip, InlineTipButton, InlineTipLink } from './InlineTip';
 export { Checklist } from './Checklist';

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

@@ -73,7 +73,12 @@ var defaults = {
     ButtonMenu: false,
     // Novice to pro components not yet reviewed and released:
     InlineTip: false,
+    InlineTipButton: false,
+    InlineTipLink: false,
     Guidebanner: false,
+    GuidebannerElement: false,
+    GuidebannerElementButton: false,
+    GuidebannerElementLink: false,
     NonLinearReading: false,
     Checklist: false,
     Coachmark: false,

package/lib/components/Datagrid/Datagrid/DatagridHeaderRow.js

@@ -26,8 +26,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * LICENSE file in the root directory of this source tree.
  */
 
-// @flow
-
 var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
 var getAccessibilityProps = function getAccessibilityProps(header) {
   var props = {};
@@ -69,38 +67,6 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
   var _useState = (0, _react.useState)(2),
     _useState2 = (0, _slicedToArray2.default)(_useState, 1),
     incrementAmount = _useState2[0];
-  var getClientXPosition = function getClientXPosition(event) {
-    var isTouchEvent = false;
-    if (event.type === 'touchstart') {
-      // Do not respond to multiple touches (e.g. 2 or 3 fingers)
-      if (event.touches && event.touches.length > 1) {
-        return;
-      }
-      isTouchEvent = true;
-    }
-    var clientX = isTouchEvent ? Math.round(event.touches[0].clientX) : event.clientX;
-    var closestHeader = event.target.closest('th');
-    var closestHeaderCoords = closestHeader.getBoundingClientRect();
-    var headerOffset = closestHeaderCoords.left;
-    var offsetValue = clientX - headerOffset;
-    return offsetValue;
-  };
-  (0, _react.useEffect)(function () {
-    var isResizing = datagridState.state.isResizing;
-    if (isResizing) {
-      var onColResizeEnd = datagridState.onColResizeEnd;
-      document.addEventListener('mouseup', function () {
-        (0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch, onColResizeEnd, isResizing);
-        document.activeElement.blur();
-      });
-    }
-    return function () {
-      document.removeEventListener('mouseup', function () {
-        return (0, _stateReducer.handleColumnResizeEndEvent)(datagridState.dispatch);
-      });
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datagridState.state.isResizing]);
   return /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({}, headerGroup.getHeaderGroupProps({
     role: false
   }), {
@@ -123,32 +89,21 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
       state = datagridState.state,
       dispatch = datagridState.dispatch,
       onColResizeEnd = datagridState.onColResizeEnd;
-    var columnResizing = state.columnResizing,
-      isResizing = state.isResizing;
+    var columnResizing = state.columnResizing;
     var columnWidths = columnResizing.columnWidths;
     var originalCol = visibleColumns[index];
     return /*#__PURE__*/_react.default.createElement(TableHeader, (0, _extends2.default)({}, header.getHeaderProps({
       role: false
     }), {
-      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
-      key: header.id
+      className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__resizableColumn"), header.getResizerProps), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isResizing"), header.isResizing), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__sortableColumn"), datagridState.isTableSortable && header.id !== 'spacer'), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__isSorted"), header.isSorted), _cx), header.getHeaderProps().className),
+      key: header.id,
+      "aria-hidden": header.id === 'spacer' && 'true'
     }, getAccessibilityProps(header)), header.render('Header'), header.getResizerProps && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, header.getResizerProps(), {
-      onMouseMove: function onMouseMove(event) {
-        if (isResizing) {
-          var newWidth = getClientXPosition(event);
-          // Sets a min width for resizing so at least one character from the column header is visible
-          if (newWidth >= 50) {
-            (0, _stateReducer.handleColumnResizingEvent)(dispatch, header, newWidth);
-          }
-        }
-      },
-      onMouseDown: function onMouseDown() {
-        return (0, _stateReducer.handleColumnResizeStartEvent)(dispatch, header.id);
-      },
       onKeyDown: function onKeyDown(event) {
         var key = event.key;
         if (key === 'ArrowLeft' || key === 'ArrowRight') {
-          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < 90 ? 90 : originalCol.width);
+          var originalColMinWidth = originalCol.minWidth || 90;
+          var currentColumnWidth = columnWidths[header.id] || (datagridState.isTableSortable && originalCol.width < originalColMinWidth ? originalColMinWidth : originalCol.width);
           if (key === 'ArrowLeft') {
             if (currentColumnWidth - incrementAmount > Math.max(minWidth, 50)) {
               var newWidth = currentColumnWidth - incrementAmount;
@@ -162,7 +117,7 @@ var HeaderRow = function HeaderRow(datagridState, headRef, headerGroup) {
         }
       },
       onKeyUp: function onKeyUp() {
-        return (0, _stateReducer.handleColumnResizeEndEvent)(dispatch, onColResizeEnd, header.id);
+        return (0, _stateReducer.handleColumnResizeEndEvent)(dispatch, onColResizeEnd, header.id, true);
       },
       className: (0, _classnames.default)("".concat(blockClass, "__col-resizer-range")),
       type: "range",