@carbon/ibm-products 1.2.4 → 1.5.0

package/es/components/PageHeader/PageHeaderTitle.js

@@ -1,7 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "editDescription", "editableLabel", "revertDescription", "saveDescription"];
 import React from 'react';
+import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { SkeletonText } from 'carbon-components-react';
+import { InlineEdit } from '../';
 /**
  *
  * Utility component used by Page Header
@@ -14,14 +19,21 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
       title = _ref.title;
   var titleInnards; // eslint-disable-next-line
   // debugger;
-  // eslint-disable-next-line react/prop-types
 
   var text = title.text,
       content = title.content,
       loading = title.loading,
       icon = title.icon,
-      asText = title.asText;
+      asText = title.asText,
+      onChange = title.onChange,
+      editDescription = title.editDescription,
+      editableLabel = title.editableLabel,
+      revertDescription = title.revertDescription,
+      saveDescription = title.saveDescription,
+      rest = _objectWithoutProperties(title, _excluded);
+
   var titleText;
+  var isEditable = !!onChange;
 
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
@@ -32,18 +44,77 @@ export var PageHeaderTitle = function PageHeaderTitle(_ref) {
     var TitleIcon = icon;
     titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement(TitleIcon, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, /*#__PURE__*/React.createElement("span", {
-      title: !loading ? asText : null
-    }, loading ? /*#__PURE__*/React.createElement(SkeletonText, {
+    }) : null, loading ? /*#__PURE__*/React.createElement(SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
-    }) : text));
+    }) : isEditable ? /*#__PURE__*/React.createElement(InlineEdit, _extends({
+      hideLabel: true,
+      value: text,
+      editDescription: editDescription,
+      onChange: onChange,
+      labelText: editableLabel,
+      revertDescription: revertDescription,
+      saveDescription: saveDescription
+    }, rest)) : /*#__PURE__*/React.createElement("span", {
+      title: !loading ? asText : null
+    }, text));
   } else {
     titleInnards = content;
     titleText = asText;
   }
 
   return /*#__PURE__*/React.createElement("div", {
-    className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
+    className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--editable"), isEditable), _defineProperty({}, "".concat(blockClass, "__title--fades"), hasBreadcrumbRow)),
     title: titleText
   }, titleInnards);
+};
+export var inlineEditRequired = function inlineEditRequired(_ref2) {
+  var onChange = _ref2.onChange;
+  return !!onChange;
+};
+PageHeaderTitle.propTypes = {
+  // passed from page header
+  blockClass: PropTypes.string.isRequired,
+
+  /**
+   * controlled from within page header
+   */
+  hasBreadcrumbRow: PropTypes.bool,
+
+  /**
+   * An optional page title supplied as a string or object with the following attributes: text, icon, loading
+   *
+   * Can be supplied either as:
+   * - String
+   * - Object containing
+   *    - text: title string
+   *    - icon: optional icon
+   *    - loading: boolean shows loading indicator if true
+   *    - onChange: function to process edits only supply if in place edit is desired
+   *    - editDescription: description for edit button
+   *    - editableLabel: label for edit required if onChange supplied
+   *    - revertDescription: description for edit revert button
+   *    - saveDescription: description for edit save button
+   * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
+   *    - content: title or name of current location shown in main part of page header
+   *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
+   *    - asText: String based representation of the title
+   */
+  title: PropTypes.oneOfType([PropTypes.shape({
+    // Update docgen if changed
+    text: PropTypes.string.isRequired,
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    loading: PropTypes.bool,
+    // inline edit version properties
+    editDescription: PropTypes.string.isRequired.if(inlineEditRequired),
+    editableLabel: PropTypes.string.isRequired.if(inlineEditRequired),
+    id: PropTypes.string.isRequired.if(inlineEditRequired),
+    onChange: PropTypes.func,
+    revertDescription: PropTypes.string.isRequired.if(inlineEditRequired),
+    saveDescription: PropTypes.string.isRequired.if(inlineEditRequired) // Update docgen if changed
+
+  }), PropTypes.string, PropTypes.shape({
+    content: PropTypes.node.isRequired,
+    breadcrumbContent: PropTypes.node,
+    asText: PropTypes.string.isRequired
+  })])
 };

package/es/components/PageHeader/PageHeaderUtils.js

@@ -22,10 +22,12 @@ export var blockClass = "".concat(pkg.prefix, "--page-header");
  * @param {{}} offsetTopMeasuringRef
  * @param {{}} navigation
  * @param {boolean} disableBreadcrumbScroll
+ * @param {boolean} hasActionBar
+ * @param {boolean} widthIsNarrow
  * @param {()} setMetrics
  */
 
-export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, disableBreadcrumbScroll, setMetrics) {
+export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerRef, offsetTopMeasuringRef, navigation, disableBreadcrumbScroll, hasActionBar, widthIsNarrow, setMetrics) {
   var dynamicRefs = {};
 
   var getDynamicRef = function getDynamicRef(selector) {
@@ -60,6 +62,7 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
     var subtitleRowEl = getDynamicRef(".".concat(blockClass, "__subtitle-row"));
     var availableRowEl = getDynamicRef(".".concat(blockClass, "__available-row"));
     var navigationRowEl = getDynamicRef(".".concat(blockClass, "__navigation-row"));
+    var pageActionsEl = getDynamicRef(".".concat(blockClass, "__page-actions"));
     /* istanbul ignore next */
 
     update.headerHeight = headerRef.current ? headerRef.current.clientHeight : 0;
@@ -81,7 +84,8 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
     update.breadcrumbRowWidth = breadcrumbRowEl ? breadcrumbRowEl.offsetWidth : 0;
     /* istanbul ignore next */
 
-    update.breadcrumbTitleHeight = breadcrumbTitleEl ? breadcrumbTitleEl.clientHeight : 1;
+    update.breadcrumbTitleHeight = breadcrumbTitleEl ? breadcrumbTitleEl.offsetHeight // clientHeight returns 0 when window small
+    : 1;
     /* istanbul ignore next */
 
     update.titleRowHeight = titleRowEl ? titleRowEl.clientHeight : 0;
@@ -102,9 +106,19 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
       update.headerTopValue += update.navigationRowHeight;
     }
 
+    if (!hasActionBar && !widthIsNarrow) {
+      // Add difference between $spacing-08 and $spacing-07 to ensure space below breadcrumb is correct on scroll
+      // $spacing-07 is used as size for breadcrumb when no action bar otherwise $spacing-08
+      update.headerTopValue += 8;
+    }
+
     if (disableBreadcrumbScroll || !navigation) {
       // adjust sticky top if no navigation or breadcrumb is to stay on screen
       update.headerTopValue += update.breadcrumbRowHeight;
+    } else {
+      if (navigation && !widthIsNarrow) {
+        update.headerTopValue -= 8;
+      }
     }
 
     if (window) {
@@ -125,6 +139,11 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
       if (titleRowEl) {
         val = parseFloat(window.getComputedStyle(titleRowEl).getPropertyValue('margin-top'), 10);
         update.titleRowSpaceAbove = isNaN(val) ? 0 : val;
+
+        if (pageActionsEl) {
+          val = parseFloat(window.getComputedStyle(pageActionsEl).getPropertyValue('margin-top'), 10);
+          update.pageActionsSpaceAbove = titleRowEl.clientHeight - pageActionsEl.clientHeight + update.titleRowSpaceAbove - (isNaN(val) ? 0 : val);
+        }
       }
     } else {
       update.breadcrumbRowSpaceBelow = 0;

package/es/components/RemoveModal/RemoveModal.js

@@ -88,11 +88,13 @@ export var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     labelText: inputLabelText,
     placeholder: inputPlaceholderText,
     onChange: onChangeHandler,
-    value: userInput
+    value: userInput,
+    "data-modal-primary-focus": true
   })), /*#__PURE__*/React.createElement(ModalFooter, null, /*#__PURE__*/React.createElement(Button, {
     type: "button",
     kind: "secondary",
-    onClick: onClose
+    onClick: onClose,
+    "data-modal-primary-focus": !textConfirmation
   }, secondaryButtonText), /*#__PURE__*/React.createElement(Button, {
     type: "submit",
     kind: "danger",

package/es/components/SidePanel/SidePanel.js

@@ -508,7 +508,7 @@ SidePanel.propTypes = {
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
   actions: allPropTypes([ActionSet.validateActions(), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/SingleAddSelect/SingleAddSelect.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { forwardRef } from 'react'; // import PropTypes from 'prop-types';
+
+import { AddSelect } from '../AddSelect';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg } from '../../settings';
+var componentName = 'SingleAddSelect';
+export var SingleAddSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  return /*#__PURE__*/React.createElement(AddSelect, _extends({}, props, {
+    ref: ref
+  }, getDevtoolsProps(componentName)));
+});
+SingleAddSelect = pkg.checkComponentEnabled(SingleAddSelect, componentName);
+SingleAddSelect.propTypes = {};
+SingleAddSelect.displayName = componentName;

package/es/components/SingleAddSelect/index.js

@@ -0,0 +1 @@
+export { SingleAddSelect } from './SingleAddSelect';

package/es/components/TagSet/TagSet.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["align", "className", "maxVisible", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
-    _excluded2 = ["label"],
+    _excluded2 = ["label", "id"],
     _excluded3 = ["label"];
 
 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; }
@@ -84,6 +84,7 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
     setHiddenSizingTags(tags && tags.length > 0 ? tags.map(function (_ref2, index) {
       var label = _ref2.label,
+          id = _ref2.id,
           other = _objectWithoutProperties(_ref2, _excluded2);
 
       return /*#__PURE__*/React.createElement("div", {
@@ -93,6 +94,8 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
           return newSizingTags[index] = el;
         }
       }, /*#__PURE__*/React.createElement(Tag, _extends({}, other, {
+        // ensure id is not duplicated
+        "data-original-id": id,
         filter: false
       }), label));
     }) : []);

package/es/components/Tearsheet/Tearsheet.js

@@ -82,7 +82,7 @@ Tearsheet.propTypes = _objectSpread({
   actions: allPropTypes([ActionSet.validateActions(function () {
     return 'max';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -78,7 +78,7 @@ TearsheetNarrow.propTypes = _objectSpread({
   actions: allPropTypes([ActionSet.validateActions(function () {
     return 'lg';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/Tearsheet/TearsheetShell.js

@@ -281,7 +281,7 @@ TearsheetShell.propTypes = _objectSpread({
   actions: PropTypes.arrayOf( // NB we don't include the validator here, as the component wrapping this
   // one should ensure appropriate validation is done.
   PropTypes.shape(_objectSpread(_objectSpread({}, Button.propTypes), {}, {
-    kind: PropTypes.oneOf(['ghost', 'secondary', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here

package/es/components/Toolbar/Toolbar.js

@@ -1,17 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "className", "vertical"];
 
 /**
- * Copyright IBM Corp. 2021, 2021
+ * Copyright IBM Corp. 2021, 2022
  *
  * 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 cx from 'classnames';
 import { bool, node, string } from 'prop-types';
-import React, { createContext, forwardRef } from 'react';
+import React, { createContext, forwardRef, useCallback, useEffect, useRef, useState } from 'react';
+import { getFocusableElements as _getFocusableElements } from '../../global/js/utils/getFocusableElements';
 import { pkg } from '../../settings';
 var checkComponentEnabled = pkg.checkComponentEnabled,
     prefix = pkg.prefix;
@@ -19,15 +21,74 @@ var blockClass = "".concat(prefix, "--toolbar");
 var ToolbarContext = /*#__PURE__*/createContext();
 /** Toolbars are a collection of action items that organize a program’s interaction patterns into a series of closely related commands. */
 
-var Toolbar = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-      className = _ref.className,
-      vertical = _ref.vertical,
-      rest = _objectWithoutProperties(_ref, _excluded);
+var Toolbar = /*#__PURE__*/forwardRef(function (_ref2, r) {
+  var children = _ref2.children,
+      className = _ref2.className,
+      vertical = _ref2.vertical,
+      rest = _objectWithoutProperties(_ref2, _excluded);
+
+  var focusableElements = useRef();
+  var getFocusableElements = useCallback(function () {
+    return focusableElements.current;
+  }, [focusableElements]);
+
+  var _ref = useRef();
+
+  var ref = r || _ref;
+
+  var _useState = useState(),
+      _useState2 = _slicedToArray(_useState, 2),
+      focus = _useState2[0],
+      setFocus = _useState2[1];
+
+  useEffect(function () {
+    focusableElements.current = _getFocusableElements(ref.current);
+    typeof focus !== 'undefined' && getFocusableElements().forEach(function (element, index) {
+      element[index !== focus ? 'setAttribute' : 'removeAttribute']('tabindex', -1);
+    });
+  });
+  useEffect(function () {
+    typeof focus !== 'undefined' && getFocusableElements()[focus].focus();
+  }, [focus, getFocusableElements]);
+
+  var _ref3 = !vertical ? ['ArrowRight', 'ArrowLeft'] : ['ArrowDown', 'ArrowUp'],
+      _ref4 = _slicedToArray(_ref3, 2),
+      arrowNext = _ref4[0],
+      arrowPrevious = _ref4[1];
+
+  function onArrowDown(increment) {
+    var nextFocus = focus + increment;
+    getFocusableElements()[nextFocus] && setFocus(nextFocus);
+  }
+
+  function onFocus(_ref5) {
+    var target = _ref5.target;
+    var elements = getFocusableElements();
+    elements.includes(target) && setFocus(elements.indexOf(target));
+  }
+
+  function onKeyDown(_ref6) {
+    var key = _ref6.key,
+        target = _ref6.target;
+
+    if (getFocusableElements().includes(target)) {
+      switch (key) {
+        case arrowNext:
+          onArrowDown(1);
+          break;
+
+        case arrowPrevious:
+          onArrowDown(-1);
+          break;
+      }
+    }
+  }
 
   return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
     ref: ref,
-    className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "--vertical"), vertical))
+    className: cx(blockClass, className, _defineProperty({}, "".concat(blockClass, "--vertical"), vertical)),
+    onFocus: onFocus,
+    onKeyDown: onKeyDown
   }, vertical && {
     'aria-orientation': 'vertical'
   }, {

package/es/components/index.js

@@ -20,12 +20,14 @@ export { HTTPError403, HTTPError404, HTTPErrorOther } from './HTTPErrors';
 export { ImportModal } from './ImportModal';
 export { LoadingBar } from './LoadingBar';
 export { ModifiedTabs } from './ModifiedTabs';
+export { MultiAddSelect } from './MultiAddSelect';
 export { NotificationsPanel } from './NotificationsPanel';
 export { PageHeader } from './PageHeader';
 export { ProductiveCard } from './ProductiveCard';
 export { RemoveModal } from './RemoveModal';
 export { Saving } from './Saving';
 export { SidePanel } from './SidePanel';
+export { SingleAddSelect } from './SingleAddSelect';
 export { StatusIcon } from './StatusIcon';
 export { TagSet } from './TagSet';
 export { Tearsheet, TearsheetNarrow } from './Tearsheet';
@@ -33,4 +35,6 @@ export { Toolbar, ToolbarButton, ToolbarGroup } from './Toolbar';
 export { UserProfileImage } from './UserProfileImage';
 export { WebTerminal } from './WebTerminal';
 export { EditSidePanel } from './EditSidePanel';
-export { OptionsTile } from './OptionsTile';
+export { OptionsTile } from './OptionsTile';
+export { CancelableTextEdit } from './CancelableTextEdit';
+export { InlineEdit } from './InlineEdit';

package/es/global/js/hooks/index.js

@@ -11,4 +11,5 @@ export { useCreateComponentFocus } from './useCreateComponentFocus';
 export { useCreateComponentStepChange } from './useCreateComponentStepChange';
 export { usePreviousValue } from './usePreviousValue';
 export { useResetCreateComponent } from './useResetCreateComponent';
+export { useRetrieveStepData } from './useRetrieveStepData';
 export { useValidCreateStepCount } from './useValidCreateStepCount';

package/es/global/js/hooks/useCreateComponentFocus.js

@@ -5,33 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { useEffect } from 'react';
-import { getFocusableElements } from '../utils/getFocusableElements';
-/**
- * Returns the previous state values included in the param
- * @param {object} previousState
- * @param {number} currentStep
- * @param {Function} getCreateComponentSteps
- * @param {string} componentBlockClass
- */
+import { getFocusableElements } from '../utils/getFocusableElements'; // Focus the first focusable element and call the onMount prop for the current step if one is provided
 
-export var useCreateComponentFocus = function useCreateComponentFocus(previousState, currentStep, getCreateComponentSteps, componentBlockClass) {
+export var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
+  var previousState = _ref.previousState,
+      currentStep = _ref.currentStep,
+      blockClass = _ref.blockClass,
+      onMount = _ref.onMount;
+  useEffect(function () {
+    if (typeof onMount === 'function') {
+      onMount();
+    }
+  }, [onMount]);
   useEffect(function () {
     if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
-      var visibleStepInnerContent = document.querySelector(".".concat(componentBlockClass, "__step.").concat(componentBlockClass, "__step--visible-step"));
-      var createComponentSteps = getCreateComponentSteps();
-      var focusableStepElements = createComponentSteps && createComponentSteps.length && getFocusableElements(visibleStepInnerContent);
-      var activeStepComponent = createComponentSteps && createComponentSteps.length && createComponentSteps[currentStep - 1];
-
-      if (activeStepComponent && activeStepComponent.props.onMount) {
-        activeStepComponent.props.onMount();
-      }
+      var visibleStepInnerContent = document.querySelector(".".concat(blockClass, "__step.").concat(blockClass, "__step__step--visible-step"));
+      var focusableStepElements = visibleStepInnerContent ? getFocusableElements(visibleStepInnerContent) : [];
 
       if (focusableStepElements && focusableStepElements.length) {
         focusableStepElements[0].focus();
       } else {
-        var nextButton = document.querySelector(".".concat(componentBlockClass, "__create-button"));
+        var nextButton = document.querySelector(".".concat(blockClass, "__create-button"));
         nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
       }
     }
-  }, [currentStep, getCreateComponentSteps, previousState, componentBlockClass]);
+  }, [currentStep, previousState, blockClass, onMount]);
 };