@carbon/ibm-products 2.17.2 → 2.18.0

package/lib/components/Guidebanner/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Guidebanner", {
+  enumerable: true,
+  get: function get() {
+    return _Guidebanner.Guidebanner;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElement", {
+  enumerable: true,
+  get: function get() {
+    return _GuidebannerElement.GuidebannerElement;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementButton", {
+  enumerable: true,
+  get: function get() {
+    return _GuidebannerElementButton.GuidebannerElementButton;
+  }
+});
+Object.defineProperty(exports, "GuidebannerElementLink", {
+  enumerable: true,
+  get: function get() {
+    return _GuidebannerElementLink.GuidebannerElementLink;
+  }
+});
+var _Guidebanner = require("./Guidebanner");
+var _GuidebannerElement = require("./GuidebannerElement");
+var _GuidebannerElementButton = require("./GuidebannerElementButton");
+var _GuidebannerElementLink = require("./GuidebannerElementLink");

package/lib/components/NonLinearReading/NonLinearReading.docs-page.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StoryDocsPage = require("../../global/js/utils/StoryDocsPage");
+var stories = _interopRequireWildcard(require("./NonLinearReading.stories"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var DocsPage = function DocsPage() {
+  return /*#__PURE__*/_react.default.createElement(_StoryDocsPage.StoryDocsPage, {
+    blocks: [{
+      story: stories.singleLevel
+    }, {
+      story: stories.multipleLevel
+    }, {
+      story: stories.withGradientBackground
+    }]
+  });
+};
+var _default = exports.default = DocsPage;

package/lib/components/NonLinearReading/NonLinearReading.js

@@ -0,0 +1,97 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NonLinearReading = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _icons = require("@carbon/react/icons");
+var _devtools = require("../../global/js/utils/devtools");
+var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
+var _settings = require("../../settings");
+var _excluded = ["children", "className", "definition", "theme"];
+/**
+ * Copyright IBM Corp. 2023, 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.
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(_settings.pkg.prefix, "--non-linear-reading");
+var componentName = 'NonLinearReading';
+
+// Default values for props
+var defaults = {
+  theme: 'light'
+};
+
+/**
+ * Use non-linear reading when space is limited to share a
+ * brief, at-a-glance, summary of a concept that may require
+ * more explanation for some users.
+ */
+var NonLinearReading = exports.NonLinearReading = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    definition = _ref.definition,
+    _ref$theme = _ref.theme,
+    theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setOpen = _useState2[1];
+  var contentId = (0, _react.useRef)((0, _uuidv.default)()).current;
+  var handleToggle = function handleToggle() {
+    setOpen(function (prevState) {
+      return !prevState;
+    });
+  };
+  return /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({}, rest, {
+    className: (0, _classnames.default)(blockClass, "".concat(blockClass, "__").concat(theme), className),
+    ref: ref
+  }, (0, _devtools.getDevtoolsProps)(componentName)), ' ', /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    "aria-controls": contentId,
+    "aria-expanded": isOpen,
+    className: (0, _classnames.default)("".concat(blockClass, "__keyword"), [isOpen ? ["".concat(blockClass, "__keyword-open")] : ["".concat(blockClass, "__keyword-closed")]]),
+    onClick: handleToggle
+  }, children, /*#__PURE__*/_react.default.createElement(_icons.ChevronDown, {
+    size: 16
+  })), ' ', /*#__PURE__*/_react.default.createElement("span", {
+    id: contentId,
+    className: "".concat(blockClass, "__body"),
+    hidden: !isOpen
+  }, isOpen && definition), ' ');
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.NonLinearReading = NonLinearReading = _settings.pkg.checkComponentEnabled(NonLinearReading, componentName);
+NonLinearReading.displayName = componentName;
+NonLinearReading.propTypes = {
+  /**
+   * The keyword of the component appears as a pill.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: _propTypes.default.string,
+  /**
+   * The content that appears when the keyword is toggled open.
+   */
+  definition: _propTypes.default.node.isRequired,
+  /**
+   * Determines the theme of the component.
+   */
+  theme: _propTypes.default.oneOf(['light', 'dark'])
+};

package/lib/components/NonLinearReading/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NonLinearReading", {
+  enumerable: true,
+  get: function get() {
+    return _NonLinearReading.NonLinearReading;
+  }
+});
+var _NonLinearReading = require("./NonLinearReading");

package/lib/components/SidePanel/SidePanel.js

@@ -336,9 +336,9 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
     if (!open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
       if (placement && placement === 'right' && pageContentElement) {
-        pageContentElement.style.marginRight = 0;
+        pageContentElement.style.marginInlineEnd = 0;
       } else if (pageContentElement) {
-        pageContentElement.style.marginLeft = 0;
+        pageContentElement.style.marginInlineStart = 0;
       }
     }
   }, [open, placement, selectorPageContent, slideIn]);
@@ -352,14 +352,15 @@ var SidePanel = exports.SidePanel = /*#__PURE__*/_react.default.forwardRef(funct
   (0, _react.useEffect)(function () {
     if (open && slideIn) {
       var pageContentElement = document.querySelector(selectorPageContent);
+      pageContentElement.style.inlineSize = 'auto';
       if (placement && placement === 'right' && pageContentElement) {
-        pageContentElement.style.marginRight = 0;
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-right ".concat(_motion.moderate02) : null;
-        pageContentElement.style.marginRight = _constants.SIDE_PANEL_SIZES[size];
+        pageContentElement.style.marginInlineEnd = 0;
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(_motion.moderate02) : null;
+        pageContentElement.style.marginInlineEnd = _constants.SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
-        pageContentElement.style.marginLeft = 0;
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-left ".concat(_motion.moderate02) : null;
-        pageContentElement.style.marginLeft = _constants.SIDE_PANEL_SIZES[size];
+        pageContentElement.style.marginInlineStart = 0;
+        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(_motion.moderate02) : null;
+        pageContentElement.style.marginInlineStart = _constants.SIDE_PANEL_SIZES[size];
       }
     }
   }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);

package/lib/components/TagSet/TagSet.js

@@ -20,10 +20,10 @@ var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _devtools = require("../../global/js/utils/devtools");
 var _propsHelper = require("../../global/js/utils/props-helper");
 var _settings = require("../../settings");
-var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags"],
+var _excluded = ["align", "allTagsModalTarget", "className", "maxVisible", "multiline", "overflowAlign", "overflowClassName", "overflowType", "allTagsModalTitle", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "showAllTagsLabel", "tags", "containingElementRef", "measurementOffset"],
   _excluded2 = ["label", "id"],
   _excluded3 = ["label"]; //
-// Copyright IBM Corp. 2020, 2022
+// 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.
@@ -39,6 +39,7 @@ var allTagsModalSearchThreshold = 10;
 // Default values for props
 var defaults = {
   align: 'start',
+  measurementOffset: 0,
   overflowAlign: 'bottom',
   overflowType: 'default'
 };
@@ -59,6 +60,9 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     allTagsModalSearchPlaceholderText = _ref.allTagsModalSearchPlaceholderText,
     showAllTagsLabel = _ref.showAllTagsLabel,
     tags = _ref.tags,
+    containingElementRef = _ref.containingElementRef,
+    _ref$measurementOffse = _ref.measurementOffset,
+    measurementOffset = _ref$measurementOffse === void 0 ? defaults.measurementOffset : _ref$measurementOffse,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(3),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -149,7 +153,9 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     // how many will fit?
     var willFit = 0;
     if (sizingTags.length > 0) {
-      var spaceAvailable = tagSetRef.current.offsetWidth;
+      var optionalContainingElement = containingElementRef === null || containingElementRef === void 0 ? void 0 : containingElementRef.current;
+      var measurementOffsetValue = typeof measurementOffset === 'number' ? measurementOffset : 0;
+      var spaceAvailable = optionalContainingElement ? optionalContainingElement.offsetWidth - measurementOffsetValue : tagSetRef.current.offsetWidth;
       for (var i in sizingTags) {
         var _sizingTags$i;
         var tagWidth = ((_sizingTags$i = sizingTags[i]) === null || _sizingTags$i === void 0 ? void 0 : _sizingTags$i.offsetWidth) || 0;
@@ -173,7 +179,7 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     } else {
       setDisplayCount(maxVisible ? Math.min(willFit, maxVisible) : willFit);
     }
-  }, [maxVisible, multiline, sizingTags, tagSetRef]);
+  }, [maxVisible, multiline, sizingTags, tagSetRef, measurementOffset, containingElementRef]);
   (0, _react.useEffect)(function () {
     checkFullyVisibleTags();
   }, [checkFullyVisibleTags, maxVisible, multiline, sizingTags]);
@@ -195,7 +201,8 @@ var TagSet = exports.TagSet = /*#__PURE__*/_react.default.forwardRef(function (_
     setShowAllModalOpen(false);
   };
   (0, _useResizeObserver.useResizeObserver)(sizingContainerRef, handleSizerTagsResize);
-  (0, _useResizeObserver.useResizeObserver)(tagSetRef, handleResize);
+  var resizeOption = containingElementRef ? containingElementRef : tagSetRef;
+  (0, _useResizeObserver.useResizeObserver)(resizeOption, handleResize);
   return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)([blockClass, className]),
     ref: tagSetRef
@@ -273,10 +280,20 @@ TagSet.propTypes = {
    * className
    */
   className: _propTypes.default.string,
+  /**
+   * Optional ref for custom resize container to measure available space
+   * Default will measure the available space of the TagSet container itself.
+   */
+  containingElementRef: _propTypes.default.object,
   /**
    * maximum visible tags
    */
   maxVisible: _propTypes.default.number,
+  /**
+   * Specify offset amount for measure available space, only used when `containingElementSelector`
+   * is also provided
+   */
+  measurementOffset: _propTypes.default.number,
   /**
    * display tags in multiple lines
    */

package/lib/components/WebTerminal/WebTerminal.js

@@ -164,9 +164,11 @@ var WebTerminal = exports.WebTerminal = /*#__PURE__*/_react.default.forwardRef(f
     onAnimationEnd: function onAnimationEnd(event) {
       return event.stopPropagation();
     }
-  })), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement(_react2.Theme, {
+    theme: "g100"
+  }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__body")
-  }, children)) : null;
+  }, children))) : null;
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/global/js/package-settings.js

@@ -78,7 +78,12 @@ var defaults = {
 
     // Novice to pro components not yet reviewed and released:
     Checklist: false,
-    InlineTip: false
+    Guidebanner: false,
+    GuidebannerElement: false,
+    GuidebannerElementButton: false,
+    GuidebannerElementLink: false,
+    InlineTip: false,
+    NonLinearReading: false
   },
   // feature level flags
   feature: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.17.2",
+  "version": "2.18.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -74,7 +74,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.22.10",
-    "@carbon/ibm-products-styles": "^2.17.2",
+    "@carbon/ibm-products-styles": "^2.18.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/sortable": "^7.0.2",
@@ -95,5 +95,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "7b7eda56917b98f508478035f87c17ca75c46375"
+  "gitHead": "a683f659e575d3ee051af4702703888070501824"
 }

package/scss/components/Carousel/_carbon-imports.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//

package/scss/components/Carousel/_carousel.scss

@@ -0,0 +1,72 @@
+//
+// Copyright IBM Corp. 2023, 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.
+//
+
+// Standard imports.
+@use '@carbon/layout/scss/convert' as *;
+@use '@carbon/react/scss/colors' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/type' as *;
+@use '../../global/styles/project-settings' as c4p-settings;
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+$block-class: #{c4p-settings.$pkg-prefix}--carousel;
+
+.#{$block-class} {
+  position: relative;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  &:focus {
+    outline: none;
+  }
+}
+.#{$block-class}__elements-container {
+  overflow: hidden;
+}
+.#{$block-class}__elements-container--scrolled,
+.#{$block-class}__elements-container--scroll-max {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  bottom: 0;
+  width: $spacing-07;
+  pointer-events: none;
+}
+
+.#{$block-class}__elements-container--scrolled {
+  left: 0;
+}
+
+.#{$block-class}__elements-container--scroll-max {
+  right: 0;
+}
+
+.#{$block-class}__elements {
+  display: flex;
+  overflow: scroll;
+  -ms-overflow-style: none;
+  scroll-behavior: smooth;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  /* stylelint-disable-next-line max-nesting-depth */
+  @media (prefers-reduced-motion) {
+    scroll-behavior: auto;
+  }
+}
+
+.#{$block-class}__elements::-webkit-scrollbar {
+  display: none;
+}

package/scss/components/Carousel/_index-with-carbon.scss

@@ -0,0 +1,9 @@
+//
+// 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.
+//
+
+@use './carbon-imports';
+@use './carousel';

package/scss/components/Carousel/_index.scss

@@ -0,0 +1,8 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use './carousel';

package/scss/components/FilterSummary/_filter-summary.scss

@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 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.
@@ -21,3 +21,8 @@ $block-class: #{$pkg-prefix}--filter-summary;
   border-top: 1px solid $border-subtle-01;
   background: $layer-01;
 }
+
+.#{$block-class}
+  .#{$pkg-prefix}--tag-set.#{$pkg-prefix}--tag-set.#{$block-class}__clear-button-inline {
+  width: auto;
+}

package/scss/components/Guidebanner/_carbon-imports.scss

@@ -0,0 +1,6 @@
+//
+// Copyright IBM Corp. 2020, 2021
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//