Merge ecde80d into 6497dcf

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
@@ -35,6 +36,7 @@ export interface Props {
   index: string
   innerRef: (node: HTMLElement) => void
   isHover: boolean
+  isSelectionClearer: boolean
   items: Array<any>
   onMouseEnter: (...args: any[]) => void
   onMouseMove: (...args: any[]) => void
@@ -55,6 +57,7 @@ export class Item extends React.PureComponent<Props> {
     index: '0',
     innerRef: noop,
     isHover: false,
+    isSelectionClearer: false,
     items: undefined,
     dropRight: true,
     dropUp: false,
@@ -82,8 +85,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 +182,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))
@@ -215,13 +237,14 @@ export class Item extends React.PureComponent<Props> {
   setMenuNodeRef = node => (this.menuNode = node)
 
   render() {
-    const { className, disabled, type } = this.props
+    const { className, disabled, type, isSelectionClearer } = this.props
     const hasSubMenu = this.hasSubMenu()
 
     const componentClassName = classNames(
       'c-DropdownV2Item',
       disabled && 'is-disabled',
       !hasSubMenu && 'is-option',
+      isSelectionClearer && 'c-SelectionClearerItem',
       className
     )
 
@@ -250,11 +273,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,42 @@
+import * as React from 'react'
+import Icon from '../../Icon'
+import { classNames } from '../../../utilities/classNames'
+import { noop } from '../../../utilities/other'
+import { isSelectedItemEmpty } from './Dropdown.utils'
+import { ItemSelectedCheckUI } from './Dropdown.css'
+
+const defaultProps = {
+  value: '',
+  isActive: false,
+  isSelectionClearer: false,
+  getState: noop,
+}
+
+const ItemSelectedCheck = (props: any = defaultProps) => {
+  let isClearerActive = false
+  const state = props.getState()
+
+  if (props.isSelectionClearer && state) {
+    // @ts-ignore
+    isClearerActive = isSelectedItemEmpty(state.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>
+  )
+}
+
+ItemSelectedCheck.defaultProps = defaultProps
+ItemSelectedCheck.displayName = 'ItemSelectedCheck'
+
+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'
@@ -34,12 +35,15 @@ import { memoizeWithProps } from '../../../utilities/memoize'
 import { getComputedClientRect } from './Dropdown.MenuContainer.utils'
 
 const uniqueID = createUniqueIDFactory('DropdownMenuContainer')
+const clearerID = createUniqueIDFactory('hsds-dropdown-v2-theallclearer')
 
 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 +63,7 @@ export interface Props {
   renderEmpty?: any
   renderLoading?: any
   selectItem: (...args: any[]) => void
+  selectionClearer?: string
   shouldDropDirectionUpdate: (Position: any) => boolean
   triggerId?: string
   triggerNode?: HTMLElement
@@ -85,6 +90,7 @@ export const defaultProps = {
   positionFixed: false,
   shouldDropDirectionUpdate: () => true,
   selectItem: noop,
+  clearSelection: noop,
   zIndex: 1080,
 }
 
@@ -142,7 +148,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 +230,47 @@ 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: clearerID(),
+        label: '',
+      }
+
+      return [clearerItem].concat(items).map((item, index) => {
+        /* istanbul ignore next */
+        const indexProp = withIndex ? index : undefined
+        const itemProps: any = this.getItemProps(item, indexProp)
+
+        if (item.id === clearerItem.id) {
+          return (
+            <div key={clearerItem.id}>
+              <Item
+                {...itemProps}
+                onMouseMove={focusItem}
+                onClick={clearSelection}
+                isSelectionClearer
+              />
+              <Item type="divider" />
+            </div>
+          )
+        }
+
+        return <Item {...itemProps}>{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 +331,7 @@ export class MenuContainer extends React.PureComponent<Props> {
   }
 
   forceHideMenuNode = () => {
+    /* istanbul ignore next */
     if (!this.placementNode) return
     this.placementNode.style.display = 'none'
   }
@@ -330,6 +382,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 +398,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 +529,7 @@ const ConnectedMenuContainer: any = connect(
   // mapStateToProps
   (state: any) => {
     const {
+      allowMultipleSelection,
       dropUp,
       forceDropDown,
       getState,
@@ -486,13 +541,16 @@ const ConnectedMenuContainer: any = connect(
       positionFixed,
       renderEmpty,
       renderLoading,
+      selectedItem,
+      selectionClearer,
       shouldDropDirectionUpdate,
       triggerId,
       triggerNode,
       zIndex,
     } = state
 
     return {
+      allowMultipleSelection,
       dropRight: isDropRight(state),
       dropUp,
       forceDropDown,
@@ -505,6 +563,8 @@ const ConnectedMenuContainer: any = connect(
       positionFixed,
       renderEmpty,
       renderLoading,
+      selectedItem,
+      selectionClearer,
       shouldDropDirectionUpdate,
       triggerId,
       triggerNode,
@@ -513,6 +573,7 @@ const ConnectedMenuContainer: any = connect(
   },
   // mapDispatchToProps
   {
+    clearSelection,
     closeDropdown,
     focusItem,
     onMenuMounted,