@vincentgraul/react-components 1.0.14 → 1.0.16

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,+BAA+B,CAAC;AAC1E,cAAc,+BAA+B,CAAC;AAE9C,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,uCAAuC,CAAC;AACtF,cAAc,uCAAuC,CAAC;AAEtD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAC9E,cAAc,mCAAmC,CAAC;AAElD,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0CAA0C,CAAC;AACzF,cAAc,0CAA0C,CAAC;AAEzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,cAAc,4BAA4B,CAAC;AAE3C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACjE,cAAc,yBAAyB,CAAC;AAExC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,cAAc,eAAe,CAAC;AAE9B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,sBAAsB,CAAC;AAC7D,cAAc,sBAAsB,CAAC;AAErC,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,qCAAqC,CAAC;AACnF,cAAc,qCAAqC,CAAC;AAEpD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,eAAe,CAAC;AACjD,cAAc,eAAe,CAAC;AAE9B,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,cAAc,iBAAiB,CAAC;AAEhC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mCAAmC,CAAC;AAC3E,cAAc,mCAAmC,CAAC"}

package/build/{esm/src/index.d.ts → index.js}

@@ -22,4 +22,3 @@ export { default as Loader } from "./loader/Loader";
 export * from "./loader/Loader";
 export { default as ImageLoader } from "./loader/image-loader/ImageLoader";
 export * from "./loader/image-loader/ImageLoader";
-//# sourceMappingURL=index.d.ts.map

package/build/loader/Loader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.d.ts","sourceRoot":"","sources":["../../src/loader/Loader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,UAAU,KAAK;IACb,MAAM,EAAE,MAAM,SAAS,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAQxD"}

package/build/loader/Loader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+export default function Loader(props) {
+    const { render, className } = props;
+    return (_jsx(Overlay, { className: `${className}`, children: _jsx(Container, { children: render() }) }));
+}
+const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: #121621;
+  overflow-y: auto;
+  z-index: 2;
+`;
+const Container = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, 0);
+  width: 50%;
+  color: #f9fbff;
+`;

package/build/loader/image-loader/ImageLoader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageLoader.d.ts","sourceRoot":"","sources":["../../../src/loader/image-loader/ImageLoader.tsx"],"names":[],"mappings":";AAGA,MAAM,WAAW,KAAK;IACpB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAS7D"}

package/build/loader/image-loader/ImageLoader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styled, { keyframes } from "styled-components";
+export default function ImageLoader(props) {
+    const { className, src, text } = props;
+    return (_jsxs(Container, { className: className, children: [_jsx(Image, { src: src }), _jsx("span", { children: text })] }));
+}
+const Container = styled.div `
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+`;
+const loading = keyframes `
+from {
+  transform: rotate(0deg);
+}
+
+to {
+  transform: rotate(360deg);
+}
+`;
+const Image = styled.img `
+  animation: ${loading} 3s linear infinite;
+  margin-bottom: 2rem;
+`;

package/build/match-device/useMatchDevice.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMatchDevice.d.ts","sourceRoot":"","sources":["../../src/match-device/useMatchDevice.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,MAAM;IACrB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,SAAS,EAAE,OAAO,CAAC;CACpB;AAQD,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EAAE,EAAE,MAAM,GAAG,MAAM,CA8BzD"}

package/build/match-device/useMatchDevice.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from "react";
+import UAParser from "ua-parser-js";
+export default function useMatchDevice(UA) {
+    const isClientSide = typeof window !== "undefined";
+    const compute = () => {
+        const parser = new UAParser.UAParser(UA);
+        const { type } = parser.getDevice();
+        const device = {
+            isMobile: type === "mobile",
+            isTablet: type === "tablet",
+            isMobileOrTablet: false,
+            isDesktop: !type,
+        };
+        device.isMobileOrTablet = device.isMobile || device.isTablet;
+        return device;
+    };
+    if (!isClientSide) {
+        return compute();
+    }
+    const [device, setDevice] = useState(compute());
+    useEffect(() => {
+        setDevice(compute());
+    }, [UA]);
+    return device;
+}

package/build/match-resolution/useMatchResolution.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMatchResolution.d.ts","sourceRoot":"","sources":["../../src/match-resolution/useMatchResolution.ts"],"names":[],"mappings":"AAGA,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,MAAM,CAAC;IACf,aAAa,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,kBAAkB,EAAE,MAAM,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,OAAO,CAAC;IAClB,eAAe,EAAE,OAAO,CAAC;IACzB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,oBAAoB,EAAE,OAAO,CAAC;IAC9B,oBAAoB,EAAE,OAAO,CAAC;IAC9B,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,WAAW,CAAC;IACzB,KAAK,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,OAAO,CAAC;CACnC;AAED,eAAO,MAAM,kBAAkB,EAAE,WAchC,CAAC;AAYF,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACxC,WAAW,GAAE,WAAgC,EAC7C,EAAE,GAAE,MAAW,GACd,eAAe,CAsCjB"}

package/build/match-resolution/useMatchResolution.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+import useMatchDevice from "../match-device/useMatchDevice";
+export const defaultBreakpoints = {
+    desktop: "(min-width: 1281px)",
+    laptop: "(min-width: 1025px) and (max-width: 1280px)",
+    laptopOrUpper: "(min-width: 1025px)",
+    laptopOrLower: "(max-width: 1280px)",
+    tablet: "(min-width: 768px) and (max-width: 1024px)",
+    tabletOrUpper: "(min-width: 768px)",
+    tabletOrLower: "(max-width: 1024px)",
+    largeMobile: "(min-width: 481px) and (max-width: 767px)",
+    largeMobileOrUpper: "(min-width: 481px)",
+    largeMobileOrLower: "(max-width: 767px)",
+    mobile: "(min-width: 320px) and (max-width: 480px)",
+    portrait: "(orientation: portrait)",
+    landscape: "(orientation: landscape)",
+};
+export default function useMatchResolution(breakpoints = defaultBreakpoints, UA = "") {
+    const isClientSide = typeof window !== "undefined";
+    const { isDesktop, isMobile } = useMatchDevice(UA);
+    const match = (query) => isClientSide && window.matchMedia(query).matches;
+    const compute = () => ({
+        isDesktop: isClientSide ? match(breakpoints.desktop) : isDesktop,
+        isLaptop: isClientSide ? match(breakpoints.laptop) : isDesktop,
+        isLaptopOrUpper: isClientSide ? match(breakpoints.laptopOrUpper) : isDesktop,
+        isLaptopOrLower: isClientSide ? match(breakpoints.laptopOrLower) : false,
+        isTablet: isClientSide ? match(breakpoints.tablet) : isMobile,
+        isTabletOrUpper: isClientSide ? match(breakpoints.tabletOrUpper) : false,
+        isTabletOrLower: isClientSide ? match(breakpoints.tabletOrLower) : isMobile,
+        isLargeMobile: isClientSide ? match(breakpoints.largeMobile) : isMobile,
+        isLargeMobileOrUpper: isClientSide ? match(breakpoints.largeMobileOrUpper) : false,
+        isLargeMobileOrLower: isClientSide ? match(breakpoints.largeMobileOrLower) : isMobile,
+        isMobile: isClientSide ? match(breakpoints.mobile) : isMobile,
+        isPortrait: isClientSide ? match(breakpoints.portrait) : false,
+        isLandscape: isClientSide ? match(breakpoints.landscape) : false,
+    });
+    const [resolution, setResolution] = useState(compute());
+    useEffect(() => {
+        const onResize = () => setResolution(compute());
+        window.addEventListener("resize", onResize);
+        return () => {
+            window.removeEventListener("resize", onResize);
+        };
+    }, []);
+    useEffect(() => {
+        setResolution(compute());
+    }, [breakpoints]);
+    return { resolution, breakpoints, match };
+}

package/build/modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../src/modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAqB,MAAM,OAAO,CAAC;AAI5D,UAAU,KAAK;IACb,QAAQ,EAAE,SAAS,CAAC;IACpB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,KAAK,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CAkB9D"}

package/build/modal/Modal.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import styled from "styled-components";
+import useOutsideAlerter from "../outside-alerter/useOutsideAlerter";
+export default function Modal(props) {
+    const { className, children, onClickedOutside } = props;
+    const ref = useRef(null);
+    const hasClickedOutside = useOutsideAlerter(ref);
+    useEffect(() => {
+        if (onClickedOutside && hasClickedOutside) {
+            onClickedOutside();
+        }
+    }, [hasClickedOutside]);
+    return (_jsx(Overlay, { className: `modal-overlay ${className}`, children: _jsx(Container, { className: "modal-content", ref: ref, children: children }) }));
+}
+const Overlay = styled.div `
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  overflow-y: auto;
+  z-index: 1;
+`;
+const Container = styled.div `
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translate(-50%, 0);
+  background-color: #f9fbff;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  z-index: 1;
+  margin: 5rem 0 5rem 0;
+`;

package/build/mount-react-hook/mountReactHook.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"mountReactHook.d.ts","sourceRoot":"","sources":["../../src/mount-react-hook/mountReactHook.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAG7C,MAAM,WAAW,WAAW;IAC1B,SAAS,EAAE,WAAW,CAAC;IACvB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,aAAa,GAAG,SAAS,CAAC;CAClC;AASD,MAAM,CAAC,OAAO,UAAU,cAAc,CACpC,SAAS,EAAE,aAAa,EACxB,KAAK,GAAE,aAAkB,GACxB,WAAW,CAab"}

package/build/mount-react-hook/mountReactHook.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render } from "@testing-library/react";
+export default function mountReactHook(Component, props = {}) {
+    let value = null;
+    const { container, unmount } = render(_jsx(Component, Object.assign({}, props, { children: (hookValue) => {
+            value = hookValue;
+            return null;
+        } })));
+    return { container, unmount, value };
+}

package/build/numbered-pagination/NumberedPagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberedPagination.d.ts","sourceRoot":"","sources":["../../src/numbered-pagination/NumberedPagination.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEzC,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAEzD,oBAAY,aAAa;IACvB,IAAI,IAAA;IACJ,KAAK,IAAA;CACN;AAED,MAAM,WAAW,uBAAwB,SAAQ,UAAU;IACzD,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,SAAS,CAAC;IAC3D,iBAAiB,CAAC,EAAE,CAAC,QAAQ,EAAE,aAAa,KAAK,SAAS,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAUD,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CA0ExE"}

package/build/numbered-pagination/NumberedPagination.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+export var ArrowPosition;
+(function (ArrowPosition) {
+    ArrowPosition[ArrowPosition["LEFT"] = 0] = "LEFT";
+    ArrowPosition[ArrowPosition["RIGHT"] = 1] = "RIGHT";
+})(ArrowPosition || (ArrowPosition = {}));
+export default function NumberedPagination(props) {
+    const { page, total, items, goToFirst, goToLeft, goToRight, goToLast, goToPage, renderSingleArrow, renderDoubleArrow, className = "", } = props;
+    return (_jsxs(Container, { className: `${className} pagination`, children: [page > 1 && (_jsxs(_Fragment, { children: [renderDoubleArrow && (_jsx(Item, { className: "pagination-item pagination-item-arrow pagination-item-double-arrow", onClick: () => goToFirst(), children: renderDoubleArrow(ArrowPosition.LEFT) })), renderSingleArrow && (_jsx(Item, { className: "pagination-item pagination-item-arrow pagination-item-single-arrow", onClick: () => goToLeft(), children: renderSingleArrow(ArrowPosition.LEFT) }))] })), items.map((page, index) => (_jsx(Item, { className: `pagination-item pagination-item-number ${page === props.page ? "selected" : ""}`, onClick: () => goToPage(page), children: page }, index))), page < total && (_jsxs(_Fragment, { children: [renderSingleArrow && (_jsx(Item, { className: "pagination-item pagination-item-arrow pagination-item-single-arrow", onClick: () => goToRight(), children: renderSingleArrow(ArrowPosition.RIGHT) })), renderDoubleArrow && (_jsx(Item, { className: "pagination-item pagination-item-arrow pagination-item-double-arrow", onClick: () => goToLast(), children: renderDoubleArrow(ArrowPosition.RIGHT) }))] }))] }));
+}
+const Container = styled.div `
+  display: flex;
+`;
+const Item = styled.div `
+  &:first-child {
+    border-width: 1px 1px 1px 1px;
+  }
+  border-style: solid;
+  border-width: 1px 1px 1px 0;
+  padding: 0.5rem 1rem 0.5rem 1rem;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+`;

package/build/outside-alerter/useOutsideAlerter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useOutsideAlerter.d.ts","sourceRoot":"","sources":["../../src/outside-alerter/useOutsideAlerter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAa,SAAS,EAAY,MAAM,OAAO,CAAC;AAEvD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,GAAG,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,OAAO,CAqB9E"}

package/build/outside-alerter/useOutsideAlerter.js

@@ -0,0 +1,20 @@
+import { useEffect, useState } from "react";
+export default function useOutsideAlerter(ref) {
+    const [hasClickedOutside, setClickedOutside] = useState(false);
+    const handleOnClickOutside = (event) => {
+        if (event.target && ref.current) {
+            if (!ref.current.contains(event.target)) {
+                setClickedOutside(true);
+            }
+        }
+    };
+    useEffect(() => {
+        if (ref) {
+            document.addEventListener("mousedown", (event) => handleOnClickOutside(event));
+        }
+        return () => {
+            document.removeEventListener("mousedown", (event) => handleOnClickOutside(event));
+        };
+    }, [ref]);
+    return hasClickedOutside;
+}

package/build/pagination/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../src/pagination/usePagination.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,YAAY,EAAE,MAAM,CAAC;IACrB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAkBD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,KAAK,EAAE,eAAe,GAAG,UAAU,CA0DxE"}

package/build/pagination/usePagination.js

@@ -0,0 +1,49 @@
+import { useEffect, useState } from "react";
+export default function usePagination(props) {
+    const { totalRecords, itemNeighbours = 2, minItems = 5, maxRecordsPerPage = 10 } = props;
+    const [page, setPage] = useState(props.page);
+    const [total, setTotal] = useState(0);
+    const [items, setItems] = useState([]);
+    const generateItems = () => {
+        const items = [];
+        const from = Math.max(1, Math.min(page - itemNeighbours, total + 1 - minItems));
+        const to = Math.min(total, Math.max(minItems, page + itemNeighbours));
+        for (let i = from; i <= to; i++) {
+            items.push(i);
+        }
+        return items;
+    };
+    useEffect(() => {
+        setTotal(Math.ceil(totalRecords / maxRecordsPerPage));
+    }, [totalRecords, maxRecordsPerPage]);
+    useEffect(() => {
+        setItems(generateItems());
+    }, [page, total, itemNeighbours, minItems]);
+    const goToPage = (page) => {
+        const currentPage = Math.max(1, Math.min(page, total));
+        setPage(currentPage);
+    };
+    const goToFirst = () => {
+        goToPage(1);
+    };
+    const goToLeft = () => {
+        goToPage(page - 1);
+    };
+    const goToRight = () => {
+        goToPage(page + 1);
+    };
+    const goToLast = () => {
+        goToPage(total);
+    };
+    return {
+        page,
+        total,
+        items,
+        maxRecordsPerPage,
+        goToPage,
+        goToFirst,
+        goToLeft,
+        goToRight,
+        goToLast,
+    };
+}

package/build/scroll-to/useScrollTo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScrollTo.d.ts","sourceRoot":"","sources":["../../src/scroll-to/useScrollTo.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,WAAW,YAAY;IAC3B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB;AASD,MAAM,CAAC,OAAO,UAAU,WAAW,CAAC,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,YAAY,CAchF"}

package/build/scroll-to/useScrollTo.js

@@ -0,0 +1,12 @@
+export default function useScrollTo(target) {
+    const isClientSide = typeof window !== "undefined";
+    if (!isClientSide) {
+        return { scrollToTop: () => null };
+    }
+    const scrollToTop = () => {
+        if (target.current) {
+            window.scrollTo(0, target.current.offsetTop);
+        }
+    };
+    return { scrollToTop };
+}

package/build/table/Table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzC,MAAM,WAAW,MAAM;IACrB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,KAAK,EAAE,MAAM,GAAG,GAAG,CAAC;CACtB;AAED,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,OAAO,EAAE,CAAC,EAAE,CAAC;IACb,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,SAAS,CAAC;IAC/B,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,SAAS,KAAK,SAAS,CAAC;IACrD,iBAAiB,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IAC/D,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IAChE,iBAAiB,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IAChE,sBAAsB,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IACpD,eAAe,CAAC,EAAE,MAAM,SAAS,CAAC;IAClC,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAWD,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,CAAC,EAAE,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,OAAO,CAyElE;AAoBD,eAAO,MAAM,EAAE,2KAId,CAAC;AAEF,eAAO,MAAM,EAAE,2JAGd,CAAC;AAEF,eAAO,MAAM,EAAE,uKAGd,CAAC"}

package/build/table/Table.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import styled from "styled-components";
+export default function Table(props) {
+    const { columns, records, renderHeader = () => null, renderFooter = () => null, renderColumnsRow = (columns) => (_jsx("tr", { className: "table-main-columns-row", children: columns })), renderColumnsCell = (column, key) => (_jsx(Th, { className: "table-main-columns-cell", children: column.name }, key)), renderRecordsRow = (cells, key) => (_jsx(Tr, { className: "table-main-records-row", children: cells }, key)), renderRecordsCell = (cell, key) => (_jsx(Td, { className: "table-main-records-cell", children: cell }, key)), renderRecordsEmptyCell = (key) => (_jsx(Td, { className: "table-main-records-cell", children: "X" }, key)), renderNoRecords = () => null, className = "", } = props;
+    const displayColumns = () => renderColumnsRow(columns.map((column, index) => renderColumnsCell(column, `column-${index}`)));
+    const displayRows = () => {
+        const columnNames = columns.map((column) => column.name);
+        return records.map((record, rowIndex) => {
+            const cells = columnNames.map((name) => record[name]);
+            return renderRecordsRow(cells.map((cell, cellIndex) => cell
+                ? renderRecordsCell(cell, `cell-${cellIndex}`)
+                : renderRecordsEmptyCell(`cell-${cellIndex}`)), `row-${rowIndex}`);
+        });
+    };
+    return (_jsxs(Container, { className: `table ${className}`, children: [renderHeader(), records.length === 0 ? (renderNoRecords()) : (_jsx(_Fragment, { children: _jsxs(Main, { className: "table-main", children: [_jsx("thead", { className: "table-main-columns", children: displayColumns() }), _jsx(TBody, { className: "table-main-records", children: displayRows() })] }) })), renderFooter()] }));
+}
+const Container = styled.div `
+  display: flex;
+  flex-flow: column;
+`;
+const Main = styled.table `
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+`;
+const TBody = styled.tbody `
+  user-select: text;
+  tr:last-child {
+    border: none;
+  }
+`;
+export const Th = styled.th `
+  padding: 2rem 1rem 1rem 0;
+  word-wrap: break-word;
+  white-space: nowrap;
+`;
+export const Tr = styled.tr `
+  text-align: center;
+  border-bottom: 2px solid black;
+`;
+export const Td = styled.td `
+  padding: 2rem 1rem 1rem 0;
+  word-wrap: break-word;
+`;

package/build/visible/useVisible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useVisible.d.ts","sourceRoot":"","sources":["../../src/visible/useVisible.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,SAAS,EAAE,MAAM,OAAO,CAAC;AAQvD,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,MAAM,EAAE,SAAS,CAAC,WAAW,CAAC,GAAG,OAAO,CAsB1E"}

package/build/visible/useVisible.js

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+export default function useVisible(target) {
+    const [isVisible, setVisibility] = useState(false);
+    const handleObserver = (entry) => {
+        setVisibility(entry.isIntersecting);
+    };
+    useEffect(() => {
+        const observer = new IntersectionObserver(([entry]) => handleObserver(entry));
+        if (target && target.current) {
+            observer.observe(target.current);
+        }
+        return () => {
+            if (target && target.current) {
+                observer.unobserve(target.current);
+            }
+        };
+    }, [target]);
+    return isVisible;
+}

package/package.json

@@ -1,95 +1,83 @@
 {
   "name": "@vincentgraul/react-components",
-  "version": "1.0.14",
+  "version": "1.0.16",
   "main": "build/esm/src/index.js",
   "module": "build/cjs/src/index.js",
   "exports": {
     "./match-device": {
-      "import": "./build/esm/src/match-device/useMatchDevice.js",
-      "require": "./build/cjs/src/match-device/useMatchDevice.js"
+      "import": "./build/match-device/useMatchDevice.js"
     },
     "./match-resolution": {
-      "import": "./build/esm/src/match-resolution/useMatchResolution.js",
-      "require": "./build/cjs/src/match-resolution/useMatchResolution.js"
+      "import": "./build/match-resolution/useMatchResolution.js"
     },
     "./mount-react-hook": {
-      "import": "./build/esm/src/mount-react-hook/mountReactHook.js",
-      "require": "./build/cjs/src/mount-react-hook/mountReactHook.js"
+      "import": "./build/mount-react-hook/mountReactHook.js"
     },
     "./numbered-pagination": {
-      "import": "./build/esm/src/numbered-pagination/NumberedPagination.js",
-      "require": "./build/cjs/src/numbered-pagination/NumberedPagination.js"
+      "import": "./build/numbered-pagination/NumberedPagination.js"
     },
     "./pagination": {
-      "import": "./build/esm/src/pagination/usePagination.js",
-      "require": "./build/cjs/src/pagination/usePagination.js"
+      "import": "./build/pagination/usePagination.js"
     },
     "./scroll-to": {
-      "import": "./build/esm/src/scroll-to/useScrollTo.js",
-      "require": "./build/cjs/src/scroll-to/useScrollTo.js"
+      "import": "./build/scroll-to/useScrollTo.js"
     },
     "./table": {
-      "import": "./build/esm/src/table/Table.js",
-      "require": "./build/cjs/src/table/Table.js"
+      "import": "./build/table/Table.js"
     },
     "./visible": {
-      "import": "./build/esm/src/visible/useVisible.js",
-      "require": "./build/cjs/src/visible/useVisible.js"
+      "import": "./build/visible/useVisible.js"
     },
     "./outside-alerter": {
-      "import": "./build/esm/src/outside-alerter/useOutsideAlerter.js",
-      "require": "./build/cjs/src/outside-alerter/useOutsideAlerter.js"
+      "import": "./build/outside-alerter/useOutsideAlerter.js"
     },
     "./modal": {
-      "import": "./build/esm/src/modal/Modal.js",
-      "require": "./build/cjs/src/modal/Modal.js"
+      "import": "./build/modal/Modal.js"
     },
     "./loader": {
-      "import": "./build/esm/src/loader/Loader.js",
-      "require": "./build/cjs/src/loader/Loader.js"
+      "import": "./build/loader/Loader.js"
     },
     "./image-loader": {
-      "import": "./build/esm/src/loader/image-loader/ImageLoader.js",
-      "require": "./build/cjs/src/loader/image-loader/ImageLoader.js"
+      "import": "./build/loader/image-loader/ImageLoader.js"
     }
   },
   "typesVersions": {
     "*": {
       "match-device": [
-        "build/esm/src/match-device/useMatchDevice.d.ts"
+        "build/match-device/useMatchDevice.d.ts"
       ],
       "match-resolution": [
-        "build/esm/src/match-resolution/useMatchResolution.d.ts"
+        "build/match-resolution/useMatchResolution.d.ts"
       ],
       "mount-react-hook": [
-        "build/esm/src/mount-react-hook/mountReactHook.d.ts"
+        "build/mount-react-hook/mountReactHook.d.ts"
       ],
       "numbered-pagination": [
-        "build/esm/src/numbered-pagination/NumberedPagination.d.ts"
+        "build/numbered-pagination/NumberedPagination.d.ts"
       ],
       "pagination": [
-        "build/esm/src/pagination/usePagination.d.ts"
+        "build/pagination/usePagination.d.ts"
       ],
       "scroll-to": [
-        "build/esm/src/scroll-to/useScrollTo.d.ts"
+        "build/scroll-to/useScrollTo.d.ts"
       ],
       "table": [
-        "build/esm/src/table/Table.d.ts"
+        "build/table/Table.d.ts"
       ],
       "visible": [
-        "build/esm/src/visible/useVisible.d.ts"
+        "build/visible/useVisible.d.ts"
       ],
       "outside-alerter": [
-        "build/esm/src/outside-alerter/useOutsideAlerter.d.ts"
+        "build/outside-alerter/useOutsideAlerter.d.ts"
       ],
       "modal": [
-        "build/esm/src/modal/Modal.d.ts"
+        "build/modal/Modal.d.ts"
       ],
       "loader": [
-        "build/esm/src/loader/Loader.d.ts"
+        "build/loader/Loader.d.ts"
       ],
       "image-loader": [
-        "build/esm/src/loader/image-loader/ImageLoader.d.ts"
+        "build/loader/image-loader/ImageLoader.d.ts"
       ]
     }
   },
@@ -117,7 +105,8 @@
     "doc": "typedoc",
     "lint": "eslint src",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "tsc": "tsc"
   },
   "dependencies": {
     "@types/react": "^18.2.14",

package/build/cjs/_virtual/AsymmetricMatcher.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/ConvertAnsi.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/DOMCollection.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/DOMElement.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/Immutable.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/ReactElement.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/ReactTestComponent.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/_commonjsHelpers.js

@@ -1 +0,0 @@
-"use strict";var e="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{};exports.commonjsGlobal=e,exports.getDefaultExportFromCjs=function(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e};

package/build/cjs/_virtual/alertRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/alertdialogRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/applicationRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/ariaAbstractRoles.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/ariaDpubRoles.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/ariaGraphicsRoles.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/ariaLiteralRoles.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/ariaPropsMap.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/articleRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/bannerRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/blockquoteRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/buttonRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/captionRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/cellRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/checkboxRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/codeRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/collections.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};

package/build/cjs/_virtual/columnheaderRole.js

@@ -1 +0,0 @@
-"use strict";exports.__exports={};