@appquality/unguess-design-system 2.12.42 → 2.12.44

package/CHANGELOG.md

@@ -1,3 +1,30 @@
+# v2.12.44 (Fri Dec 02 2022)
+
+#### 🐛 Bug Fix
+
+- Update sunburst [#136](https://github.com/AppQuality/unguess-design-system/pull/136) ([@d-beezee](https://github.com/d-beezee))
+- feat(sunburst): Allow passing custom data to tooltip [#135](https://github.com/AppQuality/unguess-design-system/pull/135) ([@d-beezee](https://github.com/d-beezee))
+
+#### Authors: 1
+
+- [@d-beezee](https://github.com/d-beezee)
+
+---
+
+# v2.12.43 (Fri Dec 02 2022)
+
+#### 🐛 Bug Fix
+
+- Add zindex default to tooltip [#134](https://github.com/AppQuality/unguess-design-system/pull/134) ([@marcbon](https://github.com/marcbon) [@d-beezee](https://github.com/d-beezee))
+- fix(tooltip): add zIndex default props + add levels attribute on theme object [#133](https://github.com/AppQuality/unguess-design-system/pull/133) ([@marcbon](https://github.com/marcbon))
+
+#### Authors: 2
+
+- [@d-beezee](https://github.com/d-beezee)
+- Marco Bonomo ([@marcbon](https://github.com/marcbon))
+
+---
+
 # v2.12.42 (Thu Dec 01 2022)
 
 #### 🐛 Bug Fix

package/build/index.js

@@ -288,7 +288,12 @@ var components = __assign(__assign({}, reactTheming.DEFAULT_THEME.components), {
         return isSelected ? { fontWeight: fontWeights.semibold } : undefined;
     } });
 
-var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: fontWeights, gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), lineHeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: "16px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }) });
+var theme = __assign(__assign({}, reactTheming.DEFAULT_THEME), { breakpoints: __assign(__assign({}, reactTheming.DEFAULT_THEME.breakpoints), { xxl: "1440px" }), colors: __assign(__assign({}, reactTheming.DEFAULT_THEME.colors), { primaryHue: palette.blue[600], warningHue: palette.yellow[600], successHue: palette.teal["M600"], dangerHue: palette.red[600], accentHue: palette.water[600] }), palette: palette, fonts: __assign(__assign({}, reactTheming.DEFAULT_THEME.fonts), { system: '"Poppins",sans-serif,Helvetica,Arial,sans-serif' }), fontWeights: fontWeights, gradients: gradients, borderRadii: __assign(__assign({}, reactTheming.DEFAULT_THEME.borderRadii), { lg: "8px", xl: "16px", xxl: "32px" }), lineHeights: __assign(__assign({}, reactTheming.DEFAULT_THEME.lineHeights), { xs: "16px" }), components: components, shadows: __assign(__assign({}, reactTheming.DEFAULT_THEME.shadows), { boxShadow: boxShadow }), levels: {
+        back: -1,
+        base: 0,
+        front: 100,
+        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;
@@ -1362,9 +1367,11 @@ var SunburstChart = function (_a) {
         var data = _a.data, color = _a.color;
         setCurrentData(data);
         setCurrentColor(color);
+    };
+    React.useEffect(function () {
         if (onChange)
             onChange(currentData);
-    };
+    }, [currentData]);
     if (!data.children)
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: "No data" });
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(ChartContainer, __assign({ width: width, height: height, style: isHovering ? { cursor: "pointer" } : undefined }, { children: jsxRuntime.jsx(sunburst.ResponsiveSunburst, { theme: tooltip
@@ -1384,6 +1391,7 @@ var SunburstChart = function (_a) {
                         ? function (node) { return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: tooltip({
                                 label: node.data.label || node.data.name,
                                 value: getChildrenValue(node.data),
+                                data: __assign(__assign({}, node.data), { children: undefined }),
                             }) })); }
                         : undefined, layers: __spreadArray(__spreadArray([
                         "arcs"
@@ -1407,7 +1415,7 @@ var SunburstChart = function (_a) {
                                 color: clickedData.color,
                             });
                         }
-                    } }) })), 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.children.map(function (d) { return d.name; }), columns: typeof legend === "object" && legend.columns
+                    } }) })), 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.children.map(function (d) { return d.label || d.name; }), columns: typeof legend === "object" && legend.columns
                         ? legend.columns
                         : undefined, width: typeof legend === "object" && legend.width
                         ? legend.width
@@ -3645,7 +3653,11 @@ var templateObject_1$4, templateObject_2$1, templateObject_3;
  *    - To provide information a user needs to know or remember
  *    - To display truncated text, use a title attribute instead
  */
-var TooltipComponent = function (props) { return jsxRuntime.jsx(reactTooltips.Tooltip, __assign({}, props)); };
+var TooltipComponent = function (props) {
+    var _a;
+    var theme = React.useContext(styled.ThemeContext);
+    return jsxRuntime.jsx(reactTooltips.Tooltip, __assign({}, props, { zIndex: (_a = props.zIndex) !== null && _a !== void 0 ? _a : theme.levels.front }));
+};
 var Tooltip = styled__default["default"](TooltipComponent)(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  box-shadow: ", ";\n"], ["\n  box-shadow: ", ";\n"])), function (_a) {
     var theme = _a.theme;
     return theme.shadows.lg("".concat(theme.space.base * 3, "px"), "".concat(theme.space.base * 5, "px"), reactTheming.getColor("neutralHue", 600, theme, 0.15));

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

@@ -6,6 +6,7 @@ export interface SunburstData {
     label?: string;
     children?: SunburstData[];
     value?: number;
+    [key: string]: SunburstData[keyof SunburstData] | string | number | boolean;
 }
 export interface SunburstChartProps {
     data: SunburstData;

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

@@ -224,6 +224,12 @@ declare const theme: {
         md: (color: string) => string;
         lg: (offsetY: string, blurRadius: string, color: string) => string;
     };
+    levels: {
+        back: number;
+        base: number;
+        front: number;
+        modal: number;
+    };
     rtl: boolean;
     document?: any;
     borders: {

package/package.json

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