@appquality/unguess-design-system 2.12.46 → 2.12.48

package/CHANGELOG.md

@@ -1,3 +1,34 @@
+# v2.12.48 (Mon Dec 12 2022)
+
+#### 🐛 Bug Fix
+
+- Fix bullet charts and improve responsiveness on breadcrumbs [#149](https://github.com/AppQuality/unguess-design-system/pull/149) ([@iacopolea](https://github.com/iacopolea) [@marcbon](https://github.com/marcbon) [@cannarocks](https://github.com/cannarocks))
+- feat(app-header): add onclick on header item icon [#148](https://github.com/AppQuality/unguess-design-system/pull/148) ([@marcbon](https://github.com/marcbon))
+- feat(breadcrumbs): add responsive behavior + remove last item from story (new desktop behavior) [#147](https://github.com/AppQuality/unguess-design-system/pull/147) ([@marcbon](https://github.com/marcbon))
+- fix(bullet): UN-209 animate measue component [#146](https://github.com/AppQuality/unguess-design-system/pull/146) ([@iacopolea](https://github.com/iacopolea))
+
+#### Authors: 3
+
+- Iacopo Leardini ([@iacopolea](https://github.com/iacopolea))
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
+# v2.12.47 (Wed Dec 07 2022)
+
+#### 🐛 Bug Fix
+
+- Allow custom label on pie [#144](https://github.com/AppQuality/unguess-design-system/pull/144) ([@d-beezee](https://github.com/d-beezee) [@cannarocks](https://github.com/cannarocks))
+- feat: Allow custom label for arclink and legend [#143](https://github.com/AppQuality/unguess-design-system/pull/143) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 2
+
+- [@d-beezee](https://github.com/d-beezee)
+- Luca Cannarozzo ([@cannarocks](https://github.com/cannarocks))
+
+---
+
 # v2.12.46 (Tue Dec 06 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -266,10 +266,10 @@ var isMac = function () {
     var os = parser.getOS().name;
     return os && /Mac OS|iOS/.test(os);
 };
-styled.css(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n  transition: opacity 0.2s ease;\n"], ["\n  transition: opacity 0.2s ease;\n"])));
+styled.css(templateObject_1$1r || (templateObject_1$1r = __makeTemplateObject(["\n  transition: opacity 0.2s ease;\n"], ["\n  transition: opacity 0.2s ease;\n"])));
 var sidebarNavItemExpanded = styled.css(templateObject_2$A || (templateObject_2$A = __makeTemplateObject(["\n  visibility: visible;\n  opacity: 1;\n  // transition: opacity 0.2s ease;\n"], ["\n  visibility: visible;\n  opacity: 1;\n  // transition: opacity 0.2s ease;\n"])));
 var sidebarNavItemHidden = styled.css(templateObject_3$n || (templateObject_3$n = __makeTemplateObject(["\n  visibility: hidden;\n  pointer-events: none;\n  color: transparent;\n"], ["\n  visibility: hidden;\n  pointer-events: none;\n  color: transparent;\n"])));
-var templateObject_1$1q, templateObject_2$A, templateObject_3$n;
+var templateObject_1$1r, templateObject_2$A, templateObject_3$n;
 
 var gradients = {
     horizontal: "linear-gradient(90.81deg, ".concat(hex2rgba(palette.blue[600]), " 11.98%, ").concat(hex2rgba(palette.kale[400]), " 100%);"),
@@ -295,8 +295,8 @@ var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __
         modal: 200,
     } });
 
-var GlobalStyle = styled.createGlobalStyle(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
-var templateObject_1$1p;
+var GlobalStyle = styled.createGlobalStyle(templateObject_1$1q || (templateObject_1$1q = __makeTemplateObject(["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"], ["\n  ::-webkit-scrollbar-track:hover {\n    border-left: solid 1px ", ";\n    border-right: solid 1px ", ";\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    border: solid 2px transparent;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    box-shadow: inset 0 0 10px 10px ", ";\n    border: solid 2px transparent;\n    border-radius: 25px;\n  }\n\n  /* This stuff is for Firefox */\n  * {\n    scrollbar-color: ", " #FFFFFF;\n    scrollbar-width: thin;\n  }\n\n  html {\n    overflow-y: auto;\n  }\n\n  body {\n    font-family: ", ";\n    margin: 0;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n  \n  svg {\n    max-height: 100%;\n  }\n\n"])), theme.palette.grey["200"], theme.palette.grey["200"], theme.palette.blue["200"], theme.palette.blue["200"], theme.fonts.system);
+var templateObject_1$1q;
 
 /**
  * Accordions are headers that can be expanded to reveal content or collapsed to hide it.
@@ -312,7 +312,7 @@ Accordion.Header = reactAccordions.Accordion.Header;
 Accordion.Label = reactAccordions.Accordion.Label;
 Accordion.Panel = reactAccordions.Accordion.Panel;
 
-var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"], ["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"])), function (_a) {
+var UgAlert = styled__default["default"](reactNotifications.Alert)(templateObject_1$1p || (templateObject_1$1p = __makeTemplateObject(["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"], ["\n   background-color: white;\n   color: ", ";\n   border-width: 2px;\n   font-size: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.palette.grey[700];
 }, function (_a) {
@@ -333,9 +333,9 @@ var UgAlertTitle = styled__default["default"](reactNotifications.Title)(template
 var Alert = function (props) { return jsxRuntime.jsx(UgAlert, __assign({}, props)); };
 Alert.Title = UgAlertTitle;
 Alert.Close = reactNotifications.Close;
-var templateObject_1$1o, templateObject_2$z;
+var templateObject_1$1p, templateObject_2$z;
 
-var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n  text-transform: uppercase;\n\n  ", "\n"], ["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
+var UgAvatar = styled__default["default"](reactAvatars.Avatar)(templateObject_1$1o || (templateObject_1$1o = __makeTemplateObject(["\n  text-transform: uppercase;\n\n  ", "\n"], ["\n  text-transform: uppercase;\n\n  ", "\n"])), function (props) {
     return props.avatarType &&
         props.avatarType !== "image" &&
         "background: ".concat(props.backgroundColor || theme.gradients.dark, ";");
@@ -359,7 +359,7 @@ var Avatar = function (props) {
     return (jsxRuntime.jsx(UgAvatar, __assign({}, props, { badge: fixedBadge, children: wrapChildren(props.avatarType || "text"), size: props.size || "small" })));
 };
 Avatar.Text = UgAvatar.Text;
-var templateObject_1$1n;
+var templateObject_1$1o;
 
 /**
  * Breadcrumbs mark and communicate a user’s location in the product.
@@ -368,7 +368,21 @@ var templateObject_1$1n;
     - To show the user where they are in a nested navigation
     - To provide a quick way to navigate to ancestor pages
  */
-var Breadcrumb = function (props) { return jsxRuntime.jsx(reactBreadcrumbs.Breadcrumb, __assign({}, props)); };
+var StyledBreadcrumb$1 = styled__default["default"](reactBreadcrumbs.Breadcrumb)(templateObject_1$1n || (templateObject_1$1n = __makeTemplateObject(["\n  @media (max-width: ", ") {\n    > ol {\n      display: block;\n\n      > li {\n        display: none;\n\n        &:nth-last-child(", ") {\n          display: block;\n          width: 100%;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          position: relative;\n          padding-left: ", "px;\n\n          &::before {\n            content: \"<\";\n            position: absolute;\n            left: 0;\n          }\n        }\n      }\n    }\n  }\n"], ["\n  @media (max-width: ", ") {\n    > ol {\n      display: block;\n\n      > li {\n        display: none;\n\n        &:nth-last-child(", ") {\n          display: block;\n          width: 100%;\n          text-overflow: ellipsis;\n          overflow: hidden;\n          position: relative;\n          padding-left: ", "px;\n\n          &::before {\n            content: \"<\";\n            position: absolute;\n            left: 0;\n          }\n        }\n      }\n    }\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    return theme.breakpoints.md;
+}, function (_a) {
+    var showLastArrow = _a.showLastArrow;
+    return (showLastArrow ? 3 : 1);
+}, function (_a) {
+    var theme = _a.theme;
+    return theme.space.base * 4;
+});
+var Breadcrumb = function (_a) {
+    var children = _a.children, _b = _a.showLastArrow, showLastArrow = _b === void 0 ? true : _b, props = __rest(_a, ["children", "showLastArrow"]);
+    return showLastArrow ? (jsxRuntime.jsxs(StyledBreadcrumb$1, __assign({}, props, { showLastArrow: true }, { children: [children, jsxRuntime.jsx("div", {})] }))) : (jsxRuntime.jsx(StyledBreadcrumb$1, __assign({}, props, { children: children })));
+};
+var templateObject_1$1n;
 
 /**
  * The Anchor is a link that helps users navigate from one location to another.
@@ -1153,7 +1167,7 @@ var CustomBulletChartMarkers = function (_a) {
 
 var CustomMeasure = function (_a) {
     var x = _a.x, y = _a.y, width = _a.width, height = _a.height;
-    return (jsxRuntime.jsx("rect", { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill: CHARTS_COLOR_PALETTE.darkGrey }));
+    return (jsxRuntime.jsx(web.animated.rect, { x: x + 2, y: y + 2, width: width - 4, height: height - 4, fill: CHARTS_COLOR_PALETTE.darkGrey }));
 };
 
 var CustomTooltip = function (_a) {
@@ -1248,9 +1262,19 @@ var templateObject_1$18, templateObject_2$t, templateObject_3$i, templateObject_
 
 var PieChart = function (_a) {
     var _b;
-    var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin, tooltip = _a.tooltip, legend = _a.legend, arcLinkLabelsSkipAngle = _a.arcLinkLabelsSkipAngle;
+    var theme = _a.theme, colors = _a.colors, width = _a.width, height = _a.height, data = _a.data, centerItem = _a.centerItem, margin = _a.margin, tooltip = _a.tooltip, legend = _a.legend, arcLinkLabelsSkipAngle = _a.arcLinkLabelsSkipAngle, labelFormatter = _a.labelFormatter;
     var themeContext = React.useContext(styled.ThemeContext);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign({}, __assign(__assign(__assign({}, DEFAULT_CHARTS_THEME), theme), { labels: __assign(__assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: __assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_b = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _b === void 0 ? void 0 : _b.text) }) })), arcLinkLabel: function (d) { return (d.label || d.id).toString(); }, colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, padAngle: 2, data: data, margin: __assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height }, { children: jsxRuntime.jsx(pie.ResponsivePie, { theme: __assign({}, __assign(__assign(__assign({}, DEFAULT_CHARTS_THEME), theme), { labels: __assign(__assign({}, theme === null || theme === void 0 ? void 0 : theme.labels), { text: __assign({ fontWeight: themeContext.fontWeights.semibold, fill: themeContext.palette.grey[800] }, (_b = theme === null || theme === void 0 ? void 0 : theme.labels) === null || _b === void 0 ? void 0 : _b.text) }) })), arcLinkLabel: function (d) {
+                        return labelFormatter
+                            ? labelFormatter({
+                                label: d.label,
+                                id: d.id,
+                                value: d.value,
+                                data: d.data,
+                                labelPosition: "arclink",
+                            })
+                            : (d.label || d.id).toString();
+                    }, colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, enableArcLabels: false, arcLinkLabelsColor: { from: "color" }, arcLinkLabelsSkipAngle: arcLinkLabelsSkipAngle !== null && arcLinkLabelsSkipAngle !== void 0 ? arcLinkLabelsSkipAngle : 10, padAngle: 2, data: data, margin: __assign({ top: 40, bottom: 40 }, margin), tooltip: tooltip
                         ? function (node) {
                             var data = node.datum.data;
                             var label = (data === null || data === void 0 ? void 0 : data.label) || data.id;
@@ -1265,7 +1289,17 @@ var PieChart = function (_a) {
                         ? [
                             function (props) { return (jsxRuntime.jsx(CenteredItem, __assign({}, props, { theme: themeContext, label: centerItem.label, value: centerItem.value, fontSizeMultiplier: centerItem.fontSizeMultiplier }))); },
                         ]
-                        : []), true), activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.map(function (d) { return d.id; }), columns: typeof legend === "object" && legend.columns
+                        : []), true), activeOuterRadiusOffset: 12 }) })), jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: "auto" }, { children: legend ? (jsxRuntime.jsx(Legend, { colors: colors !== null && colors !== void 0 ? colors : CHARTS_COLOR_SCHEME_CATEGORICAL_8_A, data: data.map(function (d) {
+                        return labelFormatter
+                            ? labelFormatter({
+                                label: d.label,
+                                id: d.id,
+                                value: d.value,
+                                data: d,
+                                labelPosition: "legend",
+                            })
+                            : d.id.toString();
+                    }), columns: typeof legend === "object" && legend.columns
                         ? legend.columns
                         : undefined, width: typeof legend === "object" && legend.width
                         ? legend.width
@@ -2419,7 +2453,7 @@ var WorkspacesDropdown = function (props) {
 };
 var templateObject_1$D;
 
-var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  margin-right: 2px;\n  border-right: none;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"], ["\n  margin-right: 2px;\n  border-right: none;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"])), function (_a) {
+var LogoIconContainer = styled__default["default"](reactChrome.HeaderItem)(templateObject_1$C || (templateObject_1$C = __makeTemplateObject(["\n  margin-right: 2px;\n  border-right: none;\n  cursor: pointer;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"], ["\n  margin-right: 2px;\n  border-right: none;\n  cursor: pointer;\n  @media (max-width: ", ") {\n    right: 0;\n    left: 0;\n    margin-right: auto;\n    margin-left: auto;\n    position: absolute;\n  }\n"])), function (_a) {
     var theme = _a.theme;
     return theme.breakpoints.md;
 });
@@ -2451,7 +2485,8 @@ var MenuItem$1 = styled__default["default"](reactChrome.HeaderItem)(templateObje
     return theme.breakpoints.md;
 });
 var BrandItem = function (props) {
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({}, props, { onClick: props.toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), props.menuLabel && jsxRuntime.jsx(HeaderItemText, { children: props.menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, props, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
+    var menuLabel = props.menuLabel, toggleMenu = props.toggleMenu, rest = __rest(props, ["menuLabel", "toggleMenu"]);
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(MenuItem$1, __assign({ onClick: toggleMenu }, { children: [jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(SvgMenuStroke, {}) }), menuLabel && jsxRuntime.jsx(HeaderItemText, { children: menuLabel })] })), jsxRuntime.jsx(LogoIconContainer, __assign({}, rest, { hasLogo: true }, { children: jsxRuntime.jsx(HeaderItemIcon, { children: jsxRuntime.jsx(Logo, { type: "icon", size: 150 }) }) })), props.workspaces && props.workspaces.length > 1 ? (jsxRuntime.jsx(DropdownItem, { children: jsxRuntime.jsx(WorkspacesDropdown, { workspaces: props.workspaces, workspacesLabel: props.workspacesLabel, activeWorkspace: props.activeWorkspace, onWorkspaceChange: props.onWorkspaceChange }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.brandName && (jsxRuntime.jsx(BrandName, __assign({}, props, { children: jsxRuntime.jsx(HeaderItemText, { children: props.brandName }) }))) }))] }));
 };
 var templateObject_1$C, templateObject_2$j, templateObject_3$f, templateObject_4$b;
 

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

@@ -2,4 +2,6 @@
 export interface BreadcrumbArgs extends React.HTMLAttributes<HTMLDivElement> {
     /** The breadcrumb items */
     children: any[];
+    /** Show/hide last arrow */
+    showLastArrow?: boolean;
 }

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

@@ -1,10 +1,3 @@
-import { BreadcrumbArgs } from './_types';
-/**
- * Breadcrumbs mark and communicate a user’s location in the product.
- * <hr>
- * Used for this:
-    - To show the user where they are in a nested navigation
-    - To provide a quick way to navigate to ancestor pages
- */
-declare const Breadcrumb: (props: BreadcrumbArgs) => JSX.Element;
+import { BreadcrumbArgs } from "./_types";
+declare const Breadcrumb: ({ children, showLastArrow, ...props }: BreadcrumbArgs) => JSX.Element;
 export { Breadcrumb };

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

@@ -1,5 +1,5 @@
 import { ComponentMeta, Story } from "@storybook/react";
 import { BreadcrumbArgs } from "./_types";
 export declare const Default: Story<BreadcrumbArgs>;
-declare const _default: ComponentMeta<(props: BreadcrumbArgs) => JSX.Element>;
+declare const _default: ComponentMeta<({ children, showLastArrow, ...props }: BreadcrumbArgs) => JSX.Element>;
 export default _default;

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

@@ -1,6 +1,6 @@
 import React from "react";
 export declare type ChartTooltipFunction = ({ value, label, data, }: {
     value: number;
-    label: string;
+    label: string | number;
     data?: Record<string, string | number | undefined>;
 }) => React.ReactNode;

package/build/stories/charts/pie/_types.d.ts

@@ -1,9 +1,14 @@
 import { PieSvgProps } from "@nivo/pie";
 import { ChartTooltipFunction } from "../_types";
 import { LegendType } from "../Legend";
+declare type BasicPieDatum = {
+    id: string | number;
+    label?: string | number;
+    value: number;
+};
 declare type PieDatum = {
-    id: string;
-    label?: string;
+    id: string | number;
+    label?: string | number;
     value: number;
 } & {
     [key: string]: string | number | undefined;
@@ -23,5 +28,9 @@ export interface PieChartProps {
     tooltip?: ChartTooltipFunction;
     legend?: LegendType | true;
     arcLinkLabelsSkipAngle?: number;
+    labelFormatter?: (data: BasicPieDatum & {
+        labelPosition: "arclink" | "legend";
+        data?: PieDatum;
+    }) => string;
 }
 export {};

package/build/stories/charts/pie/index.d.ts

@@ -1,3 +1,3 @@
 import { PieChartProps } from "./_types";
-declare const PieChart: ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, }: PieChartProps) => JSX.Element;
+declare const PieChart: ({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, labelFormatter, }: PieChartProps) => JSX.Element;
 export { PieChart };

package/build/stories/charts/pie/index.stories.d.ts

@@ -2,5 +2,6 @@ import { ComponentMeta, Story } from "@storybook/react";
 import { PieChartProps } from "./_types";
 export declare const Default: Story<PieChartProps>;
 export declare const WithCustomTooltip: Story<PieChartProps>;
-declare const _default: ComponentMeta<({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, }: PieChartProps) => JSX.Element>;
+export declare const WithCustomLabel: Story<PieChartProps>;
+declare const _default: ComponentMeta<({ theme, colors, width, height, data, centerItem, margin, tooltip, legend, arcLinkLabelsSkipAngle, labelFormatter, }: PieChartProps) => JSX.Element>;
 export default _default;

package/package.json

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