@desynova-digital/components 8.5.2 → 8.7.0

package/atoms/checkbox/checkbox.js

@@ -31,6 +31,10 @@ var _switch = require("../switch");
 
 var _switch2 = _interopRequireDefault(_switch);
 
+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) } })); }
@@ -139,7 +143,14 @@ var Checkbox = function Checkbox(props) {
           console.log(value);
         }
       })
-    ) : null
+    ) : null,
+    props.type === 'icon' && _react2.default.createElement(_icon2.default, {
+      name: props.value,
+      value: props.value,
+      width: props.width,
+      height: props.height,
+      fillRule: props.fillRule,
+      color: props.checked ? "#00CEC6" : "#AFB2BA" })
   );
 };
 
@@ -156,7 +167,10 @@ var CheckboxGroup = function CheckboxGroup(props) {
         readOnly: props.readOnly || child.props.readOnly,
         onChange: child.props.isDisabled ? props.onChange : function () {},
         theme: props.theme,
-        type: props.type
+        type: props.type,
+        width: props.width || 16,
+        height: props.height || 24,
+        fillRule: props.fillRule || ''
       }) : null;
     })
   );
@@ -173,7 +187,10 @@ Checkbox.propTypes = {
   readOnly: _propTypes2.default.bool,
   /** Callback function which is called when the user selects an option */
   onChange: _propTypes2.default.func,
-  type: _propTypes2.default.oneOf(["default", "label", "switch"])
+  type: _propTypes2.default.oneOf(["default", "label", "switch"]),
+  width: _propTypes2.default.number,
+  height: _propTypes2.default.number,
+  fillRule: _propTypes2.default.string
 };
 
 Checkbox.defaultProps = {

package/atoms/checkbox/checkbox.story.js

@@ -208,6 +208,41 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         { value: "four" },
         "Option 4"
       )
+    ),
+    _react2.default.createElement(
+      _components.Checkbox.Group,
+      {
+        theme: "dark",
+        name: "example5",
+        onChange: function onChange(e) {
+          console.log(e.target.value, e.target.checked);
+        },
+        align: "horizontal",
+        selected: ["text_aligned_left"],
+        type: "icon"
+      },
+      _react2.default.createElement(_components.Checkbox, { value: "text_aligned_left" }),
+      _react2.default.createElement(_components.Checkbox, { value: "text_aligned_center" }),
+      _react2.default.createElement(_components.Checkbox, { value: "text_aligned_right" })
+    ),
+    _react2.default.createElement(
+      _components.Checkbox.Group,
+      {
+        theme: "dark",
+        name: "example6",
+        onChange: function onChange(e) {
+          console.log(e.target.value, e.target.checked);
+        },
+        align: "horizontal",
+        selected: ["text_position_bottom"],
+        type: "icon",
+        width: 24,
+        height: 16,
+        fillRule: "evenodd"
+      },
+      _react2.default.createElement(_components.Checkbox, { value: "text_position_top" }),
+      _react2.default.createElement(_components.Checkbox, { value: "text_position_center" }),
+      _react2.default.createElement(_components.Checkbox, { value: "text_position_bottom" })
     )
   );
 });

package/atoms/icon/icon.js

@@ -40,7 +40,7 @@ var Icon = function Icon(props) {
       {
         width: props.width || icon.width,
         height: props.height || icon.height,
-        viewBox: '0 0 ' + icon.width + ' ' + icon.height,
+        viewBox: '0 0 ' + (props.width || icon.width) + ' ' + (props.height || icon.height),
         color: props.color
       },
       icon.paths.map(function (path, index) {
@@ -51,7 +51,7 @@ var Icon = function Icon(props) {
           fill: props.color,
           stroke: props.stroke,
           strokeWidth: icon.strokeWidth,
-          fillRule: icon.fillRule
+          fillRule: props.fillRule
         });
       })
     )

package/atoms/icon/icons.json

@@ -328,10 +328,10 @@
     },
     "delete": {
       "paths": [
-        "M7.2 0a1.8 1.8 0 0 1 1.794 1.652L9 1.8v.6h2.4a.6.6 0 0 1 .097 1.192L11.4 3.6h-.601l.001 7.8a1.8 1.8 0 0 1-1.652 1.794L9 13.2H3a1.8 1.8 0 0 1-1.794-1.652L1.2 11.4V3.6H.6a.6.6 0 0 1-.592-.503L0 3a.6.6 0 0 1 .503-.592L.6 2.4h2.399L3 1.8A1.8 1.8 0 0 1 4.652.006L4.8 0h2.4zm2.399 3.6h-7.2l.001 7.8a.6.6 0 0 0 .503.592L3 12h6a.6.6 0 0 0 .592-.503L9.6 11.4l-.001-7.8zM4.8 5.4a.6.6 0 0 1 .592.503L5.4 6v3.6a.6.6 0 0 1-1.192.097L4.2 9.6V6a.6.6 0 0 1 .6-.6zm2.4 0a.6.6 0 0 1 .6.6v3.6a.6.6 0 1 1-1.2 0V6a.6.6 0 0 1 .6-.6zm0-4.2H4.8a.6.6 0 0 0-.592.503L4.2 1.8l-.001.6H7.8v-.6a.6.6 0 0 0-.503-.592L7.2 1.2z"
+        "M0.888889 14.2222C0.888889 15.2 1.68889 16 2.66667 16H9.77778C10.7556 16 11.5556 15.2 11.5556 14.2222V3.55556H0.888889V14.2222ZM12.4444 0.888889H9.33333L8.44445 0H4L3.11111 0.888889H0V2.66667H12.4444V0.888889Z"
       ],
-      "width": 12,
-      "height": 14
+      "width": 13,
+      "height": 16
     },
     "volume": {
       "paths": [
@@ -561,7 +561,7 @@
     },
     "subtitle": {
       "paths": [
-        "M18 0H2C.9 0 0 .9 0 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM2 8h4v2H2V8zm10 6H2v-2h10v2zm6 0h-4v-2h4v2zm0-4H8V8h10v2z"
+        "M10.8 0H1.2C0.54 0 0 0.54 0 1.2V8.4C0 9.06 0.54 9.6 1.2 9.6H10.8C11.46 9.6 12 9.06 12 8.4V1.2C12 0.54 11.46 0 10.8 0ZM1.2 4.8H3.6V6H1.2V4.8ZM1.2 8.4H7.2V7.2H1.2V8.4ZM10.8 8.4H8.4V7.2H10.8V8.4ZM4.8 6H10.8V4.8H4.8V6Z"
       ],
       "width": 20,
       "height": 16
@@ -609,6 +609,13 @@
       "width": 13,
       "height": 13
     },
+    "chat": {
+      "paths":[
+        "M7.8 1.2V5.4H1.902L1.2 6.102V1.2H7.8ZM8.4 0H0.6C0.27 0 0 0.27 0 0.6V9L2.4 6.6H8.4C8.73 6.6 9 6.33 9 6V0.6C9 0.27 8.73 0 8.4 0ZM11.4 2.4H10.2V7.8H2.4V9C2.4 9.33 2.67 9.6 3 9.6H9.6L12 12V3C12 2.67 11.73 2.4 11.4 2.4Z"
+      ],
+      "width": 12,
+      "height": 12
+    },
     "cut": {
       "paths": [
         "M7.368 6.28L12.742.946a.74.74 0 0 1 1.042 0 .728.728 0 0 1 0 1.034l-8.297 8.236c.259.436.408.944.408 1.486 0 1.616-1.32 2.926-2.948 2.926C1.32 14.628 0 13.318 0 11.702s1.32-2.925 2.947-2.925a2.95 2.95 0 0 1 1.498.405l1.881-1.868-1.881-1.868a2.95 2.95 0 0 1-1.498.405C1.32 5.851 0 4.541 0 2.926 0 1.31 1.32 0 2.947 0c1.628 0 2.948 1.31 2.948 2.926 0 .542-.15 1.05-.408 1.486L7.368 6.28zM4.015 3.934c.252-.263.406-.618.406-1.008 0-.808-.66-1.463-1.474-1.463s-1.473.655-1.473 1.463c0 .807.66 1.462 1.473 1.462a1.475 1.475 0 0 0 1.068-.454zm-.052 6.708a1.475 1.475 0 0 0-1.016-.403c-.814 0-1.473.655-1.473 1.463s.66 1.463 1.473 1.463c.814 0 1.474-.655 1.474-1.463a1.452 1.452 0 0 0-.458-1.06zm4.705-.997a.728.728 0 0 1-.001-1.034.74.74 0 0 1 1.042-.001l4.075 4.037a.728.728 0 0 1 0 1.035.74.74 0 0 1-1.041 0L8.668 9.646z"
@@ -1104,6 +1111,42 @@
       ],
       "width": 16,
       "height": 18
+    },
+    "text_aligned_right": {
+      "paths":[
+        "M0 1.77778V0H16V1.77778H0ZM5.33333 5.33333H16V3.55556H5.33333V5.33333ZM16 8.88889H0V7.11111H16V8.88889ZM5.33333 12.4444H16V10.6667H5.33333V12.4444ZM0 16H16V14.2222H0V16Z"
+      ],
+      "width": 16,
+      "height": 16
+    },
+    "text_aligned_center": {
+      "paths":[
+        "M0 1.77778V0H16V1.77778H0ZM3.55556 3.55556V5.33333H12.4444V3.55556H3.55556ZM16 8.88889H0V7.11111H16V8.88889ZM3.55556 10.6667V12.4444H12.4444V10.6667H3.55556ZM0 16H16V14.2222H0V16Z"
+      ],
+      "width": 16,
+      "height": 16
+    },
+    "text_aligned_left": {
+      "paths":[
+        "M0 1.77778V0H16V1.77778H0ZM10.6667 3.55556H0V5.33333H10.6667V3.55556ZM10.6667 10.6667H0V12.4444H10.6667V10.6667ZM16 8.88889H0V7.11111H16V8.88889ZM0 16H16V14.2222H0V16Z"
+      ],
+      "width": 16,
+      "height": 16
+    },
+    "text_position_top": {
+      "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 5.77778V4H20V5.77778H4Z"],
+      "width": 16,
+      "height": 16
+    },
+    "text_position_center": {
+      "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 8.77778V7H20V8.77778H4Z"],
+      "width": 16,
+      "height": 16
+    },
+    "text_position_bottom": {
+      "paths": ["M0 0H24V16H0V0ZM2 2H22V14H2V2ZM4 11.7778V10H20V11.7778H4Z"],
+      "width": 16,
+      "height": 16
     }
   }
 }

package/atoms/inputText/inputText.js

@@ -11,7 +11,8 @@ var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = [
 var _templateObject = _taggedTemplateLiteral(['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n'], ['\n  background: transparent;\n  font-family: \'SFUIText-Medium\';\n  position: relative;\n  width: 100%;\n  display: block;\n\n  > label {\n    color: #999999;\n    font-size: 14px;\n\n    font-family: inherit;\n    position: absolute;\n    pointer-events: none;\n    left: 0px;\n    top: 5px;\n    transition: 0.2s ease all;\n    -moz-transition: 0.2s ease all;\n    -webkit-transition: 0.2s ease all;\n  }\n  > input:focus ~ label {\n    top: -10px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n\n  > input ~ label.floaton {\n    top: -5px;\n    left: 0px;\n    font-size: 10px;\n    color: #999999;\n    text-transform: capitalize;\n  }\n']),
     _templateObject2 = _taggedTemplateLiteral(['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n'], ['\n  color: ', ';\n  padding-top: 5px;\n  display: inline-block;\n  font-size: 12px;\n  font-family: inherit;\n  width: 100%;\n  text-align: left;\n']),
     _templateObject3 = _taggedTemplateLiteral(['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n'], ['\n  background: none;\n  border: none;\n  cursor: pointer;\n  position: absolute;\n  right: 0;\n  top: 5px;\n  &:focus {\n    outline: none;\n  }\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: 7px 0px 2px;\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n'], ['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: 7px 0px 2px;\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n']);
+    _templateObject4 = _taggedTemplateLiteral(['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303F51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #FFFFFF;\n'], ['\n  position: absolute;\n  right: 0px;\n  top: 0px;\n  background-color: #303F51;\n  border-radius: 12px;\n  font-size: 12px;\n  padding: 5px 10px;\n  color: #FFFFFF;\n']),
+    _templateObject5 = _taggedTemplateLiteral(['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: 7px 0px 2px;\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n'], ['\n  width: 100%;\n  box-sizing: border-box;\n\n  background: ', ';\n\n  border: none;\n  border-radius: 0px;\n  -webkit-appearance: none;\n  border-bottom: 1px solid\n    ', ';\n\n  font-family: \'SFUIText-Medium\';\n  color: ', ';\n\n  cursor: ', ';\n\n  font-size: 14px;\n  padding: 7px 0px 2px;\n  margin-top: 15px;\n  display: block;\n\n  &:hover {\n    border-color: ', ';\n  }\n  &:disabled:hover {\n    border-color: ', ';\n  }\n  &:disabled {\n    border-color: ', ';\n    color: ', ';\n  }\n  &:focus {\n    outline: none;\n  }\n  &::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n    transition: 0.2s ease all;\n  }\n\n  &:focus::placeholder {\n    color: ', ';\n\n    opacity: ', ';\n  }\n']);
 
 var _react = require('react');
 
@@ -45,10 +46,14 @@ var InputError = _styledComponents2.default.span(_templateObject2, function (pro
 
 var PasswordToggleButton = _styledComponents2.default.div(_templateObject3);
 
+var CountWrappper = _styledComponents2.default.div(_templateObject4);
+
 var InputText = function InputText(_ref) {
-  var defaultValue = _ref.defaultValue,
+  var maxlength = _ref.maxlength,
+      defaultValue = _ref.defaultValue,
       type = _ref.type,
-      props = _objectWithoutProperties(_ref, ['defaultValue', 'type']);
+      showLengthCount = _ref.showLengthCount,
+      props = _objectWithoutProperties(_ref, ['maxlength', 'defaultValue', 'type', 'showLengthCount']);
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -81,7 +86,7 @@ var InputText = function InputText(_ref) {
   return _react2.default.createElement(
     InputTextDiv,
     { theme: props.theme },
-    _react2.default.createElement(InputText.Element, _extends({ type: hidden ? type : 'text', value: props.value, defaultValue: defaultValue }, props)),
+    _react2.default.createElement(InputText.Element, _extends({ type: hidden ? type : 'text', value: props.value, defaultValue: defaultValue }, props, { maxLength: maxlength || '' })),
     props.label ? _react2.default.createElement(
       'label',
       {
@@ -95,6 +100,13 @@ var InputText = function InputText(_ref) {
       { value: props.value, theme: props.theme, error: props.error },
       errorMesssage
     ) : '',
+    maxlength && showLengthCount && _react2.default.createElement(
+      CountWrappper,
+      null,
+      props.value.length,
+      '/',
+      maxlength
+    ),
     type == 'password' || passwordButton ? _react2.default.createElement(
       PasswordToggleButton,
       {
@@ -120,7 +132,7 @@ var InputText = function InputText(_ref) {
   );
 };
 
-InputText.Element = _styledComponents2.default.input(_templateObject4, function (props) {
+InputText.Element = _styledComponents2.default.input(_templateObject5, function (props) {
   return _tokens.colors[props.theme].inputCommon.background;
 }, function (props) {
   if (props.error) {
@@ -182,7 +194,7 @@ InputText.propTypes = {
   value: _propTypes2.default.string,
   /** The (HTML) maxlength for the input. */
   maxlength: _propTypes2.default.number,
-
+  showLengthCount: _propTypes2.default.bool,
   theme: _propTypes2.default.oneOf(['light', 'dark'])
 
   /** deprecate error string prop */
@@ -197,7 +209,8 @@ InputText.defaultProps = {
   type: 'text',
   maxlength: 50,
   theme: 'light',
-  value: ''
+  value: '',
+  showLengthCount: false
 };
 
 exports.default = InputText;

package/atoms/inputText/inputText.story.js

@@ -19,9 +19,11 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         _react2.default.createElement(
             _storyHelpers.Stack,
             null,
-            _react2.default.createElement(_components.InputText, { type: 'text', label: 'First Name', maxLength: 3, onChange: function onChange(e) {
+            _react2.default.createElement(_components.InputText, { type: 'text', label: 'First Name', onKeyPress: function onKeyPress(e) {
+                    return undefined.value = e.target.value;
+                }, onChange: function onChange(e) {
                     return console.log(e.target.value);
-                }, placeholder: 'Enter Name max 10', value: '', required: true }),
+                }, placeholder: 'Enter Name max 10', value: 'asd', required: true }),
             _react2.default.createElement(_components.InputText, { type: 'password', label: 'Middle Name', minLength: 3, maxLength: 6, placeholder: 'Show as password', required: true }),
             _react2.default.createElement(_components.InputText, { type: 'text', value: "hello", label: 'Label and default value', required: true })
         ),
@@ -60,7 +62,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
         _react2.default.createElement(
             _storyHelpers.Stack,
             null,
-            _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', label: 'First Name', maxLength: 3, onChange: function onChange(e) {
+            _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'text', label: 'First Name', showLengthCount: true, maxLength: 3, onChange: function onChange(e) {
                     return console.log(e.target.value);
                 }, placeholder: 'Enter Name max 10', required: true }),
             _react2.default.createElement(_components.InputText, { theme: 'dark', type: 'password', label: 'Middle Name', minLength: 3, maxLength: 6, placeholder: 'Show as password', required: true }),

package/molecules/filter/filter.js

@@ -62,10 +62,10 @@ function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defi
 
 var StyledFilterCompoment = _styledComponents2.default.div(_templateObject, function (_ref) {
   var isMenuOpen = _ref.isMenuOpen;
-  return isMenuOpen ? "95" : "1";
+  return isMenuOpen ? '95' : '1';
 }, function (_ref2) {
   var showSelectedFiltersAsChip = _ref2.showSelectedFiltersAsChip;
-  return showSelectedFiltersAsChip ? "360px" : "30px";
+  return showSelectedFiltersAsChip ? '360px' : '30px';
 });
 
 var ApplyBtn = (0, _styledComponents2.default)(_button2.default)(_templateObject2);
@@ -73,7 +73,7 @@ var ResetBtn = (0, _styledComponents2.default)(_button2.default)(_templateObject
 
 var OverlayStyles = _styledComponents2.default.div(_templateObject4, function (_ref3) {
   var isMenuOpen = _ref3.isMenuOpen;
-  return isMenuOpen ? "94" : "0";
+  return isMenuOpen ? '94' : '0';
 });
 
 var UserIdDropdown = _styledComponents2.default.div(_templateObject5);
@@ -95,14 +95,14 @@ var Filter = function (_Component) {
       })))));
 
       switch (groupItem.display_format) {
-        case "CheckboxGroup":
+        case 'CheckboxGroup':
           {
-            if (groupItem.select_type === "select") {
+            if (groupItem.select_type === 'select') {
               // single select
               var selected = selectedFiltersObj[groupItem.field].value === optionItem.field;
               if (selected && groupItem.min_selection === 0) {
-                filters[groupItem.field].value = "";
-                filters.params[groupItem.field] = "";
+                filters[groupItem.field].value = '';
+                filters.params[groupItem.field] = '';
               } else {
                 filters[groupItem.field].value = optionItem.field;
                 filters.params[groupItem.field] = optionItem.field;
@@ -121,7 +121,7 @@ var Filter = function (_Component) {
                 return item === optionItem.field;
               });
 
-              var maxSelection = typeof groupItem.max_selection === "number" ? groupItem.max_selection : groupItem.options.length;
+              var maxSelection = typeof groupItem.max_selection === 'number' ? groupItem.max_selection : groupItem.options.length;
               if (optionIndex < 0 && multiple.length < maxSelection) {
                 multiple.push(optionItem.field);
               } else if (optionIndex > -1 && !(groupItem.required && multiple.length === 1)) {
@@ -132,21 +132,21 @@ var Filter = function (_Component) {
             break;
           }
 
-        case "datepicker":
+        case 'datepicker':
           {
             filters[groupItem.field].value.key = optionItem.field; // in date, this needs to be added for highlighting the selected filters
-            if (optionItem.field === "date_range") {
+            if (optionItem.field === 'date_range') {
               _this.setState({ isSelectRangeSelected: true }, function () {
                 filters[groupItem.field].value.fromDate = selectedFiltersObj[groupItem.field].value.fromDate;
                 filters[groupItem.field].value.toDate = selectedFiltersObj[groupItem.field].value.toDate;
               });
-            } else if (optionItem.field === "week") {
+            } else if (optionItem.field === 'week') {
               filters[groupItem.field].value.fromDate = _constants.WEEK_DATE;
               filters[groupItem.field].value.toDate = _constants.CURRENT_DATE;
-            } else if (optionItem.field === "month") {
+            } else if (optionItem.field === 'month') {
               filters[groupItem.field].value.fromDate = _constants.MONTH_DATE;
               filters[groupItem.field].value.toDate = _constants.CURRENT_DATE;
-            } else if (optionItem.field === "three_month") {
+            } else if (optionItem.field === 'three_month') {
               filters[groupItem.field].value.fromDate = _constants.THREE_MONTHS;
               filters[groupItem.field].value.toDate = _constants.CURRENT_DATE;
             } else {
@@ -158,7 +158,7 @@ var Filter = function (_Component) {
             break;
           }
 
-        case "input":
+        case 'input':
           {
             var selectedUserIds = _this.state.selectedUserIds;
 
@@ -176,32 +176,33 @@ var Filter = function (_Component) {
             }, '');
             filters[groupItem.field] = updatedUserIds;
             filters.params[groupItem.field] = updatedUserid;
-            _this._userFilterInput.current.value = "";
+            _this._userFilterInput.current.value = '';
           }
 
         default:
           break;
       }
 
-      _this.changeFilters("selected", filters);
+      _this.changeFilters('selected', filters);
     };
 
     _this.changeFilters = function (forAction, filters) {
       var initialFilters = _this.props.initialFilters;
 
       var newFilters = null;
-      if (forAction === "reset") {
+      if (forAction === 'reset') {
         newFilters = initialFilters;
-      } else if (forAction === "selected") {
+      } else if (forAction === 'selected') {
         newFilters = filters;
-      } else if (forAction === "previous") {
+      } else if (forAction === 'previous') {
         newFilters = _this.props.selectedFilters;
       }
       _this.setState({
         selectedFiltersObj: newFilters,
-        selectedFiltersFor: forAction
+        selectedFiltersFor: forAction,
+        autoSelectIndex: -1
       }, function () {
-        if (forAction === "reset" || forAction === "previous") {
+        if (forAction === 'reset' || forAction === 'previous') {
           _this.applyFilters();
         }
       });
@@ -214,37 +215,37 @@ var Filter = function (_Component) {
     _this.highlightSelectedFilters = function (element, option) {
       var selectedFiltersObj = _this.state.selectedFiltersObj;
 
-      var selectedStyle = "";
+      var selectedStyle = '';
       if (selectedFiltersObj[element.field]) {
-        if (element.select_type === "select") {
-          if (element.field === "date") {
+        if (element.select_type === 'select') {
+          if (element.field === 'date') {
             /*
              * for date we have value as Object which contains fromDate and toDate
              * so we add "key" in that object and check based on that key
              * key is nothing but the value of selected label
              */
-            selectedStyle = selectedFiltersObj[element.field].value.key === option.field ? "checked" : "";
+            selectedStyle = selectedFiltersObj[element.field].value.key === option.field ? 'checked' : '';
           } else {
-            selectedStyle = selectedFiltersObj[element.field].value === option.field ? "checked" : "";
+            selectedStyle = selectedFiltersObj[element.field].value === option.field ? 'checked' : '';
           }
-        } else if (element.select_type === "multiselect") {
-          selectedStyle = selectedFiltersObj[element.field].value.includes(option.field) ? "checked" : "";
+        } else if (element.select_type === 'multiselect') {
+          selectedStyle = selectedFiltersObj[element.field].value.includes(option.field) ? 'checked' : '';
         }
       }
-      return "filter-group-item " + selectedStyle;
+      return 'filter-group-item ' + selectedStyle;
     };
 
     _this.renderFilterDisplayLabels = function (element) {
       var selectedFiltersObj = _this.state.selectedFiltersObj;
 
 
-      var label = "";
+      var label = '';
 
       if (selectedFiltersObj && selectedFiltersObj[element.field]) {
-        if (element.select_type === "select") {
-          label = selectedFiltersObj[element.field].value ? selectedFiltersObj[element.field].label : "All"; // normal label - single select
+        if (element.select_type === 'select') {
+          label = selectedFiltersObj[element.field].value ? selectedFiltersObj[element.field].label : 'All'; // normal label - single select
 
-          if (element.field === "date") {
+          if (element.field === 'date') {
             // eg. display like this Jan 10
             var value = selectedFiltersObj[element.field].value;
 
@@ -252,28 +253,37 @@ var Filter = function (_Component) {
             var end = new Date(value ? value.toDate : _constants.CURRENT_DATE);
             var fromattedFrom = _constants.MONTHS[from.getMonth()] + " " + from.getDate();
             var fromattedEnd = _constants.MONTHS[end.getMonth()] + " " + end.getDate();
-            if (value.key === "date_range" && !value.toDate && !value.fromDate) {
-              label = " - ";
-            } else if (value.key === "date_range" || value.key === "week" || value.key === "month" || value.key === "three_month") {
+            if (value.key === 'date_range' && !value.toDate && !value.fromDate) {
+              label = ' - ';
+            } else if (value.key === 'date_range' || value.key === 'week' || value.key === 'month' || value.key === 'three_month') {
               label = fromattedFrom + " - " + fromattedEnd;
             } else {
               label = fromattedEnd;
             }
           }
-        } else if (element.select_type === "multiselect") {
+        } else if (element.select_type === 'multiselect') {
           label = selectedFiltersObj[element.field].value.length;
         }
       }
 
-      return "" + (element.title === "Date" ? "" : element.title + " : ") + label;
+      return "" + (element.title === 'Date' ? '' : element.title + " : ") + label;
     };
 
     _this.toggleFiltersMenu = function (flag) {
-      _this.setState({ isMenuOpen: flag });
+      var selectedFilters = _this.props.selectedFilters;
+
+      if (flag) {
+        _this.setState({
+          isMenuOpen: flag,
+          selectedUserIds: selectedFilters && selectedFilters.user_id_filter
+        });
+      } else {
+        _this.setState({ isMenuOpen: flag });
+      }
     };
 
     _this.componentDidUpdate = function (prevProps, prevState, snapshot) {
-      if (_this.state.selectedFiltersFor == "reset") {} else if (_this.state.selectedFiltersFor == "selected") {} else if (prevProps.selectedFilters && _this.state.selectedFiltersObj == null) {
+      if (_this.state.selectedFiltersFor == 'reset') {} else if (_this.state.selectedFiltersFor == 'selected') {} else if (prevProps.selectedFilters && _this.state.selectedFiltersObj == null) {
         _this.setState({
           selectedFiltersObj: _this.props.selectedFilters
         });
@@ -306,39 +316,54 @@ var Filter = function (_Component) {
     };
 
     _this.applyFilters = function (forData) {
-      var selectedFiltersObj = _this.state.selectedFiltersObj;
+      var _this$state = _this.state,
+          selectedFiltersObj = _this$state.selectedFiltersObj,
+          selectedUserIds = _this$state.selectedUserIds;
       var _this$props = _this.props,
           applyFilters = _this$props.applyFilters,
           initialFilters = _this$props.initialFilters;
 
       _this.toggleFiltersMenu(false);
-      if (forData === "reset") {
+      if (forData === 'reset') {
         _this.setState({
           selectedFiltersObj: initialFilters,
           showDropDownOptions: false,
           selectedUserIds: []
         }, function () {
-          applyFilters(_this.state.selectedFiltersObj, "reset");
+          applyFilters(_this.state.selectedFiltersObj, 'reset');
         });
-      } else if (forData === "cancel") {
+      } else if (forData === 'cancel') {
         _this.setState({
           selectedFiltersObj: _this.props.selectedFilters,
-          showDropDownOptions: false
+          showDropDownOptions: false,
+          selectedUserIds: []
         }, function () {
           // applyFilters(this.state.selectedFiltersObj);
         });
       } else {
-        applyFilters(selectedFiltersObj, "apply");
+        applyFilters(selectedFiltersObj, 'apply');
       }
     };
 
-    _this.getClassName = function (user) {
-      var selectedUserIds = _this.state.selectedUserIds;
+    _this.getClassName = function (user, indx) {
+      var _this$state2 = _this.state,
+          selectedUserIds = _this$state2.selectedUserIds,
+          autoSelectIndex = _this$state2.autoSelectIndex;
 
-      var index = selectedUserIds.findIndex(function (userObj) {
-        return userObj.user_id === user.user_id;
+      if (autoSelectIndex === indx) return 'dropdown-options active';else {
+        var index = selectedUserIds.findIndex(function (userObj) {
+          return userObj.user_id === user.user_id;
+        });
+        return index >= 0 ? 'dropdown-options active' : 'dropdown-options';
+      }
+    };
+
+    _this.resetSelectedUserFilter = function () {
+      _this.setState({
+        selectedUserIds: [],
+        showDropDownOptions: false,
+        autoSelectIndex: -1
       });
-      return index >= 0 ? "dropdown-options active" : "dropdown-options";
     };
 
     _this.render = function () {
@@ -348,11 +373,11 @@ var Filter = function (_Component) {
           filterMessage = _this$props2.filterMessage,
           width = _this$props2.width,
           userIdsList = _this$props2.userIdsList;
-      var _this$state = _this.state,
-          isMenuOpen = _this$state.isMenuOpen,
-          selectedFiltersObj = _this$state.selectedFiltersObj,
-          isSelectRangeSelected = _this$state.isSelectRangeSelected,
-          showDropDownOptions = _this$state.showDropDownOptions;
+      var _this$state3 = _this.state,
+          isMenuOpen = _this$state3.isMenuOpen,
+          selectedFiltersObj = _this$state3.selectedFiltersObj,
+          isSelectRangeSelected = _this$state3.isSelectRangeSelected,
+          showDropDownOptions = _this$state3.showDropDownOptions;
 
       return _react2.default.createElement(
         _react.Fragment,
@@ -379,9 +404,9 @@ var Filter = function (_Component) {
                 className: "search-filter-list-box",
                 onClick: function onClick() {
                   _this.toggleFiltersMenu(!(isMenuOpen && !showSelectedFiltersAsChip));
-                  _this.applyFilters("cancel");
+                  _this.applyFilters('cancel');
                   if (isMenuOpen && !showSelectedFiltersAsChip) {
-                    _this.applyFilters("cancel");
+                    _this.applyFilters('cancel');
                   } else {
                     _this.toggleFiltersMenu(true);
                   }
@@ -390,7 +415,7 @@ var Filter = function (_Component) {
               !showSelectedFiltersAsChip && _react2.default.createElement(
                 "div",
                 {
-                  className: isMenuOpen ? "filter-button active" : "filter-button"
+                  className: isMenuOpen ? 'filter-button active' : 'filter-button'
                 },
                 _react2.default.createElement(_icon2.default, { name: "filter", width: 16, height: 16, color: "#afb2ba" })
               ),
@@ -404,7 +429,7 @@ var Filter = function (_Component) {
                     "span",
                     {
                       style: {
-                        color: "#63d0c7"
+                        color: '#63d0c7'
                       }
                     },
                     "FILTERS"
@@ -421,7 +446,7 @@ var Filter = function (_Component) {
                           {
                             key: item.text,
                             theme: "dark",
-                            style: { cursor: "pointer" },
+                            style: { cursor: 'pointer' },
                             className: "chip-button checked"
                           },
                           _this.renderFilterDisplayLabels(item)
@@ -490,17 +515,20 @@ var Filter = function (_Component) {
                         onChange: function onChange(e) {
                           _this.handleDebounce(groupItem.permission, e.target.value);
                           _this.setState({ showDropDownOptions: true });
+                        },
+                        onKeyDown: function onKeyDown(e) {
+                          return _this.onKeyDown(e, groupItem);
                         }
                         // onFocus={(e) => this.setState({showDropDownOptions: true})}
                       }),
                       userIdsList && userIdsList.length > 0 && showDropDownOptions && _this._userFilterInput.current.value.length > 1 && _react2.default.createElement(
                         "div",
                         { className: "user-dropdown" },
-                        userIdsList.map(function (user) {
+                        userIdsList.map(function (user, index) {
                           return _react2.default.createElement(
                             "p",
                             {
-                              className: _this.getClassName(user),
+                              className: _this.getClassName(user, index),
                               onClick: function onClick(e) {
                                 return _this.onSelection(groupItem, user);
                               }
@@ -512,83 +540,82 @@ var Filter = function (_Component) {
                     )
                   )
                 );
-              } else {
-                return _react2.default.createElement(
+              }
+              return _react2.default.createElement(
+                "div",
+                { className: "filter-group", key: groupItem.field },
+                _react2.default.createElement(
                   "div",
-                  { className: "filter-group", key: groupItem.field },
-                  _react2.default.createElement(
-                    "div",
-                    { className: "filter-group-title" },
-                    groupItem.title
-                  ),
-                  _react2.default.createElement(
-                    "div",
-                    { className: "filter-group-item-list" },
-                    groupItem.options.map(function (option) {
-                      return option.field === "date_range" ? _react2.default.createElement(_datePicker2.default, {
-                        theme: "dark",
-                        label: _react2.default.createElement(
-                          _tag2.default,
-                          {
-                            key: option.field,
-                            theme: "dark",
-                            className: "chip-button " + _this.highlightSelectedFilters(groupItem, option)
-                          },
-                          option.title
-                        ),
-                        className: _this.highlightSelectedFilters(groupItem, option),
-                        labelAsText: true,
-                        rangePicker: true,
-                        minDate: isSelectRangeSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
-                        maxDate: isSelectRangeSelected ? _constants.CURRENT_DATE : selectedFiltersObj[groupItem.field].value.fromDate + option.max_days * _constants.CONVERT > _constants.CURRENT_DATE ? _constants.CURRENT_DATE : selectedFiltersObj[groupItem.field].value.fromDate + option.max_days * _constants.CONVERT,
-                        datepickerStep: 2,
-                        selected:
-                        // previousSelectedFilters && previousSelectedFilters[groupItem.field].value.key !='date_range' ? []:(
-                        selectedFiltersObj[groupItem.field] ? [selectedFiltersObj[groupItem.field].value.fromDate, selectedFiltersObj[groupItem.field].value.toDate] : []
-                        //  )
-                        ,
-                        onSelectionChange: function onSelectionChange(date) {
-                          var filters = _extends({}, selectedFiltersObj);
-                          var formattedFrom = date.from ? new Date(date.from) : null;
-                          var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
-                          filters[groupItem.field].value.fromDate = date.from;
-                          filters[groupItem.field].value.toDate = date.to; // || CURRENT_DATE;
-                          filters[groupItem.field].value.key = "date_range";
-                          filters[groupItem.field].label = date.from && date.to ? _constants.MONTHS[formattedFrom.getMonth()] + " " + formattedFrom.getDate() + " - " + _constants.MONTHS[formattedEnd.getMonth()] + " " + formattedEnd.getDate() : "no selection";
-                          _this.setState({ isSelectRangeSelected: false }, function () {
-                            _this.changeFilters("selected", filters);
-                          });
-                        },
-                        onCalendarOpen: function onCalendarOpen() {
-                          _this.onSelection(groupItem, option);
-                        }
-                      }) : _react2.default.createElement(
+                  { className: "filter-group-title" },
+                  groupItem.title
+                ),
+                _react2.default.createElement(
+                  "div",
+                  { className: "filter-group-item-list" },
+                  groupItem.options.map(function (option) {
+                    return option.field === 'date_range' ? _react2.default.createElement(_datePicker2.default, {
+                      theme: "dark",
+                      label: _react2.default.createElement(
                         _tag2.default,
                         {
                           key: option.field,
                           theme: "dark",
-                          className: "chip-button " + _this.highlightSelectedFilters(groupItem, option),
-                          onClick: function onClick() {
-                            // first range picker false then
-                            _this.setState({ isRangePickerVisible: false }, function () {
-                              _this.onSelection(groupItem, option);
-                            });
-                          }
+                          className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
                         },
                         option.title
-                      );
-                    })
-                  )
-                );
-              }
+                      ),
+                      className: _this.highlightSelectedFilters(groupItem, option),
+                      labelAsText: true,
+                      rangePicker: true,
+                      minDate: isSelectRangeSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
+                      maxDate: isSelectRangeSelected ? _constants.CURRENT_DATE : selectedFiltersObj[groupItem.field].value.fromDate + option.max_days * _constants.CONVERT > _constants.CURRENT_DATE ? _constants.CURRENT_DATE : selectedFiltersObj[groupItem.field].value.fromDate + option.max_days * _constants.CONVERT,
+                      datepickerStep: 2,
+                      selected:
+                      // previousSelectedFilters && previousSelectedFilters[groupItem.field].value.key !='date_range' ? []:(
+                      selectedFiltersObj[groupItem.field] ? [selectedFiltersObj[groupItem.field].value.fromDate, selectedFiltersObj[groupItem.field].value.toDate] : []
+                      //  )
+                      ,
+                      onSelectionChange: function onSelectionChange(date) {
+                        var filters = _extends({}, selectedFiltersObj);
+                        var formattedFrom = date.from ? new Date(date.from) : null;
+                        var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
+                        filters[groupItem.field].value.fromDate = date.from;
+                        filters[groupItem.field].value.toDate = date.to; // || CURRENT_DATE;
+                        filters[groupItem.field].value.key = 'date_range';
+                        filters[groupItem.field].label = date.from && date.to ? _constants.MONTHS[formattedFrom.getMonth()] + " " + formattedFrom.getDate() + " - " + _constants.MONTHS[formattedEnd.getMonth()] + " " + formattedEnd.getDate() : 'no selection';
+                        _this.setState({ isSelectRangeSelected: false }, function () {
+                          _this.changeFilters('selected', filters);
+                        });
+                      },
+                      onCalendarOpen: function onCalendarOpen() {
+                        _this.onSelection(groupItem, option);
+                      }
+                    }) : _react2.default.createElement(
+                      _tag2.default,
+                      {
+                        key: option.field,
+                        theme: "dark",
+                        className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option),
+                        onClick: function onClick() {
+                          // first range picker false then
+                          _this.setState({ isRangePickerVisible: false }, function () {
+                            _this.onSelection(groupItem, option);
+                          });
+                        }
+                      },
+                      option.title
+                    );
+                  })
+                )
+              );
             }) : null,
             _react2.default.createElement(
               "div",
               {
                 style: {
-                  margin: "15px 0px 0px",
-                  textAlign: "center",
-                  display: "flex"
+                  margin: '15px 0px 0px',
+                  textAlign: 'center',
+                  display: 'flex'
                 }
               },
               _react2.default.createElement(
@@ -597,7 +624,7 @@ var Filter = function (_Component) {
                   appearance: "cta",
                   onClick: function onClick() {
                     // this.toggleFiltersMenu(false);
-                    _this.applyFilters("reset");
+                    _this.applyFilters('reset');
                     // this.changeFilters('reset', null);
                   }
                 },
@@ -628,8 +655,8 @@ var Filter = function (_Component) {
       selectedFiltersFor: null,
       isSelectRangeSelected: false, // this is based on max_days
       selectedUserIds: [],
-      userInput: "",
-      showDropDownOptions: false
+      showDropDownOptions: false,
+      autoSelectIndex: -1
     };
     _this._userFilter = _react2.default.createRef();
     _this._userFilterInput = _react2.default.createRef();
@@ -637,48 +664,98 @@ var Filter = function (_Component) {
   }
 
   /**
-   * This function handle the onChange event in the filter. 
-   * @param {Object} groupItem GUI elements for the particular section
-   * @param {Object} optionItem the item from the options of that section
-   */
+  * This function handle the onChange event in the filter. 
+  * @param {Object} groupItem GUI elements for the particular section
+  * @param {Object} optionItem the item from the options of that section
+  */
 
 
   /**
-   * This function performs action based on forAction on filters object
-   * @param {String} forAction action performed on the filter object
-   * @param {Object} filters Object containing current filters selected values
-   */
+  * This function performs action based on forAction on filters object
+  * @param {String} forAction action performed on the filter object
+  * @param {Object} filters Object containing current filters selected values
+  */
 
 
   /**
-  * This function hadles the onchange event for search input field inside filter
-  * @param {string} query Input Filed value
-  * @param {string} permission Type of dashboard
-  */
+   * This function hadles the onchange event for search input field inside filter
+   * @param {string} query Input Filed value
+   * @param {string} permission Type of dashboard
+   */
 
 
-  // to highlight selected filters
+  _createClass(Filter, [{
+    key: "onKeyDown",
 
 
-  // this to render filter label based on selectedFiltersObj
+    /**
+     * This function handles the keypress traverse over the dropdown option list
+     * @param {Object} e the event object that is fired
+     * @param {Object} groupItem Object containing groupitem details
+     */
+    value: function onKeyDown(e, groupItem) {
+      var autoSelectIndex = this.state.autoSelectIndex;
+      var userIdsList = this.props.userIdsList;
 
 
-  /**
-   * This function toggle filters menu - show & hide.
-   * @param {boolean} flag contains value true/false to show/ hide filter.
-   */
+      if (userIdsList.length) {
+        switch (e.keyCode) {
+          case 13:
+            e.preventDefault();
+            this.onSelection(groupItem, userIdsList[autoSelectIndex]);
+            break;
+          case 40:
+            {
+              e.preventDefault();
+              var nextIndex = autoSelectIndex + 1;
+              if (nextIndex > userIdsList.length - 1) {
+                nextIndex = userIdsList.length - 1;
+              }
+              this.setState({
+                autoSelectIndex: nextIndex
+              });
+            }
+            break;
+          case 38:
+            {
+              e.preventDefault();
+              var prevIndex = autoSelectIndex - 1;
+              if (prevIndex < 0) {
+                prevIndex = userIdsList.length - 1;
+              }
+              this.setState({
+                autoSelectIndex: prevIndex
+              });
+            }
+            break;
+          default:
+            // eslint-disable-next-line no-console
+            console.log('Default Case');
+        }
+      }
+    }
 
+    // to highlight selected filters
 
-  _createClass(Filter, [{
+
+    // this to render filter label based on selectedFiltersObj
+
+
+    /**
+    * This function toggle filters menu - show & hide.
+    * @param {boolean} flag contains value true/false to show/ hide filter.
+    */
+
+  }, {
     key: "componentDidMount",
     value: function componentDidMount() {
       document.body.addEventListener('click', this.toggleDropDown);
     }
 
     /**
-    * This function hides the dropdown list when user clicks outside the area of input box
-    * @param {Object} e click event that gets fired.
-    */
+     * This function hides the dropdown list when user clicks outside the area of input box
+     * @param {Object} e click event that gets fired.
+     */
 
 
     /**
@@ -688,10 +765,15 @@ var Filter = function (_Component) {
 
 
     /**
-    * This function takes the current user object from the dropdown list and checks if it is pre-selected.
-    * @param {Objec} user object that contains details for the user
-    * @returns the name of class with active state or not.
-    */
+     * This function takes the current user object from the dropdown list and checks if it is pre-selected.
+     * @param {Objec} user object that contains details for the user
+     * @returns the name of class with active state or not.
+     */
+
+
+    /**
+     * This function reset userIds in the filter.
+     */
 
   }]);
 
@@ -709,7 +791,7 @@ Filter.propTypes = {
 };
 
 Filter.defaultProps = {
-  width: "360px"
+  width: '360px'
 };
 
 exports.default = Filter;

package/molecules/table/table.js

@@ -558,6 +558,11 @@ var Table = function (_Component) {
       _this.handleDebounce(text);
     };
 
+    _this.resetSearchTextAndFilters = function () {
+      _this.handleInputChange('');
+      _this._filterRef.current.resetSelectedUserFilter();
+    };
+
     _this.handleDebounce = (0, _lodash.debounce)(function (text) {
       var getSearchedRows = _this.props.getSearchedRows;
 
@@ -597,6 +602,7 @@ var Table = function (_Component) {
       // isAllRowsSelected:false,
       searchedText: ''
     };
+
     return _this;
   }
 
@@ -837,6 +843,11 @@ var Table = function (_Component) {
      */
 
 
+    /**
+     * This function reset Search & filters.
+     */
+
+
     /**
      * This function triggers API call with the text as searched keyword
      * @param {string} text the searched text
@@ -1007,11 +1018,11 @@ var Table = function (_Component) {
               null,
               _react2.default.createElement(
                 "span",
-                null,
+                { className: "search-icon-wrapper" },
                 _react2.default.createElement(_icon2.default, {
                   name: "search",
-                  width: 10,
-                  height: 10,
+                  width: 12,
+                  height: 12,
                   color: "#999999"
                 })
               ),
@@ -1079,6 +1090,7 @@ var Table = function (_Component) {
               )
             ),
             this.props.filtersStructure && this.props.filtersStructure.length ? _react2.default.createElement(_filter2.default, {
+              ref: this._filterRef,
               initialFilters: this.props.initialFilters,
               filtersStructure: this.props.filtersStructure,
               selectedFilters: this.props.selectedFilters,

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@desynova-digital/components",
-  "version": "8.5.2",
+  "version": "8.7.0",
   "description": "Components for Desynova Digital",
   "main": "index.js",
   "author": "desynova-digital",
   "license": "MIT",
   "repository": "desynova-digital",
   "dependencies": {
-    "@desynova-digital/tokens": "8.5.2",
+    "@desynova-digital/tokens": "8.7.0",
     "prop-types": "^15.7.2",
     "styled-components": "^4.3.2"
   },