@desynova-digital/components 9.0.26 → 9.1.0

package/atoms/dropdown/dropdown.story.js

@@ -1,265 +1,105 @@
-'use strict';
+"use strict";
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _react3 = require('@storybook/react');
-
-var _storyHelpers = require('../../_helpers/story-helpers');
-
-var _components = require('../../components');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react3.storiesOf)('Dropdown').add('light theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances Light', background: 'default' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '150px' } },
-        _react2.default.createElement(
-          'span',
-          null,
-          'Showed'
-        ),
-        _react2.default.createElement(
-          _components.Dropdown,
-          {
-            show: true,
-            onClick: function onClick(e) {
-              console.log('clickCallback', e);
-            }
-          },
-          _react2.default.createElement(
-            'div',
-            null,
-            _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                'p',
-                null,
-                'Hi,'
-              ),
-              _react2.default.createElement(
-                'p',
-                null,
-                'I am \'hide show\''
-              )
-            )
-          )
-        )
-      ),
-      _react2.default.createElement(
-        'div',
-        { style: { width: '150px', position: 'relative' } },
-        _react2.default.createElement(
-          'span',
-          {
-            style: {
-              display: 'flex',
-              'align-items': 'center',
-              width: '100%'
-            }
-          },
-          'Show Absolute'
-        ),
-        _react2.default.createElement(
-          _components.Dropdown,
-          _extends({
-            show: true
-          }, { style: { position: 'absolute', top: '0px', left: '0px', width: '100%' } }, {
-            onClick: function onClick(e) {
-              console.log('clickCallback', e);
-            }
-          }),
-          _react2.default.createElement(
-            'div',
-            { style: { background: 'blue' } },
-            _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                'p',
-                null,
-                'Hi,'
-              ),
-              _react2.default.createElement(
-                'p',
-                null,
-                'I am \'shown\' this '
-              )
-            )
-          )
-        )
-      ),
-      _react2.default.createElement(
-        'div',
-        { style: { width: '150px' } },
-        _react2.default.createElement(
-          'span',
-          null,
-          'Hidden'
-        ),
-        _react2.default.createElement(
-          _components.Dropdown,
-          {
-            onClick: function onClick(e) {
-              console.log('clickCallback', e);
-            }
-          },
-          _react2.default.createElement(
-            'div',
-            null,
-            _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                'p',
-                null,
-                'Hi,'
-              ),
-              _react2.default.createElement(
-                'p',
-                null,
-                'I am \'hide show\''
-              )
-            )
-          )
-        )
-      )
-    )
-  );
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@storybook/react");
+var _storyHelpers = require("../../_helpers/story-helpers");
+var _components = require("../../components");
+(0, _react2.storiesOf)('Dropdown').add('light theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances Light",
+    background: "default"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '150px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "Showed"), /*#__PURE__*/_react["default"].createElement(_components.Dropdown, {
+    show: true,
+    onClick: function onClick(e) {
+      console.log('clickCallback', e);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Hi,"), /*#__PURE__*/_react["default"].createElement("p", null, "I am 'hide show'"))))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '150px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      display: 'flex',
+      'align-items': 'center',
+      width: '100%'
+    }
+  }, "Show Absolute"), /*#__PURE__*/_react["default"].createElement(_components.Dropdown, {
+    show: true,
+    style: {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: '100%'
+    },
+    onClick: function onClick(e) {
+      console.log('clickCallback', e);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      background: 'blue'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Hi,"), /*#__PURE__*/_react["default"].createElement("p", null, "I am 'shown' this "))))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '150px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "Hidden"), /*#__PURE__*/_react["default"].createElement(_components.Dropdown, {
+    onClick: function onClick(e) {
+      console.log('clickCallback', e);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Hi,"), /*#__PURE__*/_react["default"].createElement("p", null, "I am 'hide show'")))))));
 });
-
-(0, _react3.storiesOf)('Dropdown').add('dark theme', function () {
-  return _react2.default.createElement(
-    _storyHelpers.Example,
-    { title: 'Appearances dark', background: 'dark' },
-    _react2.default.createElement(
-      _storyHelpers.Stack,
-      null,
-      _react2.default.createElement(
-        'div',
-        { style: { width: '150px' } },
-        _react2.default.createElement(
-          'span',
-          null,
-          'Showed'
-        ),
-        _react2.default.createElement(
-          _components.Dropdown,
-          {
-            show: true,
-            onClick: function onClick(e) {
-              console.log('clickCallback', e);
-            }
-          },
-          _react2.default.createElement(
-            'div',
-            null,
-            _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                'p',
-                null,
-                'Hi,'
-              ),
-              _react2.default.createElement(
-                'p',
-                null,
-                'I am \'hide show\''
-              )
-            )
-          )
-        )
-      ),
-      _react2.default.createElement(
-        'div',
-        { style: { width: '150px', position: 'relative' } },
-        _react2.default.createElement(
-          'span',
-          {
-            style: {
-              display: 'flex',
-              'align-items': 'center',
-              width: '100%'
-            }
-          },
-          'Show Absolute'
-        ),
-        _react2.default.createElement(
-          _components.Dropdown,
-          _extends({
-            show: true
-          }, { style: { position: 'absolute', top: '0px', left: '0px', width: '100%' } }, {
-            onClick: function onClick(e) {
-              console.log('clickCallback', e);
-            }
-          }),
-          _react2.default.createElement(
-            'div',
-            { style: { background: 'blue' } },
-            _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                'p',
-                null,
-                'Hi,'
-              ),
-              _react2.default.createElement(
-                'p',
-                null,
-                'I am \'shown\' this '
-              )
-            )
-          )
-        )
-      ),
-      _react2.default.createElement(
-        'div',
-        { style: { width: '150px' } },
-        _react2.default.createElement(
-          'span',
-          null,
-          'Hidden'
-        ),
-        _react2.default.createElement(
-          _components.Dropdown,
-          {
-            onClick: function onClick(e) {
-              console.log('clickCallback', e);
-            }
-          },
-          _react2.default.createElement(
-            'div',
-            null,
-            _react2.default.createElement(
-              'div',
-              null,
-              _react2.default.createElement(
-                'p',
-                null,
-                'Hi,'
-              ),
-              _react2.default.createElement(
-                'p',
-                null,
-                'I am \'hide show\''
-              )
-            )
-          )
-        )
-      )
-    )
-  );
+(0, _react2.storiesOf)('Dropdown').add('dark theme', function () {
+  return /*#__PURE__*/_react["default"].createElement(_storyHelpers.Example, {
+    title: "Appearances dark",
+    background: "dark"
+  }, /*#__PURE__*/_react["default"].createElement(_storyHelpers.Stack, null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '150px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "Showed"), /*#__PURE__*/_react["default"].createElement(_components.Dropdown, {
+    show: true,
+    onClick: function onClick(e) {
+      console.log('clickCallback', e);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Hi,"), /*#__PURE__*/_react["default"].createElement("p", null, "I am 'hide show'"))))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '150px',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      display: 'flex',
+      'align-items': 'center',
+      width: '100%'
+    }
+  }, "Show Absolute"), /*#__PURE__*/_react["default"].createElement(_components.Dropdown, {
+    show: true,
+    style: {
+      position: 'absolute',
+      top: '0px',
+      left: '0px',
+      width: '100%'
+    },
+    onClick: function onClick(e) {
+      console.log('clickCallback', e);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      background: 'blue'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Hi,"), /*#__PURE__*/_react["default"].createElement("p", null, "I am 'shown' this "))))), /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      width: '150px'
+    }
+  }, /*#__PURE__*/_react["default"].createElement("span", null, "Hidden"), /*#__PURE__*/_react["default"].createElement(_components.Dropdown, {
+    onClick: function onClick(e) {
+      console.log('clickCallback', e);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Hi,"), /*#__PURE__*/_react["default"].createElement("p", null, "I am 'hide show'")))))));
 });

package/atoms/dropdown/index.js

@@ -1,13 +1,9 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _dropdown = require("./dropdown");
-
-var _dropdown2 = _interopRequireDefault(_dropdown);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _dropdown2.default;
+exports["default"] = void 0;
+var _dropdown = _interopRequireDefault(require("./dropdown"));
+var _default = exports["default"] = _dropdown["default"];

package/atoms/dropdownList/dropdownList.js

@@ -1,63 +1,39 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _templateObject = _taggedTemplateLiteral(['\n  color: ', '; \n  \n  display:block; \n  padding : 0px;\n  border: 1px solid ', '; \n  font-family: SFUIText-Regular;\n  background: ', ';\n\n  &  div.selectable{\n    cursor: pointer;\n    color : ', '; \n    \n  }\n\n  \n  &  div.selectable:hover,\n  &  div.selectable:focus{\n    background : ', '; \n    color : ', '; \n    outline: none;\n  }\n  &  div.selected,\n  &  div.selected:hover,\n  &  div.selected:focus\n  {\n    background: ', ';\n    color: ', ';\n  }\n  \n  &  div.disabled{\n    cursor: not-allowed;\n    background: ', ';\n    color: ', '; \n  }\n  \n  div.disabled.selected {\n      background: ', ';\n      color: ', '; \n  }\n  \n  & .search-input input{\n   width:100%;\n  }\n  \n  .header-group{\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .icon-container{\n    padding: 6px 6px 0 0;\n    cursor: pointer;\n  }\n    \n'], ['\n  color: ', '; \n  \n  display:block; \n  padding : 0px;\n  border: 1px solid ', '; \n  font-family: SFUIText-Regular;\n  background: ', ';\n\n  &  div.selectable{\n    cursor: pointer;\n    color : ', '; \n    \n  }\n\n  \n  &  div.selectable:hover,\n  &  div.selectable:focus{\n    background : ', '; \n    color : ', '; \n    outline: none;\n  }\n  &  div.selected,\n  &  div.selected:hover,\n  &  div.selected:focus\n  {\n    background: ', ';\n    color: ', ';\n  }\n  \n  &  div.disabled{\n    cursor: not-allowed;\n    background: ', ';\n    color: ', '; \n  }\n  \n  div.disabled.selected {\n      background: ', ';\n      color: ', '; \n  }\n  \n  & .search-input input{\n   width:100%;\n  }\n  \n  .header-group{\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .icon-container{\n    padding: 6px 6px 0 0;\n    cursor: pointer;\n  }\n    \n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n\n  padding: 5px 5px 5px 10px;\n  padding-left:', ';\n  text-align: left;\n  font-size:13px;\n  position:relative;\n\n  &.divider{\n    padding: 5px 10px 5px 10px;\n    padding-left:', ';\n  }\n  & > .divider {\n    border: 1px solid ', ';\n  }\n  \n  .icon-holder{\n    padding-right: 10px;\n  }\n  .icon-holder path {\n    fill: ', ';\n  }\n  \n'], ['\n\n  padding: 5px 5px 5px 10px;\n  padding-left:', ';\n  text-align: left;\n  font-size:13px;\n  position:relative;\n\n  &.divider{\n    padding: 5px 10px 5px 10px;\n    padding-left:', ';\n  }\n  & > .divider {\n    border: 1px solid ', ';\n  }\n  \n  .icon-holder{\n    padding-right: 10px;\n  }\n  .icon-holder path {\n    fill: ', ';\n  }\n  \n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  padding: 5px 5px 2px;\n  padding-left:', ';\n  text-align: left;\n  font-size:13px;\n  font-family: SFUIText-Medium;\n    \n'], ['\n  padding: 5px 5px 2px;\n  padding-left:', ';\n  text-align: left;\n  font-size:13px;\n  font-family: SFUIText-Medium;\n    \n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _icon = require('../icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
+exports["default"] = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tokens = require("@desynova-digital/tokens");
+var _icon = _interopRequireDefault(require("../icon"));
+var _templateObject, _templateObject2, _templateObject3;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var mainprops;
-var DropdownList = function DropdownList(props) {
-  mainprops = _extends({}, props);
-
+var _DropdownList = function DropdownList(props) {
+  mainprops = _objectSpread({}, props);
   var _useState = (0, _react.useState)(''),
-      _useState2 = _slicedToArray(_useState, 2),
-      expandedIcon = _useState2[0],
-      toggleExpandedIcon = _useState2[1];
-
-  return _react2.default.createElement(
-    DropdownList.Element,
-    props,
-    props.options.map(function (option, index) {
-      return renderList(option, index);
-    })
-  );
-
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    expandedIcon = _useState2[0],
+    toggleExpandedIcon = _useState2[1];
+  return /*#__PURE__*/_react["default"].createElement(_DropdownList.Element, props, props.options.map(function (option, index) {
+    return renderList(option, index);
+  }));
   function toggleDropdownHeader(Index, event) {
     event.stopPropagation();
     expandedIcon === Index ? toggleExpandedIcon('') : toggleExpandedIcon(Index);
   }
-
   function renderList(option, index, groupLabel, level) {
-
     if (level || level === 0) {
       level = ++level;
     } else {
@@ -66,80 +42,77 @@ var DropdownList = function DropdownList(props) {
     if (groupLabel && groupLabel.length > 0) {} else {
       groupLabel = '';
     }
-
     if (option.children) {
-      return _react2.default.createElement(
-        'div',
-        { className: 'group', key: groupLabel + index },
-        _react2.default.createElement(
-          'div',
-          { className: 'header-group', onClick: function onClick(event) {
-              return toggleDropdownHeader(groupLabel + index, event);
-            } },
-          _react2.default.createElement(
-            GroupTitle,
-            { level: level, className: 'group-title' },
-            option.label
-          ),
-          _react2.default.createElement(
-            'span',
-            { className: 'icon-container' },
-            expandedIcon === groupLabel + index ? _react2.default.createElement(_icon2.default, { name: 'dropdown_less_icon', width: '14', height: '14' }) : _react2.default.createElement(_icon2.default, { name: 'dropdown_more_icon', width: '14', height: '14' })
-          )
-        ),
-        expandedIcon === groupLabel + index && _react2.default.createElement(
-          'div',
-          { className: 'group-items', style: { overflow: 'hidden' } },
-          option.children.map(function (c, i) {
-            return renderList(c, i, groupLabel + " " + option.label, level);
-          })
-        )
-      );
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: "group",
+        key: groupLabel + index
+      }, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "header-group",
+        onClick: function onClick(event) {
+          return toggleDropdownHeader(groupLabel + index, event);
+        }
+      }, /*#__PURE__*/_react["default"].createElement(GroupTitle, {
+        level: level,
+        className: "group-title"
+      }, option.label), /*#__PURE__*/_react["default"].createElement("span", {
+        className: "icon-container"
+      }, expandedIcon === groupLabel + index ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "dropdown_less_icon",
+        width: "14",
+        height: "14"
+      }) : /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "dropdown_more_icon",
+        width: "14",
+        height: "14"
+      }))), expandedIcon === groupLabel + index && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "group-items",
+        style: {
+          overflow: 'hidden'
+        }
+      }, option.children.map(function (c, i) {
+        return renderList(c, i, groupLabel + " " + option.label, level);
+      })));
     } else {
-      return _react2.default.createElement(
-        ListItem,
-        { key: groupLabel + index,
-          className: getClasses(option),
-          level: level,
-          theme: mainprops.theme,
-          'data-value': option.value,
-          onClick: function onClick(e) {
-            mainprops.itemOnClick(option, e.target, groupLabel);
-          },
-          tabIndex: mainprops.keyboardAction && option.type === 'selectable' ? '1' : '' },
-        option.icon ? _react2.default.createElement(
-          'span',
-          { className: 'icon-holder' },
-          _react2.default.createElement(_icon2.default, { name: option.icon, width: 10, height: 10 })
-        ) : null,
-        option.label,
-        option.display == 'divider' ? _react2.default.createElement('div', { className: 'divider' }) : null
-      );
+      return /*#__PURE__*/_react["default"].createElement(ListItem, {
+        key: groupLabel + index,
+        className: getClasses(option),
+        level: level,
+        theme: mainprops.theme,
+        "data-value": option.value,
+        onClick: function onClick(e) {
+          mainprops.itemOnClick(option, e.target, groupLabel);
+        },
+        tabIndex: mainprops.keyboardAction && option.type === 'selectable' ? '1' : ''
+      }, option.icon ? /*#__PURE__*/_react["default"].createElement("span", {
+        className: "icon-holder"
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: option.icon,
+        width: 10,
+        height: 10
+      })) : null, option.label, option.display == 'divider' ? /*#__PURE__*/_react["default"].createElement("div", {
+        className: "divider"
+      }) : null);
     }
   }
-
   function getClasses(option) {
     var classes = option.display ? option.display + " " : "";
     classes = option.type ? option.type + " " + classes : classes + " ";
     if (mainprops.selectedOptions && mainprops.selectedOptions.length > 0) {
       mainprops.selectedOptions.forEach(function (selectedOption, index) {
-
         if (JSON.stringify(selectedOption) === JSON.stringify(option)) {
           classes = classes + 'selected ';
           return classes;
         }
       });
     }
-
     return classes;
   }
 };
-DropdownList.defaultProps = {
+_DropdownList.defaultProps = {
   theme: 'light',
   options: []
 };
-
-DropdownList.Element = _styledComponents2.default.div(_templateObject, function (props) {
+_DropdownList.Element = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  color: ", "; \n  \n  display:block; \n  padding : 0px;\n  border: 1px solid ", "; \n  font-family: SFUIText-Regular;\n  background: ", ";\n\n  &  div.selectable{\n    cursor: pointer;\n    color : ", "; \n    \n  }\n\n  \n  &  div.selectable:hover,\n  &  div.selectable:focus{\n    background : ", "; \n    color : ", "; \n    outline: none;\n  }\n  &  div.selected,\n  &  div.selected:hover,\n  &  div.selected:focus\n  {\n    background: ", ";\n    color: ", ";\n  }\n  \n  &  div.disabled{\n    cursor: not-allowed;\n    background: ", ";\n    color: ", "; \n  }\n  \n  div.disabled.selected {\n      background: ", ";\n      color: ", "; \n  }\n  \n  & .search-input input{\n   width:100%;\n  }\n  \n  .header-group{\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .icon-container{\n    padding: 6px 6px 0 0;\n    cursor: pointer;\n  }\n    \n"])), function (props) {
   return _tokens.colors[props.theme].customSelect.dropDownOptions.color;
 }, function (props) {
   return _tokens.colors[props.theme].customSelect.dropDownOptions.border;
@@ -164,8 +137,7 @@ DropdownList.Element = _styledComponents2.default.div(_templateObject, function
 }, function (props) {
   return _tokens.colors[props.theme].customSelect.dropDownOptions.selectedDisabledColor;
 });
-
-var ListItem = _styledComponents2.default.div(_templateObject2, function (props) {
+var ListItem = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n\n  padding: 5px 5px 5px 10px;\n  padding-left:", ";\n  text-align: left;\n  font-size:13px;\n  position:relative;\n\n  &.divider{\n    padding: 5px 10px 5px 10px;\n    padding-left:", ";\n  }\n  & > .divider {\n    border: 1px solid ", ";\n  }\n  \n  .icon-holder{\n    padding-right: 10px;\n  }\n  .icon-holder path {\n    fill: ", ";\n  }\n  \n"])), function (props) {
   return 10 + 15 * props.level + "px";
 }, function (props) {
   return 10 + 15 * props.level + "px";
@@ -174,9 +146,7 @@ var ListItem = _styledComponents2.default.div(_templateObject2, function (props)
 }, function (props) {
   return _tokens.colors[props.theme].customSelect.dropDownOptions.iconColor;
 });
-
-var GroupTitle = _styledComponents2.default.div(_templateObject3, function (props) {
+var GroupTitle = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  padding: 5px 5px 2px;\n  padding-left:", ";\n  text-align: left;\n  font-size:13px;\n  font-family: SFUIText-Medium;\n    \n"])), function (props) {
   return 10 + 15 * props.level + "px";
 });
-
-exports.default = DropdownList;
+var _default = exports["default"] = _DropdownList;