@carbon/ibm-products 2.2.0 → 2.3.0

package/lib/global/js/hooks/useCreateComponentStepChange.js

@@ -37,6 +37,20 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
     componentBlockClass = _ref.componentBlockClass,
     setCreateComponentActions = _ref.setCreateComponentActions,
     setModalIsOpen = _ref.setModalIsOpen;
+  var continueToNextStep = (0, _react.useCallback)(function () {
+    setIsSubmitting(false);
+    setCurrentStep(function (prev) {
+      // Find next included step to render
+      // There will always be a next step otherwise we will
+      // have reach the onSubmit
+      do {
+        var _stepData;
+        prev++;
+      } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
+      return prev;
+    });
+  }, [setCurrentStep, setIsSubmitting, stepData]);
+
   // useEffect to handle multi step logic
   (0, _react.useEffect)(function () {
     var onUnmount = function onUnmount() {
@@ -164,9 +178,9 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
               // There will always be a previous step otherwise we will
               // have disabled the back button since we have reached the first visible step
               do {
-                var _stepData;
+                var _stepData2;
                 prev--;
-              } while (!((_stepData = stepData[prev - 1]) !== null && _stepData !== void 0 && _stepData.shouldIncludeStep));
+              } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
               return prev;
             });
           },
@@ -194,18 +208,5 @@ var useCreateComponentStepChange = function useCreateComponentStepChange(_ref) {
       setCreateComponentActions(buttons);
     }
   }, [firstIncludedStep, lastIncludedStep, stepData, onNext, isSubmitDisabled, backButtonText, cancelButtonText, currentStep, onClose, nextButtonText, submitButtonText, onRequestSubmit, isSubmitting, shouldViewAll, componentBlockClass, componentName, continueToNextStep, setCurrentStep, setCreateComponentActions, setIsSubmitting, setShouldViewAll, setModalIsOpen]);
-  var continueToNextStep = (0, _react.useCallback)(function () {
-    setIsSubmitting(false);
-    setCurrentStep(function (prev) {
-      // Find next included step to render
-      // There will always be a next step otherwise we will
-      // have reach the onSubmit
-      do {
-        var _stepData2;
-        prev++;
-      } while (!((_stepData2 = stepData[prev - 1]) !== null && _stepData2 !== void 0 && _stepData2.shouldIncludeStep));
-      return prev;
-    });
-  }, [setCurrentStep, setIsSubmitting, stepData]);
 };
 exports.useCreateComponentStepChange = useCreateComponentStepChange;

package/lib/global/js/hooks/useResizeObserver.js

@@ -14,13 +14,7 @@ var _react = require("react");
  * LICENSE file in the root directory of this source tree.
  */
 
-var useResizeObserver = function useResizeObserver(ref) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
-    callback: null,
-    throttleInterval: 0
-  };
-  var callback = options.callback,
-    throttleInterval = options.throttleInterval;
+var useResizeObserver = function useResizeObserver(ref, callback) {
   var _useState = (0, _react.useState)(0),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     width = _useState2[0],
@@ -29,8 +23,14 @@ var useResizeObserver = function useResizeObserver(ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     height = _useState4[0],
     setHeight = _useState4[1];
-  var throttleTimeout = (0, _react.useRef)(null);
   var entriesToHandle = (0, _react.useRef)(null);
+  var cb = (0, _react.useRef)(callback);
+  (0, _react.useEffect)(function () {
+    // ref for callback removes it as dependency fro useLayoutEffect
+    // This significantly reduces repeated calls if a function is redefined on every
+    // render
+    cb.current = callback;
+  }, [callback]);
   (0, _react.useLayoutEffect)(function () {
     if (!(ref !== null && ref !== void 0 && ref.current)) {
       return;
@@ -42,29 +42,15 @@ var useResizeObserver = function useResizeObserver(ref) {
       var entry = entriesToHandle.current[0];
       setWidth(entry.contentRect.width);
       setHeight(entry.contentRect.height);
-      throttleTimeout.current = null;
-      callback && callback(entry.contentRect);
+      cb.current && cb.current(entry.contentRect);
     };
     var observer = new ResizeObserver(function (entries) {
       // always update entriesToHandle
       entriesToHandle.current = entries;
-      if (throttleInterval) {
-        // if a throttleInterval check for running timeout
-        if (throttleTimeout.current === null) {
-          // no live timeout set entries to handle and move on
-
-          // set up throttle
-          throttleTimeout.current = setTimeout(function () {
-            // do callbacks
-            doCallbacks();
-            // reset throttle
-            throttleTimeout.current = null;
-          }, throttleInterval);
-        }
-      } else {
-        // no throttle do callbacks every time
+      window.requestAnimationFrame(function () {
+        // do callbacks
         doCallbacks();
-      }
+      });
     });
 
     // observe all refs passed
@@ -74,7 +60,7 @@ var useResizeObserver = function useResizeObserver(ref) {
       observer = null;
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref, options]);
+  }, [ref]);
   return {
     width: width,
     height: height

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

@@ -81,7 +81,15 @@ var defaults = {
     'a-new-feature': false,
     'default-portal-target-body': true,
     'Datagrid.useInfiniteScroll': false,
-    'Datagrid.useInlineEdit': false
+    'Datagrid.useInlineEdit': false,
+    'Datagrid.useEditableCell': false,
+    'Datagrid.useExpandedRow': false,
+    'Datagrid.useNestedRows': false,
+    'Datagrid.useActionsColumn': false,
+    'Datagrid.useFiltering': false,
+    'Datagrid.useCustomizeColumns': false,
+    'ExampleComponent.secondaryIcon': false,
+    'ExampleComponent.useExample': false
   }
 };
 var warningMessageComponent = function warningMessageComponent(property) {
@@ -128,6 +136,11 @@ var component = new Proxy(_objectSpread({}, defaults.component), {
 });
 var feature = new Proxy(_objectSpread({}, defaults.feature), {
   set: function set(target, property, value) {
+    // If we receive a feature flag that doesn't exist in our defaults we should not log
+    // a warning message and instead just return
+    if (!Object.getOwnPropertyDescriptor(defaults.feature, property)) {
+      return true;
+    }
     if (target[property] !== true && !silent && value) {
       // not already true, not silent, and now true
       console.warn(warningMessageFeature(property));

package/lib/global/js/utils/StoryDocsPage.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StoryDocsPage = exports.CustomBlocks = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _blocks = require("@storybook/blocks");
+var _changeCase = require("change-case");
+var _storyHelper = require("./story-helper");
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } /**
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 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.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+var CustomBlocks = function CustomBlocks(_ref) {
+  var blocks = _ref.blocks;
+  return blocks.map(function (block, index) {
+    var source = _objectSpread({}, block === null || block === void 0 ? void 0 : block.source);
+    if (source.code && !source.language) {
+      source.language = 'jsx';
+    }
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: "block-index--".concat(index)
+    }, block.title && /*#__PURE__*/_react.default.createElement("h3", {
+      id: (0, _changeCase.paramCase)(block.title)
+    }, block.title), block.subTitle && /*#__PURE__*/_react.default.createElement("h4", null, block.subTitle), block.description && typeof block.description === 'string' ? /*#__PURE__*/_react.default.createElement(_blocks.Description, null, block.description) : block.description, block.story && /*#__PURE__*/_react.default.createElement(_blocks.Canvas, {
+      of: block.story
+    }), block.source && /*#__PURE__*/_react.default.createElement(_blocks.Source, source));
+  });
+};
+
+/**
+ * This function checks blocks against stories and then
+ * - Adds title if no alternative is supplied
+ * - Adds blocks for unreferenced stories if omitUnreferencedStories is false
+ */
+exports.CustomBlocks = CustomBlocks;
+var processBlocks = function processBlocks(blocks, stories, omitUnreferencedStories) {
+  var blocksWithStoryTitles = blocks ? (0, _toConsumableArray2.default)(blocks) : [];
+  var restOfStories = [];
+  var storyKeys = Object.keys(stories);
+  storyKeys.forEach(function (sk) {
+    var story = stories[sk].moduleExport;
+    var storyName = stories[sk].name;
+    var matchingBlock = blocksWithStoryTitles.find(function (block) {
+      return block.story === story;
+    });
+    if (matchingBlock) {
+      var _matchingBlock$title;
+      matchingBlock.title = (_matchingBlock$title = matchingBlock.title) !== null && _matchingBlock$title !== void 0 ? _matchingBlock$title : storyName;
+    } else if (!omitUnreferencedStories) {
+      restOfStories.push({
+        story: story,
+        title: storyName
+      });
+    }
+  });
+  if (!omitUnreferencedStories) {
+    return blocksWithStoryTitles.concat(restOfStories);
+  }
+  return blocksWithStoryTitles;
+};
+
+/**
+ * Calling with no parameters will produce the default output.
+ * Customize by providing alternative values and/or blocks defining sections
+ * @param {*} param0
+ * @returns
+ */
+var StoryDocsPage = function StoryDocsPage(_ref2) {
+  var _csfFile$meta, _csfFile$meta$paramet, _processedBlocks$filt;
+  var altTitle = _ref2.altTitle,
+    altDescription = _ref2.altDescription,
+    altGuidelinesHref = _ref2.altGuidelinesHref,
+    blocks = _ref2.blocks,
+    omitCodedExample = _ref2.omitCodedExample,
+    omitUnreferencedStories = _ref2.omitUnreferencedStories;
+  var _useOf = (0, _blocks.useOf)('meta', ['meta']),
+    csfFile = _useOf.csfFile;
+  var storyInfo = (0, _storyHelper.storyDocsPageInfo)(csfFile);
+  var guidelinesHref = altGuidelinesHref !== null && altGuidelinesHref !== void 0 ? altGuidelinesHref : storyInfo.guidelinesHref;
+  var isFullScreen = (csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : (_csfFile$meta$paramet = _csfFile$meta.parameters) === null || _csfFile$meta$paramet === void 0 ? void 0 : _csfFile$meta$paramet.layout) === 'fullscreen' || false;
+  var storyHelperClass = isFullScreen ? 'c4p--story-docs-page--fullscreen' : '';
+  var processedBlocks = processBlocks(blocks, csfFile.stories, omitUnreferencedStories);
+  console.log(processBlocks);
+  var storyCount = (_processedBlocks$filt = processedBlocks === null || processedBlocks === void 0 ? void 0 : processedBlocks.filter(function (block) {
+    return !!block.story;
+  }).length) !== null && _processedBlocks$filt !== void 0 ? _processedBlocks$filt : 0;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_blocks.Title, null, altTitle !== null && altTitle !== void 0 ? altTitle : storyInfo.title), guidelinesHref ? guidelinesHref && Array.isArray(guidelinesHref) ? guidelinesHref.map(function (_ref3, index) {
+    var href = _ref3.href,
+      label = _ref3.label;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, index > 0 && ' | ', /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+      key: href,
+      href: href
+    }, label));
+  }) : /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+    href: guidelinesHref
+  }, altTitle ? "".concat(altTitle, " usage guidelines") : storyInfo.guidelinesLinkLabel) : null, /*#__PURE__*/_react.default.createElement("h2", {
+    style: {
+      marginTop: guidelinesHref ? '16px' : ''
+    }
+  }, "Table of contents"), /*#__PURE__*/_react.default.createElement("ul", null, ['Overview', 'Coded examples', 'Example usage', 'Component API'].map(function (item) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      key: item
+    }, /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+      href: "#".concat((0, _changeCase.paramCase)(item))
+    }, item), processedBlocks && item === 'Example usage' ? /*#__PURE__*/_react.default.createElement("ul", null, processedBlocks.map(function (block) {
+      return block !== null && block !== void 0 && block.title ? /*#__PURE__*/_react.default.createElement("li", {
+        key: block.title
+      }, /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+        href: "#".concat((0, _changeCase.paramCase)(block.title))
+      }, block.title)) : null;
+    })) : null);
+  })), /*#__PURE__*/_react.default.createElement("h2", {
+    id: "overview"
+  }, "Overview"), /*#__PURE__*/_react.default.createElement(_blocks.Description, null, altDescription), !omitCodedExample && storyInfo.expectCodedExample ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("h2", {
+    id: "coded-examples"
+  }, "Coded examples"), /*#__PURE__*/_react.default.createElement("p", null, "Coded examples can be edited and are a great way to try out a component."), /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", {
+    key: "codesandbox"
+  }, /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+    href: (0, _storyHelper.codeSandboxHref)(storyInfo.title)
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: {
+      height: '16px',
+      width: '16px',
+      color: 'black',
+      boxShadow: '0 0 0 2px white',
+      marginRight: '8px',
+      verticalAlign: '-2px'
+    }
+  }, /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 0h23.987v24H0V0Zm21.533 2.455v19.09H2.453V2.456h19.08Z",
+    fill: "currentColor"
+  })), "CodeSandbox")), /*#__PURE__*/_react.default.createElement("li", {
+    key: "stackblitz"
+  }, /*#__PURE__*/_react.default.createElement(_blocks.AnchorMdx, {
+    href: (0, _storyHelper.stackblitzHref)(storyInfo.title)
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: "https://c.staticblitz.com/assets/favicon_sb-861fe1b85c0dc928750c62de15fed96fc75e57ee366bd937bad17a3938917b3f.svg",
+    alt: "Stackblitz logo",
+    style: {
+      verticalAlign: '-2px',
+      marginRight: '8px'
+    }
+  }), "Stackblitz")))) : null, /*#__PURE__*/_react.default.createElement("h2", {
+    id: "example-usage"
+  }, "Example usage"), /*#__PURE__*/_react.default.createElement("div", {
+    className: storyHelperClass
+  }, processedBlocks ? /*#__PURE__*/_react.default.createElement(CustomBlocks, {
+    blocks: processedBlocks
+  }) : /*#__PURE__*/_react.default.createElement(_blocks.Stories, null)), /*#__PURE__*/_react.default.createElement("h2", {
+    id: "component-api"
+  }, "Component API"), storyCount > 1 && /*#__PURE__*/_react.default.createElement("p", null, "NOTE: Changing the controls below affects the default/primary example shown on the docs page."), /*#__PURE__*/_react.default.createElement(_blocks.Controls, null));
+};
+exports.StoryDocsPage = StoryDocsPage;
+StoryDocsPage.propTypes = {
+  /**
+   * Uses doc block from the component where possible.
+   *
+   * Note: use `export default { component: ExampleComponent }` in the story if the main component is wrapped by some
+   * additional code. This will allow the doc block to pass through.
+   *
+   * If passed as string treated as markdown.
+   */
+  altDescription: _propTypes.default.node,
+  /**
+   * location if any of guidelines on the PAL site, constructed by default
+   */
+  altGuidelinesHref: _propTypes.default.oneOfType(_propTypes.default.string, _propTypes.default.arrayOf(_propTypes.default.shape({
+    href: _propTypes.default.string,
+    label: _propTypes.default.string
+  }))),
+  /**
+   * Uses component name by default
+   */
+  altTitle: _propTypes.default.string,
+  /**
+   * Array with content sections
+   */
+  blocks: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * Optional title story name used by default<h3>
+     */
+    title: _propTypes.default.string,
+    /**
+     * Optional subTitle a <h4>
+     */
+    subTitle: _propTypes.default.string,
+    /**
+     * Optional description, strings treated as markdown.
+     */
+    description: _propTypes.default.node,
+    /**
+     * Story imported from story file
+     */
+    story: _propTypes.default.func,
+    /**
+     * Some source code
+     * default language `jsx`
+     */
+    source: _propTypes.default.shape({
+      language: _propTypes.default.oneOf('javascript', 'css', 'jsx'),
+      code: _propTypes.default.string
+    })
+  })),
+  /**
+   * Set to true if no published example exists (all components and patterns should have an example)
+   */
+  omitCodedExample: _propTypes.default.bool,
+  /**
+   * Stories unreferenced in blocks included by default
+   */
+  omitUnreferencedStories: _propTypes.default.bool
+};

package/lib/global/js/utils/story-helper.js

@@ -4,12 +4,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.prepareStory = exports.getStoryTitle = exports.getStoryId = exports.getSelectedCarbonTheme = exports.StackblitzLink = exports.CodesandboxLink = void 0;
+exports.storyDocsPageTitle = exports.storyDocsPageInfo = exports.storyDocsGuidelines = exports.stackblitzHref = exports.prepareStory = exports.palUsageHref = exports.getStoryTitle = exports.getStoryId = exports.getSelectedCarbonTheme = exports.codeSandboxHref = exports.StackblitzLink = exports.CodesandboxLink = void 0;
+var _toArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _csf = require("@storybook/csf");
 var _packageSettings = _interopRequireDefault(require("../package-settings"));
 var _storyStructure = require("../../../../../core/story-structure");
+var _changeCase = require("change-case");
 //
 // Copyright IBM Corp. 2021, 2021
 //
@@ -73,12 +76,15 @@ var prepareStory = function prepareStory(template, options) {
  */
 exports.prepareStory = prepareStory;
 var packagePath = 'github/carbon-design-system/ibm-products/tree/main/examples/carbon-for-ibm-products';
+var codeSandboxHref = function codeSandboxHref(exampleDirectory) {
+  return "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
+};
+exports.codeSandboxHref = codeSandboxHref;
 var CodesandboxLink = function CodesandboxLink(_ref) {
   var exampleDirectory = _ref.exampleDirectory;
-  // const stackblitz = `https://stackblitz.com/${packagePath}/${dir}?file=src%2FExample%2FExample.jsx`;
-  var codesandbox = "https://codesandbox.io/p/sandbox/".concat(packagePath, "/").concat(exampleDirectory, "?file=%2Fsrc%2FExample%2FExample.jsx");
+  var href = codeSandboxHref(exampleDirectory);
   return /*#__PURE__*/_react.default.createElement("a", {
-    href: codesandbox
+    href: href
   }, /*#__PURE__*/_react.default.createElement("img", {
     alt: "Edit on CodeSandbox",
     src: "https://codesandbox.io/static/img/play-codesandbox.svg"
@@ -91,11 +97,15 @@ CodesandboxLink.propTypes = {
    */
   exampleDirectory: _propTypes.default.string
 };
+var stackblitzHref = function stackblitzHref(exampleDirectory) {
+  return "https://stackblitz.com/".concat(packagePath, "/").concat(exampleDirectory, "?file=src%2FExample%2FExample.jsx");
+};
+exports.stackblitzHref = stackblitzHref;
 var StackblitzLink = function StackblitzLink(_ref2) {
   var exampleDirectory = _ref2.exampleDirectory;
-  var stackblitz = "https://stackblitz.com/".concat(packagePath, "/").concat(exampleDirectory, "?file=src%2FExample%2FExample.jsx");
+  var href = stackblitzHref(exampleDirectory);
   return /*#__PURE__*/_react.default.createElement("a", {
-    href: stackblitz
+    href: href
   }, /*#__PURE__*/_react.default.createElement("img", {
     alt: "Edit on Stackblitz",
     src: "https://c.staticblitz.com/assets/favicon_sb-861fe1b85c0dc928750c62de15fed96fc75e57ee366bd937bad17a3938917b3f.svg"
@@ -108,13 +118,111 @@ StackblitzLink.propTypes = {
    */
   exampleDirectory: _propTypes.default.string
 };
+var palUsageHref = function palUsageHref(csfFile) {
+  var _csfFile$meta;
+  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta = csfFile.meta) === null || _csfFile$meta === void 0 ? void 0 : _csfFile$meta.title;
+  var _title$split = title.split('/'),
+    _title$split2 = (0, _slicedToArray2.default)(_title$split, 3),
+    _pkg = _title$split2[0],
+    kind = _title$split2[1],
+    section = _title$split2[2];
+  if (/components|patterns/i.test(kind) && name) {
+    return "https://pages.github.ibm.com/cdai-design/pal/".concat(kind, "s/").concat((0, _changeCase.paramCase)(section), "/usage");
+  }
+};
+exports.palUsageHref = palUsageHref;
+var storyDocsPageTitle = function storyDocsPageTitle(csfFile) {
+  var _csfFile$meta2;
+  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta2 = csfFile.meta) === null || _csfFile$meta2 === void 0 ? void 0 : _csfFile$meta2.title;
+  var _title$split3 = title.split('/'),
+    _title$split4 = (0, _toArray2.default)(_title$split3),
+    _pkg = _title$split4[0],
+    kind = _title$split4[1],
+    a = _title$split4[2],
+    b = _title$split4[3],
+    rest = _title$split4.slice(4);
+  var component;
+  if (/components|patterns/i.test(kind)) {
+    // components and patterns have an additional level
+    component = b;
+  } else {
+    component = a;
+  }
+  var name = component.split('#')[0]; // canary always written as Example#canary};
+
+  if (name) {
+    if (rest.length > 0) {
+      return "".concat(name, " (").concat(rest.join(' '), ")");
+    } else {
+      return name;
+    }
+  }
+  console.error('Error: unable to parse title from metadata.');
+  return title;
+};
+exports.storyDocsPageTitle = storyDocsPageTitle;
+var storyDocsPageInfo = function storyDocsPageInfo(csfFile) {
+  var _csfFile$meta3;
+  var title = csfFile === null || csfFile === void 0 ? void 0 : (_csfFile$meta3 = csfFile.meta) === null || _csfFile$meta3 === void 0 ? void 0 : _csfFile$meta3.title;
+  var _title$split5 = title.split('/'),
+    _title$split6 = (0, _toArray2.default)(_title$split5),
+    pkg = _title$split6[0],
+    kind = _title$split6[1],
+    a = _title$split6[2],
+    b = _title$split6[3],
+    rest = _title$split6.slice(4);
+  var result = {
+    package: pkg,
+    kind: kind,
+    expectCodedExample: false
+  };
+  var component;
+  if (/components|patterns/i.test(kind)) {
+    result.expectCodedExample = true;
+    // components and patterns have an additional level
+    component = b;
+    result.section = a;
+    result.guidelinesHref = "https://pages.github.ibm.com/cdai-design/pal/".concat(kind, "s/").concat((0, _changeCase.paramCase)(result.section), "/usage");
+  } else {
+    component = a;
+  }
+  var nameSplit = component.split('#'); // canary always written as Example#canary};
+  var name = nameSplit[0];
+  if (nameSplit.length > 1 && nameSplit[1] === 'canary') {
+    result.canary = true;
+  }
+  if (name) {
+    if (rest.length > 0) {
+      result.component = result.title = "".concat(name, " (").concat(rest.join(' '), ")");
+    } else {
+      result.component = name;
+      result.title = name;
+    }
+  } else {
+    console.error('Error: unable to parse title from metadata.');
+    result.title = title;
+  }
+  if (result.guidelinesHref) {
+    result.guidelinesLinkLabel = "".concat(result.title, " usage guidelines");
+  }
+  return result;
+};
+exports.storyDocsPageInfo = storyDocsPageInfo;
+var storyDocsGuidelines = function storyDocsGuidelines(csfFile) {
+  var storyInfo = storyDocsPageInfo(csfFile);
+  return {
+    href: storyInfo.guidelinesHref,
+    label: storyInfo.guidelinesLinkLabel
+  };
+};
 
 /**
  * A helper function that finds the designated theme on the Storybook canvas.
  * @returns "dark" or "light"
  */
+exports.storyDocsGuidelines = storyDocsGuidelines;
 var getSelectedCarbonTheme = function getSelectedCarbonTheme() {
-  var themeId = document.querySelector('html').getAttribute('storybook-carbon-theme');
+  var themeId = document.querySelector('[storybook-carbon-theme]').getAttribute('storybook-carbon-theme');
   return themeId === 'g90' || themeId === 'g100' ? 'dark' : 'light';
 };
 exports.getSelectedCarbonTheme = getSelectedCarbonTheme;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -56,7 +56,7 @@
   "devDependencies": {
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.22.1",
-    "babel-preset-ibm-cloud-cognitive": "^0.14.37",
+    "babel-preset-ibm-cloud-cognitive": "^0.14.36",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
     "copyfiles": "^2.4.1",
@@ -64,7 +64,7 @@
     "fs-extra": "^11.1.1",
     "glob": "^10.2.6",
     "jest": "^29.5.0",
-    "jest-config-ibm-cloud-cognitive": "^0.24.24",
+    "jest-config-ibm-cloud-cognitive": "^0.24.23",
     "jest-environment-jsdom": "^29.5.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.10.12",
@@ -94,5 +94,5 @@
     "react": "^16.8.6 || ^17.0.1",
     "react-dom": "^16.8.6 || ^17.0.1"
   },
-  "gitHead": "36a061543213748633227ce75ea1441e1edaca7d"
+  "gitHead": "921bd04d38883be8c837181166e3b8156210a24f"
 }

package/scss/components/AddSelect/_add-select.scss

@@ -77,6 +77,10 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
     align-items: center;
   }
 
+  &-form-control-wrapper--radio {
+    cursor: pointer;
+  }
+
   &-form-control-label-wrapper {
     display: flex;
     margin-left: $spacing-05;
@@ -141,7 +145,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
   border-bottom: 1px solid $layer-accent-01;
 
   .#{$block-class}__sidebar-title {
-    @include type.type-style('productive-heading-02');
+    @include type.type-style('heading-compact-02');
   }
 }
 
@@ -173,7 +177,7 @@ $tearsheet-class: #{$pkg-prefix}--tearsheet;
 }
 
 .#{$block-class} .#{$block-class}__sidebar-item-body {
-  @include type.type-style('body-long-01');
+  @include type.type-style('body-01');
 
   margin-bottom: $spacing-05;
 }
@@ -338,15 +342,15 @@ button.#{$block-class}__global-filter-toggle {
 }
 
 .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-title {
-  @include type.type-style('productive-heading-03');
+  @include type.type-style('heading-03');
 }
 
 .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-title {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 }
 
 .#{$block-class}__meta-panel p.#{$block-class}__meta-panel-entry-body {
-  @include type.type-style('body-short-01');
+  @include type.type-style('body-compact-01');
 }
 
 // overrides
@@ -387,7 +391,7 @@ button.#{$block-class}__global-filter-toggle {
 }
 
 .#{$block-class} .#{$block-class}__items-label {
-  @include type.type-style('productive-heading-01');
+  @include type.type-style('heading-compact-01');
 }
 
 .#{$block-class}

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -92,6 +92,5 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
 
 .#{$_block-class}__overflow-menu-options.#{$_block-class}__overflow-menu-options {
   // Need to disable stylelint until dart sass namespace support is added
-  /* stylelint-disable-next-line function-no-unknown */
   z-index: utilities.z('header');
 }