@datalayer/core 0.0.1 → 0.0.2

package/lib/components/storage/ContentsItems.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useCallback, useRef, useState } from 'react';
+import { TreeView } from '@primer/react';
+import { FileIcon } from '@primer/octicons-react';
+export function modelToView(models, docRegistry) {
+    let items = models.map(model => ({
+        ...model,
+        fileType: docRegistry?.getFileTypeForModel(model)
+    }));
+    items = items.filter(model => !model.name.startsWith('.'));
+    items.sort((a, b) => {
+        if (a.type === 'directory' && b.type !== 'directory') {
+            return -1;
+        }
+        if (a.type !== 'directory' && b.type === 'directory') {
+            return 1;
+        }
+        return a.name.localeCompare(b.name);
+    });
+    return items;
+}
+/**
+ * Directory tree item component
+ */
+export function DirectoryItem(props) {
+    const { item, contents, current, documentRegistry, onContextMenu, onSelect } = props;
+    const ref = useRef(null);
+    const [children, setChildren] = useState(null);
+    const [isLoading, setIsLoading] = useState(false);
+    const refresh = useCallback(() => {
+        setIsLoading(true);
+        contents.get(item.path)
+            .then(model => {
+            setIsLoading(false);
+            setChildren(modelToView(model.content, documentRegistry));
+        })
+            .catch(() => {
+            setIsLoading(false);
+        });
+    }, [contents, item, documentRegistry]);
+    const onExpandedChange = useCallback(async (isExpanded) => {
+        if (children === null && isExpanded) {
+            refresh();
+        }
+    }, [children, item, contents]);
+    return (_jsxs(TreeView.Item, { ref: ref, id: `${item.type}-${item.name}`, onExpandedChange: onExpandedChange, onSelect: () => { onSelect(item, refresh); }, current: item.path === current?.path, children: [_jsx(TreeView.LeadingVisual, { children: _jsx(TreeView.DirectoryIcon, {}) }), _jsx("span", { onContextMenu: event => {
+                    event.preventDefault();
+                    if (current?.path !== item.path) {
+                        onSelect(item, refresh);
+                    }
+                    onContextMenu(ref);
+                }, children: item.name }), _jsx(TreeView.SubTree, { state: isLoading
+                    ? 'loading'
+                    : (children?.length ?? -1) >= 0
+                        ? 'done'
+                        : 'initial', children: children?.map(child => {
+                    return child.type === 'directory' ?
+                        _jsx(DirectoryItem, { item: child, contents: contents, current: current, documentRegistry: documentRegistry, onContextMenu: onContextMenu, onSelect: onSelect }, child.name)
+                        :
+                            _jsx(TreeItem, { item: child, current: child.path === current?.path, onSelect: item => onSelect(item, refresh), onContextMenu: onContextMenu }, child.name);
+                }) })] }));
+}
+export function TreeItem(props) {
+    const { item, current, onSelect, onContextMenu } = props;
+    const ref = useRef(null);
+    const icon = item.fileType?.icon;
+    return (_jsxs(TreeView.Item, { ref: ref, id: `${item.type}-${item.name}`, current: current, onSelect: () => { onSelect(item); }, children: [_jsx(TreeView.LeadingVisual, { children: icon ? _jsx(icon.react, { tag: 'span' }) : _jsx(FileIcon, {}) }), _jsx("span", { onContextMenu: event => {
+                    event.preventDefault();
+                    if (!current) {
+                        onSelect(item);
+                    }
+                    onContextMenu(ref);
+                }, children: item.name })] }, item.name));
+}

package/lib/components/storage/index.d.ts

@@ -0,0 +1,2 @@
+export * from './ContentsBrowser';
+export * from './ContentsItems';

package/lib/components/storage/index.js

@@ -0,0 +1,11 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+export * from './ContentsBrowser';
+export * from './ContentsItems';

package/lib/components/students/StudentItemStatus.d.ts

@@ -0,0 +1,7 @@
+import { IStudent, IStudentItem } from "../../models";
+type Props = {
+    student?: IStudent;
+    studentItem?: IStudentItem;
+};
+export declare const StudentItemStatus: (props: Props) => import("react/jsx-runtime").JSX.Element;
+export default StudentItemStatus;

package/lib/components/students/StudentItemStatus.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useMemo } from "react";
+import { useTheme, Tooltip, Button } from "@primer/react";
+import { Box } from "@datalayer/primer-addons";
+const getExercisePoints = (studentItem) => {
+    if (studentItem && studentItem.points) {
+        return studentItem.points;
+    }
+    return 0;
+};
+export const StudentItemStatus = (props) => {
+    const { student, studentItem } = props;
+    const { theme } = useTheme();
+    const okColor = useMemo(() => theme?.colorSchemes.light.colors.success.muted, []);
+    const nokColor = useMemo(() => theme?.colorSchemes.light.colors.severe.muted, []);
+    if (student && studentItem) {
+        switch (studentItem.itemType) {
+            case ('dataset'):
+                const datasetColor = studentItem?.completed ? okColor : nokColor;
+                return _jsx(Box, { sx: { backgroundColor: datasetColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
+            case ('lesson'):
+                const lessonColor = studentItem?.completed ? okColor : nokColor;
+                return _jsx(Box, { sx: { backgroundColor: lessonColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
+            case ('exercise'):
+                const exerciseColor = getExercisePoints(studentItem) > 0 ? okColor : nokColor;
+                return _jsx(Box, { sx: { backgroundColor: exerciseColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
+            case ('assignment'):
+                return (_jsxs(Box, { display: "flex", children: [(studentItem.nbgradesTotalScore !== undefined) && (studentItem.nbgradesTotalPoints !== undefined) &&
+                            _jsxs(Box, { children: [studentItem.nbgradesTotalScore, " / ", studentItem.nbgradesTotalPoints] }), studentItem.nbgrades &&
+                            _jsx(Box, { display: "flex", ml: 3, children: studentItem?.nbgrades.map(grade => {
+                                    const gradeColor = grade.score_f === grade.points_f ? okColor : nokColor;
+                                    return (_jsx(Tooltip, { text: grade.grade_id_s, children: _jsx(Button, { variant: "invisible", children: _jsx(Box, { sx: { backgroundColor: gradeColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 }) }) }));
+                                }) })] }));
+            default:
+                return _jsx(_Fragment, {});
+        }
+    }
+    return _jsx(_Fragment, {});
+};
+export default StudentItemStatus;

package/lib/components/students/index.d.ts

@@ -0,0 +1 @@
+export * from './StudentItemStatus';

package/lib/components/students/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+export * from './StudentItemStatus';

package/lib/components/subnav/SubNav.d.ts

@@ -0,0 +1,84 @@
+import React, { type PropsWithChildren, type ReactNode, type RefObject } from 'react';
+import { ButtonSizes, ButtonVariants, TextProps } from '@primer/react-brand';
+import { BaseProps } from '../primer';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css';
+export declare const SubNavSubMenuVariants: readonly ["dropdown", "anchor"];
+type SubMenuVariants = (typeof SubNavSubMenuVariants)[number];
+type SubNavContextType = {
+    portalRef: RefObject<HTMLDivElement>;
+};
+export declare const useSubNavContext: () => SubNavContextType;
+export type SubNavProps = {
+    hasShadow?: boolean;
+    /**
+     * Allows the SubNav to be used at full width,
+     * removing any internal padding and guttering.
+     */
+    fullWidth?: boolean;
+    'data-testid'?: string;
+} & PropsWithChildren<BaseProps<HTMLElement>>;
+type SubNavHeadingProps = {
+    href: string;
+    'data-testid'?: string;
+} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
+type SubNavLinkProps = {
+    href: string;
+    'data-testid'?: string;
+    variant?: TextProps['variant'];
+    _subMenuVariant?: SubMenuVariants;
+} & PropsWithChildren<React.HTMLProps<HTMLAnchorElement>> & BaseProps<HTMLAnchorElement>;
+type SubMenuProps = {
+    variant?: SubMenuVariants;
+} & React.HTMLAttributes<HTMLUListElement> & BaseProps<HTMLUListElement>;
+declare function _SubMenu({ children, className, variant, ...props }: SubMenuProps): import("react/jsx-runtime").JSX.Element;
+type SubNavActionProps = {
+    /**
+     * Required path or location for the action button to link to.
+     */
+    href: string;
+    /**
+     * Optional sizes for the button.
+     */
+    size?: (typeof ButtonSizes)[number];
+    /**
+     * Optional sizes for the button.
+     */
+    variant?: (typeof ButtonVariants)[number];
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
+declare function _SubNavAction({ children, href, variant, size, ...rest }: SubNavActionProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Use SubNav to display a secondary navigation beneath a primary header.
+ * @see https://primer.style/brand/components/SubNav
+ */
+export declare const SubNav: React.NamedExoticComponent<{
+    hasShadow?: boolean;
+    /**
+     * Allows the SubNav to be used at full width,
+     * removing any internal padding and guttering.
+     */
+    fullWidth?: boolean;
+    'data-testid'?: string;
+} & BaseProps<HTMLElement> & {
+    children?: ReactNode | undefined;
+}> & {
+    readonly type: ({ id, children, className, "data-testid": testId, fullWidth, hasShadow }: SubNavProps) => import("react/jsx-runtime").JSX.Element;
+} & {
+    Heading: ({ href, children, className, "data-testid": testID, ...props }: SubNavHeadingProps) => import("react/jsx-runtime").JSX.Element;
+    Link: React.ForwardRefExoticComponent<Omit<SubNavLinkProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLAnchorElement>>;
+    Action: typeof _SubNavAction;
+    SubMenu: typeof _SubMenu;
+    testIds: {
+        root: string;
+        readonly button: string;
+        readonly overlay: string;
+        readonly link: string;
+        readonly heading: string;
+        readonly action: string;
+        readonly subMenu: string;
+    };
+};
+export {};

package/lib/components/subnav/SubNav.js

@@ -0,0 +1,270 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import React, { Children, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useMemo, useRef, useState, } from 'react';
+import { createPortal } from 'react-dom';
+import { Button, ButtonGroup, Text, ThemeProvider, useWindowSize } from '@primer/react-brand';
+import { ChevronDownIcon, ChevronUpIcon } from '@primer/octicons-react';
+import { default as clsx } from 'clsx';
+import { useId } from '../../hooks';
+import { useKeyboardEscape, useOnClickOutside, useProvidedRefOrCreate, useContainsFocus } from '../../hooks';
+/**
+ * Design tokens
+ */
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/base.css';
+import '@primer/brand-primitives/lib/design-tokens/css/tokens/functional/components/sub-nav/colors-with-modes.css';
+/** * Main Stylesheet (as a CSS Module) */
+import styles from './SubNav.module.css';
+const testIds = {
+    root: 'SubNav-root',
+    get button() {
+        return `${this.root}-button`;
+    },
+    get overlay() {
+        return `${this.root}-overlay`;
+    },
+    get link() {
+        return `${this.root}-link`;
+    },
+    get heading() {
+        return `${this.root}-heading`;
+    },
+    get action() {
+        return `${this.root}-action`;
+    },
+    get subMenu() {
+        return `${this.root}-sub-menu`;
+    },
+};
+export const SubNavSubMenuVariants = ['dropdown', 'anchor'];
+const SubNavContext = createContext(undefined);
+export const useSubNavContext = () => {
+    const context = useContext(SubNavContext);
+    if (!context) {
+        throw new Error('useSubNavContext must be used within a SubNavProvider');
+    }
+    return context;
+};
+function SubNavProvider({ children }) {
+    const anchoredNavOuterPortalRef = React.useRef(null);
+    const anchoredNavPortalRef = React.useRef(null);
+    const value = useMemo(() => ({
+        portalRef: anchoredNavPortalRef,
+    }), []);
+    useEffect(() => {
+        const menuContainer = anchoredNavOuterPortalRef.current;
+        const observer = new IntersectionObserver(([entry]) => {
+            entry.target.classList.toggle(styles['SubNav__anchor-menu-outer-container--stuck'], entry.intersectionRatio < 1);
+        }, { threshold: [1] });
+        if (menuContainer) {
+            observer.observe(menuContainer);
+        }
+        return () => {
+            if (menuContainer) {
+                observer.unobserve(menuContainer);
+            }
+        };
+    }, []);
+    return (_jsxs(SubNavContext.Provider, { value: value, children: [children, _jsx("div", { className: styles['SubNav__anchor-menu-outer-container'], ref: anchoredNavOuterPortalRef, children: _jsx("div", { className: clsx(styles['SubNav__anchor-menu-container']), ref: anchoredNavPortalRef }) })] }));
+}
+const _SubNavRoot = memo(({ id, children, className, 'data-testid': testId, fullWidth, hasShadow }) => {
+    const rootRef = React.useRef(null);
+    const navRef = React.useRef(null);
+    const overlayRef = React.useRef(null);
+    const [isOpenAtNarrow, setIsOpenAtNarrow] = useState(false);
+    const idForLinkContainer = useId();
+    const [hasAnchoredNav, setHasAnchoredNav] = useState(false);
+    const { isLarge } = useWindowSize();
+    const childrenArr = Children.toArray(children);
+    const closeMenuCallback = useCallback(() => {
+        if (isLarge)
+            return;
+        setIsOpenAtNarrow(false);
+    }, [isLarge]);
+    const handleMenuToggle = useCallback(() => {
+        if (isLarge)
+            return;
+        setIsOpenAtNarrow(prev => !prev);
+    }, [isLarge]);
+    useOnClickOutside(rootRef, closeMenuCallback);
+    useKeyboardEscape(closeMenuCallback);
+    useEffect(() => {
+        if (isOpenAtNarrow && !isLarge) {
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+        }
+    }, [isOpenAtNarrow, isLarge]);
+    const activeLink = childrenArr.find(child => {
+        if (isValidElement(child)) {
+            return child.props['aria-current'];
+        }
+    });
+    useEffect(() => {
+        // check if there is an anchored nav in the SubNav.SubMenu child
+        const hasAnchorVariant = childrenArr.some(child => {
+            if (isValidElement(child) && child.type === SubNavLink) {
+                const [, subMenu] = child.props.children;
+                if (subMenu?.props?.variant === 'anchor') {
+                    return true;
+                }
+            }
+        });
+        setHasAnchoredNav(hasAnchorVariant);
+    }, [childrenArr]);
+    const { heading: HeadingChild, links: LinkChildren, action: ActionChild, } = childrenArr.reduce((acc, child) => {
+        if (isValidElement(child)) {
+            if (child.type === SubNavHeading) {
+                acc.heading = child;
+            }
+            else if (child.type === SubNavLink) {
+                const [link, subMenu] = child.props.children;
+                if (subMenu?.props?.variant === 'anchor') {
+                    acc.links.push(React.cloneElement(child, {
+                        children: [link],
+                        onClick: child.props['aria-current'] ? closeMenuCallback : child.props.onClick,
+                    }));
+                }
+                else {
+                    acc.links.push(React.cloneElement(child, {
+                        onClick: child.props['aria-current'] ? closeMenuCallback : child.props.onClick,
+                    }));
+                }
+            }
+            else if (child.type === _SubNavAction) {
+                acc.action = child;
+            }
+        }
+        return acc;
+    }, { heading: undefined, links: [], action: undefined });
+    const activeLinklabel = typeof activeLink?.props.children === 'string' ? activeLink.props.children : activeLink?.props.children[0];
+    // needed to prevent rendering of anchor subnav inside the narrow <Button variant="invisible"> element
+    const MaybeSubNav = activeLink?.props.children?.[1]?.props?.variant === 'anchor' && activeLink.props.children?.[1];
+    return (_jsx("div", { className: clsx(styles['SubNav__container'], hasAnchoredNav && styles['SubNav__container--with-anchor-nav']), children: _jsx(SubNavProvider, { children: _jsx("nav", { ref: navRef, id: id, className: clsx(styles.SubNav, isOpenAtNarrow && styles['SubNav--open'], hasShadow && styles['SubNav--has-shadow'], fullWidth && styles['SubNav--full-width'], className), "data-testid": testId || testIds.root, children: _jsxs("div", { ref: rootRef, className: styles['SubNav--header-container-outer'], children: [_jsxs("div", { className: styles['SubNav__header-container'], children: [HeadingChild && _jsx("div", { className: styles['SubNav__heading-container'], children: HeadingChild }), !isLarge && (_jsxs("button", { className: clsx(styles['SubNav__overlay-toggle'], isOpenAtNarrow && styles['SubNav__overlay-toggle--open']), "data-testid": testIds.button, onClick: isOpenAtNarrow ? closeMenuCallback : handleMenuToggle, "aria-expanded": isOpenAtNarrow ? 'true' : 'false', "aria-controls": idForLinkContainer, children: [activeLinklabel && _jsx("span", { className: "visually-hidden", children: "Navigation menu. Current page: " }), _jsxs("span", { className: clsx(styles['SubNav__overlay-toggle-content'], !activeLinklabel && styles['SubNav__overlay-toggle-content--end']), children: [activeLinklabel && (_jsx(Text, { as: "span", size: "200", children: activeLinklabel })), isOpenAtNarrow ? (_jsx(ChevronUpIcon, { className: styles['SubNav__overlay-toggle-icon'], size: 24 })) : (_jsx(ChevronDownIcon, { className: styles['SubNav__overlay-toggle-icon'], size: 24 }))] })] })), MaybeSubNav && MaybeSubNav] }), LinkChildren.length && (_jsxs("ul", { ref: overlayRef, id: idForLinkContainer, className: clsx(styles['SubNav__links-overlay'], isOpenAtNarrow && styles['SubNav__links-overlay--open']), "data-testid": testIds.overlay, children: [ActionChild ?
+                                    _jsx("li", { className: styles['SubNav__action-container'], children: ActionChild })
+                                    :
+                                        _jsx("li", { className: styles['SubNav__action-container'] }), LinkChildren, _jsx(ButtonGroup, { buttonSize: "small", children: _jsx(Button, { href: "#", onClick: (e) => { window.location.assign("https://datalayer.app"); }, hasArrow: true, variant: "subtle", children: "Login" }) })] }))] }) }) }) }));
+});
+const SubNavHeading = ({ href, children, className, 'data-testid': testID, ...props }) => {
+    return (_jsx("a", { href: href, className: clsx(styles['SubNav__heading'], className), "data-testid": testIds.heading || testID, ...props, children: children }));
+};
+const SubNavLinkWithSubmenu = forwardRef(({ children, href, 'aria-current': ariaCurrent, 'data-testid': testId, className, _subMenuVariant, variant, ...props }, forwardedRef) => {
+    const submenuId = useId();
+    const { isLarge } = useWindowSize();
+    const [isExpanded, setIsExpanded] = useState(false);
+    const ref = useProvidedRefOrCreate(forwardedRef);
+    useContainsFocus(ref, (containsFocus) => {
+        if (!containsFocus) {
+            setIsExpanded(false);
+        }
+    });
+    const [label, SubMenuChildren] = children;
+    const handleOnClick = useCallback(() => {
+        setIsExpanded(prev => !prev);
+    }, []);
+    return (_jsxs("div", { className: clsx(styles['SubNav__link--has-sub-menu'], isExpanded && styles['SubNav__link--expanded']), "data-testid": testId || testIds.subMenu, ref: ref, onMouseOver: () => setIsExpanded(true), onMouseOut: () => setIsExpanded(false), 
+        /**
+         * onFocus and onBlur need to be defined to keep the jsx-a11y/mouse-events-have-key-events
+         * eslint rule happy. The focus/blur behaviour is handled by useContainsFocus
+         */
+        onFocus: () => null, onBlur: () => null, children: [_jsx("a", { href: href, className: clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], className), "aria-current": ariaCurrent, ...props, children: _jsx(Text, { as: "span", size: "200", weight: "semibold", className: styles['SubNav__link-label'], variant: ariaCurrent === 'page' || variant === 'default' ? 'default' : 'muted', children: label }) }), isLarge && (_jsx("button", { className: styles['SubNav__sub-menu-toggle'], onClick: handleOnClick, "aria-expanded": isExpanded ? 'true' : 'false', "aria-controls": submenuId, "aria-label": `${isExpanded ? 'Close' : 'Open'} submenu`, children: _jsx(ChevronDownIcon, { className: styles['SubNav__sub-menu-icon'], size: 16 }) })), _jsx("div", { id: submenuId, className: styles['SubNav__sub-menu-children'], children: SubMenuChildren })] }));
+});
+const SubNavLink = forwardRef((props, ref) => {
+    const [isInView, setIsInView] = useState(false);
+    const childrenArr = Children.toArray(props.children);
+    const hasSubMenu = childrenArr.some(child => {
+        if (isValidElement(child)) {
+            return child.type === _SubMenu;
+        }
+    });
+    useEffect(() => {
+        if (hasSubMenu)
+            return;
+        const targetId = props.href.replace('#', '');
+        const target = document.getElementById(targetId);
+        if (!target)
+            return;
+        const topOfWindow = '0px 0px -100%';
+        const observerParams = { threshold: 0, root: null, rootMargin: topOfWindow };
+        const handleIntersectionUpdate = ([entry]) => {
+            setIsInView(entry.isIntersecting);
+        };
+        const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams);
+        observer.observe(target);
+        return () => observer.disconnect();
+    }, [hasSubMenu, props.href]);
+    if (hasSubMenu) {
+        const isAnchorVariantSubMenu = childrenArr.some(child => {
+            if (isValidElement(child)) {
+                return child.type === _SubMenu && child.props.variant === 'anchor';
+            }
+        });
+        return (_jsx("li", { children: _jsx(SubNavLinkWithSubmenu, { ...props, ref: ref, _subMenuVariant: isAnchorVariantSubMenu ? 'anchor' : undefined }) }));
+    }
+    const { children, href, 'aria-current': ariaCurrent, 'data-testid': testId, variant, className, ...rest } = props;
+    return (_jsx("li", { children: _jsx("a", { href: href, className: clsx(styles['SubNav__link'], ariaCurrent && styles['SubNav__link--active'], isInView && styles['SubNav__link--is-in-view'], className), "aria-current": ariaCurrent, "data-testid": testId || testIds.link, ref: ref, ...rest, children: _jsx(Text, { as: "span", size: "100", weight: "semibold", className: styles['SubNav__link-label'], variant: ariaCurrent === 'page' || variant === 'default' ? 'default' : 'muted', children: children }) }) }));
+});
+function _SubMenu({ children, className, variant = 'dropdown', ...props }) {
+    const context = React.useContext(SubNavContext);
+    const navRef = useRef(null);
+    const { isLarge } = useWindowSize();
+    /**
+     * Effect is needed to prevent the bubbling of onClick events to the overlay trigger.
+     * Removing this effect will cause clicks on the anchor nav element to toggle the overlay.
+     */
+    useEffect(() => {
+        const handleClick = (e) => {
+            if (navRef.current && !navRef.current.contains(e.target)) {
+                return;
+            }
+            if (!(e.target instanceof HTMLAnchorElement)) {
+                e.stopPropagation();
+            }
+        };
+        if (variant === 'anchor') {
+            document.addEventListener('click', handleClick, true); // Capture phase
+        }
+        return () => {
+            document.removeEventListener('click', handleClick, true);
+        };
+    }, [variant]);
+    if (variant === 'anchor' && context?.portalRef.current) {
+        return createPortal(_jsx("nav", { ref: navRef, className: clsx(styles['SubNav__sub-menu'], styles['SubNav__sub-menu--anchor'], className), role: "navigation", "aria-label": "Sub navigation", children: _jsx("ul", { className: styles['SubNav__sub-menu-list'], ...props, children: React.Children.map(children, child => {
+                    if (isValidElement(child)) {
+                        return React.cloneElement(child, {
+                            onClick: e => {
+                                if (child.props.onClick) {
+                                    child.props.onClick(e);
+                                }
+                            },
+                        });
+                    }
+                }) }) }), context.portalRef.current);
+    }
+    else {
+        const Tag = isLarge ? ThemeProvider : React.Fragment;
+        return (_jsx(Tag, { ...(isLarge ? { colorMode: 'light' } : {}), children: _jsx("ul", { className: clsx(styles['SubNav__sub-menu'], styles[`SubNav__sub-menu--${variant}`], className), ...props, children: children }) }));
+    }
+}
+function _SubNavAction({ children, href, variant = 'primary', size = 'small', ...rest }) {
+    return (_jsx(Button, { className: styles['SubNav__action'], as: "a", href: href, variant: variant, hasArrow: false, "data-testid": testIds.action, size: size, ...rest, children: children }));
+}
+/**
+ * Use SubNav to display a secondary navigation beneath a primary header.
+ * @see https://primer.style/brand/components/SubNav
+ */
+export const SubNav = Object.assign(_SubNavRoot, {
+    Heading: SubNavHeading,
+    Link: SubNavLink,
+    Action: _SubNavAction,
+    SubMenu: _SubMenu,
+    testIds,
+});

package/lib/components/subnav/index.d.ts

@@ -0,0 +1 @@
+export * from './SubNav';

package/lib/components/subnav/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+export * from './SubNav';

package/lib/components/tables/DataTable.d.ts

@@ -0,0 +1,5 @@
+type IDataTableProps = {
+    data: Array<any>;
+};
+export declare const DataTable: (props: IDataTableProps) => import("react/jsx-runtime").JSX.Element;
+export default DataTable;

package/lib/components/tables/DataTable.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import { useState } from 'react';
+import { Box, Button, PageLayout } from '@primer/react';
+import { Dialog } from '@primer/react/experimental';
+const DataTableDetails = (props) => {
+    return (_jsx(PageLayout, { containerWidth: "full", padding: "normal", sx: { overflow: 'visible' }, children: _jsx(PageLayout.Content, {}) }));
+};
+export const DataTable = (props) => {
+    const [dialog, setDialog] = useState(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Box, { children: dialog ?
+                    _jsx(Dialog, { sx: { width: "100%", height: '100%' }, onClose: e => setDialog(false), children: _jsx(DataTableDetails, { ...props }) })
+                    :
+                        _jsx(DataTableDetails, { ...props }) }), _jsx(Box, { children: _jsx(Button, { onClick: e => setDialog(true), children: "Zoom" }) })] }));
+};
+export default DataTable;

package/lib/components/tables/index.d.ts

@@ -0,0 +1 @@
+export * from './DataTable';

package/lib/components/tables/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+export * from './DataTable';

package/lib/components/text-reveal/TextRevealAnimation.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { BaseProps } from '../primer';
+export type TextRevealAnimationProps = BaseProps<HTMLSpanElement> & Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {
+    children: React.ReactChild;
+};
+export declare function TextRevealAnimation({ children, ...rest }: TextRevealAnimationProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/components/text-reveal/TextRevealAnimation.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import React, { useEffect } from 'react';
+import clsx from 'clsx';
+import { useTextRevealAnimationLines } from './useTextRevealAnimationLines';
+import styles from './TextRevealAnimation.module.css';
+export function TextRevealAnimation({ children, ...rest }) {
+    const [animationStarted, setAnimationStarted] = React.useState(false);
+    const [hasAnimationCompleted, setHasAnimationCompleted] = React.useState(false);
+    const { ref, lines } = useTextRevealAnimationLines(children.toString() || '');
+    const onLineAnimationEnd = (i) => {
+        if (lines && i === lines.length - 1) {
+            setHasAnimationCompleted(true);
+        }
+    };
+    useEffect(() => {
+        const el = ref.current;
+        const observer = new IntersectionObserver(entries => {
+            for (const entry of entries) {
+                if (entry.isIntersecting) {
+                    setAnimationStarted(true);
+                    if (el) {
+                        observer.unobserve(el);
+                    }
+                }
+            }
+        }, {
+            threshold: 1,
+            rootMargin: '0px 0px -10% 0px',
+        });
+        if (el) {
+            observer.observe(el);
+        }
+        return () => {
+            if (el) {
+                observer.unobserve(el);
+            }
+        };
+    }, [ref]);
+    if (typeof children !== 'string' && (process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test')) {
+        // eslint-disable-next-line no-console
+        console.warn('Children passed to TextRevealAnimation must be a string');
+        return null;
+    }
+    return (_jsx("span", { ref: ref, ...rest, children: lines?.map((line, i) => (_jsxs(React.Fragment, { children: [_jsx("span", { className: clsx(styles.TextRevealAnimation, animationStarted && styles['TextRevealAnimation--visible'], animationStarted &&
+                        (hasAnimationCompleted ? styles['TextRevealAnimation'] : styles['TextRevealAnimation--animated'])), style: { '--animation-delay': `${220 + i * 200}ms` }, onAnimationEnd: () => onLineAnimationEnd(i), children: line }), ' '] }, line))) }));
+}

package/lib/components/text-reveal/index.d.ts

@@ -0,0 +1 @@
+export * from './TextRevealAnimation';