@appquality/unguess-design-system 2.12.71 → 2.12.73

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+# v2.12.73 (Thu Feb 09 2023)
+
+#### 🐛 Bug Fix
+
+- i18n: Allow translating showmore in multiselect [#207](https://github.com/AppQuality/unguess-design-system/pull/207) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 1
+
+- [@d-beezee](https://github.com/d-beezee)
+
+---
+
+# v2.12.72 (Thu Feb 09 2023)
+
+#### 🐛 Bug Fix
+
+- Fix dropdown header item [#206](https://github.com/AppQuality/unguess-design-system/pull/206) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.71 (Thu Feb 09 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -1868,6 +1868,8 @@ const StyledLabel$2 = styled__default["default"](reactForms.Label) ``;
  **/
 const Label = (props) => jsxRuntime.jsx(StyledLabel$2, Object.assign({}, props));
 
+const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
+
 const UgSelect = styled__default["default"](reactDropdowns.Select) `
   ${(props) => props.isPrimary &&
     `
@@ -1894,9 +1896,12 @@ const StyledDropdown = styled__default["default"].div `
     display: block;
   }
 `;
+const StyledMenuHeaderItem = styled__default["default"](MenuHeaderItem) `
+  pointer-events: none;
+`;
 const Dropdown = (props) => (jsxRuntime.jsx(StyledDropdown, { children: jsxRuntime.jsx(reactDropdowns.Dropdown, Object.assign({}, props)) }));
 const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign({}, props));
-Dropdown.HeaderItem = HeaderItem;
+Dropdown.HeaderItem = StyledMenuHeaderItem;
 Dropdown.Separator = Separator;
 
 const StyledAutocomplete = styled__default["default"](Autocomplete) `
@@ -1943,8 +1948,6 @@ const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
                                 : (_a = i18n === null || i18n === void 0 ? void 0 : i18n.noItems) !== null && _a !== void 0 ? _a : "No items" }))] }), jsxRuntime.jsx(Menu, Object.assign({ isCompact: isCompact }, { children: matchingOptions.length === 0 ? (jsxRuntime.jsx(Item$1, Object.assign({ disabled: true }, { children: (_b = i18n === null || i18n === void 0 ? void 0 : i18n.noMatches) !== null && _b !== void 0 ? _b : "No matches found" }))) : (matchingOptions.map((option) => (jsxRuntime.jsx(Item$1, Object.assign({ value: option }, option, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.itemId)))) }))] })) }));
 };
 
-const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
-
 const editorStyle = styled.css `
   > * + * {
     margin-top: 0.75em;
@@ -3652,7 +3655,7 @@ const MultiSelect = ({ options, onChange, creatable, i18n, maxItems, size, menuH
         setMatchingOptions(matchedOptions);
     }, [inputValue, options]);
     return (jsxRuntime.jsxs(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(Field$1, { children: [jsxRuntime.jsx(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: items.some((i) => i.id === o.id) })))), downshiftProps: { itemToString }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [jsxRuntime.jsx(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", renderShowMore: i18n === null || i18n === void 0 ? void 0 : i18n.showMore, 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(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)

package/build/stories/dropdowns/select/index.d.ts

@@ -13,7 +13,7 @@ import { SelectArgs, DropdownArgs, MessageArgs } from "./_types";
 declare const Select: (props: SelectArgs) => JSX.Element;
 declare const Dropdown: {
     (props: PropsWithChildren<DropdownArgs>): JSX.Element;
-    HeaderItem: (props: import("../../navigation/header/header-item/_types").HeaderItemArgs) => JSX.Element;
+    HeaderItem: import("styled-components").StyledComponent<(props: import("../menuheader/_types").HeaderItemArgs) => JSX.Element, any, {}, never>;
     Separator: (props: import("react").LiHTMLAttributes<HTMLLIElement>) => JSX.Element;
 };
 declare const Message: (props: MessageArgs) => JSX.Element;

package/build/stories/dropdowns/select/index.stories.d.ts

@@ -18,7 +18,7 @@ export declare const Default: Story<MenuStoryArgs>;
 export declare const Validation: Story<MenuStoryArgs>;
 declare const _default: ComponentMeta<{
     (props: import("react").PropsWithChildren<DropdownArgs>): JSX.Element;
-    HeaderItem: (props: import("../../navigation/header/header-item/_types").HeaderItemArgs) => JSX.Element;
+    HeaderItem: import("styled-components").StyledComponent<(props: import("../menuheader/_types").HeaderItemArgs) => JSX.Element, any, {}, never>;
     Separator: (props: import("react").LiHTMLAttributes<HTMLLIElement>) => JSX.Element;
 }>;
 export default _default;

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

@@ -16,6 +16,7 @@ export declare type MultiSelectProps = {
         label?: string;
         noMatches?: string;
         addNew?: (value: string) => string;
+        showMore?: (value: number) => string;
     };
 };
 export {};

package/package.json

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