@carbon/ibm-products 2.9.0 → 2.10.0

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/addons/Filtering/FilterFlyout.js

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

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

@@ -24,7 +24,7 @@ var _excluded = ["align", "legendText"];
  */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid__row-size");
 var RowSizeDropdown = function RowSizeDropdown(_ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? 'bottom-right' : _ref$align,
@@ -35,24 +35,37 @@ var RowSizeDropdown = function RowSizeDropdown(_ref) {
     _React$useState2 = (0, _slicedToArray2.default)(_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(_react2.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(_react2.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(_icons.Settings, {
     size: 16
   })), /*#__PURE__*/React.createElement(_react2.PopoverContent, null, /*#__PURE__*/React.createElement(_react2.Layer, null, /*#__PURE__*/React.createElement(_RowSizeRadioGroup.default, (0, _extends2.default)({}, props, {

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

@@ -17,7 +17,7 @@ var _settings = require("../../../../../settings");
  * LICENSE file in the root directory of this source tree.
  */
 
-var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
+var blockClass = "".concat(_settings.pkg.prefix, "--datagrid__row-size");
 var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
   var rowSizes = _ref.rowSizes,
     selectedOption = _ref.selectedOption,
@@ -33,11 +33,8 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       xs: 'Extra small'
     } : _ref$rowSizeLabels;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "".concat(blockClass, "__row-size-dropdown"),
-    role: "presentation",
-    onClick: function onClick(e) {
-      e.stopPropagation();
-    }
+    className: "".concat(blockClass, "-dropdown"),
+    role: "presentation"
   }, /*#__PURE__*/_react.default.createElement(_react2.RadioButtonGroup, {
     legendText: legendText,
     name: "row-height-group",
@@ -52,7 +49,7 @@ var RowSizeRadioGroup = function RowSizeRadioGroup(_ref) {
       labelText = option.value;
     }
     return /*#__PURE__*/_react.default.createElement(_react2.RadioButton, {
-      className: "".concat(blockClass, "__row-size-radio-button"),
+      className: "".concat(blockClass, "-radio-button"),
       key: option.value,
       labelText: labelText,
       value: option.value,

package/lib/global/js/hooks/useClickOutside.js

@@ -13,16 +13,16 @@ var _react = require("react");
  */
 
 var useClickOutside = function useClickOutside(ref, callback) {
-  var handleClick = function handleClick(event) {
-    if (ref.current && !ref.current.contains(event.target)) {
-      callback(event.target);
-    }
-  };
   (0, _react.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]);
 };
 exports.useClickOutside = useClickOutside;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -92,5 +92,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "d16309a4cb6cc8d75c12335695015fc272752f36"
+  "gitHead": "d8d9e9401b213cb4e0d9deb7e6c583343ce63f79"
 }

package/scss/components/EmptyStates/_empty-state.scss

@@ -28,6 +28,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--empty-state;
     @include type.type-style('body-01');
 
     padding-bottom: $spacing-05;
+    color: $text-secondary;
   }
 
   .#{$block-class}__header--small {
@@ -78,5 +79,5 @@ $block-class: #{c4p-settings.$pkg-prefix}--empty-state;
 }
 
 .#{$block-class} .#{$block-class}__link {
-  display: block;
+  display: inline-block;
 }