@appquality/unguess-design-system 2.12.55 → 2.12.57

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# v2.12.57 (Tue Jan 17 2023)
+
+#### 🐛 Bug Fix
+
+- Handle state from outside component in multiselect [#178](https://github.com/AppQuality/unguess-design-system/pull/178) ([@d-beezee](https://github.com/d-beezee))
+- feat(multiselect): Handle state from outside [#177](https://github.com/AppQuality/unguess-design-system/pull/177) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 1
+
+- [@d-beezee](https://github.com/d-beezee)
+
+---
+
+# v2.12.56 (Mon Jan 16 2023)
+
+#### 🐛 Bug Fix
+
+- Multiselect fixes [#176](https://github.com/AppQuality/unguess-design-system/pull/176) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.55 (Mon Jan 16 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -3553,12 +3553,18 @@ var SvgPlus = function SvgPlus(props) {
 };
 
 const CustomItem$1 = reactDropdowns.Item;
+const GridAdd = styled__default["default"](SvgPlus) `
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 12px;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: calc(20px + 16px);
+`;
 const AddableItem = (props) => {
-    return (jsxRuntime.jsxs(CustomItem$1, Object.assign({ onClick: props.onClick, addable: true, disabled: true }, { children: [jsxRuntime.jsx(SvgPlus, { style: {
-                    position: "absolute",
-                    left: "0.6%",
-                    top: "calc(50% - 8px)",
-                } }), props.label] })));
+    return (jsxRuntime.jsxs(CustomItem$1, Object.assign({ onClick: props.onClick, addable: true, disabled: true }, { children: [jsxRuntime.jsx(GridAdd, {}), props.label] })));
 };
 
 const CustomItem = reactDropdowns.Item;
@@ -3566,59 +3572,34 @@ const Item = ({ option, checked, }) => {
     return (jsxRuntime.jsx(CustomItem, Object.assign({ value: option, checked: checked }, { children: jsxRuntime.jsx("span", { children: option.label }) }), `${option.label}-${option.id}`));
 };
 
-const useOptions = ({ options, selectedItems, onChange, }) => {
-    const [currentOptions, setCurrentOptions] = React.useState(options);
-    const [isLoading, setIsLoading] = React.useState(false);
-    const [currentSelectedItems, setSelectedItems] = React.useState(selectedItems || []);
+const DisabledItem = ({ label }) => (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ disabled: true }, { children: label })));
+const MultiSelect = ({ options, onChange, creatable, i18n, maxItems, size, menuHeight, }) => {
+    var _a, _b, _c;
     const [inputValue, setInputValue] = React.useState("");
     const [matchingOptions, setMatchingOptions] = React.useState(options);
-    const selectItems = (selection, newLabel) => __awaiter(void 0, void 0, void 0, function* () {
-        setIsLoading(true);
-        const unselectedItems = currentOptions.filter((option) => !selection.find((selectedItem) => selectedItem.id === option.id));
-        let newSelectedItems = selection;
-        if (onChange) {
-            newSelectedItems = yield onChange(selection, newLabel);
-        }
-        setCurrentOptions([...unselectedItems, ...newSelectedItems]);
-        setSelectedItems(newSelectedItems);
-        setInputValue("");
-        setIsLoading(false);
-    });
+    const itemToString = (item) => (item ? item.id : "");
     React.useEffect(() => {
-        const matchedOptions = currentOptions.filter((option) => {
-            return (option.label
-                .trim()
-                .toLowerCase()
-                .indexOf(inputValue.trim().toLowerCase()) !== -1);
-        });
+        const matchedOptions = options.filter((option) => option.label
+            .trim()
+            .toLowerCase()
+            .indexOf(inputValue.trim().toLowerCase()) !== -1);
         setMatchingOptions(matchedOptions);
-    }, [inputValue]);
-    return {
-        currentOptions,
-        currentSelectedItems,
-        matchingOptions,
-        inputValue,
-        setInputValue,
-        selectItems,
-        isLoading,
-    };
-};
-
-const DisabledItem = ({ label }) => (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ disabled: true }, { children: label })));
-const MultiSelect = ({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }) => {
-    var _a, _b, _c;
-    const { isLoading, currentSelectedItems, matchingOptions, inputValue, setInputValue, selectItems, } = useOptions({ options, selectedItems, onChange });
-    const itemToString = (item) => (item ? item.id : "");
-    return (jsxRuntime.jsx("div", Object.assign({ style: isLoading ? { pointerEvents: "none", opacity: "0.3" } : {} }, { children: jsxRuntime.jsxs(reactDropdowns.Dropdown, Object.assign({ inputValue: inputValue, selectedItems: currentSelectedItems, onSelect: (items) => selectItems(items), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(reactDropdowns.Field, { children: [jsxRuntime.jsx(reactDropdowns.Label, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => {
-                                            selectItems(currentSelectedItems.filter((item) => item.id !== value.id));
-                                        } })] }))) })] }), jsxRuntime.jsxs(reactDropdowns.Menu, { children: [jsxRuntime.jsxs("div", Object.assign({ style: { maxHeight: menuHeight !== null && menuHeight !== void 0 ? menuHeight : "200px" } }, { children: [matchingOptions.map((option) => {
-                                    const items = currentSelectedItems.map((item) => itemToString(item));
-                                    return (jsxRuntime.jsx(Item, { option: option, checked: items.includes(itemToString(option)) }));
-                                }), matchingOptions.length === 0 && (jsxRuntime.jsx(DisabledItem, { label: (_c = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _c !== void 0 ? _c : "No matches found" }))] })), creatable &&
-                            inputValue.length > 0 &&
-                            !matchingOptions.find((item) => item.label.toLowerCase() === inputValue.toLowerCase()) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(AddableItem, { onClick: () => selectItems(currentSelectedItems, inputValue), label: (i18n === null || i18n === void 0 ? void 0 : i18n.addNew)
-                                        ? i18n.addNew(inputValue)
-                                        : `Want to add ${inputValue}?` })] })) : null] })] })) })));
+    }, [inputValue, options]);
+    return (jsxRuntime.jsxs(reactDropdowns.Dropdown, Object.assign({ inputValue: inputValue, selectedItems: options.filter((option) => option.selected), onSelect: (items) => onChange &&
+            onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: items.some((i) => i.id === o.id) })))), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(reactDropdowns.Field, { children: [jsxRuntime.jsx(reactDropdowns.Label, Object.assign({ hidden: true }, { children: (_a = i18n === null || i18n === void 0 ? void 0 : i18n.label) !== null && _a !== void 0 ? _a : "Multiselect" })), jsxRuntime.jsx(reactDropdowns.Multiselect, { placeholder: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.placeholder) !== null && _b !== void 0 ? _b : "Select Items", isCompact: size !== "medium", maxItems: maxItems, renderItem: ({ value }) => (jsxRuntime.jsxs(reactTags.Tag, Object.assign({ isPill: true }, { children: [jsxRuntime.jsx("span", { children: value.label }), jsxRuntime.jsx(reactTags.Tag.Close, { onClick: () => onChange &&
+                                        onChange(options.map((o) => (Object.assign(Object.assign({}, o), { selected: o.selected && o.id !== value.id })))) })] }))) })] }), jsxRuntime.jsxs(reactDropdowns.Menu, { children: [jsxRuntime.jsxs("div", Object.assign({ style: { maxHeight: menuHeight !== null && menuHeight !== void 0 ? menuHeight : "200px" } }, { children: [matchingOptions.map((option) => {
+                                const items = options
+                                    .filter((o) => o.selected)
+                                    .map((item) => itemToString(item));
+                                return (jsxRuntime.jsx(Item, { option: option, checked: items.includes(itemToString(option)) }));
+                            }), matchingOptions.length === 0 && (jsxRuntime.jsx(DisabledItem, { label: (_c = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _c !== void 0 ? _c : "No matches found" }))] })), creatable &&
+                        inputValue.length > 0 &&
+                        !matchingOptions.find((item) => item.label.toLowerCase() === inputValue.toLowerCase()) ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Separator, {}), jsxRuntime.jsx(AddableItem, { onClick: () => __awaiter(void 0, void 0, void 0, function* () {
+                                    onChange && (yield onChange(options, inputValue));
+                                    setInputValue("");
+                                }), label: (i18n === null || i18n === void 0 ? void 0 : i18n.addNew)
+                                    ? i18n.addNew(inputValue)
+                                    : `Want to add ${inputValue}?` })] })) : null] })] })));
 };
 
 const StyledModal$1 = styled__default["default"](Modal) `

package/build/stories/multiselect/_types.d.ts

@@ -1,12 +1,13 @@
 declare type Item = {
-    id: string | number;
+    id: number;
     label: string;
+    selected?: boolean;
 };
 export declare type MultiSelectProps = {
     maxItems?: number;
     options: Item[];
     selectedItems?: Item[];
-    onChange?: (selectedItems: Item[], newItem?: string) => Promise<Item[]>;
+    onChange?: (selectedItems: Item[], newItem?: string) => Promise<void>;
     creatable?: boolean;
     size: "small" | "medium";
     menuHeight?: string;

package/build/stories/multiselect/index.d.ts

@@ -1,2 +1,2 @@
 import { MultiSelectProps } from "./_types";
-export declare const MultiSelect: ({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }: MultiSelectProps) => JSX.Element;
+export declare const MultiSelect: ({ options, onChange, creatable, i18n, maxItems, size, menuHeight, }: MultiSelectProps) => JSX.Element;

package/build/stories/multiselect/index.stories.d.ts

@@ -2,5 +2,5 @@ import { ComponentMeta, Story } from "@storybook/react";
 import { MultiSelectProps } from "./_types";
 export declare const Default: Story<MultiSelectProps>;
 export declare const WithTagCreation: Story<MultiSelectProps>;
-declare const _default: ComponentMeta<({ options, selectedItems, onChange, creatable, i18n, maxItems, size, menuHeight, }: MultiSelectProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ options, onChange, creatable, i18n, maxItems, size, menuHeight, }: MultiSelectProps) => JSX.Element>;
 export default _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "2.12.55",
+  "version": "2.12.57",
   "dependencies": {
     "@nivo/bar": "^0.80.0",
     "@nivo/bullet": "^0.80.0",

package/build/stories/multiselect/useOptions.d.ts

@@ -1,27 +0,0 @@
-/// <reference types="react" />
-import { MultiSelectProps } from "./_types";
-export declare const useOptions: ({ options, selectedItems, onChange, }: {
-    options: MultiSelectProps["options"];
-    selectedItems: MultiSelectProps["selectedItems"];
-    onChange: MultiSelectProps["onChange"];
-}) => {
-    currentOptions: {
-        id: string | number;
-        label: string;
-    }[];
-    currentSelectedItems: {
-        id: string | number;
-        label: string;
-    }[];
-    matchingOptions: {
-        id: string | number;
-        label: string;
-    }[];
-    inputValue: string;
-    setInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
-    selectItems: (selection: {
-        id: string | number;
-        label: string;
-    }[], newLabel?: string) => Promise<void>;
-    isLoading: boolean;
-};