@carto/meridian-ds 2.0.1 → 2.0.2-alpha-timeseries.1

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- fix(TimeSeriesWidgetUI): Fix TimeSeriesWidgetUI overflowing available height [#226](https://github.com/CartoDB/meridian-ds/pull/226)
+
 ## 2.0
 
 ### 2.0.1

package/dist/types/widgets/ChartLegend.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/widgets/ChartLegend.tsx"],"names":[],"mappings":"AAoEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,kBAAkB,EAClB,MAAkB,EAClB,eAAe,GAChB,EAAE;IACD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACzD,kBAAkB,EAAE,MAAM,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,2CAkJA"}
+{"version":3,"file":"ChartLegend.d.ts","sourceRoot":"","sources":["../../../src/widgets/ChartLegend.tsx"],"names":[],"mappings":"AAmEA,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,EAClC,MAAM,EACN,kBAAkB,EAClB,MAAkB,EAClB,eAAe,GAChB,EAAE;IACD,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAA;IACzD,kBAAkB,EAAE,MAAM,EAAE,CAAA;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC/B,eAAe,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CACjD,2CAsJA"}

package/dist/widgets/index.cjs

@@ -2016,7 +2016,7 @@ function PieSkeleton({ height }) {
 }
 const Legend$1 = material.styled(material.Box)(({ theme }) => ({
   position: "relative",
-  padding: theme.spacing(1.25, 1, 0, 1),
+  padding: theme.spacing(0.75, 0.75, 0, 0.75),
   width: "100%"
 }));
 const ItemsContainer = material.styled(material.Box)(({ theme }) => ({
@@ -2025,9 +2025,8 @@ const ItemsContainer = material.styled(material.Box)(({ theme }) => ({
   flexDirection: "row",
   overflowX: "hidden",
   gap: theme.spacing(2),
-  // Accessibility tweak to display focus indicator properly
-  padding: theme.spacing(0.5),
-  margin: theme.spacing(-0.5)
+  // a11y: padding prevents clipping focus outline
+  padding: theme.spacing(0.25)
 }));
 const Item = material.styled(material.Box)(({ theme }) => ({
   display: "flex",
@@ -2081,6 +2080,9 @@ function ChartLegend({
   const legendRef = React.useRef(null);
   const containerRef = React.useRef(null);
   const showMoreButtonsRef = React.useRef(null);
+  if (series.length === 0) {
+    series = [{ name: "", color: theme.palette.text.disabled }];
+  }
   const intl = reactIntl.useIntl();
   const intlConfig = TablePaginationActions.useImperativeIntl(intl);
   function handleClickRight() {
@@ -2141,7 +2143,7 @@ function ChartLegend({
           return /* @__PURE__ */ jsxRuntime.jsxs(
             Item,
             {
-              tabIndex: 0,
+              tabIndex: onCategoryClick ? 0 : void 0,
               onClick: onCategoryClick ? () => onCategoryClick(category.name) : void 0,
               onKeyDown: onCategoryClick ? (e) => onCategoryPress(e, category.name) : void 0,
               style: {
@@ -2159,7 +2161,7 @@ function ChartLegend({
                   {
                     variant: "overline",
                     color: selected ? void 0 : "text.disabled",
-                    children: label
+                    children: label || /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: " " })
                   }
                 )
               ]
@@ -4764,7 +4766,7 @@ function TimeSeriesWidgetUIContent({
   );
   const isLegendVisible = Boolean(showLegend ?? series.length > 1);
   const header = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "textSecondary", variant: "caption", children: currentDate ?? "-" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(material.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(TablePaginationActions.Typography, { color: "textSecondary", variant: "caption", children: currentDate || "-" }) }),
     filterable && showClearButton && /* @__PURE__ */ jsxRuntime.jsx(
       material.Link,
       {

package/dist/widgets/index.js

@@ -2014,7 +2014,7 @@ function PieSkeleton({ height }) {
 }
 const Legend$1 = styled(Box)(({ theme }) => ({
   position: "relative",
-  padding: theme.spacing(1.25, 1, 0, 1),
+  padding: theme.spacing(0.75, 0.75, 0, 0.75),
   width: "100%"
 }));
 const ItemsContainer = styled(Box)(({ theme }) => ({
@@ -2023,9 +2023,8 @@ const ItemsContainer = styled(Box)(({ theme }) => ({
   flexDirection: "row",
   overflowX: "hidden",
   gap: theme.spacing(2),
-  // Accessibility tweak to display focus indicator properly
-  padding: theme.spacing(0.5),
-  margin: theme.spacing(-0.5)
+  // a11y: padding prevents clipping focus outline
+  padding: theme.spacing(0.25)
 }));
 const Item = styled(Box)(({ theme }) => ({
   display: "flex",
@@ -2079,6 +2078,9 @@ function ChartLegend({
   const legendRef = useRef(null);
   const containerRef = useRef(null);
   const showMoreButtonsRef = useRef(null);
+  if (series.length === 0) {
+    series = [{ name: "", color: theme.palette.text.disabled }];
+  }
   const intl = useIntl();
   const intlConfig = useImperativeIntl(intl);
   function handleClickRight() {
@@ -2139,7 +2141,7 @@ function ChartLegend({
           return /* @__PURE__ */ jsxs(
             Item,
             {
-              tabIndex: 0,
+              tabIndex: onCategoryClick ? 0 : void 0,
               onClick: onCategoryClick ? () => onCategoryClick(category.name) : void 0,
               onKeyDown: onCategoryClick ? (e) => onCategoryPress(e, category.name) : void 0,
               style: {
@@ -2157,7 +2159,7 @@ function ChartLegend({
                   {
                     variant: "overline",
                     color: selected ? void 0 : "text.disabled",
-                    children: label
+                    children: label || /* @__PURE__ */ jsx(Fragment, { children: " " })
                   }
                 )
               ]
@@ -4762,7 +4764,7 @@ function TimeSeriesWidgetUIContent({
   );
   const isLegendVisible = Boolean(showLegend ?? series.length > 1);
   const header = /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", variant: "caption", children: currentDate ?? "-" }) }),
+    /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(Typography, { color: "textSecondary", variant: "caption", children: currentDate || "-" }) }),
     filterable && showClearButton && /* @__PURE__ */ jsx(
       Link,
       {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/meridian-ds",
-  "version": "2.0.1",
+  "version": "2.0.2-alpha-timeseries.1",
   "description": "CARTO Meridian Design System",
   "type": "module",
   "scripts": {
@@ -165,5 +165,6 @@
   "bugs": {
     "url": "https://github.com/CartoDB/meridian-ds/issues"
   },
-  "homepage": "https://github.com/CartoDB/meridian-ds#readme"
+  "homepage": "https://github.com/CartoDB/meridian-ds#readme",
+  "stableVersion": "2.0.1"
 }