@cutting/svg 4.54.1 → 4.54.3

package/.turbo/turbo-build.log

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

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @cutting/svg
 
+## 4.54.3
+
+### Patch Changes
+
+- 79c7b329: return whole DOMRect
+- Updated dependencies [79c7b329]
+  - @cutting/use-get-parent-size@2.0.1
+
+## 4.54.2
+
+### Patch Changes
+
+- Updated dependencies [f369fc43]
+  - @cutting/use-get-parent-size@2.0.0
+
 ## 4.54.1
 
 ### Patch Changes

package/dist/esm/components/ResponsiveSVG/ResponsiveSVG.d.ts

@@ -5,8 +5,8 @@ export interface Point {
     y: number;
 }
 export type ResponsiveSVGProps = SVGAttributes<{
-    width: number;
-    height: number;
+    width?: number;
+    height?: number;
     origin?: Point;
     preserveAspectRatio?: PreserveAspectRatio;
     innerRef?: Ref<SVGSVGElement>;

package/dist/esm/components/ResponsiveSVG/ResponsiveSVG.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ResponsiveSVG/ResponsiveSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5E,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;IAC7C,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,QAAQ,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC,CAAC;AAEH,wBAAgB,aAAa,CAAC,EAC5B,MAAM,EACN,KAAK,EACL,QAAQ,EACR,MAAuB,EACvB,mBAAqC,EACrC,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA0BlC"}
+{"version":3,"file":"ResponsiveSVG.d.ts","sourceRoot":"","sources":["../../../../src/components/ResponsiveSVG/ResponsiveSVG.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5C,OAAO,KAAK,EAAE,mBAAmB,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAE5E,MAAM,WAAW,KAAK;IACpB,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;CACX;AAED,MAAM,MAAM,kBAAkB,GAAG,aAAa,CAAC;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,KAAK,CAAC;IACf,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,QAAQ,CAAC,EAAE,GAAG,CAAC,aAAa,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC,CAAC;AAEH,wBAAgB,aAAa,CAAC,EAC5B,MAAU,EACV,KAAS,EACT,QAAQ,EACR,MAAuB,EACvB,mBAAqC,EACrC,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CA0BlC"}

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useParentSize as t}from"@cutting/use-get-parent-size";import i from"classnames";function r({height:t,width:i,children:r,origin:n={x:0,y:0},preserveAspectRatio:s="xMaxYMid meet",innerRef:a,className:o,...c}){const l=Math.ceil(i/(0===t?1:i/t));return e("div",{"data-testid":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"0px"},children:e("svg",{style:{overflow:"visible",width:"100%",height:"auto"},className:o,preserveAspectRatio:s,viewBox:`${n.x} ${n.y} ${i} ${l}`,ref:a,...c,children:r})})}function n({parentRef:i,children:n,options:s,...a}){const{width:o,height:c}=t(i,s);return e(r,{width:o,height:c,...a,children:n})}function s({y:t=0,x:r=0,transform:n,className:s,children:a,innerRef:o,...c}){return e("g",{ref:o,className:i("visx-group",s),transform:n||`translate(${r}, ${t})`,...c,children:a})}function a({from:t={x:0,y:0},to:r={x:1,y:1},fill:n="transparent",className:s,innerRef:a,...o}){const c=t.x===r.x||t.y===r.y;return e("line",{ref:a,className:i("visx-line",s),x1:t.x,y1:t.y,x2:r.x,y2:r.y,fill:n,shapeRendering:c?"crispEdges":"auto",...o})}export{s as Group,a as Line,n as ParentsizeSVG,r as ResponsiveSVG};
+import{jsx as e}from"react/jsx-runtime";import{useParentSize as t}from"@cutting/use-get-parent-size";import i from"classnames";function r({height:t=0,width:i=0,children:r,origin:n={x:0,y:0},preserveAspectRatio:s="xMaxYMid meet",innerRef:a,className:o,...c}){const l=Math.ceil(i/(0===t?1:i/t));return e("div",{"data-testid":"cutting-svg-container",style:{position:"relative",overflow:"visible",height:"0px"},children:e("svg",{style:{overflow:"visible",width:"100%",height:"auto"},className:o,preserveAspectRatio:s,viewBox:`${n.x} ${n.y} ${i} ${l}`,ref:a,...c,children:r})})}function n({parentRef:i,children:n,options:s,...a}){const{width:o,height:c}=t(i,s);return e(r,{width:o,height:c,...a,children:n})}function s({y:t=0,x:r=0,transform:n,className:s,children:a,innerRef:o,...c}){return e("g",{ref:o,className:i("visx-group",s),transform:n||`translate(${r}, ${t})`,...c,children:a})}function a({from:t={x:0,y:0},to:r={x:1,y:1},fill:n="transparent",className:s,innerRef:a,...o}){const c=t.x===r.x||t.y===r.y;return e("line",{ref:a,className:i("visx-line",s),x1:t.x,y1:t.y,x2:r.x,y2:r.y,fill:n,shapeRendering:c?"crispEdges":"auto",...o})}export{s as Group,a as Line,n as ParentsizeSVG,r 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 = 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: '0px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible', width: '100%', height: 'auto' }}\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 { PropsWithChildren, RefObject } from 'react';\nimport type { ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG.js';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\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  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  parentRef,\n  children,\n  options,\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(parentRef, options);\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      {children}\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","ParentsizeSVG","parentRef","options","rest","useParentSize","Group","transform","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"+HAmBgB,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,OAGVE,SAAAW,EAAA,MAAA,CACEC,MAAO,CAAEE,SAAU,UAAWf,MAAO,OAAQD,OAAQ,QACrDQ,UAAWA,EACXF,oBAAqBA,EACrBW,QAAS,GAAGd,EAAOC,KAAKD,EAAOE,KAAKJ,KAASS,IAC7CQ,IAAKX,KACDE,WAEHP,KAIT,CCvCgB,SAAAiB,GAAqCC,UACnDA,EAASlB,SACTA,EAAQmB,QACRA,KACGC,IAEH,MAAMrB,MAAEA,EAAKD,OAAEA,GAAWuB,EAAcH,EAAWC,GAEnD,OACER,EAACd,EAAc,CAAAE,MAAOA,EAAOD,OAAQA,KAAYsB,WAC9CpB,GAGP,CCZM,SAAUsB,GAAMnB,EACpBA,EAAI,EAACD,EACLA,EAAI,EAACqB,UACLA,EAASjB,UACTA,EAASN,SACTA,EAAQK,SACRA,KACGmB,IAEH,OACEb,EAAA,IAAA,CACEK,IAAKX,EACLC,UAAWmB,EAAG,aAAcnB,GAC5BiB,UAAWA,GAAa,aAAarB,MAAMC,QACvCqB,EAASxB,SAEZA,GAGP,UCtBgB0B,GAAKC,KACnBA,EAAO,CAAEzB,EAAG,EAAGC,EAAG,GAAGyB,GACrBA,EAAK,CAAE1B,EAAG,EAAGC,EAAG,GAAG0B,KACnBA,EAAO,cAAavB,UACpBA,EAASD,SACTA,KACGmB,IAEH,MAAMM,EAAgBH,EAAKzB,IAAM0B,EAAG1B,GAAKyB,EAAKxB,IAAMyB,EAAGzB,EAEvD,OACEQ,EACE,OAAA,CAAAK,IAAKX,EACLC,UAAWmB,EAAG,YAAanB,GAC3ByB,GAAIJ,EAAKzB,EACT8B,GAAIL,EAAKxB,EACT8B,GAAIL,EAAG1B,EACPgC,GAAIN,EAAGzB,EACP0B,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 = 0,\n  width = 0,\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: '0px',\n      }}\n    >\n      <svg\n        style={{ overflow: 'visible', width: '100%', height: 'auto' }}\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 { PropsWithChildren, RefObject } from 'react';\nimport type { ResponsiveSVGProps } from '../ResponsiveSVG/ResponsiveSVG.js';\nimport type { UseParentSizeOptions } from '@cutting/use-get-parent-size';\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  align?: Align;\n  scale?: number;\n  options?: Partial<UseParentSizeOptions>;\n} & Partial<Omit<ResponsiveSVGProps, 'innerRef' | 'height' | 'height'>>;\n\nexport function ParentsizeSVG<E extends HTMLElement>({\n  parentRef,\n  children,\n  options,\n  ...rest\n}: PropsWithChildren<ParentsizeSVGProps<E>>): JSX.Element | null {\n  const { width, height } = useParentSize(parentRef, options);\n\n  return (\n    <ResponsiveSVG width={width} height={height} {...rest}>\n      {children}\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","ParentsizeSVG","parentRef","options","rest","useParentSize","Group","transform","restProps","cx","Line","from","to","fill","isRectilinear","x1","y1","x2","y2","shapeRendering"],"mappings":"wIAmBgBA,GAAcC,OAC5BA,EAAS,EAACC,MACVA,EAAQ,EAACC,SACTA,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,OAGVE,SAAAW,EAAA,MAAA,CACEC,MAAO,CAAEE,SAAU,UAAWf,MAAO,OAAQD,OAAQ,QACrDQ,UAAWA,EACXF,oBAAqBA,EACrBW,QAAS,GAAGd,EAAOC,KAAKD,EAAOE,KAAKJ,KAASS,IAC7CQ,IAAKX,KACDE,WAEHP,KAIT,CCvCgB,SAAAiB,GAAqCC,UACnDA,EAASlB,SACTA,EAAQmB,QACRA,KACGC,IAEH,MAAMrB,MAAEA,EAAKD,OAAEA,GAAWuB,EAAcH,EAAWC,GAEnD,OACER,EAACd,EAAc,CAAAE,MAAOA,EAAOD,OAAQA,KAAYsB,WAC9CpB,GAGP,CCZM,SAAUsB,GAAMnB,EACpBA,EAAI,EAACD,EACLA,EAAI,EAACqB,UACLA,EAASjB,UACTA,EAASN,SACTA,EAAQK,SACRA,KACGmB,IAEH,OACEb,EAAA,IAAA,CACEK,IAAKX,EACLC,UAAWmB,EAAG,aAAcnB,GAC5BiB,UAAWA,GAAa,aAAarB,MAAMC,QACvCqB,EAASxB,SAEZA,GAGP,UCtBgB0B,GAAKC,KACnBA,EAAO,CAAEzB,EAAG,EAAGC,EAAG,GAAGyB,GACrBA,EAAK,CAAE1B,EAAG,EAAGC,EAAG,GAAG0B,KACnBA,EAAO,cAAavB,UACpBA,EAASD,SACTA,KACGmB,IAEH,MAAMM,EAAgBH,EAAKzB,IAAM0B,EAAG1B,GAAKyB,EAAKxB,IAAMyB,EAAGzB,EAEvD,OACEQ,EACE,OAAA,CAAAK,IAAKX,EACLC,UAAWmB,EAAG,YAAanB,GAC3ByB,GAAIJ,EAAKzB,EACT8B,GAAIL,EAAKxB,EACT8B,GAAIL,EAAG1B,EACPgC,GAAIN,EAAGzB,EACP0B,KAAMA,EACNM,eAAgBL,EAAgB,aAAe,UAC3CN,GAGV"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cutting/svg",
-  "version": "4.54.1",
+  "version": "4.54.3",
   "repository": {
     "type": "git",
     "url": "https://github.com/dagda1/cuttingedge.git"
@@ -14,7 +14,7 @@
     "classnames": "^2.3.2",
     "resize-observer-polyfill": "^1.5.1",
     "@cutting/react-abortable-fetch": "0.36.1",
-    "@cutting/use-get-parent-size": "1.27.1",
+    "@cutting/use-get-parent-size": "2.0.1",
     "@cutting/util": "4.58.1"
   },
   "devDependencies": {

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

@@ -10,9 +10,11 @@ function TestEr(props: Partial<ParentsizeSVGProps>) {
   useParentSize(ref);
 
   return (
-    <ParentsizeSVG {...props} parentRef={ref}>
-      <rect x="20%" y="20%" width="200px" height="200px" rx="20" />
-    </ParentsizeSVG>
+    <div ref={ref} style={{ width: '100vw', height: '100vh' }}>
+      <ParentsizeSVG {...props} parentRef={ref}>
+        <rect x="20%" y="20%" width="200px" height="200px" rx="20" />
+      </ParentsizeSVG>
+    </div>
   );
 }
 

package/src/components/ResponsiveSVG/ResponsiveSVG.tsx

@@ -7,8 +7,8 @@ export interface Point {
 }
 
 export type ResponsiveSVGProps = SVGAttributes<{
-  width: number;
-  height: number;
+  width?: number;
+  height?: number;
   origin?: Point;
   preserveAspectRatio?: PreserveAspectRatio;
   innerRef?: Ref<SVGSVGElement>;
@@ -18,8 +18,8 @@ export type ResponsiveSVGProps = SVGAttributes<{
 }>;
 
 export function ResponsiveSVG({
-  height,
-  width,
+  height = 0,
+  width = 0,
   children,
   origin = { x: 0, y: 0 },
   preserveAspectRatio = 'xMaxYMid meet',