Add Support for customTarget in MultiSelect Component (#6915)

Co-authored-by: svc-changelog <svc-changelog@palantir.com>

packages/docs-app/changelog/@unreleased/pr-6915.v2.yml

@@ -0,0 +1,5 @@
+type: improvement
+improvement:
+  description: Add Support for Custom Target in MultiSelect Component
+  links:
+  - https://github.com/palantir/blueprint/pull/6915

packages/docs-app/src/examples/select-examples/multiSelectCustomTarget.tsx

@@ -0,0 +1,31 @@
+/* !
+ * (c) Copyright 2024 Palantir Technologies Inc. All rights reserved.
+ */
+
+import * as React from "react";
+
+import { Tag, Text } from "@blueprintjs/core";
+
+interface IMultiSelectCustomTargetProps {
+    count: number;
+}
+
+export const MultiSelectCustomTarget: React.FC<IMultiSelectCustomTargetProps> = ({ count }) => {
+    return (
+        <Tag
+            large={true}
+            round={true}
+            minimal={true}
+            interactive={true}
+            intent={"primary"}
+            className="docs-custom-target"
+        >
+            <div className="docs-custom-target-content">
+                <Text className={"docs-custom-target-text"}>Custom Target</Text>
+                <Tag intent={"primary"} round={true}>
+                    {count}
+                </Tag>
+            </div>
+        </Tag>
+    );
+};

packages/docs-app/src/examples/select-examples/multiSelectExample.tsx

@@ -34,6 +34,8 @@ import {
 
 import { PropCodeTooltip } from "../../common/propCodeTooltip";
 
+import { MultiSelectCustomTarget } from "./multiSelectCustomTarget";
+
 const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING];
 
 export interface MultiSelectExampleState {
@@ -51,12 +53,14 @@ export interface MultiSelectExampleState {
     resetOnSelect: boolean;
     showClearButton: boolean;
     tagMinimal: boolean;
+    customTarget: boolean;
 }
 
 export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiSelectExampleState> {
     public state: MultiSelectExampleState = {
         allowCreate: false,
         createdItems: [],
+        customTarget: false,
         disabled: false,
         fill: false,
         films: [],
@@ -95,9 +99,19 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
 
     private handleTagMinimalChange = this.handleSwitchChange("tagMinimal");
 
+    private handleCustomTargetChange = this.handleSwitchChange("customTarget");
+
     public render() {
-        const { allowCreate, films, hasInitialContent, tagMinimal, popoverMinimal, matchTargetWidth, ...flags } =
-            this.state;
+        const {
+            allowCreate,
+            films,
+            hasInitialContent,
+            tagMinimal,
+            popoverMinimal,
+            matchTargetWidth,
+            customTarget,
+            ...flags
+        } = this.state;
         const getTagProps = (_value: React.ReactNode, index: number): TagProps => ({
             intent: this.state.intent ? INTENTS[index % INTENTS.length] : Intent.NONE,
             minimal: tagMinimal,
@@ -132,6 +146,7 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
                         tagProps: getTagProps,
                     }}
                     selectedItems={this.state.films}
+                    customTarget={this.state.customTarget ? this.renderCustomTarget : undefined}
                 />
             </Example>
         );
@@ -145,6 +160,7 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
                     label="Open popover on key down"
                     checked={this.state.openOnKeyDown}
                     onChange={this.handleKeyDownChange}
+                    disabled={this.state.customTarget}
                 />
                 <Switch
                     label="Reset query on select"
@@ -183,6 +199,19 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
                         onChange={this.handleShowClearButtonChange}
                     />
                 </PropCodeTooltip>
+                <PropCodeTooltip
+                    content={
+                        <>
+                            <Code>customTarget</Code> is {this.state.customTarget ? "defined" : "undefined"}
+                        </>
+                    }
+                >
+                    <Switch
+                        label="Use Custom Target"
+                        checked={this.state.customTarget}
+                        onChange={this.handleCustomTargetChange}
+                    />
+                </PropCodeTooltip>
                 <H5>Appearance props</H5>
                 <PropCodeTooltip snippet={`disabled={${this.state.disabled.toString()}}`}>
                     <Switch label="Disabled" checked={this.state.disabled} onChange={this.handleDisabledChange} />
@@ -222,6 +251,8 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, MultiS
         );
     }
 
+    private renderCustomTarget = (selectedItems: Film[]) => <MultiSelectCustomTarget count={selectedItems.length} />;
+
     private renderTag = (film: Film) => film.title;
 
     private renderFilm: ItemRenderer<Film> = (film, props) => {

packages/docs-app/src/styles/_examples.scss

@@ -711,6 +711,25 @@ $docs-hotkey-piano-height: 510px;
   }
 }
 
+#{example("MultiSelect")} .docs-example {
+  .docs-custom-target {
+    padding-right: 6px;
+    width: 100%;
+  }
+
+  .docs-custom-target-content {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    min-width: 145px;
+  }
+
+  .docs-custom-target-text {
+    margin-right: 8px;
+  }
+}
+
 //
 // TABLE
 //

packages/select/changelog/@unreleased/pr-6915.v2.yml

@@ -0,0 +1,5 @@
+type: improvement
+improvement:
+  description: Add Support for children in MultiSelect Component
+  links:
+  - https://github.com/palantir/blueprint/pull/6915

packages/select/src/common/classes.ts

@@ -20,6 +20,8 @@ const NS = Classes.getClassNamespace();
 
 export const MULTISELECT = `${NS}-multi-select`;
 export const MULTISELECT_POPOVER = `${MULTISELECT}-popover`;
+export const MULTISELECT_POPOVER_DEFAULT_WIDTH = `${MULTISELECT}-popover-default-width`;
+export const MULTISELECT_POPOVER_TAG_INPUT_MARGIN = `${MULTISELECT}-popover-tag-input-margin`;
 export const MULTISELECT_TAG_INPUT_INPUT = `${MULTISELECT}-tag-input-input`;
 export const OMNIBAR = `${NS}-omnibar`;
 export const OMNIBAR_OVERLAY = `${OMNIBAR}-overlay`;

packages/select/src/components/multi-select/_multi-select.scss

@@ -3,12 +3,36 @@
 
 @import "../../common/variables";
 
+$select-padding: $pt-grid-size * 0.5;
+
 .#{$ns}-multi-select {
   min-width: $pt-grid-size * 15;
 }
 
 .#{$ns}-multi-select-popover {
+  .#{$ns}-popover-content {
+    // use padding on container rather than margin on input group
+    // because top margin leaves some empty space with no background color.
+    padding: $select-padding;
+  }
+
+  .#{$ns}-multi-select-popover-default-width {
+    max-width: 350px;
+  }
+
+  // If the TagInput is being rendered inside the Popover, give it a slight margin bottom
+  // so the box shadow of the input is not cut off by the Menu white background
+  .#{$ns}-multi-select-popover-tag-input-margin {
+    margin-bottom: 1px;
+  }
+
+
   .#{$ns}-menu {
+    // offset the padding added by the multiselect component so menu can remain full width with padding on either side
+    // this is important so menu dividers can be full width, and so that menu items can have padding to the left and right
+    // for menu items
+    margin-left: -$select-padding;
+    margin-right: -$select-padding;
     max-height: $select-popover-max-height;
     max-width: $select-popover-max-width;
     overflow: auto;

packages/select/src/components/multi-select/multi-select.md

@@ -1,7 +1,7 @@
 @# MultiSelect
 
 __MultiSelect__ renders a UI to choose multiple items from a list. It renders a
-[__TagInput__](#core/components/tag-input) wrapped in a [__Popover__](#core/components/popover).
+[__TagInput__](#core/components/tag-input), or `customTarget` if defined, wrapped in a [__Popover__](#core/components/popover).
 Just like with [__Select__](#select/select), you can pass in a predicate to customize the filtering algorithm.
 
 The selection state of a __MultiSelect__ is controlled with the `selectedItems` prop.