@carbon/ibm-products 2.39.0 → 2.40.0

package/es/components/Tearsheet/Tearsheet.d.ts

@@ -1,3 +1,121 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+import React, { PropsWithChildren, ReactNode } from 'react';
+import PropTypes from 'prop-types';
+import { ButtonProps } from '@carbon/react';
+/**
+ * The accessibility title for the close icon (if shown).
+ *
+ * **Note:** This prop is only required if a close icon is shown, i.e. if
+ * there are a no navigation actions and/or hasCloseIcon is true.
+ */
+export type CloseIconDescriptionTypes = {
+    hasCloseIcon?: false;
+    closeIconDescription?: string;
+} | {
+    hasCloseIcon: true;
+    closeIconDescription: string;
+};
+interface TearsheetProps extends PropsWithChildren {
+    /**
+     * The navigation actions to be shown as buttons in the action area at the
+     * bottom of the tearsheet. Each action is specified as an object with
+     * optional fields: 'label' to supply the button label, 'kind' to select the
+     * button kind (must be 'primary', 'secondary' or 'ghost'), 'loading' to
+     * display a loading indicator, and 'onClick' to receive notifications when
+     * the button is clicked. Additional fields in the object will be passed to
+     * the Button component, and these can include 'disabled', 'ref', 'className',
+     * and any other Button props, except 'size'. Any other fields in the object will
+     * be passed through to the button element as HTML attributes.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
+     */
+    actions: ButtonProps[];
+    /**
+     * The aria-label for the tearsheet, which is optional.
+     * if it is not passed, the title will be used as the aria-label.
+     */
+    ariaLabel?: string;
+    /**
+     * An optional class or classes to be added to the outermost element.
+     */
+    className?: string;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * Enable a close icon ('x') in the header area of the tearsheet. By default,
+     * (when this prop is omitted, or undefined or null) a tearsheet does not
+     * display a close icon if there are navigation actions ("transactional
+     * tearsheet") and displays one if there are no navigation actions ("passive
+     * tearsheet"), and that behavior can be overridden if required by setting
+     * this prop to either true or false.
+     */
+    hasCloseIcon?: boolean;
+    /**
+     * The content for the influencer section of the tearsheet, displayed
+     * alongside the main content. This is typically a menu, or filter, or
+     * progress indicator, or similar.
+     */
+    influencer?: ReactNode;
+    /**
+     * The position of the influencer section, 'left' or 'right'.
+     */
+    influencerPosition?: 'left' | 'right';
+    /**
+     * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
+     * is 320px.
+     */
+    influencerWidth?: 'narrow' | 'wide';
+    /**
+     * A label for the tearsheet, displayed in the header area of the tearsheet
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * Navigation content, such as a set of tabs, to be displayed at the bottom
+     * of the header area of the tearsheet.
+     */
+    navigation?: ReactNode;
+    /**
+     * An optional handler that is called when the user closes the tearsheet (by
+     * clicking the close button, if enabled, or clicking outside, if enabled).
+     * Returning `false` here prevents the modal from closing.
+     */
+    onClose?: () => void;
+    /**
+     * Specifies whether the tearsheet is currently open.
+     */
+    open?: boolean;
+    /**
+     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
+     */
+    portalTarget: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * The main title of the tearsheet, displayed in the header area.
+     */
+    title?: ReactNode;
+    /** @deprecated */
+    /**
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition?: 'normal' | 'lower';
+}
 /**
  * A tearsheet is a mostly full-screen type of dialog that keeps users
  * in-context and focused by bringing actionable content front and center while
@@ -10,9 +128,17 @@
  * panel on either the left or right side, the main content area, and a set of
  * action buttons.
  */
-export let Tearsheet: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-export namespace deprecatedProps {
-    let verticalPosition: PropTypes.Requireable<string>;
-}
-import React from 'react';
-import PropTypes from 'prop-types';
+export declare let Tearsheet: React.ForwardRefExoticComponent<(TearsheetProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
+export declare const deprecatedProps: {
+    /**
+     * **Deprecated**
+     *
+     * The position of the top of tearsheet in the viewport. The 'normal'
+     * position is a short distance down from the top of the
+     * viewport, leaving room at the top for a global header bar to show through
+     * from below. The 'lower' position (the default) provides a little extra room at the top
+     * to allow an action bar navigation or breadcrumbs to also show through.
+     */
+    verticalPosition: PropTypes.Requireable<string>;
+};
+export {};

package/es/components/Tearsheet/Tearsheet.js

@@ -15,17 +15,24 @@ import { Button } from '@carbon/react';
 import { TearsheetShell, tearsheetHasCloseIcon, portalType } from './TearsheetShell.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 
-var _excluded = ["influencerPosition", "influencerWidth", "verticalPosition"];
+var _excluded = ["influencerPosition", "influencerWidth"];
 var componentName = 'Tearsheet';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
 
-// Default values for props
-var defaults = {
-  influencerPosition: 'left',
-  influencerWidth: 'narrow',
-  verticalPosition: 'lower'
-};
+/**
+ * The accessibility title for the close icon (if shown).
+ *
+ * **Note:** This prop is only required if a close icon is shown, i.e. if
+ * there are a no navigation actions and/or hasCloseIcon is true.
+ */
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+
+// Note that the descriptions here should be kept in sync with those for the
+// corresponding props for TearsheetNarrow and TearsheetShell components.
 
 /**
  * A tearsheet is a mostly full-screen type of dialog that keeps users
@@ -41,16 +48,13 @@ var defaults = {
  */
 var Tearsheet = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$influencerPositi = _ref.influencerPosition,
-    influencerPosition = _ref$influencerPositi === void 0 ? defaults.influencerPosition : _ref$influencerPositi,
+    influencerPosition = _ref$influencerPositi === void 0 ? 'left' : _ref$influencerPositi,
     _ref$influencerWidth = _ref.influencerWidth,
-    influencerWidth = _ref$influencerWidth === void 0 ? defaults.influencerWidth : _ref$influencerWidth,
-    _ref$verticalPosition = _ref.verticalPosition,
-    verticalPosition = _ref$verticalPosition === void 0 ? defaults.verticalPosition : _ref$verticalPosition,
+    influencerWidth = _ref$influencerWidth === void 0 ? 'narrow' : _ref$influencerWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement(TearsheetShell, _objectSpread2(_objectSpread2(_objectSpread2({}, getDevtoolsProps(componentName)), rest), {}, {
     influencerPosition: influencerPosition,
     influencerWidth: influencerWidth,
-    verticalPosition: verticalPosition,
     ref: ref,
     size: 'wide'
   }));
@@ -95,7 +99,8 @@ Tearsheet.propTypes = _objectSpread2({
    *
    * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
    */
-  actions: allPropTypes([ActionSet.validateActions(function () {
+  actions: allPropTypes([/**@ts-ignore */
+  ActionSet.validateActions(function () {
     return '2xl';
   }), PropTypes.arrayOf(PropTypes.shape(_objectSpread2(_objectSpread2({}, Button.propTypes), {}, {
     kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
@@ -119,6 +124,7 @@ Tearsheet.propTypes = _objectSpread2({
    * **Note:** This prop is only required if a close icon is shown, i.e. if
    * there are a no navigation actions and/or hasCloseIcon is true.
    */
+  /**@ts-ignore */
   closeIconDescription: PropTypes.string.isRequired.if(function (_ref2) {
     var actions = _ref2.actions,
       hasCloseIcon = _ref2.hasCloseIcon;
@@ -136,6 +142,7 @@ Tearsheet.propTypes = _objectSpread2({
    * tearsheet"), and that behavior can be overridden if required by setting
    * this prop to either true or false.
    */
+  /**@ts-ignore */
   hasCloseIcon: PropTypes.bool,
   /**
    * The content for the influencer section of the tearsheet, displayed
@@ -158,6 +165,10 @@ Tearsheet.propTypes = _objectSpread2({
    * to page of a multi-page task).
    */
   label: PropTypes.node,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  launcherButtonRef: PropTypes.any,
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet.
@@ -176,6 +187,7 @@ Tearsheet.propTypes = _objectSpread2({
   /**
    * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
+  /**@ts-ignore */
   portalTarget: portalType,
   /**
    * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens

package/es/components/Tearsheet/TearsheetShell.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../src/custom-typings/index.d.ts" />
-import React, { PropsWithChildren, ReactNode } from 'react';
+import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
@@ -57,6 +57,10 @@ interface TearsheetShellProps extends PropsWithChildren {
      * to page of a multi-page task).
      */
     label?: ReactNode;
+    /**
+     * Provide a ref to return focus to once the tearsheet is closed.
+     */
+    launcherButtonRef?: RefObject<any>;
     /**
      * Navigation content, such as a set of tabs, to be displayed at the bottom
      * of the header area of the tearsheet. NB the navigation is only applicable

package/es/components/Tearsheet/TearsheetShell.js

@@ -17,9 +17,10 @@ import { Button, usePrefix, ComposedModal, ModalHeader, Layer } from '@carbon/re
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus } from '../../global/js/hooks/useFocus.js';
+import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
@@ -82,6 +83,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
+    launcherButtonRef = _ref.launcherButtonRef,
     rest = _objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
@@ -92,9 +94,11 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
   var modalRef = ref || localRef;
   var _useResizeObserver = useResizeObserver(resizer),
     width = _useResizeObserver.width;
-  var _useFocus = useFocus(modalRef),
+  var prevOpen = usePreviousValue(open);
+  var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
     firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
+    keyDownListener = _useFocus.keyDownListener,
+    specifiedElement = _useFocus.specifiedElement;
   var modalRefValue = modalRef.current;
   var wide = size === 'wide';
 
@@ -133,17 +137,30 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
 
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
+    if (selectorPrimaryFocus) {
+      return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+    }
     firstElement === null || firstElement === void 0 || firstElement.focus();
   };
   useEffect(function () {
     if (open) {
-      // Focusing the first element
+      // Focusing the first element or selectorPrimaryFocus element
       setTimeout(function () {
+        if (selectorPrimaryFocus) {
+          return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+        }
         firstElement === null || firstElement === void 0 || firstElement.focus();
       }, 0);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open]);
+  useEffect(function () {
+    if (prevOpen && !open && launcherButtonRef) {
+      setTimeout(function () {
+        launcherButtonRef.current.focus();
+      }, 0);
+    }
+  }, [launcherButtonRef, open, prevOpen]);
   useEffect(function () {
     if (open && position !== depth) {
       setTimeout(function () {
@@ -402,6 +419,11 @@ TearsheetShell.propTypes = _objectSpread2({
    * to page of a multi-page task).
    */
   label: PropTypes.node,
+  /**
+   * Provide a ref to return focus to once the tearsheet is closed.
+   */
+  /**@ts-ignore */
+  launcherButtonRef: PropTypes.any,
   /**
    * Navigation content, such as a set of tabs, to be displayed at the bottom
    * of the header area of the tearsheet. NB the navigation is only applicable

package/es/components/WebTerminal/WebTerminal.d.ts

@@ -41,6 +41,10 @@ interface WebTerminalProps extends PropsWithChildren {
      * Optionally pass if the web terminal should be open by default
      */
     isInitiallyOpen?: boolean;
+    /**
+     * Specifies aria label for Web terminal
+     */
+    webTerminalAriaLabel?: string;
 }
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.

package/es/components/WebTerminal/WebTerminal.js

@@ -16,7 +16,7 @@ import { moderate02 } from '@carbon/motion';
 import { useWebTerminal } from './hooks/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 
-var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen"];
+var _excluded = ["actions", "children", "className", "closeIconDescription", "documentationLinks", "documentationLinksIconDescription", "isInitiallyOpen", "webTerminalAriaLabel"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var componentName = 'WebTerminal';
@@ -27,7 +27,8 @@ var defaults = {
   actions: Object.freeze([]),
   documentationLinks: Object.freeze([]),
   documentationLinksIconDescription: 'Show documentation links',
-  isInitiallyOpen: false
+  isInitiallyOpen: false,
+  webTerminalAriaLabel: 'Web terminal header'
 };
 /**
  * The `WebTerminal` is prompted by the user and is persistent until dismissed. The purpose of a web terminal is to provide users with the ability to type commands manually instead of using the GUI.
@@ -44,6 +45,8 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     documentationLinksIconDescription = _ref$documentationLin2 === void 0 ? defaults.documentationLinksIconDescription : _ref$documentationLin2,
     _ref$isInitiallyOpen = _ref.isInitiallyOpen,
     isInitiallyOpen = _ref$isInitiallyOpen === void 0 ? defaults.isInitiallyOpen : _ref$isInitiallyOpen,
+    _ref$webTerminalAriaL = _ref.webTerminalAriaLabel,
+    webTerminalAriaLabel = _ref$webTerminalAriaL === void 0 ? defaults.webTerminalAriaLabel : _ref$webTerminalAriaL,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useWebTerminal = useWebTerminal(),
     open = _useWebTerminal.open,
@@ -102,6 +105,7 @@ var WebTerminal = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     },
     onAnimationEnd: onAnimationEnd
   }), /*#__PURE__*/React__default.createElement("header", {
+    "aria-label": webTerminalAriaLabel,
     className: "".concat(blockClass, "__bar")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__actions")
@@ -196,7 +200,11 @@ WebTerminal.propTypes = {
   /**
    * Optionally pass if the web terminal should be open by default
    */
-  isInitiallyOpen: PropTypes.bool
+  isInitiallyOpen: PropTypes.bool,
+  /**
+   * Specifies aria label for Web terminal
+   */
+  webTerminalAriaLabel: PropTypes.string
 };
 
 export { WebTerminal };

package/es/global/js/hooks/useFocus.d.ts

@@ -1,11 +1,13 @@
-export function useFocus(modalRef: any): {
+export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
     firstElement: any;
     lastElement: any;
     allElements: any;
+    specifiedElement: any;
     keyDownListener: (event: any) => void;
     getFocusable: () => {
         first: any;
         last: any;
         all: any;
+        specifiedElement: any;
     };
 };

package/es/global/js/hooks/useFocus.js

@@ -9,7 +9,7 @@ import { usePrefix } from '@carbon/react';
 import { pkg } from '../../../settings.js';
 import { useCallback, useEffect } from 'react';
 
-var useFocus = function useFocus(modalRef) {
+var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var carbonPrefix = usePrefix();
   var tearsheetBaseClass = "".concat(pkg.prefix, "--tearsheet");
   // Querying focusable element in the modal
@@ -39,12 +39,14 @@ var useFocus = function useFocus(modalRef) {
     var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
     var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
+    var specifiedElement = selectorPrimaryFocus ? modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelector(selectorPrimaryFocus) : null;
     return {
       first: first,
       last: last,
-      all: all
+      all: all,
+      specifiedElement: specifiedElement
     };
-  }, [modalEl, query]);
+  }, [modalEl, query, selectorPrimaryFocus]);
   useEffect(function () {
     getFocusable();
   }, [getFocusable]);
@@ -76,6 +78,7 @@ var useFocus = function useFocus(modalRef) {
     firstElement: getFocusable().first,
     lastElement: getFocusable().last,
     allElements: getFocusable().all,
+    specifiedElement: getFocusable().specified,
     keyDownListener: handleKeyDown,
     getFocusable: getFocusable
   };

package/es/global/js/hooks/useRetrieveStepData.d.ts

@@ -5,5 +5,5 @@ export function useRetrieveStepData({ stepsContext, stepNumber, introStep, inval
     invalid: boolean;
     shouldIncludeStep: boolean;
     secondaryLabel: string;
-    title: string;
+    title: React.ReactNode;
 }): void;

package/es/global/js/hooks/useRetrieveStepData.js

@@ -18,7 +18,7 @@ import { useEffect } from 'react';
  * @param {boolean} useResetCreateComponent.invalid
  * @param {boolean} useResetCreateComponent.shouldIncludeStep
  * @param {string} useResetCreateComponent.secondaryLabel
- * @param {string} useResetCreateComponent.title
+ * @param {React.ReactNode} useResetCreateComponent.title
  */
 var useRetrieveStepData = function useRetrieveStepData(_ref) {
   var stepsContext = _ref.stepsContext,

package/lib/components/AddSelect/AddSelect.d.ts

@@ -1,2 +1,44 @@
-export let AddSelect: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { Filter, Item, Theme } from './types';
+export interface AddSelectProps {
+    className?: string;
+    clearFiltersText?: string;
+    closeIconDescription?: string;
+    columnInputPlaceholder?: string;
+    description: string;
+    filterByLabel?: string;
+    globalFilters?: Filter[];
+    globalFiltersIconDescription?: string;
+    globalFiltersLabel?: string;
+    globalFiltersPlaceholderText?: string;
+    globalFiltersPrimaryButtonText?: string;
+    globalFiltersSecondaryButtonText?: string;
+    globalSearchLabel: string;
+    globalSearchPlaceholder?: string;
+    globalSortBy?: Array<any>;
+    illustrationTheme?: Theme;
+    influencerTitle?: string;
+    items: Item;
+    itemsLabel: string;
+    metaIconDescription?: string;
+    metaPanelTitle?: string;
+    multi: boolean;
+    navIconDescription?: string;
+    noResultsDescription: string;
+    noResultsTitle: string;
+    noSelectionDescription?: string;
+    noSelectionTitle?: string;
+    onClose: () => void;
+    onCloseButtonText: string;
+    onSubmit: () => void;
+    onSubmitButtonText: string;
+    open: boolean;
+    /**
+     * portal target for the all tags modal
+     */
+    portalTarget?: ReactNode;
+    searchResultsTitle?: string;
+    sortByLabel?: string;
+    title: string;
+}
+export declare const AddSelect: React.ForwardRefExoticComponent<AddSelectProps & React.RefAttributes<HTMLDivElement>>;

package/lib/components/AddSelect/AddSelect.js

@@ -31,10 +31,12 @@ var AddSelect = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var normalizedItems = useNormalizedItems ? addSelectUtils.normalize(items) : null;
   var globalFilterOpts = props.multi && globalFilters !== null && globalFilters !== void 0 && globalFilters.length ? addSelectUtils.getGlobalFilterValues(globalFilters, normalizedItems) : null;
   var defaultModifiers = props.multi && items.modifiers ? items.entries.map(function (item) {
-    var modifierAttribute = items.modifiers.id;
-    return _rollupPluginBabelHelpers.defineProperty({
+    var _items$modifiers;
+    var modifierAttribute = items === null || items === void 0 || (_items$modifiers = items.modifiers) === null || _items$modifiers === void 0 ? void 0 : _items$modifiers.id;
+    var modifier = {
       id: item.id
-    }, modifierAttribute, item[modifierAttribute]);
+    };
+    return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, modifier), modifierAttribute && _rollupPluginBabelHelpers.defineProperty({}, modifierAttribute, item[modifierAttribute]));
   }) : [];
   return /*#__PURE__*/React__default["default"].createElement(AddSelectBody.AddSelectBody, _rollupPluginBabelHelpers["extends"]({}, props, {
     ref: ref,
@@ -52,6 +54,7 @@ AddSelect.propTypes = {
   columnInputPlaceholder: index["default"].string,
   description: index["default"].string.isRequired,
   filterByLabel: index["default"].string,
+  /**@ts-ignore */
   globalFilters: index["default"].arrayOf(index["default"].shape({
     id: index["default"].string,
     label: index["default"].string
@@ -66,6 +69,7 @@ AddSelect.propTypes = {
   globalSortBy: index["default"].array,
   illustrationTheme: index["default"].oneOf(['light', 'dark']),
   influencerTitle: index["default"].string,
+  /**@ts-ignore */
   items: index["default"].shape({
     modifiers: index["default"].shape({
       id: index["default"].string,

package/lib/components/AddSelect/AddSelectBody.d.ts

@@ -1,2 +1,44 @@
-export let AddSelectBody: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+import React, { ReactNode } from 'react';
+import { Item, Theme } from './types';
+export interface AddSelectBodyProps {
+    className?: string;
+    clearFiltersText?: string;
+    closeIconDescription?: string;
+    columnInputPlaceholder?: string;
+    defaultModifiers?: Array<any>;
+    description?: string;
+    filterByLabel?: string;
+    globalFilterOpts?: Array<any>;
+    globalFiltersIconDescription?: string;
+    globalFiltersLabel?: string;
+    globalFiltersPlaceholderText?: string;
+    globalFiltersPrimaryButtonText?: string;
+    globalFiltersSecondaryButtonText?: string;
+    globalSearchLabel: string;
+    globalSearchPlaceholder?: string;
+    globalSortBy?: Array<any>;
+    illustrationTheme?: Theme;
+    influencerTitle?: string;
+    items?: Item;
+    itemsLabel?: string;
+    metaIconDescription?: string;
+    metaPanelTitle?: string;
+    multi?: boolean;
+    navIconDescription?: string;
+    noResultsDescription?: string;
+    noResultsTitle?: string;
+    noSelectionDescription?: string;
+    noSelectionTitle?: string;
+    normalizedItems?: object;
+    onClose?: () => void;
+    onCloseButtonText?: string;
+    onSubmit?: (selection: any) => void;
+    onSubmitButtonText?: string;
+    open?: boolean;
+    portalTarget?: ReactNode;
+    searchResultsTitle?: string;
+    sortByLabel?: string;
+    title?: string;
+    useNormalizedItems?: boolean;
+}
+export declare const AddSelectBody: React.ForwardRefExoticComponent<AddSelectBodyProps & React.RefAttributes<HTMLDivElement>>;