@appquality/unguess-design-system 2.12.65 → 2.12.66

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# v2.12.66 (Mon Jan 30 2023)
+
+#### 🐛 Bug Fix
+
+- Fix dropdowns [#197](https://github.com/AppQuality/unguess-design-system/pull/197) ([@d-beezee](https://github.com/d-beezee) [@marcbon](https://github.com/marcbon))
+- Fix dropdowns 2 [#196](https://github.com/AppQuality/unguess-design-system/pull/196) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 2
+
+- [@d-beezee](https://github.com/d-beezee)
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.65 (Mon Jan 30 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -25,12 +25,12 @@ var sunburst = require('@nivo/sunburst');
 var waffle = require('@nivo/waffle');
 var reactModals = require('@zendeskgarden/react-modals');
 var reactDropdowns = require('@zendeskgarden/react-dropdowns');
+var reactForms = require('@zendeskgarden/react-forms');
 var react = require('@tiptap/react');
 var Typography = require('@tiptap/extension-typography');
 var StarterKit = require('@tiptap/starter-kit');
 var Placeholder = require('@tiptap/extension-placeholder');
 var CharacterCount = require('@tiptap/extension-character-count');
-var reactForms = require('@zendeskgarden/react-forms');
 var reactGrid = require('@zendeskgarden/react-grid');
 var reactChrome = require('@zendeskgarden/react-chrome');
 var formik = require('formik');
@@ -991,14 +991,14 @@ const StyledTagNew$1 = styled__default["default"](Tag) `
     ${({ theme }) => theme.space.base * 2}px;
   color: ${({ theme }) => theme.palette.white};
 `;
-const StyledLabel$2 = styled__default["default"](SM) `
+const StyledLabel$3 = styled__default["default"](SM) `
   color: ${({ theme }) => theme.palette.grey["500"]};
 `;
 const CampaignCard = (_a) => {
     var { isNew, date, projectTitle, campaignTitle, status, type, labelNew } = _a, props = __rest(_a, ["isNew", "date", "projectTitle", "campaignTitle", "status", "type", "labelNew"]);
     const StatusIcon = getStatusIcon(status !== null && status !== void 0 ? status : "PROGRESS");
     const PillIcon = getTypeDataIcon(type);
-    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$2, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, Object.assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$3, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, Object.assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
+    return props.isLoading ? (jsxRuntime.jsx(CampaignCardSkeleton, {})) : (jsxRuntime.jsxs(SpecialCard, Object.assign({ title: campaignTitle }, props, { children: [jsxRuntime.jsxs(SpecialCard.Meta, { children: [jsxRuntime.jsx(StyledLabel$3, { children: date }), isNew && (jsxRuntime.jsx(StyledTagNew$1, Object.assign({ hue: theme.palette.fuschia["600"], isPill: true, size: "medium", title: labelNew ? labelNew : "New!" }, { children: labelNew ? labelNew : "New!" })))] }), jsxRuntime.jsxs(SpecialCard.Header, { children: [jsxRuntime.jsx(SpecialCard.Header.Label, { children: projectTitle }), jsxRuntime.jsx(SpecialCard.Header.Title, { children: campaignTitle })] }), jsxRuntime.jsxs(SpecialCard.Footer, { children: [props.pillText && (jsxRuntime.jsxs(StyledTag$3, Object.assign({ size: "large", isPill: true, isRegular: true, hue: theme.palette.grey[100] }, { children: [jsxRuntime.jsx(Tag.Avatar, { children: jsxRuntime.jsx(PillIcon, {}) }), jsxRuntime.jsx(Ellipsis, Object.assign({ style: { maxWidth: "180px" } }, { children: props.pillText }))] }))), jsxRuntime.jsx(StatusIcon, {})] })] })));
 };
 
 const StyledTagNew = styled__default["default"](Tag) `
@@ -1831,20 +1831,73 @@ const ItemContent = (props) => {
     return (jsxRuntime.jsxs(Container$1, { children: [thumbSrc && (jsxRuntime.jsx(ThumbContainer, { children: jsxRuntime.jsx(Image$1, { src: thumbSrc }) })), jsxRuntime.jsxs(MetaContainer$1, { children: [label && jsxRuntime.jsx(Label$1, Object.assign({ isBold: true }, { children: label })), description && jsxRuntime.jsx(Description$1, { children: description })] })] }));
 };
 
+const StyledMenu = styled__default["default"](reactDropdowns.Menu) `
+  width: auto !important;
+`;
 /**
-   * A Menu is a wrapper for items elements
-   **/
-const Menu = (props) => jsxRuntime.jsx(reactDropdowns.Menu, Object.assign({}, props));
+ * A Menu is a wrapper for items elements
+ **/
+const Menu = (props) => jsxRuntime.jsx(StyledMenu, Object.assign({}, props));
 // Extras
-const PreviousItem = (props) => jsxRuntime.jsx(reactDropdowns.PreviousItem, Object.assign({}, props));
-const Separator = (props) => jsxRuntime.jsx(reactDropdowns.Separator, Object.assign({}, props));
+const PreviousItem = (props) => (jsxRuntime.jsx(reactDropdowns.PreviousItem, Object.assign({}, props)));
+const Separator = (props) => (jsxRuntime.jsx(reactDropdowns.Separator, Object.assign({}, props)));
 const NextItem = (props) => jsxRuntime.jsx(reactDropdowns.NextItem, Object.assign({}, props));
-const ItemMeta = (props) => jsxRuntime.jsx(reactDropdowns.ItemMeta, Object.assign({}, props));
-const MediaBody = (props) => jsxRuntime.jsx(reactDropdowns.MediaBody, Object.assign({}, props));
-const MediaFigure = (props) => jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props));
-const MediaItem = (props) => jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props));
+const ItemMeta = (props) => (jsxRuntime.jsx(reactDropdowns.ItemMeta, Object.assign({}, props)));
+const MediaBody = (props) => (jsxRuntime.jsx(reactDropdowns.MediaBody, Object.assign({}, props)));
+const MediaFigure = (props) => (jsxRuntime.jsx(reactDropdowns.MediaFigure, Object.assign({}, props)));
+const MediaItem = (props) => (jsxRuntime.jsx(reactDropdowns.MediaItem, Object.assign({}, props)));
+
+const StyledAutocomplete$1 = styled__default["default"](reactDropdowns.Autocomplete) `
+  width: 100%;
+`;
+/**
+ * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
+ * <hr>
+ * Used for this:
+    - To filter down a large list of options
+    - To quickly find a known option
+ * Not for this:
+    - To make more than one selection, use Multiselect instead
+ */
+const Autocomplete = (props) => (jsxRuntime.jsx(StyledAutocomplete$1, Object.assign({}, props)));
+
+const StyledLabel$2 = styled__default["default"](reactForms.Label) ``;
+/**
+ * A Label is used to specify a title for an input.
+ * <hr>
+ **/
+const Label = (props) => jsxRuntime.jsx(StyledLabel$2, Object.assign({}, props));
+
+const UgSelect = styled__default["default"](reactDropdowns.Select) `
+  ${(props) => props.isPrimary &&
+    `
+      background-color: ${props.theme.palette.blue[600]};
+      color: white;
+      & svg[data-garden-id="forms.media_figure"] {
+         color: white;
+      }
+   `}
+`;
+/**
+ * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
+ * <hr>
+ * Used for this:
+    - To make a selection from a list of options
+ * Not for this:
+    - To filter a large list of options, use Autocomplete instead
+    - To make multiple selections from a list, use Multiselect instead
+    - To select from a list on mobile, use a native Select instead
+ */
+const Select = (props) => jsxRuntime.jsx(UgSelect, Object.assign({}, props));
+const StyledDropdown = styled__default["default"].div `
+  ${StyledLabel$2} {
+    display: block;
+  }
+`;
+const Dropdown = (props) => (jsxRuntime.jsx(StyledDropdown, { children: jsxRuntime.jsx(reactDropdowns.Dropdown, Object.assign({}, props)) }));
+const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign({}, props));
 
-const StyledAutocomplete = styled__default["default"](reactDropdowns.Autocomplete) `
+const StyledAutocomplete = styled__default["default"](Autocomplete) `
   ${(props) => props.hasSelectedItems &&
     `
     border-color: ${props.theme.colors.primaryHue};
@@ -1870,7 +1923,7 @@ const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
         setSelectedItems(options.filter((o) => o.selected));
     }, [options]);
     const hasSelectedItems = selectedItems.length > 0;
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(reactDropdowns.Dropdown, Object.assign({ inputValue: inputValue, selectedItems: selectedItems, onSelect: (items) => {
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Dropdown, Object.assign({ inputValue: inputValue, selectedItems: selectedItems, onSelect: (items) => {
                 if (items) {
                     setSelectedItems(items);
                     if (onChange)
@@ -1878,48 +1931,13 @@ const CounterMultiselect = ({ options, label, i18n, onChange, isCompact, }) => {
                 }
             }, downshiftProps: {
                 itemToString: (item) => item && item.id,
-            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(reactDropdowns.Field, { children: [label && jsxRuntime.jsx(reactDropdowns.Label, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
+            }, onInputValueChange: (value) => setInputValue(value) }, { children: [jsxRuntime.jsxs(Field$1, { children: [label && jsxRuntime.jsx(Label, { children: label }), jsxRuntime.jsx(StyledAutocomplete, Object.assign({ isCompact: isCompact, hasSelectedItems: hasSelectedItems }, { children: hasSelectedItems
                                 ? (i18n === null || i18n === void 0 ? void 0 : i18n.counterText)
                                     ? i18n.counterText(selectedItems.length)
                                     : `Items (${selectedItems.length})`
-                                : (_a = i18n === null || i18n === void 0 ? void 0 : i18n.noItems) !== null && _a !== void 0 ? _a : "No items" }))] }), jsxRuntime.jsx(reactDropdowns.Menu, Object.assign({ isCompact: isCompact }, { children: matchingOptions.length === 0 ? (jsxRuntime.jsx(reactDropdowns.Item, 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(reactDropdowns.Item, Object.assign({ value: option }, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.id)))) }))] })) }));
+                                : (_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 }, { children: jsxRuntime.jsx("span", { children: option.label }) }), option.id)))) }))] })) }));
 };
 
-const UgSelect = styled__default["default"](reactDropdowns.Select) `
-  ${(props) => props.isPrimary &&
-    `
-      background-color: ${props.theme.palette.blue[600]};
-      color: white;
-      & svg[data-garden-id="forms.media_figure"] {
-         color: white;
-      }
-   `}
-`;
-/**
- * Select allows a user to pick one option from a list. This helps simplify the UI when space is limited
- * <hr>
- * Used for this:
-    - To make a selection from a list of options
- * Not for this:
-    - To filter a large list of options, use Autocomplete instead
-    - To make multiple selections from a list, use Multiselect instead
-    - To select from a list on mobile, use a native Select instead
- */
-const Select = (props) => jsxRuntime.jsx(UgSelect, Object.assign({}, props));
-const Dropdown = (props) => (jsxRuntime.jsx(reactDropdowns.Dropdown, Object.assign({}, props)));
-const Message = (props) => jsxRuntime.jsx(reactDropdowns.Message, Object.assign({}, props));
-
-/**
- * Autocomplete is an input field that filters results as users type. This helps users find something quickly in a large list of options.
- * <hr>
- * Used for this:
-    - To filter down a large list of options
-    - To quickly find a known option
- * Not for this:
-    - To make more than one selection, use Multiselect instead
- */
-const Autocomplete = (props) => jsxRuntime.jsx(reactDropdowns.Autocomplete, Object.assign({}, props));
-
 const MenuHeaderItem = (props) => (jsxRuntime.jsx(reactDropdowns.HeaderItem, Object.assign({}, props)));
 
 const editorStyle = styled.css `
@@ -2498,13 +2516,6 @@ const UgCheckbox = styled__default["default"](reactForms.Checkbox) ``;
    **/
 const Checkbox = (props) => jsxRuntime.jsx(UgCheckbox, Object.assign({}, props));
 
-const UgLabel$1 = styled__default["default"](reactForms.Label) ``;
-/**
-   * A Label is used to specify a title for an input.
-   * <hr>
-   **/
-const Label = (props) => jsxRuntime.jsx(UgLabel$1, Object.assign({}, props));
-
 const StyledLabel$1 = styled__default["default"](Label) `
   margin: ${({ theme }) => theme.space.base}px auto;
 `;
@@ -3622,7 +3633,7 @@ 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 DisabledItem = ({ label }) => (jsxRuntime.jsx(reactDropdowns.Item, Object.assign({ disabled: true }, { children: label })));
+const DisabledItem = ({ label }) => (jsxRuntime.jsx(Item$1, Object.assign({ disabled: true }, { children: label })));
 const MultiSelect = ({ options, onChange, creatable, i18n, maxItems, size, menuHeight, }) => {
     var _a, _b, _c;
     const [inputValue, setInputValue] = React.useState("");
@@ -3635,9 +3646,9 @@ const MultiSelect = ({ options, onChange, creatable, i18n, maxItems, size, menuH
             .indexOf(inputValue.trim().toLowerCase()) !== -1);
         setMatchingOptions(matchedOptions);
     }, [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) => {
+    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: 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)
                                     .map((item) => itemToString(item));
@@ -5493,6 +5504,7 @@ exports.SpecialCard = SpecialCard;
 exports.Spinner = Spinner;
 exports.SplitButton = SplitButton;
 exports.Stepper = Stepper;
+exports.StyledLabel = StyledLabel$2;
 exports.SunburstChart = SunburstChart;
 exports.Table = Table;
 exports.TableBody = Body;

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

@@ -1,8 +1,8 @@
 import { MenuArgs, NextItemArgs, PreviousItemArgs } from "./_types";
 import { HTMLAttributes, LiHTMLAttributes } from "react";
 /**
-   * A Menu is a wrapper for items elements
-   **/
+ * A Menu is a wrapper for items elements
+ **/
 declare const Menu: (props: MenuArgs) => JSX.Element;
 declare const PreviousItem: (props: PreviousItemArgs) => JSX.Element;
 declare const Separator: (props: LiHTMLAttributes<HTMLLIElement>) => JSX.Element;
@@ -11,4 +11,4 @@ declare const ItemMeta: (props: HTMLAttributes<HTMLSpanElement>) => JSX.Element;
 declare const MediaBody: (props: HTMLAttributes<HTMLDivElement>) => JSX.Element;
 declare const MediaFigure: (props: HTMLAttributes<Element>) => JSX.Element;
 declare const MediaItem: (props: LiHTMLAttributes<HTMLLIElement>) => JSX.Element;
-export { Menu, PreviousItem, Separator, NextItem, ItemMeta, MediaBody, MediaFigure, MediaItem };
+export { Menu, PreviousItem, Separator, NextItem, ItemMeta, MediaBody, MediaFigure, MediaItem, };

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

@@ -1,7 +1,9 @@
+/// <reference types="react" />
 import { LabelArgs } from "./_types";
+export declare const StyledLabel: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-forms").ILabelProps & import("react").RefAttributes<HTMLLabelElement>>, any, {}, never>;
 /**
-   * A Label is used to specify a title for an input.
-   * <hr>
-   **/
+ * A Label is used to specify a title for an input.
+ * <hr>
+ **/
 declare const Label: (props: LabelArgs) => JSX.Element;
 export { Label };

package/package.json

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