feat(AddSelect): add dynamic additional component at start of body

packages/ibm-products-styles/src/__tests__/__snapshots__/styles.test.js.snap

@@ -2553,6 +2553,11 @@ p.c4p--about-modal__copyright-text:first-child {
   width: 40rem;
   max-width: 100%;
 }
+.c4p--side-panel.c4p--side-panel--xl {
+  /* any value is single value list */
+  width: 65rem;
+  max-width: 100%;
+}
 .c4p--side-panel.c4p--side-panel--2xl {
   /* any value is single value list */
   width: 40rem;
@@ -4270,7 +4275,7 @@ p.c4p--about-modal__copyright-text:first-child {
   right: 0;
   display: flex;
   align-items: center;
-  border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
+  border-left: 1px solid var(--cds-border-subtle);
 }
 
 .c4p--datagrid__right-sticky-column-header {
@@ -4285,19 +4290,19 @@ p.c4p--about-modal__copyright-text:first-child {
   left: 0;
   display: flex;
   align-items: center;
-  border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
+  border-right: 1px solid var(--cds-border-subtle);
 }
 
 .c4p--datagrid__left-sticky-column-header {
   /* stylelint-disable-next-line declaration-no-important */
   position: sticky !important;
   z-index: 1;
   left: 0;
-  border-right: 1px solid var(--cds-layer-active-02, #c6c6c6);
+  border-right: 1px solid var(--cds-border-subtle);
 }
 
 .c4p--datagrid__right-sticky-column-header {
-  border-left: 1px solid var(--cds-layer-active-02, #c6c6c6);
+  border-left: 1px solid var(--cds-border-subtle);
 }
 
 .c4p--datagrid__left-sticky-column-cell.c4p--datagrid__left-sticky-column-cell--with-extra-select-column,
@@ -4991,6 +4996,12 @@ th.c4p--datagrid__select-all-toggle-on.button {
   align-items: center;
 }
 
+.c4p--datagrid__static--outer-cell {
+  display: flex;
+  height: -webkit-fill-available;
+  align-items: center;
+}
+
 .c4p--datagrid__inline-edit--outer-cell-button {
   width: 100%;
   height: calc(100% + 2px);
@@ -5943,10 +5954,14 @@ th.c4p--datagrid__select-all-toggle-on.button {
   background: var(--cds-layer-02, #ffffff);
 }
 
+.c4p--add-select__additional-info {
+  padding: 1rem;
+  padding-bottom: 0;
+}
+
 .c4p--add-select__header {
   padding: 1rem;
   padding-bottom: 0;
-  border-top: 1px solid var(--cds-layer-accent-01, #e0e0e0);
 }
 
 .c4p--add-select__body {

packages/ibm-products-styles/src/components/AddSelect/_add-select.scss

@@ -17,10 +17,14 @@
 $block-class: #{$pkg-prefix}--add-select;
 $tearsheet-class: #{$pkg-prefix}--tearsheet;
 
+.#{$block-class}__additional-info {
+  padding: $spacing-05;
+  padding-bottom: 0;
+}
+
 .#{$block-class}__header {
   padding: $spacing-05;
   padding-bottom: 0;
-  border-top: 1px solid $layer-accent-01;
 }
 
 .#{$block-class}__body {

packages/ibm-products/src/components/AddSelect/AddSelect.tsx

@@ -13,6 +13,7 @@ import { Filter, Item, Theme } from './types';
 const componentName = 'AddSelect';
 
 export interface AddSelectProps {
+  additionalInfo?: ReactNode;
   className?: string;
   clearFiltersText?: string;
   closeIconDescription?: string;
@@ -96,6 +97,7 @@ export const AddSelect = forwardRef(
 );
 
 AddSelect.propTypes = {
+  additionalInfo: PropTypes.node,
   className: PropTypes.string,
   clearFiltersText: PropTypes.string,
   closeIconDescription: PropTypes.string.isRequired,

packages/ibm-products/src/components/AddSelect/AddSelectBody.test.js

@@ -7,6 +7,7 @@
 
 import { render, fireEvent, screen } from '@testing-library/react';
 import React from 'react';
+import { TextInput } from '@carbon/react';
 import { AddSelectBody } from './AddSelectBody';
 import { pkg, carbon } from '../../settings';
 import { getGlobalFilterValues, normalize } from './add-select-utils';
@@ -215,6 +216,10 @@ const itemWithAvatar = {
   ],
 };
 
+const additionalTextInput = (
+  <TextInput id="text-input-1" type="text" labelText="Text input label" />
+);
+
 describe(componentName, () => {
   const { ResizeObserver } = window;
   let warn;
@@ -463,4 +468,17 @@ describe(componentName, () => {
     fireEvent.change(globalSearch, { target: { value: 'florida' } });
     fireEvent.change(globalSearch, { target: { value: '' } });
   });
+
+  it('handle additional component', async () => {
+    const newProps = {
+      ...multiProps,
+      additionalInfo: additionalTextInput,
+    };
+    render(<AddSelectBody {...newProps} />);
+    const addInfo = document.querySelectorAll(
+      `.${blockClass}__additional-info`
+    )[0];
+    expect(addInfo);
+    fireEvent.click(addInfo);
+  });
 });

packages/ibm-products/src/components/AddSelect/AddSelectBody.tsx

@@ -28,6 +28,7 @@ const blockClass = `${pkg.prefix}--add-select`;
 const componentName = 'AddSelectBody';
 
 export interface AddSelectBodyProps {
+  additionalInfo?: ReactNode;
   className?: string;
   clearFiltersText?: string;
   closeIconDescription?: string;
@@ -72,6 +73,7 @@ export interface AddSelectBodyProps {
 export const AddSelectBody = forwardRef(
   (
     {
+      additionalInfo,
       className,
       clearFiltersText,
       closeIconDescription,
@@ -275,6 +277,12 @@ export const AddSelectBody = forwardRef(
     // main content
     const body = (
       <>
+        {additionalInfo && (
+          <div className={`${blockClass}__additional-info`}>
+            {additionalInfo}
+          </div>
+        )}
+
         <div id="add-select" className={`${blockClass}__header`}>
           <AddSelectFilter
             inputLabel={globalSearchLabel}

packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.stories.jsx

@@ -8,7 +8,7 @@
 import React, { useState } from 'react';
 // import styles from './_storybook-styles.scss?inline'; // import index in case more files are added later.
 import { MultiAddSelect } from '.';
-import { Button } from '@carbon/react';
+import { Button, TextInput } from '@carbon/react';
 import image from '../UserProfileImage/headshot.jpg'; // cspell:disable-line
 import { Group, Document } from '@carbon/react/icons';
 
@@ -27,6 +27,26 @@ export default {
     },
   },
   argTypes: {
+    additionalInfo: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'no additional info',
+          1: 'Text Input',
+        },
+      },
+      options: [0, 1],
+      mapping: {
+        0: null,
+        1: (
+          <TextInput
+            id="text-input-1"
+            type="text"
+            labelText="Text input label"
+          />
+        ),
+      },
+    },
     items: {
       control: {
         type: 'select',
@@ -303,3 +323,10 @@ WithAvatars.args = {
   items: 4,
   ...defaultProps,
 };
+
+export const WithTextInput = Template.bind({});
+WithTextInput.args = {
+  items: 1,
+  additionalInfo: 1,
+  ...defaultProps,
+};

packages/ibm-products/src/components/MultiAddSelect/MultiAddSelect.tsx

@@ -49,6 +49,11 @@ type ItemType = {
 };
 
 interface MultiAddSelectProps {
+  /**
+   * option to display additional component (ex. TextInput)
+   * in the beginning of the body section
+   */
+  additionalInfo?: ReactNode;
   /**
    * optional class name
    */
@@ -168,6 +173,11 @@ export let MultiAddSelect = forwardRef(
 MultiAddSelect = pkg.checkComponentEnabled(MultiAddSelect, componentName);
 
 MultiAddSelect.propTypes = {
+  /**
+   * option to display additional component (ex. TextInput)
+   * in the beginning of the body section
+   */
+  additionalInfo: PropTypes.node,
   /**
    * optional class name
    */

packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.stories.jsx

@@ -8,7 +8,7 @@
 import React, { useState } from 'react';
 // import styles from './_storybook-styles.scss?inline'; // import index in case more files are added later.
 import { SingleAddSelect } from '.';
-import { Button } from '@carbon/react';
+import { Button, TextInput } from '@carbon/react';
 import DocsPage from './SingleAddSelect.docs-page';
 // import { action } from '@storybook/addon-actions';
 
@@ -23,6 +23,26 @@ export default {
     },
   },
   argTypes: {
+    additionalInfo: {
+      control: {
+        type: 'select',
+        labels: {
+          0: 'no additional info',
+          1: 'Text Input',
+        },
+      },
+      options: [0, 1],
+      mapping: {
+        0: null,
+        1: (
+          <TextInput
+            id="text-input-1"
+            type="text"
+            labelText="Text input label"
+          />
+        ),
+      },
+    },
     items: {
       control: {
         type: 'select',
@@ -154,3 +174,11 @@ WithHierarchy.args = {
   items: 2,
   ...defaultProps,
 };
+
+export const WithTextInput = Template.bind({});
+WithTextInput.args = {
+  items: 1,
+  additionalInfo: 1,
+  ...defaultProps,
+};
+

packages/ibm-products/src/components/SingleAddSelect/SingleAddSelect.tsx

@@ -5,7 +5,7 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-import React, { ForwardedRef, forwardRef } from 'react';
+import React, { ForwardedRef, ReactNode, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { AddSelect } from '../AddSelect';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
@@ -17,6 +17,11 @@ import { Entry } from '../AddSelect/types';
 const componentName = 'SingleAddSelect';
 
 interface SingleAddSelectProps {
+  /**
+   * option to display additional component (ex. TextInput)
+   * in the beginning of the body section
+   */
+  additionalInfo?: ReactNode;
   /**
    * optional class name
    */
@@ -115,6 +120,11 @@ export let SingleAddSelect = forwardRef(
 SingleAddSelect = pkg.checkComponentEnabled(SingleAddSelect, componentName);
 
 SingleAddSelect.propTypes = {
+  /**
+   * option to display additional component (ex. TextInput)
+   * in the beginning of the body section
+   */
+  additionalInfo: PropTypes.node,
   /**
    * optional class name
    */