colibri-ui 0.8.9 → 0.8.11

package/MultiSelect/components/MenuOverlay/index.js

@@ -92,7 +92,10 @@ var MenuOverlay = function MenuOverlay(_a) {
         option: option,
         key: "item-".concat(optionIndex),
         onClick: function onClick() {
-          return onChange(index$4.createGroupOptionString(group.value, option.value));
+          return onChange(index$4.toKey({
+            group: group.value,
+            option: option.value
+          }));
         }
       });
     })));

package/MultiSelect/index.js

@@ -23,21 +23,6 @@ var classNames__default = /*#__PURE__*/_interopDefault(classNames);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
 var clx = classNames__default.default.bind(styles__default.default);
-var sortItems = function sortItems(items) {
-  return tslib.__spreadArray([], items, true).sort(function (a, b) {
-    var parseKey = function parseKey(key) {
-      var _a;
-      return ((_a = key.match(/group-(\d+)-option-(\d+)/)) === null || _a === void 0 ? void 0 : _a.slice(1).map(Number)) || [];
-    };
-    var _a = parseKey(a),
-      groupA = _a[0],
-      optionA = _a[1];
-    var _b = parseKey(b),
-      groupB = _b[0],
-      optionB = _b[1];
-    return groupA - groupB || optionA - optionB;
-  });
-};
 var getValue = function getValue(options) {
   return options.map(function (_a) {
     var label = _a.label;
@@ -60,39 +45,47 @@ var MultiSelect = function MultiSelect(_a) {
     size = _c === void 0 ? "m" : _c,
     placeholder = _a.placeholder,
     name = _a.name,
+    _d = _a.value,
+    value = _d === void 0 ? [] : _d,
     type = _a.type,
     onChange = _a.onChange;
-  var _d = React.useState(false),
-    isOpen = _d[0],
-    setIsOpen = _d[1];
-  var _e = React.useState([]),
-    value = _e[0],
-    setValue = _e[1];
+  var _e = React.useState(false),
+    isOpen = _e[0],
+    setIsOpen = _e[1];
+  var internalSelectedKeys = React.useMemo(function () {
+    return value.map(index.toKey);
+  }, [value]);
   var preparedGroups = React.useMemo(function () {
     return groups.map(function (group) {
       return tslib.__assign(tslib.__assign({}, group), {
         options: group.options.map(function (option) {
           return tslib.__assign(tslib.__assign({}, option), {
-            selected: value.includes(index.createGroupOptionString(group.value, option.value))
+            selected: internalSelectedKeys.includes(index.toKey({
+              group: group.value,
+              option: option.value
+            }))
           });
         })
       });
     });
-  }, [value, groups]);
+  }, [groups, internalSelectedKeys]);
   var handleChange = React.useCallback(function (key) {
-    setValue(function (prev) {
-      var newValue = prev.includes(key) ? prev.filter(function (v) {
-        return v !== key;
-      }) : sortItems(tslib.__spreadArray(tslib.__spreadArray([], prev, true), [key], 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) {
       var groupVal = _a.value,
         options = _a.options;
-      return options.filter(function (_a) {
+      return options
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      .filter(function (_a) {
         var selected = _a.selected;
         return selected;
       }).map(
@@ -102,7 +95,10 @@ var MultiSelect = function MultiSelect(_a) {
           optVal = _a.value;
         return {
           label: label,
-          key: index.createGroupOptionString(groupVal, optVal)
+          key: index.toKey({
+            group: groupVal,
+            option: optVal
+          })
         };
       });
     });
@@ -162,7 +158,7 @@ var MultiSelect = function MultiSelect(_a) {
     type: "hidden",
     name: name,
     tabIndex: -1,
-    value: value.join(",") || ""
+    value: internalSelectedKeys.join(",") || ""
   }))));
 };
 

package/MultiSelect/index.props.d.ts

@@ -15,6 +15,10 @@ export type GroupProps = {
 };
 type Size = "s" | "m" | "l";
 type Type = "chip";
+export type SelectedItem = {
+    group: string;
+    option: string;
+};
 export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     groups: GroupProps[];
     className?: string;
@@ -27,6 +31,7 @@ export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     placeholder?: string;
     name?: string;
     type?: Type;
-    onChange?: (value: string[]) => void;
+    value?: SelectedItem[];
+    onChange?: (value: SelectedItem[]) => void;
 }
 export {};

package/MultiSelect/utils/index.d.ts

@@ -1 +1,3 @@
-export declare function createGroupOptionString(groupValue: string, optionValue: string): string;
+import type { SelectedItem } from "../index.props";
+export declare const toKey: ({ group, option }: SelectedItem) => string;
+export declare const fromKey: (key: string) => SelectedItem;

package/MultiSelect/utils/index.js

@@ -1,7 +1,19 @@
 'use strict';
 
-function createGroupOptionString(groupValue, optionValue) {
-  return "group-".concat(groupValue, "-option-").concat(optionValue);
-}
+var toKey = function toKey(_a) {
+  var group = _a.group,
+    option = _a.option;
+  return "group-".concat(group, "-option-").concat(option);
+};
+var fromKey = function fromKey(key) {
+  var _a = key.replace(/^group-/, "").split("-option-"),
+    group = _a[0],
+    option = _a[1];
+  return {
+    group: group,
+    option: option
+  };
+};
 
-exports.createGroupOptionString = createGroupOptionString;
+exports.fromKey = fromKey;
+exports.toKey = toKey;

package/esm/MultiSelect/components/MenuOverlay/index.js

@@ -4,7 +4,7 @@ import Menu from '../../../Menu/index.js';
 import SelectItem from '../MenuOverlayItem/index.js';
 import Typography from '../../../Typography/index.js';
 import Separator from '../../../Separator/index.js';
-import { createGroupOptionString } from '../../utils/index.js';
+import { toKey } from '../../utils/index.js';
 import styles from './index.module.css';
 
 var clx = classNames.bind(styles);
@@ -82,7 +82,10 @@ var MenuOverlay = function MenuOverlay(_a) {
         option: option,
         key: "item-".concat(optionIndex),
         onClick: function onClick() {
-          return onChange(createGroupOptionString(group.value, option.value));
+          return onChange(toKey({
+            group: group.value,
+            option: option.value
+          }));
         }
       });
     })));

package/esm/MultiSelect/index.js

@@ -1,4 +1,4 @@
-import { __spreadArray, __assign } from 'tslib';
+import { __assign, __spreadArray } from 'tslib';
 import React__default, { useState, useMemo, useCallback } from 'react';
 import classNames from 'classnames/bind';
 import Dropdown from '../Dropdown/index.js';
@@ -8,26 +8,11 @@ import '../Icons/index.js';
 import Chip from '../Chip/index.js';
 import styles from './index.module.css';
 import MenuOverlay from './components/MenuOverlay/index.js';
-import { createGroupOptionString } from './utils/index.js';
+import { toKey, fromKey } from './utils/index.js';
 import Chevron from '../Icons/Chevron.js';
 import CrossFill from '../Icons/CrossFill.js';
 
 var clx = classNames.bind(styles);
-var sortItems = function sortItems(items) {
-  return __spreadArray([], items, true).sort(function (a, b) {
-    var parseKey = function parseKey(key) {
-      var _a;
-      return ((_a = key.match(/group-(\d+)-option-(\d+)/)) === null || _a === void 0 ? void 0 : _a.slice(1).map(Number)) || [];
-    };
-    var _a = parseKey(a),
-      groupA = _a[0],
-      optionA = _a[1];
-    var _b = parseKey(b),
-      groupB = _b[0],
-      optionB = _b[1];
-    return groupA - groupB || optionA - optionB;
-  });
-};
 var getValue = function getValue(options) {
   return options.map(function (_a) {
     var label = _a.label;
@@ -50,39 +35,47 @@ var MultiSelect = function MultiSelect(_a) {
     size = _c === void 0 ? "m" : _c,
     placeholder = _a.placeholder,
     name = _a.name,
+    _d = _a.value,
+    value = _d === void 0 ? [] : _d,
     type = _a.type,
     onChange = _a.onChange;
-  var _d = useState(false),
-    isOpen = _d[0],
-    setIsOpen = _d[1];
-  var _e = useState([]),
-    value = _e[0],
-    setValue = _e[1];
+  var _e = useState(false),
+    isOpen = _e[0],
+    setIsOpen = _e[1];
+  var internalSelectedKeys = useMemo(function () {
+    return value.map(toKey);
+  }, [value]);
   var preparedGroups = useMemo(function () {
     return groups.map(function (group) {
       return __assign(__assign({}, group), {
         options: group.options.map(function (option) {
           return __assign(__assign({}, option), {
-            selected: value.includes(createGroupOptionString(group.value, option.value))
+            selected: internalSelectedKeys.includes(toKey({
+              group: group.value,
+              option: option.value
+            }))
           });
         })
       });
     });
-  }, [value, groups]);
+  }, [groups, internalSelectedKeys]);
   var handleChange = useCallback(function (key) {
-    setValue(function (prev) {
-      var newValue = prev.includes(key) ? prev.filter(function (v) {
-        return v !== key;
-      }) : sortItems(__spreadArray(__spreadArray([], prev, true), [key], 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) {
       var groupVal = _a.value,
         options = _a.options;
-      return options.filter(function (_a) {
+      return options
+      // eslint-disable-next-line @typescript-eslint/no-shadow
+      .filter(function (_a) {
         var selected = _a.selected;
         return selected;
       }).map(
@@ -92,7 +85,10 @@ var MultiSelect = function MultiSelect(_a) {
           optVal = _a.value;
         return {
           label: label,
-          key: createGroupOptionString(groupVal, optVal)
+          key: toKey({
+            group: groupVal,
+            option: optVal
+          })
         };
       });
     });
@@ -152,7 +148,7 @@ var MultiSelect = function MultiSelect(_a) {
     type: "hidden",
     name: name,
     tabIndex: -1,
-    value: value.join(",") || ""
+    value: internalSelectedKeys.join(",") || ""
   }))));
 };
 

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

@@ -15,6 +15,10 @@ export type GroupProps = {
 };
 type Size = "s" | "m" | "l";
 type Type = "chip";
+export type SelectedItem = {
+    group: string;
+    option: string;
+};
 export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     groups: GroupProps[];
     className?: string;
@@ -27,6 +31,7 @@ export interface MultiSelectProps extends Omit<FormFieldProps, "children"> {
     placeholder?: string;
     name?: string;
     type?: Type;
-    onChange?: (value: string[]) => void;
+    value?: SelectedItem[];
+    onChange?: (value: SelectedItem[]) => void;
 }
 export {};

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

@@ -1 +1,3 @@
-export declare function createGroupOptionString(groupValue: string, optionValue: string): string;
+import type { SelectedItem } from "../index.props";
+export declare const toKey: ({ group, option }: SelectedItem) => string;
+export declare const fromKey: (key: string) => SelectedItem;

package/esm/MultiSelect/utils/index.js

@@ -1,5 +1,16 @@
-function createGroupOptionString(groupValue, optionValue) {
-  return "group-".concat(groupValue, "-option-").concat(optionValue);
-}
+var toKey = function toKey(_a) {
+  var group = _a.group,
+    option = _a.option;
+  return "group-".concat(group, "-option-").concat(option);
+};
+var fromKey = function fromKey(key) {
+  var _a = key.replace(/^group-/, "").split("-option-"),
+    group = _a[0],
+    option = _a[1];
+  return {
+    group: group,
+    option: option
+  };
+};
 
-export { createGroupOptionString };
+export { fromKey, toKey };

package/package.json

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