@hexure/ui 1.5.1 → 1.6.0

package/dist/esm/index.js

@@ -2227,8 +2227,8 @@ var BulkActionBar = function (_a) {
 };
 var templateObject_1$j, templateObject_2$h, templateObject_3$e, templateObject_4$8, templateObject_5$6, templateObject_6$4, templateObject_7$2, templateObject_8$1;
 
-var Wrapper$c = styled.label(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  line-height: 1.6em;\n  box-sizing: border-box;\n"], ["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: center;\n  font-size: ", ";\n  line-height: 1.6em;\n  box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
-var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  font-size: 20px;\n  margin: 0px 0px 2px 0px;\n  line-height: 1.1em;\n  box-sizing: border-box;\n"], ["\n  font-size: 20px;\n  margin: 0px 0px 2px 0px;\n  line-height: 1.1em;\n  box-sizing: border-box;\n"])));
+var Wrapper$c = styled.label(templateObject_1$i || (templateObject_1$i = __makeTemplateObject(["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: flex-start;\n  font-size: ", ";\n  line-height: 1.6em;\n  box-sizing: border-box;\n"], ["\n  padding: 4px 0;\n  cursor: ", ";\n  display: flex;\n  align-items: flex-start;\n  font-size: ", ";\n  line-height: 1.6em;\n  box-sizing: border-box;\n"])), function (props) { return (props.$disabled ? 'default' : 'pointer'); }, FontSizes.DEFAULT);
+var Input$2 = styled.input(templateObject_2$g || (templateObject_2$g = __makeTemplateObject(["\n  font-size: 20px;\n  margin: 5px 0px 0px 0px;\n  line-height: 1.1em;\n  box-sizing: border-box;\n"], ["\n  font-size: 20px;\n  margin: 5px 0px 0px 0px;\n  line-height: 1.1em;\n  box-sizing: border-box;\n"])));
 var Label$3 = styled.span(templateObject_3$d || (templateObject_3$d = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 1.6em;\n  color: ", ";\n  margin-left: 6px;\n  box-sizing: border-box;\n"], ["\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 1.6em;\n  color: ", ";\n  margin-left: 6px;\n  box-sizing: border-box;\n"])), FontStyles.DEFAULT, FontSizes.DEFAULT, Colors.BLACK.Hex);
 var Checkbox = function (_a) {
     var children = _a.children, disabled = _a.disabled, checked = _a.checked, onChange = _a.onChange, accessibleProps = __rest(_a, ["children", "disabled", "checked", "onChange"]);
@@ -2241,22 +2241,31 @@ var templateObject_1$i, templateObject_2$g, templateObject_3$d;
 var SelectAll = styled.div(templateObject_1$h || (templateObject_1$h = __makeTemplateObject(["\n  padding: 8px 12px;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n"], ["\n  padding: 8px 12px;\n  border-bottom: 1px solid ", ";\n  box-sizing: border-box;\n"])), Colors.LIGHT_GRAY.Hex);
 var Options$1 = styled.div(templateObject_2$f || (templateObject_2$f = __makeTemplateObject(["\n  padding: 12px;\n  box-sizing: border-box;\n"], ["\n  padding: 12px;\n  box-sizing: border-box;\n"])));
 var Checklist = function (_a) {
-    var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, selected = _a.selected, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
+    var disabled = _a.disabled, onChange = _a.onChange, options = _a.options, _b = _a.selected, selected = _b === void 0 ? [] : _b, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["disabled", "onChange", "options", "selected", "showSelectAll"]);
     var values = options.map(function (option) { return option.value; });
+    var selected_options = options.filter(function (o) { return selected.includes(o.value); });
     var handleToggleAll = function () {
-        if (selected.length === options.length) {
-            onChange([]);
+        if (selected_options.length === options.length) {
+            triggerChange([]);
         }
         else {
-            onChange(options.map(function (option) { return option.value; }));
+            triggerChange(options.map(function (option) { return option.value; }));
         }
     };
     var handleChange = function (option) {
-        var updated_selected = selected.filter(function (value) { return value !== option.value; });
+        var new_selected = selected_options.filter(function (o) { return o.value !== option.value; }).map(function (o) { return o.value; });
         if (!selected.includes(option.value)) {
-            updated_selected.push(option.value);
+            new_selected.push(option.value);
         }
-        onChange(updated_selected);
+        // Mimic input event so it's easier to share onChange methods
+        triggerChange(new_selected);
+    };
+    var triggerChange = function (value) {
+        onChange({
+            target: {
+                value: value,
+            },
+        });
     };
     return (React.createElement(React.Fragment, null,
         showSelectAll && values.length ? (React.createElement(SelectAll, null,
@@ -3032,20 +3041,20 @@ var Trigger = styled.div(templateObject_2$6 || (templateObject_2$6 = __makeTempl
     }
 }, function (props) { return (props.$readOnly ? '#f5f5f5' : '#ffffff'); });
 var Value = styled.div(templateObject_3$5 || (templateObject_3$5 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 2.9em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-weight: 400;\n  line-height: 2.9em;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n"])), Colors.BLACK.Hex, FontStyles.DEFAULT, FontSizes.DEFAULT);
-var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  background: #fff;\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 2;\n"], ["\n  background: #fff;\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 2;\n"])), Colors.PRIMARY.Hex);
-var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 1;\n"], ["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 1;\n"])));
+var Options = styled.div(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  background: #fff;\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 10;\n"], ["\n  background: #fff;\n  border-color: ", ";\n  border-radius: 0px 0px 4px 4px;\n  border-style: solid;\n  border-top: none;\n  border-width: 1px;\n  left: 0;\n  position: absolute;\n  right: 0;\n  z-index: 10;\n"])), Colors.PRIMARY.Hex);
+var Scrim = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 9;\n"], ["\n  bottom: 0;\n  left: 0;\n  position: fixed;\n  right: 0;\n  top: 0;\n  z-index: 9;\n"])));
 var MultiSelect = function (_a) {
-    var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c, selected = _a.selected, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll"]);
-    var _d = useState(false), showOptions = _d[0], setShowOptions = _d[1];
+    var readOnly = _a.readOnly, _b = _a.displayCount, displayCount = _b === void 0 ? 3 : _b, invalid = _a.invalid, onChange = _a.onChange, _c = _a.options, options = _c === void 0 ? [] : _c, _d = _a.selected, selected = _d === void 0 ? [] : _d, showSelectAll = _a.showSelectAll, accessibleProps = __rest(_a, ["readOnly", "displayCount", "invalid", "onChange", "options", "selected", "showSelectAll"]);
+    var _e = useState(false), showOptions = _e[0], setShowOptions = _e[1];
     var selected_options = options.filter(function (o) { return selected.includes(o.value); });
     return (React.createElement(Wrapper$5, null,
         React.createElement(Trigger, __assign({ "$invalid": invalid, "$readOnly": readOnly, "$showOptions": showOptions, onClick: readOnly ? undefined : setShowOptions.bind(null, !showOptions) }, accessibleProps),
             React.createElement(Value, null, selected.length > 0 && selected.length <= displayCount
                 ? selected_options.map(function (o) { return o.label || o.value; }).join(', ')
-                : "".concat(selected.length, " Selected")),
-            React.createElement(Icon, { color: Colors.BLACK.Hex, path: mdiChevronDown, size: '22px' })),
+                : "".concat(selected_options.length, " Selected")),
+            React.createElement(Icon, { color: Colors.BLACK.Hex, path: showOptions ? mdiChevronUp : mdiChevronDown, size: '22px' })),
         showOptions ? (React.createElement(Options, null,
-            React.createElement(Checklist, { disabled: readOnly, onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
+            React.createElement(Checklist, { onChange: onChange, options: options, selected: selected, showSelectAll: showSelectAll }))) : null,
         showOptions ? React.createElement(Scrim, { onClick: setShowOptions.bind(null, !showOptions) }) : null));
 };
 var templateObject_1$7, templateObject_2$6, templateObject_3$5, templateObject_4$2, templateObject_5$1;