@carbon/ibm-products 1.22.0 → 1.24.0

package/es/components/EditTearsheet/preview-components/MultiFormEditTearsheet.js

@@ -0,0 +1,230 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/* eslint-disable react/prop-types */
+
+/**
+ * Copyright IBM Corp. 2022, 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 React, { useState } from 'react';
+import { Button, Column, InlineNotification, RadioButtonGroup, RadioButton, Row, TextInput, Toggle, NumberInput } from 'carbon-components-react';
+import cx from 'classnames';
+import { pkg } from '../../../settings';
+import { EditTearsheet } from '../EditTearsheet';
+import { EditTearsheetForm } from '../EditTearsheetForm';
+var blockClass = "".concat(pkg.prefix, "--tearsheet-edit-multi-form");
+export var MultiFormEditTearsheet = function MultiFormEditTearsheet(_ref) {
+  var cancelButtonText = _ref.cancelButtonText,
+      className = _ref.className,
+      description = _ref.description,
+      influencerWidth = _ref.influencerWidth,
+      label = _ref.label,
+      submitButtonText = _ref.submitButtonText,
+      title = _ref.title;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      hasSubmitError = _useState4[0],
+      setHasSubmitError = _useState4[1];
+
+  var _useState5 = useState('Topic name here'),
+      _useState6 = _slicedToArray(_useState5, 2),
+      formOneTextInputValue = _useState6[0],
+      setFormOneTextInputValue = _useState6[1];
+
+  var _useState7 = useState('Topic description here'),
+      _useState8 = _slicedToArray(_useState7, 2),
+      topicDescriptionValue = _useState8[0],
+      setTopicDescriptionValue = _useState8[1];
+
+  var _useState9 = useState('Topic value here'),
+      _useState10 = _slicedToArray(_useState9, 2),
+      topicVersionValue = _useState10[0],
+      setTopicVersionValue = _useState10[1];
+
+  var _useState11 = useState('Location here'),
+      _useState12 = _slicedToArray(_useState11, 2),
+      topicLocationValue = _useState12[0],
+      setTopicLocationValue = _useState12[1];
+
+  var _useState13 = useState(1),
+      _useState14 = _slicedToArray(_useState13, 2),
+      formTwoTextInputValue = _useState14[0],
+      setFormTwoTextInputValue = _useState14[1];
+
+  var _useState15 = useState('one-day'),
+      _useState16 = _slicedToArray(_useState15, 2),
+      formThreeTextInputValue = _useState16[0],
+      setFormThreeTextInputValue = _useState16[1];
+
+  var _useState17 = useState(false),
+      _useState18 = _slicedToArray(_useState17, 2),
+      isInvalid = _useState18[0],
+      setIsInvalid = _useState18[1];
+
+  var clearCreateData = function clearCreateData() {
+    setFormOneTextInputValue(formOneTextInputValue);
+    setTopicDescriptionValue(topicDescriptionValue);
+    setTopicVersionValue(topicVersionValue);
+    setTopicLocationValue(topicLocationValue);
+    setFormTwoTextInputValue(1);
+    setFormThreeTextInputValue('one-day');
+    setHasSubmitError(false);
+    setIsInvalid(false);
+    setOpen(false);
+  };
+
+  var handleModalClick = function handleModalClick() {
+    setOpen(!open);
+  };
+
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("style", null, ".".concat(blockClass, " { opacity: 0 }"), ";"), /*#__PURE__*/React.createElement(Button, {
+    onClick: handleModalClick
+  }, open ? 'Close EditTearsheet' : 'Open EditTearsheet'), /*#__PURE__*/React.createElement(EditTearsheet, {
+    influencerWidth: influencerWidth,
+    label: label,
+    className: cx(blockClass, className),
+    submitButtonText: submitButtonText,
+    cancelButtonText: cancelButtonText,
+    description: description,
+    title: title,
+    open: open,
+    onHandleModalClick: handleModalClick,
+    onClose: clearCreateData
+  }, /*#__PURE__*/React.createElement(EditTearsheetForm, {
+    title: "Topic name",
+    fieldsetLegendText: "Topic information",
+    subtitle: "This is the unique name used to recognize your topic",
+    description: "It will also be used by your producers and consumers as part of the connection information, so make it something easy to recognize."
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    labelText: "Topic name",
+    placeholder: "Enter topic name",
+    id: "tearsheet-multi-form-story-text-input-multi-form-1",
+    value: formOneTextInputValue,
+    onChange: function onChange(event) {
+      if (event.target.value.length) {
+        setIsInvalid(false);
+      }
+
+      setFormOneTextInputValue(event.target.value);
+    },
+    invalid: isInvalid,
+    invalidText: "This is a required field",
+    onBlur: function onBlur() {
+      if (!formOneTextInputValue.length) {
+        setIsInvalid(true);
+      }
+    }
+  }), /*#__PURE__*/React.createElement(TextInput, {
+    labelText: "Topic description (optional)",
+    id: "tearsheet-multi-form-story-text-input-multi-form-1-input-2",
+    value: topicDescriptionValue,
+    placeholder: "Enter topic description",
+    onChange: function onChange(event) {
+      return setTopicDescriptionValue(event.target.value);
+    }
+  }), /*#__PURE__*/React.createElement(TextInput, {
+    labelText: "Topic version (optional)",
+    id: "tearsheet-multi-form-story-text-input-multi-form-1-input-3",
+    value: topicVersionValue,
+    placeholder: "Enter topic version",
+    onChange: function onChange(event) {
+      return setTopicVersionValue(event.target.value);
+    }
+  }), hasSubmitError && /*#__PURE__*/React.createElement(InlineNotification, {
+    kind: "error",
+    title: "Error",
+    subtitle: "Resolve errors to continue",
+    onClose: function onClose() {
+      return setHasSubmitError(!hasSubmitError);
+    }
+  }), /*#__PURE__*/React.createElement(Toggle, {
+    className: "".concat(blockClass, "__error--toggle"),
+    id: "simulated-error-toggle",
+    size: "sm",
+    labelText: "Simulate error",
+    onToggle: function onToggle() {
+      return setHasSubmitError(!hasSubmitError);
+    },
+    toggled: hasSubmitError
+  })))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
+    title: "Location",
+    subtitle: "Custom form subtitle",
+    fieldsetLegendText: "",
+    description: "Custom form description (see storybook implementation for new custom form capability)"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/React.createElement(TextInput, {
+    value: topicLocationValue,
+    onChange: function onChange(event) {
+      return setTopicLocationValue(event.target.value);
+    },
+    id: "custom-form-input",
+    labelText: "Location",
+    placeholder: "Enter location"
+  })))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
+    title: "Partitions",
+    subtitle: "One or more partitions make up a topic. A partition is an ordered list of messages.",
+    description: "Partitions are distributed across the brokers in order to increase the scalability of your topic. You can also use them to distribute messages across the members of a consumer group.",
+    fieldsetLegendText: "Partition information"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 3,
+    lg: 3
+  }, /*#__PURE__*/React.createElement(NumberInput, {
+    id: "carbon-number",
+    min: 1,
+    max: 100,
+    value: formTwoTextInputValue,
+    label: "Partitions",
+    helperText: "1 partition is sufficient for getting started but, production systems often have more.",
+    invalidText: "Max partitions is 100, min is 1",
+    onChange: function onChange(event) {
+      return setFormTwoTextInputValue(event.imaginaryTarget.value);
+    }
+  })))), /*#__PURE__*/React.createElement(EditTearsheetForm, {
+    title: "Message retention",
+    subtitle: "This is how long messages are retained before they are deleted.",
+    description: "If your messages are not read by a consumer within this time, they will be missed.",
+    fieldsetLegendText: "Message retention scheduling"
+  }, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+    xlg: 8,
+    lg: 8,
+    md: 8,
+    sm: 8
+  }, /*#__PURE__*/React.createElement(RadioButtonGroup, {
+    legendText: "Message retention",
+    name: "radio-button-group",
+    defaultSelected: formThreeTextInputValue,
+    onChange: function onChange(value) {
+      return setFormThreeTextInputValue(value);
+    },
+    orientation: "vertical"
+  }, /*#__PURE__*/React.createElement(RadioButton, {
+    labelText: "A day",
+    value: "one-day",
+    id: "one-day"
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    labelText: "A week",
+    value: "one-week",
+    id: "one-week"
+  }), /*#__PURE__*/React.createElement(RadioButton, {
+    labelText: "A month",
+    value: "one-month",
+    id: "one-month"
+  })))))));
+};

package/es/components/EditTearsheetNarrow/EditTearsheetNarrow.js

@@ -0,0 +1,79 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "className"];
+
+/**
+ * Copyright IBM Corp. 2022, 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 portions of React that are needed.
+import React from 'react'; // Other standard imports.
+
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { pkg
+/*, carbon */
+} from '../../settings'; // Carbon and package components we use.
+
+/* TODO: @import(s) of carbon components and other package components. */
+// The block part of our conventional BEM class names (blockClass__E--M).
+
+var blockClass = "".concat(pkg.prefix, "--edit-tearsheet-narrow");
+var componentName = 'EditTearsheetNarrow'; // NOTE: the component SCSS is not imported here: it is rolled up separately.
+// Default values can be included here and then assigned to the prop params,
+// e.g. prop = defaults.prop,
+// This gathers default values together neatly and ensures non-primitive
+// values are initialized early to avoid react making unnecessary re-renders.
+// Note that default values are not required for props that are 'required',
+// nor for props where the component can apply undefined values reasonably.
+// Default values should be provided when the component needs to make a choice
+// or assumption when a prop is not supplied.
+// Default values for props
+// const defaults = {
+//   /* TODO: add defaults for relevant props if needed */
+// };
+
+/**
+ * TODO: A description of the component.
+ */
+
+export var EditTearsheetNarrow = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    className: cx(blockClass, // Apply the block class to the main HTML element
+    className, // Apply any supplied class names to the main HTML element.
+    // example: `${blockClass}__template-string-class-${kind}-n-${size}`,
+    {// switched classes dependant on props or state
+      // example: [`${blockClass}__here-if-small`]: size === 'sm',
+    }),
+    ref: ref,
+    role: "main"
+  }, getDevtoolsProps(componentName)), children);
+}); // Return a placeholder if not released and not enabled by feature flag
+
+EditTearsheetNarrow = pkg.checkComponentEnabled(EditTearsheetNarrow, componentName); // The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+
+EditTearsheetNarrow.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.
+
+EditTearsheetNarrow.propTypes = {
+  /**
+   * Provide the contents of the EditTearsheetNarrow.
+   */
+  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/EditTearsheetNarrow/index.js

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

package/es/components/PageHeader/PageHeaderUtils.js

@@ -118,6 +118,11 @@ export var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(
     if (!enableBreadcrumbScroll || !navigation) {
       // adjust sticky top if no navigation or breadcrumb is to stay on screen
       update.headerTopValue += update.breadcrumbRowHeight;
+    }
+
+    if (enableBreadcrumbScroll) {
+      // adjust header top value when scroll enabled for breadcrumb
+      update.headerTopValue -= navigation ? hasActionBar ? 0 : 10 : update.headerHeight;
     } // if (window) {
 
 

package/es/components/TagSet/TagSet.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowDirection", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
     _excluded2 = ["label", "id"],
     _excluded3 = ["label"];
 
@@ -43,6 +43,7 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       allTagsModalTargetIn = _ref.allTagsModalTarget,
       className = _ref.className,
       maxVisible = _ref.maxVisible,
+      multiline = _ref.multiline,
       _ref$overflowAlign = _ref.overflowAlign,
       overflowAlign = _ref$overflowAlign === void 0 ? defaults.overflowAlign : _ref$overflowAlign,
       overflowClassName = _ref.overflowClassName,
@@ -161,7 +162,11 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setDisplayedTags(newDisplayedTags);
   }, [displayCount, overflowAlign, overflowClassName, overflowDirection, showAllTagsLabel, tags]);
   var checkFullyVisibleTags = useCallback(function () {
-    // how many will fit?
+    if (multiline) {
+      return setDisplayCount(maxVisible);
+    } // how many will fit?
+
+
     var willFit = 0;
 
     if (sizingTags.length > 0) {
@@ -193,10 +198,10 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     } else {
       setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
     }
-  }, [maxVisible, sizingTags, tagSetRef]);
+  }, [maxVisible, multiline, sizingTags, tagSetRef]);
   useEffect(function () {
     checkFullyVisibleTags();
-  }, [checkFullyVisibleTags, maxVisible, sizingTags]);
+  }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
   /* don't know how to test resize */
 
   /* istanbul ignore next */
@@ -239,7 +244,7 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-hidden": true,
     ref: sizingContainerRef
   }, hiddenSizingTags), /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__tag-container"),
+    className: cx(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
     ref: displayedArea
   }, displayedTags)), (allTagsModalTarget ? createPortal : function (children) {
     return children;
@@ -316,6 +321,11 @@ TagSet.propTypes = {
    */
   maxVisible: PropTypes.number,
 
+  /**
+   * display tags in multiple lines
+   */
+  multiline: PropTypes.bool,
+
   /**
    * overflowAlign from the standard tooltip. Default center.
    */

package/es/components/WebTerminal/WebTerminal.js

@@ -23,7 +23,8 @@ import { pkg } from '../../settings'; // Carbon and package components we use.
 
 import { Close16 as Close, Help16 as Help } from '@carbon/icons-react';
 import { Button, OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
-import { moderate02 } from '@carbon/motion'; // The block part of our conventional BEM class names (blockClass__E--M).
+import { moderate02 } from '@carbon/motion';
+import { getDevtoolsProps } from '../../global/js/utils/devtools'; // The block part of our conventional BEM class names (blockClass__E--M).
 
 var componentName = 'WebTerminal';
 var blockClass = "".concat(pkg.prefix, "--web-terminal"); // Default values for props
@@ -90,9 +91,9 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     closeTerminal();
   };
 
-  return shouldRender ? /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+  return shouldRender ? /*#__PURE__*/React.createElement("div", _extends({}, _objectSpread(_objectSpread({}, rest), getDevtoolsProps(componentName)), {
     ref: ref,
-    className: cx([className, blockClass, (_ref3 = {}, _defineProperty(_ref3, "".concat(blockClass, "--open"), open), _defineProperty(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
+    className: cx([blockClass, className, (_ref3 = {}, _defineProperty(_ref3, "".concat(blockClass, "--open"), open), _defineProperty(_ref3, "".concat(blockClass, "--closed"), !open), _ref3)]),
     style: {
       animation: !prefersReducedMotion && webTerminalAnimationName
     },
@@ -104,6 +105,7 @@ export var WebTerminal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, showDocumentationLinks && /*#__PURE__*/React.createElement(OverflowMenu, {
     renderIcon: Help,
     iconDescription: documentationLinksIconDescription,
+    ariaLabel: documentationLinksIconDescription,
     menuOptionsClass: "".concat(blockClass, "__documentation-overflow"),
     size: "lg"
   }, documentationLinks.map(function (_ref4, i) {

package/es/components/index.js

@@ -37,4 +37,7 @@ export { EditSidePanel } from './EditSidePanel';
 export { OptionsTile } from './OptionsTile';
 export { InlineEdit } from './InlineEdit';
 export { DataSpreadsheet } from './DataSpreadsheet';
-export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle } from './Datagrid';
+export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle } from './Datagrid';
+export { EditTearsheet } from './EditTearsheet';
+export { EditTearsheetNarrow } from './EditTearsheetNarrow';
+export { EditFullPage } from './EditFullPage';

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

@@ -65,7 +65,10 @@ var defaults = {
     EditSidePanel: false,
     CancelableTextEdit: false,
     DataSpreadsheet: false,
-    Datagrid: false
+    Datagrid: false,
+    EditTearsheet: false,
+    EditTearsheetNarrow: false,
+    EditFullPage: false
     /* new component flags here - comment used by generate CLI */
 
   },