@datalayer/core 0.0.2 → 0.0.4

package/lib/components/snippets/SnippetDialog.js

@@ -3,22 +3,17 @@ 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, useMemo, useState } from 'react';
 import { nullTranslator } from '@jupyterlab/translation';
 import { FormControl, Select, Text } from '@primer/react';
-import { Box } from "@datalayer/primer-addons";
+import { Box } from '@datalayer/primer-addons';
 import { Dialog } from '@primer/react/experimental';
 import { Markdown } from '../display';
 /**
  * Dialog to inject snippet in a cell.
  */
 export function SnippetDialog(props) {
-    const { model, onClose, language, snippets, markdownParser, sanitizer, translator } = props;
+    const { model, onClose, language, snippets, markdownParser, sanitizer, translator, } = props;
     const [selection, setSelection] = useState(snippets[0]);
     const trans = useMemo(() => (translator ?? nullTranslator).load('jupyterlab'), [translator]);
     const onSelectionChange = useCallback((e) => {
@@ -34,14 +29,14 @@ export function SnippetDialog(props) {
             {
                 buttonType: 'default',
                 content: trans.__('Cancel'),
-                onClick: onClose
+                onClick: onClose,
             },
             {
                 buttonType: 'primary',
                 content: trans.__('Inject snippet'),
                 onClick: injectSnippet,
-                autoFocus: true
-            }
+                autoFocus: true,
+            },
         ], children: _jsx(Box, { as: "form", children: _jsxs(FormControl, { children: [_jsx(FormControl.Label, {}), _jsx(Select, { block: true, onChange: onSelectionChange, children: snippets.map((snippet, index) => (_jsx(Select.Option, { value: `${index}`, children: snippet.title }, index))) }), _jsxs(FormControl.Caption, { children: [selection.description && (_jsx(Text, { as: "p", children: selection.description })), markdownParser ? (_jsx(Markdown, { markdownParser: markdownParser, sanitizer: sanitizer, text: `\`\`\`${language}\n${selection.code}\`\`\`` })) : (_jsx("code", { children: selection.code }))] })] }) }) }));
 }
 export default SnippetDialog;

package/lib/components/snippets/index.js

@@ -2,9 +2,4 @@
  * 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 './SnippetDialog';

package/lib/components/storage/ContentsBrowser.js

@@ -3,22 +3,17 @@ 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.
  */
-/*
- * Copyright (c) 2021-2024 Datalayer, Inc.
- *
- * Datalayer License
- */
 import { useCallback, useEffect, useState } from 'react';
 import { PathExt } from '@jupyterlab/coreutils';
 import { PromiseDelegate } from '@lumino/coreutils';
-import { ActionList, ActionMenu, Heading, IconButton, Spinner, TreeView } from '@primer/react';
-import { Box } from "@datalayer/primer-addons";
+import { ActionList, ActionMenu, Heading, IconButton, Spinner, TreeView, } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
 import { Blankslate, Dialog } from '@primer/react/experimental';
 import { CounterClockWiseIcon } from '@datalayer/icons-react';
 import { useIsMounted } from 'usehooks-ts';
 import { useToast } from '../../hooks';
 import { UploadIconButton } from '../buttons';
-import { DirectoryItem, TreeItem, modelToView } from './ContentsItems';
+import { DirectoryItem, TreeItem, modelToView, } from './ContentsItems';
 /**
  * The maximum upload size (in bytes) for notebook version < 5.1.0
  */
@@ -41,7 +36,8 @@ export function ContentsBrowser(props) {
     const [openDeleteConfirmation, setOpenDeleteConfirmation] = useState(false);
     const [copyToLocalConfirmation, setCopyToLocalConfirmation] = useState(false);
     const refresh = useCallback(() => {
-        contents.get('')
+        contents
+            .get('')
             .then(model => {
             setIsLoading(false);
             setChildren(modelToView(model.content, documentRegistry));
@@ -103,10 +99,10 @@ export function ContentsBrowser(props) {
                     const msg = `Failed to upload ${file.name}.`;
                     console.error(msg, reason);
                     return msg;
-                }
+                },
             },
             pending: { message: `Uploading ${file.name}…` },
-            success: { message: () => `${file.name} uploaded.` }
+            success: { message: () => `${file.name} uploaded.` },
         };
         if (chunked) {
             const task = new PromiseDelegate();
@@ -123,7 +119,12 @@ export function ContentsBrowser(props) {
                         task.resolve(finalModel);
                     }
                 }
-                selectedItem ? selectedItem.refresh() : refresh();
+                if (selectedItem) {
+                    selectedItem.refresh();
+                }
+                else {
+                    refresh();
+                }
                 return finalModel;
             }
             catch (error) {
@@ -135,7 +136,12 @@ export function ContentsBrowser(props) {
             const task = uploadChunk(file);
             trackAsyncTask(task, toastOptions);
             task.then(() => {
-                selectedItem ? selectedItem.refresh() : refresh();
+                if (selectedItem) {
+                    selectedItem.refresh();
+                }
+                else {
+                    refresh();
+                }
             });
             return task;
         }
@@ -157,11 +163,12 @@ export function ContentsBrowser(props) {
             trackAsyncTask(task, {
                 success: { message: () => `${selectedItem.path} deleted.` },
                 pending: { message: `Deleting ${selectedItem.path}…` },
-                error: { message: reason => {
+                error: {
+                    message: reason => {
                         const msg = `Failed to delete ${selectedItem.path}.`;
                         console.error(msg, reason);
                         return msg;
-                    }
+                    },
                 },
             });
             task.finally(() => {
@@ -175,16 +182,17 @@ export function ContentsBrowser(props) {
     }, []);
     const copyToLocal = useCallback(() => {
         if (selectedItem && localContents) {
-            contents.get(selectedItem.path).then((model) => {
+            contents.get(selectedItem.path).then(model => {
                 const copyTask = localContents?.save(model.path, model);
                 trackAsyncTask(copyTask, {
                     success: { message: () => `${selectedItem.path} copied to local.` },
                     pending: { message: `Copying to local ${selectedItem.path}…` },
-                    error: { message: reason => {
+                    error: {
+                        message: reason => {
                             const msg = `Failed to copy to local ${selectedItem.path}.`;
                             console.error(msg, reason);
                             return msg;
-                        }
+                        },
                     },
                 });
                 copyTask.finally(() => {
@@ -201,50 +209,54 @@ export function ContentsBrowser(props) {
                             fontSize: 'var(--text-title-size-small)',
                             lineHeight: 'var(--text-title-lineHeight-medium)',
                             fontWeight: 'var(--text-title-weight-medium)',
-                            flex: '1 1 auto'
-                        }, children: "Contents Browser" }), _jsxs(Box, { children: [_jsx(IconButton, { variant: "invisible", "aria-label": 'Refresh contents browser.', title: 'Refresh contents browser.', icon: CounterClockWiseIcon, onClick: refresh }), _jsx(UploadIconButton, { label: 'Upload a file', multiple: true, upload: upload })] })] }), isLoading ?
-                _jsx(Box, { sx: {
-                        gridArea: 'content',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        minHeight: '40px',
-                        height: '100vh'
-                    }, children: _jsx(Spinner, {}) })
-                :
-                    _jsx(Box, { sx: { gridArea: 'content' }, children: children ?
-                            _jsxs(_Fragment, { children: [_jsx(TreeView, { children: children?.map(child => {
-                                            return child.type === 'directory' ?
-                                                _jsx(DirectoryItem, { item: child, contents: contents, current: selectedItem, documentRegistry: documentRegistry, onContextMenu: onContextMenu, onSelect: onSelect }, child.name)
-                                                :
-                                                    _jsx(TreeItem, { item: child, current: selectedItem?.path === child.path, onSelect: item => { onSelect(item, refresh); }, onContextMenu: onContextMenu }, child.name);
-                                        }) }), _jsx(ActionMenu, { anchorRef: contextMenuAnchor ?? undefined, open: contextMenuAnchor?.current !== null, onOpenChange: () => { setContextMenuAnchor(null); }, children: _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { title: "Delete the active item.", onSelect: onSelectDelete, children: "Delete\u2026" }), localContents &&
-                                                        _jsx(ActionList.Item, { title: "Copy the active item to the local drive.", onSelect: onSelectCopyToLocal, children: "Copy to local drive\u2026" })] }) }) }), openDeleteConfirmation &&
-                                        _jsx(Dialog, { title: "Confirm deletion", onClose: () => { setOpenDeleteConfirmation(false); }, footerButtons: [
-                                                {
-                                                    buttonType: 'default',
-                                                    content: 'Cancel',
-                                                    onClick: () => { setOpenDeleteConfirmation(false); }
-                                                },
-                                                {
-                                                    buttonType: 'danger',
-                                                    content: 'Delete',
-                                                    onClick: () => { deleteItem(); }
-                                                }
-                                            ], children: `Are you sure you want to delete ${selectedItem?.path}?` }), copyToLocalConfirmation &&
-                                        _jsx(Dialog, { title: "Confirm copy to local", onClose: () => { setCopyToLocalConfirmation(false); }, footerButtons: [
-                                                {
-                                                    buttonType: 'default',
-                                                    content: 'Cancel',
-                                                    onClick: () => { setCopyToLocalConfirmation(false); }
-                                                },
-                                                {
-                                                    buttonType: 'danger',
-                                                    content: 'Copy to local',
-                                                    onClick: () => { copyToLocal(); }
-                                                }
-                                            ], children: `Are you sure you want to copy to local ${selectedItem?.path}?` })] })
-                            :
-                                _jsx(Blankslate, { children: _jsx(Blankslate.Heading, { children: "No contents" }) }) })] }));
+                            flex: '1 1 auto',
+                        }, children: "Contents Browser" }), _jsxs(Box, { children: [_jsx(IconButton, { variant: "invisible", "aria-label": 'Refresh contents browser.', title: 'Refresh contents browser.', icon: CounterClockWiseIcon, onClick: refresh }), _jsx(UploadIconButton, { label: 'Upload a file', multiple: true, upload: upload })] })] }), isLoading ? (_jsx(Box, { sx: {
+                    gridArea: 'content',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    minHeight: '40px',
+                    height: '100vh',
+                }, children: _jsx(Spinner, {}) })) : (_jsx(Box, { sx: { gridArea: 'content' }, children: children ? (_jsxs(_Fragment, { children: [_jsx(TreeView, { children: children?.map(child => {
+                                return child.type === 'directory' ? (_jsx(DirectoryItem, { item: child, contents: contents, current: selectedItem, documentRegistry: documentRegistry, onContextMenu: onContextMenu, onSelect: onSelect }, child.name)) : (_jsx(TreeItem, { item: child, current: selectedItem?.path === child.path, onSelect: item => {
+                                        onSelect(item, refresh);
+                                    }, onContextMenu: onContextMenu }, child.name));
+                            }) }), _jsx(ActionMenu, { anchorRef: contextMenuAnchor ?? undefined, open: contextMenuAnchor?.current !== null, onOpenChange: () => {
+                                setContextMenuAnchor(null);
+                            }, children: _jsx(ActionMenu.Overlay, { children: _jsxs(ActionList, { children: [_jsx(ActionList.Item, { title: "Delete the active item.", onSelect: onSelectDelete, children: "Delete\u2026" }), localContents && (_jsx(ActionList.Item, { title: "Copy the active item to the local drive.", onSelect: onSelectCopyToLocal, children: "Copy to local drive\u2026" }))] }) }) }), openDeleteConfirmation && (_jsx(Dialog, { title: "Confirm deletion", onClose: () => {
+                                setOpenDeleteConfirmation(false);
+                            }, footerButtons: [
+                                {
+                                    buttonType: 'default',
+                                    content: 'Cancel',
+                                    onClick: () => {
+                                        setOpenDeleteConfirmation(false);
+                                    },
+                                },
+                                {
+                                    buttonType: 'danger',
+                                    content: 'Delete',
+                                    onClick: () => {
+                                        deleteItem();
+                                    },
+                                },
+                            ], children: `Are you sure you want to delete ${selectedItem?.path}?` })), copyToLocalConfirmation && (_jsx(Dialog, { title: "Confirm copy to local", onClose: () => {
+                                setCopyToLocalConfirmation(false);
+                            }, footerButtons: [
+                                {
+                                    buttonType: 'default',
+                                    content: 'Cancel',
+                                    onClick: () => {
+                                        setCopyToLocalConfirmation(false);
+                                    },
+                                },
+                                {
+                                    buttonType: 'danger',
+                                    content: 'Copy to local',
+                                    onClick: () => {
+                                        copyToLocal();
+                                    },
+                                },
+                            ], children: `Are you sure you want to copy to local ${selectedItem?.path}?` }))] })) : (_jsx(Blankslate, { children: _jsx(Blankslate.Heading, { children: "No contents" }) })) }))] }));
 }
 export default ContentsBrowser;

package/lib/components/storage/ContentsItems.js

@@ -3,18 +3,13 @@ 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)
+        fileType: docRegistry?.getFileTypeForModel(model),
     }));
     items = items.filter(model => !model.name.startsWith('.'));
     items.sort((a, b) => {
@@ -38,7 +33,8 @@ export function DirectoryItem(props) {
     const [isLoading, setIsLoading] = useState(false);
     const refresh = useCallback(() => {
         setIsLoading(true);
-        contents.get(item.path)
+        contents
+            .get(item.path)
             .then(model => {
             setIsLoading(false);
             setChildren(modelToView(model.content, documentRegistry));
@@ -52,7 +48,9 @@ export function DirectoryItem(props) {
             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 => {
+    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);
@@ -63,17 +61,16 @@ export function DirectoryItem(props) {
                     : (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);
+                    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 => {
+    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);

package/lib/components/storage/index.js

@@ -2,10 +2,5 @@
  * 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

@@ -1,4 +1,4 @@
-import { IStudent, IStudentItem } from "../../models";
+import { IStudent, IStudentItem } from '../../models';
 type Props = {
     student?: IStudent;
     studentItem?: IStudentItem;

package/lib/components/students/StudentItemStatus.js

@@ -3,14 +3,9 @@ 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.
  */
-/*
- * 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";
+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;
@@ -24,22 +19,44 @@ export const StudentItemStatus = (props) => {
     const nokColor = useMemo(() => theme?.colorSchemes.light.colors.severe.muted, []);
     if (student && studentItem) {
         switch (studentItem.itemType) {
-            case ('dataset'):
+            case 'dataset': {
                 const datasetColor = studentItem?.completed ? okColor : nokColor;
-                return _jsx(Box, { sx: { backgroundColor: datasetColor, width: '14px', height: '14px', borderRadius: 3 }, ml: 1 });
-            case ('lesson'):
+                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'):
+                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 }) }) }));
-                                }) })] }));
+                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, {});
         }

package/lib/components/students/index.js

@@ -2,9 +2,4 @@
  * 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

@@ -34,7 +34,7 @@ type SubNavLinkProps = {
 type SubMenuProps = {
     variant?: SubMenuVariants;
 } & React.HTMLAttributes<HTMLUListElement> & BaseProps<HTMLUListElement>;
-declare function _SubMenu({ children, className, variant, ...props }: SubMenuProps): import("react/jsx-runtime").JSX.Element;
+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.
@@ -65,12 +65,12 @@ export declare const SubNav: React.NamedExoticComponent<{
 } & BaseProps<HTMLElement> & {
     children?: ReactNode | undefined;
 }> & {
-    readonly type: ({ id, children, className, "data-testid": testId, fullWidth, hasShadow }: SubNavProps) => import("react/jsx-runtime").JSX.Element;
+    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;
+    SubMenu: typeof SubMenu;
     testIds: {
         root: string;
         readonly button: string;

package/lib/components/subnav/SubNav.js

@@ -3,18 +3,13 @@ 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 { 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';
+import { useKeyboardEscape, useOnClickOutside, useProvidedRefOrCreate, useContainsFocus, } from '../../hooks';
 /**
  * Design tokens
  */
@@ -74,7 +69,7 @@ function SubNavProvider({ children }) {
     }, []);
     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 _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);
@@ -130,12 +125,16 @@ const _SubNavRoot = memo(({ id, children, className, 'data-testid': testId, full
                 if (subMenu?.props?.variant === 'anchor') {
                     acc.links.push(React.cloneElement(child, {
                         children: [link],
-                        onClick: child.props['aria-current'] ? closeMenuCallback : child.props.onClick,
+                        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,
+                        onClick: child.props['aria-current']
+                            ? closeMenuCallback
+                            : child.props.onClick,
                     }));
                 }
             }
@@ -145,13 +144,16 @@ const _SubNavRoot = memo(({ id, children, className, 'data-testid': testId, full
         }
         return acc;
     }, { heading: undefined, links: [], action: undefined });
-    const activeLinklabel = typeof activeLink?.props.children === 'string' ? activeLink.props.children : activeLink?.props.children[0];
+    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 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 && (_jsxs("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 }));
@@ -175,14 +177,16 @@ const SubNavLinkWithSubmenu = forwardRef(({ children, href, 'aria-current': aria
          * 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 })] }));
+        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;
+            return child.type === SubMenu;
         }
     });
     useEffect(() => {
@@ -193,8 +197,12 @@ const SubNavLink = forwardRef((props, ref) => {
         if (!target)
             return;
         const topOfWindow = '0px 0px -100%';
-        const observerParams = { threshold: 0, root: null, rootMargin: topOfWindow };
-        const handleIntersectionUpdate = ([entry]) => {
+        const observerParams = {
+            threshold: 0,
+            root: null,
+            rootMargin: topOfWindow,
+        };
+        const handleIntersectionUpdate = ([entry,]) => {
             setIsInView(entry.isIntersecting);
         };
         const observer = new IntersectionObserver(handleIntersectionUpdate, observerParams);
@@ -204,15 +212,17 @@ const SubNavLink = forwardRef((props, ref) => {
     if (hasSubMenu) {
         const isAnchorVariantSubMenu = childrenArr.some(child => {
             if (isValidElement(child)) {
-                return child.type === _SubMenu && child.props.variant === 'anchor';
+                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 }) }) }));
+    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 }) {
+function SubMenu({ children, className, variant = 'dropdown', ...props }) {
     const context = React.useContext(SubNavContext);
     const navRef = useRef(null);
     const { isLarge } = useWindowSize();
@@ -265,6 +275,6 @@ export const SubNav = Object.assign(_SubNavRoot, {
     Heading: SubNavHeading,
     Link: SubNavLink,
     Action: _SubNavAction,
-    SubMenu: _SubMenu,
+    SubMenu: SubMenu,
     testIds,
 });