intelicoreact 0.0.46 → 0.0.48

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -86,6 +86,8 @@ var Dropdown = function Dropdown(_ref) {
   var filteredOptions = [].concat((0, _toConsumableArray2.default)(filteredItems), (0, _toConsumableArray2.default)(filteredGroups));
 
   var handleClickOutside = function handleClickOutside(event) {
+    console.log(dropdownRef.current.contains(event.target));
+
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsOpen(false);
       setSearchValue(null);
@@ -118,6 +120,7 @@ var Dropdown = function Dropdown(_ref) {
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: (0, _classnames.default)("".concat(RC, "__active-icon"), (0, _defineProperty2.default)({}, "".concat(RC, "__active-icon_active"), item.value === value))
     }, /*#__PURE__*/_react.default.createElement(_reactFeather.Check, null)), /*#__PURE__*/_react.default.createElement("div", {
+      className: item.className || '',
       dangerouslySetInnerHTML: {
         __html: hightlightedText(item.label)
       }
@@ -157,21 +160,27 @@ var Dropdown = function Dropdown(_ref) {
     className: (0, _classnames.default)(RC, className),
     ref: dropdownRef
   }, /*#__PURE__*/_react.default.createElement("button", {
-    className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : ''),
-    onClick: function onClick() {
-      return setIsOpen(!isOpen);
-    }
+    className: "".concat(RC, "__trigger input__wrap ").concat(!value ? 'placeholder' : '', " ").concat(error ? 'error' : '')
   }, isSearchable ? /*#__PURE__*/_react.default.createElement("input", {
     className: "".concat(RC, "__input"),
     value: searchValue !== null && searchValue !== void 0 ? searchValue : selectedLabel,
     onChange: function onChange(e) {
       return onSearchHandler(e.target.value);
     },
-    placeholder: placeholder
+    placeholder: placeholder,
+    onFocus: function onFocus() {
+      return setIsOpen(true);
+    }
   }) : /*#__PURE__*/_react.default.createElement("span", {
-    className: "text"
+    className: "text",
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
   }, selectedLabel || placeholder), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen))
+    className: (0, _classnames.default)("".concat(RC, "__arrow"), (0, _defineProperty2.default)({}, "".concat(RC, "__arrow_active"), isOpen)),
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
   }, isOpen ? /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronUp, null) : /*#__PURE__*/_react.default.createElement(_reactFeather.ChevronDown, null))), isOpen && filteredOptions.length > 0 && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__list")
   }, filteredOptions.map(function (filteredOption) {

package/dist/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -65,7 +65,8 @@ DropdownTemplate.args = {
   isSearchable: true,
   options: [{
     label: 'Dropdown1',
-    value: 'drop1'
+    value: 'drop1',
+    className: 'status status--approved'
   }, {
     label: 'Dropdown2',
     value: 'drop2'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.0.46",
+  "version": "0.0.48",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/Atomic/FormElements/Dropdown/Dropdown.js

@@ -24,6 +24,7 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
   const filteredOptions = [...filteredItems, ...filteredGroups];
 
   const handleClickOutside = event => {
+    console.log(dropdownRef.current.contains(event.target));
     if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
       setIsOpen(false);
       setSearchValue(null);
@@ -53,7 +54,7 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
         <span className={cn(`${RC}__active-icon`, { [`${RC}__active-icon_active`]: item.value === value })}>
           <Check />
         </span>
-        <div dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
+        <div className={item.className || ''} dangerouslySetInnerHTML={{ __html: hightlightedText(item.label) }} />
       </button>
     ) : null;
 
@@ -75,18 +76,23 @@ const Dropdown = ({ options, value, error, onChange, placeholder, className, isS
 
   return (
     <div className={cn(RC, className)} ref={dropdownRef}>
-      <button className={`${RC}__trigger input__wrap ${!value ? 'placeholder' : ''} ${error ? 'error' : ''}`} onClick={() => setIsOpen(!isOpen)}>
+      <button className={`${RC}__trigger input__wrap ${!value ? 'placeholder' : ''} ${error ? 'error' : ''}`} >
         {isSearchable ? (
           <input
             className={`${RC}__input`}
             value={searchValue ?? selectedLabel}
             onChange={e => onSearchHandler(e.target.value)}
             placeholder={placeholder}
+            onFocus={() => setIsOpen(true)}
           />
         ) : (
-          <span className="text">{selectedLabel || placeholder}</span>
+          <span className="text" onClick={() => setIsOpen(!isOpen)}>
+            {selectedLabel || placeholder}
+          </span>
         )}
-        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })}>{isOpen ? <ChevronUp /> : <ChevronDown />}</span>
+        <span className={cn(`${RC}__arrow`, { [`${RC}__arrow_active`]: isOpen })} onClick={() => setIsOpen(!isOpen)}>
+          {isOpen ? <ChevronUp /> : <ChevronDown />}
+        </span>
       </button>
       {isOpen && filteredOptions.length > 0 && (
         <div className={`${RC}__list`}>

package/src/Atomic/FormElements/Dropdown/Dropdown.stories.js

@@ -32,7 +32,7 @@ DropdownTemplate.args = {
   placeholder: 'Placeholder',
   isSearchable: true,
   options: [
-    { label: 'Dropdown1', value: 'drop1' },
+    { label: 'Dropdown1', value: 'drop1', className: 'status status--approved' },
     { label: 'Dropdown2', value: 'drop2' },
     { label: 'Dropdown3', value: 'drop3', disabled: true },
     { label: 'Dropdown4', value: 'drop4' },