impact-ui 0.1.21 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/index.cjs.js +61 -26
  2. package/dist/index.esm.js +61 -26
  3. package/dist/index.js +61 -26
  4. package/package.json +1 -1
package/dist/index.cjs.js CHANGED
@@ -656,7 +656,7 @@ var Button = function Button(_ref) {
656
656
  };
657
657
 
658
658
  function _templateObject5$3() {
659
- var data = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n position: relative;\n &:hover ", " {\n display: block;\n \n }\n \n"]);
659
+ var data = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n position: relative;\n\n &:hover ", " {\n display: block;\n \n }\n \n"]);
660
660
 
661
661
  _templateObject5$3 = function _templateObject5() {
662
662
  return data;
@@ -666,7 +666,7 @@ function _templateObject5$3() {
666
666
  }
667
667
 
668
668
  function _templateObject4$3() {
669
- var data = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n background: #e5edf7;\n position: absolute;\n left: 4px;\n border-radius: 50%;\n /* top: -1px; */\n display: none;\n"]);
669
+ var data = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n background: #e5edf7;\n position: absolute;\n left: -4px;\n border-radius: 50%;\n /* top: -1px; */\n display: none;\n"]);
670
670
 
671
671
  _templateObject4$3 = function _templateObject4() {
672
672
  return data;
@@ -696,7 +696,7 @@ function _templateObject2$4() {
696
696
  }
697
697
 
698
698
  function _templateObject$4() {
699
- var data = _taggedTemplateLiteral(["\n font-size: 14px;\n color: ", ";\n line-height: 21px;\n margin-left: 8px;\n position: relative;\n"]);
699
+ var data = _taggedTemplateLiteral(["\n font-size: 14px;\n color: ", ";\n line-height: 21px;\n position: relative;\n"]);
700
700
 
701
701
  _templateObject$4 = function _templateObject() {
702
702
  return data;
@@ -1083,9 +1083,39 @@ var Textarea = function Textarea(_ref) {
1083
1083
  })), !disabled && /*#__PURE__*/React__default.createElement(StyledRemainingText, null, maxLength - value.length, " characters left"));
1084
1084
  };
1085
1085
 
1086
- function _templateObject11$2() {
1086
+ function _templateObject14$1() {
1087
+ var data = _taggedTemplateLiteral(["\n height: 37px;\n padding: 8px 16px;\n box-sizing: border-box;\n &:hover{\n background:", ";\n }\n"]);
1088
+
1089
+ _templateObject14$1 = function _templateObject14() {
1090
+ return data;
1091
+ };
1092
+
1093
+ return data;
1094
+ }
1095
+
1096
+ function _templateObject13$2() {
1097
+ var data = _taggedTemplateLiteral(["\n background-color: transparent;\n border: none;\n padding: 4px 0;\n height: 26px;\n box-sizing: border-box;\n padding-left: 34px;\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n cursor: pointer;\n background-image: url(", ");\n background-repeat: no-repeat;\n background-size: 10px;\n background-position: 18px center;\n"]);
1098
+
1099
+ _templateObject13$2 = function _templateObject13() {
1100
+ return data;
1101
+ };
1102
+
1103
+ return data;
1104
+ }
1105
+
1106
+ function _templateObject12$2() {
1087
1107
  var data = _taggedTemplateLiteral(["\n border: none;\n height: 37px;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 16px;\n font-size: 14px;\n border-bottom: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n background: url(", ") no-repeat;\n background-size: 12px;\n background-position: 16px center;\n padding-left: 34px;\n"]);
1088
1108
 
1109
+ _templateObject12$2 = function _templateObject12() {
1110
+ return data;
1111
+ };
1112
+
1113
+ return data;
1114
+ }
1115
+
1116
+ function _templateObject11$2() {
1117
+ var data = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n"]);
1118
+
1089
1119
  _templateObject11$2 = function _templateObject11() {
1090
1120
  return data;
1091
1121
  };
@@ -1094,7 +1124,7 @@ function _templateObject11$2() {
1094
1124
  }
1095
1125
 
1096
1126
  function _templateObject10$4() {
1097
- var data = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n"]);
1127
+ var data = _taggedTemplateLiteral([""]);
1098
1128
 
1099
1129
  _templateObject10$4 = function _templateObject10() {
1100
1130
  return data;
@@ -1104,7 +1134,7 @@ function _templateObject10$4() {
1104
1134
  }
1105
1135
 
1106
1136
  function _templateObject9$5() {
1107
- var data = _taggedTemplateLiteral([""]);
1137
+ var data = _taggedTemplateLiteral(["\n color: #1d1d1d;\n "]);
1108
1138
 
1109
1139
  _templateObject9$5 = function _templateObject9() {
1110
1140
  return data;
@@ -1114,7 +1144,7 @@ function _templateObject9$5() {
1114
1144
  }
1115
1145
 
1116
1146
  function _templateObject8$5() {
1117
- var data = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n font-size: 14px;\n box-sizing: border-box;\n padding: 8px 16px;\n height: 37px;\n border-radius: 4px;\n color: ", ";\n min-width: 180px;\n text-align: left;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n border: 1px solid ", ";\n }\n &:focus {\n box-shadow: 0 0 0 3px ", ";\n border: 1px solid ", ";\n }\n\n &:disabled {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: default;\n ", " {\n background: url(", ") no-repeat;\n background-position: center;\n background-size: 10px;\n }\n }\n"]);
1147
+ var data = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n font-size: 14px;\n box-sizing: border-box;\n padding: 8px 16px;\n height: 37px;\n border-radius: 4px;\n color: ", ";\n min-width: 180px;\n text-align: left; \n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n min-width: 232px;\n ", "\n &:hover {\n border: 1px solid ", ";\n }\n &:focus {\n box-shadow: 0 0 0 3px ", ";\n border: 1px solid ", ";\n }\n\n &:disabled {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: default;\n ", " {\n background: url(", ") no-repeat;\n background-position: center;\n background-size: 10px;\n }\n }\n"]);
1118
1148
 
1119
1149
  _templateObject8$5 = function _templateObject8() {
1120
1150
  return data;
@@ -1144,7 +1174,7 @@ function _templateObject6$5() {
1144
1174
  }
1145
1175
 
1146
1176
  function _templateObject5$6() {
1147
- var data = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n padding: 10px;\n"]);
1177
+ var data = _taggedTemplateLiteral(["\n\n"]);
1148
1178
 
1149
1179
  _templateObject5$6 = function _templateObject5() {
1150
1180
  return data;
@@ -1154,7 +1184,7 @@ function _templateObject5$6() {
1154
1184
  }
1155
1185
 
1156
1186
  function _templateObject4$8() {
1157
- var data = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: 4px;\n margin-top: 4px;\n position: absolute;\n z-index: 2;\n min-width: 200px;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);\n padding: 8px 0px;\n"]);
1187
+ var data = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: 4px;\n margin-top: 4px;\n position: absolute;\n z-index: 2;\n min-width: 232px;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);\n padding: 8px 0px;\n\n"]);
1158
1188
 
1159
1189
  _templateObject4$8 = function _templateObject4() {
1160
1190
  return data;
@@ -1184,7 +1214,7 @@ function _templateObject2$9() {
1184
1214
  }
1185
1215
 
1186
1216
  function _templateObject$9() {
1187
- var data = _taggedTemplateLiteral(["\n .multi-select__control {\n display: none;\n }\n .multi-select__option {\n font-size: 14px;\n }\n .multi-select__option--is-focused {\n background-color: ", ";\n }\n .multi-select__option--is-selected {\n background-color: ", ";\n color: #1d1d1d;\n }\n .multi-select__option--is-selected:active {\n background-color: ", ";\n }\n"]);
1217
+ var data = _taggedTemplateLiteral(["\n .multi-select__control {\n display: none;\n }\n .multi-select__option {\n font-size: 14px;\n padding: 8px 16px;\n }\n .multi-select__option--is-focused {\n background-color: ", ";\n }\n .multi-select__option--is-selected {\n background-color: ", ";\n color: #1d1d1d;\n }\n .multi-select__option--is-selected:active {\n background-color: ", ";\n }\n"]);
1188
1218
 
1189
1219
  _templateObject$9 = function _templateObject() {
1190
1220
  return data;
@@ -1200,10 +1230,14 @@ var SearchContainer = styled__default.div(_templateObject5$6());
1200
1230
  var StyledChevronIcon = styled__default.i(_templateObject6$5(), ChevronImage, function (props) {
1201
1231
  return props.isOpen && styled.css(_templateObject7$5());
1202
1232
  });
1203
- var StyledDropdownMainButton = styled__default.button(_templateObject8$5(), WhiteColor, DefaultColorButton, DefaultButtonText, PrimaryBlueColor, FocusBackgroundColor, PrimaryBlueColor, DisabledTextareaBg, FocusDisableBorderColor, DisabledButtonFontColor, StyledChevronIcon, DisabledChevron);
1204
- var StyledDDMainContainer = styled__default.div(_templateObject9$5());
1205
- var StyledDDLabelContainer = styled__default.label(_templateObject10$4(), LabelColor);
1206
- var StyledDDSearchBox = styled__default.input(_templateObject11$2(), AvatarBgColor, SearchIcon);
1233
+ var StyledDropdownMainButton = styled__default.button(_templateObject8$5(), WhiteColor, DefaultColorButton, DefaultButtonText, function (props) {
1234
+ return props.isSelected && styled.css(_templateObject9$5());
1235
+ }, PrimaryBlueColor, FocusBackgroundColor, PrimaryBlueColor, DisabledTextareaBg, FocusDisableBorderColor, DisabledButtonFontColor, StyledChevronIcon, DisabledChevron);
1236
+ var StyledDDMainContainer = styled__default.div(_templateObject10$4());
1237
+ var StyledDDLabelContainer = styled__default.label(_templateObject11$2(), LabelColor);
1238
+ var StyledDDSearchBox = styled__default.input(_templateObject12$2(), AvatarBgColor, SearchIcon);
1239
+ var StyledButtonURLClear = styled__default.button(_templateObject13$2(), LabelColor, NotificationClose);
1240
+ var StyledSelectAllContainer = styled__default.div(_templateObject14$1(), FocusBackgroundColor);
1207
1241
 
1208
1242
  var Dropdown = function Dropdown(_ref) {
1209
1243
  var children = _ref.children,
@@ -1266,12 +1300,13 @@ var Select = function Select(_ref2) {
1266
1300
  if (event.target.checked) {
1267
1301
  setIsSelectAll(true); //currentOptions without selectedOptions
1268
1302
 
1269
- var restcurrentOptions = currentOptions.filter(function (option) {
1303
+ var restCurrentOptions = currentOptions.filter(function (option) {
1270
1304
  return !selectedOptions.find(function (selectedOption) {
1271
1305
  return selectedOption.label === option.label && option.value === selectedOption.value;
1272
1306
  });
1273
1307
  });
1274
- setSelectedOptions([].concat(_toConsumableArray(selectedOptions), _toConsumableArray(restcurrentOptions)));
1308
+ setSelectedOptions([].concat(_toConsumableArray(selectedOptions), _toConsumableArray(restCurrentOptions)));
1309
+ setIsEditFlag(true);
1275
1310
  } else {
1276
1311
  setIsEditFlag(false);
1277
1312
  setIsSelectAll(false);
@@ -1336,7 +1371,8 @@ var Select = function Select(_ref2) {
1336
1371
  return setIsOpen(function (prev) {
1337
1372
  return !prev;
1338
1373
  });
1339
- }
1374
+ },
1375
+ isSelected: Object.entries(selectedOptions).length > 0
1340
1376
  }, getPlaceholder(), /*#__PURE__*/React__default.createElement(StyledChevronIcon, {
1341
1377
  isOpen: isOpen
1342
1378
  }))
@@ -1395,23 +1431,22 @@ var Filters = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
1395
1431
  placeholder: "Search",
1396
1432
  ref: ref,
1397
1433
  onChange: onSearch
1398
- }), isMulti && isWithSelectAll && /*#__PURE__*/React__default.createElement(SearchContainer, null, /*#__PURE__*/React__default.createElement(Checkbox, {
1434
+ }), isMulti && isWithSelectAll && /*#__PURE__*/React__default.createElement(SearchContainer, null, !isSelectAll && selectedOptions.length > 0 ? /*#__PURE__*/React__default.createElement(StyledButtonURLClear, {
1435
+ variant: "url",
1436
+ onClick: onClearAll
1437
+ }, "Clear Selection") : null, /*#__PURE__*/React__default.createElement(StyledSelectAllContainer, null, /*#__PURE__*/React__default.createElement(Checkbox, {
1399
1438
  name: "select-all",
1400
1439
  id: "select-all",
1401
1440
  label: isSelectAll ? "Deselect All" : "Select All",
1402
1441
  onChange: onSelectAll,
1403
1442
  checked: isSelectAll
1404
- }), !isSelectAll && selectedOptions.length > 0 ? /*#__PURE__*/React__default.createElement(Button, {
1405
- variant: "url",
1406
- label: "Clear All",
1407
- onClick: onClearAll
1408
- }) : null));
1443
+ }))));
1409
1444
  });
1410
1445
 
1411
- function _templateObject12$2() {
1446
+ function _templateObject12$3() {
1412
1447
  var data = _taggedTemplateLiteral(["\n display: none;\n "]);
1413
1448
 
1414
- _templateObject12$2 = function _templateObject12() {
1449
+ _templateObject12$3 = function _templateObject12() {
1415
1450
  return data;
1416
1451
  };
1417
1452
 
@@ -1546,7 +1581,7 @@ var StyledAccordionChevron = styled__default.i(_templateObject8$6(), ChevronImag
1546
1581
  });
1547
1582
  var StyledAccordionHeading = styled__default.div(_templateObject10$5());
1548
1583
  var StyledAccordionBodyContainer = styled__default.div(_templateObject11$3(), function (props) {
1549
- return !props.isOpen && styled.css(_templateObject12$2());
1584
+ return !props.isOpen && styled.css(_templateObject12$3());
1550
1585
  });
1551
1586
 
1552
1587
  var Accordion = function Accordion(_ref) {
package/dist/index.esm.js CHANGED
@@ -647,7 +647,7 @@ var Button = function Button(_ref) {
647
647
  };
648
648
 
649
649
  function _templateObject5$3() {
650
- var data = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n position: relative;\n &:hover ", " {\n display: block;\n \n }\n \n"]);
650
+ var data = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n position: relative;\n\n &:hover ", " {\n display: block;\n \n }\n \n"]);
651
651
 
652
652
  _templateObject5$3 = function _templateObject5() {
653
653
  return data;
@@ -657,7 +657,7 @@ function _templateObject5$3() {
657
657
  }
658
658
 
659
659
  function _templateObject4$3() {
660
- var data = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n background: #e5edf7;\n position: absolute;\n left: 4px;\n border-radius: 50%;\n /* top: -1px; */\n display: none;\n"]);
660
+ var data = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n background: #e5edf7;\n position: absolute;\n left: -4px;\n border-radius: 50%;\n /* top: -1px; */\n display: none;\n"]);
661
661
 
662
662
  _templateObject4$3 = function _templateObject4() {
663
663
  return data;
@@ -687,7 +687,7 @@ function _templateObject2$4() {
687
687
  }
688
688
 
689
689
  function _templateObject$4() {
690
- var data = _taggedTemplateLiteral(["\n font-size: 14px;\n color: ", ";\n line-height: 21px;\n margin-left: 8px;\n position: relative;\n"]);
690
+ var data = _taggedTemplateLiteral(["\n font-size: 14px;\n color: ", ";\n line-height: 21px;\n position: relative;\n"]);
691
691
 
692
692
  _templateObject$4 = function _templateObject() {
693
693
  return data;
@@ -1074,9 +1074,39 @@ var Textarea = function Textarea(_ref) {
1074
1074
  })), !disabled && /*#__PURE__*/React__default.createElement(StyledRemainingText, null, maxLength - value.length, " characters left"));
1075
1075
  };
1076
1076
 
1077
- function _templateObject11$2() {
1077
+ function _templateObject14$1() {
1078
+ var data = _taggedTemplateLiteral(["\n height: 37px;\n padding: 8px 16px;\n box-sizing: border-box;\n &:hover{\n background:", ";\n }\n"]);
1079
+
1080
+ _templateObject14$1 = function _templateObject14() {
1081
+ return data;
1082
+ };
1083
+
1084
+ return data;
1085
+ }
1086
+
1087
+ function _templateObject13$2() {
1088
+ var data = _taggedTemplateLiteral(["\n background-color: transparent;\n border: none;\n padding: 4px 0;\n height: 26px;\n box-sizing: border-box;\n padding-left: 34px;\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n cursor: pointer;\n background-image: url(", ");\n background-repeat: no-repeat;\n background-size: 10px;\n background-position: 18px center;\n"]);
1089
+
1090
+ _templateObject13$2 = function _templateObject13() {
1091
+ return data;
1092
+ };
1093
+
1094
+ return data;
1095
+ }
1096
+
1097
+ function _templateObject12$2() {
1078
1098
  var data = _taggedTemplateLiteral(["\n border: none;\n height: 37px;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 16px;\n font-size: 14px;\n border-bottom: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n background: url(", ") no-repeat;\n background-size: 12px;\n background-position: 16px center;\n padding-left: 34px;\n"]);
1079
1099
 
1100
+ _templateObject12$2 = function _templateObject12() {
1101
+ return data;
1102
+ };
1103
+
1104
+ return data;
1105
+ }
1106
+
1107
+ function _templateObject11$2() {
1108
+ var data = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n"]);
1109
+
1080
1110
  _templateObject11$2 = function _templateObject11() {
1081
1111
  return data;
1082
1112
  };
@@ -1085,7 +1115,7 @@ function _templateObject11$2() {
1085
1115
  }
1086
1116
 
1087
1117
  function _templateObject10$4() {
1088
- var data = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n"]);
1118
+ var data = _taggedTemplateLiteral([""]);
1089
1119
 
1090
1120
  _templateObject10$4 = function _templateObject10() {
1091
1121
  return data;
@@ -1095,7 +1125,7 @@ function _templateObject10$4() {
1095
1125
  }
1096
1126
 
1097
1127
  function _templateObject9$5() {
1098
- var data = _taggedTemplateLiteral([""]);
1128
+ var data = _taggedTemplateLiteral(["\n color: #1d1d1d;\n "]);
1099
1129
 
1100
1130
  _templateObject9$5 = function _templateObject9() {
1101
1131
  return data;
@@ -1105,7 +1135,7 @@ function _templateObject9$5() {
1105
1135
  }
1106
1136
 
1107
1137
  function _templateObject8$5() {
1108
- var data = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n font-size: 14px;\n box-sizing: border-box;\n padding: 8px 16px;\n height: 37px;\n border-radius: 4px;\n color: ", ";\n min-width: 180px;\n text-align: left;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n border: 1px solid ", ";\n }\n &:focus {\n box-shadow: 0 0 0 3px ", ";\n border: 1px solid ", ";\n }\n\n &:disabled {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: default;\n ", " {\n background: url(", ") no-repeat;\n background-position: center;\n background-size: 10px;\n }\n }\n"]);
1138
+ var data = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n font-size: 14px;\n box-sizing: border-box;\n padding: 8px 16px;\n height: 37px;\n border-radius: 4px;\n color: ", ";\n min-width: 180px;\n text-align: left; \n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n min-width: 232px;\n ", "\n &:hover {\n border: 1px solid ", ";\n }\n &:focus {\n box-shadow: 0 0 0 3px ", ";\n border: 1px solid ", ";\n }\n\n &:disabled {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: default;\n ", " {\n background: url(", ") no-repeat;\n background-position: center;\n background-size: 10px;\n }\n }\n"]);
1109
1139
 
1110
1140
  _templateObject8$5 = function _templateObject8() {
1111
1141
  return data;
@@ -1135,7 +1165,7 @@ function _templateObject6$5() {
1135
1165
  }
1136
1166
 
1137
1167
  function _templateObject5$6() {
1138
- var data = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n padding: 10px;\n"]);
1168
+ var data = _taggedTemplateLiteral(["\n\n"]);
1139
1169
 
1140
1170
  _templateObject5$6 = function _templateObject5() {
1141
1171
  return data;
@@ -1145,7 +1175,7 @@ function _templateObject5$6() {
1145
1175
  }
1146
1176
 
1147
1177
  function _templateObject4$8() {
1148
- var data = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: 4px;\n margin-top: 4px;\n position: absolute;\n z-index: 2;\n min-width: 200px;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);\n padding: 8px 0px;\n"]);
1178
+ var data = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: 4px;\n margin-top: 4px;\n position: absolute;\n z-index: 2;\n min-width: 232px;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);\n padding: 8px 0px;\n\n"]);
1149
1179
 
1150
1180
  _templateObject4$8 = function _templateObject4() {
1151
1181
  return data;
@@ -1175,7 +1205,7 @@ function _templateObject2$9() {
1175
1205
  }
1176
1206
 
1177
1207
  function _templateObject$9() {
1178
- var data = _taggedTemplateLiteral(["\n .multi-select__control {\n display: none;\n }\n .multi-select__option {\n font-size: 14px;\n }\n .multi-select__option--is-focused {\n background-color: ", ";\n }\n .multi-select__option--is-selected {\n background-color: ", ";\n color: #1d1d1d;\n }\n .multi-select__option--is-selected:active {\n background-color: ", ";\n }\n"]);
1208
+ var data = _taggedTemplateLiteral(["\n .multi-select__control {\n display: none;\n }\n .multi-select__option {\n font-size: 14px;\n padding: 8px 16px;\n }\n .multi-select__option--is-focused {\n background-color: ", ";\n }\n .multi-select__option--is-selected {\n background-color: ", ";\n color: #1d1d1d;\n }\n .multi-select__option--is-selected:active {\n background-color: ", ";\n }\n"]);
1179
1209
 
1180
1210
  _templateObject$9 = function _templateObject() {
1181
1211
  return data;
@@ -1191,10 +1221,14 @@ var SearchContainer = styled.div(_templateObject5$6());
1191
1221
  var StyledChevronIcon = styled.i(_templateObject6$5(), ChevronImage, function (props) {
1192
1222
  return props.isOpen && css(_templateObject7$5());
1193
1223
  });
1194
- var StyledDropdownMainButton = styled.button(_templateObject8$5(), WhiteColor, DefaultColorButton, DefaultButtonText, PrimaryBlueColor, FocusBackgroundColor, PrimaryBlueColor, DisabledTextareaBg, FocusDisableBorderColor, DisabledButtonFontColor, StyledChevronIcon, DisabledChevron);
1195
- var StyledDDMainContainer = styled.div(_templateObject9$5());
1196
- var StyledDDLabelContainer = styled.label(_templateObject10$4(), LabelColor);
1197
- var StyledDDSearchBox = styled.input(_templateObject11$2(), AvatarBgColor, SearchIcon);
1224
+ var StyledDropdownMainButton = styled.button(_templateObject8$5(), WhiteColor, DefaultColorButton, DefaultButtonText, function (props) {
1225
+ return props.isSelected && css(_templateObject9$5());
1226
+ }, PrimaryBlueColor, FocusBackgroundColor, PrimaryBlueColor, DisabledTextareaBg, FocusDisableBorderColor, DisabledButtonFontColor, StyledChevronIcon, DisabledChevron);
1227
+ var StyledDDMainContainer = styled.div(_templateObject10$4());
1228
+ var StyledDDLabelContainer = styled.label(_templateObject11$2(), LabelColor);
1229
+ var StyledDDSearchBox = styled.input(_templateObject12$2(), AvatarBgColor, SearchIcon);
1230
+ var StyledButtonURLClear = styled.button(_templateObject13$2(), LabelColor, NotificationClose);
1231
+ var StyledSelectAllContainer = styled.div(_templateObject14$1(), FocusBackgroundColor);
1198
1232
 
1199
1233
  var Dropdown = function Dropdown(_ref) {
1200
1234
  var children = _ref.children,
@@ -1257,12 +1291,13 @@ var Select = function Select(_ref2) {
1257
1291
  if (event.target.checked) {
1258
1292
  setIsSelectAll(true); //currentOptions without selectedOptions
1259
1293
 
1260
- var restcurrentOptions = currentOptions.filter(function (option) {
1294
+ var restCurrentOptions = currentOptions.filter(function (option) {
1261
1295
  return !selectedOptions.find(function (selectedOption) {
1262
1296
  return selectedOption.label === option.label && option.value === selectedOption.value;
1263
1297
  });
1264
1298
  });
1265
- setSelectedOptions([].concat(_toConsumableArray(selectedOptions), _toConsumableArray(restcurrentOptions)));
1299
+ setSelectedOptions([].concat(_toConsumableArray(selectedOptions), _toConsumableArray(restCurrentOptions)));
1300
+ setIsEditFlag(true);
1266
1301
  } else {
1267
1302
  setIsEditFlag(false);
1268
1303
  setIsSelectAll(false);
@@ -1327,7 +1362,8 @@ var Select = function Select(_ref2) {
1327
1362
  return setIsOpen(function (prev) {
1328
1363
  return !prev;
1329
1364
  });
1330
- }
1365
+ },
1366
+ isSelected: Object.entries(selectedOptions).length > 0
1331
1367
  }, getPlaceholder(), /*#__PURE__*/React__default.createElement(StyledChevronIcon, {
1332
1368
  isOpen: isOpen
1333
1369
  }))
@@ -1386,23 +1422,22 @@ var Filters = /*#__PURE__*/forwardRef(function (_ref3, ref) {
1386
1422
  placeholder: "Search",
1387
1423
  ref: ref,
1388
1424
  onChange: onSearch
1389
- }), isMulti && isWithSelectAll && /*#__PURE__*/React__default.createElement(SearchContainer, null, /*#__PURE__*/React__default.createElement(Checkbox, {
1425
+ }), isMulti && isWithSelectAll && /*#__PURE__*/React__default.createElement(SearchContainer, null, !isSelectAll && selectedOptions.length > 0 ? /*#__PURE__*/React__default.createElement(StyledButtonURLClear, {
1426
+ variant: "url",
1427
+ onClick: onClearAll
1428
+ }, "Clear Selection") : null, /*#__PURE__*/React__default.createElement(StyledSelectAllContainer, null, /*#__PURE__*/React__default.createElement(Checkbox, {
1390
1429
  name: "select-all",
1391
1430
  id: "select-all",
1392
1431
  label: isSelectAll ? "Deselect All" : "Select All",
1393
1432
  onChange: onSelectAll,
1394
1433
  checked: isSelectAll
1395
- }), !isSelectAll && selectedOptions.length > 0 ? /*#__PURE__*/React__default.createElement(Button, {
1396
- variant: "url",
1397
- label: "Clear All",
1398
- onClick: onClearAll
1399
- }) : null));
1434
+ }))));
1400
1435
  });
1401
1436
 
1402
- function _templateObject12$2() {
1437
+ function _templateObject12$3() {
1403
1438
  var data = _taggedTemplateLiteral(["\n display: none;\n "]);
1404
1439
 
1405
- _templateObject12$2 = function _templateObject12() {
1440
+ _templateObject12$3 = function _templateObject12() {
1406
1441
  return data;
1407
1442
  };
1408
1443
 
@@ -1537,7 +1572,7 @@ var StyledAccordionChevron = styled.i(_templateObject8$6(), ChevronImage, functi
1537
1572
  });
1538
1573
  var StyledAccordionHeading = styled.div(_templateObject10$5());
1539
1574
  var StyledAccordionBodyContainer = styled.div(_templateObject11$3(), function (props) {
1540
- return !props.isOpen && css(_templateObject12$2());
1575
+ return !props.isOpen && css(_templateObject12$3());
1541
1576
  });
1542
1577
 
1543
1578
  var Accordion = function Accordion(_ref) {
package/dist/index.js CHANGED
@@ -752,7 +752,7 @@
752
752
  };
753
753
 
754
754
  function _templateObject5$3() {
755
- var data = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n position: relative;\n &:hover ", " {\n display: block;\n \n }\n \n"]);
755
+ var data = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n position: relative;\n\n &:hover ", " {\n display: block;\n \n }\n \n"]);
756
756
 
757
757
  _templateObject5$3 = function _templateObject5() {
758
758
  return data;
@@ -762,7 +762,7 @@
762
762
  }
763
763
 
764
764
  function _templateObject4$3() {
765
- var data = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n background: #e5edf7;\n position: absolute;\n left: 4px;\n border-radius: 50%;\n /* top: -1px; */\n display: none;\n"]);
765
+ var data = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n background: #e5edf7;\n position: absolute;\n left: -4px;\n border-radius: 50%;\n /* top: -1px; */\n display: none;\n"]);
766
766
 
767
767
  _templateObject4$3 = function _templateObject4() {
768
768
  return data;
@@ -792,7 +792,7 @@
792
792
  }
793
793
 
794
794
  function _templateObject$4() {
795
- var data = _taggedTemplateLiteral(["\n font-size: 14px;\n color: ", ";\n line-height: 21px;\n margin-left: 8px;\n position: relative;\n"]);
795
+ var data = _taggedTemplateLiteral(["\n font-size: 14px;\n color: ", ";\n line-height: 21px;\n position: relative;\n"]);
796
796
 
797
797
  _templateObject$4 = function _templateObject() {
798
798
  return data;
@@ -1250,9 +1250,39 @@
1250
1250
 
1251
1251
  var _toConsumableArray = unwrapExports(toConsumableArray);
1252
1252
 
1253
- function _templateObject11$2() {
1253
+ function _templateObject14$1() {
1254
+ var data = _taggedTemplateLiteral(["\n height: 37px;\n padding: 8px 16px;\n box-sizing: border-box;\n &:hover{\n background:", ";\n }\n"]);
1255
+
1256
+ _templateObject14$1 = function _templateObject14() {
1257
+ return data;
1258
+ };
1259
+
1260
+ return data;
1261
+ }
1262
+
1263
+ function _templateObject13$2() {
1264
+ var data = _taggedTemplateLiteral(["\n background-color: transparent;\n border: none;\n padding: 4px 0;\n height: 26px;\n box-sizing: border-box;\n padding-left: 34px;\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n cursor: pointer;\n background-image: url(", ");\n background-repeat: no-repeat;\n background-size: 10px;\n background-position: 18px center;\n"]);
1265
+
1266
+ _templateObject13$2 = function _templateObject13() {
1267
+ return data;
1268
+ };
1269
+
1270
+ return data;
1271
+ }
1272
+
1273
+ function _templateObject12$2() {
1254
1274
  var data = _taggedTemplateLiteral(["\n border: none;\n height: 37px;\n width: 100%;\n box-sizing: border-box;\n padding: 0px 16px;\n font-size: 14px;\n border-bottom: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n background: url(", ") no-repeat;\n background-size: 12px;\n background-position: 16px center;\n padding-left: 34px;\n"]);
1255
1275
 
1276
+ _templateObject12$2 = function _templateObject12() {
1277
+ return data;
1278
+ };
1279
+
1280
+ return data;
1281
+ }
1282
+
1283
+ function _templateObject11$2() {
1284
+ var data = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n"]);
1285
+
1256
1286
  _templateObject11$2 = function _templateObject11() {
1257
1287
  return data;
1258
1288
  };
@@ -1261,7 +1291,7 @@
1261
1291
  }
1262
1292
 
1263
1293
  function _templateObject10$4() {
1264
- var data = _taggedTemplateLiteral(["\n color: ", ";\n font-size: 12px;\n line-height: 18px;\n"]);
1294
+ var data = _taggedTemplateLiteral([""]);
1265
1295
 
1266
1296
  _templateObject10$4 = function _templateObject10() {
1267
1297
  return data;
@@ -1271,7 +1301,7 @@
1271
1301
  }
1272
1302
 
1273
1303
  function _templateObject9$5() {
1274
- var data = _taggedTemplateLiteral([""]);
1304
+ var data = _taggedTemplateLiteral(["\n color: #1d1d1d;\n "]);
1275
1305
 
1276
1306
  _templateObject9$5 = function _templateObject9() {
1277
1307
  return data;
@@ -1281,7 +1311,7 @@
1281
1311
  }
1282
1312
 
1283
1313
  function _templateObject8$5() {
1284
- var data = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n font-size: 14px;\n box-sizing: border-box;\n padding: 8px 16px;\n height: 37px;\n border-radius: 4px;\n color: ", ";\n min-width: 180px;\n text-align: left;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n\n &:hover {\n border: 1px solid ", ";\n }\n &:focus {\n box-shadow: 0 0 0 3px ", ";\n border: 1px solid ", ";\n }\n\n &:disabled {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: default;\n ", " {\n background: url(", ") no-repeat;\n background-position: center;\n background-size: 10px;\n }\n }\n"]);
1314
+ var data = _taggedTemplateLiteral(["\n background: ", ";\n border: 1px solid ", ";\n font-size: 14px;\n box-sizing: border-box;\n padding: 8px 16px;\n height: 37px;\n border-radius: 4px;\n color: ", ";\n min-width: 180px;\n text-align: left; \n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n min-width: 232px;\n ", "\n &:hover {\n border: 1px solid ", ";\n }\n &:focus {\n box-shadow: 0 0 0 3px ", ";\n border: 1px solid ", ";\n }\n\n &:disabled {\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n cursor: default;\n ", " {\n background: url(", ") no-repeat;\n background-position: center;\n background-size: 10px;\n }\n }\n"]);
1285
1315
 
1286
1316
  _templateObject8$5 = function _templateObject8() {
1287
1317
  return data;
@@ -1311,7 +1341,7 @@
1311
1341
  }
1312
1342
 
1313
1343
  function _templateObject5$6() {
1314
- var data = _taggedTemplateLiteral(["\n display: flex;\n justify-content: space-between;\n padding: 10px;\n"]);
1344
+ var data = _taggedTemplateLiteral(["\n\n"]);
1315
1345
 
1316
1346
  _templateObject5$6 = function _templateObject5() {
1317
1347
  return data;
@@ -1321,7 +1351,7 @@
1321
1351
  }
1322
1352
 
1323
1353
  function _templateObject4$8() {
1324
- var data = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: 4px;\n margin-top: 4px;\n position: absolute;\n z-index: 2;\n min-width: 200px;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);\n padding: 8px 0px;\n"]);
1354
+ var data = _taggedTemplateLiteral(["\n background: ", ";\n border-radius: 4px;\n margin-top: 4px;\n position: absolute;\n z-index: 2;\n min-width: 232px;\n box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.25);\n padding: 8px 0px;\n\n"]);
1325
1355
 
1326
1356
  _templateObject4$8 = function _templateObject4() {
1327
1357
  return data;
@@ -1351,7 +1381,7 @@
1351
1381
  }
1352
1382
 
1353
1383
  function _templateObject$9() {
1354
- var data = _taggedTemplateLiteral(["\n .multi-select__control {\n display: none;\n }\n .multi-select__option {\n font-size: 14px;\n }\n .multi-select__option--is-focused {\n background-color: ", ";\n }\n .multi-select__option--is-selected {\n background-color: ", ";\n color: #1d1d1d;\n }\n .multi-select__option--is-selected:active {\n background-color: ", ";\n }\n"]);
1384
+ var data = _taggedTemplateLiteral(["\n .multi-select__control {\n display: none;\n }\n .multi-select__option {\n font-size: 14px;\n padding: 8px 16px;\n }\n .multi-select__option--is-focused {\n background-color: ", ";\n }\n .multi-select__option--is-selected {\n background-color: ", ";\n color: #1d1d1d;\n }\n .multi-select__option--is-selected:active {\n background-color: ", ";\n }\n"]);
1355
1385
 
1356
1386
  _templateObject$9 = function _templateObject() {
1357
1387
  return data;
@@ -1367,10 +1397,14 @@
1367
1397
  var StyledChevronIcon = styled__default.i(_templateObject6$5(), ChevronImage, function (props) {
1368
1398
  return props.isOpen && styled.css(_templateObject7$5());
1369
1399
  });
1370
- var StyledDropdownMainButton = styled__default.button(_templateObject8$5(), WhiteColor, DefaultColorButton, DefaultButtonText, PrimaryBlueColor, FocusBackgroundColor, PrimaryBlueColor, DisabledTextareaBg, FocusDisableBorderColor, DisabledButtonFontColor, StyledChevronIcon, DisabledChevron);
1371
- var StyledDDMainContainer = styled__default.div(_templateObject9$5());
1372
- var StyledDDLabelContainer = styled__default.label(_templateObject10$4(), LabelColor);
1373
- var StyledDDSearchBox = styled__default.input(_templateObject11$2(), AvatarBgColor, SearchIcon);
1400
+ var StyledDropdownMainButton = styled__default.button(_templateObject8$5(), WhiteColor, DefaultColorButton, DefaultButtonText, function (props) {
1401
+ return props.isSelected && styled.css(_templateObject9$5());
1402
+ }, PrimaryBlueColor, FocusBackgroundColor, PrimaryBlueColor, DisabledTextareaBg, FocusDisableBorderColor, DisabledButtonFontColor, StyledChevronIcon, DisabledChevron);
1403
+ var StyledDDMainContainer = styled__default.div(_templateObject10$4());
1404
+ var StyledDDLabelContainer = styled__default.label(_templateObject11$2(), LabelColor);
1405
+ var StyledDDSearchBox = styled__default.input(_templateObject12$2(), AvatarBgColor, SearchIcon);
1406
+ var StyledButtonURLClear = styled__default.button(_templateObject13$2(), LabelColor, NotificationClose);
1407
+ var StyledSelectAllContainer = styled__default.div(_templateObject14$1(), FocusBackgroundColor);
1374
1408
 
1375
1409
  var Dropdown = function Dropdown(_ref) {
1376
1410
  var children = _ref.children,
@@ -1433,12 +1467,13 @@
1433
1467
  if (event.target.checked) {
1434
1468
  setIsSelectAll(true); //currentOptions without selectedOptions
1435
1469
 
1436
- var restcurrentOptions = currentOptions.filter(function (option) {
1470
+ var restCurrentOptions = currentOptions.filter(function (option) {
1437
1471
  return !selectedOptions.find(function (selectedOption) {
1438
1472
  return selectedOption.label === option.label && option.value === selectedOption.value;
1439
1473
  });
1440
1474
  });
1441
- setSelectedOptions([].concat(_toConsumableArray(selectedOptions), _toConsumableArray(restcurrentOptions)));
1475
+ setSelectedOptions([].concat(_toConsumableArray(selectedOptions), _toConsumableArray(restCurrentOptions)));
1476
+ setIsEditFlag(true);
1442
1477
  } else {
1443
1478
  setIsEditFlag(false);
1444
1479
  setIsSelectAll(false);
@@ -1503,7 +1538,8 @@
1503
1538
  return setIsOpen(function (prev) {
1504
1539
  return !prev;
1505
1540
  });
1506
- }
1541
+ },
1542
+ isSelected: Object.entries(selectedOptions).length > 0
1507
1543
  }, getPlaceholder(), /*#__PURE__*/React__default.createElement(StyledChevronIcon, {
1508
1544
  isOpen: isOpen
1509
1545
  }))
@@ -1562,17 +1598,16 @@
1562
1598
  placeholder: "Search",
1563
1599
  ref: ref,
1564
1600
  onChange: onSearch
1565
- }), isMulti && isWithSelectAll && /*#__PURE__*/React__default.createElement(SearchContainer, null, /*#__PURE__*/React__default.createElement(Checkbox, {
1601
+ }), isMulti && isWithSelectAll && /*#__PURE__*/React__default.createElement(SearchContainer, null, !isSelectAll && selectedOptions.length > 0 ? /*#__PURE__*/React__default.createElement(StyledButtonURLClear, {
1602
+ variant: "url",
1603
+ onClick: onClearAll
1604
+ }, "Clear Selection") : null, /*#__PURE__*/React__default.createElement(StyledSelectAllContainer, null, /*#__PURE__*/React__default.createElement(Checkbox, {
1566
1605
  name: "select-all",
1567
1606
  id: "select-all",
1568
1607
  label: isSelectAll ? "Deselect All" : "Select All",
1569
1608
  onChange: onSelectAll,
1570
1609
  checked: isSelectAll
1571
- }), !isSelectAll && selectedOptions.length > 0 ? /*#__PURE__*/React__default.createElement(Button, {
1572
- variant: "url",
1573
- label: "Clear All",
1574
- onClick: onClearAll
1575
- }) : null));
1610
+ }))));
1576
1611
  });
1577
1612
 
1578
1613
  var arrayWithHoles = createCommonjsModule(function (module) {
@@ -1641,10 +1676,10 @@
1641
1676
 
1642
1677
  var _slicedToArray = unwrapExports(slicedToArray);
1643
1678
 
1644
- function _templateObject12$2() {
1679
+ function _templateObject12$3() {
1645
1680
  var data = _taggedTemplateLiteral(["\n display: none;\n "]);
1646
1681
 
1647
- _templateObject12$2 = function _templateObject12() {
1682
+ _templateObject12$3 = function _templateObject12() {
1648
1683
  return data;
1649
1684
  };
1650
1685
 
@@ -1779,7 +1814,7 @@
1779
1814
  });
1780
1815
  var StyledAccordionHeading = styled__default.div(_templateObject10$5());
1781
1816
  var StyledAccordionBodyContainer = styled__default.div(_templateObject11$3(), function (props) {
1782
- return !props.isOpen && styled.css(_templateObject12$2());
1817
+ return !props.isOpen && styled.css(_templateObject12$3());
1783
1818
  });
1784
1819
 
1785
1820
  var Accordion = function Accordion(_ref) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "impact-ui",
3
- "version": "0.1.21",
3
+ "version": "0.1.23",
4
4
  "description": "Impact Analytics UI library",
5
5
  "main": "dist/index.cjs.js",
6
6
  "module": "dist/index.esm.js",