@fluentui/react-charts 0.0.0-nightly-20250423-1342.1 → 0.0.0-nightly-20250423-1415.1

package/lib/components/ResponsiveContainer/ResponsiveContainer.js

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import { useFluent_unstable } from '@fluentui/react-shared-contexts';
+import { useResponsiveContainerStyles } from './useResponsiveContainerStyles.styles';
+export const ResponsiveContainer = (props)=>{
+    const containerRef = React.useRef(null);
+    const onResizeRef = React.useRef();
+    const { targetDocument } = useFluent_unstable();
+    const classes = useResponsiveContainerStyles(props);
+    const [size, setSize] = React.useState({});
+    onResizeRef.current = props.onResize;
+    const _window = targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.defaultView;
+    React.useEffect(()=>{
+        let animationFrameId;
+        // eslint-disable-next-line no-restricted-globals
+        let resizeObserver;
+        const resizeCallback = (entries)=>{
+            var _onResizeRef_current;
+            const { width: containerWidth, height: containerHeight } = entries[0].contentRect;
+            // rAF is an alternative to the throttle function. For more info, see:
+            // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf
+            animationFrameId = _window === null || _window === void 0 ? void 0 : _window.requestAnimationFrame(()=>{
+                setSize((prevSize)=>{
+                    const roundedWidth = Math.floor(containerWidth);
+                    const roundedHeight = Math.floor(containerHeight);
+                    if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {
+                        return prevSize;
+                    }
+                    return {
+                        containerWidth: roundedWidth,
+                        containerHeight: roundedHeight
+                    };
+                });
+            });
+            (_onResizeRef_current = onResizeRef.current) === null || _onResizeRef_current === void 0 ? void 0 : _onResizeRef_current.call(onResizeRef, containerWidth, containerHeight);
+        };
+        if (_window === null || _window === void 0 ? void 0 : _window.ResizeObserver) {
+            resizeObserver = new _window.ResizeObserver(resizeCallback);
+            if (containerRef.current) {
+                resizeObserver.observe(containerRef.current);
+            }
+        }
+        return ()=>{
+            if (animationFrameId) {
+                _window === null || _window === void 0 ? void 0 : _window.cancelAnimationFrame(animationFrameId);
+            }
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
+        };
+    }, [
+        _window
+    ]);
+    return /*#__PURE__*/ React.createElement("div", {
+        ref: containerRef,
+        className: classes.root,
+        style: {
+            width: props.width,
+            height: props.height
+        }
+    }, React.Children.map(props.children, (child)=>{
+        return /*#__PURE__*/ React.cloneElement(child, {
+            width: size.containerWidth,
+            height: size.containerHeight
+        });
+    }));
+};
+ResponsiveContainer.displayName = 'ResponsiveContainer';

package/lib/components/ResponsiveContainer/ResponsiveContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ResponsiveContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useFluent_unstable } from '@fluentui/react-shared-contexts';\nimport { ResponsiveContainerProps } from './ResponsiveContainer.types';\nimport { useResponsiveContainerStyles } from './useResponsiveContainerStyles.styles';\n\nexport const ResponsiveContainer: React.FC<ResponsiveContainerProps> = props => {\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const onResizeRef = React.useRef<ResponsiveContainerProps['onResize']>();\n  const { targetDocument } = useFluent_unstable();\n  const classes = useResponsiveContainerStyles(props);\n\n  const [size, setSize] = React.useState<{ containerWidth?: number; containerHeight?: number }>({});\n\n  onResizeRef.current = props.onResize;\n  const _window = targetDocument?.defaultView;\n\n  React.useEffect(() => {\n    let animationFrameId: number | undefined;\n    // eslint-disable-next-line no-restricted-globals\n    let resizeObserver: ResizeObserver | undefined;\n\n    const resizeCallback = (entries: ResizeObserverEntry[]) => {\n      const { width: containerWidth, height: containerHeight } = entries[0].contentRect;\n      // rAF is an alternative to the throttle function. For more info, see:\n      // https://css-tricks.com/debouncing-throttling-explained-examples/#aa-requestanimationframe-raf\n      animationFrameId = _window?.requestAnimationFrame(() => {\n        setSize(prevSize => {\n          const roundedWidth = Math.floor(containerWidth);\n          const roundedHeight = Math.floor(containerHeight);\n          if (prevSize.containerWidth === roundedWidth && prevSize.containerHeight === roundedHeight) {\n            return prevSize;\n          }\n\n          return { containerWidth: roundedWidth, containerHeight: roundedHeight };\n        });\n      });\n      onResizeRef.current?.(containerWidth, containerHeight);\n    };\n\n    if (_window?.ResizeObserver) {\n      resizeObserver = new _window.ResizeObserver(resizeCallback);\n      if (containerRef.current) {\n        resizeObserver.observe(containerRef.current);\n      }\n    }\n\n    return () => {\n      if (animationFrameId) {\n        _window?.cancelAnimationFrame(animationFrameId);\n      }\n\n      resizeObserver?.disconnect();\n    };\n  }, [_window]);\n\n  return (\n    <div ref={containerRef} className={classes.root} style={{ width: props.width, height: props.height }}>\n      {React.Children.map(props.children, child => {\n        return React.cloneElement(child, {\n          width: size.containerWidth,\n          height: size.containerHeight,\n        });\n      })}\n    </div>\n  );\n};\nResponsiveContainer.displayName = 'ResponsiveContainer';\n"],"names":["React","useFluent_unstable","useResponsiveContainerStyles","ResponsiveContainer","props","containerRef","useRef","onResizeRef","targetDocument","classes","size","setSize","useState","current","onResize","_window","defaultView","useEffect","animationFrameId","resizeObserver","resizeCallback","entries","width","containerWidth","height","containerHeight","contentRect","requestAnimationFrame","prevSize","roundedWidth","Math","floor","roundedHeight","ResizeObserver","observe","cancelAnimationFrame","disconnect","div","ref","className","root","style","Children","map","children","child","cloneElement","displayName"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,kCAAkC;AAErE,SAASC,4BAA4B,QAAQ,wCAAwC;AAErF,OAAO,MAAMC,sBAA0DC,CAAAA;IACrE,MAAMC,eAAeL,MAAMM,MAAM,CAAiB;IAClD,MAAMC,cAAcP,MAAMM,MAAM;IAChC,MAAM,EAAEE,cAAc,EAAE,GAAGP;IAC3B,MAAMQ,UAAUP,6BAA6BE;IAE7C,MAAM,CAACM,MAAMC,QAAQ,GAAGX,MAAMY,QAAQ,CAAwD,CAAC;IAE/FL,YAAYM,OAAO,GAAGT,MAAMU,QAAQ;IACpC,MAAMC,UAAUP,2BAAAA,qCAAAA,eAAgBQ,WAAW;IAE3ChB,MAAMiB,SAAS,CAAC;QACd,IAAIC;QACJ,iDAAiD;QACjD,IAAIC;QAEJ,MAAMC,iBAAiB,CAACC;gBAetBd;YAdA,MAAM,EAAEe,OAAOC,cAAc,EAAEC,QAAQC,eAAe,EAAE,GAAGJ,OAAO,CAAC,EAAE,CAACK,WAAW;YACjF,sEAAsE;YACtE,gGAAgG;YAChGR,mBAAmBH,oBAAAA,8BAAAA,QAASY,qBAAqB,CAAC;gBAChDhB,QAAQiB,CAAAA;oBACN,MAAMC,eAAeC,KAAKC,KAAK,CAACR;oBAChC,MAAMS,gBAAgBF,KAAKC,KAAK,CAACN;oBACjC,IAAIG,SAASL,cAAc,KAAKM,gBAAgBD,SAASH,eAAe,KAAKO,eAAe;wBAC1F,OAAOJ;oBACT;oBAEA,OAAO;wBAAEL,gBAAgBM;wBAAcJ,iBAAiBO;oBAAc;gBACxE;YACF;aACAzB,uBAAAA,YAAYM,OAAO,cAAnBN,2CAAAA,0BAAAA,aAAsBgB,gBAAgBE;QACxC;QAEA,IAAIV,oBAAAA,8BAAAA,QAASkB,cAAc,EAAE;YAC3Bd,iBAAiB,IAAIJ,QAAQkB,cAAc,CAACb;YAC5C,IAAIf,aAAaQ,OAAO,EAAE;gBACxBM,eAAee,OAAO,CAAC7B,aAAaQ,OAAO;YAC7C;QACF;QAEA,OAAO;YACL,IAAIK,kBAAkB;gBACpBH,oBAAAA,8BAAAA,QAASoB,oBAAoB,CAACjB;YAChC;YAEAC,2BAAAA,qCAAAA,eAAgBiB,UAAU;QAC5B;IACF,GAAG;QAACrB;KAAQ;IAEZ,qBACE,oBAACsB;QAAIC,KAAKjC;QAAckC,WAAW9B,QAAQ+B,IAAI;QAAEC,OAAO;YAAEnB,OAAOlB,MAAMkB,KAAK;YAAEE,QAAQpB,MAAMoB,MAAM;QAAC;OAChGxB,MAAM0C,QAAQ,CAACC,GAAG,CAACvC,MAAMwC,QAAQ,EAAEC,CAAAA;QAClC,qBAAO7C,MAAM8C,YAAY,CAACD,OAAO;YAC/BvB,OAAOZ,KAAKa,cAAc;YAC1BC,QAAQd,KAAKe,eAAe;QAC9B;IACF;AAGN,EAAE;AACFtB,oBAAoB4C,WAAW,GAAG"}

package/lib/components/ResponsiveContainer/ResponsiveContainer.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

package/lib/components/ResponsiveContainer/ResponsiveContainer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["ResponsiveContainer.types.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface ResponsiveContainerProps {\n  children: React.ReactElement;\n  onResize?: (width: number, height: number) => void;\n  width?: number | string;\n  height?: number | string;\n}\n\nexport interface ResponsiveContainerStyles {\n  root: string;\n}\n"],"names":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}

package/lib/components/ResponsiveContainer/index.js

@@ -0,0 +1 @@
+export * from './ResponsiveContainer';

package/lib/components/ResponsiveContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"sourcesContent":["export * from './ResponsiveContainer';\n"],"names":[],"rangeMappings":"","mappings":"AAAA,cAAc,wBAAwB"}

package/lib/components/ResponsiveContainer/useResponsiveContainerStyles.styles.js

@@ -0,0 +1,23 @@
+import { __styles, mergeClasses } from '@griffel/react';
+export const responsiveContainerClassNames = {
+  root: 'fui-charts-resp__root'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    a9b677: "fly5x3f",
+    Bqenvij: "f1l02sjl",
+    Bvcz5cu: "fx80qsw",
+    Bjw6159: "f4wz6dc",
+    B5pe6w7: "f17klwcu",
+    p4uzdd: "ffmg4tr"
+  }
+}, {
+  d: [".fly5x3f{width:100%;}", ".f1l02sjl{height:100%;}", ".fx80qsw [class*=\"chartWrapper\"]{width:100%;}", ".f4wz6dc [class*=\"chartWrapper\"]{height:100%;}", ".f17klwcu svg{width:100%;}", ".ffmg4tr svg{height:100%;}"]
+});
+export const useResponsiveContainerStyles = props => {
+  const baseStyles = useStyles();
+  return {
+    root: mergeClasses(responsiveContainerClassNames.root, baseStyles.root)
+  };
+};
+//# sourceMappingURL=useResponsiveContainerStyles.styles.js.map

package/lib/components/ResponsiveContainer/useResponsiveContainerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","responsiveContainerClassNames","root","useStyles","a9b677","Bqenvij","Bvcz5cu","Bjw6159","B5pe6w7","p4uzdd","d","useResponsiveContainerStyles","props","baseStyles"],"sources":["useResponsiveContainerStyles.styles.js"],"sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nexport const responsiveContainerClassNames = {\n    root: 'fui-charts-resp__root'\n};\nconst useStyles = makeStyles({\n    root: {\n        width: '100%',\n        height: '100%',\n        '& [class*=\"chartWrapper\"]': {\n            width: '100%',\n            // To prevent chart height from collapsing while resizing\n            height: '100%'\n        },\n        '& svg': {\n            // This overrides the pixel width and height of svg allowing it to resize properly within flexbox\n            width: '100%',\n            height: '100%'\n        }\n    }\n});\nexport const useResponsiveContainerStyles = (props)=>{\n    const baseStyles = useStyles();\n    return {\n        root: mergeClasses(responsiveContainerClassNames.root, baseStyles.root)\n    };\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,6BAA6B,GAAG;EACzCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAejB,CAAC;AACF,OAAO,MAAMC,4BAA4B,GAAIC,KAAK,IAAG;EACjD,MAAMC,UAAU,GAAGV,SAAS,CAAC,CAAC;EAC9B,OAAO;IACHD,IAAI,EAAEF,YAAY,CAACC,6BAA6B,CAACC,IAAI,EAAEW,UAAU,CAACX,IAAI;EAC1E,CAAC;AACL,CAAC","ignoreList":[]}