math-main-components 0.0.190 → 0.0.193

package/dist/components/Popover/index.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from 'react';
+export default function Popover({ children, active, onClose }: {
+    children: ReactNode;
+    active: boolean;
+    onClose?: () => void;
+}): React.JSX.Element;

package/dist/components/useDimensions.d.ts

@@ -0,0 +1,4 @@
+export declare function useDimensions(): {
+    width: number;
+    height: number;
+};

package/dist/components/useOrientation.d.ts

@@ -0,0 +1,3 @@
+type Orientation = "landscape" | "portrait";
+export declare function useOrientation(): Orientation;
+export {};

package/dist/components/useScroll.d.ts

@@ -0,0 +1,4 @@
+export declare function useScroll(): {
+    xScroll: number;
+    yScroll: number;
+};

package/dist/hooks/useDimensions.d.ts

@@ -0,0 +1,4 @@
+export declare function useDimensions(): {
+    width: number;
+    height: number;
+};

package/dist/hooks/useOrientation.d.ts

@@ -0,0 +1,3 @@
+type Orientation = "landscape" | "portrait";
+export declare function useOrientation(): Orientation;
+export {};

package/dist/hooks/useScroll.d.ts

@@ -0,0 +1,4 @@
+export declare function useScroll(): {
+    xScroll: number;
+    yScroll: number;
+};

package/dist/index.cjs.js

@@ -10398,6 +10398,57 @@ function UsageCard({ title, subtitle, ratio = 0, loading }) {
                 ], lineWidth: 15, totalValue: 1 }))));
 }
 
+function useDimensions() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = React.useState({
+        width: 0,
+        height: 0,
+    });
+    React.useEffect(() => {
+        // only execute all the code below in client side
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}
+
+function useOrientation() {
+    const size = useDimensions();
+    return (size.width > size.height) ? "landscape" : "portrait";
+}
+
+function useScroll() {
+    const [scroll, setScroll] = React.useState({
+        xScroll: 0,
+        yScroll: 0,
+    });
+    const onScroll = React.useCallback(() => {
+        const { scrollY, scrollX } = window;
+        setScroll({
+            yScroll: scrollY,
+            xScroll: scrollX,
+        });
+    }, []);
+    React.useEffect(() => {
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => window.removeEventListener("scroll", onScroll);
+    }, [onScroll]);
+    return scroll;
+}
+
 exports.Accordeon = Accordeon;
 exports.AuthButton = AuthButton;
 exports.Button = Button;
@@ -10436,3 +10487,6 @@ exports.Table = Table;
 exports.Tabs = Tabs;
 exports.TextWithIcon = TextWithIcon;
 exports.UsageCard = UsageCard;
+exports.useDimensions = useDimensions;
+exports.useOrientation = useOrientation;
+exports.useScroll = useScroll;

package/dist/index.d.ts

@@ -32,6 +32,9 @@ export * from './components/Table';
 export * from './components/Tabs';
 export * from './components/TextWithIcon';
 export * from './components/UsageCard';
+export * from './hooks/useDimensions';
+export * from './hooks/useOrientation';
+export * from './hooks/useScroll';
 export * from './types/marketing/About';
 export * from './types/marketing/BenefitForIndividual';
 export * from './types/marketing/BenefitForSchool';

package/dist/index.esm.js

@@ -10372,4 +10372,55 @@ function UsageCard({ title, subtitle, ratio = 0, loading }) {
                 ], lineWidth: 15, totalValue: 1 }))));
 }
 
-export { Accordeon, AuthButton, Button, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, Dialog, EmptyCard, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, ProgressBar, RadioButtons, RadioOption, RedirectButton, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard };
+function useDimensions() {
+    // Initialize state with undefined width/height so server and client renders match
+    // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/
+    const [windowSize, setWindowSize] = useState({
+        width: 0,
+        height: 0,
+    });
+    useEffect(() => {
+        // only execute all the code below in client side
+        // Handler to call on window resize
+        function handleResize() {
+            // Set window width/height to state
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight,
+            });
+        }
+        // Add event listener
+        window.addEventListener("resize", handleResize);
+        // Call handler right away so state gets updated with initial window size
+        handleResize();
+        // Remove event listener on cleanup
+        return () => window.removeEventListener("resize", handleResize);
+    }, []); // Empty array ensures that effect is only run on mount
+    return windowSize;
+}
+
+function useOrientation() {
+    const size = useDimensions();
+    return (size.width > size.height) ? "landscape" : "portrait";
+}
+
+function useScroll() {
+    const [scroll, setScroll] = useState({
+        xScroll: 0,
+        yScroll: 0,
+    });
+    const onScroll = useCallback(() => {
+        const { scrollY, scrollX } = window;
+        setScroll({
+            yScroll: scrollY,
+            xScroll: scrollX,
+        });
+    }, []);
+    useEffect(() => {
+        window.addEventListener("scroll", onScroll, { passive: true });
+        return () => window.removeEventListener("scroll", onScroll);
+    }, [onScroll]);
+    return scroll;
+}
+
+export { Accordeon, AuthButton, Button, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, Dialog, EmptyCard, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, ProgressBar, RadioButtons, RadioOption, RedirectButton, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard, useDimensions, useOrientation, useScroll };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "math-main-components",
-    "version": "0.0.190",
+    "version": "0.0.193",
     "author": "Emilian Scheel",
     "files": [
         "dist/**/*"