@carbon/ibm-products 2.65.0 → 2.66.0-rc.0

package/lib/components/ExportModal/ExportModal.js

@@ -19,114 +19,105 @@ var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
 var _Loading;
-var _excluded = ["body", "className", "error", "errorMessage", "filename", "hidePasswordLabel", "inputLabel", "inputType", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "portalTarget", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "showPasswordLabel", "successMessage", "successful", "title", "triggerButtonRef", "validExtensions"];
-var componentName = 'ExportModal';
+const componentName = 'ExportModal';
 
 // Default values for props
-var defaults = {
+const defaults = {
   preformattedExtensions: Object.freeze([]),
   validExtensions: Object.freeze([])
 };
 /**
  * Modal dialog version of the export pattern
  */
-exports.ExportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var body = _ref.body,
-    className = _ref.className,
-    error = _ref.error,
-    errorMessage = _ref.errorMessage,
-    filename = _ref.filename,
-    hidePasswordLabel = _ref.hidePasswordLabel,
-    inputLabel = _ref.inputLabel,
-    _ref$inputType = _ref.inputType,
-    inputType = _ref$inputType === void 0 ? 'text' : _ref$inputType,
-    invalidInputText = _ref.invalidInputText,
-    loading = _ref.loading,
-    loadingMessage = _ref.loadingMessage,
-    onClose = _ref.onClose,
-    onRequestSubmit = _ref.onRequestSubmit,
-    open = _ref.open,
-    portalTargetIn = _ref.portalTarget,
-    _ref$preformattedExte = _ref.preformattedExtensions,
-    preformattedExtensions = _ref$preformattedExte === void 0 ? defaults.preformattedExtensions : _ref$preformattedExte,
-    preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
-    primaryButtonText = _ref.primaryButtonText,
-    secondaryButtonText = _ref.secondaryButtonText,
-    showPasswordLabel = _ref.showPasswordLabel,
-    successMessage = _ref.successMessage,
-    successful = _ref.successful,
-    title = _ref.title,
-    triggerButtonRef = _ref.triggerButtonRef,
-    _ref$validExtensions = _ref.validExtensions,
-    validExtensions = _ref$validExtensions === void 0 ? defaults.validExtensions : _ref$validExtensions,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var blockClass = "".concat(settings.pkg.prefix, "--export-modal");
-  var _useState = React.useState(''),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    name = _useState2[0],
-    setName = _useState2[1];
-  var _useState3 = React.useState(false),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    dirtyInput = _useState4[0],
-    setDirtyInput = _useState4[1];
+exports.ExportModal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    // The component props, in alphabetical order (for consistency).
+
+    body,
+    className,
+    error,
+    errorMessage,
+    filename,
+    hidePasswordLabel,
+    inputLabel,
+    inputType = 'text',
+    invalidInputText,
+    loading,
+    loadingMessage,
+    onClose,
+    onRequestSubmit,
+    open,
+    portalTarget: portalTargetIn,
+    preformattedExtensions = defaults.preformattedExtensions,
+    preformattedExtensionsLabel,
+    primaryButtonText,
+    secondaryButtonText,
+    showPasswordLabel,
+    successMessage,
+    successful,
+    title,
+    triggerButtonRef,
+    validExtensions = defaults.validExtensions,
+    // Collect any other property values passed in.
+    ...rest
+  } = _ref;
+  const blockClass = `${settings.pkg.prefix}--export-modal`;
+  const [name, setName] = React.useState('');
+  const [dirtyInput, setDirtyInput] = React.useState(false);
   // by default (if it exists) use the first extension in the extension array
-  var _useState5 = React.useState(''),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    extension = _useState6[0],
-    setExtension = _useState6[1];
-  var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
-  React.useEffect(function () {
-    var _preformattedExtensio;
+  const [extension, setExtension] = React.useState('');
+  const renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
+  React.useEffect(() => {
     setName(filename);
-    if (preformattedExtensions && preformattedExtensions.length > 0 && (_preformattedExtensio = preformattedExtensions[0]) !== null && _preformattedExtensio !== void 0 && _preformattedExtensio.extension) {
-      var _preformattedExtensio2;
-      setExtension(preformattedExtensions === null || preformattedExtensions === void 0 || (_preformattedExtensio2 = preformattedExtensions[0]) === null || _preformattedExtensio2 === void 0 ? void 0 : _preformattedExtensio2.extension);
+    if (preformattedExtensions && preformattedExtensions.length > 0 && preformattedExtensions[0]?.extension) {
+      setExtension(preformattedExtensions?.[0]?.extension);
     }
   }, [filename, preformattedExtensions, open]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     if (successful) {
-      var button = document.querySelector(".".concat(blockClass, " .").concat(settings.carbon.prefix, "--modal-close-button button"));
-      button === null || button === void 0 || button.focus();
+      const button = document.querySelector(`.${blockClass} .${settings.carbon.prefix}--modal-close-button button`);
+      button?.focus();
     }
   }, [successful, blockClass]);
-  var onNameChangeHandler = function onNameChangeHandler(evt) {
+  const onNameChangeHandler = evt => {
     setName(evt.target.value);
   };
-  var onExtensionChangeHandler = function onExtensionChangeHandler(value) {
+  const onExtensionChangeHandler = value => {
     setExtension(value);
   };
-  var onBlurHandler = function onBlurHandler() {
+  const onBlurHandler = () => {
     setDirtyInput(true);
   };
-  var onSubmitHandler = function onSubmitHandler() {
-    var returnName = extension ? "".concat(filename, ".").concat(extension.toLocaleLowerCase()) : name;
-    onRequestSubmit === null || onRequestSubmit === void 0 || onRequestSubmit(returnName);
+  const onSubmitHandler = () => {
+    const returnName = extension ? `${filename}.${extension.toLocaleLowerCase()}` : name;
+    onRequestSubmit?.(returnName);
   };
-  var hasInvalidExtension = function hasInvalidExtension() {
+  const hasInvalidExtension = () => {
     if (!dirtyInput || !validExtensions || !validExtensions.length) {
       return false;
     }
     if (!name.includes('.')) {
       return true;
     }
-    var ext = name.split('.').pop();
+    const ext = name.split('.').pop();
     if (!validExtensions.includes(ext)) {
       return true;
     }
     return false;
   };
-  var internalId = React.useRef(uuidv4.default());
-  var primaryButtonDisabled = loading || !name || hasInvalidExtension();
-  var submitted = loading || error || successful;
-  var commonInputProps = _rollupPluginBabelHelpers.defineProperty({
-    id: "text-input--".concat(internalId.current),
+  const internalId = React.useRef(uuidv4.default());
+  const primaryButtonDisabled = loading || !name || hasInvalidExtension();
+  const submitted = loading || error || successful;
+  const commonInputProps = {
+    id: `text-input--${internalId.current}`,
     value: name,
     onChange: onNameChangeHandler,
     labelText: inputLabel,
     invalid: hasInvalidExtension(),
     invalidText: invalidInputText,
-    onBlur: onBlurHandler
-  }, 'data-modal-primary-focus', true);
+    onBlur: onBlurHandler,
+    ['data-modal-primary-focus']: true
+  };
   return renderPortalUse(/*#__PURE__*/React.createElement(react.unstable_FeatureFlags, {
     enableExperimentalFocusWrapWithoutSentinels: true
   }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
@@ -134,19 +125,18 @@ exports.ExportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     "aria-label": title,
     size: "sm",
     preventCloseOnClickOutside: true,
-    launcherButtonRef: triggerButtonRef
-  }, _rollupPluginBabelHelpers.objectSpread2({
-    open: open,
-    ref: ref,
-    onClose: onClose
-  }, devtools.getDevtoolsProps(componentName))), /*#__PURE__*/React.createElement(react.ModalHeader, {
-    className: "".concat(blockClass, "__header"),
+    launcherButtonRef: triggerButtonRef,
+    open,
+    ref,
+    onClose
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.ModalHeader, {
+    className: `${blockClass}__header`,
     closeModal: onClose,
     title: title
   }), /*#__PURE__*/React.createElement(react.ModalBody, {
-    className: "".concat(blockClass, "__body-container")
+    className: `${blockClass}__body-container`
   }, !submitted && /*#__PURE__*/React.createElement(React.Fragment, null, body && /*#__PURE__*/React.createElement("p", {
-    className: "".concat(blockClass, "__body")
+    className: `${blockClass}__body`
   }, body), preformattedExtensions.length ? /*#__PURE__*/React.createElement(react.FormGroup, {
     legendText: preformattedExtensionsLabel
   }, /*#__PURE__*/React.createElement(react.RadioButtonGroup, {
@@ -154,23 +144,21 @@ exports.ExportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onChange: onExtensionChangeHandler,
     valueSelected: extension,
     name: "extensions"
-  }, preformattedExtensions.map(function (o) {
-    return /*#__PURE__*/React.createElement(react.RadioButton, {
-      key: o.extension,
-      id: o.extension,
-      value: o.extension,
-      labelText: "".concat(o.extension, " (").concat(o.description, ")"),
-      "data-modal-primary-focus": true
-    });
-  }))) : /*#__PURE__*/React.createElement("div", {
-    className: "".concat(blockClass, "__input-container")
+  }, preformattedExtensions.map(o => /*#__PURE__*/React.createElement(react.RadioButton, {
+    key: o.extension,
+    id: o.extension,
+    value: o.extension,
+    labelText: `${o.extension} (${o.description})`,
+    "data-modal-primary-focus": true
+  })))) : /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__input-container`
   }, inputType === 'text' ? /*#__PURE__*/React.createElement(react.TextInput, commonInputProps) : /*#__PURE__*/React.createElement(react.PasswordInput, _rollupPluginBabelHelpers.extends({}, commonInputProps, {
     showPasswordLabel: showPasswordLabel,
     hidePasswordLabel: hidePasswordLabel,
     tooltipPosition: "left"
   })))), /*#__PURE__*/React.createElement("div", {
     "aria-live": "polite",
-    className: "".concat(blockClass, "__messaging")
+    className: `${blockClass}__messaging`
   }, loading && /*#__PURE__*/React.createElement(React.Fragment, null, _Loading || (_Loading = /*#__PURE__*/React.createElement(react.Loading, {
     "aria-live": "off",
     description: "",
@@ -178,12 +166,12 @@ exports.ExportModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     withOverlay: false
   })), /*#__PURE__*/React.createElement("p", null, loadingMessage)), successful && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(icons.CheckmarkFilled, {
     size: 16,
-    className: "".concat(blockClass, "__checkmark-icon")
+    className: `${blockClass}__checkmark-icon`
   }), /*#__PURE__*/React.createElement("p", null, successMessage)), error && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(icons.ErrorFilled, {
     size: 16,
-    className: "".concat(blockClass, "__error-icon")
+    className: `${blockClass}__error-icon`
   }), /*#__PURE__*/React.createElement("p", null, errorMessage)))), !submitted && /*#__PURE__*/React.createElement(react.ModalFooter, {
-    className: "".concat(blockClass, "__footer")
+    className: `${blockClass}__footer`
   }, /*#__PURE__*/React.createElement(react.Button, {
     type: "button",
     kind: "secondary",

package/lib/components/ExpressiveCard/ExpressiveCard.d.ts

@@ -1,16 +1,9 @@
 import React, { PropsWithChildren, ReactNode } from 'react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-type ActionIcon = {
-    id?: string;
-    icon?: () => void | object;
-    onKeydown?: () => void;
-    onClick?: () => void;
-    iconDescription?: string;
-    href?: string;
-};
+import { ActionIcon } from '../Card/Card';
 export interface ExpressiveCardProps extends PropsWithChildren {
     /**
-     * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
+     * Icons that are displayed on the card. Refer to design documentation for implementation guidelines. Note: href is deprecated. Set link.href for href functionality. If you are setting link object, href is a required property. link object supports all anchor element properties. Precedence: link.href > href. If link.href or href is set => anchor element, else button.
      */
     actionIcons?: ActionIcon[];
     /**
@@ -100,4 +93,3 @@ export interface ExpressiveCardProps extends PropsWithChildren {
     title?: string | object | ReactNode;
 }
 export declare let ExpressiveCard: React.ForwardRefExoticComponent<ExpressiveCardProps & React.RefAttributes<HTMLDivElement>>;
-export {};

package/lib/components/ExpressiveCard/ExpressiveCard.js

@@ -15,9 +15,9 @@ var settings = require('../../settings.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
 var Card = require('../Card/Card.js');
 
-var componentName = 'ExpressiveCard';
-exports.ExpressiveCard = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var validProps = propsHelper.prepareProps(props, ['actionIconsPosition', 'overflowActions', 'productive', 'titleSize']);
+const componentName = 'ExpressiveCard';
+exports.ExpressiveCard = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const validProps = propsHelper.prepareProps(props, ['actionIconsPosition', 'overflowActions', 'productive', 'titleSize']);
   return /*#__PURE__*/React.createElement(Card.Card, _rollupPluginBabelHelpers.extends({
     ref: ref
   }, validProps, devtools.getDevtoolsProps(componentName)));
@@ -27,7 +27,7 @@ exports.ExpressiveCard = /*#__PURE__*/React.forwardRef(function (props, ref) {
 exports.ExpressiveCard = settings.pkg.checkComponentEnabled(exports.ExpressiveCard, componentName);
 exports.ExpressiveCard.propTypes = {
   /**
-   * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
+   * Icons that are displayed on the card. Refer to design documentation for implementation guidelines. Note: href is deprecated. Set link.href for href functionality. If you are setting link object, href is a required property. link object supports all anchor element properties. Precedence: link.href > href. If link.href or href is set => anchor element, else button.
    */
   /**@ts-ignore */
   actionIcons: index.default.arrayOf(index.default.shape({
@@ -36,7 +36,13 @@ exports.ExpressiveCard.propTypes = {
     onKeyDown: index.default.func,
     onClick: index.default.func,
     iconDescription: index.default.string,
-    href: index.default.string
+    /**
+     * @deprecated please use the `link.href` instead
+     */
+    href: index.default.string,
+    link: index.default.shape({
+      href: index.default.string.isRequired
+    })
   })),
   /**
    * Content that shows in the body of the card

package/lib/components/FeatureFlags/index.js

@@ -7,18 +7,15 @@
 
 'use strict';
 
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../_virtual/index.js');
 var FeatureFlags$1 = require('@carbon/feature-flags');
 
-var _excluded = ["children", "flags"];
-
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
  */
-var FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
+const FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
 
 /**
  * Supports individual feature flag values as props, merging them
@@ -26,39 +23,37 @@ var FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.Feature
  * a feature flag is enabled or disabled in a given React tree
  */
 function FeatureFlags(_ref) {
-  var children = _ref.children,
-    _ref$flags = _ref.flags,
-    flags = _ref$flags === void 0 ? {} : _ref$flags,
-    newFlags = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var parentScope = React.useContext(FeatureFlagContext);
-  var newFlagsObject = Object.keys(newFlags).reduce(function (acc, key) {
+  let {
+    children,
+    flags = {},
+    ...newFlags
+  } = _ref;
+  const parentScope = React.useContext(FeatureFlagContext);
+  const newFlagsObject = Object.keys(newFlags).reduce((acc, key) => {
     acc[key] = newFlags[key];
     return acc;
   }, {});
-  var combinedFlags = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newFlagsObject), flags);
-  var _useState = React.useState(parentScope),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    prevParentScope = _useState2[0],
-    setPrevParentScope = _useState2[1];
-  var _useState3 = React.useState(function () {
-      var scope = FeatureFlags$1.createScope(combinedFlags);
-      scope.mergeWithScope(parentScope);
-      return scope;
-    }),
-    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    scope = _useState4[0],
-    updateScope = _useState4[1];
+  const combinedFlags = {
+    ...newFlagsObject,
+    ...flags
+  };
+  const [prevParentScope, setPrevParentScope] = React.useState(parentScope);
+  const [scope, updateScope] = React.useState(() => {
+    const scope = FeatureFlags$1.createScope(combinedFlags);
+    scope.mergeWithScope(parentScope);
+    return scope;
+  });
   if (parentScope !== prevParentScope) {
-    var _scope = FeatureFlags$1.createScope(combinedFlags);
-    _scope.mergeWithScope(parentScope);
-    updateScope(_scope);
+    const scope = FeatureFlags$1.createScope(combinedFlags);
+    scope.mergeWithScope(parentScope);
+    updateScope(scope);
     setPrevParentScope(parentScope);
   }
 
   // We use a custom hook to detect if any of the individual flag props or their values change
   // If any flags have changed, we re-create the FeatureFlagScope using the updated flags
-  useChangedValue(combinedFlags, isEqual, function (changedFlags) {
-    var scope = FeatureFlags$1.createScope(changedFlags);
+  useChangedValue(combinedFlags, isEqual, changedFlags => {
+    const scope = FeatureFlags$1.createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
   });
@@ -85,25 +80,22 @@ FeatureFlags.propTypes = {
  * @param {Function} callback
  */
 function useChangedValue(value, compare, callback) {
-  var initialRender = React.useRef(false);
-  var savedCallback = React.useRef(callback);
-  var _useState5 = React.useState(value),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    prevValue = _useState6[0],
-    setPrevValue = _useState6[1];
+  const initialRender = React.useRef(false);
+  const savedCallback = React.useRef(callback);
+  const [prevValue, setPrevValue] = React.useState(value);
   if (!compare(prevValue, value)) {
     setPrevValue(value);
   }
-  React.useEffect(function () {
+  React.useEffect(() => {
     savedCallback.current = callback;
   });
-  React.useEffect(function () {
+  React.useEffect(() => {
     // We only want the callback triggered after the first render
     if (initialRender.current) {
       savedCallback.current(prevValue);
     }
   }, [prevValue]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     initialRender.current = true;
   }, []);
 }
@@ -112,7 +104,7 @@ function useChangedValue(value, compare, callback) {
  * Access whether a given flag is enabled or disabled in a given FeatureFlagContext
  */
 function useFeatureFlag(flag) {
-  var scope = React.useContext(FeatureFlagContext);
+  const scope = React.useContext(FeatureFlagContext);
   return scope.enabled(flag);
 }
 
@@ -133,15 +125,13 @@ function isEqual(a, b) {
   if (a === b) {
     return true;
   }
-  for (var _i = 0, _Object$keys = Object.keys(a); _i < _Object$keys.length; _i++) {
-    var key = _Object$keys[_i];
+  for (const key of Object.keys(a)) {
     if (a[key] !== b[key]) {
       return false;
     }
   }
-  for (var _i2 = 0, _Object$keys2 = Object.keys(b); _i2 < _Object$keys2.length; _i2++) {
-    var _key = _Object$keys2[_i2];
-    if (b[_key] !== a[_key]) {
+  for (const key of Object.keys(b)) {
+    if (b[key] !== a[key]) {
       return false;
     }
   }

package/lib/components/FilterPanel/FilterPanel.js

@@ -14,32 +14,32 @@ var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
 
-var _excluded = ["children", "className", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--filter-panel");
-var componentName = 'FilterPanel';
+const blockClass = `${settings.pkg.prefix}--filter-panel`;
+const componentName = 'FilterPanel';
 
 /**
  * The container for filter panel subcomponents.
  * @deprecated This component is deprecated
  */
 
-exports.FilterPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var children = _ref.children,
-    className = _ref.className,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.FilterPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    title,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement("section", _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     ref: ref
   }, devtools.getDevtoolsProps(componentName)), title && /*#__PURE__*/React.createElement("h1", {
-    className: "".concat(blockClass, "__title")
+    className: `${blockClass}__title`
   }, title), children);
 });
 exports.FilterPanel.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/FilterPanel/FilterPanelAccordion/FilterPanelAccordion.js

@@ -16,13 +16,10 @@ var devtools = require('../../../global/js/utils/devtools.js');
 var settings = require('../../../settings.js');
 var FilterPanelGroup = require('../FilterPanelGroup/FilterPanelGroup.js');
 
-var _excluded = ["accordionProps", "children", "className", "count", "labelText", "title"],
-  _excluded2 = ["align"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--filter-panel-accordion");
-var componentName = 'FilterPanelAccordion';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--filter-panel-accordion`;
+const componentName = 'FilterPanelAccordion';
+const defaults = {
   accordionProps: {}
 };
 
@@ -30,17 +27,20 @@ var defaults = {
  * A container with a label and optional count.
  * @deprecated This component is deprecated
  */
-exports.FilterPanelAccordion = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$accordionProps = _ref.accordionProps,
-    accordionProps = _ref$accordionProps === void 0 ? defaults.accordionProps : _ref$accordionProps,
-    children = _ref.children,
-    className = _ref.className,
-    count = _ref.count,
-    labelText = _ref.labelText,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var align = accordionProps.align,
-    otherAccordionProps = _rollupPluginBabelHelpers.objectWithoutProperties(accordionProps, _excluded2);
+exports.FilterPanelAccordion = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    accordionProps = defaults.accordionProps,
+    children,
+    className,
+    count,
+    labelText,
+    title,
+    ...rest
+  } = _ref;
+  const {
+    align,
+    ...otherAccordionProps
+  } = accordionProps;
   return /*#__PURE__*/React.createElement(FilterPanelGroup.FilterPanelGroup, _rollupPluginBabelHelpers.extends({}, rest, {
     className: cx(blockClass, className),
     count: count,
@@ -49,12 +49,12 @@ exports.FilterPanelAccordion = /*#__PURE__*/React.forwardRef(function (_ref, ref
     title: title
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.Accordion, _rollupPluginBabelHelpers.extends({}, otherAccordionProps, {
     align: align || 'start',
-    className: "".concat(blockClass, "__list")
+    className: `${blockClass}__list`
   }), children));
 });
 exports.FilterPanelAccordion.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/FilterPanel/FilterPanelAccordionItem/FilterPanelAccordionItem.js

@@ -17,12 +17,10 @@ var settings = require('../../../settings.js');
 var TruncatedList = require('../../TruncatedList/TruncatedList.js');
 var FilterPanelLabel = require('../FilterPanelLabel/FilterPanelLabel.js');
 
-var _excluded = ["accordionItemProps", "truncatedListProps", "children", "className", "count", "labelText", "title"];
-
 // The block part of our conventional BEM class names (blockClass__E--M).
-var blockClass = "".concat(settings.pkg.prefix, "--filter-panel-accordion-item");
-var componentName = 'FilterPanelAccordionItem';
-var defaults = {
+const blockClass = `${settings.pkg.prefix}--filter-panel-accordion-item`;
+const componentName = 'FilterPanelAccordionItem';
+const defaults = {
   accordionItemProps: {},
   truncatedListProps: {}
 };
@@ -31,17 +29,17 @@ var defaults = {
  * A container with a label and optional count.
  * @deprecated This component is deprecated
  */
-exports.FilterPanelAccordionItem = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var _ref$accordionItemPro = _ref.accordionItemProps,
-    accordionItemProps = _ref$accordionItemPro === void 0 ? defaults.accordionItemProps : _ref$accordionItemPro,
-    _ref$truncatedListPro = _ref.truncatedListProps,
-    truncatedListProps = _ref$truncatedListPro === void 0 ? defaults.truncatedListProps : _ref$truncatedListPro,
-    children = _ref.children,
-    className = _ref.className,
-    count = _ref.count,
-    labelText = _ref.labelText,
-    title = _ref.title,
-    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+exports.FilterPanelAccordionItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    accordionItemProps = defaults.accordionItemProps,
+    truncatedListProps = defaults.truncatedListProps,
+    children,
+    className,
+    count,
+    labelText,
+    title,
+    ...rest
+  } = _ref;
   return /*#__PURE__*/React.createElement(react.AccordionItem, _rollupPluginBabelHelpers.extends({}, accordionItemProps, {
     className: cx(blockClass, className),
     ref: ref,
@@ -51,17 +49,15 @@ exports.FilterPanelAccordionItem = /*#__PURE__*/React.forwardRef(function (_ref,
       title: title
     }))
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(TruncatedList.TruncatedList, _rollupPluginBabelHelpers.extends({}, truncatedListProps, {
-    className: "".concat(blockClass, "__list")
-  }), React.Children.map(children, function (child) {
-    return /*#__PURE__*/React.createElement(react.ListItem, {
-      className: "".concat(blockClass, "__list-item"),
-      key: child.key
-    }, child);
-  })));
+    className: `${blockClass}__list`
+  }), React.Children.map(children, child => /*#__PURE__*/React.createElement(react.ListItem, {
+    className: `${blockClass}__list-item`,
+    key: child.key
+  }, child))));
 });
 exports.FilterPanelAccordionItem.deprecated = {
   level: 'warn',
-  details: "This component is deprecated"
+  details: `This component is deprecated`
 };
 // Return a placeholder if not released and not enabled by feature flag
 exports.FilterPanelAccordionItem = settings.pkg.checkComponentEnabled(exports.FilterPanelAccordionItem, componentName);