colibri-ui 0.8.10 → 0.8.12

package/MultiSelect/index.js

@@ -40,6 +40,7 @@ var MultiSelect = function MultiSelect(_a) {
     required = _a.required,
     label = _a.label,
     hint = _a.hint,
+    style = _a.style,
     hasError = _a.hasError,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
@@ -52,12 +53,9 @@ var MultiSelect = function MultiSelect(_a) {
   var _e = React.useState(false),
     isOpen = _e[0],
     setIsOpen = _e[1];
-  var _f = React.useState(value || []),
-    selected = _f[0],
-    setSelected = _f[1];
   var internalSelectedKeys = React.useMemo(function () {
-    return selected.map(index.toKey);
-  }, [selected]);
+    return value.map(index.toKey);
+  }, [value]);
   var preparedGroups = React.useMemo(function () {
     return groups.map(function (group) {
       return tslib.__assign(tslib.__assign({}, group), {
@@ -73,17 +71,14 @@ var MultiSelect = function MultiSelect(_a) {
     });
   }, [groups, internalSelectedKeys]);
   var handleChange = React.useCallback(function (key) {
-    setSelected(function (prev) {
-      var exists = prev.some(function (v) {
-        return index.toKey(v) === key;
-      });
-      var item = index.fromKey(key);
-      var newValue = exists ? prev.filter(function (v) {
-        return index.toKey(v) !== key;
-      }) : tslib.__spreadArray(tslib.__spreadArray([], prev, true), [item], false);
-      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-      return newValue;
+    var exists = value.some(function (v) {
+      return index.toKey(v) === key;
     });
+    var item = index.fromKey(key);
+    var newValue = exists ? value.filter(function (v) {
+      return index.toKey(v) !== key;
+    }) : tslib.__spreadArray(tslib.__spreadArray([], value, true), [item], false);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
   }, [onChange]);
   var preparedLabel = React.useMemo(function () {
     return preparedGroups.flatMap(function (_a) {
@@ -133,6 +128,7 @@ var MultiSelect = function MultiSelect(_a) {
   }, /*#__PURE__*/React__default.default.createElement(index$4.default, {
     hasError: hasError,
     size: size,
+    style: style,
     className: clx(styles__default.default.root, {
       root_auto: preparedLabel.length
     }),

package/MultiSelect/index.props.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
 export type GroupOptions = {
     value: string;
@@ -31,6 +32,7 @@ export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     placeholder?: string;
     name?: string;
     type?: Type;
+    style?: CSSProperties;
     value?: SelectedItem[];
     onChange?: (value: SelectedItem[]) => void;
 }

package/esm/MultiSelect/index.js

@@ -30,6 +30,7 @@ var MultiSelect = function MultiSelect(_a) {
     required = _a.required,
     label = _a.label,
     hint = _a.hint,
+    style = _a.style,
     hasError = _a.hasError,
     _c = _a.size,
     size = _c === void 0 ? "m" : _c,
@@ -42,12 +43,9 @@ var MultiSelect = function MultiSelect(_a) {
   var _e = useState(false),
     isOpen = _e[0],
     setIsOpen = _e[1];
-  var _f = useState(value || []),
-    selected = _f[0],
-    setSelected = _f[1];
   var internalSelectedKeys = useMemo(function () {
-    return selected.map(toKey);
-  }, [selected]);
+    return value.map(toKey);
+  }, [value]);
   var preparedGroups = useMemo(function () {
     return groups.map(function (group) {
       return __assign(__assign({}, group), {
@@ -63,17 +61,14 @@ var MultiSelect = function MultiSelect(_a) {
     });
   }, [groups, internalSelectedKeys]);
   var handleChange = useCallback(function (key) {
-    setSelected(function (prev) {
-      var exists = prev.some(function (v) {
-        return toKey(v) === key;
-      });
-      var item = fromKey(key);
-      var newValue = exists ? prev.filter(function (v) {
-        return toKey(v) !== key;
-      }) : __spreadArray(__spreadArray([], prev, true), [item], false);
-      onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-      return newValue;
+    var exists = value.some(function (v) {
+      return toKey(v) === key;
     });
+    var item = fromKey(key);
+    var newValue = exists ? value.filter(function (v) {
+      return toKey(v) !== key;
+    }) : __spreadArray(__spreadArray([], value, true), [item], false);
+    onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
   }, [onChange]);
   var preparedLabel = useMemo(function () {
     return preparedGroups.flatMap(function (_a) {
@@ -123,6 +118,7 @@ var MultiSelect = function MultiSelect(_a) {
   }, /*#__PURE__*/React__default.createElement(InputRoot, {
     hasError: hasError,
     size: size,
+    style: style,
     className: clx(styles.root, {
       root_auto: preparedLabel.length
     }),

package/esm/MultiSelect/index.props.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties } from "react";
 import type { FormFieldProps } from "../base/FormField/index.props";
 export type GroupOptions = {
     value: string;
@@ -31,6 +32,7 @@ export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     placeholder?: string;
     name?: string;
     type?: Type;
+    style?: CSSProperties;
     value?: SelectedItem[];
     onChange?: (value: SelectedItem[]) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.10",
+  "version": "0.8.12",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},