@geotab/zenith 3.8.0-beta.1 → 3.8.1-beta.0

package/README.md

@@ -54,22 +54,26 @@ Zenith library provides components defined in Zenith Design System. It includes
 
 ## Change log
 
+### 3.8.1
+
+- Fix horizontal pie chart center text scaling and legend toggle
+
 ### 3.8.0
 
-- Create reusable File upload component
-- Improve Accordion component Storybook documentation
-- Improve Divider component Storybook documentation
-- Improve accessibility for DataGrid sorting
-- Create Chip component documentation
-- Update sort controls in mobile Table
-- Improve accessibility for Radio button
-- Improve accessibility for SummaryTiles
-- Accessibility updates for Dropdown, MobileSheet, ControlledPopup
+- Create `FileUpload` component
+- Improve `Accordion` component Storybook documentation
+- Improve `Divider` component Storybook documentation
+- Improve accessibility for `DataGrid` sorting
+- Create `Chip` component documentation
+- Update sort controls in mobile `Table`
+- Improve accessibility for `Radio` button
+- Improve accessibility for `SummaryTile`
+- Accessibility updates for `Dropdown`, `MobileSheet`, `ControlledPopup`
 - Add Prettier CI job to Zenith pipeline
-- SummaryTile refactor, documentation updates
+- `SummaryTile` refactor, documentation updates
 - Updated translations
 - Add multiline table header support (word wrap for long strings)
-- SidePanel outside click improvements
+- `SidePanel` outside click improvements
 
 ### 3.7.0
 

package/dist/calendar/calendar.js

@@ -645,7 +645,7 @@ const buttonType_1 = require("../button/buttonType");
 const zen_1 = require("../utils/zen");
 const DEFAULT_START_DAY_OF_WEEK = 0;
 const DEFAULT_YEAR_RANGE = 20;
-exports.monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "Ma", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+exports.monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 const Calendar = ({
   id,
   value,

package/dist/chart/pieChart/centerTextPlugin.js

@@ -16,16 +16,23 @@ const centerTextPlugin = (centerText) => ({
         const css = (name) => getCssVar(chart.canvas, name);
         const fontFamily = css("--main-font");
         const hasLabel = !!centerText.label;
-        const valueY = hasLabel ? centerY - 14 : centerY;
+        const meta = chart.getDatasetMeta(0);
+        const controllerRadius = meta.controller.innerRadius;
+        const innerRadius = typeof controllerRadius === "number" && controllerRadius > 0 ? controllerRadius : Math.min(width, height) * 0.325;
+        const maxValueFont = parseFloat(css("--pie-center-value-font-size")) || 28;
+        const maxLabelFont = parseFloat(css("--pie-center-label-font-size")) || 14;
+        const valueFontSize = Math.max(10, Math.min(maxValueFont, innerRadius * 0.45));
+        const labelFontSize = Math.max(8, Math.min(maxLabelFont, innerRadius * 0.22));
+        const valueY = hasLabel ? centerY - valueFontSize * 0.5 : centerY;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
-        ctx.font = `${css("--pie-center-value-font-weight")} ${css("--pie-center-value-font-size")} ${fontFamily}`;
+        ctx.font = `${css("--pie-center-value-font-weight")} ${valueFontSize}px ${fontFamily}`;
         ctx.fillStyle = css("--text-primary");
         ctx.fillText(String(centerText.value), centerX, valueY);
         if (hasLabel) {
-            ctx.font = `${css("--pie-center-label-font-weight")} ${css("--pie-center-label-font-size")} ${fontFamily}`;
+            ctx.font = `${css("--pie-center-label-font-weight")} ${labelFontSize}px ${fontFamily}`;
             ctx.fillStyle = css("--text-secondary");
-            ctx.fillText(String(centerText.label), centerX, centerY + 16);
+            ctx.fillText(String(centerText.label), centerX, centerY + labelFontSize * 1.1);
         }
         ctx.restore();
     }

package/dist/chart/pieChart.js

@@ -59,7 +59,16 @@ const PieChart = (_a) => {
     }, [fontSize, dark]);
     const defOptions = (0, react_1.useMemo)(() => (0, getDefaultOptions_1.getDefaultOptions)(), []);
     const chartOptions = (0, utils_1.deepMerge)(defOptions, options);
-    const { isHidden, toggleHidden } = (0, useHidden_1.useHidden)();
+    const { isHidden, toggleHidden: rawToggle } = (0, useHidden_1.useHidden)();
+    const pieData = data.datasets[0].data;
+    const toggleHidden = (0, react_1.useCallback)((index) => {
+        if (!isHidden(index)) {
+            const visibleCount = pieData.filter((_, i) => !isHidden(i)).length;
+            if (visibleCount <= 1)
+                return;
+        }
+        rawToggle(index);
+    }, [isHidden, rawToggle, pieData]);
     const chartData = (0, react_1.useMemo)(() => {
         const chData = Object.assign({}, data);
         chData.datasets = chData.datasets.map(ds => (0, getDefaultDatasetStyle_1.getDefaultDatasetStyle)(ds));

package/dist/index.js

@@ -18,7 +18,6 @@ exports.IconVolumeHalf = exports.IconVolumeFull = exports.IconVolumeDown = expor
 exports.isButton = exports.findPrevFocusable = exports.findNextFocusable = exports.findLastFocusable = exports.findFirstFocusable = exports.Menu = exports.ControlledMenu = exports.isDragNotClick = exports.changeOrder = exports.ListItem = exports.List = exports.ItemData = exports.ItemCompact = exports.LineChartMini = exports.getDefaultDatasetStyle = exports.htmlLegendPlugin = exports.LEGEND_PLUGIN_ID = exports.LineChart = exports.useLayoutSize = exports.LayoutFullScreenProvider = exports.useLayoutFullScreen = exports.LayoutFullScreenElementProvider = exports.useLayoutFullScreenElement = exports.Layout = exports.ImageTapToUpload = exports.ImageNothingFound = exports.ImageNoMatchingAssets = exports.ImageLooking = exports.ImageCloudUpload = exports.ImageAdjustFilter = exports.IconZoom2 = exports.IconZoom = exports.IconZone = exports.IconYen = exports.IconWrite = exports.IconWrench = exports.IconWorld = exports.IconWorkday = exports.IconWifi2 = exports.IconWifi = exports.IconWhisper = exports.IconWebcam = exports.IconWatch2 = exports.IconWatch = exports.IconWarning = exports.IconWallet1 = exports.IconWallet = exports.IconVolumeOn = exports.IconVolumeOff = exports.IconVolumeMinimum = void 0;
 exports.SummaryTileBarDisplayName = exports.SummaryTileBar = exports.getTypeClassName = exports.SummaryTileTrigger = exports.SummaryTile = exports.SummaryTileDisplayName = exports.SummaryTileSize = exports.SummaryTileType = exports.Summary = exports.Summaries = exports.Stepper = exports.SortControl = exports.SortDirections = exports.Skeleton = exports.LazyContent = exports.SidePanel = exports.CUSTOM_POPUP_COMPONENT_CLASSNAME = exports.SidePanelCloseReason = exports.isChildPopup = exports.SelectField = exports.Select = exports.SearchInput = exports.Range = exports.RadioGroup = exports.Radio = exports.ProgressBar = exports.ProgreesBarSize = exports.ProgressBarType = exports.PrimaryIcon = exports.Popup = exports.PillExpandable = exports.Pill = exports.PaginationType = exports.Pagination = exports.PageLayout = exports.PageContentLayout = exports.PageHeaderMenu = exports.PageHeaderMenuDisplayName = exports.PageHeaderButton = exports.PageHeaderButtonDisplayName = exports.PageHeader = exports.PageHeaderDisplayName = exports.Notification = exports.getPredefinedFocusableItem = exports.DialogContentNew = exports.Modal = exports.MobileSheet = exports.MiniTabs = exports.MiniTabsSize = exports.isLink = void 0;
 exports.Waiting = exports.UserFormatProvider = exports.useDrive = exports.ThemeProvider = exports.ThemeDrive = exports.ThemeDark = exports.useLanguage = exports.injectString = exports.dictionaries = exports.LanguageProvider = exports.getFirstFocusableItem = exports.getNewFocusableItem = exports.HeaderButtonsProvider = exports.AbortablePromise = exports.Tooltip = exports.removeArrowClasses = exports.calculateArrowPosition = exports.ToggleButtonRaw = exports.ToggleButton = exports.Toast = exports.useToast = exports.TimePicker = exports.TextareaRaw = exports.Textarea = exports.TextInputRaw = exports.TextInput = exports.TextIconButton = exports.ButtonIconPosition = exports.Tabs = exports.TabsDisplayName = exports.ActionLinkColumn = exports.CheckboxColumn = exports.MainColumn = exports.ActionsColumn = exports.getSortableValue = exports.ColumnSortDirection = exports.getEmptySelection = exports.Table = exports.useNestedRows = exports.NestedData = exports.TabBarContent = exports.TabBar = void 0;
-/* eslint-disable max-len */
 var absolute_1 = require("./absolute/absolute");
 Object.defineProperty(exports, "Absolute", { enumerable: true, get: function () { return absolute_1.Absolute; } });
 var accordion_1 = require("./accordion/accordion");

package/dist/summaryTile/summaryTile.d.ts

@@ -54,8 +54,6 @@ export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
     tooltipSize?: TooltipSize;
     /** When `true`, shows a skeleton placeholder while data is being fetched — two skeleton elements replace the title and content areas. */
     isLoading?: boolean;
-    /** When `true` and the tile is interactive, sets `aria-current="page"` on the tile. */
-    isSelected?: boolean;
     /** Analytics identifier applied as `data-analytics-id`. Defaults to a kebab-cased version of `title`. */
     dataAnalyticsId?: string;
 }
@@ -75,6 +73,6 @@ export declare const SummaryTileDisplayName = "SummaryTile";
  * Use inside `SummaryTileBar` to group multiple tiles in a scrollable row.
  */
 export declare const SummaryTile: {
-    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading, isSelected, dataAnalyticsId }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading, dataAnalyticsId }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/summaryTile/summaryTile.js

@@ -122,7 +122,6 @@ const SummaryTile = ({
   tooltipText,
   tooltipAlignment = "top",
   isLoading = false,
-  isSelected = false,
   dataAnalyticsId
 }) => {
   const {
@@ -178,7 +177,7 @@ const SummaryTile = ({
     }),
     children: tooltipText
   }) : null;
-  const ariaCurrentProps = isSelected && isInteractive ? {
+  const ariaCurrentProps = tileType === SummaryTileType.Active && isInteractive ? {
     "aria-current": "page"
   } : {};
   // When both onClick and tooltipText are present, the tooltip trigger

package/esm/calendar/calendar.js

@@ -637,7 +637,7 @@ injectString("ro-RO", "Next month", "Luna urm\u0103toare");
 injectString("ar-SA", "Next month", "\u0627\u0644\u0634\u0647\u0631 \u0627\u0644\u062A\u0627\u0644\u064A");
 const DEFAULT_START_DAY_OF_WEEK = 0;
 const DEFAULT_YEAR_RANGE = 20;
-export const monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "Ma", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
+export const monthLabelsArray = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
 export const Calendar = ({
   id,
   value,

package/esm/chart/pieChart/centerTextPlugin.js

@@ -13,16 +13,23 @@ export const centerTextPlugin = (centerText) => ({
         const css = (name) => getCssVar(chart.canvas, name);
         const fontFamily = css("--main-font");
         const hasLabel = !!centerText.label;
-        const valueY = hasLabel ? centerY - 14 : centerY;
+        const meta = chart.getDatasetMeta(0);
+        const controllerRadius = meta.controller.innerRadius;
+        const innerRadius = typeof controllerRadius === "number" && controllerRadius > 0 ? controllerRadius : Math.min(width, height) * 0.325;
+        const maxValueFont = parseFloat(css("--pie-center-value-font-size")) || 28;
+        const maxLabelFont = parseFloat(css("--pie-center-label-font-size")) || 14;
+        const valueFontSize = Math.max(10, Math.min(maxValueFont, innerRadius * 0.45));
+        const labelFontSize = Math.max(8, Math.min(maxLabelFont, innerRadius * 0.22));
+        const valueY = hasLabel ? centerY - valueFontSize * 0.5 : centerY;
         ctx.textAlign = "center";
         ctx.textBaseline = "middle";
-        ctx.font = `${css("--pie-center-value-font-weight")} ${css("--pie-center-value-font-size")} ${fontFamily}`;
+        ctx.font = `${css("--pie-center-value-font-weight")} ${valueFontSize}px ${fontFamily}`;
         ctx.fillStyle = css("--text-primary");
         ctx.fillText(String(centerText.value), centerX, valueY);
         if (hasLabel) {
-            ctx.font = `${css("--pie-center-label-font-weight")} ${css("--pie-center-label-font-size")} ${fontFamily}`;
+            ctx.font = `${css("--pie-center-label-font-weight")} ${labelFontSize}px ${fontFamily}`;
             ctx.fillStyle = css("--text-secondary");
-            ctx.fillText(String(centerText.label), centerX, centerY + 16);
+            ctx.fillText(String(centerText.label), centerX, centerY + labelFontSize * 1.1);
         }
         ctx.restore();
     }

package/esm/chart/pieChart.js

@@ -10,7 +10,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useId, useMemo, useRef } from "react";
+import { useCallback, useContext, useEffect, useId, useMemo, useRef } from "react";
 import { Pie } from "../react-chartjs/typedCharts";
 import { Chart as ChartJS, PieController, ArcElement } from "chart.js/auto";
 import "../react-chartjs/dateAdapter";
@@ -56,7 +56,16 @@ export const PieChart = (_a) => {
     }, [fontSize, dark]);
     const defOptions = useMemo(() => getDefaultOptions(), []);
     const chartOptions = deepMerge(defOptions, options);
-    const { isHidden, toggleHidden } = useHidden();
+    const { isHidden, toggleHidden: rawToggle } = useHidden();
+    const pieData = data.datasets[0].data;
+    const toggleHidden = useCallback((index) => {
+        if (!isHidden(index)) {
+            const visibleCount = pieData.filter((_, i) => !isHidden(i)).length;
+            if (visibleCount <= 1)
+                return;
+        }
+        rawToggle(index);
+    }, [isHidden, rawToggle, pieData]);
     const chartData = useMemo(() => {
         const chData = Object.assign({}, data);
         chData.datasets = chData.datasets.map(ds => getDefaultDatasetStyle(ds));

package/esm/summaryTile/summaryTile.d.ts

@@ -54,8 +54,6 @@ export interface ISummaryTile extends IZenComponentProps, IZenGridItem {
     tooltipSize?: TooltipSize;
     /** When `true`, shows a skeleton placeholder while data is being fetched — two skeleton elements replace the title and content areas. */
     isLoading?: boolean;
-    /** When `true` and the tile is interactive, sets `aria-current="page"` on the tile. */
-    isSelected?: boolean;
     /** Analytics identifier applied as `data-analytics-id`. Defaults to a kebab-cased version of `title`. */
     dataAnalyticsId?: string;
 }
@@ -75,6 +73,6 @@ export declare const SummaryTileDisplayName = "SummaryTile";
  * Use inside `SummaryTileBar` to group multiple tiles in a scrollable row.
  */
 export declare const SummaryTile: {
-    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading, isSelected, dataAnalyticsId }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
+    ({ className, children, size, title, tileType, id, onClick, tooltipText, tooltipAlignment, isLoading, dataAnalyticsId }: ISummaryTile): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/esm/summaryTile/summaryTile.js

@@ -83,7 +83,6 @@ export const SummaryTile = ({
   tooltipText,
   tooltipAlignment = "top",
   isLoading = false,
-  isSelected = false,
   dataAnalyticsId
 }) => {
   const {
@@ -139,7 +138,7 @@ export const SummaryTile = ({
     }),
     children: tooltipText
   }) : null;
-  const ariaCurrentProps = isSelected && isInteractive ? {
+  const ariaCurrentProps = tileType === SummaryTileType.Active && isInteractive ? {
     "aria-current": "page"
   } : {};
   // When both onClick and tooltipText are present, the tooltip trigger

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@geotab/zenith",
-    "version": "3.8.0-beta.1",
+    "version": "3.8.1-beta.0",
     "description": "Zenith components library on React",
     "main": "dist/index.js",
     "types": "esm/index.d.ts",