@carbon/ibm-products 2.8.1 → 2.10.0

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -11,28 +11,27 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { Draggable, Locked } from '@carbon/react/icons';
-import { useDrag, useDrop } from 'react-dnd';
+// import { useDrag, useDrop } from 'react-dnd';
 import cx from 'classnames';
 import { pkg } from '../../../settings';
 var useEffect = React.useEffect,
   useRef = React.useRef,
   useState = React.useState;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
-var DRAG_TYPE = "".concat(blockClass, "__shared-ui-draggable-element");
+
+// const DRAG_TYPE = `${blockClass}__shared-ui-draggable-element`;
+
 var DraggableElement = function DraggableElement(_ref) {
   var _cx;
-  var id = _ref.id,
-    index = _ref.index,
+  var index = _ref.index,
     listData = _ref.listData,
     children = _ref.children,
-    type = _ref.type,
     disabled = _ref.disabled,
     ariaLabel = _ref.ariaLabel,
     onGrab = _ref.onGrab,
     onArrowKeyDown = _ref.onArrowKeyDown,
     isFocused = _ref.isFocused,
     isSticky = _ref.isSticky,
-    moveElement = _ref.moveElement,
     selected = _ref.selected,
     _ref$positionLabel = _ref.positionLabel,
     positionLabel = _ref$positionLabel === void 0 ? 'Current position {index} of {total}' : _ref$positionLabel,
@@ -41,72 +40,66 @@ var DraggableElement = function DraggableElement(_ref) {
     _ref$droppedLabel = _ref.droppedLabel,
     droppedLabel = _ref$droppedLabel === void 0 ? '{itemName} dropped.' : _ref$droppedLabel;
   var ref = useRef();
-  var _useDrop = useDrop({
-      accept: DRAG_TYPE + type,
-      collect: function collect(monitor) {
-        return {
-          isOver: !!monitor.isOver()
-        };
-      },
-      drop: function drop(item) {
-        moveElement(item.index, index);
-      },
-      canDrop: function canDrop() {
-        return !disabled;
-      },
-      hover: function hover(item) {
-        var dragIndex = item.index;
-        var hoverIndex = index;
-        // Don't replace items with themselves
-        if (dragIndex === hoverIndex || disabled) {
-          return;
-        }
-        moveElement(dragIndex, hoverIndex);
-        // Time to actually perform the action
-        // Note: we're mutating the monitor item here!
-        // Generally it's better to avoid mutations,
-        // but it's good here for the sake of performance
-        // to avoid expensive index searches.
-        // eslint-disable-next-line no-param-reassign
-        item.index = hoverIndex;
-      }
-    }),
-    _useDrop2 = _slicedToArray(_useDrop, 2),
-    isOver = _useDrop2[0].isOver,
-    drop = _useDrop2[1];
-  var _useDrag = useDrag({
-      type: DRAG_TYPE + type,
-      item: {
-        id: id,
-        index: index
-      },
-      canDrag: function canDrag() {
-        return !disabled;
-      },
-      collect: function collect(monitor) {
-        return {
-          isDragging: monitor.isDragging()
-        };
-      }
-    }),
-    _useDrag2 = _slicedToArray(_useDrag, 3),
-    isDragging = _useDrag2[0].isDragging,
-    drag = _useDrag2[1],
-    preview = _useDrag2[2];
+
+  // const [{ isOver }, drop] = useDrop({
+  //   accept: DRAG_TYPE + type,
+  //   collect: (monitor) => ({
+  //     isOver: !!monitor.isOver(),
+  //   }),
+  //   drop: (item) => {
+  //     moveElement(item.index, index);
+  //   },
+  //   canDrop: () => !disabled,
+  //   hover(item) {
+  //     const dragIndex = item.index;
+  //     const hoverIndex = index;
+  //     // Don't replace items with themselves
+  //     if (dragIndex === hoverIndex || disabled) {
+  //       return;
+  //     }
+  //     // moveElement(dragIndex, hoverIndex);
+  //     // Time to actually perform the action
+  //     // Note: we're mutating the monitor item here!
+  //     // Generally it's better to avoid mutations,
+  //     // but it's good here for the sake of performance
+  //     // to avoid expensive index searches.
+  //     // eslint-disable-next-line no-param-reassign
+  //     item.index = hoverIndex;
+  //   },
+  // });
+
+  // const [{ isDragging }, drag, preview] = useDrag({
+  //   type: DRAG_TYPE + type,
+  //   item: { id, index },
+  //   canDrag: () => !disabled,
+  //   collect: (monitor) => ({
+  //     isDragging: monitor.isDragging(),
+  //   }),
+  // });
+
+  // Temporarily disable drag support because of commonjs support/issues with react-dnd in latest version
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 1),
+    isDragging = _useState2[0];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 1),
+    isOver = _useState4[0];
+  var preview = useRef();
+  var drag = useRef();
   useEffect(function () {
     if (isFocused && ref && ref.current) {
       ref.current.focus();
     }
   }, [isFocused]);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isGrabbed = _useState2[0],
-    setIsGrabbed = _useState2[1];
-  var _useState3 = useState(isFocused),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isFocusedOnItem = _useState4[0],
-    setIsFocusedOnItem = _useState4[1];
-  drop(ref);
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isGrabbed = _useState6[0],
+    setIsGrabbed = _useState6[1];
+  var _useState7 = useState(isFocused),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFocusedOnItem = _useState8[0],
+    setIsFocusedOnItem = _useState8[1];
+  // drop(ref);
   var content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: cx({
       disabled: disabled
@@ -167,7 +160,7 @@ DraggableElement.propTypes = {
   isFocused: PropTypes.bool.isRequired,
   isSticky: PropTypes.bool,
   listData: PropTypes.array.isRequired,
-  moveElement: PropTypes.func.isRequired,
+  // moveElement: PropTypes.func.isRequired,
   onArrowKeyDown: PropTypes.func.isRequired,
   onGrab: PropTypes.func.isRequired,
   positionLabel: PropTypes.string,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js

@@ -1,7 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /**
- * Copyright IBM Corp. 2022, 2022
+ * Copyright IBM Corp. 2022, 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.
@@ -9,10 +9,10 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
+// import { DndProvider } from 'react-dnd';
+// import { HTML5Backend } from 'react-dnd-html5-backend';
 import { Checkbox } from '@carbon/react';
-import update from 'immutability-helper';
+// import update from 'immutability-helper';
 import { pkg } from '../../../../../settings';
 import cx from 'classnames';
 import { DraggableItemsList } from './DraggableItemsList';
@@ -44,16 +44,23 @@ var Columns = function Columns(_ref) {
     _React$useState4 = _slicedToArray(_React$useState3, 2),
     focusIndex = _React$useState4[0],
     setFocusIndex = _React$useState4[1];
-  var moveElement = React.useCallback(function (dragIndex, hoverIndex) {
-    var dragCard = columns[dragIndex];
-    setColumnsObject(update(columns, {
-      $splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
-    }));
-  }, [columns, setColumnsObject]);
+  // const moveElement = React.useCallback(
+  //   (dragIndex, hoverIndex) => {
+  //     const dragCard = columns[dragIndex];
+  //     setColumnsObject(
+  //       update(columns, {
+  //         $splice: [
+  //           [dragIndex, 1],
+  //           [hoverIndex, 0, dragCard],
+  //         ],
+  //       })
+  //     );
+  //   },
+  //   [columns, setColumnsObject]
+  // );
+
   return /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__customize-columns-column-list")
-  }, /*#__PURE__*/React.createElement(DndProvider, {
-    backend: HTML5Backend
   }, /*#__PURE__*/React.createElement("ol", {
     className: "".concat(blockClass, "__customize-columns-column-list--focus"),
     role: "listbox",
@@ -90,13 +97,14 @@ var Columns = function Columns(_ref) {
     columns: columns,
     filterString: filterString,
     focusIndex: focusIndex,
-    getNextIndex: getNextIndex,
-    moveElement: moveElement,
+    getNextIndex: getNextIndex
+    // moveElement={moveElement}
+    ,
     onSelectColumn: onSelectColumn,
     setAriaRegionText: setAriaRegionText,
     setColumnsObject: setColumnsObject,
     setFocusIndex: setFocusIndex
-  }))));
+  })));
 };
 Columns.propTypes = {
   assistiveTextDisabledInstructionsLabel: PropTypes.string,

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -18,7 +18,6 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
     filterString = _ref.filterString,
     focusIndex = _ref.focusIndex,
     getNextIndex = _ref.getNextIndex,
-    moveElement = _ref.moveElement,
     onSelectColumn = _ref.onSelectColumn,
     setAriaRegionText = _ref.setAriaRegionText,
     setColumnsObject = _ref.setColumnsObject,
@@ -68,8 +67,9 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
       disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colHeaderTitle,
       onGrab: setAriaRegionText,
-      isFocused: focusIndex === i,
-      moveElement: moveElement,
+      isFocused: focusIndex === i
+      // moveElement={moveElement}
+      ,
       onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
         if (isGrabbed) {
           var _columns$nextIndex;
@@ -78,7 +78,7 @@ export var DraggableItemsList = function DraggableItemsList(_ref) {
           e.stopPropagation();
           if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
             setFocusIndex(nextIndex);
-            moveElement(currentIndex, nextIndex);
+            // moveElement(currentIndex, nextIndex);
             e.target.scrollIntoView({
               block: 'center'
             });
@@ -95,7 +95,7 @@ DraggableItemsList.propTypes = {
   filterString: PropTypes.string.isRequired,
   focusIndex: PropTypes.number.isRequired,
   getNextIndex: PropTypes.func.isRequired,
-  moveElement: PropTypes.func.isRequired,
+  // moveElement: PropTypes.func.isRequired,
   onSelectColumn: PropTypes.func.isRequired,
   setAriaRegionText: PropTypes.func.isRequired,
   setColumnsObject: PropTypes.func.isRequired,

package/es/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -152,7 +152,8 @@ var FilterFlyout = function FilterFlyout(_ref) {
     lastAppliedFilters.current = JSON.stringify(reactTableFiltersState);
   }, [reactTableFiltersState, lastAppliedFilters]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(componentClass, "__container")
+    className: "".concat(componentClass, "__container"),
+    ref: filterFlyoutRef
   }, /*#__PURE__*/React.createElement(IconButton, {
     label: flyoutIconDescription,
     kind: "ghost",
@@ -161,7 +162,6 @@ var FilterFlyout = function FilterFlyout(_ref) {
     className: cx("".concat(componentClass, "__trigger"), _defineProperty({}, "".concat(componentClass, "__trigger--open"), open)),
     disabled: data.length === 0
   }, /*#__PURE__*/React.createElement(Filter, null)), /*#__PURE__*/React.createElement("div", {
-    ref: filterFlyoutRef,
     className: cx(componentClass, (_cx2 = {}, _defineProperty(_cx2, "".concat(componentClass, "--open"), open), _defineProperty(_cx2, "".concat(componentClass, "--batch"), showActionSet), _defineProperty(_cx2, "".concat(componentClass, "--instant"), !showActionSet), _cx2))
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(componentClass, "__inner-container")

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeDropdown.js

@@ -15,7 +15,7 @@ import { Settings } from '@carbon/react/icons';
 import { IconButton, Layer, Popover, PopoverContent } from '@carbon/react';
 import RowSizeRadioGroup from './RowSizeRadioGroup';
 import { pkg } from '../../../../../settings';
-var blockClass = "".concat(pkg.prefix, "--datagrid");
+var blockClass = "".concat(pkg.prefix, "--datagrid__row-size");
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'bottom-right' : _ref$align,
@@ -26,24 +26,37 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isOpen = _React$useState2[0],
     setIsOpen = _React$useState2[1];
+  var onCloseHandler = function onCloseHandler() {
+    setIsOpen(false);
+  };
+  var onKeyHandler = function onKeyHandler(e) {
+    if (e.key === 'Escape') {
+      onCloseHandler();
+    }
+  };
+  var onBlurHandler = function onBlurHandler(e) {
+    if (!e.currentTarget.contains(e.relatedTarget)) {
+      onCloseHandler();
+    }
+  };
+  var onClickHandler = function onClickHandler() {
+    setIsOpen(!isOpen);
+  };
   return /*#__PURE__*/React.createElement(Popover, {
+    tabIndex: -1,
     isTabTip: true,
     align: "bottom-right",
     open: isOpen,
-    onRequestClose: function onRequestClose() {
-      return setIsOpen(false);
-    },
-    className: "".concat(blockClass, "__row-size-options-container")
+    onRequestClose: onCloseHandler,
+    className: "".concat(blockClass, "-options-container"),
+    onKeyDown: onKeyHandler,
+    onBlur: onBlurHandler
   }, /*#__PURE__*/React.createElement(IconButton, {
     align: align,
     kind: "ghost",
-    onClick: function onClick() {
-      return setIsOpen(function (prevOpen) {
-        return !prevOpen;
-      });
-    },
+    onClick: onClickHandler,
     label: legendText,
-    className: "".concat(blockClass, "__row-size-button")
+    className: "".concat(blockClass, "-button")
   }, /*#__PURE__*/React.createElement(Settings, {
     size: 16
   })), /*#__PURE__*/React.createElement(PopoverContent, null, /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement(RowSizeRadioGroup, _extends({}, props, {

package/es/components/Datagrid/Datagrid/addons/RowSize/RowSizeRadioGroup.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { RadioButtonGroup, RadioButton } from '@carbon/react';
 import isArray from 'lodash/isArray';
 import { pkg } from '../../../../../settings';
-var blockClass = "".concat(pkg.prefix, "--datagrid");
+var blockClass = "".concat(pkg.prefix, "--datagrid__row-size");
 var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
   var rowSizes = _ref.rowSizes,
     selectedOption = _ref.selectedOption,
@@ -26,11 +26,8 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       xs: 'Extra small'
     } : _ref$rowSizeLabels;
   return /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__row-size-dropdown"),
-    role: "presentation",
-    onClick: function onClick(e) {
-      e.stopPropagation();
-    }
+    className: "".concat(blockClass, "-dropdown"),
+    role: "presentation"
   }, /*#__PURE__*/React.createElement(RadioButtonGroup, {
     legendText: legendText,
     name: "row-height-group",
@@ -45,7 +42,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       labelText = option.value;
     }
     return /*#__PURE__*/React.createElement(RadioButton, {
-      className: "".concat(blockClass, "__row-size-radio-button"),
+      className: "".concat(blockClass, "-radio-button"),
       key: option.value,
       labelText: labelText,
       value: option.value,

package/es/components/OptionsTile/OptionsTile.js

@@ -214,7 +214,7 @@ export var OptionsTile = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__toggle-container")
   }, /*#__PURE__*/React.createElement(Toggle, {
-    id: "".concat(id, "-toggle"),
+    id: "".concat(titleId, "-toggle"),
     className: "".concat(blockClass, "__toggle"),
     toggled: enabled,
     "aria-labelledby": titleId,

package/es/global/js/hooks/useClickOutside.js

@@ -7,15 +7,15 @@
 
 import { useEffect } from 'react';
 export var useClickOutside = function useClickOutside(ref, callback) {
-  var handleClick = function handleClick(event) {
-    if (ref.current && !ref.current.contains(event.target)) {
-      callback(event.target);
-    }
-  };
   useEffect(function () {
+    var handleClick = function handleClick(event) {
+      if (ref.current && !ref.current.contains(event.target)) {
+        callback(event.target);
+      }
+    };
     document.addEventListener('click', handleClick);
     return function () {
       document.removeEventListener('click', handleClick);
     };
-  });
+  }, [callback, ref]);
 };

package/lib/components/CreateFullPage/CreateFullPage.js

@@ -19,7 +19,8 @@ var _CreateInfluencer = require("../CreateInfluencer");
 var _ActionSet = require("../ActionSet");
 var _hooks = require("../../global/js/hooks");
 var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
-var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
+var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
+var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "initialStep", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText", "title"];
 /**
  * Copyright IBM Corp. 2021, 2023
  *
@@ -62,6 +63,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     cancelButtonText = _ref.cancelButtonText,
     children = _ref.children,
     className = _ref.className,
+    initialStep = _ref.initialStep,
     modalDangerButtonText = _ref.modalDangerButtonText,
     modalDescription = _ref.modalDescription,
     modalSecondaryButtonText = _ref.modalSecondaryButtonText,
@@ -132,7 +134,11 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     if (lastItem !== lastIncludedStep) {
       setLastIncludedStep(lastItem);
     }
-  }, [stepData, firstIncludedStep, lastIncludedStep]);
+    if (open && initialStep) {
+      var numberOfHiddenSteps = (0, _getNumberOfHiddenSteps.getNumberOfHiddenSteps)(stepData, initialStep);
+      setCurrentStep(Number(initialStep + numberOfHiddenSteps));
+    }
+  }, [stepData, firstIncludedStep, lastIncludedStep, initialStep]);
   (0, _hooks.useCreateComponentFocus)({
     previousState: previousState,
     currentStep: currentStep,
@@ -141,6 +147,16 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     firstFocusElement: firstFocusElement
   });
   (0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
+  (0, _hooks.useResetCreateComponent)({
+    firstIncludedStep: firstIncludedStep,
+    previousState: previousState,
+    open: open,
+    setCurrentStep: setCurrentStep,
+    stepData: stepData,
+    initialStep: initialStep,
+    totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
+    componentName: componentName
+  });
   (0, _hooks.useCreateComponentStepChange)({
     firstIncludedStep: firstIncludedStep,
     lastIncludedStep: lastIncludedStep,
@@ -267,6 +283,12 @@ CreateFullPage.propTypes = {
    * Specifies elements to focus on first on render.
    */
   firstFocusElement: _propTypes.default.string,
+  /**
+   * This can be used to open the component to a step other than the first step.
+   * For example, a create flow was previously in progress, data was saved, and
+   * is now being completed.
+   */
+  initialStep: _propTypes.default.number,
   /**
    * The primary 'danger' button text in the modal
    */

package/lib/components/Datagrid/Datagrid/DatagridToolbar.js

@@ -37,7 +37,8 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     receivedInitialWidth = _useState6[0],
     setReceivedInitialWidth = _useState6[1];
-  var selectedRowIds = datagridState.state.selectedRowIds,
+  var onSelectAllRows = datagridState.onSelectAllRows,
+    selectedRowIds = datagridState.state.selectedRowIds,
     toggleAllRowsSelected = datagridState.toggleAllRowsSelected,
     toolbarBatchActions = datagridState.toolbarBatchActions,
     setGlobalFilter = datagridState.setGlobalFilter,
@@ -125,7 +126,12 @@ var DatagridBatchActionsToolbar = function DatagridBatchActionsToolbar(datagridS
     onCancel: function onCancel() {
       toggleAllRowsSelected(false);
       setGlobalFilter(null);
-    }
+    },
+    onSelectAll: function onSelectAll() {
+      toggleAllRowsSelected(true);
+      onSelectAllRows === null || onSelectAllRows === void 0 ? void 0 : onSelectAllRows(true);
+    },
+    totalCount: rows && rows.length
   }, !displayAllInMenu && toolbarBatchActions && (toolbarBatchActions === null || toolbarBatchActions === void 0 ? void 0 : toolbarBatchActions.map(function (batchAction, index) {
     if (index < 2 && toolbarBatchActions.length > 3 || index < 3 && toolbarBatchActions.length <= 3) {
       return /*#__PURE__*/_react.default.createElement(_react2.TableBatchAction, {