@datalayer/core 0.0.3 → 0.0.5

package/lib/components/navbar/SubdomainNavBar.js

@@ -3,15 +3,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import React, { useState, useCallback, useRef, forwardRef, useMemo, useEffect } from 'react';
+import React, { useState, useCallback, useRef, forwardRef, useMemo, useEffect, } from 'react';
 import clsx from 'clsx';
 import { SearchIcon, XIcon, LinkExternalIcon } from '@primer/octicons-react';
-import { Button, FormControl, Text, TextInput, Label } from '@primer/react-brand';
+import { Button, FormControl, Text, TextInput, Label, } from '@primer/react-brand';
 import { CircleYellowIcon } from '@datalayer/icons-react';
 import { NavigationVisbilityObserver } from './NavigationVisbilityObserver';
-import { useCoreStore } from "../../state";
-import { useOnClickOutside, useFocusTrap, useKeyboardEscape, useWindowSize, useNavigate } from "../../hooks";
-import { useRunStore } from "../../state";
+import { useCoreStore } from '../../state';
+import { useOnClickOutside, useFocusTrap, useKeyboardEscape, useWindowSize, useNavigate, } from '../../hooks';
+import { useRunStore } from '../../state';
 import { useId } from '../../hooks';
 /**
  * Design tokens
@@ -55,7 +55,11 @@ function Root({ children, className, fixed = true, fullWidth = false, logoHref =
             mainElRef.current = mainEl;
         }
     }, [startOfContentID]);
-    useFocusTrap({ containerRef: focusTrapRef, restoreFocusOnCleanUp: true, disabled: menuHidden });
+    useFocusTrap({
+        containerRef: focusTrapRef,
+        restoreFocusOnCleanUp: true,
+        disabled: menuHidden,
+    });
     useKeyboardEscape(() => {
         setMenuHidden(true);
     });
@@ -70,7 +74,9 @@ function Root({ children, className, fixed = true, fullWidth = false, logoHref =
     }, [menuHidden]);
     const setStartOfContentButtonFocusedTrue = useCallback(() => setStartOfContentButtonFocused(true), []);
     const setStartOfContentButtonFocusedFalse = useCallback(() => setStartOfContentButtonFocused(false), []);
-    const hasLinks = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) && typeof child.type !== 'string' && child.type === Link), 
+    const hasLinks = useMemo(() => React.Children.toArray(children).filter(child => React.isValidElement(child) &&
+        typeof child.type !== 'string' &&
+        child.type === Link), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []).length > 0;
     const menuItems = useMemo(() => React.Children.toArray(children)
@@ -90,10 +96,11 @@ function Root({ children, className, fixed = true, fullWidth = false, logoHref =
         }
     })
         .filter(Boolean), [children]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: clsx(styles['SubdomainNavBar-outer-container'], fixed && styles['SubdomainNavBar-outer-container--fixed']), children: [_jsx(Button, { as: "a", href: `#${mainElRef.current?.id || startOfContentID}`, variant: "primary", className: clsx(styles['SubdomainNavBar-skip-to-content'], !startOfContentButtonFocused && 'visually-hidden'), onFocus: setStartOfContentButtonFocusedTrue, onBlur: setStartOfContentButtonFocusedFalse, children: "Skip to content" }), _jsx("header", { className: clsx(styles['SubdomainNavBar'], className), "data-testid": testIds.root, ...rest, children: _jsxs("div", { ref: focusTrapRef, className: clsx(styles['SubdomainNavBar-inner-container'], searchVisible && styles['SubdomainNavBar-inner-container--search-open'], !fullWidth && styles['SubdomainNavBar-inner-container--centered']), "data-testid": testIds.innerContainer, children: [_jsx("nav", { "aria-label": "global breadcrumb", children: _jsxs("ol", { className: styles['SubdomainNavBar-title-area'], children: [_jsx("li", { children: _jsx("a", { href: "javascript: return false;", "aria-label": "Datalayer Home", className: styles['SubdomainNavBar-logo-mark'], onClick: e => navigate('/', e), children: _jsx("img", { src: configuration.brand.logoUrl, style: { height: 25 } }) }) }), isDev &&
-                                                _jsx("li", { children: _jsx(Label, { leadingVisual: _jsx(CircleYellowIcon, {}), color: "green-blue", children: "DEV" }) })] }) }), hasLinks && (_jsx("nav", { id: "menu-navigation", "aria-label": title, className: styles['SubdomainNavBar-primary-nav'], "data-testid": testIds.menuLinks, children: _jsx(NavigationVisbilityObserver, { className: clsx(styles['SubdomainNavBar-primary-nav-list--invisible']), children: menuItems }) })), _jsxs("div", { className: clsx(styles['SubdomainNavBar-secondary-nav']), children: [React.Children.toArray(children)
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: clsx(styles['SubdomainNavBar-outer-container'], fixed && styles['SubdomainNavBar-outer-container--fixed']), children: [_jsx(Button, { as: "a", href: `#${mainElRef.current?.id || startOfContentID}`, variant: "primary", className: clsx(styles['SubdomainNavBar-skip-to-content'], !startOfContentButtonFocused && 'visually-hidden'), onFocus: setStartOfContentButtonFocusedTrue, onBlur: setStartOfContentButtonFocusedFalse, children: "Skip to content" }), _jsx("header", { className: clsx(styles['SubdomainNavBar'], className), "data-testid": testIds.root, ...rest, children: _jsxs("div", { ref: focusTrapRef, className: clsx(styles['SubdomainNavBar-inner-container'], searchVisible &&
+                                styles['SubdomainNavBar-inner-container--search-open'], !fullWidth && styles['SubdomainNavBar-inner-container--centered']), "data-testid": testIds.innerContainer, children: [_jsx("nav", { "aria-label": "global breadcrumb", children: _jsxs("ol", { className: styles['SubdomainNavBar-title-area'], children: [_jsx("li", { children: _jsx("a", { href: "javascript: return false;", "aria-label": "Datalayer Home", className: styles['SubdomainNavBar-logo-mark'], onClick: e => navigate('/', e), children: _jsx("img", { src: configuration.brand.logoUrl, style: { height: 25 } }) }) }), isDev && (_jsx("li", { children: _jsx(Label, { leadingVisual: _jsx(CircleYellowIcon, {}), color: "green-blue", children: "DEV" }) }))] }) }), hasLinks && (_jsx("nav", { id: "menu-navigation", "aria-label": title, className: styles['SubdomainNavBar-primary-nav'], "data-testid": testIds.menuLinks, children: _jsx(NavigationVisbilityObserver, { className: clsx(styles['SubdomainNavBar-primary-nav-list--invisible']), children: menuItems }) })), _jsxs("div", { className: clsx(styles['SubdomainNavBar-secondary-nav']), children: [React.Children.toArray(children)
                                             .map(child => {
-                                            if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                            if (React.isValidElement(child) &&
+                                                typeof child.type !== 'string') {
                                                 if (child.type === Search) {
                                                     return React.cloneElement(child, {
                                                         active: searchVisible,
@@ -106,7 +113,8 @@ function Root({ children, className, fixed = true, fullWidth = false, logoHref =
                                         })
                                             .filter(Boolean), hasLinks && (_jsxs("button", { "aria-expanded": !menuHidden, "aria-label": "Menu", "aria-controls": "menu-navigation", "aria-haspopup": "true", className: clsx(styles['SubdomainNavBar-menu-button'], styles['SubdomainNavBar-mobile-menu-button'], !menuHidden && styles['SubdomainNavBar-menu-button--close']), "data-testid": testIds.menuButton, onClick: handleMobileMenuClick, children: [_jsx("div", { className: clsx(styles['SubdomainNavBar-menu-button-bar']) }), _jsx("div", { className: clsx(styles['SubdomainNavBar-menu-button-bar']) }), _jsx("div", { className: clsx(styles['SubdomainNavBar-menu-button-bar']) })] })), isMedium && (_jsx("div", { className: clsx(styles['SubdomainNavBar-button-area'], styles['SubdomainNavBar-button-area--visible']), children: _jsxs("div", { className: styles['SubdomainNavBar-button-area-inner'], children: [React.Children.toArray(children)
                                                         .map(child => {
-                                                        if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                                        if (React.isValidElement(child) &&
+                                                            typeof child.type !== 'string') {
                                                             if (child.type === PrimaryAction) {
                                                                 return child;
                                                             }
@@ -115,7 +123,8 @@ function Root({ children, className, fixed = true, fullWidth = false, logoHref =
                                                     })
                                                         .filter(Boolean), React.Children.toArray(children)
                                                         .map(child => {
-                                                        if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                                        if (React.isValidElement(child) &&
+                                                            typeof child.type !== 'string') {
                                                             if (child.type === SecondaryAction) {
                                                                 return child;
                                                             }
@@ -124,7 +133,8 @@ function Root({ children, className, fixed = true, fullWidth = false, logoHref =
                                                     })
                                                         .filter(Boolean)] }) })), !isMedium && (_jsxs("div", { className: clsx(styles['SubdomainNavBar-menu-wrapper'], menuHidden && styles['SubdomainNavBar-menu-wrapper--close']), children: [_jsxs("div", { children: [title && titleHref && (_jsx(Text, { as: "p", children: _jsx("a", { href: titleHref, "aria-label": `${title} home`, className: clsx(styles['SubdomainNavBar-link'], styles['SubdomainNavBar-link--title']), children: title }) })), hasLinks && !menuHidden && (_jsx(NavigationVisbilityObserver, { showOnlyOnNarrow: true, className: clsx(styles['SubdomainNavBar-primary-nav-list--visible']), children: menuItems }))] }), _jsx("div", { className: clsx(styles['SubdomainNavBar-button-area'], styles['SubdomainNavBar-button-area--visible']), children: _jsxs("div", { className: styles['SubdomainNavBar-button-area-inner'], children: [React.Children.toArray(children)
                                                                 .map(child => {
-                                                                if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                                                if (React.isValidElement(child) &&
+                                                                    typeof child.type !== 'string') {
                                                                     if (child.type === PrimaryAction) {
                                                                         return child;
                                                                     }
@@ -133,7 +143,8 @@ function Root({ children, className, fixed = true, fullWidth = false, logoHref =
                                                             })
                                                                 .filter(Boolean), React.Children.toArray(children)
                                                                 .map(child => {
-                                                                if (React.isValidElement(child) && typeof child.type !== 'string') {
+                                                                if (React.isValidElement(child) &&
+                                                                    typeof child.type !== 'string') {
                                                                     if (child.type === SecondaryAction) {
                                                                         return child;
                                                                     }
@@ -143,11 +154,15 @@ function Root({ children, className, fixed = true, fullWidth = false, logoHref =
                                                                 .filter(Boolean)] }) })] }))] })] }) })] }), !mainElRef.current && _jsx("div", { id: `${startOfContentID}`, tabIndex: -1 })] }));
 }
 function Link({ href, className, children, isExternal, target, ...rest }) {
-    return (_jsx("li", { className: clsx(styles['SubdomainNavBar-primary-nav-list-item'], className), ...rest, children: _jsxs("a", { href: href, target: target ?? "_self", className: clsx(styles['SubdomainNavBar-link']), children: [_jsx("span", { className: clsx(styles['SubdomainNavBar-link-text']), children: children }), isExternal && _jsx(LinkExternalIcon, { size: 16, "aria-label": "External link" })] }) }));
+    return (_jsx("li", { className: clsx(styles['SubdomainNavBar-primary-nav-list-item'], className), ...rest, children: _jsxs("a", { href: href, target: target ?? '_self', className: clsx(styles['SubdomainNavBar-link']), children: [_jsx("span", { className: clsx(styles['SubdomainNavBar-link-text']), children: children }), isExternal && (_jsx(LinkExternalIcon, { size: 16, "aria-label": "External link" }))] }) }));
 }
-const SearchInternal = ({ active, title, searchResults, searchTerm, handlerFn, onSubmit, onChange }, ref) => {
+const SearchInternal = ({ active, title, searchResults, searchTerm, handlerFn, onSubmit, onChange, }, ref) => {
     const dialogRef = useRef(null);
-    useFocusTrap({ containerRef: dialogRef, restoreFocusOnCleanUp: true, disabled: !active });
+    useFocusTrap({
+        containerRef: dialogRef,
+        restoreFocusOnCleanUp: true,
+        disabled: !active,
+    });
     useOnClickOutside(dialogRef, handlerFn);
     const [activeDescendant, setActiveDescendant] = useState(-1);
     const [listboxActive, setListboxActive] = useState();
@@ -175,7 +190,9 @@ const SearchInternal = ({ active, title, searchResults, searchTerm, handlerFn, o
         let count;
         // Prevent any other keys outside of supported from being prevented.
         // Only prevent "Enter" if activeDescendant is greater than -1.
-        if (!supportedKeys.includes(event.key) || (event.key === 'Enter' && activeDescendant === -1) || !dialog) {
+        if (!supportedKeys.includes(event.key) ||
+            (event.key === 'Enter' && activeDescendant === -1) ||
+            !dialog) {
             return false;
         }
         event.preventDefault();
@@ -186,11 +203,14 @@ const SearchInternal = ({ active, title, searchResults, searchTerm, handlerFn, o
         }
         else if (event.key === 'ArrowUp') {
             // Reset to last search result item if
-            count = currentCount === -1 ? searchResultsLength - 1 : currentCount - 1;
+            count =
+                currentCount === -1 ? searchResultsLength - 1 : currentCount - 1;
             setActiveDescendant(count);
         }
         if (['ArrowDown', 'ArrowUp'].includes(event.key)) {
-            dialog.querySelector(`#subdomainnavbar-search-result-${count}`)?.scrollIntoView();
+            dialog
+                .querySelector(`#subdomainnavbar-search-result-${count}`)
+                ?.scrollIntoView();
         }
         if (event.key === 'Enter') {
             const link = dialog.querySelector(`#subdomainnavbar-search-result-${activeDescendant} a`);
@@ -215,15 +235,17 @@ const SearchInternal = ({ active, title, searchResults, searchTerm, handlerFn, o
         setListboxActive(search);
         searchLiveRegion();
     }, [searchResults, searchTerm, searchLiveRegion]);
-    return (_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles['SubdomainNavBar-search-trigger']), children: _jsx("button", { "aria-label": "search", className: styles['SubdomainNavBar-search-button'], onClick: handlerFn, "data-testid": "toggle-search", children: _jsx(SearchIcon, {}) }) }), active && (_jsxs("div", { ref: dialogRef, role: "dialog", "aria-label": `Search ${title}`, "aria-modal": "true", tabIndex: -1, className: clsx(styles['SubdomainNavBar-search-dialog']), children: [_jsxs("div", { className: clsx(styles['SubdomainNavBar-search-dialog-control-area']), children: [_jsx("form", { className: clsx(styles['SubdomainNavBar-search-form']), onSubmit: onSubmit, role: "search", children: _jsxs(FormControl, { fullWidth: true, size: "medium", children: [_jsx(FormControl.Label, { visuallyHidden: true, children: "Search" }), _jsx(TextInput, { ref: ref, className: clsx(styles['SubdomainNavBar-search-text-input']), name: "search", role: "combobox", "aria-expanded": listboxActive, "aria-controls": "listbox-search-results", placeholder: `Search ${title}`, onChange: onChange, defaultValue: searchTerm, invisible: true, leadingVisual: _jsx(SearchIcon, { size: 16 }), "aria-activedescendant": activeDescendant === -1 ? undefined : `subdomainnavbar-search-result-${activeDescendant}`, onKeyDown: handleAriaFocus })] }) }), _jsx("button", { "aria-label": "Close", className: clsx(styles['SubdomainNavBar-menu-button'], styles['SubdomainNavBar-menu-button--close']), onClick: handleClose, children: _jsx(XIcon, { size: 24 }) })] }), _jsxs("div", { id: "listbox-search-results", children: [listboxActive && (_jsxs("div", { className: clsx(styles['SubdomainNavBar-search-results-container']), children: [_jsxs(Text, { id: "subdomainnavbar-search-results-heading", className: styles['SubdomainNavBar-search-results-heading'], children: ["Results for \u201C", searchTerm, "\u201D"] }), _jsx("ul", { role: "listbox", tabIndex: 0, "aria-labelledby": "subdomainnavbar-search-results-heading", className: clsx(styles['SubdomainNavBar-search-results']), children: searchResults?.map((result, index) => (_jsxs("li", { id: `subdomainnavbar-search-result-${index}`, className: styles['SubdomainNavBar-search-result-item'], role: "option", "aria-selected": index === activeDescendant, children: [_jsx("div", { className: styles['SubdomainNavBar-search-result-item-container'], children: _jsx("a", { href: result.url, children: result.title }) }), _jsx(Text, { as: "p", size: "200", id: `subdomainnavbar-search-result-item-desc${index}`, className: styles['SubdomainNavBar-search-result-item-desc'], children: result.description }), _jsxs("div", { children: [_jsx(Text, { size: "100", className: styles['SubdomainNavBar-search-result-item-desc'], children: result.date }), result.category && (_jsxs(_Fragment, { children: [_jsxs(Text, { size: "100", className: styles['SubdomainNavBar-search-result-item-desc'], children: [' ', "\u2022", ' '] }), _jsx(Text, { size: "100", className: styles['SubdomainNavBar-search-result-item-desc'], children: result.category })] }))] })] }, `${result.title}-${index}`))) })] })), _jsxs("div", { "aria-live": "polite", "aria-atomic": "true", "data-testid": testIds.liveRegion, className: "visually-hidden", children: [`${searchResults?.length} suggestions.`, liveRegion && _jsx("span", { children: "\u00A0" })] })] })] }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: clsx(styles['SubdomainNavBar-search-trigger']), children: _jsx("button", { "aria-label": "search", className: styles['SubdomainNavBar-search-button'], onClick: handlerFn, "data-testid": "toggle-search", children: _jsx(SearchIcon, {}) }) }), active && (_jsxs("div", { ref: dialogRef, role: "dialog", "aria-label": `Search ${title}`, "aria-modal": "true", tabIndex: -1, className: clsx(styles['SubdomainNavBar-search-dialog']), children: [_jsxs("div", { className: clsx(styles['SubdomainNavBar-search-dialog-control-area']), children: [_jsx("form", { className: clsx(styles['SubdomainNavBar-search-form']), onSubmit: onSubmit, role: "search", children: _jsxs(FormControl, { fullWidth: true, size: "medium", children: [_jsx(FormControl.Label, { visuallyHidden: true, children: "Search" }), _jsx(TextInput, { ref: ref, className: clsx(styles['SubdomainNavBar-search-text-input']), name: "search", role: "combobox", "aria-expanded": listboxActive, "aria-controls": "listbox-search-results", placeholder: `Search ${title}`, onChange: onChange, defaultValue: searchTerm, invisible: true, leadingVisual: _jsx(SearchIcon, { size: 16 }), "aria-activedescendant": activeDescendant === -1
+                                                ? undefined
+                                                : `subdomainnavbar-search-result-${activeDescendant}`, onKeyDown: handleAriaFocus })] }) }), _jsx("button", { "aria-label": "Close", className: clsx(styles['SubdomainNavBar-menu-button'], styles['SubdomainNavBar-menu-button--close']), onClick: handleClose, children: _jsx(XIcon, { size: 24 }) })] }), _jsxs("div", { id: "listbox-search-results", children: [listboxActive && (_jsxs("div", { className: clsx(styles['SubdomainNavBar-search-results-container']), children: [_jsxs(Text, { id: "subdomainnavbar-search-results-heading", className: styles['SubdomainNavBar-search-results-heading'], children: ["Results for \u201C", searchTerm, "\u201D"] }), _jsx("ul", { role: "listbox", tabIndex: 0, "aria-labelledby": "subdomainnavbar-search-results-heading", className: clsx(styles['SubdomainNavBar-search-results']), children: searchResults?.map((result, index) => (_jsxs("li", { id: `subdomainnavbar-search-result-${index}`, className: styles['SubdomainNavBar-search-result-item'], role: "option", "aria-selected": index === activeDescendant, children: [_jsx("div", { className: styles['SubdomainNavBar-search-result-item-container'], children: _jsx("a", { href: result.url, children: result.title }) }), _jsx(Text, { as: "p", size: "200", id: `subdomainnavbar-search-result-item-desc${index}`, className: styles['SubdomainNavBar-search-result-item-desc'], children: result.description }), _jsxs("div", { children: [_jsx(Text, { size: "100", className: styles['SubdomainNavBar-search-result-item-desc'], children: result.date }), result.category && (_jsxs(_Fragment, { children: [_jsxs(Text, { size: "100", className: styles['SubdomainNavBar-search-result-item-desc'], children: [' ', "\u2022", ' '] }), _jsx(Text, { size: "100", className: styles['SubdomainNavBar-search-result-item-desc'], children: result.category })] }))] })] }, `${result.title}-${index}`))) })] })), _jsxs("div", { "aria-live": "polite", "aria-atomic": "true", "data-testid": testIds.liveRegion, className: "visually-hidden", children: [`${searchResults?.length} suggestions.`, liveRegion && _jsx("span", { children: "\u00A0" })] })] })] }))] }));
 };
 const Search = forwardRef(SearchInternal);
 function PrimaryAction({ children, ...rest }) {
-    const { hasArrow = false, size = "small" } = rest;
+    const { hasArrow = false, size = 'small' } = rest;
     return (_jsx(Button, { as: "a", href: "javascript: return false;", className: clsx(styles['SubdomainNavBar-cta-button']), variant: "primary", size: size, hasArrow: hasArrow, ...rest, children: children }));
 }
 function SecondaryAction({ children, ...rest }) {
-    const { hasArrow = false, size = "small" } = rest;
+    const { hasArrow = false, size = 'small' } = rest;
     return (_jsx(Button, { as: "a", href: "javascript: return false;", className: clsx(styles['SubdomainNavBar-cta-button'], styles['SubdomainNavBar-cta-button--secondary']), size: size, hasArrow: hasArrow, ...rest, children: children }));
 }
 export const SubdomainNavBar = Object.assign(Root, {

package/lib/components/navbar/SubdomainNavBar.module.css

@@ -5,7 +5,7 @@
 /*
  * Main styles for the subdomain navigation bar.
  */
- .SubdomainNavBar {
+.SubdomainNavBar {
   position: relative;
   z-index: 90;
   font-weight: 550;
@@ -13,8 +13,11 @@
   -webkit-backdrop-filter: blur(16px);
   backdrop-filter: blur(16px);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  transition: background-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default),
-    border-color var(--brand-animation-duration-fast) var(--brand-animation-easing-default);
+  transition:
+    background-color var(--brand-animation-duration-fast)
+      var(--brand-animation-easing-default),
+    border-color var(--brand-animation-duration-fast)
+      var(--brand-animation-easing-default);
   height: 75px;
 }
 
@@ -79,7 +82,9 @@
   position: absolute;
   left: calc(-32px + 5px);
   opacity: 0;
-  transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast) ease;
+  transition:
+    opacity var(--brand-animation-duration-fast),
+    transform var(--brand-animation-duration-fast) ease;
   transform: translateX(5px);
   color: var(--brand-color-text-muted);
 }
@@ -251,7 +256,8 @@
   font-weight: var(--base-text-weight-normal);
   font-size: var(--base-size-20);
   line-height: var(--base-size-20);
-  padding: var(--base-size-8) var(--base-size-16) var(--base-size-16) var(--base-size-28);
+  padding: var(--base-size-8) var(--base-size-16) var(--base-size-16)
+    var(--base-size-28);
   text-decoration: none;
 }
 
@@ -291,7 +297,9 @@
     height: 2px;
     background-color: var(--brand-SubdomainNavBar-border-nav-default);
     opacity: 0;
-    transition: opacity var(--brand-animation-duration-fast), transform var(--brand-animation-duration-fast);
+    transition:
+      opacity var(--brand-animation-duration-fast),
+      transform var(--brand-animation-duration-fast);
     opacity: 1;
     transform: scale(0);
     transform-origin: center;
@@ -357,7 +365,9 @@
   top: var(--base-size-48);
   background-color: var(--base-color-scale-white-0);
   border-radius: var(--brand-borderRadius-large);
-  animation: fade-in-down 0.25s, enlarge-shadow 250ms forwards;
+  animation:
+    fade-in-down 0.25s,
+    enlarge-shadow 250ms forwards;
   animation-timing-function: var(--brand-animation-easing-default);
   box-shadow: 0px 8px 24px rgba(1, 4, 9, 0.15);
   overflow: hidden;
@@ -398,7 +408,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: border 250ms var(--brand-animation-easing-default), box-shadow 250ms ease;
+  transition:
+    border 250ms var(--brand-animation-easing-default),
+    box-shadow 250ms ease;
   border-radius: var(--brand-borderRadius-medium);
   box-shadow: 0 0 0 2px transparent;
 }
@@ -439,23 +451,27 @@
   transform-origin: top right;
 }
 
-.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(1) {
+.SubdomainNavBar-menu-button--close
+  .SubdomainNavBar-menu-button-bar:nth-of-type(1) {
   transform: rotate(-45deg) translateY(-3px);
 }
 
-.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(2) {
+.SubdomainNavBar-menu-button--close
+  .SubdomainNavBar-menu-button-bar:nth-of-type(2) {
   opacity: 0;
   transform: scale(0);
 }
 
-.SubdomainNavBar-menu-button--close .SubdomainNavBar-menu-button-bar:nth-of-type(3) {
+.SubdomainNavBar-menu-button--close
+  .SubdomainNavBar-menu-button-bar:nth-of-type(3) {
   transform: rotate(45deg) translateY(3px);
 }
 
 @media screen and (min-width: 48rem) {
   .SubdomainNavBar-search-button:hover,
   .SubdomainNavBar-menu-button:hover {
-    border: var(--brand-borderWidth-thick) solid var(--brand-SubdomainNavBar-border-button-hover);
+    border: var(--brand-borderWidth-thick) solid
+      var(--brand-SubdomainNavBar-border-button-hover);
   }
 
   .SubdomainNavBar-search-button:active,
@@ -509,7 +525,8 @@
     animation-timing-function: var(--brand-animation-easing-default);
   }
 
-  .SubdomainNavBar-inner-container--search-open .SubdomainNavBar-button-area--visible {
+  .SubdomainNavBar-inner-container--search-open
+    .SubdomainNavBar-button-area--visible {
     display: none;
   }
 
@@ -572,7 +589,9 @@
   }
 }
 
-.SubdomainNavBar-search-dialog .SubdomainNavBar-search-trigger .SubdomainNavBar-search-button {
+.SubdomainNavBar-search-dialog
+  .SubdomainNavBar-search-trigger
+  .SubdomainNavBar-search-button {
   margin-right: 0;
 }
 

package/lib/components/nbgrader/NbGradesDetails.d.ts

@@ -1,4 +1,4 @@
-import { IStudentItem } from "../../models";
+import { IStudentItem } from '../../models';
 export declare const NbGradesDetails: (props: {
     studentItem?: IStudentItem;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/components/nbgrader/NbGradesDetails.js

@@ -3,15 +3,12 @@ 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.
  */
-import { Heading, Text } from "@primer/react";
-import { Box } from "@datalayer/primer-addons";
+import { Heading, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 export const NbGradesDetails = (props) => {
     const { studentItem } = props;
-    return (studentItem && studentItem?.nbgrades ?
-        _jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: studentItem?.nbgrades.map(nb => {
-                        return _jsx(Box, { children: _jsxs(Text, { sx: { fontSize: "small" }, children: [nb.grade_id_s, ": ", nb.score_f] }) });
-                    }) }), _jsx(Box, { mt: 3, children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Total" }) }), _jsxs(Box, { mt: 3, children: [studentItem?.nbgradesTotalScore, " / ", studentItem?.nbgradesTotalPoints] })] })
-        :
-            _jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: "Please grade your assignment." })] }));
+    return studentItem && studentItem?.nbgrades ? (_jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: studentItem?.nbgrades.map(nb => {
+                    return (_jsx(Box, { children: _jsxs(Text, { sx: { fontSize: 'small' }, children: [nb.grade_id_s, ": ", nb.score_f] }) }));
+                }) }), _jsx(Box, { mt: 3, children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Total" }) }), _jsxs(Box, { mt: 3, children: [studentItem?.nbgradesTotalScore, " / ", studentItem?.nbgradesTotalPoints] })] })) : (_jsxs(Box, { children: [_jsx(Box, { children: _jsx(Heading, { sx: { fontSize: 1 }, children: "Grades" }) }), _jsx(Box, { mt: 3, children: "Please grade your assignment." })] }));
 };
 export default NbGradesDetails;

package/lib/components/notebooks/JupyterNotebook.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { Box } from "@datalayer/primer-addons";
+import { Box } from '@datalayer/primer-addons';
 import { Lumino } from '@datalayer/jupyter-react';
 export const JupyterNotebook = (props) => {
     const { boxPanel, height } = props;
@@ -12,22 +12,22 @@ export const JupyterNotebook = (props) => {
                 '& .dla-Jupyter-Notebook': {
                     height,
                     maxHeight: 1000,
-                    width: '100%'
+                    width: '100%',
                 },
                 '& .jp-MainAreaWidget': {
                     width: '100%',
                     height,
                 },
                 '& .jp-Toolbar': {
-                    width: '100% !important'
+                    width: '100% !important',
                 },
                 '& .jp-NotebookPanel-notebook': {
                     width: '100% !important',
                     height,
                 },
                 '& .lm-mod-hidden': {
-                    display: 'unset !important'
-                }
+                    display: 'unset !important',
+                },
             }, children: _jsx(Lumino, { children: boxPanel }) }) }));
 };
 JupyterNotebook.defaultProps = {

package/lib/components/notebooks/JupyterNotebookToolbar.js

@@ -3,10 +3,10 @@ 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.
  */
-import { CircleCurrentColorIcon, CircleGreenIcon, CircleOrangeIcon } from '@datalayer/icons-react';
+import { CircleCurrentColorIcon, CircleGreenIcon, CircleOrangeIcon, } from '@datalayer/icons-react';
 import { Text } from '@primer/react';
-import { Box } from "@datalayer/primer-addons";
-import { Sparklines, SparklinesBars, SparklinesLine, SparklinesReferenceLine } from 'react-sparklines';
+import { Box } from '@datalayer/primer-addons';
+import { Sparklines, SparklinesBars, SparklinesLine, SparklinesReferenceLine, } from 'react-sparklines';
 import { DatalayerThemeProvider } from '../../theme';
 function boxMullerRandom() {
     let phase = false;

package/lib/components/primer/Helper.d.ts

@@ -3,7 +3,7 @@ import { AnimateProps } from '@primer/react-brand';
 /**
  * Layout
  */
-export declare const Container: ({ children, style }: {
+export declare const Container: ({ children, style, }: {
     children: React.ReactElement[] | React.ReactElement;
     style?: React.CSSProperties;
 }) => import("react/jsx-runtime").JSX.Element;

package/lib/components/primer/Helper.js

@@ -2,18 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * Layout
  */
-export const Container = ({ children, style }) => _jsx("div", { style: { maxWidth: 1024, margin: '0 auto', ...style }, children: children });
+export const Container = ({ children, style, }) => (_jsx("div", { style: { maxWidth: 1024, margin: '0 auto', ...style }, children: children }));
 export function RedlineBackground({ height, hasBorder = true, ...rest }) {
     return (_jsx("div", { style: {
             display: 'flex',
             overflow: 'hidden',
-            border: hasBorder ? '1px solid var(--base-color-scale-red-2)' : undefined,
+            border: hasBorder
+                ? '1px solid var(--base-color-scale-red-2)'
+                : undefined,
             backgroundImage: 'linear-gradient(45deg, var(--base-color-scale-red-0) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 12.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 50%, var(--base-color-scale-red-0) 50%, var(--base-color-scale-red-0) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 62.5%, hsla(var(--base-color-scale-red-2-hsl) / 50%) 100%)',
             backgroundSize: '5.66px 5.66px',
             WebkitBoxPack: 'center',
             justifyContent: 'center',
             alignItems: 'center',
             width: '100%',
-            height
+            height,
         }, ...rest }));
 }

package/lib/components/primer/Portals.d.ts

@@ -1,4 +1,4 @@
-import "@primer/react-brand/lib/css/main.css";
+import '@primer/react-brand/lib/css/main.css';
 /**
  * Ensure we define a root for Primer portal root.
  *

package/lib/components/primer/Portals.js

@@ -2,11 +2,11 @@
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { registerPortalRoot } from "@primer/react";
+import { registerPortalRoot } from '@primer/react';
 // import { render } from 'react-dom';
 // import { Styles } from './Styles';
 const PRIMER_PORTAL_ROOT_ID = '__primerPortalRoot__';
-import "@primer/react-brand/lib/css/main.css";
+import '@primer/react-brand/lib/css/main.css';
 /**
  * Ensure we define a root for Primer portal root.
  *

package/lib/components/primer/Styles.js

@@ -6,6 +6,6 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import { ThemeProvider, BaseStyles } from '@primer/react';
 import { jupyterLabTheme } from '@datalayer/jupyter-react';
 export const Styles = () => {
-    return _jsx(_Fragment, { children: _jsx(ThemeProvider, { theme: jupyterLabTheme, children: _jsx(BaseStyles, {}) }) });
+    return (_jsx(_Fragment, { children: _jsx(ThemeProvider, { theme: jupyterLabTheme, children: _jsx(BaseStyles, {}) }) }));
 };
 export default Styles;

package/lib/components/progress/ConsumptionBar.js

@@ -5,7 +5,7 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  */
 import { useEffect, useMemo, useState } from 'react';
 import { ProgressBar, Tooltip, Button } from '@primer/react';
-import { Box } from "@datalayer/primer-addons";
+import { Box } from '@datalayer/primer-addons';
 import { useInterval } from 'usehooks-ts';
 const CRITICAL_LEVEL = 90;
 const WARNING_LEVEL = 75;
@@ -13,7 +13,7 @@ const WARNING_LEVEL = 75;
  * Consumption progress bar
  */
 export function ConsumptionBar(props) {
-    const { expiredAt, startedAt, burningRate, onClick, onUpdate, refreshInterval = 2000, style } = props;
+    const { expiredAt, startedAt, burningRate, onClick, onUpdate, refreshInterval = 2000, style, } = props;
     const duration = useMemo(() => (expiredAt ? expiredAt - startedAt : Date.now() / 1000 - startedAt), [expiredAt, startedAt]);
     const [progress, setProgress] = useState(expiredAt
         ? Math.min(Math.max(0, ((Date.now() / 1000 - startedAt) / duration) * 100), 100)

package/lib/components/progress/CreditsIndicator.d.ts

@@ -1,4 +1,4 @@
-import type { IRemoteServicesManager } from "../../api";
+import type { IRemoteServicesManager } from '../../api';
 type ICreditsIndicatorProps = {
     /**
      * Kernel service manager

package/lib/components/progress/CreditsIndicator.js

@@ -3,9 +3,9 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
  * Copyright (c) 2023-2025 Datalayer, Inc.
  * Distributed under the terms of the Modified BSD License.
  */
-import { useState, useEffect } from "react";
-import { Box } from "@datalayer/primer-addons";
-import { ConsumptionBar } from "../../components/progress";
+import { useState, useEffect } from 'react';
+import { Box } from '@datalayer/primer-addons';
+import { ConsumptionBar } from '../../components/progress';
 /**
  * Credits indicator component.
  */
@@ -17,8 +17,5 @@ export function CreditsIndicator(props) {
             setModel(model);
         });
     }, [kernelId, serviceManager]);
-    return model ?
-        _jsx(Box, { display: "flex", style: { alignItems: 'center' }, children: _jsx(ConsumptionBar, { startedAt: parseFloat(model.started_at), expiredAt: model.expired_at ? parseFloat(model.expired_at) : undefined, burningRate: model.burning_rate, onClick: onClick, onUpdate: onUpdate, style: { cursor: 'pointer' } }) })
-        :
-            _jsx(_Fragment, {});
+    return model ? (_jsx(Box, { display: "flex", style: { alignItems: 'center' }, children: _jsx(ConsumptionBar, { startedAt: parseFloat(model.started_at), expiredAt: model.expired_at ? parseFloat(model.expired_at) : undefined, burningRate: model.burning_rate, onClick: onClick, onUpdate: onUpdate, style: { cursor: 'pointer' } }) })) : (_jsx(_Fragment, {}));
 }

package/lib/components/progress/ProgressRing.js

@@ -12,7 +12,7 @@ function Item(props) {
             transformOrigin: '50% 50%',
             transform: 'rotate(-90deg)',
             transition: 'all 0.2s ease-in-out',
-            strokeDasharray: `${(PROGRESS_SEGMENTS * props.progress) / 100}px ${PROGRESS_SEGMENTS}px`
+            strokeDasharray: `${(PROGRESS_SEGMENTS * props.progress) / 100}px ${PROGRESS_SEGMENTS}px`,
         }, cx: "8px", cy: "8px", r: "7px" }));
 }
 /**
@@ -25,7 +25,7 @@ export function ProgressRing(props) {
     return (_jsxs("svg", { className: "dla-progress-ring", viewBox: "0 0 16 16", role: "progressbar", "aria-valuenow": props.progress, "aria-valuemin": 0, "aria-valuemax": 100, ...others, children: [title && _jsx("title", { children: title }), _jsx("circle", { className: "background", cx: "8px", cy: "8px", r: "7px", style: {
                     stroke: 'var(--control-bgColor-rest)',
                     fill: 'none',
-                    strokeWidth: '2px'
+                    strokeWidth: '2px',
                 } }), children ?? _jsx(Item, { progress: progress, color: color })] }));
 }
 ProgressRing.Item = Item;

package/lib/components/runtimes/RuntimeCellVariables.js

@@ -7,12 +7,12 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { nullTranslator } from '@jupyterlab/translation';
 import { JSONExt } from '@lumino/coreutils';
 import { Autocomplete, FormControl, TextInputWithTokens } from '@primer/react';
-import { Box } from "@datalayer/primer-addons";
+import { Box } from '@datalayer/primer-addons';
 /**
  * Kernel variables picker
  */
 export function KernelCellVariables(props) {
-    const { getInputOptions, inputs, setInputs, getOutputOptions, output, setOutput, translator } = props;
+    const { getInputOptions, inputs, setInputs, getOutputOptions, output, setOutput, translator, } = props;
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const inputForOutputRef = useRef(null);
     const [willSaveOutput, setWillSaveOutput] = useState(false);
@@ -26,7 +26,7 @@ export function KernelCellVariables(props) {
         if (candidates.length) {
             setInputsState([
                 ...inputsState,
-                ...candidates.map(text => ({ id: text, text, selected: true }))
+                ...candidates.map(text => ({ id: text, text, selected: true })),
             ]);
         }
     }, [inputs]);
@@ -55,8 +55,8 @@ export function KernelCellVariables(props) {
                         .map(text => ({
                         id: text,
                         text,
-                        selected: false
-                    }))
+                        selected: false,
+                    })),
                 ]);
                 setInputLoading(false);
             });
@@ -87,7 +87,7 @@ export function KernelCellVariables(props) {
                     .map(text => ({
                     id: text,
                     text,
-                    selected: false
+                    selected: false,
                 })));
             })
                 .catch(err => {
@@ -111,7 +111,7 @@ export function KernelCellVariables(props) {
         setInputsState([
             ...inputsState.map(localItem => selectedIds.includes(localItem.id)
                 ? Object.assign(localItem, { selected: true })
-                : Object.assign(localItem, { selected: false }))
+                : Object.assign(localItem, { selected: false })),
         ]);
     }, [inputsState]);
     const onItemSelect = useCallback((item) => {
@@ -160,10 +160,10 @@ export function KernelCellVariables(props) {
                                                 onItemSelect({
                                                     ...item,
                                                     text: filterVal,
-                                                    selected: true
+                                                    selected: true,
                                                 });
                                                 setFilterVal('');
-                                            }
+                                            },
                                         }
                                         : undefined, items: inputsState, selectedItemIds: inputsState
                                         .filter(item => item.selected)

package/lib/components/runtimes/RuntimeCellVariablesDialog.js

@@ -88,14 +88,14 @@ export function RuntimeCellVariablesDialog(props) {
             {
                 buttonType: 'default',
                 content: trans.__('Cancel'),
-                onClick: onClose
+                onClick: onClose,
             },
             {
                 buttonType: 'primary',
                 content: trans.__('Set variables'),
                 onClick: setVariables,
-                autoFocus: true
-            }
+                autoFocus: true,
+            },
         ], children: _jsx(KernelCellVariables, { inputs: inputs, getInputOptions: sessionContext ? getInputCandidates : undefined, setInputs: setInputs, output: output ?? undefined, getOutputOptions: getOutputCandidates, setOutput: setOutput, translator: translator }) }));
 }
 export default RuntimeCellVariablesDialog;