@carbon/ibm-products 2.65.0 → 2.66.0

package/lib/components/ScrollGradient/ScrollGradient.js

@@ -16,87 +16,81 @@ var settings = require('../../settings.js');
 var constants = require('./constants.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["children", "className", "color", "onScroll", "scrollElementClassName", "getScrollElementRef", "hideStartGradient"];
-var blockClass = "".concat(settings.pkg.prefix, "--scroll-gradient");
-var componentName = 'ScrollGradient';
+const blockClass = `${settings.pkg.prefix}--scroll-gradient`;
+const componentName = 'ScrollGradient';
 
 // Default values for props
-var defaults = {
-  color: "var(--".concat(settings.carbon.prefix, "-layer-01)"),
+const defaults = {
+  color: `var(--${settings.carbon.prefix}-layer-01)`,
   hideStartGradient: false,
-  onScroll: function onScroll() {},
-  getScrollElementRef: function getScrollElementRef() {}
+  onScroll: () => {},
+  getScrollElementRef: () => {}
 };
 
 /**
  * TODO: A description of the component.
  */
-exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? defaults.color : _ref$color,
-    _ref$onScroll = _ref.onScroll,
-    onScroll = _ref$onScroll === void 0 ? defaults.onScroll : _ref$onScroll,
-    scrollElementClassName = _ref.scrollElementClassName,
-    _ref$getScrollElement = _ref.getScrollElementRef,
-    getScrollElementRef = _ref$getScrollElement === void 0 ? defaults.getScrollElementRef : _ref$getScrollElement,
-    _ref$hideStartGradien = _ref.hideStartGradient,
-    hideStartGradient = _ref$hideStartGradien === void 0 ? defaults.hideStartGradient : _ref$hideStartGradien,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var intersectionStartRef = React.useRef();
-  var intersectionEndRef = React.useRef();
-  var intersectionLeftRef = React.useRef();
-  var intersectionRightRef = React.useRef();
-  var scrollContainer = React.useRef(undefined);
-  var contentChildrenContainer = React.useRef(undefined);
-  var _useIsOverflow = constants.useIsOverflow(scrollContainer),
-    xScrollable = _useIsOverflow.xScrollable,
-    yScrollable = _useIsOverflow.yScrollable;
-  var gradientRight = yScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetWidth - contentChildrenContainer.current.offsetWidth : 0;
-  var gradientBottom = xScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetHeight - contentChildrenContainer.current.offsetHeight : 0;
-  var _useState = React.useState(constants.ScrollStates.NONE),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 1),
-    verticalPosition = _useState2[0];
-  var _useState3 = React.useState(constants.ScrollStates.NONE),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 1),
-    horizontalPosition = _useState4[0];
-  var startVerticalRef = React.useRef(null);
-  var startHorizontalRef = React.useRef(null);
-  var endVerticalRef = React.useRef(null);
-  var endHorizontalRef = React.useRef(null);
-  useIsomorphicEffect.useIsomorphicEffect(function () {
+exports.ScrollGradient = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    color = defaults.color,
+    onScroll = defaults.onScroll,
+    scrollElementClassName,
+    getScrollElementRef = defaults.getScrollElementRef,
+    hideStartGradient = defaults.hideStartGradient,
+    ...rest
+  } = _ref;
+  const intersectionStartRef = React.useRef();
+  const intersectionEndRef = React.useRef();
+  const intersectionLeftRef = React.useRef();
+  const intersectionRightRef = React.useRef();
+  const scrollContainer = React.useRef(undefined);
+  const contentChildrenContainer = React.useRef(undefined);
+  const {
+    xScrollable,
+    yScrollable
+  } = constants.useIsOverflow(scrollContainer);
+  const gradientRight = yScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetWidth - contentChildrenContainer.current.offsetWidth : 0;
+  const gradientBottom = xScrollable && scrollContainer.current && contentChildrenContainer.current ? scrollContainer.current.offsetHeight - contentChildrenContainer.current.offsetHeight : 0;
+  const [verticalPosition] = React.useState(constants.ScrollStates.NONE);
+  const [horizontalPosition] = React.useState(constants.ScrollStates.NONE);
+  const startVerticalRef = React.useRef(null);
+  const startHorizontalRef = React.useRef(null);
+  const endVerticalRef = React.useRef(null);
+  const endHorizontalRef = React.useRef(null);
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     // start vertical styles
     startVerticalRef.current.style.right = gradientRight;
-    startVerticalRef.current.style.backgroundImage = "linear-gradient(0deg, transparent, ".concat(color, " 90%)");
+    startVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, transparent, ${color} 90%)`;
     // start horizontal styles
-    startHorizontalRef.current.backgroundImage = "linear-gradient(-90deg, transparent, ".concat(color, " 90%)");
+    startHorizontalRef.current.backgroundImage = `linear-gradient(-90deg, transparent, ${color} 90%)`;
     startHorizontalRef.current.bottom = gradientBottom;
     // end vertical styles
     endVerticalRef.current.style.right = gradientRight;
     endVerticalRef.current.style.bottom = gradientBottom;
-    endVerticalRef.current.style.backgroundImage = "linear-gradient(0deg, ".concat(color, " 10%, transparent)");
+    endVerticalRef.current.style.backgroundImage = `linear-gradient(0deg, ${color} 10%, transparent)`;
     // end horizontal styles
     endHorizontalRef.current.style.right = gradientRight;
     endHorizontalRef.current.style.bottom = gradientBottom;
-    endHorizontalRef.current.style.backgroundImage = "linear-gradient(-90deg, ".concat(color, " 10%, transparent)");
+    endHorizontalRef.current.style.backgroundImage = `linear-gradient(-90deg, ${color} 10%, transparent)`;
   }, [color, gradientRight, gradientBottom]);
-  var setGradientOnIntersection = function setGradientOnIntersection(entry, gradientRef) {
+  const setGradientOnIntersection = (entry, gradientRef) => {
     if (gradientRef.current) {
       if (entry.isIntersecting) {
         gradientRef.current.style.opacity = 0;
         gradientRef.current.style.display = 'none';
-        gradientRef === null || gradientRef === void 0 || gradientRef.current.setAttribute('aria-hidden', false);
+        gradientRef?.current.setAttribute('aria-hidden', false);
       } else {
         gradientRef.current.style.opacity = 1;
         gradientRef.current.style.display = 'block';
-        gradientRef === null || gradientRef === void 0 || gradientRef.current.setAttribute('aria-hidden', true);
+        gradientRef?.current.setAttribute('aria-hidden', true);
       }
     }
   };
-  React.useEffect(function () {
-    var observer = new IntersectionObserver(function (entries) {
-      entries.forEach(function (entry) {
+  React.useEffect(() => {
+    const observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
         if (entry.target.hasAttribute('data-start-vertical')) {
           setGradientOnIntersection(entry, startVerticalRef);
         }
@@ -119,29 +113,32 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     observer.observe(intersectionEndRef.current);
     observer.observe(intersectionLeftRef.current);
     observer.observe(intersectionRightRef.current);
-    var startVerticalRefValue = intersectionStartRef.current;
-    var endVerticalRefValue = intersectionEndRef.current;
-    var startHorizontalRefValue = intersectionLeftRef.current;
-    var endHorizontalRefValue = intersectionRightRef.current;
-    return function () {
+    const startVerticalRefValue = intersectionStartRef.current;
+    const endVerticalRefValue = intersectionEndRef.current;
+    const startHorizontalRefValue = intersectionLeftRef.current;
+    const endHorizontalRefValue = intersectionRightRef.current;
+    return () => {
       observer.unobserve(startVerticalRefValue);
       observer.unobserve(endVerticalRefValue);
       observer.unobserve(startHorizontalRefValue);
       observer.unobserve(endHorizontalRefValue);
     };
   }, []);
-  var setRefs = function setRefs(element) {
+  const setRefs = element => {
     scrollContainer.current = element;
     getScrollElementRef(element);
   };
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: cx(blockClass, "".concat(blockClass, "--x-").concat(horizontalPosition.toLowerCase()), "".concat(blockClass, "--y-").concat(verticalPosition.toLowerCase()), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--x-scrollable"), xScrollable), "".concat(blockClass, "--y-scrollable"), yScrollable), className),
+    className: cx(blockClass, `${blockClass}--x-${horizontalPosition.toLowerCase()}`, `${blockClass}--y-${verticalPosition.toLowerCase()}`, {
+      [`${blockClass}--x-scrollable`]: xScrollable,
+      [`${blockClass}--y-scrollable`]: yScrollable
+    }, className),
     ref: ref,
     role: "presentation"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
     onScroll: onScroll,
     ref: setRefs,
-    className: cx("".concat(blockClass, "__content"), scrollElementClassName),
+    className: cx(`${blockClass}__content`, scrollElementClassName),
     tabIndex: 0
   }, /*#__PURE__*/React.createElement("span", {
     ref: intersectionStartRef,
@@ -151,7 +148,7 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "data-start-horizontal": true
   }), /*#__PURE__*/React.createElement("div", {
     ref: contentChildrenContainer,
-    className: "".concat(blockClass, "__content-children")
+    className: `${blockClass}__content-children`
   }, children), /*#__PURE__*/React.createElement("span", {
     ref: intersectionEndRef,
     "data-end-vertical": true
@@ -160,22 +157,22 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "data-end-horizontal": true
   })), !hideStartGradient && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     ref: startVerticalRef,
-    className: "".concat(blockClass, "__start-vertical"),
+    className: `${blockClass}__start-vertical`,
     role: "presentation",
     "aria-hidden": true
   }), /*#__PURE__*/React.createElement("div", {
     ref: startHorizontalRef,
-    className: "".concat(blockClass, "__start-horizontal"),
+    className: `${blockClass}__start-horizontal`,
     role: "presentation",
     "aria-hidden": true
   })), /*#__PURE__*/React.createElement("div", {
     ref: endVerticalRef,
-    className: "".concat(blockClass, "__end-vertical"),
+    className: `${blockClass}__end-vertical`,
     role: "presentation",
     "aria-hidden": true
   }), /*#__PURE__*/React.createElement("div", {
     ref: endHorizontalRef,
-    className: "".concat(blockClass, "__end-horizontal"),
+    className: `${blockClass}__end-horizontal`,
     role: "presentation",
     "aria-hidden": true
   }));

package/lib/components/ScrollGradient/constants.js

@@ -7,44 +7,31 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 
-var ScrollStates = {
+const ScrollStates = {
   // No scrolling required because content fits within container.
   NONE: 'NONE'};
 
 // FUNCTIONS
 
-var useIsOverflow = function useIsOverflow(ref) {
-  var _useState = React.useState(),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    isHorizontallyScrollable = _useState2[0],
-    setIsHorizontallyScrollable = _useState2[1];
-  var _useState3 = React.useState(),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    isVerticallyScrollable = _useState4[0],
-    setIsVerticallyScrollable = _useState4[1];
-  var _useState5 = React.useState(),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    mutationObserver = _useState6[0],
-    setMutationObserver = _useState6[1];
-  var _useState7 = React.useState(),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    resizeObserver = _useState8[0],
-    setResizeObserver = _useState8[1];
-  var checkOverflow = React.useCallback(function () {
+const useIsOverflow = ref => {
+  const [isHorizontallyScrollable, setIsHorizontallyScrollable] = React.useState();
+  const [isVerticallyScrollable, setIsVerticallyScrollable] = React.useState();
+  const [mutationObserver, setMutationObserver] = React.useState();
+  const [resizeObserver, setResizeObserver] = React.useState();
+  const checkOverflow = React.useCallback(() => {
     if (!ref.current) {
       return;
     }
     setIsHorizontallyScrollable(ref.current.scrollWidth > ref.current.clientWidth);
     setIsVerticallyScrollable(ref.current.scrollHeight > ref.current.clientHeight);
   }, [ref]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (!mutationObserver) {
       return;
     }
-    return function () {
+    return () => {
       if (mutationObserver) {
         mutationObserver.disconnect();
       }
@@ -53,8 +40,10 @@ var useIsOverflow = function useIsOverflow(ref) {
       }
     };
   });
-  React.useLayoutEffect(function () {
-    var current = ref.current;
+  React.useLayoutEffect(() => {
+    const {
+      current
+    } = ref;
     if (current) {
       if ('ResizeObserver' in window && !resizeObserver) {
         setResizeObserver(new ResizeObserver(checkOverflow).observe(current));

package/lib/components/SearchBar/SearchBar.d.ts

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { PropsWithChildren } from 'react';
+import React, { PropsWithChildren, ReactNode } from 'react';
 type Scopes = string[] | object[];
 export interface SearchBarProps extends PropsWithChildren {
     /** @type {string} Optional additional class name. */
@@ -24,11 +24,11 @@ export interface SearchBarProps extends PropsWithChildren {
     /** @type {string} Placeholder text to be displayed in the search input. */
     placeholderText: string;
     /** @type {Function} Function to get the text for each scope to display in dropdown. */
-    scopeToString?: () => void;
+    scopeToString?: (item: string | object) => string;
     /** @type {Array<any>} Array of allowed search scopes. */
     scopes?: Scopes;
     /** @type {string} The name text for the search scope type. */
-    scopesTypeLabel?: typeof conditionalScopePropValidator;
+    scopesTypeLabel?: NonNullable<ReactNode>;
     /** @type {Array<any> Array of initially selected search scopes. */
     selectedScopes?: Scopes;
     /**
@@ -36,7 +36,7 @@ export interface SearchBarProps extends PropsWithChildren {
      * By default, scope items are sorted in ascending alphabetical order,
      * with "selected" items moved to the start of the scope items array.
      */
-    sortItems?: () => void;
+    sortItems?: (items: readonly unknown[]) => unknown[];
     /** @type {string} The label text for the search submit button. */
     submitLabel: string;
     /**
@@ -44,12 +44,11 @@ export interface SearchBarProps extends PropsWithChildren {
      */
     titleText?: string;
     /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
-    translateWithId?: () => void;
+    translateWithId?: (messageId: 'close.menu' | 'open.menu' | 'clear.all' | 'clear.selection') => string;
     /** @type {string} Search query value. */
     value?: string;
 }
 export declare let SearchBar: React.ForwardRefExoticComponent<SearchBarProps & React.RefAttributes<HTMLFormElement>>;
-declare const conditionalScopePropValidator: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
 export declare const deprecatedProps: {
     /**
      * **Deprecated**

package/lib/components/SearchBar/SearchBar.js

@@ -15,55 +15,43 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["className", "clearButtonLabelText", "hideScopesLabel", "labelText", "onChange", "onSubmit", "placeholderText", "scopes", "scopesTypeLabel", "scopeToString", "selectedScopes", "sortItems", "submitLabel", "translateWithId", "value"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--search-bar");
-var componentName = 'SearchBar';
+const blockClass = `${settings.pkg.prefix}--search-bar`;
+const componentName = 'SearchBar';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
 // Default values for props
-var defaults = {
-  onSubmit: function onSubmit() {},
-  onChange: function onChange() {},
+const defaults = {
+  onSubmit: () => {},
+  onChange: () => {},
   hideScopesLabel: true
 };
-exports.SearchBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    clearButtonLabelText = _ref.clearButtonLabelText,
-    _ref$hideScopesLabel = _ref.hideScopesLabel,
-    hideScopesLabel = _ref$hideScopesLabel === void 0 ? defaults.hideScopesLabel : _ref$hideScopesLabel,
-    labelText = _ref.labelText,
-    _ref$onChange = _ref.onChange,
-    onChange = _ref$onChange === void 0 ? defaults.onChange : _ref$onChange,
-    _ref$onSubmit = _ref.onSubmit,
-    onSubmit = _ref$onSubmit === void 0 ? defaults.onSubmit : _ref$onSubmit,
-    placeholderText = _ref.placeholderText,
-    _ref$scopes = _ref.scopes,
-    scopes = _ref$scopes === void 0 ? [] : _ref$scopes,
-    scopesTypeLabel = _ref.scopesTypeLabel,
-    scopeToString = _ref.scopeToString,
-    _ref$selectedScopes = _ref.selectedScopes,
-    selectedScopes = _ref$selectedScopes === void 0 ? [] : _ref$selectedScopes,
-    sortItems = _ref.sortItems,
-    submitLabel = _ref.submitLabel,
-    translateWithId = _ref.translateWithId,
-    value = _ref.value,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var _useState = React.useState(value || ''),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    text = _useState2[0],
-    setText = _useState2[1];
-  var _useState3 = React.useState(selectedScopes || []),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    _selectedScopes = _useState4[0],
-    setSelectedScopes = _useState4[1];
-  var _useState5 = React.useState(false),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    isInputDirty = _useState6[0],
-    setIsInputDirty = _useState6[1];
-  React.useEffect(function () {
+exports.SearchBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+    className,
+    clearButtonLabelText,
+    hideScopesLabel = defaults.hideScopesLabel,
+    labelText,
+    onChange = defaults.onChange,
+    onSubmit = defaults.onSubmit,
+    placeholderText,
+    scopes = [],
+    scopesTypeLabel,
+    scopeToString,
+    selectedScopes = [],
+    sortItems,
+    submitLabel,
+    translateWithId,
+    value,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const [text, setText] = React.useState(value || '');
+  const [_selectedScopes, setSelectedScopes] = React.useState(selectedScopes || []);
+  const [isInputDirty, setIsInputDirty] = React.useState(false);
+  React.useEffect(() => {
     if (!text || !text.length) {
       setIsInputDirty(false);
     } else {
@@ -74,9 +62,9 @@ exports.SearchBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * Handler for form submit that calls onSubmit prop.
    * @param {Event} event Submit event generated.
    */
-  var handleSubmit = function handleSubmit(event) {
+  const handleSubmit = event => {
     event.preventDefault();
-    var eventObject = {
+    const eventObject = {
       value: text
     };
     if (scopes.length > 0) {
@@ -89,8 +77,10 @@ exports.SearchBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * Handler for when scope selection changes that calls onChangeProp.
    * @param {{selectedItems: Array<any>}} {selectedItems} Object containing array of selected items.
    */
-  var handleSearchScopeChange = function handleSearchScopeChange(_ref2) {
-    var selectedItems = _ref2.selectedItems;
+  const handleSearchScopeChange = _ref2 => {
+    let {
+      selectedItems
+    } = _ref2;
     setSelectedScopes(selectedItems);
     onChange({
       selectedScopes: selectedItems,
@@ -102,10 +92,12 @@ exports.SearchBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
    * Handler for search input changes that calls onChange prop.
    * @param {KeyboardEvent} event Event object from input change.
    */
-  var handleInputChange = function handleInputChange(event) {
-    var value = event.target.value;
-    var eventObject = {
-      value: value
+  const handleInputChange = event => {
+    const {
+      value
+    } = event.target;
+    const eventObject = {
+      value
     };
     if (scopes.length > 0) {
       eventObject.selectedScopes = selectedScopes;
@@ -113,27 +105,28 @@ exports.SearchBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setText(value);
     onChange(eventObject);
   };
-  var multiSelectProps = {
+  const multiSelectProps = {
     initialSelectedItems: selectedScopes,
     items: scopes,
     itemToString: scopeToString,
     label: scopesTypeLabel,
-    sortItems: sortItems,
-    translateWithId: translateWithId
+    sortItems,
+    translateWithId
   };
   return /*#__PURE__*/React.createElement("form", _rollupPluginBabelHelpers.extends({}, rest, {
     ref: ref
   }, devtools.getDevtoolsProps(componentName), {
-    className: cx(blockClass, className, _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--hide-scopes-label"), hideScopesLabel)),
+    className: cx(blockClass, className, {
+      [`${blockClass}--hide-scopes-label`]: hideScopesLabel
+    }),
     onSubmit: handleSubmit
-  }), scopes !== null && scopes !== void 0 && scopes.length ? /*#__PURE__*/React.createElement(react.MultiSelect, _rollupPluginBabelHelpers.extends({}, multiSelectProps, {
-    id: "".concat(blockClass, "__multi-select"),
-    name: "search-scopes",
-    className: "".concat(blockClass, "__scopes"),
+  }), scopes?.length ? /*#__PURE__*/React.createElement(react.MultiSelect, _rollupPluginBabelHelpers.extends({}, multiSelectProps, {
+    id: `${blockClass}__multi-select`,
+    className: `${blockClass}__scopes`,
     onChange: handleSearchScopeChange,
     size: "lg"
   })) : null, /*#__PURE__*/React.createElement(react.Search, {
-    className: "".concat(blockClass, "__input"),
+    className: `${blockClass}__input`,
     closeButtonLabelText: clearButtonLabelText,
     labelText: labelText,
     name: 'search-input',
@@ -145,7 +138,7 @@ exports.SearchBar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     name: "search-submit",
     kind: "primary",
     type: "submit",
-    className: "".concat(blockClass, "__submit"),
+    className: `${blockClass}__submit`,
     disabled: !isInputDirty
   }, submitLabel));
 });
@@ -156,17 +149,17 @@ exports.SearchBar = settings.pkg.checkComponentEnabled(exports.SearchBar, compon
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 exports.SearchBar.displayName = componentName;
-var conditionalScopePropValidator = function conditionalScopePropValidator(props, propName, componentName) {
+const conditionalScopePropValidator = function (props, propName, componentName) {
   if (props.scopes && props.scopes.length > 0 && !props[propName]) {
-    return new Error("Required `".concat(propName, "` when `scopes` prop type is supplied to `").concat(componentName, "`. Validation failed."));
+    return new Error(`Required \`${propName}\` when \`scopes\` prop type is supplied to \`${componentName}\`. Validation failed.`);
   }
   /**@ts-ignore */
   for (var _len = arguments.length, rest = new Array(_len > 3 ? _len - 3 : 0), _key = 3; _key < _len; _key++) {
     rest[_key - 3] = arguments[_key];
   }
-  return index.default.string.apply(index.default, [props, propName, componentName].concat(rest));
+  return index.default.string(props, propName, componentName, ...rest);
 };
-var deprecatedProps = {
+const deprecatedProps = {
   /**
    * **Deprecated**
    *
@@ -178,7 +171,7 @@ var deprecatedProps = {
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
-exports.SearchBar.propTypes = _rollupPluginBabelHelpers.objectSpread2({
+exports.SearchBar.propTypes = {
   /** @type {string} Optional additional class name. */
   className: index.default.string,
   /** @type {string} The label text for the search text input. */
@@ -216,7 +209,8 @@ exports.SearchBar.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /** @type {func} Callback function for translating MultiSelect's child ListBoxMenuIcon SVG title. */
   translateWithId: index.default.func,
   /** @type {string} Search query value. */
-  value: index.default.string
-}, deprecatedProps);
+  value: index.default.string,
+  ...deprecatedProps
+};
 
 exports.deprecatedProps = deprecatedProps;

package/lib/components/SidePanel/SidePanel.d.ts

@@ -4,8 +4,8 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { ReactNode, RefObject } from 'react';
 import { ButtonProps } from '@carbon/react';
+import React, { ReactNode, RefObject } from 'react';
 type SidePanelBaseProps = {
     /**
      * Sets the action toolbar buttons
@@ -153,8 +153,5 @@ type SidePanelSlideInProps = {
     selectorPageContent: string;
 };
 export type SidePanelProps = SidePanelBaseProps & SidePanelSlideInProps;
-/**
- * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
- */
-export declare let SidePanel: React.ForwardRefExoticComponent<SidePanelProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SidePanel: any;
 export {};