@appquality/unguess-design-system 3.1.52 → 3.1.54

package/.github/workflows/release.yml

@@ -34,7 +34,7 @@ jobs:
             yarn-deps-${{ hashFiles('yarn.lock') }}
       - name: Create Release
         env:
-          GITHUB_TOKEN: ${{ secrets.GH_TOKEN }}
+          GITHUB_TOKEN: ${{ secrets.REPO_PAT }}
           #👇 npm token, see https://storybook.js.org/tutorials/design-systems-for-developers/react/en/distribute/ to obtain it
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# v3.1.54 (Tue Nov 14 2023)
+
+#### 🐛 Bug Fix
+
+- chore(styled-components): update to 6.1.1 [#278](https://github.com/AppQuality/unguess-design-system/pull/278) ([@cannarocks](https://github.com/cannarocks))
+
+#### Authors: 1
+
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
+# v3.1.53 (Thu Nov 09 2023)
+
+#### 🐛 Bug Fix
+
+- Fix color swatch [#277](https://github.com/AppQuality/unguess-design-system/pull/277) ([@cannarocks](https://github.com/cannarocks) [@marcbon](https://github.com/marcbon) [@iDome89](https://github.com/iDome89))
+- 🐛 fix(color-swatch): fix color selection bug in handleSelect function [#276](https://github.com/AppQuality/unguess-design-system/pull/276) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 3
+
+- [@iDome89](https://github.com/iDome89)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v3.1.52 (Wed Nov 08 2023)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -2326,12 +2326,29 @@ const Trigger$1 = styled.styled.div `
   justify-content: flex-start;
   cursor: pointer;
 `;
+const StyledColorSwatchDialog = styled.styled(reactColorpickers.ColorSwatchDialog) `
+  ${({ disableTooltip }) => disableTooltip &&
+    `
+  & div[role="tooltip"] {
+    display: none;
+  }`}
+`;
 const ColorSwatchTrigger = React__default["default"].forwardRef((props, ref) => {
     var _a;
     return (jsxRuntime.jsx(Trigger$1, Object.assign({ ref: ref }, props, { style: Object.assign(Object.assign({}, props.style), { color: props.color }) }, { children: (_a = props.children) !== null && _a !== void 0 ? _a : jsxRuntime.jsx(SvgCircleFullFill, {}) })));
 });
-const ColorSwatch = ({ colors, rowSize, children, onSelect, }) => {
-    const matrix = containerUtilities.convertToMatrix(colors, rowSize !== null && rowSize !== void 0 ? rowSize : 7);
+const ColorSwatch = (_a) => {
+    var { colors, rowSize, children, onSelect } = _a, props = __rest(_a, ["colors", "rowSize", "children", "onSelect"]);
+    /**
+     * Convert the colors to the format expected by the ColorSwatchDialog
+     */
+    const cleanedColors = colors.map(({ label, value }) => {
+        return {
+            value,
+            label: label !== null && label !== void 0 ? label : "",
+        };
+    });
+    const matrix = containerUtilities.convertToMatrix(cleanedColors, rowSize !== null && rowSize !== void 0 ? rowSize : 7);
     const [color, setColor] = React.useState(matrix[0][0].value);
     const [rowIndex, setRowIndex] = React.useState(0);
     const [colIndex, setColIndex] = React.useState(0);
@@ -2344,13 +2361,13 @@ const ColorSwatch = ({ colors, rowSize, children, onSelect, }) => {
     const handleSelect = (rowIdx, colIdx) => {
         setSelectedRowIndex(rowIdx);
         setSelectedColIndex(colIdx);
-        setColor(matrix[rowIdx][colIdx].value);
     };
-    return (jsxRuntime.jsx(reactColorpickers.ColorSwatchDialog, Object.assign({ colors: matrix, onChange: handleChange, onSelect: (rowIdx, colIdx) => {
+    return (jsxRuntime.jsx(StyledColorSwatchDialog, Object.assign({ colors: matrix, onChange: handleChange, onSelect: (rowIdx, colIdx) => {
             handleSelect(rowIdx, colIdx);
+            setColor(matrix[rowIdx][colIdx].value);
             if (onSelect)
-                onSelect(color);
-        }, rowIndex: rowIndex, colIndex: colIndex, selectedRowIndex: selectedRowIndex, selectedColIndex: selectedColIndex }, { children: jsxRuntime.jsx(ColorSwatchTrigger, Object.assign({ color: color }, { children: children })) })));
+                onSelect(matrix[rowIdx][colIdx].value);
+        }, rowIndex: rowIndex, colIndex: colIndex, selectedRowIndex: selectedRowIndex, selectedColIndex: selectedColIndex }, props, { children: jsxRuntime.jsx(ColorSwatchTrigger, Object.assign({ color: color }, { children: children })) })));
 };
 
 const UgDrawer = styled__default["default"](reactModals.DrawerModal) `

package/build/stories/buttons/button/index.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ButtonArgs } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;
 export declare const Basic: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ButtonArgs>;

package/build/stories/buttons/utils.d.ts

@@ -8,18 +8,18 @@ export declare const variants: readonly [{}, {
     readonly disabled: true;
 }];
 export declare const Row: import("styled-components").IStyledComponent<"web", {
-    alignItems?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXs?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsSm?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsMd?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsLg?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignItemsXl?: "center" | "start" | "end" | "baseline" | "stretch" | undefined;
-    justifyContent?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentXs?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentSm?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentMd?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentLg?: "center" | "start" | "end" | "between" | "around" | undefined;
-    justifyContentXl?: "center" | "start" | "end" | "between" | "around" | undefined;
+    alignItems?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXs?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsSm?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsMd?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsLg?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    alignItemsXl?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
+    justifyContent?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentXs?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentSm?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentMd?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentLg?: "start" | "center" | "end" | "between" | "around" | undefined;
+    justifyContentXl?: "start" | "center" | "end" | "between" | "around" | undefined;
     wrap?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapXs?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
     wrapSm?: "wrap" | "nowrap" | "wrap-reverse" | undefined;
@@ -33,7 +33,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -73,7 +73,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -84,7 +84,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -93,7 +93,7 @@ export declare const Row: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -299,18 +299,18 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     md?: string | number | boolean | undefined;
     lg?: string | number | boolean | undefined;
     xl?: string | number | boolean | undefined;
-    alignSelf?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfXs?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfSm?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfMd?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfLg?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    alignSelfXl?: "center" | "auto" | "start" | "end" | "baseline" | "stretch" | undefined;
-    textAlign?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignXs?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignSm?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignMd?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignLg?: "center" | "start" | "end" | "justify" | undefined;
-    textAlignXl?: "center" | "start" | "end" | "justify" | undefined;
+    alignSelf?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXs?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfSm?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfMd?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfLg?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    alignSelfXl?: "start" | "center" | "end" | "baseline" | "stretch" | "auto" | undefined;
+    textAlign?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignXs?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignSm?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignMd?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignLg?: "start" | "center" | "end" | "justify" | undefined;
+    textAlignXl?: "start" | "center" | "end" | "justify" | undefined;
     offset?: string | number | undefined;
     offsetXs?: string | number | undefined;
     offsetSm?: string | number | undefined;
@@ -330,7 +330,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -370,7 +370,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -381,7 +381,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -390,7 +390,7 @@ export declare const Col: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;
@@ -600,7 +600,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     accessKey?: string | undefined;
     autoFocus?: boolean | undefined;
     className?: string | undefined;
-    contentEditable?: "inherit" | (boolean | "true" | "false") | undefined;
+    contentEditable?: (boolean | "true" | "false") | "inherit" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "true" | "false") | undefined;
@@ -640,7 +640,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "text" | "none" | "tel" | "url" | "email" | "numeric" | "decimal" | undefined;
+    inputMode?: "decimal" | "none" | "search" | "text" | "tel" | "url" | "email" | "numeric" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "true" | "false") | undefined;
@@ -651,7 +651,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-colindex"?: number | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date" | undefined;
+    "aria-current"?: boolean | "true" | "false" | "page" | "step" | "location" | "date" | "time" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-details"?: string | undefined;
     "aria-disabled"?: (boolean | "true" | "false") | undefined;
@@ -660,7 +660,7 @@ export declare const MD: import("styled-components").IStyledComponent<"web", {
     "aria-expanded"?: (boolean | "true" | "false") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "true" | "false") | undefined;
-    "aria-haspopup"?: boolean | "dialog" | "menu" | "true" | "false" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "true" | "false" | "dialog" | "grid" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "true" | "false") | undefined;
     "aria-invalid"?: boolean | "true" | "false" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

package/build/stories/color-swatch/_types.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
-export interface ColorSwatchProps {
+import { IColorSwatchDialogProps } from "@zendeskgarden/react-colorpickers";
+export interface ColorSwatchProps extends Omit<IColorSwatchDialogProps, "colors" | "onSelect"> {
     colors: {
-        label: string;
+        label?: string;
         value: string;
     }[];
     rowSize?: number;
     children?: React.ReactNode | React.ReactNode[];
     onSelect?: (color: string) => void;
+    disableTooltip?: boolean;
 }
 export interface ColorSwatchTriggerProps {
     style?: React.CSSProperties;

package/build/stories/color-swatch/index.d.ts

@@ -1,3 +1,3 @@
 import { ColorSwatchProps } from "./_types";
-declare const ColorSwatch: ({ colors, rowSize, children, onSelect, }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
+declare const ColorSwatch: ({ colors, rowSize, children, onSelect, ...props }: ColorSwatchProps) => import("react/jsx-runtime").JSX.Element;
 export { ColorSwatch };

package/build/stories/color-swatch/index.stories.d.ts

@@ -1,4 +1,5 @@
 import { ColorSwatchProps } from "./_types";
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ColorSwatchProps>;
+export declare const WithoutLabels: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ColorSwatchProps>;
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ColorSwatchProps>;
 export default _default;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { DropdownArgs, SelectArgs } from "./_types";
 import { MenuArgs } from "../menu/_types";
 interface IItem {

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { EditorArgs } from "./_types";
 interface EditorStoryArgs extends EditorArgs {
     children?: any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appquality/unguess-design-system",
-  "version": "3.1.52",
+  "version": "3.1.54",
   "description": "",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -99,7 +99,7 @@
     "rollup": "~2.66",
     "rollup-plugin-typescript2": "^0.34.1",
     "storybook": "^7.0.9",
-    "styled-components": "^6.0.0",
+    "styled-components": "^6.1.1",
     "typescript": "^4.5.0",
     "web-vitals": "^2.1.4"
   },
@@ -138,6 +138,6 @@
     "formik": "^2.2.9",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "styled-components": "^6.0.0"
+    "styled-components": "^6.1.1"
   }
 }