@carbon/ibm-products 2.0.0 → 2.1.0

package/lib/global/js/hooks/useRetrieveStepData.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRetrieveStepData = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+/**
+ * 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.
+ */
+
+/**
+ * This useEffect makes sure that every CreateTearsheetStep/CreateFullPageStep reports back it's
+ * title, secondaryLabel, introStep, and shouldIncludeStep data so that it can be sent to the CreateInfluencer.
+ * @param {object} useResetCreateComponent
+ * @param {object} useResetCreateComponent.stepsContext
+ * @param {number} useResetCreateComponent.stepNumber
+ * @param {boolean} useResetCreateComponent.introStep
+ * @param {boolean} useResetCreateComponent.shouldIncludeStep
+ * @param {string} useResetCreateComponent.secondaryLabel
+ * @param {string} useResetCreateComponent.title
+ */
+var useRetrieveStepData = function useRetrieveStepData(_ref) {
+  var stepsContext = _ref.stepsContext,
+    stepNumber = _ref.stepNumber,
+    introStep = _ref.introStep,
+    shouldIncludeStep = _ref.shouldIncludeStep,
+    secondaryLabel = _ref.secondaryLabel,
+    title = _ref.title;
+  (0, _react.useEffect)(function () {
+    if (stepsContext) {
+      stepsContext.setStepData(function (prev) {
+        var stepItem = {
+          title: title,
+          secondaryLabel: secondaryLabel,
+          introStep: introStep,
+          shouldIncludeStep: shouldIncludeStep
+        };
+        var previousItem = prev[stepNumber - 1];
+        if ((previousItem === null || previousItem === void 0 ? void 0 : previousItem.title) !== stepItem.title || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.secondaryLabel) !== stepItem.secondaryLabel || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.introStep) !== stepItem.introStep || (previousItem === null || previousItem === void 0 ? void 0 : previousItem.shouldIncludeStep) !== stepItem.shouldIncludeStep) {
+          var clone = (0, _toConsumableArray2.default)(prev);
+          clone[stepNumber - 1] = stepItem;
+          return clone;
+        }
+        return prev;
+      });
+    }
+  }, [shouldIncludeStep, title, secondaryLabel, introStep, stepsContext, stepNumber]);
+};
+exports.useRetrieveStepData = useRetrieveStepData;

package/lib/global/js/hooks/useValidCreateStepCount.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useValidCreateStepCount = void 0;
+var _react = require("react");
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+
+/**
+ * Logs a warning to console if an invalid number of steps are used with the given CreateComponent
+ * @param {number} stepCount
+ * @param {string} componentName
+ */
+var useValidCreateStepCount = function useValidCreateStepCount(stepCount, componentName) {
+  (0, _react.useEffect)(function () {
+    if (stepCount === 1) {
+      console.warn("".concat(componentName, ": ").concat(componentName, "s with one step are not permitted. If you require only one step, please use either the CreateTearsheetNarrow, CreateSidePanel, or CreateModal components."));
+    }
+  }, [stepCount, componentName]);
+};
+exports.useValidCreateStepCount = useValidCreateStepCount;

package/lib/global/js/hooks/useWindowResize.js

@@ -0,0 +1,73 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useWindowResize = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+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. 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.
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          */
+var windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined";
+var getWindowSize = function getWindowSize() {
+  if (!windowExists) {
+    return {
+      innerHeight: 0,
+      innerWidth: 0,
+      outerHeight: 0,
+      outerWidth: 0
+    };
+  }
+  var _window = _objectSpread({}, window),
+    innerHeight = _window.innerHeight,
+    innerWidth = _window.innerWidth,
+    outerHeight = _window.outerHeight,
+    outerWidth = _window.outerWidth;
+  return {
+    innerHeight: innerHeight,
+    innerWidth: innerWidth,
+    outerHeight: outerHeight,
+    outerWidth: outerWidth
+  };
+};
+var useWindowResize = function useWindowResize(effect, deps) {
+  var throttleInterval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  var windowSize = (0, _react.useRef)({});
+  var throttleTimeout = (0, _react.useRef)(null);
+  var doGetWindowSize = function doGetWindowSize() {
+    var newVal = {
+      previous: windowSize.current,
+      current: getWindowSize()
+    };
+
+    // call effect
+    effect(newVal);
+    windowSize.current = newVal.current;
+    throttleTimeout.current = null;
+  };
+  (0, _react.useLayoutEffect)(function () {
+    var handleResize = function handleResize() {
+      if (throttleInterval) {
+        if (throttleTimeout.current === null) {
+          throttleTimeout.current = setTimeout(doGetWindowSize, throttleInterval);
+        }
+      } else {
+        doGetWindowSize();
+      }
+    };
+    window.addEventListener('resize', handleResize);
+    doGetWindowSize();
+    return function () {
+      return window.removeEventListener('resize', handleResize);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+};
+exports.useWindowResize = useWindowResize;

package/lib/global/js/hooks/useWindowScroll.js

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useNearestScroll = useNearestScroll;
+exports.useWindowScroll = useWindowScroll;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = require("react");
+var _scrollableAncestor = require("../utils/scrollableAncestor");
+/**
+ * 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.
+ */
+
+var windowExists = (typeof window === "undefined" ? "undefined" : (0, _typeof2.default)(window)) !== "undefined";
+var useTargetScroll = function useTargetScroll(target, effect, deps, throttleInterval) {
+  var scrollPosition = (0, _react.useRef)({});
+  var throttleTimeout = (0, _react.useRef)(null);
+  var getScrollPosition = function getScrollPosition() {
+    if (!target || !windowExists && target === window) {
+      return {
+        scrollX: -1,
+        scrollY: -1
+      };
+    } //
+
+    var scrollX, scrollY;
+    if (target === window) {
+      scrollX = window.scrollX;
+      scrollY = window.scrollY;
+    } else {
+      scrollX = target.scrollLeft;
+      scrollY = target.scrollTop;
+    }
+    return {
+      scrollX: scrollX,
+      scrollY: scrollY
+    };
+  };
+  var doGetScrollPosition = function doGetScrollPosition() {
+    var newVal = {
+      previous: scrollPosition.current,
+      current: getScrollPosition()
+    };
+
+    // call effect
+    effect(newVal);
+    scrollPosition.current = newVal.current;
+    throttleTimeout.current = null;
+  };
+  (0, _react.useLayoutEffect)(function () {
+    var handleScroll = function handleScroll() {
+      if (throttleInterval) {
+        if (throttleTimeout.current === null) {
+          throttleTimeout.current = setTimeout(doGetScrollPosition, throttleInterval);
+        }
+      } else {
+        doGetScrollPosition();
+      }
+    };
+    if (target) {
+      target.addEventListener('scroll', handleScroll);
+      doGetScrollPosition();
+    }
+    return function () {
+      return target && target.removeEventListener('scroll', handleScroll);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, deps);
+};
+function useWindowScroll(effect, deps) {
+  var throttleInterval = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
+  return useTargetScroll(window, effect, deps, throttleInterval);
+}
+function useNearestScroll(ref, effect, deps) {
+  var throttle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  var scrollableTarget = (0, _scrollableAncestor.scrollableAncestor)(ref.current);
+  if (scrollableTarget && (document.body === scrollableTarget || scrollableTarget.contains(document.body))) {
+    scrollableTarget = window;
+  }
+  return useTargetScroll(scrollableTarget, effect, deps, throttle);
+}

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

@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _devtools = require("./utils/devtools");
+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. 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.
+//
+var defaults = {
+  prefix: 'c4p',
+  // by default only released components are set to true
+  component: {
+    // reviewed and released components:
+    AboutModal: true,
+    APIKeyModal: true,
+    Cascade: true,
+    CreateModal: true,
+    CreateFullPage: true,
+    CreateFullPageStep: true,
+    CreateSidePanel: true,
+    CreateTearsheetNarrow: true,
+    CreateTearsheet: true,
+    CreateTearsheetStep: true,
+    CreateTearsheetDivider: true,
+    EditInPlace: true,
+    EmptyState: true,
+    ErrorEmptyState: true,
+    ExportModal: true,
+    ExpressiveCard: true,
+    HTTPError403: true,
+    HTTPError404: true,
+    HTTPErrorOther: true,
+    ImportModal: true,
+    MultiAddSelect: true,
+    NotificationsPanel: true,
+    NoDataEmptyState: true,
+    NoTagsEmptyState: true,
+    NotFoundEmptyState: true,
+    NotificationsEmptyState: true,
+    OptionsTile: true,
+    PageHeader: true,
+    ProductiveCard: true,
+    RemoveModal: true,
+    Saving: true,
+    SidePanel: true,
+    SingleAddSelect: true,
+    StatusIcon: true,
+    TagSet: true,
+    Tearsheet: true,
+    TearsheetNarrow: true,
+    UnauthorizedEmptyState: true,
+    UserProfileImage: true,
+    WebTerminal: true,
+    WebTerminalContentWrapper: true,
+    WebTerminalProvider: true,
+    // other public components not yet reviewed and released:
+    Toolbar: false,
+    ToolbarButton: false,
+    ToolbarGroup: false,
+    EditSidePanel: false,
+    CancelableTextEdit: false,
+    DataSpreadsheet: false,
+    Datagrid: false,
+    EditTearsheet: false,
+    EditTearsheetNarrow: false,
+    EditFullPage: false,
+    EditUpdateCards: false
+    /* new component flags here - comment used by generate CLI */
+  },
+
+  // feature level flags
+  feature: {
+    'a-new-feature': false,
+    'default-portal-target-body': true,
+    'Datagrid.useInfiniteScroll': 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) {
+  return "Carbon for IBM Products (WARNING): Component \"".concat(property, "\" enabled via feature flags. This component has not yet completed its review process.");
+};
+var warningMessageFeature = function warningMessageFeature(property) {
+  return "Carbon for IBM Products (WARNING): Feature \"".concat(property, "\" enabled via feature flags.");
+};
+var errorMessageFeature = function errorMessageFeature(property) {
+  return "Carbon for IBM Products (Error): Feature \"".concat(property, "\" not enabled. To enable see the notes on feature flags in the README.");
+};
+var warningMessageAllComponents = 'Carbon for IBM Products (WARNING): All components enabled through use of setAllComponents. This includes components that have not yet completed their review process.';
+var warningMessageAllFeatures = 'Carbon for IBM Products (WARNING): All features enabled through use of setAllFeatures';
+
+// Values to represent overrides for component or feature settings.
+// Each value maps the initial value to the value that should be returned.
+var all = {
+  INITIAL: function INITIAL(v) {
+    return v;
+  },
+  ON: function ON() {
+    return true;
+  },
+  OFF: function OFF() {
+    return false;
+  }
+};
+var allComponents = all.INITIAL;
+var allFeatures = all.INITIAL;
+var silent = false;
+var component = new Proxy(_objectSpread({}, defaults.component), {
+  set: function set(target, property, value) {
+    if (target[property] !== true && !silent && value) {
+      // not already true, not silent, and now true
+      console.warn(warningMessageComponent(property));
+    }
+    target[property] = value;
+    return true; // value set
+  },
+  get: function get(target, property) {
+    var _target$property;
+    return allComponents((_target$property = target[property]) !== null && _target$property !== void 0 ? _target$property : false);
+  }
+});
+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));
+    }
+    target[property] = value;
+    return true; // value set
+  },
+  get: function get(target, property) {
+    var _target$property2;
+    return allFeatures((_target$property2 = target[property]) !== null && _target$property2 !== void 0 ? _target$property2 : false);
+  }
+});
+var _default = {
+  devtoolsAttribute: _devtools.devtoolsAttribute,
+  getDevtoolsId: _devtools.getDevtoolsId,
+  prefix: defaults.prefix,
+  component: component,
+  feature: feature,
+  isComponentEnabled: function isComponentEnabled(componentOrName) {
+    var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var componentName = (componentOrName === null || componentOrName === void 0 ? void 0 : componentOrName.displayName) || (componentOrName === null || componentOrName === void 0 ? void 0 : componentOrName.name) || componentOrName;
+    return byDefault ? defaults.component[componentName] : component[componentName];
+  },
+  isComponentPublic: function isComponentPublic(componentOrName) {
+    var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var componentName = (componentOrName === null || componentOrName === void 0 ? void 0 : componentOrName.displayName) || (componentOrName === null || componentOrName === void 0 ? void 0 : componentOrName.name) || componentOrName;
+    return Object.prototype.hasOwnProperty.call(byDefault ? defaults.component : component, componentName);
+  },
+  isFeatureEnabled: function isFeatureEnabled(featureName) {
+    var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return byDefault ? defaults.feature[featureName] : feature[featureName];
+  },
+  checkReportFeatureEnabled: function checkReportFeatureEnabled(featureName) {
+    if (feature[featureName]) {
+      // NOTE: Warning emitted if feature flag is enabled (see Proxy above)
+      return true;
+    } else {
+      console.error(errorMessageFeature(featureName));
+    }
+  },
+  isFeaturePublic: function isFeaturePublic(featureName) {
+    var byDefault = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    return Object.prototype.hasOwnProperty.call(byDefault ? defaults.feature : feature, featureName);
+  },
+  setAllComponents: function setAllComponents(enabled) {
+    enabled === true && !silent && console.warn(warningMessageAllComponents);
+    allComponents = enabled === true ? all.ON : enabled === false ? all.OFF : all.INITIAL;
+  },
+  setAllFeatures: function setAllFeatures(enabled) {
+    enabled === true && !silent && console.warn(warningMessageAllFeatures);
+    allFeatures = enabled === true ? all.ON : enabled === false ? all.OFF : all.INITIAL;
+  },
+  _silenceWarnings: function _silenceWarnings(value) {
+    // This will suppress console warnings when components or feature flags
+    // are enabled, and should only be used when this is not an issue, such
+    // as in internal test suites and storybook builds.
+    silent = value;
+  }
+};
+exports.default = _default;

package/lib/global/js/utils/ClickListener.js

@@ -0,0 +1,76 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ClickListener = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+
+// Import portions of React that are needed.
+
+// Other standard imports.
+
+/**
+ * Generic component used for reacting to a click event happening outside of a
+ * given `children` element. Adapted from carbon-react internal utilities, converted
+ * to use React hooks.
+ */
+var ClickListener = function ClickListener(_ref) {
+  var children = _ref.children,
+    onClickOutside = _ref.onClickOutside;
+  var targetElement = (0, _react.useRef)();
+  var getEventTarget = function getEventTarget(evt) {
+    // support Shadow DOM
+    if (evt.composed && typeof evt.composedPath === 'function') {
+      return evt.composedPath()[0];
+    }
+    return evt.target;
+  };
+  (0, _react.useEffect)(function () {
+    document.addEventListener('click', handleDocumentClick);
+    return function () {
+      document.removeEventListener('click', handleDocumentClick);
+    };
+  });
+  var handleDocumentClick = function handleDocumentClick(evt) {
+    if (targetElement && targetElement.current) {
+      if (targetElement.current.contains && !targetElement.current.contains(getEventTarget(evt))) {
+        onClickOutside(evt);
+      }
+    }
+  };
+  var handleRef = function handleRef(el) {
+    targetElement.current = el;
+    /**
+     * One important note, `children.ref` corresponds to a `ref` prop passed in
+     * directly to the child, not necessarily a `ref` defined in the component.
+     * This means that here we target the following `ref` location:
+     *
+     * <ClickListener onClickOutside={() => {}}>
+     *   <Child ref={targetedRefHere} />
+     * </ClickListener>
+     */
+    if (children.ref && typeof children.ref === 'function') {
+      children.ref(el);
+    }
+  };
+  return /*#__PURE__*/_react.default.cloneElement(children, {
+    ref: handleRef
+  });
+};
+exports.ClickListener = ClickListener;
+ClickListener.propTypes = {
+  children: _propTypes.default.element.isRequired,
+  onClickOutside: _propTypes.default.func.isRequired
+};

package/lib/global/js/utils/DisplayBox.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DisplayBox = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+/**
+ * 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.
+ */
+
+var blockClass = 'ccs-sb--display-box';
+var DisplayBox = function DisplayBox(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    msg = _ref.msg;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(blockClass, className)
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__indicator")
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__message")
+  }, msg || /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "width available to component", /*#__PURE__*/_react.default.createElement("br", null), "(use containerWidth control to adjust)")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__indicator--left")
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "".concat(blockClass, "__indicator--right")
+  })), children);
+};
+exports.DisplayBox = DisplayBox;
+DisplayBox.propTypes = {
+  children: _propTypes.default.node,
+  className: _propTypes.default.string,
+  msg: _propTypes.default.node
+};

package/lib/global/js/utils/Wrap.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrap = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _excluded = ["alwaysRender", "children", "element", "neverRender"];
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+// Import portions of React that are needed.
+// Other standard imports.
+// Examine a flat array of children to decide whether it is effectively empty.
+// If there are no children, or all the children are falsy, or all the non-falsy
+// children are themselves Wrap components that are empty, then return true.
+var isEmpty = function isEmpty(children) {
+  var result = true;
+  _react.default.Children.forEach(children, function (child) {
+    if (child) {
+      var _child$type, _child$props;
+      result && (result = (child === null || child === void 0 ? void 0 : (_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Wrap' && isEmpty(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children));
+    }
+  });
+  return result;
+};
+
+// Default values for props
+var defaults = {
+  element: 'div'
+};
+
+/**
+ * A simple conditional wrapper that encloses its children in a <div> (or other
+ * element if specified), passing any supplied attributes to the <div> (or other
+ * element). The component renders nothing at all if there are no children or
+ * the children are empty/falsy, or if all the non-falsy children are themselves
+ * Wrap components that do not wish to render. This behavior can be overridden
+ * by setting neverRender or alwaysRender to true. Note that if a ref is passed,
+ * the ref.current will be set to the wrapper element if it renders, and will
+ * remain undefined if it does not render.
+ */
+var Wrap = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var alwaysRender = _ref.alwaysRender,
+    children = _ref.children,
+    _ref$element = _ref.element,
+    Wrapper = _ref$element === void 0 ? defaults.element : _ref$element,
+    neverRender = _ref.neverRender,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (neverRender || isEmpty(children)) && !alwaysRender ? null : /*#__PURE__*/_react.default.createElement(Wrapper, (0, _extends2.default)({}, rest, {
+    ref: ref
+  }), children);
+});
+exports.Wrap = Wrap;
+Wrap.displayName = 'Wrap';
+Wrap.propTypes = {
+  /**
+   * Specify whether the wrapper element should render even if there are no
+   * children or the children are themselves empty wrappers. Useful if there
+   * are some conditions in which the wrapper element is still required. Note
+   * that this prop takes precedence over neverRender if both are set to true.
+   */
+  alwaysRender: _propTypes.default.bool,
+  /**
+   * The content of the wrapper element. If no children are supplied, or the
+   * resulting value(s) are falsy, or if all the non-falsy children are Wrap
+   * components that decide not to render, nothing will be rendered in the DOM.
+   */
+  children: _propTypes.default.node,
+  /**
+   * The element name or component to use as a wrapper for the content.
+   */
+  element: _propTypes.default.elementType,
+  /**
+   * Specify whether nothing should be rendered even if there are children
+   * in the content. Useful if there are some circumstances in which the
+   * component should not render at all. Note that if alwaysRender is also
+   * set to true then it will take precedence and the wrapper element and
+   * content will be rendered.
+   */
+  neverRender: _propTypes.default.bool
+};