@carbon/ibm-products 2.43.2-canary.308 → 2.43.2-canary.317

package/es/index.js

@@ -20,6 +20,14 @@ export { CreateTearsheet } from './components/CreateTearsheet/CreateTearsheet.js
 export { CreateTearsheetStep } from './components/CreateTearsheet/CreateTearsheetStep.js';
 export { CreateTearsheetDivider } from './components/CreateTearsheet/CreateTearsheetDivider.js';
 export { CreateTearsheetNarrow } from './components/CreateTearsheetNarrow/CreateTearsheetNarrow.js';
+export { EmptyState } from './components/EmptyStates/EmptyState.js';
+export { EmptyStateV2 } from './components/EmptyStates/EmptyStateV2.js';
+export { ErrorEmptyState } from './components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
+export { NoDataEmptyState } from './components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
+export { NoTagsEmptyState } from './components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
+export { NotFoundEmptyState } from './components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
+export { NotificationsEmptyState } from './components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
+export { UnauthorizedEmptyState } from './components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 export { ExportModal } from './components/ExportModal/ExportModal.js';
 export { ExpressiveCard } from './components/ExpressiveCard/ExpressiveCard.js';
 export { ImportModal } from './components/ImportModal/ImportModal.js';
@@ -97,14 +105,6 @@ export { GetStartedCard } from './components/GetStartedCard/GetStartedCard.js';
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from './components/FeatureFlags/index.js';
 export { usePrefix } from './global/js/hooks/usePrefix.js';
 export { ActionBar } from './components/ActionBar/ActionBar.js';
-export { EmptyState } from './components/EmptyStates/EmptyState.js';
-export { EmptyStateV2 } from './components/EmptyStates/EmptyStateV2.js';
-export { ErrorEmptyState } from './components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
-export { NoDataEmptyState } from './components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
-export { NoTagsEmptyState } from './components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
-export { NotFoundEmptyState } from './components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
-export { NotificationsEmptyState } from './components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
-export { UnauthorizedEmptyState } from './components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 export { HTTPError403 } from './components/HTTPErrors/HTTPError403/HTTPError403.js';
 export { HTTPError404 } from './components/HTTPErrors/HTTPError404/HTTPError404.js';
 export { HTTPErrorOther } from './components/HTTPErrors/HTTPErrorOther/HTTPErrorOther.js';

package/lib/components/AddSelect/AddSelectBody.js

@@ -14,6 +14,14 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var Tearsheet = require('../Tearsheet/Tearsheet.js');
 var TearsheetNarrow = require('../Tearsheet/TearsheetNarrow.js');
+require('../EmptyStates/EmptyState.js');
+require('../EmptyStates/EmptyStateV2.js');
+require('../EmptyStates/ErrorEmptyState/ErrorEmptyState.js');
+require('../EmptyStates/NoDataEmptyState/NoDataEmptyState.js');
+require('../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js');
+var NotFoundEmptyState = require('../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js');
+require('../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js');
+require('../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js');
 var AddSelectSidebar = require('./AddSelectSidebar.js');
 var AddSelectBreadcrumbs = require('./AddSelectBreadcrumbs.js');
 var AddSelectList = require('./AddSelectList.js');
@@ -25,7 +33,6 @@ var useItemSort = require('./hooks/useItemSort.js');
 var useParentSelect = require('./hooks/useParentSelect.js');
 var usePath = require('./hooks/usePath.js');
 var settings = require('../../settings.js');
-var NotFoundEmptyState = require('../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js');
 
 var _excluded = ["className", "clearFiltersText", "closeIconDescription", "columnInputPlaceholder", "defaultModifiers", "description", "filterByLabel", "globalFilterOpts", "globalFiltersLabel", "globalFiltersIconDescription", "globalFiltersPlaceholderText", "globalFiltersPrimaryButtonText", "globalFiltersSecondaryButtonText", "globalSearchLabel", "globalSearchPlaceholder", "globalSortBy", "illustrationTheme", "influencerTitle", "items", "itemsLabel", "metaIconDescription", "metaPanelTitle", "multi", "navIconDescription", "noResultsDescription", "noResultsTitle", "noSelectionDescription", "noSelectionTitle", "normalizedItems", "onClose", "onCloseButtonText", "onSubmit", "onSubmitButtonText", "open", "portalTarget", "searchResultsTitle", "sortByLabel", "title", "useNormalizedItems"];
 var blockClass = "".concat(settings.pkg.prefix, "--add-select");

package/lib/components/AddSelect/AddSelectSidebar.js

@@ -11,9 +11,9 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var React = require('react');
 var react = require('@carbon/react');
 var index = require('../../_virtual/index.js');
+var NoDataEmptyState = require('../EmptyStates/NoDataEmptyState/NoDataEmptyState.js');
 var settings = require('../../settings.js');
 var AddSelectMetaPanel = require('./AddSelectMetaPanel.js');
-var NoDataEmptyState = require('../EmptyStates/NoDataEmptyState/NoDataEmptyState.js');
 
 var _excluded = ["meta", "icon", "avatar"];
 var blockClass = "".concat(settings.pkg.prefix, "--add-select__sidebar");

package/lib/components/Carousel/Carousel.js

@@ -14,6 +14,7 @@ var CarouselItem = require('./CarouselItem.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["children", "className", "disableArrowScroll", "fadedEdgeColor", "onChangeIsScrollable", "onScroll"];
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -56,6 +57,8 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var carouselRef = React.useRef(null);
   var scrollRef = React.useRef(null);
+  var leftFadedEdgeRef = React.useRef(null);
+  var rightFadedEdgeRef = React.useRef(null);
   // Array of refs used to reference this component's children DOM elements
   var childElementsRef = React.useRef(Array(React.Children.count(children)).fill(React.useRef(null)));
   var leftFadedEdgeColor = _rollupPluginBabelHelpers.typeof(fadedEdgeColor) === 'object' ? fadedEdgeColor === null || fadedEdgeColor === void 0 ? void 0 : fadedEdgeColor.left : fadedEdgeColor;
@@ -266,6 +269,16 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     };
   }, [handleScrollNext, handleScrollPrev, handleScrollReset, handleScrollToView]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (leftFadedEdgeRef !== null && leftFadedEdgeRef !== void 0 && leftFadedEdgeRef.current && leftFadedEdgeRef.current.style) {
+      leftFadedEdgeRef.current.style.background = "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)");
+    }
+  }, [leftFadedEdgeRef, leftFadedEdgeColor]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (rightFadedEdgeRef !== null && rightFadedEdgeRef !== void 0 && rightFadedEdgeRef.current && rightFadedEdgeRef.current.style) {
+      rightFadedEdgeRef.current.style.background = "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)");
+    }
+  }, [rightFadedEdgeRef, rightFadedEdgeColor]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     tabIndex: -1,
     className: cx(blockClass, className),
@@ -283,15 +296,11 @@ var Carousel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }, child);
   })), leftFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__elements-container--scrolled"),
-    style: {
-      background: "linear-gradient(90deg, ".concat(leftFadedEdgeColor, ", transparent)")
-    }
+    ref: leftFadedEdgeRef,
+    className: "".concat(blockClass, "__elements-container--scrolled")
   }), rightFadedEdgeColor && /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__elements-container--scroll-max"),
-    style: {
-      background: "linear-gradient(270deg, ".concat(rightFadedEdgeColor, ", transparent)")
-    }
+    ref: rightFadedEdgeRef,
+    className: "".concat(blockClass, "__elements-container--scroll-max")
   })));
 });
 Carousel.displayName = componentName;

package/lib/components/Checklist/ChecklistChart.js

@@ -40,12 +40,28 @@ function (_ref, ref) {
   var numDegrees = clamp(value * 360, 0, 360);
   var circleColor = theme === Checklist_types.Themes.light ? index.gray20 : index.gray70; // $ui-03 (-ish)
   var progressColor = index.purple50;
+  React.useEffect(function () {
+    var ele = document.getElementsByClassName("".concat(blockClass));
+    setTimeout(function () {
+      var _iterator = _rollupPluginBabelHelpers.createForOfIteratorHelper(ele),
+        _step;
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var el = _step.value;
+          if (el instanceof HTMLElement) {
+            el.style.setProperty('background-image', "conic-gradient(".concat(progressColor, " ").concat(numDegrees, "deg, ").concat(circleColor, " ").concat(numDegrees, "deg 360deg)"));
+            el.style.setProperty('border-radius', '50%');
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    }, 0);
+  });
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
-    style: {
-      backgroundImage: "conic-gradient(".concat(progressColor, " ").concat(numDegrees, "deg, ").concat(circleColor, " ").concat(numDegrees, "deg 360deg)"),
-      borderRadius: '50%'
-    },
     ref: ref,
     role: "img"
   }, devtools.getDevtoolsProps(componentName)));

package/lib/components/Coachmark/Coachmark.js

@@ -41,7 +41,6 @@ var defaults = {
  */
 
 exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _positionTune$y, _positionTune$x;
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? defaults.align : _ref$align,
     autoAlign = _ref.autoAlign,
@@ -85,6 +84,7 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _coachmarkRef = ref || backupRef;
   var _overlayRef = overlayRef || overlayBackupRef;
   var portalNode = React.useRef(null);
+  var popoverRef = React.useRef(null);
   useIsomorphicEffect.useIsomorphicEffect(function () {
     var _document$querySelect, _document, _document2, _document3;
     portalNode.current = portalTarget ? (_document$querySelect = (_document = document) === null || _document === void 0 ? void 0 : _document.querySelector(portalTarget)) !== null && _document$querySelect !== void 0 ? _document$querySelect : (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.querySelector('body') : (_document3 = document) === null || _document3 === void 0 ? void 0 : _document3.querySelector('body');
@@ -130,10 +130,6 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setShouldResetPosition(true);
     }
   };
-  var overlayPositionStyle = {
-    top: ((_positionTune$y = positionTune === null || positionTune === void 0 ? void 0 : positionTune.y) !== null && _positionTune$y !== void 0 ? _positionTune$y : 0) - 16,
-    left: ((_positionTune$x = positionTune === null || positionTune === void 0 ? void 0 : positionTune.x) !== null && _positionTune$x !== void 0 ? _positionTune$x : 0) - 16
-  };
   var contextValue = {
     buttonProps: {
       'aria-expanded': isOpen,
@@ -164,6 +160,19 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       setIsOpen(true);
     }
   }, [shouldResetPosition]);
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    var _positionTune$y, _positionTune$x;
+    var overlayPositionStyle = {
+      top: "".concat(((_positionTune$y = positionTune === null || positionTune === void 0 ? void 0 : positionTune.y) !== null && _positionTune$y !== void 0 ? _positionTune$y : 0) - 16, "px"),
+      left: "".concat(((_positionTune$x = positionTune === null || positionTune === void 0 ? void 0 : positionTune.x) !== null && _positionTune$x !== void 0 ? _positionTune$x : 0) - 16, "px")
+    };
+    if (popoverRef.current && popoverRef.current.style && overlayPositionStyle) {
+      var combinedStyle = _rollupPluginBabelHelpers.objectSpread2({
+        position: 'absolute'
+      }, overlayPositionStyle);
+      Object.assign(popoverRef.current.style, combinedStyle);
+    }
+  }, [popoverRef, positionTune]);
 
   // On unmount:
   // - DO NOT "Close()" the coachmark.
@@ -195,9 +204,7 @@ exports.Coachmark = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   portalNode === null || portalNode === void 0 ? void 0 : portalNode.current)) : /*#__PURE__*/React.createElement(react.Popover, {
     highContrast: true,
     caret: true,
-    style: _rollupPluginBabelHelpers.objectSpread2({
-      position: 'absolute'
-    }, overlayPositionStyle),
+    ref: popoverRef,
     align: align,
     autoAlign: autoAlign,
     open: isOpen

package/lib/components/Coachmark/CoachmarkOverlay.js

@@ -19,6 +19,7 @@ var CoachmarkHeader = require('./CoachmarkHeader.js');
 var constants = require('./utils/constants.js');
 var context = require('./utils/context.js');
 var enums = require('./utils/enums.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 var _excluded = ["children", "onClose", "fixedIsVisible", "className", "kind", "theme"];
 
@@ -83,26 +84,27 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }
   };
-  var styledTune = {};
-  if (isBeacon || isDraggable) {
-    if (coachmark.targetRect) {
-      styledTune.left = coachmark.targetRect.x + window.scrollX;
-      styledTune.top = coachmark.targetRect.y + window.scrollY;
-    }
-    if (styledTune.left && styledTune.top) {
-      if (isBeacon) {
-        // Compensate for radius of beacon
-        styledTune.left += 16;
-        styledTune.top += 16;
+  var styledTune = React.useMemo(function () {
+    var style = {};
+    if (isBeacon || isDraggable) {
+      if (coachmark.targetRect) {
+        style.left = coachmark.targetRect.x + window.scrollX;
+        style.top = coachmark.targetRect.y + window.scrollY;
       }
-      if (isDraggable) {
-        // Compensate for width and height of target element
-        var offsetTune = constants.getOffsetTune(coachmark, kind);
-        styledTune.left += offsetTune.left;
-        styledTune.top += offsetTune.top;
+      if (style.left && style.top) {
+        if (isBeacon) {
+          style.left = style.left + 16;
+          style.top = style.top + 16;
+        }
+        if (isDraggable) {
+          var offsetTune = constants.getOffsetTune(coachmark, kind);
+          style.left = style.left + offsetTune.left;
+          style.top = style.top + offsetTune.top;
+        }
       }
     }
-  }
+    return style;
+  }, [isBeacon, isDraggable, coachmark, kind]);
   function handleDragBounds(x, y) {
     var xRes = x;
     var yRes = y;
@@ -141,10 +143,19 @@ exports.CoachmarkOverlay = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     overlay.style.bottom = 'auto';
   }
   var contentId = uuidv4.default();
+  useIsomorphicEffect.useIsomorphicEffect(function () {
+    if (overlayRef.current) {
+      var _overlayRef$current;
+      var currentStyle = (_overlayRef$current = overlayRef.current) === null || _overlayRef$current === void 0 ? void 0 : _overlayRef$current.style;
+      Object.keys(styledTune).forEach(function (key) {
+        var value = styledTune[key];
+        currentStyle.setProperty(key, "".concat(value, "px"));
+      });
+    }
+  }, [styledTune, overlayRef]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, "".concat(blockClass, "--").concat(kind), "".concat(blockClass, "__").concat(theme), (isBeacon || isDraggable) && "".concat(blockClass, "--").concat(coachmark.align), fixedIsVisible && "".concat(blockClass, "--is-visible"), a11yDragMode && "".concat(blockClass, "--is-dragmode"), className),
     ref: overlayRef,
-    style: styledTune,
     "aria-labelledby": contentId,
     tabIndex: -1
   }, devtools.getDevtoolsProps(componentName)), isDraggable ? /*#__PURE__*/React.createElement(CoachmarkDragbar.CoachmarkDragbar, {

package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js

@@ -13,10 +13,14 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var React = require('react');
 var settings = require('../../../settings.js');
 var react = require('@carbon/react');
+var EmptyState = require('../../EmptyStates/EmptyState.js');
+require('../../EmptyStates/EmptyStateV2.js');
 var ErrorEmptyState = require('../../EmptyStates/ErrorEmptyState/ErrorEmptyState.js');
 var NoDataEmptyState = require('../../EmptyStates/NoDataEmptyState/NoDataEmptyState.js');
+require('../../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js');
 var NotFoundEmptyState = require('../../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js');
-var EmptyState = require('../../EmptyStates/EmptyState.js');
+require('../../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js');
+require('../../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js');
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var DatagridEmptyBody = function DatagridEmptyBody(datagridState) {

package/lib/components/EmptyStates/EmptyState.d.ts

@@ -17,7 +17,7 @@ export declare const defaults: {
     position: string;
     size: sizes;
 };
-interface EmptyStateProps {
+export interface EmptyStateProps {
     /**
      * Empty state action button
      */

package/lib/components/EmptyStates/EmptyState.js

@@ -9,6 +9,13 @@
 
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var EmptyStateV2 = require('./EmptyStateV2.js');
+require('./ErrorEmptyState/ErrorEmptyState.js');
+require('./NoDataEmptyState/NoDataEmptyState.js');
+require('./NoTagsEmptyState/NoTagsEmptyState.js');
+require('./NotFoundEmptyState/NotFoundEmptyState.js');
+require('./NotificationsEmptyState/NotificationsEmptyState.js');
+require('./UnauthorizedEmptyState/UnauthorizedEmptyState.js');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var react = require('@carbon/react');
@@ -16,7 +23,6 @@ var devtools = require('../../global/js/utils/devtools.js');
 require('../../global/js/utils/props-helper.js');
 var settings = require('../../settings.js');
 var EmptyStateContent = require('./EmptyStateContent.js');
-var EmptyStateV2 = require('./EmptyStateV2.js');
 
 var _excluded = ["v2"],
   _excluded2 = ["action", "className", "illustration", "illustrationDescription", "illustrationPosition", "link", "size", "subtitle", "title"];

package/lib/components/EmptyStates/EmptyStateV2.d.ts

@@ -6,7 +6,7 @@
  */
 import React, { ReactNode } from 'react';
 import '../../global/js/utils/props-helper';
-interface EmptyStateV2Props {
+export interface EmptyStateV2Props {
     /**
      * Props for the action button. Refer to the Carbon Components button documentation for full list of props.
      */
@@ -64,4 +64,3 @@ interface EmptyStateV2Props {
  * In order to avoid breaking changes in the future `EmptyStateV2` is not actually directly importable.
  */
 export declare let EmptyStateV2: React.ForwardRefExoticComponent<EmptyStateV2Props & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.d.ts

@@ -8,7 +8,7 @@
 import React, { ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-interface ErrorEmptyStateProps {
+export interface ErrorEmptyStateProps {
     /**
      * Empty state action button
      */
@@ -61,4 +61,3 @@ interface ErrorEmptyStateProps {
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
 export declare let ErrorEmptyState: React.ForwardRefExoticComponent<ErrorEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/EmptyStates/ErrorEmptyState/index.d.ts

@@ -1 +1,8 @@
-export { ErrorEmptyState } from "./ErrorEmptyState";
+/**
+ * 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.
+ */
+export { ErrorEmptyState } from './ErrorEmptyState';
+export type { ErrorEmptyStateProps } from './ErrorEmptyState';

package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.d.ts

@@ -8,7 +8,7 @@
 import React, { ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-interface NoDataEmptyStateProps {
+export interface NoDataEmptyStateProps {
     /**
      * Empty state action button
      */
@@ -61,4 +61,3 @@ interface NoDataEmptyStateProps {
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
 export declare let NoDataEmptyState: React.ForwardRefExoticComponent<NoDataEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/EmptyStates/NoDataEmptyState/index.d.ts

@@ -1 +1,8 @@
-export { NoDataEmptyState } from "./NoDataEmptyState";
+/**
+ * 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.
+ */
+export { NoDataEmptyState } from './NoDataEmptyState';
+export type { NoDataEmptyStateProps } from './NoDataEmptyState';

package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.d.ts

@@ -8,7 +8,7 @@
 import React, { ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-interface NoTagsEmptyStateProps {
+export interface NoTagsEmptyStateProps {
     /**
      * Empty state action button
      */
@@ -61,4 +61,3 @@ interface NoTagsEmptyStateProps {
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
 export declare let NoTagsEmptyState: React.ForwardRefExoticComponent<NoTagsEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/EmptyStates/NoTagsEmptyState/index.d.ts

@@ -1 +1,8 @@
-export { NoTagsEmptyState } from "./NoTagsEmptyState";
+/**
+ * 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.
+ */
+export { NoTagsEmptyState } from './NoTagsEmptyState';
+export type { NoTagsEmptyStateProps } from './NoTagsEmptyState';

package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts

@@ -8,7 +8,7 @@
 import React, { ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-interface NotFoundEmptyStateProps {
+export interface NotFoundEmptyStateProps {
     /**
      * Empty state action button
      */
@@ -61,4 +61,3 @@ interface NotFoundEmptyStateProps {
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
 export declare let NotFoundEmptyState: React.ForwardRefExoticComponent<NotFoundEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/EmptyStates/NotFoundEmptyState/index.d.ts

@@ -1 +1,8 @@
-export { NotFoundEmptyState } from "./NotFoundEmptyState";
+/**
+ * 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.
+ */
+export { NotFoundEmptyState } from './NotFoundEmptyState';
+export type { NotFoundEmptyStateProps } from './NotFoundEmptyState';

package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.d.ts

@@ -8,7 +8,7 @@
 import React, { ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-interface NotificationsEmptyStateProps {
+export interface NotificationsEmptyStateProps {
     /**
      * Empty state action button
      */
@@ -61,4 +61,3 @@ interface NotificationsEmptyStateProps {
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
 export declare let NotificationsEmptyState: React.ForwardRefExoticComponent<NotificationsEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/EmptyStates/NotificationsEmptyState/index.d.ts

@@ -1 +1,8 @@
-export { NotificationsEmptyState } from "./NotificationsEmptyState";
+/**
+ * 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.
+ */
+export { NotificationsEmptyState } from './NotificationsEmptyState';
+export type { NotificationsEmptyStateProps } from './NotificationsEmptyState';

package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.d.ts

@@ -8,7 +8,7 @@
 import React, { ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-interface UnauthorizedEmptyStateProps {
+export interface UnauthorizedEmptyStateProps {
     /**
      * Empty state action button
      */
@@ -61,4 +61,3 @@ interface UnauthorizedEmptyStateProps {
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
 export declare let UnauthorizedEmptyState: React.ForwardRefExoticComponent<UnauthorizedEmptyStateProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/EmptyStates/UnauthorizedEmptyState/index.d.ts

@@ -1 +1,8 @@
-export { UnauthorizedEmptyState } from "./UnauthorizedEmptyState";
+/**
+ * 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.
+ */
+export { UnauthorizedEmptyState } from './UnauthorizedEmptyState';
+export type { UnauthorizedEmptyStateProps } from './UnauthorizedEmptyState';

package/lib/components/EmptyStates/index.d.ts

@@ -1,8 +1,22 @@
-export { EmptyState } from "./EmptyState";
-export { EmptyStateV2 } from "./EmptyStateV2";
-export { ErrorEmptyState } from "./ErrorEmptyState";
-export { NoDataEmptyState } from "./NoDataEmptyState";
-export { NoTagsEmptyState } from "./NoTagsEmptyState";
-export { NotFoundEmptyState } from "./NotFoundEmptyState";
-export { NotificationsEmptyState } from "./NotificationsEmptyState";
-export { UnauthorizedEmptyState } from "./UnauthorizedEmptyState";
+/**
+ * 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.
+ */
+export { EmptyState } from './EmptyState';
+export { EmptyStateV2 } from './EmptyStateV2';
+export { ErrorEmptyState } from './ErrorEmptyState';
+export { NoDataEmptyState } from './NoDataEmptyState';
+export { NoTagsEmptyState } from './NoTagsEmptyState';
+export { NotFoundEmptyState } from './NotFoundEmptyState';
+export { NotificationsEmptyState } from './NotificationsEmptyState';
+export { UnauthorizedEmptyState } from './UnauthorizedEmptyState';
+export type { EmptyStateProps } from './EmptyState';
+export type { EmptyStateV2Props } from './EmptyStateV2';
+export type { ErrorEmptyStateProps } from './ErrorEmptyState';
+export type { NoDataEmptyStateProps } from './NoDataEmptyState';
+export type { NoTagsEmptyStateProps } from './NoTagsEmptyState';
+export type { NotFoundEmptyStateProps } from './NotFoundEmptyState';
+export type { NotificationsEmptyStateProps } from './NotificationsEmptyState';
+export type { UnauthorizedEmptyStateProps } from './UnauthorizedEmptyState';

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -11,6 +11,14 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var React = require('react');
+require('../EmptyStates/EmptyState.js');
+require('../EmptyStates/EmptyStateV2.js');
+require('../EmptyStates/ErrorEmptyState/ErrorEmptyState.js');
+require('../EmptyStates/NoDataEmptyState/NoDataEmptyState.js');
+require('../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js');
+require('../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js');
+var NotificationsEmptyState = require('../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js');
+require('../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
@@ -21,7 +29,6 @@ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMo
 var wrapFocus = require('../../global/js/utils/wrapFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
-var NotificationsEmptyState = require('../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js');
 
 var _Close;
 var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "selectorsFloatingMenus", "triggerButtonRef"];

package/lib/components/UserAvatar/UserAvatar.d.ts

@@ -41,7 +41,7 @@ type UserAvatarBaseProps = {
     /**
      * Provide a custom icon to use if you need to use an icon other than the default one
      */
-    renderIcon?: React.ElementType;
+    renderIcon?: React.ElementType | string;
     /**
      * Set the size of the avatar circle
      */

package/lib/components/UserAvatar/UserAvatar.js

@@ -125,7 +125,8 @@ exports.UserAvatar.displayName = componentName;
 // See https://www.npmjs.com/package/prop-types#usage.
 exports.UserAvatar.propTypes = {
   /**
-   * Provide the background color need to be set for UserAvatar.
+   * Provide the background color need to be set for UserAvatar. Background color will be set based on lighter or darker theme.
+   * For example: if you select order-5-purple, it will take $purple-60 for lighter theme and $purple-50 for darker theme.
    */
   backgroundColor: index.default.oneOf(['order-1-cyan', 'order-2-gray', 'order-3-green', 'order-4-magenta', 'order-5-purple', 'order-6-teal', 'order-7-cyan', 'order-8-gray', 'order-9-green', 'order-10-magenta', 'order-11-purple', 'order-12-teal']),
   /**
@@ -153,7 +154,7 @@ exports.UserAvatar.propTypes = {
    * Provide a custom icon to use if you need to use an icon other than the default one
    */
   /**@ts-ignore */
-  renderIcon: index.default.oneOfType([index.default.func, index.default.object]),
+  renderIcon: index.default.oneOfType([index.default.func, index.default.object, index.default.string]),
   /**
    * Set the size of the avatar circle
    */