@automattic/charts 0.56.0 → 0.56.2

package/src/charts/private/with-responsive/with-responsive.tsx

@@ -1,4 +1,5 @@
 import { useParentSize } from '@visx/responsive';
+import styles from './with-responsive.module.scss';
 import type { BaseChartProps } from '../../../types';
 import type { ComponentType } from 'react';
 
@@ -96,6 +97,7 @@ export function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'o
 			<div
 				ref={ parentRef }
 				data-testid="responsive-wrapper"
+				className={ styles.container }
 				style={ {
 					width: size ?? width ?? '100%',
 					height: size ?? height ?? defaultHeight,

package/src/components/legend/private/base-legend.module.scss

@@ -104,7 +104,6 @@
 .legend-item-text {
 
 	&--wrap {
-		word-wrap: break-word;
 		overflow-wrap: break-word;
 		white-space: normal;
 		hyphens: auto;

package/dist/chunk-HOTYXYXV.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-HOTYXYXV.cjs","../src/charts/private/with-responsive/with-responsive.tsx"],"names":[],"mappings":"AAAA;ACAA,8CAA8B;AAuG1B,+CAAA;AA5EJ,IAAM,wBAAA,EAA0B,CAAE;AAAA,EACjC,mBAAA,EAAqB,GAAA;AAAA,EACrB,SAAA,EAAW,IAAA;AAAA,EACX;AACD,CAAA,EAAA,GAAyB;AACxB,EAAA,MAAM;AAAA,IACL,SAAA;AAAA,IACA,KAAA,EAAO,WAAA;AAAA,IACP,MAAA,EAAQ;AAAA,EACT,EAAA,EAAI,uCAAA;AAAe,IAClB,YAAA,EAAc,kBAAA;AAAA,IACd,yBAAA,EAA2B;AAAA,EAC5B,CAAE,CAAA;AAEF,EAAA,MAAM,eAAA,EAAiB,YAAA,EAAc,EAAA,EAAI,IAAA,CAAK,GAAA,CAAK,WAAA,EAAa,QAAS,EAAA,EAAI,CAAA;AAC7E,EAAA,MAAM,gBAAA,EAAkB,YAAA,IAAgB,KAAA,EAAA,EAAY,eAAA,EAAiB,YAAA,EAAc,YAAA;AAEnF,EAAA,OAAO;AAAA,IACN,SAAA;AAAA,IACA,KAAA,EAAO,cAAA;AAAA,IACP,MAAA,EAAQ,eAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR,cAAA,EAAgB,YAAA,IAAgB,KAAA;AAAA,EACjC,CAAA;AACD,CAAA;AASO,SAAS,cAAA,CACf,gBAAA,EACC;AACD,EAAA,OAAO,SAAS,eAAA,CAAiB;AAAA,IAChC,mBAAA,EAAqB,GAAA;AAAA,IACrB,SAAA,EAAW,IAAA;AAAA,IACX,WAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,MAAA;AAAA,IACA,GAAG;AAAA,EACJ,CAAA,EAAgF;AAC/E,IAAA,MAAM;AAAA,MACL,SAAA;AAAA,MACA,KAAA,EAAO,aAAA;AAAA,MACP,MAAA,EAAQ,cAAA;AAAA,MACR;AAAA,IACD,EAAA,EAAI,uBAAA,CAAyB;AAAA,MAC5B,kBAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,IACD,CAAE,CAAA;AAIF,IAAA,MAAM,eAAA,EAAiB,cAAA,GAAiB,KAAA,GAAQ,MAAA,GAAS,CAAA;AACzD,IAAA,MAAM,gBAAA,EAAkB,eAAA,GAAkB,KAAA,GAAQ,OAAA,GAAU,CAAA;AAE5D,IAAA,MAAM,cAAA,EAAgB,eAAA,EAAiB,OAAA,EAAS,MAAA;AAEhD,IAAA,uBACC,6BAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACA,GAAA,EAAM,SAAA;AAAA,QACN,aAAA,EAAY,oBAAA;AAAA,QACZ,KAAA,EAAQ;AAAA,UACP,KAAA,oCAAO,IAAA,UAAQ,OAAA,UAAS,QAAA;AAAA,UACxB,MAAA,oCAAQ,IAAA,UAAQ,QAAA,UAAU;AAAA,QAC3B,CAAA;AAAA,QAEA,QAAA,kBAAA,6BAAA;AAAA,UAAC,gBAAA;AAAA,UAAA;AAAA,YACA,KAAA,EAAQ,cAAA;AAAA,YACR,MAAA,EAAS,eAAA;AAAA,YACT,IAAA,EAAO,cAAA;AAAA,YACL,GAAK;AAAA,UAAA;AAAA,QACR;AAAA,MAAA;AAAA,IACD,CAAA;AAAA,EAEF,CAAA;AACD;ADrCA;AACA;AACE;AACF,wCAAC","file":"/home/runner/work/jetpack/jetpack/projects/js-packages/charts/dist/chunk-HOTYXYXV.cjs","sourcesContent":[null,"import { useParentSize } from '@visx/responsive';\nimport type { BaseChartProps } from '../../../types';\nimport type { ComponentType } from 'react';\n\ntype DimensionProps = {\n\twidth?: number;\n\theight?: number;\n\tsize?: number;\n};\n\nexport type ResponsiveConfig = {\n\t/**\n\t * The maximum width of the chart. Defaults to 1200.\n\t */\n\tmaxWidth?: number;\n\t/**\n\t * The aspect ratio of the chart (height = width * aspectRatio).\n\t * When provided, height is calculated from width.\n\t * When omitted, the chart fills the parent container's height.\n\t */\n\taspectRatio?: number;\n\t/**\n\t * Child render updates upon resize are delayed until debounceTime milliseconds after the last resize event is observed.\n\t */\n\tresizeDebounceTime?: number;\n};\n\nconst useResponsiveDimensions = ( {\n\tresizeDebounceTime = 300,\n\tmaxWidth = 1200,\n\taspectRatio,\n}: ResponsiveConfig ) => {\n\tconst {\n\t\tparentRef,\n\t\twidth: parentWidth,\n\t\theight: parentHeight,\n\t} = useParentSize( {\n\t\tdebounceTime: resizeDebounceTime,\n\t\tenableDebounceLeadingCall: true,\n\t} );\n\n\tconst containerWidth = parentWidth > 0 ? Math.min( parentWidth, maxWidth ) : 0;\n\tconst containerHeight = aspectRatio !== undefined ? containerWidth * aspectRatio : parentHeight;\n\n\treturn {\n\t\tparentRef,\n\t\twidth: containerWidth,\n\t\theight: containerHeight,\n\t\t/**\n\t\t * Whether an aspectRatio was provided. Used to determine container\n\t\t * height styling: 'auto' when true (height derived from width),\n\t\t * '100%' when false (fill parent container).\n\t\t */\n\t\thasAspectRatio: aspectRatio !== undefined,\n\t};\n};\n\n/**\n * A higher-order component that provides responsive dimensions\n * to the wrapped chart component using useParentSize from `@visx/responsive`.\n *\n * @param WrappedComponent - The chart component to be wrapped.\n * @return A functional component that renders the wrapped component with responsive dimensions.\n */\nexport function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'options' > >( // 'options' is excluded so that each chart can define its own options type\n\tWrappedComponent: ComponentType< T >\n) {\n\treturn function ResponsiveChart( {\n\t\tresizeDebounceTime = 300,\n\t\tmaxWidth = 1200,\n\t\taspectRatio,\n\t\tsize,\n\t\twidth,\n\t\theight,\n\t\t...chartProps\n\t}: Omit< T, 'width' | 'height' | 'size' > & DimensionProps & ResponsiveConfig ) {\n\t\tconst {\n\t\t\tparentRef,\n\t\t\twidth: measuredWidth,\n\t\t\theight: measuredHeight,\n\t\t\thasAspectRatio,\n\t\t} = useResponsiveDimensions( {\n\t\t\tresizeDebounceTime,\n\t\t\tmaxWidth,\n\t\t\taspectRatio,\n\t\t} );\n\n\t\t// Use measured dimensions, but fall back to explicit props if measurement returns 0\n\t\t// (e.g., during initial render or in test environments without DOM measurement)\n\t\tconst effectiveWidth = measuredWidth || size || width || 0;\n\t\tconst effectiveHeight = measuredHeight || size || height || 0;\n\n\t\tconst defaultHeight = hasAspectRatio ? 'auto' : '100%';\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ parentRef }\n\t\t\t\tdata-testid=\"responsive-wrapper\"\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: size ?? width ?? '100%',\n\t\t\t\t\theight: size ?? height ?? defaultHeight,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<WrappedComponent\n\t\t\t\t\twidth={ effectiveWidth }\n\t\t\t\t\theight={ effectiveHeight }\n\t\t\t\t\tsize={ effectiveWidth }\n\t\t\t\t\t{ ...( chartProps as T ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t};\n}\n"]}

package/dist/chunk-VKXEGONO.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/charts/private/with-responsive/with-responsive.tsx"],"sourcesContent":["import { useParentSize } from '@visx/responsive';\nimport type { BaseChartProps } from '../../../types';\nimport type { ComponentType } from 'react';\n\ntype DimensionProps = {\n\twidth?: number;\n\theight?: number;\n\tsize?: number;\n};\n\nexport type ResponsiveConfig = {\n\t/**\n\t * The maximum width of the chart. Defaults to 1200.\n\t */\n\tmaxWidth?: number;\n\t/**\n\t * The aspect ratio of the chart (height = width * aspectRatio).\n\t * When provided, height is calculated from width.\n\t * When omitted, the chart fills the parent container's height.\n\t */\n\taspectRatio?: number;\n\t/**\n\t * Child render updates upon resize are delayed until debounceTime milliseconds after the last resize event is observed.\n\t */\n\tresizeDebounceTime?: number;\n};\n\nconst useResponsiveDimensions = ( {\n\tresizeDebounceTime = 300,\n\tmaxWidth = 1200,\n\taspectRatio,\n}: ResponsiveConfig ) => {\n\tconst {\n\t\tparentRef,\n\t\twidth: parentWidth,\n\t\theight: parentHeight,\n\t} = useParentSize( {\n\t\tdebounceTime: resizeDebounceTime,\n\t\tenableDebounceLeadingCall: true,\n\t} );\n\n\tconst containerWidth = parentWidth > 0 ? Math.min( parentWidth, maxWidth ) : 0;\n\tconst containerHeight = aspectRatio !== undefined ? containerWidth * aspectRatio : parentHeight;\n\n\treturn {\n\t\tparentRef,\n\t\twidth: containerWidth,\n\t\theight: containerHeight,\n\t\t/**\n\t\t * Whether an aspectRatio was provided. Used to determine container\n\t\t * height styling: 'auto' when true (height derived from width),\n\t\t * '100%' when false (fill parent container).\n\t\t */\n\t\thasAspectRatio: aspectRatio !== undefined,\n\t};\n};\n\n/**\n * A higher-order component that provides responsive dimensions\n * to the wrapped chart component using useParentSize from `@visx/responsive`.\n *\n * @param WrappedComponent - The chart component to be wrapped.\n * @return A functional component that renders the wrapped component with responsive dimensions.\n */\nexport function withResponsive< T extends Exclude< BaseChartProps< unknown >, 'options' > >( // 'options' is excluded so that each chart can define its own options type\n\tWrappedComponent: ComponentType< T >\n) {\n\treturn function ResponsiveChart( {\n\t\tresizeDebounceTime = 300,\n\t\tmaxWidth = 1200,\n\t\taspectRatio,\n\t\tsize,\n\t\twidth,\n\t\theight,\n\t\t...chartProps\n\t}: Omit< T, 'width' | 'height' | 'size' > & DimensionProps & ResponsiveConfig ) {\n\t\tconst {\n\t\t\tparentRef,\n\t\t\twidth: measuredWidth,\n\t\t\theight: measuredHeight,\n\t\t\thasAspectRatio,\n\t\t} = useResponsiveDimensions( {\n\t\t\tresizeDebounceTime,\n\t\t\tmaxWidth,\n\t\t\taspectRatio,\n\t\t} );\n\n\t\t// Use measured dimensions, but fall back to explicit props if measurement returns 0\n\t\t// (e.g., during initial render or in test environments without DOM measurement)\n\t\tconst effectiveWidth = measuredWidth || size || width || 0;\n\t\tconst effectiveHeight = measuredHeight || size || height || 0;\n\n\t\tconst defaultHeight = hasAspectRatio ? 'auto' : '100%';\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ parentRef }\n\t\t\t\tdata-testid=\"responsive-wrapper\"\n\t\t\t\tstyle={ {\n\t\t\t\t\twidth: size ?? width ?? '100%',\n\t\t\t\t\theight: size ?? height ?? defaultHeight,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t<WrappedComponent\n\t\t\t\t\twidth={ effectiveWidth }\n\t\t\t\t\theight={ effectiveHeight }\n\t\t\t\t\tsize={ effectiveWidth }\n\t\t\t\t\t{ ...( chartProps as T ) }\n\t\t\t\t/>\n\t\t\t</div>\n\t\t);\n\t};\n}\n"],"mappings":";AAAA,SAAS,qBAAqB;AAuG1B;AA5EJ,IAAM,0BAA0B,CAAE;AAAA,EACjC,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX;AACD,MAAyB;AACxB,QAAM;AAAA,IACL;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA,EACT,IAAI,cAAe;AAAA,IAClB,cAAc;AAAA,IACd,2BAA2B;AAAA,EAC5B,CAAE;AAEF,QAAM,iBAAiB,cAAc,IAAI,KAAK,IAAK,aAAa,QAAS,IAAI;AAC7E,QAAM,kBAAkB,gBAAgB,SAAY,iBAAiB,cAAc;AAEnF,SAAO;AAAA,IACN;AAAA,IACA,OAAO;AAAA,IACP,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMR,gBAAgB,gBAAgB;AAAA,EACjC;AACD;AASO,SAAS,eACf,kBACC;AACD,SAAO,SAAS,gBAAiB;AAAA,IAChC,qBAAqB;AAAA,IACrB,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACJ,GAAgF;AAC/E,UAAM;AAAA,MACL;AAAA,MACA,OAAO;AAAA,MACP,QAAQ;AAAA,MACR;AAAA,IACD,IAAI,wBAAyB;AAAA,MAC5B;AAAA,MACA;AAAA,MACA;AAAA,IACD,CAAE;AAIF,UAAM,iBAAiB,iBAAiB,QAAQ,SAAS;AACzD,UAAM,kBAAkB,kBAAkB,QAAQ,UAAU;AAE5D,UAAM,gBAAgB,iBAAiB,SAAS;AAEhD,WACC;AAAA,MAAC;AAAA;AAAA,QACA,KAAM;AAAA,QACN,eAAY;AAAA,QACZ,OAAQ;AAAA,UACP,OAAO,QAAQ,SAAS;AAAA,UACxB,QAAQ,QAAQ,UAAU;AAAA,QAC3B;AAAA,QAEA;AAAA,UAAC;AAAA;AAAA,YACA,OAAQ;AAAA,YACR,QAAS;AAAA,YACT,MAAO;AAAA,YACL,GAAK;AAAA;AAAA,QACR;AAAA;AAAA,IACD;AAAA,EAEF;AACD;","names":[]}