@digigov/ui 2.0.0-a402a664 → 2.0.0-a64dc016

package/typography/Code/index.js

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

package/typography/CodeBlock/index.js

@@ -1,94 +1,73 @@
-import React from "react";
-import hljs from "highlight.js/lib/core";
+import react from "react";
+import core from "highlight.js/lib/core";
 import bash from "highlight.js/lib/languages/bash";
-import js from "highlight.js/lib/languages/javascript";
+import javascript from "highlight.js/lib/languages/javascript";
 import json from "highlight.js/lib/languages/json";
 import markdown from "highlight.js/lib/languages/markdown";
 import python from "highlight.js/lib/languages/python";
 import xml from "highlight.js/lib/languages/xml";
-import CodeBlockContainer from "@digigov/react-core/CodeBlockContainer";
-import CodeBlockContent from "@digigov/react-core/CodeBlockContent";
-import CodeBlockHeader from "@digigov/react-core/CodeBlockHeader";
-import { CopyToClipboard } from "@digigov/ui/feedback";
-import { PhaseBannerTag } from "@digigov/ui/feedback/PhaseBanner";
-import { Button } from "@digigov/ui/form/Button";
+import CodeBlockContainer from "@digigov/react-core/CodeBlockContainer/index.js";
+import CodeBlockContent from "@digigov/react-core/CodeBlockContent/index.js";
+import CodeBlockHeader from "@digigov/react-core/CodeBlockHeader/index.js";
+import { CopyToClipboard } from "../../feedback/index.js";
+import { PhaseBannerTag } from "../../feedback/PhaseBanner/index.js";
+import { Button } from "../../form/Button/index.js";
+export * from "@digigov/react-core/CodeBlockContent/index.js";
+export * from "@digigov/react-core/CodeBlockHeader/index.js";
+export * from "@digigov/react-core/CodeBlockContainer/index.js";
 const languageMap = {
-  javascript: js,
-  python,
-  bash,
-  xml,
-  markdown,
-  json
+    javascript: javascript,
+    python: python,
+    bash: bash,
+    xml: xml,
+    markdown: markdown,
+    json: json
 };
-const addLineNumbers = (code, highlightLines) => {
-  return code.split("\n").map((line, index) => {
-    const isHighlighted = highlightLines.includes(index + 1);
-    const lineClass = isHighlighted ? "ds-code--highlighted-line" : "";
-    return `<span class="ds-code--line-number">${index + 1}</span> <span class="${lineClass}">${line}</span>`;
-  }).join("\n");
-};
-const CodeBlock = React.forwardRef(
-  function CodeBlock2({
-    children,
-    language,
-    copyToClipboard,
-    highlighted,
-    showLineNumbers,
-    phaseBannerTagName,
-    highlightLines,
-    ...props
-  }, ref) {
-    const Tag = "span";
-    const codeString = typeof children === "string" ? children : "";
+const addLineNumbers = (code, highlightLines)=>code.split('\n').map((line, index)=>{
+        const isHighlighted = highlightLines.includes(index + 1);
+        const lineClass = isHighlighted ? 'ds-code--highlighted-line' : '';
+        return `<span class="ds-code--line-number">${index + 1}</span> <span class="${lineClass}">${line}</span>`;
+    }).join('\n');
+const CodeBlock_CodeBlock = /*#__PURE__*/ react.forwardRef(function({ children, language, copyToClipboard, highlighted, showLineNumbers, phaseBannerTagName, highlightLines, ...props }, ref) {
+    const Tag = 'span';
+    const codeString = 'string' == typeof children ? children : '';
     let displayingCode = codeString;
-    if (highlighted && codeString) {
-      try {
-        hljs.configure({ classPrefix: "ds-code--" });
-        let highlightedCode = hljs.highlightAuto(codeString).value;
+    if (highlighted && codeString) try {
+        core.configure({
+            classPrefix: 'ds-code--'
+        });
+        let highlightedCode = core.highlightAuto(codeString).value;
         if (language) {
-          hljs.registerLanguage(language, languageMap[language]);
-          highlightedCode = hljs.highlight(codeString, {
-            language
-          }).value;
+            core.registerLanguage(language, languageMap[language]);
+            highlightedCode = core.highlight(codeString, {
+                language: language
+            }).value;
         }
         displayingCode = showLineNumbers ? addLineNumbers(highlightedCode, highlightLines || []) : highlightedCode;
-      } catch (error) {
-        console.error("Highlighting failed:", error);
-      }
+    } catch (error) {
+        console.error('Highlighting failed:', error);
     }
-    return /* @__PURE__ */ React.createElement(CodeBlockContainer, { ref, ...props }, /* @__PURE__ */ React.createElement(
-      CodeBlockHeader,
-      {
-        justify: phaseBannerTagName && copyToClipboard ? "space-between" : "end"
-      },
-      phaseBannerTagName && /* @__PURE__ */ React.createElement(PhaseBannerTag, null, phaseBannerTagName),
-      copyToClipboard && /* @__PURE__ */ React.createElement(
-        CopyToClipboard,
-        {
-          dense: true,
-          text: codeString,
-          variant: "tooltip",
-          tooltipAlign: "right",
-          message: "Copied!"
-        },
-        /* @__PURE__ */ React.createElement(Button, { dense: true, color: "secondary" }, "Copy")
-      )
-    ), /* @__PURE__ */ React.createElement(CodeBlockContent, { className: `language-${language}` }, highlighted && codeString ? /* @__PURE__ */ React.createElement(
-      Tag,
-      {
+    return /*#__PURE__*/ react.createElement(CodeBlockContainer, {
+        ref: ref,
+        ...props
+    }, /*#__PURE__*/ react.createElement(CodeBlockHeader, {
+        justify: phaseBannerTagName && copyToClipboard ? 'space-between' : 'end'
+    }, phaseBannerTagName && /*#__PURE__*/ react.createElement(PhaseBannerTag, null, phaseBannerTagName), copyToClipboard && /*#__PURE__*/ react.createElement(CopyToClipboard, {
+        dense: true,
+        text: codeString,
+        variant: "tooltip",
+        tooltipAlign: "right",
+        message: "Copied!"
+    }, /*#__PURE__*/ react.createElement(Button, {
+        dense: true,
+        color: "secondary"
+    }, "Copy"))), /*#__PURE__*/ react.createElement(CodeBlockContent, {
+        className: `language-${language}`
+    }, highlighted && codeString ? /*#__PURE__*/ react.createElement(Tag, {
         dangerouslySetInnerHTML: {
-          __html: displayingCode
+            __html: displayingCode
         }
-      }
-    ) : children));
-  }
-);
-export * from "@digigov/react-core/CodeBlockContent";
-export * from "@digigov/react-core/CodeBlockHeader";
-export * from "@digigov/react-core/CodeBlockContainer";
-var CodeBlock_default = CodeBlock;
-export {
-  CodeBlock,
-  CodeBlock_default as default
-};
-//# sourceMappingURL=index.js.map
+    }) : children));
+});
+const typography_CodeBlock = CodeBlock_CodeBlock;
+export { CodeBlock_CodeBlock as CodeBlock, typography_CodeBlock as default };

package/typography/Heading/index.js

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

package/typography/HeadingCaption/index.js

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

package/typography/Hint/index.js

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

package/typography/NormalText/index.js

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

package/typography/Paragraph/index.js

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

package/typography/Typography/index.js

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

package/typography/index.d.ts

@@ -1,6 +1,6 @@
-export * from '@digigov/ui/typography/Heading';
-export * from '@digigov/ui/typography/HeadingCaption';
-export * from '@digigov/ui/typography/Paragraph';
-export * from '@digigov/ui/typography/NormalText';
-export * from '@digigov/ui/typography/Hint';
-export * from '@digigov/ui/typography/Typography';
+export * from './Heading/index.js';
+export * from './HeadingCaption/index.js';
+export * from './Paragraph/index.js';
+export * from './NormalText/index.js';
+export * from './Hint/index.js';
+export * from './Typography/index.js';

package/typography/index.js

@@ -1,7 +1,6 @@
-export * from "@digigov/ui/typography/Heading";
-export * from "@digigov/ui/typography/HeadingCaption";
-export * from "@digigov/ui/typography/Paragraph";
-export * from "@digigov/ui/typography/NormalText";
-export * from "@digigov/ui/typography/Hint";
-export * from "@digigov/ui/typography/Typography";
-//# sourceMappingURL=index.js.map
+export * from "./Heading/index.js";
+export * from "./HeadingCaption/index.js";
+export * from "./Paragraph/index.js";
+export * from "./NormalText/index.js";
+export * from "./Hint/index.js";
+export * from "./Typography/index.js";

package/utils/Base/index.js

@@ -1,9 +1,5 @@
-export * from "@digigov/react-core/Base";
-import Base from "@digigov/react-core/Base";
-import { basePropGenerator } from "@digigov/react-core/Base/utils";
-var Base_default = Base;
-export {
-  basePropGenerator,
-  Base_default as default
-};
-//# sourceMappingURL=index.js.map
+import Base from "@digigov/react-core/Base/index.js";
+import { basePropGenerator } from "@digigov/react-core/Base/utils.js";
+export * from "@digigov/react-core/Base/index.js";
+const utils_Base = Base;
+export { basePropGenerator, utils_Base as default };

package/utils/TestVariant/index.js

@@ -1,23 +1,16 @@
-import React from "react";
+import react from "react";
 import clsx from "clsx";
-const TestVariant = React.forwardRef(
-  function TestVariant2({ title, children, ...props }) {
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
+const TestVariant_TestVariant = /*#__PURE__*/ react.forwardRef(function({ title, children, ...props }) {
+    return /*#__PURE__*/ react.createElement("div", {
         className: clsx({
-          "ds-test-variant": true
+            'ds-test-variant': true
         }),
         ...props
-      },
-      /* @__PURE__ */ React.createElement("h1", { className: "ds-test-variant__title" }, " ", title, " "),
-      /* @__PURE__ */ React.createElement("div", { className: "ds-test-variant__content" }, children)
-    );
-  }
-);
-var TestVariant_default = TestVariant;
-export {
-  TestVariant,
-  TestVariant_default as default
-};
-//# sourceMappingURL=index.js.map
+    }, /*#__PURE__*/ react.createElement("h1", {
+        className: "ds-test-variant__title"
+    }, " ", title, " "), /*#__PURE__*/ react.createElement("div", {
+        className: "ds-test-variant__content"
+    }, children));
+});
+const utils_TestVariant = TestVariant_TestVariant;
+export { TestVariant_TestVariant as TestVariant, utils_TestVariant as default };

package/utils/Typography/index.js

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

package/utils/VisuallyHidden/index.js

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

package/utils/hooks/useDebounce.js

@@ -0,0 +1,38 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import useLatest from "./useLatest.js";
+const useDebounceCallback = (callback, wait = 100, leading = false)=>{
+    const storedCallback = useLatest(callback);
+    const timeout = useRef(void 0);
+    const deps = [
+        wait,
+        leading,
+        storedCallback
+    ];
+    useEffect(()=>()=>{
+            if (timeout.current) clearTimeout(timeout.current);
+            timeout.current = void 0;
+        }, deps);
+    return useCallback(function() {
+        const args = arguments;
+        const { current } = timeout;
+        if (void 0 === current && leading) {
+            timeout.current = setTimeout(()=>{
+                timeout.current = void 0;
+            }, wait);
+            return storedCallback.current.apply(null, args);
+        }
+        if (current) clearTimeout(current);
+        timeout.current = setTimeout(()=>{
+            timeout.current = void 0;
+            storedCallback.current.apply(null, args);
+        }, wait);
+    }, deps);
+};
+const useDebounce = (initialState, wait, leading)=>{
+    const state = useState(initialState);
+    return [
+        state[0],
+        useDebounceCallback(state[1], wait, leading)
+    ];
+};
+export { useDebounce, useDebounceCallback };

package/utils/hooks/useKeypress.js

@@ -0,0 +1,19 @@
+import { useCallback, useEffect } from "react";
+const useKeypress = (key, callback)=>{
+    const keyCallback = useCallback((e)=>{
+        if (e.key === key && callback) callback(e);
+    }, [
+        key,
+        callback
+    ]);
+    useEffect(()=>{
+        if (callback) document.addEventListener('keydown', keyCallback);
+        return ()=>{
+            if (callback) document.removeEventListener('keydown', keyCallback);
+        };
+    }, [
+        keyCallback
+    ]);
+};
+const hooks_useKeypress = useKeypress;
+export { hooks_useKeypress as default, useKeypress };

package/utils/hooks/useLatest.js

@@ -0,0 +1,10 @@
+import { useEffect, useRef } from "react";
+const useLatest_useLatest = (current)=>{
+    const storedValue = useRef(current);
+    useEffect(()=>{
+        storedValue.current = current;
+    });
+    return storedValue;
+};
+const useLatest = useLatest_useLatest;
+export { useLatest as default };

package/utils/hooks/useScreen.d.ts

@@ -1,2 +1,2 @@
-export * from '@digigov/ui/utils/hooks/useScreen.web';
-export { default as default } from '@digigov/ui/utils/hooks/useScreen.web';
+export * from './useScreen.web.js';
+export { default as default } from './useScreen.web.js';

package/utils/hooks/useScreen.js

@@ -0,0 +1,3 @@
+import useScreen_web from "./useScreen.web.js";
+export * from "./useScreen.web.js";
+export { useScreen_web as default };

package/utils/hooks/useScreen.native.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from "react";
+import { useWindowDimensions } from "react-native";
+import screens from "@digigov/css/screens.json" with {
+    type: "json"
+};
+const breakpointKeys = Object.keys(screens);
+const breakpointValues = Object.values(screens);
+function resolveScreenSize(width) {
+    let breakpointIndex = 0;
+    for (const breakpoint of breakpointValues){
+        if (width >= breakpoint && width < breakpointValues[breakpointIndex + 1]) return breakpointKeys[breakpointIndex];
+        breakpointIndex++;
+    }
+    return 'xl';
+}
+const useScreenSize = ()=>{
+    const { width } = useWindowDimensions();
+    const [screenSize, setScreenSize] = useState(resolveScreenSize(width));
+    useEffect(()=>{
+        setScreenSize(resolveScreenSize(width));
+    }, [
+        width
+    ]);
+    return {
+        screenSize,
+        screenWidth: width
+    };
+};
+const useScreen_native = useScreenSize;
+export { breakpointKeys, breakpointValues, useScreen_native as default, useScreenSize };

package/utils/hooks/useScreen.web.js

@@ -0,0 +1,46 @@
+import { useEffect, useState } from "react";
+import screens from "@digigov/css/screens.json" with {
+    type: "json"
+};
+const breakpointKeys = Object.keys(screens);
+const breakpointValues = Object.values(screens);
+function resolveScreenSize(width) {
+    let breakpointIndex = 0;
+    for (const breakpoint of breakpointValues){
+        if (width >= breakpoint && width < breakpointValues[breakpointIndex + 1]) return breakpointKeys[breakpointIndex];
+        breakpointIndex++;
+    }
+    return 'xl';
+}
+const useScreen_web_listeners = new Set();
+let resizeObserver = null;
+function createResizeObserver() {
+    if (null === resizeObserver && 'undefined' != typeof window) {
+        resizeObserver = new ResizeObserver(([body])=>{
+            useScreen_web_listeners.forEach((listener)=>{
+                listener(body.contentRect.width);
+            });
+        });
+        resizeObserver.observe(window.document?.body);
+    }
+    return useScreen_web_listeners;
+}
+const useScreenSize = ()=>{
+    const [screenSize, setSize] = useState(resolveScreenSize('undefined' != typeof window ? window.document.body.clientWidth : 0));
+    useEffect(()=>{
+        const listeners = createResizeObserver();
+        const listener = (width)=>{
+            setSize(resolveScreenSize(width));
+        };
+        listeners.add(listener);
+        return ()=>{
+            listeners.delete(listener);
+        };
+    }, []);
+    return {
+        screenSize,
+        screenWidth: 'undefined' != typeof window && window.document.body.clientWidth
+    };
+};
+const useScreen_web = useScreenSize;
+export { breakpointKeys, breakpointValues, useScreen_web as default, useScreenSize };

package/utils/hooks/useSearch.js

@@ -0,0 +1,22 @@
+import { useMemo } from "react";
+function normalizeGreek(text) {
+    text = text.replace(/Ά|Α|ά/g, 'α').replace(/Έ|Ε|έ/g, 'ε').replace(/Ή|Η|ή/g, 'η').replace(/Ί|Ϊ|Ι|ί|ΐ|ϊ/g, 'ι').replace(/Ό|Ο|ό/g, 'ο').replace(/Ύ|Ϋ|Υ|ύ|ΰ|ϋ/g, 'υ').replace(/Ώ|Ω|ώ/g, 'ω').replace(/Σ|ς/g, 'σ');
+    return text;
+}
+function fullTextSearch(data, search) {
+    if (!search) return true;
+    const q = normalizeGreek(search.normalize('NFC').replace(/[\u0300-\u036f]/g, '').toLowerCase());
+    const index = Object.keys(data).map((k)=>data[k] ? data[k].toString().toLowerCase() : '').join('');
+    return normalizeGreek(index.normalize('NFC').replace(/[\u0300-\u036f]/g, '')).includes(q);
+}
+function useSearch(data, query) {
+    return useMemo(()=>{
+        if (!query) return data;
+        return data.filter((t)=>fullTextSearch(t, query));
+    }, [
+        data,
+        query
+    ]);
+}
+const hooks_useSearch = useSearch;
+export { hooks_useSearch as default, fullTextSearch, normalizeGreek, useSearch };

package/utils/hooks/useTogglableTab.js

@@ -0,0 +1,72 @@
+import { useCallback, useMemo, useRef, useState } from "react";
+function useTogglableTab({ toggleProperty, singleOpen, onToggleProperty, initial, firstOpen, ariaNavigation, toggleHook }) {
+    const [opened, setOpened] = useState(initial || {});
+    const registered = useRef({});
+    const sectionsOrder = useRef([]);
+    const registerRef = useCallback((el)=>{
+        if (!el) return;
+        const key = el.getAttribute('aria-controls');
+        if (registered.current[key]) return;
+        registered.current[key] = el;
+        sectionsOrder.current.push(key);
+        if (firstOpen && 1 === sectionsOrder.current.length) setOpened({
+            [key]: true
+        });
+    }, []);
+    const toggle = useCallback((e)=>{
+        const key = e.currentTarget.getAttribute('aria-controls');
+        if (toggleHook) toggleHook(key);
+        e.preventDefault();
+        singleOpen ? setOpened({
+            [key]: true
+        }) : setOpened((prev)=>({
+                ...prev,
+                [key]: !prev[key]
+            }));
+    }, []);
+    const onKeyDown = useCallback((e)=>{
+        const key = e.target.getAttribute('aria-controls');
+        const currentIndex = sectionsOrder.current.findIndex((k)=>k === key);
+        const nextKey = sectionsOrder.current[currentIndex + 1];
+        const previousKey = sectionsOrder.current[currentIndex - 1];
+        switch(e.key){
+            case 'ArrowRight':
+            case 'ArrowDown':
+                if (nextKey) registered.current[nextKey].focus();
+                break;
+            case 'ArrowLeft':
+            case 'ArrowUp':
+                if (previousKey) registered.current[previousKey].focus();
+                break;
+            case ' ':
+            case 'Enter':
+                toggle(e);
+                break;
+        }
+    }, []);
+    const register = useCallback((key)=>{
+        const isOpen = !!opened[key];
+        return {
+            ref: registerRef,
+            [toggleProperty]: isOpen,
+            [onToggleProperty]: toggle,
+            'aria-controls': `${key}`,
+            ...ariaNavigation && {
+                onKeyDown,
+                tabIndex: opened[key] ? 0 : -1
+            }
+        };
+    }, [
+        opened
+    ]);
+    return useMemo(()=>({
+            register,
+            registered,
+            opened,
+            toggle,
+            setOpened
+        }), [
+        opened
+    ]);
+}
+export { useTogglableTab };

package/utils/index.d.ts

@@ -1,2 +1,2 @@
-export * from '@digigov/ui/utils/Base';
-export * from '@digigov/ui/utils/VisuallyHidden';
+export * from './Base/index.js';
+export * from './VisuallyHidden/index.js';

package/utils/index.js

@@ -1,3 +1,2 @@
-export * from "@digigov/ui/utils/Base";
-export * from "@digigov/ui/utils/VisuallyHidden";
-//# sourceMappingURL=index.js.map
+export * from "./Base/index.js";
+export * from "./VisuallyHidden/index.js";