@digigov/ui 2.0.0-264e5fff → 2.0.0-290ada95

package/navigation/BackLink/index.js

@@ -1,17 +1,13 @@
-export * from "@digigov/react-core/BackLinkBase";
-import React from "react";
-import {
-  BackLinkBase
-} from "@digigov/react-core/BackLinkBase";
-import { Link } from "@digigov/ui/navigation/Link";
-const BackLink = React.forwardRef(
-  function BackLink2({ children, ...props }, ref) {
-    return /* @__PURE__ */ React.createElement(BackLinkBase, { as: Link, ref, ...props }, children);
-  }
-);
-var BackLink_default = BackLink;
-export {
-  BackLink,
-  BackLink_default as default
-};
-//# sourceMappingURL=index.js.map
+import { BackLinkBase } from "@digigov/react-core/BackLinkBase/index.js";
+import react from "react";
+import { Link } from "../Link/index.js";
+export * from "@digigov/react-core/BackLinkBase/index.js";
+const BackLink_BackLink = /*#__PURE__*/ react.forwardRef(function({ children, ...props }, ref) {
+    return /*#__PURE__*/ react.createElement(BackLinkBase, {
+        as: Link,
+        ref: ref,
+        ...props
+    }, children);
+});
+const navigation_BackLink = BackLink_BackLink;
+export { BackLink_BackLink as BackLink, navigation_BackLink as default };

package/navigation/BackToTopLink/index.js

@@ -1,51 +1,38 @@
-import React, { useState, useEffect } from "react";
-import BackToTopContainer from "@digigov/react-core/BackToTopContainer";
-import BackToTopLink from "@digigov/react-core/BackToTopLink";
-const createObserver = (observeElement, callback) => {
-  const intersectionObserver = new IntersectionObserver(
-    ([e]) => {
-      return callback(e.intersectionRatio < 1);
-    },
-    { threshold: [1] }
-  );
-  if (observeElement) {
-    intersectionObserver.observe(observeElement);
-  }
+import react, { useEffect, useState } from "react";
+import BackToTopContainer from "@digigov/react-core/BackToTopContainer/index.js";
+import BackToTopLink from "@digigov/react-core/BackToTopLink/index.js";
+export * from "@digigov/react-core/BackToTopLink/index.js";
+export * from "@digigov/react-core/BackToTopLimit/index.js";
+export * from "@digigov/react-core/BackToTopContainer/index.js";
+const createObserver = (observeElement, callback)=>{
+    const intersectionObserver = new IntersectionObserver(([e])=>callback(e.intersectionRatio < 1), {
+        threshold: [
+            1
+        ]
+    });
+    if (observeElement) intersectionObserver.observe(observeElement);
 };
-const useObserver = (id, callback) => {
-  useEffect(() => {
-    const el = document.getElementById(id);
-    createObserver(el, callback);
-  }, []);
+const useObserver = (id, callback)=>{
+    useEffect(()=>{
+        const el = document.getElementById(id);
+        createObserver(el, callback);
+    }, []);
 };
-const BackToTop = React.forwardRef(
-  function BackToTop2({
-    children,
-    topLimitId = "back-to-top-limit",
-    onScrollToTop,
-    ...props
-  }) {
+const BackToTopLink_BackToTop = /*#__PURE__*/ react.forwardRef(function({ children, topLimitId = 'back-to-top-limit', onScrollToTop, ...props }) {
     const [persistent, setPersistent] = useState(false);
-    const callSetPersistent = (value) => window.scrollY > 0 && setPersistent(value);
+    const callSetPersistent = (value)=>window.scrollY > 0 && setPersistent(value);
     useObserver(topLimitId, callSetPersistent);
-    useObserver("back-to-top-element", callSetPersistent);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(BackToTopContainer, { persistent, ...props }, /* @__PURE__ */ React.createElement(
-      BackToTopLink,
-      {
+    useObserver('back-to-top-element', callSetPersistent);
+    return /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(BackToTopContainer, {
+        persistent: persistent,
+        ...props
+    }, /*#__PURE__*/ react.createElement(BackToTopLink, {
         id: "back-to-top-link",
         onClick: onScrollToTop,
         href: `#${topLimitId}`
-      },
-      children
-    )), /* @__PURE__ */ React.createElement("div", { id: "back-to-top-element" }));
-  }
-);
-export * from "@digigov/react-core/BackToTopLink";
-export * from "@digigov/react-core/BackToTopLimit";
-export * from "@digigov/react-core/BackToTopContainer";
-var BackToTopLink_default = BackToTopLink;
-export {
-  BackToTop,
-  BackToTopLink_default as default
-};
-//# sourceMappingURL=index.js.map
+    }, children)), /*#__PURE__*/ react.createElement("div", {
+        id: "back-to-top-element"
+    }));
+});
+const navigation_BackToTopLink = BackToTopLink;
+export { BackToTopLink_BackToTop as BackToTop, navigation_BackToTopLink as default };

package/navigation/Breadcrumbs/BreadcrumbsListItem.js

@@ -0,0 +1,14 @@
+import react from "react";
+import clsx from "clsx";
+import { BreadcrumbsListItemWrapper } from "@digigov/react-core/BreadcrumbsListItemWrapper/index.js";
+import Link from "../Link/index.js";
+const BreadcrumbsListItem = ({ href, children, ...props })=>/*#__PURE__*/ react.createElement(BreadcrumbsListItemWrapper, props, /*#__PURE__*/ react.createElement(Link, {
+        href: href,
+        defaultStyle: false,
+        className: clsx({
+            'ds-breadcrumbs__link': true,
+            'ds-breadcrumbs__link--inactive': void 0 === href
+        })
+    }, children));
+const Breadcrumbs_BreadcrumbsListItem = BreadcrumbsListItem;
+export { BreadcrumbsListItem, Breadcrumbs_BreadcrumbsListItem as default };

package/navigation/Breadcrumbs/BreadcrumbsListItemLink.js

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

package/navigation/Breadcrumbs/auto.d.ts

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
-import { BreadcrumbsProps } from '@digigov/ui/navigation/Breadcrumbs';
-import { UseBreadcrumbsReturn, BreadcrumbItem } from '@digigov/ui/navigation/Breadcrumbs/hooks';
+import { BreadcrumbsProps } from './index.js';
+import { UseBreadcrumbsReturn, BreadcrumbItem } from './hooks.js';
 export interface BreadcrumbsListAutoProps extends BreadcrumbsProps {
 }
 export interface BreadcrumbsAutoProps extends BreadcrumbsProps {

package/navigation/Breadcrumbs/auto.js

@@ -0,0 +1,29 @@
+import react, { createContext, useContext } from "react";
+import { Breadcrumbs, BreadcrumbsList, BreadcrumbsListItem } from "./index.js";
+import { useBreadcrumbs } from "./hooks.js";
+const BreadcrumbsContext = /*#__PURE__*/ createContext(null);
+const BreadcrumbsAuto = ({ items, initialUrlRoute, children })=>{
+    const breadcrumbs = useBreadcrumbs(items, initialUrlRoute);
+    return /*#__PURE__*/ react.createElement(BreadcrumbsContext.Provider, {
+        value: breadcrumbs
+    }, children);
+};
+const useBreadcrumbsContext = ()=>{
+    const context = useContext(BreadcrumbsContext);
+    if (!context) throw new Error('BreadcrumbsContext must be used within an BreadcrumbsProvider');
+    return context;
+};
+const auto_BreadcrumbsListAuto = /*#__PURE__*/ react.forwardRef(function(props, ref) {
+    const { breadcrumbs, setActiveItem } = useBreadcrumbsContext();
+    return /*#__PURE__*/ react.createElement(Breadcrumbs, {
+        ref: ref,
+        role: "navigation",
+        ...props
+    }, /*#__PURE__*/ react.createElement(BreadcrumbsList, null, breadcrumbs.map((breadcrumb, index)=>/*#__PURE__*/ react.createElement(BreadcrumbsListItem, {
+            key: index,
+            href: breadcrumbs.length - 1 === index ? void 0 : breadcrumb.href,
+            onClick: ()=>setActiveItem(breadcrumb),
+            "aria-current": breadcrumbs.length - 1 === index ? 'page' : void 0
+        }, breadcrumb.title))));
+});
+export { BreadcrumbsAuto, BreadcrumbsContext, auto_BreadcrumbsListAuto as BreadcrumbsListAuto, useBreadcrumbsContext };

package/navigation/Breadcrumbs/hooks.js

@@ -0,0 +1,42 @@
+import { useCallback, useMemo, useState } from "react";
+import { slug } from "./slug.js";
+import { flattenRoutes } from "./utils.js";
+const useBreadcrumbs = (items, initialUrlRoute)=>{
+    const routes = useMemo(()=>flattenRoutes(items, 100), [
+        items
+    ]);
+    const [currentRoute, setCurrentRoute] = useState(initialUrlRoute || '');
+    const setActiveItem = useCallback((item)=>{
+        const itemHref = item.href ?? slug(item.title, 100);
+        setCurrentRoute(()=>{
+            const selectedRoute = Object.keys(routes).find((route)=>route.endsWith(itemHref));
+            return selectedRoute || '/';
+        });
+    }, [
+        routes
+    ]);
+    const constructBreadcrumbs = useCallback((routes)=>{
+        if (currentRoute) {
+            const selectedBreadcrumb = routes[currentRoute];
+            return [
+                ...selectedBreadcrumb?.parents?.map((parent)=>({
+                        title: parent,
+                        href: Object.keys(routes).find((route)=>routes[route].title === parent)
+                    })) || [],
+                {
+                    title: selectedBreadcrumb?.title,
+                    href: currentRoute
+                }
+            ];
+        }
+        return [];
+    }, [
+        currentRoute
+    ]);
+    return {
+        breadcrumbs: constructBreadcrumbs(routes),
+        currentRoute,
+        setActiveItem
+    };
+};
+export { useBreadcrumbs };

package/navigation/Breadcrumbs/index.d.ts

@@ -1,8 +1,8 @@
 export * from '@digigov/react-core/Breadcrumbs';
 export * from '@digigov/react-core/BreadcrumbsList';
 export * from '@digigov/react-core/BreadcrumbsListItemWrapper';
-export * from '@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItemLink';
+export * from './BreadcrumbsListItemLink.js';
 import Breadcrumbs from '@digigov/react-core/Breadcrumbs';
-export * from '@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItem';
-export * from '@digigov/ui/navigation/Breadcrumbs/utils';
+export * from './BreadcrumbsListItem.js';
+export * from './utils.js';
 export default Breadcrumbs;

package/navigation/Breadcrumbs/index.js

@@ -1,12 +1,9 @@
-export * from "@digigov/react-core/Breadcrumbs";
-export * from "@digigov/react-core/BreadcrumbsList";
-export * from "@digigov/react-core/BreadcrumbsListItemWrapper";
-export * from "@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItemLink";
-import Breadcrumbs from "@digigov/react-core/Breadcrumbs";
-export * from "@digigov/ui/navigation/Breadcrumbs/BreadcrumbsListItem";
-export * from "@digigov/ui/navigation/Breadcrumbs/utils";
-var Breadcrumbs_default = Breadcrumbs;
-export {
-  Breadcrumbs_default as default
-};
-//# sourceMappingURL=index.js.map
+import Breadcrumbs from "@digigov/react-core/Breadcrumbs/index.js";
+export * from "@digigov/react-core/Breadcrumbs/index.js";
+export * from "@digigov/react-core/BreadcrumbsList/index.js";
+export * from "@digigov/react-core/BreadcrumbsListItemWrapper/index.js";
+export * from "./BreadcrumbsListItemLink.js";
+export * from "./BreadcrumbsListItem.js";
+export * from "./utils.js";
+const navigation_Breadcrumbs = Breadcrumbs;
+export { navigation_Breadcrumbs as default };

package/navigation/Breadcrumbs/slug.js

@@ -0,0 +1,94 @@
+function slug(text, maxWidth = 50) {
+    const greekToLatinMap = {
+        α: 'a',
+        β: 'b',
+        γ: 'g',
+        δ: 'd',
+        ε: 'e',
+        ζ: 'z',
+        η: 'i',
+        θ: 'th',
+        ι: 'i',
+        κ: 'k',
+        λ: 'l',
+        μ: 'm',
+        ν: 'n',
+        ξ: 'x',
+        ο: 'o',
+        π: 'p',
+        ρ: 'r',
+        σ: 's',
+        τ: 't',
+        υ: 'y',
+        φ: 'f',
+        χ: 'ch',
+        ψ: 'ps',
+        ω: 'o',
+        ά: 'a',
+        έ: 'e',
+        ί: 'i',
+        ό: 'o',
+        ύ: 'y',
+        ή: 'i',
+        ώ: 'o',
+        ς: 's',
+        ϊ: 'i',
+        ΰ: 'y',
+        ϋ: 'y',
+        ΐ: 'i',
+        Α: 'A',
+        Β: 'B',
+        Γ: 'G',
+        Δ: 'D',
+        Ε: 'E',
+        Ζ: 'Z',
+        Η: 'I',
+        Θ: 'TH',
+        Ι: 'I',
+        Κ: 'K',
+        Λ: 'L',
+        Μ: 'M',
+        Ν: 'N',
+        Ξ: 'X',
+        Ο: 'O',
+        Π: 'P',
+        Ρ: 'R',
+        Σ: 'S',
+        Τ: 'T',
+        Υ: 'Y',
+        Φ: 'F',
+        Χ: 'CH',
+        Ψ: 'PS',
+        Ω: 'O',
+        Ά: 'A',
+        Έ: 'E',
+        Ί: 'I',
+        Ό: 'O',
+        Ύ: 'Y',
+        Ή: 'I',
+        Ώ: 'O',
+        Ϊ: 'I',
+        Ϋ: 'Y'
+    };
+    const latinText = text.split('').map((char)=>greekToLatinMap[char] || char).join('');
+    const processedText = latinText.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]+/g, '').replace(/--+/g, '-').replace(/^-+/, '').replace(/-+$/, '');
+    let slug1 = processedText.substring(0, maxWidth);
+    const remainingText = processedText.substring(maxWidth);
+    slug1 = slug1.replace(/-+$/, '');
+    const id = generateIDFromText(remainingText);
+    return `${slug1}${id && '-'}${id}`;
+}
+function generateIDFromText(text) {
+    if (!text) return '';
+    let processedText = text.replace(/-/g, '').replace(/[^a-z0-9]/g, '');
+    if (!processedText) processedText = 'default';
+    let hash = 0;
+    for(let i = 0; i < processedText.length; i++){
+        const char = processedText.charCodeAt(i);
+        hash = (hash << 5) - hash + char;
+        hash &= hash;
+    }
+    const id = Math.abs(hash).toString(36);
+    return id;
+}
+export { slug };

package/navigation/Breadcrumbs/utils.js

@@ -0,0 +1,30 @@
+import { slug } from "./slug.js";
+const flattenRoutes = (items, maxLength = 15, prepend = '', parents = [])=>{
+    let flattened = {};
+    items.forEach((value)=>{
+        const { title, href, children, ...rest } = value;
+        const route = [
+            prepend,
+            href || slug(title, maxLength)
+        ].join('/');
+        const routeChildren = children ? children.map((child)=>({
+                href: child.href || slug(child.title, maxLength),
+                ...child
+            })) : [];
+        flattened[route] = {
+            ...rest,
+            title,
+            children: routeChildren,
+            parents
+        };
+        if (children) flattened = {
+            ...flattened,
+            ...flattenRoutes(children, maxLength, route, [
+                ...parents,
+                title
+            ])
+        };
+    });
+    return flattened;
+};
+export { flattenRoutes };

package/navigation/Drawer/auto.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { ButtonProps } from '@digigov/react-core/Button';
 import { DrawerProps } from '@digigov/react-core/Drawer';
 import { DrawerHeadingProps } from '@digigov/react-core/DrawerHeading';
-import { DrawerId, UseDrawerReturn } from '@digigov/ui/navigation/Drawer/hooks';
+import { DrawerId, UseDrawerReturn } from './hooks.js';
 export declare const DrawerContext: React.Context<UseDrawerReturn | null>;
 export interface DrawerHeadingAutoProps extends DrawerHeadingProps {
     drawer: DrawerId;

package/navigation/Drawer/auto.js

@@ -0,0 +1,51 @@
+import react, { useContext } from "react";
+import { Button } from "@digigov/react-core/Button/index.js";
+import { Drawer } from "@digigov/react-core/Drawer/index.js";
+import { DrawerHeading } from "@digigov/react-core/DrawerHeading/index.js";
+import { useDrawer } from "./hooks.js";
+const DrawerContext = /*#__PURE__*/ react.createContext(null);
+const DrawerProvider = ({ children })=>{
+    const modal = useDrawer();
+    return /*#__PURE__*/ react.createElement(DrawerContext.Provider, {
+        value: modal
+    }, children);
+};
+const useDrawerContext = ()=>{
+    const context = useContext(DrawerContext);
+    return context;
+};
+const auto_DrawerAuto = /*#__PURE__*/ react.forwardRef(function({ id, direction = 'left', upRelative = 'never', ...props }, ref) {
+    const context = useDrawerContext();
+    if (!context) throw new Error('DrawerAuto must be used within an DrawerProvider');
+    const { registerDrawer } = context;
+    return /*#__PURE__*/ react.createElement(Drawer, {
+        ...registerDrawer(id, {
+            upRelative,
+            direction
+        }),
+        ...props,
+        ref: ref
+    }, props.children);
+});
+const auto_DrawerButtonAuto = /*#__PURE__*/ react.forwardRef(function({ drawer: forDrawer, open, ...props }, ref) {
+    const context = useDrawerContext();
+    if (!context) throw new Error('DrawerButtonAuto must be used within an DrawerProvider');
+    const { registerAction } = context;
+    return /*#__PURE__*/ react.createElement(Button, {
+        ref: ref,
+        ...registerAction(forDrawer, open ? 'open' : 'close'),
+        ...props
+    });
+});
+const auto_DrawerHeadingAuto = /*#__PURE__*/ react.forwardRef(function({ drawer: forDrawer, ...props }, ref) {
+    const context = useDrawerContext();
+    if (!context) throw new Error('DrawerHeadingAuto must be used within an DrawerProvider');
+    const { registerAction } = context;
+    return /*#__PURE__*/ react.createElement(DrawerHeading, {
+        color: "secondary",
+        ref: ref,
+        ...registerAction(forDrawer, 'close'),
+        ...props
+    });
+});
+export { auto_DrawerAuto as DrawerAuto, auto_DrawerButtonAuto as DrawerButtonAuto, DrawerContext, auto_DrawerHeadingAuto as DrawerHeadingAuto, DrawerProvider, useDrawerContext };

package/navigation/Drawer/hooks.js

@@ -0,0 +1,41 @@
+import react, { useCallback, useRef, useState } from "react";
+const useDrawer = ()=>{
+    const [currentOpen, setCurrentOpen] = useState(null);
+    const drawersRef = useRef(new Map());
+    const buttonsRef = useRef(new Map());
+    const open = useCallback((id)=>{
+        setCurrentOpen(id);
+    }, []);
+    const close = useCallback(()=>{
+        setCurrentOpen(null);
+    }, []);
+    const registerDrawer = useCallback((id, options)=>{
+        const drawerId = `drawer-${id}`;
+        if (!drawersRef.current.get(id)?.current) drawersRef.current.set(id, react.createRef());
+        return {
+            open: currentOpen === id,
+            id: drawerId,
+            ref: drawersRef.current.get(id),
+            ...options
+        };
+    }, [
+        currentOpen
+    ]);
+    const registerAction = useCallback((id, type)=>{
+        if (!buttonsRef.current.has(id)) buttonsRef.current.set(id, react.createRef());
+        return {
+            onClick: ()=>'open' === type ? open(id) : close(),
+            ref: buttonsRef.current.get(id)
+        };
+    }, [
+        currentOpen
+    ]);
+    return {
+        open,
+        close,
+        currentOpen,
+        registerAction,
+        registerDrawer
+    };
+};
+export { useDrawer };

package/navigation/Drawer/index.js

@@ -1,8 +1,5 @@
-export * from "@digigov/react-core/Drawer";
-export * from "@digigov/react-core/DrawerHeading";
-import Drawer from "@digigov/react-core/Drawer";
-var Drawer_default = Drawer;
-export {
-  Drawer_default as default
-};
-//# sourceMappingURL=index.js.map
+import Drawer from "@digigov/react-core/Drawer/index.js";
+export * from "@digigov/react-core/Drawer/index.js";
+export * from "@digigov/react-core/DrawerHeading/index.js";
+const navigation_Drawer = Drawer;
+export { navigation_Drawer as default };