Merge 602ceeb into 47970a0

src/components/ComboBox/ComboBox.tsx

@@ -155,7 +155,8 @@ export class ComboBox extends React.Component<ComboBoxProps, ComboBoxState> {
     this.safeSetState({
       inputValue: '',
     })
-    this.scrollMenuToTop()
+
+    this.props.closeOnSelect && this.scrollMenuToTop()
   }
 
   scrollMenuToTop = () => {

src/components/Dropdown/V2/Dropdown.Container.tsx

@@ -131,7 +131,11 @@ export class DropdownContainer extends React.PureComponent<Props, State> {
     }
 
     // Adjust index, if changed
-    if (isDefined(nextProps.index) && nextProps.index !== state.index) {
+    if (
+      nextProps.closeOnSelect &&
+      isDefined(nextProps.index) &&
+      nextProps.index !== state.index
+    ) {
       nextState = {
         ...nextState,
         ...updateIndex(state, nextProps.index),

src/components/Dropdown/V2/Dropdown.Item.tsx

@@ -23,6 +23,7 @@ import {
 } from '../../../utilities/component'
 import { noop } from '../../../utilities/other'
 import { COMPONENT_KEY } from './Dropdown.utils'
+import ItemSelectedCheck from './Dropdown.ItemSelectedCheck'
 
 export interface Props {
   actionId?: string
@@ -82,8 +83,13 @@ export class Item extends React.PureComponent<Props> {
 
   handleOnClick = (event: Event) => {
     const { onClick } = this.props
+    const state: any = this.props.getState()
 
-    onClick(event, { hasSubMenu: this.hasSubMenu() })
+    if (state && state.allowMultipleSelection && state.selectionClearer) {
+      onClick(state, event)
+    } else {
+      onClick(event, { hasSubMenu: this.hasSubMenu() })
+    }
   }
 
   hasSubMenu(): boolean {
@@ -174,7 +180,21 @@ export class Item extends React.PureComponent<Props> {
   }
 
   renderContent() {
-    const { actionId, renderItem, children, label, value } = this.props
+    const {
+      actionId,
+      renderItem,
+      children,
+      label,
+      value,
+      getState,
+    } = this.props
+    const internalState: any = getState()
+    const allowMultipleSelection =
+      internalState != null && internalState.allowMultipleSelection
+
+    if (allowMultipleSelection && renderItem == null) {
+      return ItemSelectedCheck(getCustomItemProps(this.props))
+    }
 
     if (renderItem) {
       return renderItem(getCustomItemProps(this.props))
@@ -250,11 +270,12 @@ const PropConnectedComponent = propConnect(COMPONENT_KEY.Item)(Item)
 const ConnectedItem: any = connect(
   // mapStateToProps
   (state: any) => {
-    const { getState, renderItem } = state
+    const { getState, renderItem, selectedItem } = state
 
     return {
       getState,
       renderItem,
+      selectedItem,
     }
   }
 )(

src/components/Dropdown/V2/Dropdown.ItemSelectedCheck.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import Icon from '../../Icon'
+import { classNames } from '../../../utilities/classNames'
+import { isSelectedItemEmpty } from './Dropdown.utils'
+import { ItemSelectedCheckUI } from './Dropdown.css'
+
+const ItemSelectedCheck = props => {
+  if (!props) return null
+  if (!props.value) return null
+
+  let isClearerActive = false
+
+  if (props.isSelectionClearer) {
+    const state = props.getState()
+    const { selectedItem } = state
+    isClearerActive = isSelectedItemEmpty(selectedItem)
+  }
+
+  const componentClassnames = classNames(
+    'c-ItemSelectedCheck',
+    props.isSelectionClearer && 'selectionClearer',
+    /* istanbul ignore next */
+    isClearerActive && 'is-selectionClearer-active'
+  )
+
+  return (
+    <ItemSelectedCheckUI className={componentClassnames}>
+      <span className="c-ItemSelectedCheck__value">{props.value}</span>
+      {props.isActive || isClearerActive ? <Icon name="check" /> : null}
+    </ItemSelectedCheckUI>
+  )
+}
+
+export default ItemSelectedCheck

src/components/Dropdown/V2/Dropdown.MenuContainer.tsx

@@ -21,6 +21,7 @@ import {
   onMenuReposition,
   onMenuUnmounted,
   selectItem,
+  clearSelection,
 } from './Dropdown.actions'
 import { MenuContainerUI } from './Dropdown.css.js'
 import { classNames } from '../../../utilities/classNames'
@@ -36,10 +37,12 @@ import { getComputedClientRect } from './Dropdown.MenuContainer.utils'
 const uniqueID = createUniqueIDFactory('DropdownMenuContainer')
 
 export interface Props {
+  allowMultipleSelection?: boolean
   animationDuration: number
   animationSequence: string
   children?: (props: any) => void
   className?: string
+  clearSelection: (...args: any[]) => void
   closeDropdown: () => void
   dropRight: boolean
   dropUp: boolean
@@ -59,6 +62,7 @@ export interface Props {
   renderEmpty?: any
   renderLoading?: any
   selectItem: (...args: any[]) => void
+  selectionClearer?: string
   shouldDropDirectionUpdate: (Position: any) => boolean
   triggerId?: string
   triggerNode?: HTMLElement
@@ -85,6 +89,7 @@ export const defaultProps = {
   positionFixed: false,
   shouldDropDirectionUpdate: () => true,
   selectItem: noop,
+  clearSelection: noop,
   zIndex: 1080,
 }
 
@@ -142,7 +147,14 @@ export class MenuContainer extends React.PureComponent<Props> {
   }
 
   getMenuProps() {
-    const { dropRight, isOpen, items, id, triggerId } = this.props
+    const {
+      dropRight,
+      isOpen,
+      items,
+      id,
+      triggerId,
+      allowMultipleSelection,
+    } = this.props
 
     const shouldDropUp = this.shouldDropUp()
 
@@ -217,9 +229,43 @@ export class MenuContainer extends React.PureComponent<Props> {
     items: Array<any>
     withIndex?: boolean
   }) => {
+    const {
+      allowMultipleSelection,
+      clearSelection,
+      focusItem,
+      selectionClearer,
+    } = this.props
+
+    if (allowMultipleSelection && selectionClearer) {
+      const clearerItem = {
+        value: selectionClearer,
+        id: createUniqueIDFactory('hsds-dropdown-v2-theallclearer')(),
+        label: '',
+      }
+
+      return [clearerItem].concat(items).map((item, index) => {
+        /* istanbul ignore next */
+        const indexProp = withIndex ? index : undefined
+        if (item.id === clearerItem.id) {
+          return (
+            <Item
+              {...this.getItemProps(item, indexProp)}
+              className="c-SelectionClearerItem"
+              onMouseMove={focusItem}
+              onClick={clearSelection}
+              isSelectionClearer
+            />
+          )
+        }
+
+        return <Item {...this.getItemProps(item, indexProp)}>{item.label}</Item>
+      })
+    }
+
     return items.map((item, index) => {
       /* istanbul ignore next */
       const indexProp = withIndex ? index : undefined
+
       return <Item {...this.getItemProps(item, indexProp)}>{item.label}</Item>
     })
   }
@@ -280,6 +326,7 @@ export class MenuContainer extends React.PureComponent<Props> {
   }
 
   forceHideMenuNode = () => {
+    /* istanbul ignore next */
     if (!this.placementNode) return
     this.placementNode.style.display = 'none'
   }
@@ -330,6 +377,7 @@ export class MenuContainer extends React.PureComponent<Props> {
       left: 0,
     }
 
+    /* istanbul ignore next */
     if (!this.node || !this.placementNode) return defaultStyles
 
     const { top, left } = this.getStylePosition()
@@ -345,6 +393,7 @@ export class MenuContainer extends React.PureComponent<Props> {
   setPositionStylesOnNode = positionData => {
     const { menuOffsetTop, onMenuReposition, triggerNode, zIndex } = this.props
 
+    /* istanbul ignore next */
     if (!this.node || !this.placementNode) return
 
     const { top, left, position } = positionData
@@ -475,6 +524,7 @@ const ConnectedMenuContainer: any = connect(
   // mapStateToProps
   (state: any) => {
     const {
+      allowMultipleSelection,
       dropUp,
       forceDropDown,
       getState,
@@ -486,13 +536,16 @@ const ConnectedMenuContainer: any = connect(
       positionFixed,
       renderEmpty,
       renderLoading,
+      selectedItem,
+      selectionClearer,
       shouldDropDirectionUpdate,
       triggerId,
       triggerNode,
       zIndex,
     } = state
 
     return {
+      allowMultipleSelection,
       dropRight: isDropRight(state),
       dropUp,
       forceDropDown,
@@ -505,6 +558,8 @@ const ConnectedMenuContainer: any = connect(
       positionFixed,
       renderEmpty,
       renderLoading,
+      selectedItem,
+      selectionClearer,
       shouldDropDirectionUpdate,
       triggerId,
       triggerNode,
@@ -513,6 +568,7 @@ const ConnectedMenuContainer: any = connect(
   },
   // mapDispatchToProps
   {
+    clearSelection,
     closeDropdown,
     focusItem,
     onMenuMounted,