@cutting/svg 4.51.0 → 4.52.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @cutting/svg@4.51.0 build /home/runner/work/cuttingedge/cuttingedge/packages/svg
+> @cutting/svg@4.52.1 build /home/runner/work/cuttingedge/cuttingedge/packages/svg
 > NODE_ENV=production devtools rollup
 
  DEBUG   using tsconfig.dist.json

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @cutting/svg
 
+## 4.52.1
+
+### Patch Changes
+
+- 7405910f: fix use-get-parentsize constant resizing problem
+- Updated dependencies [7405910f]
+  - @cutting/react-abortable-fetch@0.35.1
+  - @cutting/use-get-parent-size@1.26.1
+  - @cutting/util@4.57.1
+
+## 4.52.0
+
+### Minor Changes
+
+- f429be7a: upgrade to node 18
+
+### Patch Changes
+
+- Updated dependencies [f429be7a]
+  - @cutting/react-abortable-fetch@0.35.0
+  - @cutting/use-get-parent-size@1.26.0
+  - @cutting/util@4.57.0
+
 ## 4.51.0
 
 ### Minor Changes

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useEffect as r}from"react";import{useParentSize as t}from"@cutting/use-get-parent-size";import n from"classnames";function i({height:r,width:t,children:n,origin:i={x:0,y:0},preserveAspectRatio:s="xMaxYMid meet",innerRef:l,className:o,...a}){const c=Math.ceil(t/(t/r));return e("div",{"data-testid":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"1px"},children:e("svg",{style:{overflow:"visible"},className:o,preserveAspectRatio:s,viewBox:`${i.x} ${i.y} ${t} ${c}`,ref:l,...a,children:n})})}const s={display:"flex",flexDirection:"column",flexGrow:1,flexShrink:1,flexBasis:"0%",overflow:"hidden"};function l({parentRef:n,children:l,style:o=s,scale:a=1,align:c="none",options:{debounceDelay:f=50,...x}={},...h}){const{width:d,height:m}=t(n,{debounceDelay:f,...x});return r((()=>{if(n.current)for(const[e,r]of Object.entries(o))n.current.style[e]=r}),[n,o]),e(i,{width:d,height:m,...h,children:e("g",{transform:"center"===c?`translate(${d/2},${m/2-20}) scale(${a})`:`translate(0,0) scale(${a})`,children:l})})}function o({y:r=0,x:t=0,transform:i,className:s,children:l,innerRef:o,...a}){return e("g",{ref:o,className:n("visx-group",s),transform:i||`translate(${t}, ${r})`,...a,children:l})}function a({from:r={x:0,y:0},to:t={x:1,y:1},fill:i="transparent",className:s,innerRef:l,...o}){const a=r.x===t.x||r.y===t.y;return e("line",{ref:l,className:n("visx-line",s),x1:r.x,y1:r.y,x2:t.x,y2:t.y,fill:i,shapeRendering:a?"crispEdges":"auto",...o})}export{o as Group,a as Line,l as ParentsizeSVG,i as ResponsiveSVG};
+import{jsx as e}from"react/jsx-runtime";import{useEffect as r}from"react";import{useParentSize as t}from"@cutting/use-get-parent-size";import n from"classnames";function i({height:r,width:t,children:n,origin:i={x:0,y:0},preserveAspectRatio:s="xMaxYMid meet",innerRef:l,className:o,...a}){const c=Math.ceil(t/(0===r?1:t/r));return e("div",{"data-testid":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"1px"},children:e("svg",{style:{overflow:"visible"},className:o,preserveAspectRatio:s,viewBox:`${i.x} ${i.y} ${t} ${c}`,ref:l,...a,children:n})})}const s={display:"flex",flexDirection:"column",flexGrow:1,flexShrink:1,flexBasis:"0%",overflow:"hidden"};function l({parentRef:n,children:l,style:o=s,scale:a=1,align:c="none",options:{debounceDelay:f=50,...x}={},...h}){const{width:d,height:m}=t(n,{debounceDelay:f,...x});return r((()=>{if(n.current)for(const[e,r]of Object.entries(o))n.current.style[e]=r}),[n,o]),e(i,{width:d,height:m,...h,children:e("g",{transform:"center"===c?`translate(${d/2},${m/2-20}) scale(${a})`:`translate(0,0) scale(${a})`,children:l})})}function o({y:r=0,x:t=0,transform:i,className:s,children:l,innerRef:o,...a}){return e("g",{ref:o,className:n("visx-group",s),transform:i||`translate(${t}, ${r})`,...a,children:l})}function a({from:r={x:0,y:0},to:t={x:1,y:1},fill:i="transparent",className:s,innerRef:l,...o}){const a=r.x===t.x||r.y===t.y;return e("line",{ref:l,className:n("visx-line",s),x1:r.x,y1:r.y,x2:t.x,y2:t.y,fill:i,shapeRendering:a?"crispEdges":"auto",...o})}export{o as Group,a as Line,l as ParentsizeSVG,i as ResponsiveSVG};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { PreserveAspectRatio, SVGAttributes } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport type ResponsiveSVGProps = SVGAttributes<{\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n  children: ReactNode;\n}>;\n\nexport function ResponsiveSVG({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n  ...props\n}: ResponsiveSVGProps): JSX.Element {\n  const aspect = width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-testid=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n        {...props}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n}\n","import type { CSSProperties, PropsWithChildren, RefObject } from 'react';\nimport type { ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG.js';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useEffect } from 'react';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement = HTMLElement> = {\n  parentRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  parentRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(parentRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!parentRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      parentRef.current.style[key as any] = value;\n    }\n  }, [parentRef, style]);\n\n  const transform =\n    align === 'center'\n      ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})`\n      : `translate(0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport function Group({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n}\n","import cx from 'classnames';\nimport type { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport function Line({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n}\n"],"names":["ResponsiveSVG","height","width","children","origin","x","y","preserveAspectRatio","innerRef","className","props","adjustedHeight","Math","ceil","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","parentRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","key","value","Object","entries","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"iKAmBgB,SAAAA,GAAcC,OAC5BA,EAAMC,MACNA,EAAKC,SACLA,EAAQC,OACRA,EAAS,CAAEC,EAAG,EAAGC,EAAG,GAAGC,oBACvBA,EAAsB,gBAAeC,SACrCA,EAAQC,UACRA,KACGC,IAEH,MAEMC,EAAiBC,KAAKC,KAAKX,GAFlBA,EAAQD,IAIvB,OACEa,EAAA,MAAA,CAAA,cACc,wBACZC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVhB,OAAQ,OACTE,SAEDW,SACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,QAAS,GAAGd,EAAOC,KAAKD,EAAOE,KAAKJ,KAASS,IAC7CQ,IAAKX,KACDE,EAAKP,SAERA,KAIT,CCrCO,MAAMiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,UAGI,SAAAS,GAAqCC,UACnDA,EAASxB,SACTA,EAAQY,MACRA,EAAQK,EAAYQ,MACpBA,EAAQ,EAACC,MACTA,EAAQ,OACRC,SAASC,cAAEA,EAAgB,MAAOC,GAAgB,CAAE,KACjDC,IAEH,MAAM/B,MAAEA,EAAKD,OAAEA,GAAWiC,EAAcP,EAAW,CAAEI,mBAAkBC,IAkBvE,OAhBAG,GAAU,KACR,GAAKR,EAAUS,QAIf,IAAK,MAAOC,EAAKC,KAAUC,OAAOC,QAAQzB,GAExCY,EAAUS,QAAQrB,MAAMsB,GAAcC,CACvC,GACA,CAACX,EAAWZ,IAQbD,EAACd,EAAa,CAACE,MAAOA,EAAOD,OAAQA,KAAYgC,EAAI9B,SACnDW,EAAG,IAAA,CAAA2B,UANK,WAAVZ,EACI,aAAa3B,EAAQ,KAAKD,EAAS,EAAI,aAAa2B,KACpD,wBAAwBA,cAIAzB,KAGhC,CC1CM,SAAUuC,GAAMpC,EACpBA,EAAI,EAACD,EACLA,EAAI,EAACoC,UACLA,EAAShC,UACTA,EAASN,SACTA,EAAQK,SACRA,KACGmC,IAEH,OACE7B,EAAA,IAAA,CACEK,IAAKX,EACLC,UAAWmC,EAAG,aAAcnC,GAC5BgC,UAAWA,GAAa,aAAapC,MAAMC,QACvCqC,EAASxC,SAEZA,GAGP,UCtBgB0C,GAAKC,KACnBA,EAAO,CAAEzC,EAAG,EAAGC,EAAG,GAAGyC,GACrBA,EAAK,CAAE1C,EAAG,EAAGC,EAAG,GAAG0C,KACnBA,EAAO,cAAavC,UACpBA,EAASD,SACTA,KACGmC,IAEH,MAAMM,EAAgBH,EAAKzC,IAAM0C,EAAG1C,GAAKyC,EAAKxC,IAAMyC,EAAGzC,EAEvD,OACEQ,EACE,OAAA,CAAAK,IAAKX,EACLC,UAAWmC,EAAG,YAAanC,GAC3ByC,GAAIJ,EAAKzC,EACT8C,GAAIL,EAAKxC,EACT8C,GAAIL,EAAG1C,EACPgD,GAAIN,EAAGzC,EACP0C,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,UAC3CN,GAGV"}
+{"version":3,"file":"index.js","sources":["../../src/components/ResponsiveSVG/ResponsiveSVG.tsx","../../src/components/ParentsizeSVG/ParentsizeSVG.tsx","../../src/components/Group/Group.tsx","../../src/components/Line/Line.tsx"],"sourcesContent":["import type { ReactNode, Ref } from 'react';\nimport type { PreserveAspectRatio, SVGAttributes } from '../../types/types';\n\nexport interface Point {\n  x: number;\n  y: number;\n}\n\nexport type ResponsiveSVGProps = SVGAttributes<{\n  width: number;\n  height: number;\n  origin?: Point;\n  preserveAspectRatio?: PreserveAspectRatio;\n  innerRef?: Ref<SVGSVGElement>;\n  className?: string;\n  hide?: boolean;\n  children: ReactNode;\n}>;\n\nexport function ResponsiveSVG({\n  height,\n  width,\n  children,\n  origin = { x: 0, y: 0 },\n  preserveAspectRatio = 'xMaxYMid meet',\n  innerRef,\n  className,\n  ...props\n}: ResponsiveSVGProps): JSX.Element {\n  const aspect = height === 0 ? 1 : width / height;\n\n  const adjustedHeight = Math.ceil(width / aspect);\n\n  return (\n    <div\n      data-testid=\"cutting-svg-container\"\n      style={{\n        position: 'relative',\n        overflow: 'visible',\n        height: '1px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible' }}\n        className={className}\n        preserveAspectRatio={preserveAspectRatio}\n        viewBox={`${origin.x} ${origin.y} ${width} ${adjustedHeight}`}\n        ref={innerRef}\n        {...props}\n      >\n        {children}\n      </svg>\n    </div>\n  );\n}\n","import type { CSSProperties, PropsWithChildren, RefObject } from 'react';\nimport type { ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG.js';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\nimport { useEffect } from 'react';\nimport { useParentSize } from '@cutting/use-get-parent-size';\nimport { ResponsiveSVG } from '../ResponsiveSVG/ResponsiveSVG';\n\ntype Align = 'none' | 'center';\n\nexport type ParentsizeSVGProps<E extends HTMLElement = HTMLElement> = {\n  parentRef: RefObject<E>;\n  style?: CSSProperties;\n  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport const DefaultStyle: CSSProperties = {\n  display: 'flex',\n  flexDirection: 'column',\n  flexGrow: 1,\n  flexShrink: 1,\n  flexBasis: '0%',\n  overflow: 'hidden',\n} as const;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  parentRef,\n  children,\n  style = DefaultStyle,\n  scale = 1,\n  align = 'none',\n  options: { debounceDelay = 50, ...optionsRest } = {},\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(parentRef, { debounceDelay, ...optionsRest });\n\n  useEffect(() => {\n    if (!parentRef.current) {\n      return;\n    }\n\n    for (const [key, value] of Object.entries(style)) {\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      parentRef.current.style[key as any] = value;\n    }\n  }, [parentRef, style]);\n\n  const transform =\n    align === 'center'\n      ? `translate(${width / 2},${height / 2 - 20}) scale(${scale})`\n      : `translate(0,0) scale(${scale})`;\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      <g transform={transform}>{children}</g>\n    </ResponsiveSVG>\n  );\n}\n","import cx from 'classnames';\n\ntype GroupOnlyProps = {\n  /** Top offset applied to `<g/>`. */\n  y?: number;\n  /** Left offset applied to `<g/>`. */\n  x?: number;\n  /** Override `x` and `y` to provide the entire `transform` string. */\n  transform?: string;\n  className?: string;\n  children?: React.ReactNode;\n  innerRef?: React.Ref<SVGGElement>;\n};\n\ntype GroupProps = GroupOnlyProps & Omit<React.SVGProps<SVGGElement>, keyof GroupOnlyProps>;\n\nexport function Group({\n  y = 0,\n  x = 0,\n  transform,\n  className,\n  children,\n  innerRef,\n  ...restProps\n}: GroupProps): JSX.Element {\n  return (\n    <g\n      ref={innerRef}\n      className={cx('visx-group', className)}\n      transform={transform || `translate(${x}, ${y})`}\n      {...restProps}\n    >\n      {children}\n    </g>\n  );\n}\n","import cx from 'classnames';\nimport type { AddSVGProps, Point } from '../../types/types';\n\nexport type LineProps = {\n  className?: string;\n  innerRef?: React.Ref<SVGLineElement>;\n  fill?: string;\n  /** Starting x,y point of the line. */\n  from?: Point;\n  /** Ending x,y point of the line. */\n  to?: Point;\n};\n\nexport function Line({\n  from = { x: 0, y: 0 },\n  to = { x: 1, y: 1 },\n  fill = 'transparent',\n  className,\n  innerRef,\n  ...restProps\n}: AddSVGProps<LineProps, SVGLineElement>): JSX.Element {\n  const isRectilinear = from.x === to.x || from.y === to.y;\n\n  return (\n    <line\n      ref={innerRef}\n      className={cx('visx-line', className)}\n      x1={from.x}\n      y1={from.y}\n      x2={to.x}\n      y2={to.y}\n      fill={fill}\n      shapeRendering={isRectilinear ? 'crispEdges' : 'auto'}\n      {...restProps}\n    />\n  );\n}\n"],"names":["ResponsiveSVG","height","width","children","origin","x","y","preserveAspectRatio","innerRef","className","props","adjustedHeight","Math","ceil","_jsx","style","position","overflow","viewBox","ref","DefaultStyle","display","flexDirection","flexGrow","flexShrink","flexBasis","ParentsizeSVG","parentRef","scale","align","options","debounceDelay","optionsRest","rest","useParentSize","useEffect","current","key","value","Object","entries","transform","Group","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"iKAmBgB,SAAAA,GAAcC,OAC5BA,EAAMC,MACNA,EAAKC,SACLA,EAAQC,OACRA,EAAS,CAAEC,EAAG,EAAGC,EAAG,GAAGC,oBACvBA,EAAsB,gBAAeC,SACrCA,EAAQC,UACRA,KACGC,IAEH,MAEMC,EAAiBC,KAAKC,KAAKX,GAFP,IAAXD,EAAe,EAAIC,EAAQD,IAI1C,OACEa,EAAA,MAAA,CAAA,cACc,wBACZC,MAAO,CACLC,SAAU,WACVC,SAAU,UACVhB,OAAQ,OACTE,SAEDW,SACEC,MAAO,CAAEE,SAAU,WACnBR,UAAWA,EACXF,oBAAqBA,EACrBW,QAAS,GAAGd,EAAOC,KAAKD,EAAOE,KAAKJ,KAASS,IAC7CQ,IAAKX,KACDE,EAAKP,SAERA,KAIT,CCrCO,MAAMiB,EAA8B,CACzCC,QAAS,OACTC,cAAe,SACfC,SAAU,EACVC,WAAY,EACZC,UAAW,KACXR,SAAU,UAGI,SAAAS,GAAqCC,UACnDA,EAASxB,SACTA,EAAQY,MACRA,EAAQK,EAAYQ,MACpBA,EAAQ,EAACC,MACTA,EAAQ,OACRC,SAASC,cAAEA,EAAgB,MAAOC,GAAgB,CAAE,KACjDC,IAEH,MAAM/B,MAAEA,EAAKD,OAAEA,GAAWiC,EAAcP,EAAW,CAAEI,mBAAkBC,IAkBvE,OAhBAG,GAAU,KACR,GAAKR,EAAUS,QAIf,IAAK,MAAOC,EAAKC,KAAUC,OAAOC,QAAQzB,GAExCY,EAAUS,QAAQrB,MAAMsB,GAAcC,CACvC,GACA,CAACX,EAAWZ,IAQbD,EAACd,EAAa,CAACE,MAAOA,EAAOD,OAAQA,KAAYgC,EAAI9B,SACnDW,EAAG,IAAA,CAAA2B,UANK,WAAVZ,EACI,aAAa3B,EAAQ,KAAKD,EAAS,EAAI,aAAa2B,KACpD,wBAAwBA,cAIAzB,KAGhC,CC1CM,SAAUuC,GAAMpC,EACpBA,EAAI,EAACD,EACLA,EAAI,EAACoC,UACLA,EAAShC,UACTA,EAASN,SACTA,EAAQK,SACRA,KACGmC,IAEH,OACE7B,EAAA,IAAA,CACEK,IAAKX,EACLC,UAAWmC,EAAG,aAAcnC,GAC5BgC,UAAWA,GAAa,aAAapC,MAAMC,QACvCqC,EAASxC,SAEZA,GAGP,UCtBgB0C,GAAKC,KACnBA,EAAO,CAAEzC,EAAG,EAAGC,EAAG,GAAGyC,GACrBA,EAAK,CAAE1C,EAAG,EAAGC,EAAG,GAAG0C,KACnBA,EAAO,cAAavC,UACpBA,EAASD,SACTA,KACGmC,IAEH,MAAMM,EAAgBH,EAAKzC,IAAM0C,EAAG1C,GAAKyC,EAAKxC,IAAMyC,EAAGzC,EAEvD,OACEQ,EACE,OAAA,CAAAK,IAAKX,EACLC,UAAWmC,EAAG,YAAanC,GAC3ByC,GAAIJ,EAAKzC,EACT8C,GAAIL,EAAKxC,EACT8C,GAAIL,EAAG1C,EACPgD,GAAIN,EAAGzC,EACP0C,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,UAC3CN,GAGV"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cutting/svg",
-  "version": "4.51.0",
+  "version": "4.52.1",
   "repository": {
     "type": "git",
     "url": "https://github.com/dagda1/cuttingedge.git"
@@ -13,27 +13,27 @@
   "dependencies": {
     "classnames": "^2.3.2",
     "resize-observer-polyfill": "^1.5.1",
-    "@cutting/react-abortable-fetch": "0.34.0",
-    "@cutting/use-get-parent-size": "1.25.0",
-    "@cutting/util": "4.56.0"
+    "@cutting/react-abortable-fetch": "0.35.1",
+    "@cutting/use-get-parent-size": "1.26.1",
+    "@cutting/util": "4.57.1"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@types/react": "18.0.26",
-    "@types/react-dom": "18.0.9",
-    "@vanilla-extract/css": "^1.9.2",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "@vanilla-extract/css": "^1.9.5",
     "@vanilla-extract/sprinkles": "1.5.1",
     "assert-ts": "0.3.4",
-    "eslint": "8.29.0",
+    "eslint": "8.34.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "typescript": "4.9.4",
-    "@cutting/component-library": "5.33.0",
-    "@cutting/devtools": "4.61.0",
-    "@cutting/eslint-config": "4.42.0",
-    "@cutting/tsconfig": "4.38.0",
-    "@cutting/useful-types": "4.38.0"
+    "typescript": "4.9.5",
+    "@cutting/component-library": "5.36.2",
+    "@cutting/devtools": "4.62.0",
+    "@cutting/eslint-config": "4.43.1",
+    "@cutting/tsconfig": "4.39.0",
+    "@cutting/useful-types": "4.39.0"
   },
   "peerDependencies": {
     "react": ">= 18.x.x",

package/src/components/ParentsizeSVG/ParentSizeSVG.test.tsx

@@ -24,7 +24,7 @@ describe('useParentSize', () => {
 
     const svg = document.querySelector('svg') as SVGElement;
 
-    expect(svg.getAttribute('viewBox')).toBe('0 0 1 1');
+    expect(svg.getAttribute('viewBox')).toBe('0 0 0 0');
 
     screen.getByTestId('cutting-svg-container');
   });
@@ -42,6 +42,6 @@ describe('useParentSize', () => {
 
     const svg = document.querySelector('svg') as SVGElement;
 
-    expect(svg.querySelector('g') as SVGGElement).toHaveAttribute('transform', 'translate(0.5,-19.5) scale(1)');
+    expect(svg.querySelector('g') as SVGGElement).toHaveAttribute('transform', 'translate(0,-20) scale(1)');
   });
 });

package/src/components/ResponsiveSVG/ResponsiveSVG.tsx

@@ -27,7 +27,7 @@ export function ResponsiveSVG({
   className,
   ...props
 }: ResponsiveSVGProps): JSX.Element {
-  const aspect = width / height;
+  const aspect = height === 0 ? 1 : width / height;
 
   const adjustedHeight = Math.ceil(width / aspect);
 

package/src/components/ResponsiveSVG/ResponsiveSVG.test.tsx

@@ -1,86 +0,0 @@
-import { describe, it, expect, vi } from 'vitest';
-import { render, fireEvent } from '@testing-library/react';
-import { useParentSize } from '@cutting/use-get-parent-size';
-import { useRef } from 'react';
-import type { ResponsiveSVGProps } from './ResponsiveSVG.js';
-import { ResponsiveSVG } from './ResponsiveSVG.js';
-
-import ResizeObserver from 'resize-observer-polyfill';
-
-vi.mock('resize-observer-polyfill');
-
-const resize = (width: number, height: number): void => {
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  ResizeObserver.mockImplementation((cb) => {
-    cb([{ contentRect: { width, height } }]);
-    return { observe: vi.fn(), disconnect: vi.fn(), unobserve: vi.fn() };
-  });
-};
-
-type TestResponsiveSVGProps = Omit<ResponsiveSVGProps, 'width' | 'height' | 'children'>;
-
-function TestEr(props: TestResponsiveSVGProps = {} as ResponsiveSVGProps): JSX.Element {
-  const ref = useRef<HTMLDivElement>(null);
-  const { width, height } = useParentSize(ref);
-
-  return (
-    <div ref={ref}>
-      <ResponsiveSVG height={height} width={width} {...props}>
-        <rect x="20%" y="20%" width="200px" height="200px" rx="20" />
-      </ResponsiveSVG>
-    </div>
-  );
-}
-
-const wrap = (props: TestResponsiveSVGProps = {} as ResponsiveSVGProps): ReturnType<typeof render> =>
-  render(<TestEr {...props} />);
-
-class FakeMouseEvent extends MouseEvent {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  constructor(type: string, values: any) {
-    const { pageX, pageY, offsetX, offsetY, x, y, ...mouseValues } = values;
-    super(type, mouseValues);
-
-    Object.assign(this, {
-      offsetX: offsetX || 0,
-      offsetY: offsetY || 0,
-      pageX: pageX || 0,
-      pageY: pageY || 0,
-      x: x || 0,
-      y: y || 0,
-    });
-  }
-}
-
-describe('ResponsiveSVG', () => {
-  it('should pass intrinsic props straight through', () => {
-    const mouseMoveHandler = vi.fn();
-
-    const { container } = wrap({ onMouseMove: mouseMoveHandler });
-
-    fireEvent.mouseMove(
-      container.querySelector('svg'),
-      new FakeMouseEvent('mousemove', {
-        bubbles: true,
-        pageX: 350,
-        pageY: 125,
-      }),
-    );
-
-    expect(mouseMoveHandler).toHaveBeenCalled();
-  });
-});
-
-// describe.skip('useParentSize', () => {
-//   it('should set the svg viewBox attribute', () => {
-//     resize(200, 200);
-//     wrap();
-
-//     const svg = document.querySelector('svg') as SVGElement;
-
-//     expect(svg.getAttribute('viewBox')).toBe('0 0 200 200');
-
-//     screen.getByTestId('cutting-svg-container');
-//   });
-// });