@digigov/ui 2.0.0-07ee8440 → 2.0.0-0b806366

package/app/App.js

@@ -0,0 +1,7 @@
+import react, { Suspense } from "react";
+const App = ({ children })=>/*#__PURE__*/ react.createElement(Suspense, {
+        fallback: 'loading...'
+    }, children);
+const StaticApp = ({ children })=>/*#__PURE__*/ react.createElement(react.Fragment, null, children);
+const app_App = App;
+export { StaticApp, app_App as default };

package/app/BannerContainer/index.js

@@ -1,7 +1,3 @@
-import BannerContainer from "@digigov/react-core/BannerContainer";
-var BannerContainer_default = BannerContainer;
-export {
-  BannerContainer,
-  BannerContainer_default as default
-};
-//# sourceMappingURL=index.js.map
+import BannerContainer from "@digigov/react-core/BannerContainer/index.js";
+const app_BannerContainer = BannerContainer;
+export { BannerContainer, app_BannerContainer as default };

package/app/BottomInfo/index.js

@@ -1,9 +1,5 @@
-import BottomInfo from "@digigov/react-core/BottomInfo";
-export * from "@digigov/react-core/BottomInfoContent";
-export * from "@digigov/react-core/BottomInfoContainer";
-var BottomInfo_default = BottomInfo;
-export {
-  BottomInfo,
-  BottomInfo_default as default
-};
-//# sourceMappingURL=index.js.map
+import BottomInfo from "@digigov/react-core/BottomInfo/index.js";
+export * from "@digigov/react-core/BottomInfoContent/index.js";
+export * from "@digigov/react-core/BottomInfoContainer/index.js";
+const app_BottomInfo = BottomInfo;
+export { BottomInfo, app_BottomInfo as default };

package/app/CloseButton/index.js

@@ -1,7 +1,4 @@
-export * from "@digigov/react-core/CloseButton";
-import CloseButton from "@digigov/react-core/CloseButton";
-var CloseButton_default = CloseButton;
-export {
-  CloseButton_default as default
-};
-//# sourceMappingURL=index.js.map
+import CloseButton from "@digigov/react-core/CloseButton/index.js";
+export * from "@digigov/react-core/CloseButton/index.js";
+const app_CloseButton = CloseButton;
+export { app_CloseButton as default };

package/app/FilterContainer/index.js

@@ -1,15 +1,12 @@
-export * from "@digigov/react-core/FilterContainer";
-export * from "@digigov/react-core/FilterHeadingContainer";
-export * from "@digigov/react-core/FilterContent";
-export * from "@digigov/react-core/FilterOptionsSection";
-export * from "@digigov/react-core/FilterSelectedHeading";
-export * from "@digigov/react-core/FilterSelectedSection";
-export * from "@digigov/react-core/ResultsHeading";
-export * from "@digigov/react-core/ResultsActionBar";
-export * from "@digigov/react-core/ResultsHeadingActions";
-import FilterContainer from "@digigov/react-core/FilterContainer";
-var FilterContainer_default = FilterContainer;
-export {
-  FilterContainer_default as default
-};
-//# sourceMappingURL=index.js.map
+import FilterContainer from "@digigov/react-core/FilterContainer/index.js";
+export * from "@digigov/react-core/FilterContainer/index.js";
+export * from "@digigov/react-core/FilterHeadingContainer/index.js";
+export * from "@digigov/react-core/FilterContent/index.js";
+export * from "@digigov/react-core/FilterOptionsSection/index.js";
+export * from "@digigov/react-core/FilterSelectedHeading/index.js";
+export * from "@digigov/react-core/FilterSelectedSection/index.js";
+export * from "@digigov/react-core/ResultsHeading/index.js";
+export * from "@digigov/react-core/ResultsActionBar/index.js";
+export * from "@digigov/react-core/ResultsHeadingActions/index.js";
+const app_FilterContainer = FilterContainer;
+export { app_FilterContainer as default };

package/app/Footer/FooterLink.d.ts

@@ -0,0 +1,7 @@
+export * from '@digigov/react-core/FooterLinkBase';
+import React from 'react';
+import { FooterLinkBaseProps } from '@digigov/react-core/FooterLinkBase';
+export interface FooterLinkProps extends FooterLinkBaseProps {
+}
+export declare const FooterLink: React.ForwardRefExoticComponent<Omit<FooterLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export default FooterLink;

package/app/Footer/FooterLink.js

@@ -0,0 +1,13 @@
+import { FooterLinkBase } from "@digigov/react-core/FooterLinkBase/index.js";
+import react from "react";
+import { Link } from "../../navigation/Link/index.js";
+export * from "@digigov/react-core/FooterLinkBase/index.js";
+const FooterLink_FooterLink = /*#__PURE__*/ react.forwardRef(function({ children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(FooterLinkBase, {
+        as: Link,
+        ref: ref,
+        ...props
+    }, children);
+});
+const Footer_FooterLink = FooterLink_FooterLink;
+export { FooterLink_FooterLink as FooterLink, Footer_FooterLink as default };

package/app/Footer/index.d.ts

@@ -4,12 +4,12 @@ export * from '@digigov/react-core/FooterContent';
 export * from '@digigov/react-core/FooterContentLogos';
 export * from '@digigov/react-core/FooterHeading';
 export * from '@digigov/react-core/FooterImage';
-export * from '@digigov/react-core/FooterLink';
 export * from '@digigov/react-core/FooterList';
 export * from '@digigov/react-core/FooterListItem';
 export * from '@digigov/react-core/FooterInfo';
 export * from '@digigov/react-core/FooterInfoSection';
 export * from '@digigov/react-core/FooterNavigation';
 export * from '@digigov/react-core/FooterNavigationSection';
+export * from './FooterLink.js';
 import Footer from '@digigov/react-core/Footer';
 export default Footer;

package/app/Footer/index.js

@@ -1,19 +1,16 @@
-export * from "@digigov/react-core/Footer";
-export * from "@digigov/react-core/FooterContainer";
-export * from "@digigov/react-core/FooterContent";
-export * from "@digigov/react-core/FooterContentLogos";
-export * from "@digigov/react-core/FooterHeading";
-export * from "@digigov/react-core/FooterImage";
-export * from "@digigov/react-core/FooterLink";
-export * from "@digigov/react-core/FooterList";
-export * from "@digigov/react-core/FooterListItem";
-export * from "@digigov/react-core/FooterInfo";
-export * from "@digigov/react-core/FooterInfoSection";
-export * from "@digigov/react-core/FooterNavigation";
-export * from "@digigov/react-core/FooterNavigationSection";
-import Footer from "@digigov/react-core/Footer";
-var Footer_default = Footer;
-export {
-  Footer_default as default
-};
-//# sourceMappingURL=index.js.map
+import Footer from "@digigov/react-core/Footer/index.js";
+export * from "@digigov/react-core/Footer/index.js";
+export * from "@digigov/react-core/FooterContainer/index.js";
+export * from "@digigov/react-core/FooterContent/index.js";
+export * from "@digigov/react-core/FooterContentLogos/index.js";
+export * from "@digigov/react-core/FooterHeading/index.js";
+export * from "@digigov/react-core/FooterImage/index.js";
+export * from "@digigov/react-core/FooterList/index.js";
+export * from "@digigov/react-core/FooterListItem/index.js";
+export * from "@digigov/react-core/FooterInfo/index.js";
+export * from "@digigov/react-core/FooterInfoSection/index.js";
+export * from "@digigov/react-core/FooterNavigation/index.js";
+export * from "@digigov/react-core/FooterNavigationSection/index.js";
+export * from "./FooterLink.js";
+const app_Footer = Footer;
+export { app_Footer as default };

package/app/Header/HeaderContent.js

@@ -0,0 +1,3 @@
+import HeaderContent from "@digigov/react-core/HeaderContent/index.js";
+const Header_HeaderContent = HeaderContent;
+export { HeaderContent, Header_HeaderContent as default };

package/app/Header/HeaderLogo.d.ts

@@ -1,3 +1,7 @@
-import HeaderLogo from '@digigov/react-core/HeaderLogo';
-export * from '@digigov/react-core/HeaderLogo';
+export * from '@digigov/react-core/HeaderLogoBase';
+import React from 'react';
+import { HeaderLogoBaseProps } from '@digigov/react-core/HeaderLogoBase';
+export interface HeaderLogoProps extends HeaderLogoBaseProps {
+}
+export declare const HeaderLogo: React.ForwardRefExoticComponent<Omit<HeaderLogoProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default HeaderLogo;

package/app/Header/HeaderLogo.js

@@ -0,0 +1,13 @@
+import { HeaderLogoBase } from "@digigov/react-core/HeaderLogoBase/index.js";
+import react from "react";
+import { Link } from "../../navigation/Link/index.js";
+export * from "@digigov/react-core/HeaderLogoBase/index.js";
+const HeaderLogo_HeaderLogo = /*#__PURE__*/ react.forwardRef(function({ children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(HeaderLogoBase, {
+        as: Link,
+        ref: ref,
+        ...props
+    }, children);
+});
+const Header_HeaderLogo = HeaderLogo_HeaderLogo;
+export { HeaderLogo_HeaderLogo as HeaderLogo, Header_HeaderLogo as default };

package/app/Header/HeaderNavMenuContent.js

@@ -0,0 +1,3 @@
+import HeaderNavMenuContent from "@digigov/react-core/HeaderNavMenuContent/index.js";
+const Header_HeaderNavMenuContent = HeaderNavMenuContent;
+export { HeaderNavMenuContent, Header_HeaderNavMenuContent as default };

package/app/Header/HeaderSecondaryLogo.d.ts

@@ -1,3 +1,7 @@
-import HeaderSecondaryLogo from '@digigov/react-core/HeaderSecondaryLogo';
-export { HeaderSecondaryLogo };
+export * from '@digigov/react-core/HeaderSecondaryLogoBase';
+import React from 'react';
+import { HeaderSecondaryLogoBaseProps } from '@digigov/react-core/HeaderSecondaryLogoBase';
+export interface HeaderSecondaryLogoProps extends HeaderSecondaryLogoBaseProps {
+}
+export declare const HeaderSecondaryLogo: React.ForwardRefExoticComponent<Omit<HeaderSecondaryLogoProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default HeaderSecondaryLogo;

package/app/Header/HeaderSecondaryLogo.js

@@ -0,0 +1,13 @@
+import { HeaderSecondaryLogoBase } from "@digigov/react-core/HeaderSecondaryLogoBase/index.js";
+import react from "react";
+import { Link } from "../../navigation/Link/index.js";
+export * from "@digigov/react-core/HeaderSecondaryLogoBase/index.js";
+const HeaderSecondaryLogo_HeaderSecondaryLogo = /*#__PURE__*/ react.forwardRef(function({ children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(HeaderSecondaryLogoBase, {
+        as: Link,
+        ref: ref,
+        ...props
+    }, children);
+});
+const Header_HeaderSecondaryLogo = HeaderSecondaryLogo_HeaderSecondaryLogo;
+export { HeaderSecondaryLogo_HeaderSecondaryLogo as HeaderSecondaryLogo, Header_HeaderSecondaryLogo as default };

package/app/Header/HeaderSection.js

@@ -0,0 +1,4 @@
+import HeaderSection from "@digigov/react-core/HeaderSection/index.js";
+export * from "@digigov/react-core/HeaderSection/index.js";
+const Header_HeaderSection = HeaderSection;
+export { Header_HeaderSection as default };

package/app/Header/HeaderTitle.d.ts

@@ -1,3 +1,7 @@
-import HeaderTitle from '@digigov/react-core/HeaderTitle';
-export * from '@digigov/react-core/HeaderTitle';
+export * from '@digigov/react-core/HeaderTitleBase';
+import React from 'react';
+import { HeaderTitleBaseProps } from '@digigov/react-core/HeaderTitleBase';
+export interface HeaderTitleProps extends HeaderTitleBaseProps {
+}
+export declare const HeaderTitle: React.ForwardRefExoticComponent<Omit<HeaderTitleProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default HeaderTitle;

package/app/Header/HeaderTitle.js

@@ -0,0 +1,13 @@
+import { HeaderTitleBase } from "@digigov/react-core/HeaderTitleBase/index.js";
+import react from "react";
+import { Link } from "../../navigation/Link/index.js";
+export * from "@digigov/react-core/HeaderTitleBase/index.js";
+const HeaderTitle_HeaderTitle = /*#__PURE__*/ react.forwardRef(function({ children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(HeaderTitleBase, {
+        as: Link,
+        ref: ref,
+        ...props
+    }, children);
+});
+const Header_HeaderTitle = HeaderTitle_HeaderTitle;
+export { HeaderTitle_HeaderTitle as HeaderTitle, Header_HeaderTitle as default };

package/app/Header/index.d.ts

@@ -1,9 +1,9 @@
 import Header from '@digigov/react-core/Header';
 export * from '@digigov/react-core/Header';
-export * from '@digigov/ui/app/Header/HeaderTitle';
-export * from '@digigov/ui/app/Header/HeaderLogo';
-export * from '@digigov/ui/app/Header/HeaderSection';
-export * from '@digigov/ui/app/Header/HeaderContent';
-export * from '@digigov/ui/app/Header/HeaderNavMenuContent';
-export * from '@digigov/ui/app/Header/HeaderSecondaryLogo';
+export * from './HeaderTitle.js';
+export * from './HeaderLogo.js';
+export * from './HeaderSection.js';
+export * from './HeaderContent.js';
+export * from './HeaderNavMenuContent.js';
+export * from './HeaderSecondaryLogo.js';
 export default Header;

package/app/Header/index.js

@@ -1,13 +1,10 @@
-import Header from "@digigov/react-core/Header";
-export * from "@digigov/react-core/Header";
-export * from "@digigov/ui/app/Header/HeaderTitle";
-export * from "@digigov/ui/app/Header/HeaderLogo";
-export * from "@digigov/ui/app/Header/HeaderSection";
-export * from "@digigov/ui/app/Header/HeaderContent";
-export * from "@digigov/ui/app/Header/HeaderNavMenuContent";
-export * from "@digigov/ui/app/Header/HeaderSecondaryLogo";
-var Header_default = Header;
-export {
-  Header_default as default
-};
-//# sourceMappingURL=index.js.map
+import Header from "@digigov/react-core/Header/index.js";
+export * from "@digigov/react-core/Header/index.js";
+export * from "./HeaderTitle.js";
+export * from "./HeaderLogo.js";
+export * from "./HeaderSection.js";
+export * from "./HeaderContent.js";
+export * from "./HeaderNavMenuContent.js";
+export * from "./HeaderSecondaryLogo.js";
+const app_Header = Header;
+export { app_Header as default };

package/app/Loader/index.d.ts

@@ -1,5 +1,5 @@
 export * from '@digigov/react-core/LoaderContainer';
 export * from '@digigov/react-core/FullPageBackground';
-export * from '@digigov/ui/app/Loader/index.web';
+export * from './index.web.js';
 import LoaderContainer from '@digigov/react-core/LoaderContainer';
 export default LoaderContainer;

package/app/Loader/index.js

@@ -1,9 +1,6 @@
-export * from "@digigov/react-core/LoaderContainer";
-export * from "@digigov/react-core/FullPageBackground";
-export * from "@digigov/ui/app/Loader/index.web";
-import LoaderContainer from "@digigov/react-core/LoaderContainer";
-var Loader_default = LoaderContainer;
-export {
-  Loader_default as default
-};
-//# sourceMappingURL=index.js.map
+import LoaderContainer from "@digigov/react-core/LoaderContainer/index.js";
+export * from "@digigov/react-core/LoaderContainer/index.js";
+export * from "@digigov/react-core/FullPageBackground/index.js";
+export * from "./index.web.js";
+const Loader = LoaderContainer;
+export { Loader as default };

package/app/Loader/index.native.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
-import { CircularProgressProps } from '@digigov/react-core/CircularProgress';
-export declare const CircularProgress: React.FC<CircularProgressProps>;
+import { CircularProgressBaseProps } from '@digigov/react-core/CircularProgressBase';
+export declare const CircularProgress: React.FC<CircularProgressBaseProps>;

package/app/Loader/index.native.js

@@ -0,0 +1,93 @@
+import react, { useEffect, useRef } from "react";
+import { Animated, Easing } from "react-native";
+import react_native_svg, { Circle } from "react-native-svg";
+const CircularProgress = ({ size = 'md', color = 'primary' })=>{
+    const sizes = {
+        sm: 20,
+        md: 40,
+        lg: 50
+    };
+    const strokeWidth = sizes[size] / 4;
+    const radius = (sizes[size] - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const rotateAnim = useRef(new Animated.Value(0)).current;
+    const dashAnim = useRef(new Animated.Value(circumference)).current;
+    const progressColor = 'primary' === color ? '#003375' : '#fff';
+    const backgroundColor = '#01b0f0';
+    const duration = 4000;
+    useEffect(()=>{
+        Animated.loop(Animated.timing(rotateAnim, {
+            toValue: 1,
+            duration: 10000,
+            easing: Easing.linear,
+            useNativeDriver: true
+        })).start();
+    }, [
+        rotateAnim
+    ]);
+    useEffect(()=>{
+        Animated.loop(Animated.sequence([
+            Animated.timing(dashAnim, {
+                toValue: 0,
+                duration: 0.4 * duration,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true
+            }),
+            Animated.timing(dashAnim, {
+                toValue: circumference,
+                duration: 0.6 * duration,
+                easing: Easing.inOut(Easing.ease),
+                useNativeDriver: true
+            })
+        ])).start();
+    }, [
+        dashAnim,
+        duration,
+        circumference
+    ]);
+    const rotateInterpolate = rotateAnim.interpolate({
+        inputRange: [
+            0,
+            1
+        ],
+        outputRange: [
+            '0deg',
+            '360deg'
+        ]
+    });
+    return /*#__PURE__*/ react.createElement(Animated.View, {
+        style: [
+            {
+                width: sizes[size],
+                height: sizes[size],
+                transform: [
+                    {
+                        rotate: rotateInterpolate
+                    }
+                ]
+            }
+        ]
+    }, /*#__PURE__*/ react.createElement(react_native_svg, {
+        width: sizes[size],
+        height: sizes[size],
+        viewBox: `0 0 ${sizes[size]} ${sizes[size]}`
+    }, /*#__PURE__*/ react.createElement(Circle, {
+        cx: sizes[size] / 2,
+        cy: sizes[size] / 2,
+        r: radius,
+        stroke: backgroundColor,
+        strokeWidth: strokeWidth,
+        fill: "none"
+    }), /*#__PURE__*/ react.createElement(AnimatedCircle, {
+        cx: sizes[size] / 2,
+        cy: sizes[size] / 2,
+        r: radius,
+        stroke: progressColor,
+        strokeWidth: strokeWidth,
+        strokeDasharray: `${circumference}`,
+        strokeDashoffset: dashAnim,
+        fill: "none"
+    })));
+};
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+export { CircularProgress };

package/app/Loader/index.web.d.ts

@@ -1 +1,19 @@
-export * from '@digigov/react-core/CircularProgress';
+import React from 'react';
+export * from '@digigov/react-core/CircularProgressBase';
+import { CircularProgressBaseProps } from '@digigov/react-core/CircularProgressBase';
+export interface CircularProgressProps extends CircularProgressBaseProps {
+    /**
+     * loadingText prop is optional
+     * Text for screen readers when loading starts
+     * @default "Γίνεται φόρτωση..."
+     */
+    loadingText?: string;
+    /**
+     * loadingFinishedText prop is optional
+     * Text for screen readers when loading finishes
+     * @default "Η φόρτωση ολοκληρώθηκε."
+     */
+    loadingFinishedText?: string;
+}
+export declare const CircularProgress: React.ForwardRefExoticComponent<Omit<CircularProgressProps, "ref"> & React.RefAttributes<SVGElement>>;
+export default CircularProgress;

package/app/Loader/index.web.js

@@ -0,0 +1,13 @@
+import react from "react";
+import CircularProgressBase from "@digigov/react-core/CircularProgressBase/index.js";
+import { useNotificationArea } from "../hooks/useNotificationArea.js";
+export * from "@digigov/react-core/CircularProgressBase/index.js";
+const index_web_CircularProgress = /*#__PURE__*/ react.forwardRef(function({ loadingText = 'Γίνεται φόρτωση...', loadingFinishedText = 'Η φόρτωση ολοκληρώθηκε.', ...props }, ref) {
+    useNotificationArea(loadingText, loadingFinishedText);
+    return /*#__PURE__*/ react.createElement(CircularProgressBase, {
+        ref: ref,
+        ...props
+    });
+});
+const index_web = index_web_CircularProgress;
+export { index_web_CircularProgress as CircularProgress, index_web as default };

package/app/Masthead/index.js

@@ -1,9 +1,6 @@
-export * from "@digigov/react-core/Masthead";
-export * from "@digigov/react-core/MastheadBody";
-export * from "@digigov/react-core/MastheadLogo";
-import Masthead from "@digigov/react-core/Masthead";
-var Masthead_default = Masthead;
-export {
-  Masthead_default as default
-};
-//# sourceMappingURL=index.js.map
+import Masthead from "@digigov/react-core/Masthead/index.js";
+export * from "@digigov/react-core/Masthead/index.js";
+export * from "@digigov/react-core/MastheadBody/index.js";
+export * from "@digigov/react-core/MastheadLogo/index.js";
+const app_Masthead = Masthead;
+export { app_Masthead as default };

package/app/Modal/auto.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { ButtonProps } from '@digigov/react-core/Button';
 import { ModalContainerProps } from '@digigov/react-core/ModalContainer';
-import { ModalId, UseModalReturn } from '@digigov/ui/app/Modal/hooks';
+import { ModalId, UseModalReturn } from './hooks.js';
 export declare const ModalContext: React.Context<UseModalReturn | null>;
 export interface ModalAutoProps extends ModalContainerProps {
     id: string;

package/app/Modal/auto.js

@@ -0,0 +1,43 @@
+import react, { useContext } from "react";
+import { Button } from "@digigov/react-core/Button/index.js";
+import index from "./index.js";
+import { useModal } from "./hooks.js";
+const ModalContext = /*#__PURE__*/ react.createContext(null);
+const ModalProvider = ({ children })=>{
+    const modal = useModal();
+    return /*#__PURE__*/ react.createElement(ModalContext.Provider, {
+        value: modal
+    }, children);
+};
+const useModalContext = ()=>{
+    const context = useContext(ModalContext);
+    if (null === context) throw new Error('useModalContext must be used within an ModalProvider');
+    return context;
+};
+const auto_ModalAuto = /*#__PURE__*/ react.forwardRef(function({ id, clickOutside = false, closeOnEscape = false, ...props }, ref) {
+    const context = useModalContext();
+    if (!context) throw new Error('ModalAuto must be used within an ModalProvider');
+    const { registerModal } = context;
+    return /*#__PURE__*/ react.createElement(index, {
+        ...registerModal(id, {
+            clickOutside,
+            closeOnEscape
+        }),
+        ...props,
+        ref: ref
+    }, props.children);
+});
+const auto_ModalButtonAuto = /*#__PURE__*/ react.forwardRef(function({ modal: forModal, open, variant = 'button', color = 'primary', ...props }, ref) {
+    const context = useModalContext();
+    if (!context) throw new Error('ModalButtonAuto must be used within an ModalProvider');
+    const { registerAction } = context;
+    return /*#__PURE__*/ react.createElement(Button, {
+        ref: ref,
+        ...registerAction(forModal, open ? 'open' : 'close', {
+            variant,
+            color
+        }),
+        ...props
+    });
+});
+export { auto_ModalAuto as ModalAuto, auto_ModalButtonAuto as ModalButtonAuto, ModalContext, ModalProvider, useModalContext };

package/app/Modal/hooks.d.ts

@@ -13,14 +13,14 @@ export interface UseModalReturn {
         id: string;
         'aria-modal': boolean;
         'aria-labelledby': string;
-        ref?: React.RefObject<HTMLDivElement>;
+        ref?: React.RefObject<HTMLDivElement | null>;
     };
     registerAction: (id: ModalId, type: 'open' | 'close', options?: {
         variant?: string;
         color?: string;
     }) => {
         onClick: () => void;
-        ref?: React.RefObject<HTMLButtonElement>;
+        ref?: React.RefObject<HTMLButtonElement | null>;
     };
 }
 export declare const useModal: () => UseModalReturn;

package/app/Modal/hooks.js

@@ -0,0 +1,54 @@
+import react, { useCallback, useRef, useState } from "react";
+const useModal = ()=>{
+    const [currentOpen, setCurrentOpen] = useState(null);
+    const modalsRef = useRef(new Map());
+    const buttonsRef = useRef(new Map());
+    const open = useCallback((id)=>{
+        setCurrentOpen(id);
+    }, []);
+    const close = useCallback(()=>{
+        setCurrentOpen(null);
+    }, []);
+    const registerModal = useCallback((id, options)=>{
+        const modalId = `modal-${id}`;
+        if (!modalsRef.current.get(id)?.current) {
+            modalsRef.current.set(id, react.createRef());
+            if (options?.clickOutside && currentOpen === id) {
+                const handleOutsideClick = (event)=>{
+                    const modalContainer = document.getElementById(modalId);
+                    if (modalContainer === event.target) close();
+                };
+                window.addEventListener('mousedown', handleOutsideClick);
+            }
+        }
+        return {
+            open: currentOpen === id,
+            role: 'dialog',
+            id: modalId,
+            onEscape: options?.closeOnEscape ? close : null,
+            'aria-modal': true,
+            'aria-labelledby': `modal-heading-${id}`,
+            ref: modalsRef.current.get(id)
+        };
+    }, [
+        currentOpen
+    ]);
+    const registerAction = useCallback((id, type, options)=>{
+        if (!buttonsRef.current.has(id)) buttonsRef.current.set(id, react.createRef());
+        return {
+            onClick: ()=>'open' === type ? open(id) : close(),
+            ref: buttonsRef.current.get(id),
+            ...options
+        };
+    }, [
+        currentOpen
+    ]);
+    return {
+        open,
+        close,
+        currentOpen,
+        registerAction,
+        registerModal
+    };
+};
+export { useModal };

package/app/Modal/index.d.ts

@@ -2,8 +2,8 @@ export * from '@digigov/react-core/ModalContainer';
 export * from '@digigov/react-core/ModalHeading';
 export * from '@digigov/react-core/ModalContent';
 export * from '@digigov/react-core/ModalAction';
-export * from '@digigov/ui/app/Modal/hooks';
-export * from '@digigov/ui/app/Modal/hooks';
-export * from '@digigov/ui/app/Modal/index.web';
-import Modal from '@digigov/ui/app/Modal/index.web';
+export * from './hooks.js';
+export * from './hooks.js';
+export * from './index.web.js';
+import Modal from './index.web.js';
 export default Modal;