@kth/style 0.0.12 → 0.1.0

package/dist/cjs/components/Button.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from "react";
 interface ButtonProps {
     /** The label of the button */
     children?: string;
@@ -14,7 +14,7 @@ interface IconButtonProps {
     onClick?: () => void;
 }
 /** A button with just text */
-export declare function Button({ children, onClick, appearance }: ButtonProps): JSX.Element;
-export declare function BackButton({ children, onClick }: IconButtonProps): JSX.Element;
-export declare function ForwardButton({ children, onClick }: IconButtonProps): JSX.Element;
+export declare function Button({ children, onClick, appearance }: ButtonProps): React.JSX.Element;
+export declare function BackButton({ children, onClick }: IconButtonProps): React.JSX.Element;
+export declare function ForwardButton({ children, onClick }: IconButtonProps): React.JSX.Element;
 export {};

package/dist/cjs/components/ModalNavigationPanel.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Add open/close functionality to a set of navigation panels
+ */
+export declare function setModalNavigationPanels(items: NodeListOf<Element>): void;

package/dist/cjs/components/NavigationPanel.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Add open/close functionality to a set of navigation panels
+ *
+ * @param container The element containing all the menus
+ * @param items A list of all menu elements
+ */
+export declare function setNavigationPanels(container: HTMLElement | null, items: NodeListOf<Element>): void;

package/dist/cjs/components/Radio.d.ts

@@ -14,7 +14,7 @@ interface RadioProps {
     label: string;
 }
 /** Implemented as fancy radio buttons */
-export declare function FilterTabs({ children, value, onChange }: RadioGroupProps): JSX.Element;
+export declare function FilterTabs({ children, value, onChange }: RadioGroupProps): React.JSX.Element;
 /** A single radio button */
-export declare function Radio({ value, label }: RadioProps): JSX.Element;
+export declare function Radio({ value, label }: RadioProps): React.JSX.Element;
 export {};

package/dist/cjs/components/Select.d.ts

@@ -23,14 +23,12 @@ interface OptionProps {
     value: string;
     /** Human-readable label for the option */
     children: string;
-    /** True if the option should be disabled */
-    disabled?: boolean;
 }
 interface OptionGroupProps {
     label: string;
     children: React.ReactNode;
 }
-export declare function Select({ name, label, description, value, onChange, children, error, }: SelectProps): JSX.Element;
-export declare function OptionGroup({ label, children }: OptionGroupProps): JSX.Element;
-export declare function Option({ value, children, disabled }: OptionProps): JSX.Element;
+export declare function Select({ name, label, description, value, onChange, children, error, }: SelectProps): React.JSX.Element;
+export declare function OptionGroup({ label, children }: OptionGroupProps): React.JSX.Element;
+export declare function Option({ value, children }: OptionProps): React.JSX.Element;
 export {};

package/dist/cjs/components/Tabs.d.ts

@@ -1,34 +1 @@
-import React from "react";
-interface TabProps {
-    children?: React.ReactNode;
-    id: string;
-    title: string;
-}
-interface GenericTabsProps {
-    classPrefix: string;
-    children: React.ReactElement<TabProps>[];
-    id: string;
-    defaultValue?: string;
-    url: "query" | "hash" | "none";
-}
-interface NavigationTabsProps {
-    id: string;
-    children: React.ReactElement<TabProps>[];
-    url?: "query" | "none";
-    defaultValue?: string;
-}
-interface ContentTabsProps {
-    id: string;
-    children: React.ReactElement<TabProps>[];
-    url?: "hash" | "none";
-    defaultValue?: string;
-}
-/**
- * Highly customizable Tabs component made for testing purposes.
- * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
- */
-export declare function GenericTabs({ classPrefix, children, id, defaultValue, url, }: GenericTabsProps): JSX.Element;
-export declare function NavigationTabs({ id, children, url, defaultValue, }: NavigationTabsProps): JSX.Element;
-export declare function ContentTabs({ id, children, url, defaultValue, }: ContentTabsProps): JSX.Element;
-export declare function Tab({ children }: TabProps): JSX.Element;
-export {};
+export declare function initTabs(container: Element): void;

package/dist/cjs/components/react/PersonalMenuPanel.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+/**
+ * A panel with a button that opens it.
+ *
+ * - `children` is mounted the first time the dialog is opened. It is _not_
+ *   unmounted after the dialog is closed.
+ */
+export declare function PersonalMenuPanel({ label, children }: {
+    label: any;
+    children: any;
+}): React.JSX.Element;
+interface PersonalMenuPanelGroupProps {
+    children: React.ReactElement;
+}
+/**
+ * Contains all <PersonalMenuPanel /> components in a menu
+ */
+export declare function PersonalMenuPanelGroup({ children, }: PersonalMenuPanelGroupProps): React.JSX.Element;
+export {};

package/dist/cjs/components/react/Tabs.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+interface TabProps {
+    children?: React.ReactNode;
+    id: string;
+    title: string;
+}
+interface GenericTabsProps {
+    classPrefix: string;
+    children: React.ReactElement<TabProps>[];
+    id: string;
+    defaultValue?: string;
+    url: "query" | "hash" | "none";
+}
+interface NavigationTabsProps {
+    id: string;
+    children: React.ReactElement<TabProps>[];
+    url?: "query" | "none";
+    defaultValue?: string;
+}
+interface ContentTabsProps {
+    id: string;
+    children: React.ReactElement<TabProps>[];
+    url?: "hash" | "none";
+    defaultValue?: string;
+}
+/**
+ * Highly customizable Tabs component made for testing purposes.
+ * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
+ */
+export declare function GenericTabs({ classPrefix, children, id, defaultValue, url, }: GenericTabsProps): React.JSX.Element;
+export declare function NavigationTabs({ id, children, url, defaultValue, }: NavigationTabsProps): React.JSX.Element;
+export declare function ContentTabs({ id, children, url, defaultValue, }: ContentTabsProps): React.JSX.Element;
+export declare function Tab({ children }: TabProps): React.JSX.Element;
+export {};

package/dist/cjs/icons/400/ArrowBack.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
-declare const SvgArrowBack: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgArrowBack: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgArrowBack;

package/dist/cjs/icons/400/Check.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
-declare const SvgCheck: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgCheck: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgCheck;

package/dist/cjs/icons/500/ArrowForward.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 import type { SVGProps } from "react";
-declare const SvgArrowForward: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+declare const SvgArrowForward: (props: SVGProps<SVGSVGElement>) => React.JSX.Element;
 export default SvgArrowForward;

package/dist/cjs/index.d.ts

@@ -1,5 +1,3 @@
-export { Tab, ContentTabs, NavigationTabs } from "./components/Tabs";
-export { Select, Option, OptionGroup } from "./components/Select";
-export { BackButton, Button, ForwardButton } from "./components/Button";
-export { default as IconArrowBack } from "./icons/400/ArrowBack";
-export { default as IconCheck } from "./icons/400/Check";
+export { setNavigationPanels } from "./components/NavigationPanel";
+export { setModalNavigationPanels } from "./components/ModalNavigationPanel";
+export { initTabs } from "./components/Tabs";

package/dist/cjs/index.js

@@ -1,179 +1,150 @@
 'use strict';
 
-var React = require('react');
-
-function _interopNamespaceDefault(e) {
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
-        });
-    }
-    n.default = e;
-    return Object.freeze(n);
-}
-
-var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
-
-function getValueFromUrl(key) {
-    const url = new URL(location.href);
-    if (key) {
-        return url.searchParams.get(key);
-    }
-    else {
-        return url.hash === "" ? null : url.hash.slice(1);
-    }
+/**
+ * Close all <dialog>s (modal and non-modal) in a document
+ */
+function closeAllDialogs$1() {
+    document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
 }
 /**
- * Sync state with URL hash or query parameter.
- * @param defaultValue Default state value
- * @param key Query parameter to use. Hash if empty
- * @param enableUrl Will sync with URL if true (this function behaves the same
- * as `React.useState` if false)
+ * Add open/close functionality to a set of navigation panels
+ *
+ * @param container The element containing all the menus
+ * @param items A list of all menu elements
  */
-function useUrlState(defaultValue = "", key = "", enableUrl = false) {
-    const initialValue = (enableUrl && getValueFromUrl(key)) || defaultValue;
-    const [value, _setValue] = React.useState(initialValue);
-    React.useEffect(() => {
-        function updateValue() {
-            if (enableUrl) {
-                _setValue(getValueFromUrl(key) || defaultValue);
-            }
-        }
-        window.addEventListener("popstate", updateValue);
-        return () => {
-            window.removeEventListener("popstate", updateValue);
-        };
-    });
-    function setValue(value) {
-        _setValue(value);
-        const url = new URL(location.href);
-        if (key !== "") {
-            url.searchParams.set(key, value);
+function setNavigationPanels(container, items) {
+    if (!container) {
+        return;
+    }
+    for (const item of items) {
+        if (!(item instanceof HTMLElement)) {
+            continue;
         }
-        else {
-            url.hash = "#" + value;
+        const dialog = item.nextElementSibling;
+        if (!(dialog instanceof HTMLDialogElement)) {
+            continue;
         }
-        if (enableUrl) {
-            history.pushState(undefined, "", url);
+        dialog.addEventListener("keydown", (e) => {
+            if (e.key === "Escape") {
+                closeAllDialogs$1();
+            }
+        });
+        const closeButton = dialog.querySelector(".close");
+        if (closeButton instanceof HTMLButtonElement) {
+            closeButton.addEventListener("click", () => {
+                closeAllDialogs$1();
+            });
         }
-    }
-    return [value, setValue];
-}
-function handleKeyDown(event, index, tabs, setActiveTab) {
-    event.preventDefault();
-    switch (event.key) {
-        case "ArrowLeft":
-        case "ArrowUp":
-            if (index > 0) {
-                setActiveTab(tabs[index - 1].props.id);
+        item.addEventListener("click", (e) => {
+            e.preventDefault();
+            if (!dialog.open) {
+                closeAllDialogs$1();
+                dialog.show();
             }
-            break;
-        case "ArrowRight":
-        case "ArrowDown":
-            if (index < tabs.length - 1) {
-                setActiveTab(tabs[index + 1].props.id);
+            else {
+                closeAllDialogs$1();
             }
-            break;
-        case "Home":
-            setActiveTab(tabs[0].props.id);
-            break;
-        case "End":
-            setActiveTab(tabs[tabs.length - 1].props.id);
-            break;
+        });
     }
+    container.addEventListener("focusout", function (e) {
+        const target = e.relatedTarget;
+        if (target && target instanceof Node && !container.contains(target)) {
+            closeAllDialogs$1();
+        }
+    });
 }
-function useFocus(element) {
-    element?.scrollIntoView({ block: "nearest", inline: "nearest" });
-    element?.focus();
+
+/**
+ * Close all <dialog>s (modal and non-modal) in a document
+ */
+function closeAllDialogs() {
+    document.querySelectorAll("dialog").forEach((dialog) => dialog.close());
 }
 /**
- * Highly customizable Tabs component made for testing purposes.
- * You should use {@link NavigationTabs} or {@link ContentTabs} instead.
+ * Add open/close functionality to a set of navigation panels
  */
-function GenericTabs({ classPrefix, children, id, defaultValue, url = "none", }) {
-    const ref = React.useRef(null);
-    const [activeTab, setActiveTab] = useUrlState(defaultValue, url === "query" ? id : "", url === "query" || url === "hash");
-    let activeTabIndex = children.findIndex((c) => c.props.id === activeTab);
-    if (activeTabIndex === -1) {
-        activeTabIndex = 0;
+function setModalNavigationPanels(items) {
+    for (const item of items) {
+        if (!(item instanceof HTMLElement)) {
+            continue;
+        }
+        const dialog = item.nextElementSibling;
+        if (!(dialog instanceof HTMLDialogElement)) {
+            continue;
+        }
+        dialog.addEventListener("keydown", (e) => {
+            e.stopPropagation();
+            if (e.key === "Escape") {
+                dialog.close();
+            }
+        });
+        const closeButton = dialog.querySelector(".close");
+        if (closeButton instanceof HTMLButtonElement) {
+            closeButton.addEventListener("click", () => {
+                closeAllDialogs();
+            });
+        }
+        item.addEventListener("click", (e) => {
+            e.preventDefault();
+            // closeAllDialogs();
+            dialog.showModal();
+        });
     }
-    useFocus(ref.current?.querySelector(`#${activeTab}-tab`));
-    return (React.createElement(React.Fragment, null,
-        React.createElement("div", { ref: ref, className: `${classPrefix}`, id: id },
-            React.createElement("ul", { className: `${classPrefix}__tablist`, role: "tablist" }, children.map((child, index) => (React.createElement("li", { role: "presentation", className: `${classPrefix}__tab-element` },
-                React.createElement("button", { key: child.props.id, role: "tab", "aria-selected": index === activeTabIndex, "aria-controls": child.props.id, id: `${child.props.id}-tab`, className: `${classPrefix}__tab`, tabIndex: index === activeTabIndex ? 0 : -1, onKeyDown: (event) => {
-                        handleKeyDown(event, index, children, setActiveTab);
-                    }, onClick: (event) => {
-                        event.preventDefault();
-                        setActiveTab(child.props.id);
-                    } }, child.props.title)))))),
-        children.map((child, index) => (React.createElement("div", { className: `${classPrefix}__tabpanel`, role: "tabpanel", "aria-labelledby": `${child.props.id}-tab`, id: child.props.id, key: index, hidden: index !== activeTabIndex }, child)))));
-}
-function NavigationTabs({ id, children, url = "query", defaultValue, }) {
-    return (React.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-navigation-tabs" }));
-}
-function ContentTabs({ id, children, url = "hash", defaultValue, }) {
-    return (React.createElement(GenericTabs, { id: id, children: children, url: url, defaultValue: defaultValue, classPrefix: "kth-content-tabs" }));
-}
-function Tab({ children }) {
-    return React.createElement(React.Fragment, null, children);
 }
 
-function Select({ name, label, description, value, onChange, children, error, }) {
-    const id = `select-${name}`;
-    return (React.createElement("div", { className: "kth-select" },
-        React.createElement("label", { htmlFor: id }, label),
-        description && React.createElement("p", { id: `${id}-description` }, description),
-        React.createElement("select", { id: id, "aria-describedby": description && `${id}-description`, name: name, value: value, onChange: (e) => onChange(e.target.value), "aria-invalid": error !== undefined ? "true" : "false" }, children),
-        error && (React.createElement("p", { className: "kth-select__error", role: "alert" }, error))));
-}
-function OptionGroup({ label, children }) {
-    return React.createElement("optgroup", { label: label }, children);
-}
-function Option({ value, children, disabled }) {
-    return (React.createElement("option", { value: value, disabled: disabled }, children));
-}
-
-const SvgArrowBack = (props) => (React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", ...props },
-    React__namespace.createElement("path", { fill: "currentColor", d: "m10 16-6-6 6-6 1.063 1.063L6.875 9.25H16v1.5H6.875l4.188 4.188L10 16Z" })));
-
-const SvgArrowForward = (props) => (React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", ...props },
-    React__namespace.createElement("path", { fill: "currentColor", d: "m10 16.075-1.227-1.227 3.983-3.983h-8.83v-1.73h8.83L8.773 5.152 10 3.925 16.075 10 10 16.075Z" })));
-
-/** A button with just text */
-function Button({ children, onClick, appearance }) {
-    const className = ["kth-button", appearance].join(" ");
-    return (React.createElement("button", { onClick: onClick, className: className }, children));
+function getPanel(tab) {
+    const panelId = tab.getAttribute("aria-controls");
+    if (!panelId) {
+        throw new Error();
+    }
+    const panel = document.getElementById(panelId);
+    if (!(panel instanceof HTMLElement)) {
+        throw new Error();
+    }
+    return panel;
 }
-function BackButton({ children, onClick }) {
-    return (React.createElement("button", { onClick: onClick, className: "kth-button tertiary" },
-        React.createElement(SvgArrowBack, null),
-        children));
+function closeAllTabs(tabs) {
+    for (const tab of tabs) {
+        if (tab instanceof HTMLElement) {
+            tab.ariaSelected = "false";
+            const panel = getPanel(tab);
+            if (panel) {
+                panel.hidden = true;
+            }
+        }
+    }
 }
-function ForwardButton({ children, onClick }) {
-    return (React.createElement("button", { onClick: onClick, className: "kth-button primary" },
-        children,
-        React.createElement(SvgArrowForward, null)));
+function initTabs(container) {
+    if (!(container instanceof HTMLElement)) {
+        return;
+    }
+    const tablist = container.querySelector("[role=tablist]");
+    if (!tablist) {
+        return;
+    }
+    const tabs = tablist.querySelectorAll("[role=tab]");
+    function openTab(tab) {
+        const panel = getPanel(tab);
+        if (!panel) {
+            return;
+        }
+        tab.ariaSelected = "true";
+        panel.hidden = false;
+    }
+    for (const tab of tabs) {
+        if (tab instanceof HTMLElement) {
+            tab.addEventListener("click", () => {
+                closeAllTabs(tabs);
+                openTab(tab);
+            });
+        }
+    }
+    if (tabs[0] instanceof HTMLElement) {
+        closeAllTabs(tabs);
+        openTab(tabs[0]);
+    }
 }
 
-const SvgCheck = (props) => (React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "1.25em", height: "1.25em", viewBox: "0 0 20 20", ...props },
-    React__namespace.createElement("path", { fill: "currentColor", d: "M8.23 14.063 4.707 10.52 5.75 9.479l2.48 2.459 6.02-6L15.292 7l-7.063 7.063Z" })));
-
-exports.BackButton = BackButton;
-exports.Button = Button;
-exports.ContentTabs = ContentTabs;
-exports.ForwardButton = ForwardButton;
-exports.IconArrowBack = SvgArrowBack;
-exports.IconCheck = SvgCheck;
-exports.NavigationTabs = NavigationTabs;
-exports.Option = Option;
-exports.OptionGroup = OptionGroup;
-exports.Select = Select;
-exports.Tab = Tab;
+exports.initTabs = initTabs;
+exports.setModalNavigationPanels = setModalNavigationPanels;
+exports.setNavigationPanels = setNavigationPanels;

package/dist/cjs/react.d.ts

@@ -0,0 +1,5 @@
+export { Tab, ContentTabs, NavigationTabs } from "./components/react/Tabs";
+export { Select, Option, OptionGroup } from "./components/Select";
+export { BackButton, Button, ForwardButton } from "./components/Button";
+export { default as IconArrowBack } from "./icons/400/ArrowBack";
+export { default as IconCheck } from "./icons/400/Check";