colibri-ui 0.8.8 → 0.8.10

package/Avatar/index.js

@@ -36,10 +36,10 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     accountType = _c === void 0 ? index_props.AccountType.Organization : _c,
     onClick = props.onClick,
     initials = props.initials,
-    loader = props.loader,
+    loading = props.loading,
     ariaLabel = props.ariaLabel,
     ref = props.ref,
-    rest = tslib.__rest(props, ["src", "size", "className", "bordered", "alt", "accountType", "onClick", "initials", "loader", "ariaLabel", "ref"]);
+    rest = tslib.__rest(props, ["src", "size", "className", "bordered", "alt", "accountType", "onClick", "initials", "loading", "ariaLabel", "ref"]);
   if ((initials === null || initials === void 0 ? void 0 : initials.trim()) && initials.length <= 2) {
     return (
       /*#__PURE__*/
@@ -52,7 +52,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
         onClick: onClick,
         className: clx(styles__default.default.avatarInitials, {
           avatarBordered: !!bordered,
-          loader: !!loader
+          loading: !!loading
         }, SIZE_CLASSES[size], className)
       }, rest), /*#__PURE__*/React__default.default.createElement("span", {
         className: clx(styles__default.default.initialsText, TEXT_CLASSES[size])
@@ -65,7 +65,7 @@ var Avatar = /*#__PURE__*/React.memo(function (props) {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,
     React__default.default.createElement("div", {
       className: clx(styles__default.default.avatarWrapper, {
-        avatarLoader: !!loader
+        avatarLoader: !!loading
       }),
       onClick: onClick,
       role: "button",

package/Avatar/index.props.d.ts

@@ -13,6 +13,6 @@ export type AvatarProps = {
     onClick?: () => void;
     initials?: string;
     ref?: React.Ref<HTMLImageElement>;
-    loader?: boolean;
+    loading?: boolean;
     ariaLabel?: string;
 };

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,30 +45,42 @@ 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 _f = React.useState(value || []),
+    selected = _f[0],
+    setSelected = _f[1];
+  var internalSelectedKeys = React.useMemo(function () {
+    return selected.map(index.toKey);
+  }, [selected]);
   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));
+    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;
     });
@@ -92,7 +89,9 @@ var MultiSelect = function MultiSelect(_a) {
     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 +101,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 +164,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/Avatar/index.js

@@ -26,10 +26,10 @@ var Avatar = /*#__PURE__*/memo(function (props) {
     accountType = _c === void 0 ? AccountType.Organization : _c,
     onClick = props.onClick,
     initials = props.initials,
-    loader = props.loader,
+    loading = props.loading,
     ariaLabel = props.ariaLabel,
     ref = props.ref,
-    rest = __rest(props, ["src", "size", "className", "bordered", "alt", "accountType", "onClick", "initials", "loader", "ariaLabel", "ref"]);
+    rest = __rest(props, ["src", "size", "className", "bordered", "alt", "accountType", "onClick", "initials", "loading", "ariaLabel", "ref"]);
   if ((initials === null || initials === void 0 ? void 0 : initials.trim()) && initials.length <= 2) {
     return (
       /*#__PURE__*/
@@ -42,7 +42,7 @@ var Avatar = /*#__PURE__*/memo(function (props) {
         onClick: onClick,
         className: clx(styles.avatarInitials, {
           avatarBordered: !!bordered,
-          loader: !!loader
+          loading: !!loading
         }, SIZE_CLASSES[size], className)
       }, rest), /*#__PURE__*/React__default.createElement("span", {
         className: clx(styles.initialsText, TEXT_CLASSES[size])
@@ -55,7 +55,7 @@ var Avatar = /*#__PURE__*/memo(function (props) {
     // eslint-disable-next-line jsx-a11y/click-events-have-key-events,
     React__default.createElement("div", {
       className: clx(styles.avatarWrapper, {
-        avatarLoader: !!loader
+        avatarLoader: !!loading
       }),
       onClick: onClick,
       role: "button",

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

@@ -13,6 +13,6 @@ export type AvatarProps = {
     onClick?: () => void;
     initials?: string;
     ref?: React.Ref<HTMLImageElement>;
-    loader?: boolean;
+    loading?: boolean;
     ariaLabel?: string;
 };

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,30 +35,42 @@ 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 _f = useState(value || []),
+    selected = _f[0],
+    setSelected = _f[1];
+  var internalSelectedKeys = useMemo(function () {
+    return selected.map(toKey);
+  }, [selected]);
   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));
+    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;
     });
@@ -82,7 +79,9 @@ var MultiSelect = function MultiSelect(_a) {
     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 +91,10 @@ var MultiSelect = function MultiSelect(_a) {
           optVal = _a.value;
         return {
           label: label,
-          key: createGroupOptionString(groupVal, optVal)
+          key: toKey({
+            group: groupVal,
+            option: optVal
+          })
         };
       });
     });
@@ -152,7 +154,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.8",
+  "version": "0.8.10",
   "description": "React UI components library",
   "main": "index.js",
   "scripts": {},