From 86d75a5b074c910ff67ad78c37ed484d4074827c Mon Sep 17 00:00:00 2001
From: Hrusikesh Panda <hrusikesh.panda@dowjones.com>
Date: Thu, 9 Jan 2020 19:11:33 -0500
Subject: [PATCH 1/2] chore: Ignore mac crap

---
 .gitignore | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.gitignore b/.gitignore
index f5c581e6..359f5895 100644
--- a/.gitignore
+++ b/.gitignore
@@ -45,3 +45,6 @@ dist
 # Webstorm cache
 .idea
 /webpack-stats.json
+
+# Mac crap
+.DS_Store

From 65c97273f45329f985b5522493d39322553a1a90 Mon Sep 17 00:00:00 2001
From: Hrusikesh Panda <hrusikesh.panda@dowjones.com>
Date: Thu, 9 Jan 2020 21:20:39 -0500
Subject: [PATCH 2/2] feat: Reduce bundle size by removing classnames

---
 package.json                |  1 -
 src/index.js                | 17 +++++++----------
 src/input/index.js          | 17 +++++++++--------
 src/tag/index.js            |  9 +++------
 src/tree-node/index.js      | 35 ++++++++++++++++-------------------
 src/tree-node/node-label.js |  8 ++------
 src/tree-node/toggle.js     |  6 +-----
 src/trigger/index.js        | 23 ++++++++++-------------
 yarn.lock                   |  2 +-
 9 files changed, 49 insertions(+), 69 deletions(-)

diff --git a/package.json b/package.json
index e5384126..2daeb90d 100644
--- a/package.json
+++ b/package.json
@@ -44,7 +44,6 @@
   ],
   "dependencies": {
     "array.partial": "^1.0.5",
-    "classnames": "^2.2.6",
     "react-infinite-scroll-component": "^4.0.2"
   },
   "devDependencies": {
diff --git a/src/index.js b/src/index.js
index 65866816..be2c8979 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,6 @@
  * license MIT
  * see https://github.com/dowjones/react-dropdown-tree-select
  */
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 
@@ -17,11 +16,9 @@ import Tree from './tree'
 import TreeManager from './tree-manager'
 import keyboardNavigation from './tree-manager/keyboardNavigation'
 
-import styles from './index.css'
+import './index.css'
 import { getAriaLabel } from './a11y'
 
-const cx = cn.bind(styles)
-
 class DropdownTreeSelect extends Component {
   static propTypes = {
     data: PropTypes.oneOfType([PropTypes.object, PropTypes.array]).isRequired,
@@ -286,17 +283,17 @@ class DropdownTreeSelect extends Component {
     return (
       <div
         id={this.clientId}
-        className={cx(this.props.className, 'react-dropdown-tree-select')}
+        className={[this.props.className && this.props.className, 'react-dropdown-tree-select']
+          .filter(Boolean)
+          .join(' ')}
         ref={node => {
           this.node = node
         }}
       >
         <div
-          className={cx(
-            'dropdown',
-            { 'simple-select': mode === 'simpleSelect' },
-            { 'radio-select': mode === 'radioSelect' }
-          )}
+          className={['dropdown', mode === 'simpleSelect' && 'simple-select', mode === 'radioSelect' && 'radio-select']
+            .filter(Boolean)
+            .join(' ')}
         >
           <Trigger onTrigger={this.onTrigger} showDropdown={showDropdown} {...commonProps} tags={tags}>
             <Input
diff --git a/src/input/index.js b/src/input/index.js
index 781e99f4..18c50810 100644
--- a/src/input/index.js
+++ b/src/input/index.js
@@ -1,18 +1,19 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import cn from 'classnames/bind'
 import Tag from '../tag'
-import styles from './index.css'
+import './index.css'
 import { getDataset, debounce } from '../utils'
 import { getAriaLabel } from '../a11y'
 
-const cx = cn.bind(styles)
-
 const getTags = (tags = [], onDelete, readOnly, disabled, labelRemove) =>
   tags.map(tag => {
     const { _id, label, tagClassName, dataset } = tag
     return (
-      <li className={cx('tag-item', tagClassName)} key={`tag-item-${_id}`} {...getDataset(dataset)}>
+      <li
+        className={['tag-item', tagClassName && tagClassName.toString()].filter(Boolean).join(' ')}
+        key={`tag-item-${_id}`}
+        {...getDataset(dataset)}
+      >
         <Tag
           label={label}
           id={_id}
@@ -65,14 +66,14 @@ class Input extends PureComponent {
     } = this.props
 
     return (
-      <ul className={cx('tag-list')}>
+      <ul className="tag-list">
         {getTags(tags, onTagRemove, readOnly, disabled, texts.labelRemove)}
-        <li className={cx('tag-item')}>
+        <li className="tag-item">
           <input
             type="text"
             disabled={disabled}
             ref={inputRef}
-            className={cx('search')}
+            className="search"
             placeholder={texts.placeholder || 'Choose...'}
             onKeyDown={onKeyDown}
             onChange={this.handleInputChange}
diff --git a/src/tag/index.js b/src/tag/index.js
index 86d62555..a0e9ce44 100644
--- a/src/tag/index.js
+++ b/src/tag/index.js
@@ -1,10 +1,7 @@
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 
-import styles from './index.css'
-
-const cx = cn.bind(styles)
+import './index.css'
 
 export const getTagId = id => `${id}_tag`
 
@@ -44,11 +41,11 @@ class Tag extends PureComponent {
 
     const tagId = getTagId(id)
     const buttonId = `${id}_button`
-    const className = cx('tag-remove', { readOnly }, { disabled })
+    const className = ['tag-remove', readOnly && 'readOnly', disabled && 'disabled'].filter(Boolean).join(' ')
     const isDisabled = readOnly || disabled
 
     return (
-      <span className={cx('tag')} id={tagId} aria-label={label}>
+      <span className="tag" id={tagId} aria-label={label}>
         {label}
         <button
           id={buttonId}
diff --git a/src/tree-node/index.js b/src/tree-node/index.js
index cb94a2db..4c58a49c 100644
--- a/src/tree-node/index.js
+++ b/src/tree-node/index.js
@@ -1,4 +1,3 @@
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 
@@ -7,9 +6,7 @@ import Actions from './actions'
 import NodeLabel from './node-label'
 import Toggle from './toggle'
 
-import styles from './index.css'
-
-const cx = cn.bind(styles)
+import './index.css'
 
 const isLeaf = children => isEmpty(children)
 
@@ -30,22 +27,22 @@ const getNodeCx = props => {
     _focused: focused,
   } = props
 
-  return cx(
+  return [
     'node',
-    {
-      leaf: isLeaf(_children),
-      tree: !isLeaf(_children),
-      disabled,
-      hide,
-      'match-in-children': keepTreeOnSearch && matchInChildren,
-      'match-in-parent': keepTreeOnSearch && keepChildrenOnSearch && matchInParent,
-      partial: showPartiallySelected && partial,
-      readOnly,
-      checked,
-      focused,
-    },
-    className
-  )
+    isLeaf(_children) && 'leaf',
+    !isLeaf(_children) && 'tree',
+    disabled && 'disabled',
+    hide && 'hide',
+    keepTreeOnSearch && matchInChildren && 'match-in-children',
+    keepTreeOnSearch && keepChildrenOnSearch && matchInParent && 'match-in-parent',
+    showPartiallySelected && partial && 'partial',
+    readOnly && 'readOnly',
+    checked && 'checked',
+    focused && 'focused',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ')
 }
 
 class TreeNode extends PureComponent {
diff --git a/src/tree-node/node-label.js b/src/tree-node/node-label.js
index a5bc4ef6..a83d5067 100644
--- a/src/tree-node/node-label.js
+++ b/src/tree-node/node-label.js
@@ -1,13 +1,8 @@
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
 import Checkbox from '../checkbox'
 import RadioButton from '../radio'
 
-import styles from './index.css'
-
-const cx = cn.bind(styles)
-
 class NodeLabel extends PureComponent {
   static propTypes = {
     id: PropTypes.string.isRequired,
@@ -55,6 +50,7 @@ class NodeLabel extends PureComponent {
     }
 
     const sharedProps = { id, value, checked, disabled, readOnly, tabIndex: -1 }
+    const className = ['checkbox-item', mode === 'simpleSelect' && 'simple-select'].filter(Boolean).join(' ')
 
     return (
       <label title={title || label} htmlFor={id}>
@@ -63,7 +59,7 @@ class NodeLabel extends PureComponent {
         ) : (
           <Checkbox
             name={id}
-            className={cx('checkbox-item', { 'simple-select': mode === 'simpleSelect' })}
+            className={className}
             indeterminate={showPartiallySelected && partial}
             onChange={this.handleCheckboxChange}
             {...sharedProps}
diff --git a/src/tree-node/toggle.js b/src/tree-node/toggle.js
index 2c39b748..2f58cdeb 100644
--- a/src/tree-node/toggle.js
+++ b/src/tree-node/toggle.js
@@ -1,9 +1,5 @@
-import cn from 'classnames/bind'
 import PropTypes from 'prop-types'
 import React, { PureComponent } from 'react'
-import styles from './index.css'
-
-const cx = cn.bind(styles)
 
 class Toggle extends PureComponent {
   static propTypes = {
@@ -30,7 +26,7 @@ class Toggle extends PureComponent {
     const { expanded, isLeaf } = this.props
     if (isLeaf) return null
 
-    const toggleCx = cx('toggle', { expanded, collapsed: !expanded })
+    const toggleCx = ['toggle', expanded && 'expanded', !expanded && 'collapsed'].filter(Boolean).join(' ')
     return (
       <i
         role="button"
diff --git a/src/trigger/index.js b/src/trigger/index.js
index 7657f5dc..ddead5c6 100644
--- a/src/trigger/index.js
+++ b/src/trigger/index.js
@@ -1,14 +1,9 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
-import cn from 'classnames/bind'
 
 import { getAriaLabel } from '../a11y'
 import { getTagId } from '../tag'
 
-import styles from '../index.css'
-
-const cx = cn.bind(styles)
-
 class Trigger extends PureComponent {
   static propTypes = {
     onTrigger: PropTypes.func,
@@ -69,14 +64,16 @@ class Trigger extends PureComponent {
   render() {
     const { disabled, readOnly, showDropdown } = this.props
 
-    const dropdownTriggerClassname = cx({
-      'dropdown-trigger': true,
-      arrow: true,
-      disabled,
-      readOnly,
-      top: showDropdown,
-      bottom: !showDropdown,
-    })
+    const dropdownTriggerClassname = [
+      'dropdown-trigger',
+      'arrow',
+      disabled && 'disabled',
+      readOnly && 'readOnly',
+      showDropdown && 'top',
+      !showDropdown && 'bottom',
+    ]
+      .filter(Boolean)
+      .join(' ')
 
     return (
       <a
diff --git a/yarn.lock b/yarn.lock
index 2bd40d8f..d77b7939 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2831,7 +2831,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.2.5, classnames@^2.2.6:
+classnames@^2.2.5:
   version "2.2.6"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"