@datalayer/core 0.0.24 → 0.0.26

package/lib/theme/DatalayerTheme.js

@@ -5,58 +5,224 @@
 import { theme as primerTheme } from '@primer/react';
 import cloneDeep from 'lodash/cloneDeep.js';
 import merge from 'lodash/merge.js';
+/**
+ * Datalayer Accessible Color System
+ * Based on Datalayer's brand manual - WCAG AA/AAA compliant
+ */
+export const datalayerColors = {
+    // Core Neutrals
+    black: '#000000', // Primary text - AAA on white
+    gray: '#59595C', // Secondary text - AA on white
+    white: '#FFFFFF', // Background
+    // Greens (Brand & Accessibility)
+    greenBrand: '#16A085', // Brand accent, icons, dividers, headings
+    greenAccent: '#1ABC9C', // Icons, charts, highlights on dark surfaces
+    greenText: '#117A65', // Accessible green for text & buttons (AA+ on white)
+    greenTint: '#E9F7F1', // Soft background for success / callouts
+    greenBright: '#2ECC71', // Highlights and glow on dark backgrounds
+    greenHover: '#0E6655', // Primary button hover
+};
 /**
  * Datalayer Theme for Primer React.
+ *
+ * Uses accessible color palette from Datalayer's brand manual.
  */
 const datalayerThemeDefs = {
     colorSchemes: {
         light: {
             colors: {
+                // Canvas colors
+                canvas: {
+                    default: datalayerColors.white,
+                    // subtle: datalayerColors.greenTint,
+                },
+                // Foreground colors
+                fg: {
+                    default: datalayerColors.black,
+                    muted: datalayerColors.gray,
+                    onEmphasis: datalayerColors.white,
+                },
+                // Accent colors (brand green)
+                accent: {
+                    fg: datalayerColors.greenText,
+                    emphasis: datalayerColors.greenBrand,
+                    muted: datalayerColors.greenAccent,
+                    // subtle: datalayerColors.greenTint,
+                },
+                // Success colors (green)
+                success: {
+                    fg: datalayerColors.greenText,
+                    emphasis: datalayerColors.greenBrand,
+                    muted: datalayerColors.greenAccent,
+                    // subtle: datalayerColors.greenTint,
+                },
+                // Button colors
                 btn: {
-                    //          text: 'var(--jp-ui-font-color1, rgba(0, 0, 0, 0.87))',
-                    //          bg: 'var(--jp-layout-color1, white)',
-                    //          border: 'var(--jp-border-color1, #bdbdbd)',
-                    //          hoverBg: 'var(--jp-layout-color2, #eee)',
-                    //          hoverBorder: 'var(--jp-border-color1, #bdbdbd)',
-                    //          activeBg: 'var(--jp-layout-color3, #bdbdbd)',
-                    //          activeBorder: 'var(--jp-border-color1, #bdbdbd)',
-                    //          selectedBg: 'var(--jp-layout-color0, white)',
-                    //          counterBg: 'var(--jp-layout-color4, #757575)',
+                    text: datalayerColors.black,
+                    bg: datalayerColors.white,
+                    border: datalayerColors.gray,
+                    hoverBg: datalayerColors.greenTint,
+                    hoverBorder: datalayerColors.gray,
+                    activeBg: datalayerColors.greenTint,
+                    activeBorder: datalayerColors.gray,
+                    selectedBg: datalayerColors.white,
+                    counterBg: datalayerColors.gray,
                     primary: {
-                        //            text: 'var(--jp-ui-inverse-font-color1, rgba(255, 255, 255, 1))',
-                        bg: 'var(--dla-color-green-dark)',
-                        //            border: 'var(--dla-color-green-light)',
-                        hoverBg: 'var(--dla-color-grey)',
-                        //            hoverBorder: 'var(--dla-color-green-light)',
-                        selectedBg: 'var(--dla-color-black)',
-                        //            disabledText: 'var(--jp-ui-inverse-font-color2, rgba(255, 255, 255, 0.7))',
-                        //            disabledBg: 'var(--jp-brand-color3, #c8e6c9)',
-                        //            disabledBorder: 'var(--jp-border-color1, #bdbdbd)',
-                        //            icon: 'var(--jp-ui-inverse-font-color2, rgba(255, 255, 255, 0.7))',
-                        //            counterBg: 'var(--jp-inverse-layout-color3, #616161)',
+                        text: datalayerColors.white,
+                        bg: datalayerColors.greenText,
+                        border: datalayerColors.greenText,
+                        hoverBg: datalayerColors.greenHover,
+                        hoverBorder: datalayerColors.greenHover,
+                        selectedBg: datalayerColors.greenHover,
+                        disabledText: 'rgba(255, 255, 255, 0.7)',
+                        disabledBg: datalayerColors.gray,
+                        disabledBorder: datalayerColors.gray,
+                        icon: datalayerColors.white,
+                        counterBg: 'rgba(0, 0, 0, 0.2)',
+                    },
+                    outline: {
+                        text: datalayerColors.greenText,
+                        hoverText: datalayerColors.white,
+                        hoverBg: datalayerColors.greenText,
+                        hoverBorder: datalayerColors.greenText,
+                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+                        selectedText: datalayerColors.white,
+                        selectedBg: datalayerColors.greenHover,
+                        selectedBorder: datalayerColors.greenHover,
+                        disabledText: datalayerColors.gray,
+                        disabledBg: datalayerColors.greenTint,
+                        disabledCounterBg: 'rgba(0, 0, 0, 0.05)',
+                        counterBg: 'rgba(0, 0, 0, 0.05)',
+                        counterFg: datalayerColors.greenText,
+                        hoverCounterFg: datalayerColors.white,
+                        disabledCounterFg: datalayerColors.gray,
+                    },
+                    danger: {
+                        text: '#d32f2f',
+                        hoverText: datalayerColors.white,
+                        hoverBg: '#d32f2f',
+                        hoverBorder: '#d32f2f',
+                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+                        selectedText: datalayerColors.white,
+                        selectedBg: '#b71c1c',
+                        selectedBorder: '#b71c1c',
+                        disabledText: 'rgba(211, 47, 47, 0.5)',
+                        disabledBg: datalayerColors.greenTint,
+                        disabledCounterBg: 'rgba(211, 47, 47, 0.05)',
+                        counterBg: 'rgba(211, 47, 47, 0.1)',
+                        counterFg: '#d32f2f',
+                        hoverCounterFg: datalayerColors.white,
+                        disabledCounterFg: 'rgba(211, 47, 47, 0.5)',
+                        icon: '#d32f2f',
                     },
                 },
             },
             shadows: {},
         },
         dark: {
-            colors: {},
+            colors: {
+                // Canvas colors
+                canvas: {
+                    default: datalayerColors.black,
+                    subtle: '#0d1117',
+                },
+                // Foreground colors
+                fg: {
+                    default: datalayerColors.white,
+                    muted: '#8b949e',
+                    onEmphasis: datalayerColors.white,
+                },
+                // Accent colors (bright greens for dark mode)
+                accent: {
+                    fg: datalayerColors.greenAccent,
+                    emphasis: datalayerColors.greenBright,
+                    muted: datalayerColors.greenBrand,
+                    subtle: '#1f352d',
+                },
+                // Success colors
+                success: {
+                    fg: datalayerColors.greenAccent,
+                    emphasis: datalayerColors.greenBright,
+                    muted: datalayerColors.greenBrand,
+                    subtle: '#1f352d',
+                },
+                // Button colors for dark mode
+                btn: {
+                    text: '#c9d1d9',
+                    bg: '#21262d',
+                    border: 'rgba(240, 246, 252, 0.1)',
+                    hoverBg: '#30363d',
+                    hoverBorder: '#8b949e',
+                    activeBg: 'hsla(212, 12%, 18%, 1)',
+                    activeBorder: '#6e7681',
+                    selectedBg: '#161b22',
+                    counterBg: '#30363d',
+                    primary: {
+                        text: datalayerColors.white,
+                        bg: datalayerColors.greenAccent,
+                        border: 'rgba(240, 246, 252, 0.1)',
+                        hoverBg: datalayerColors.greenBright,
+                        hoverBorder: 'rgba(240, 246, 252, 0.1)',
+                        selectedBg: datalayerColors.greenBright,
+                        disabledText: 'rgba(255, 255, 255, 0.5)',
+                        disabledBg: 'rgba(22, 160, 133, 0.6)',
+                        disabledBorder: 'rgba(240, 246, 252, 0.1)',
+                        icon: datalayerColors.white,
+                        counterBg: 'rgba(0, 0, 0, 0.2)',
+                    },
+                    outline: {
+                        text: datalayerColors.greenAccent,
+                        hoverText: datalayerColors.white,
+                        hoverBg: datalayerColors.greenAccent,
+                        hoverBorder: datalayerColors.greenAccent,
+                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+                        selectedText: datalayerColors.white,
+                        selectedBg: datalayerColors.greenBright,
+                        selectedBorder: datalayerColors.greenBright,
+                        disabledText: 'rgba(26, 188, 156, 0.5)',
+                        disabledBg: 'rgba(26, 188, 156, 0.1)',
+                        disabledCounterBg: 'rgba(26, 188, 156, 0.05)',
+                        counterBg: 'rgba(26, 188, 156, 0.1)',
+                        counterFg: datalayerColors.greenAccent,
+                        hoverCounterFg: datalayerColors.white,
+                        disabledCounterFg: 'rgba(26, 188, 156, 0.5)',
+                    },
+                    danger: {
+                        text: '#f85149',
+                        hoverText: datalayerColors.white,
+                        hoverBg: '#da3633',
+                        hoverBorder: '#f85149',
+                        hoverCounterBg: 'rgba(255, 255, 255, 0.2)',
+                        selectedText: datalayerColors.white,
+                        selectedBg: '#b62324',
+                        selectedBorder: '#ff7b72',
+                        disabledText: 'rgba(248, 81, 73, 0.5)',
+                        disabledBg: 'rgba(248, 81, 73, 0.1)',
+                        disabledCounterBg: 'rgba(248, 81, 73, 0.05)',
+                        counterBg: 'rgba(248, 81, 73, 0.1)',
+                        counterFg: '#f85149',
+                        hoverCounterFg: datalayerColors.white,
+                        disabledCounterFg: 'rgba(248, 81, 73, 0.5)',
+                        icon: '#f85149',
+                    },
+                },
+            },
             shadows: {},
         },
     },
 };
 const { colorSchemes: primerSchemes, ...primerOthers } = cloneDeep(primerTheme);
-const { colorSchemes: jupyterSchemes, ...datalayerOthers } = datalayerThemeDefs;
-// Merge with the light theme to ensure all variables are defined (although the style may be ugly).
-const datalayerTheme = merge(primerOthers, datalayerOthers, {
+const { colorSchemes: datalayerSchemes, ...datalayerOthers } = datalayerThemeDefs;
+// Merge with the light theme to ensure all variables are defined.
+export const datalayerTheme = merge(primerOthers, datalayerOthers, {
     colorSchemes: { light: {}, dark: {} },
 });
 datalayerTheme.colorSchemes.light = {
-    colors: merge(primerSchemes.light.colors, jupyterSchemes.light.colors),
-    shadows: merge(primerSchemes.light.shadows, jupyterSchemes.light.shadows),
+    colors: merge(primerSchemes.light.colors, datalayerSchemes.light.colors),
+    shadows: merge(primerSchemes.light.shadows, datalayerSchemes.light.shadows),
 };
 datalayerTheme.colorSchemes.dark = {
-    colors: merge(primerSchemes.dark.colors, jupyterSchemes.dark.colors),
-    shadows: merge(primerSchemes.dark.shadows, jupyterSchemes.dark.shadows),
+    colors: merge(primerSchemes.dark.colors, datalayerSchemes.dark.colors),
+    shadows: merge(primerSchemes.dark.shadows, datalayerSchemes.dark.shadows),
 };
-export { datalayerTheme };
+export default datalayerTheme;

package/lib/theme/DatalayerThemeProvider.d.ts

@@ -1,9 +1,29 @@
 import { type CSSProperties } from 'react';
 import { ThemeProviderProps } from '@primer/react';
-export interface IDatalayerThemeProviderProps extends ThemeProviderProps {
+export interface IDatalayerThemeProviderProps extends Omit<ThemeProviderProps, 'theme' | 'colorMode'> {
     /**
-     * Base styles.
+     * Color mode to use.
+     * - `'light'` / `'dark'` — explicit override
+     * - `'auto'` — follow the operating system preference (prefers-color-scheme)
+     * - Primer's `'day'` / `'night'` are still accepted.
+     */
+    colorMode?: 'light' | 'dark' | 'auto' | 'day' | 'night';
+    /**
+     * Additional base styles merged on top of theme defaults.
      */
     baseStyles?: CSSProperties;
+    /**
+     * Optional Primer theme object. Defaults to the built-in datalayerTheme.
+     */
+    theme?: Record<string, any>;
+    /**
+     * Optional per-mode style overrides (base + button CSS vars).
+     * When provided, these replace the built-in datalayer styles entirely.
+     * The `baseStyles` prop is still merged on top.
+     */
+    themeStyles?: {
+        light: CSSProperties;
+        dark: CSSProperties;
+    };
 }
 export declare function DatalayerThemeProvider(props: React.PropsWithChildren<IDatalayerThemeProviderProps>): JSX.Element;

package/lib/theme/DatalayerThemeProvider.js

@@ -1,11 +1,54 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { BaseStyles, ThemeProvider } from '@primer/react';
+import { datalayerTheme, datalayerColors } from './DatalayerTheme';
+import { useSystemColorMode } from './useSystemColorMode';
+const baseStyleLight = {
+    backgroundColor: datalayerColors.white,
+    color: datalayerColors.black,
+    fontSize: 'var(--text-body-size-medium)',
+};
+const baseStyleDark = {
+    backgroundColor: datalayerColors.black,
+    color: datalayerColors.white,
+    fontSize: 'var(--text-body-size-medium)',
+};
+const primaryButtonVarsLight = {
+    '--button-primary-bgColor-rest': datalayerColors.greenText,
+    '--button-primary-bgColor-hover': datalayerColors.greenHover,
+    '--button-primary-bgColor-active': datalayerColors.greenHover,
+    '--button-primary-fgColor-rest': datalayerColors.white,
+    '--button-primary-borderColor-rest': datalayerColors.greenText,
+    '--button-primary-borderColor-hover': datalayerColors.greenHover,
+    '--color-btn-primary-bg': datalayerColors.greenText,
+    '--color-btn-primary-hover-bg': datalayerColors.greenHover,
+};
+const primaryButtonVarsDark = {
+    '--button-primary-bgColor-rest': datalayerColors.greenAccent,
+    '--button-primary-bgColor-hover': datalayerColors.greenBright,
+    '--button-primary-bgColor-active': datalayerColors.greenBright,
+    '--button-primary-fgColor-rest': datalayerColors.white,
+    '--button-primary-borderColor-rest': datalayerColors.greenAccent,
+    '--button-primary-borderColor-hover': datalayerColors.greenBright,
+    '--color-btn-primary-bg': datalayerColors.greenAccent,
+    '--color-btn-primary-hover-bg': datalayerColors.greenBright,
+};
 export function DatalayerThemeProvider(props) {
-    const { children, colorMode, baseStyles, ...rest } = props;
-    return (_jsx(ThemeProvider, { colorMode: colorMode, ...rest, children: _jsx(BaseStyles, { style: {
-                backgroundColor: 'var(--bgColor-default)',
-                color: 'var(--fgColor-default)',
-                fontSize: 'var(--text-body-size-medium)',
+    const { children, colorMode, baseStyles, theme, themeStyles, ...rest } = props;
+    // Resolve 'auto' → actual system preference ('light' or 'dark').
+    const systemMode = useSystemColorMode();
+    const resolvedColorMode = colorMode === 'auto' ? systemMode : (colorMode ?? 'light');
+    const isDark = resolvedColorMode === 'dark' || resolvedColorMode === 'night';
+    const resolvedTheme = theme ?? datalayerTheme;
+    const defaultStyles = isDark
+        ? { ...baseStyleDark, ...primaryButtonVarsDark }
+        : { ...baseStyleLight, ...primaryButtonVarsLight };
+    const resolvedStyles = themeStyles
+        ? isDark
+            ? themeStyles.dark
+            : themeStyles.light
+        : defaultStyles;
+    return (_jsx(ThemeProvider, { colorMode: resolvedColorMode, theme: resolvedTheme, ...rest, children: _jsx(BaseStyles, { style: {
+                ...resolvedStyles,
                 ...baseStyles,
             }, children: children }) }));
 }

package/lib/theme/index.d.ts

@@ -1,3 +1,4 @@
 export * from './DatalayerTheme';
 export * from './DatalayerThemeProvider';
 export * from './Palette';
+export * from './useSystemColorMode';

package/lib/theme/index.js

@@ -5,3 +5,4 @@
 export * from './DatalayerTheme';
 export * from './DatalayerThemeProvider';
 export * from './Palette';
+export * from './useSystemColorMode';

package/lib/theme/useSystemColorMode.d.ts

@@ -0,0 +1,9 @@
+type ResolvedColorMode = 'light' | 'dark';
+/**
+ * React hook that tracks the operating system's preferred color scheme.
+ *
+ * Listens to `prefers-color-scheme` media query changes and returns
+ * either `'light'` or `'dark'`.
+ */
+export declare function useSystemColorMode(): ResolvedColorMode;
+export default useSystemColorMode;

package/lib/theme/useSystemColorMode.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useState } from 'react';
+/**
+ * React hook that tracks the operating system's preferred color scheme.
+ *
+ * Listens to `prefers-color-scheme` media query changes and returns
+ * either `'light'` or `'dark'`.
+ */
+export function useSystemColorMode() {
+    const getMode = () => typeof window !== 'undefined' &&
+        window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? 'dark'
+        : 'light';
+    const [mode, setMode] = useState(getMode);
+    useEffect(() => {
+        const media = window.matchMedia('(prefers-color-scheme: dark)');
+        const listener = (e) => setMode(e.matches ? 'dark' : 'light');
+        media.addEventListener('change', listener);
+        return () => media.removeEventListener('change', listener);
+    }, []);
+    return mode;
+}
+export default useSystemColorMode;

package/lib/views/iam-tokens/IAMTokenNew.d.ts

@@ -1,2 +1,6 @@
-export declare const IAMTokenNew: () => import("react/jsx-runtime").JSX.Element;
+export type IAMTokenNewProps = {
+    /** Route to navigate when clicking "List my Tokens". Defaults to '/settings/iam/tokens'. */
+    tokensListRoute?: string;
+};
+export declare const IAMTokenNew: ({ tokensListRoute, }?: IAMTokenNewProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokenNew;

package/lib/views/iam-tokens/IAMTokenNew.js

@@ -10,7 +10,7 @@ import { CopyIcon } from '@primer/octicons-react';
 import { Calendar, defaultCalendarStrings } from '@fluentui/react';
 import { useCache, useNavigate, useToast } from '../../hooks';
 import { useRunStore } from '../../state';
-export const IAMTokenNew = () => {
+export const IAMTokenNew = ({ tokensListRoute = '/settings/iam/tokens', } = {}) => {
     const runStore = useRunStore();
     const { useCreateToken } = useCache();
     const createTokenMutation = useCreateToken();
@@ -108,7 +108,7 @@ export const IAMTokenNew = () => {
                                                 variant: 'success',
                                             });
                                         }
-                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate('/settings/iam/tokens', e), children: "List my Tokens" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New IAM Token" }) }) }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The token name is a short name that identifies in a unique way your token." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Expiration day" }), _jsx(Calendar, { showGoToToday: true, onSelectDate: expirationDateChange, value: formValues.expirationDate, strings: defaultCalendarStrings }), validationResult.expirationDate !== true ? (_jsx(FormControl.Validation, { variant: "error", children: "Pick an expiration date in the future." })) : (_jsxs(FormControl.Validation, { variant: "success", children: ["Expiration date:", ' ', formValues.expirationDate?.toLocaleDateString(), "."] }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name ||
+                                    } })] })] }), _jsx(Box, { mt: 3, children: _jsx(Button, { onClick: e => navigate(tokensListRoute, e), children: "List my Tokens" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New IAM Token" }) }) }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Token type" }), _jsx(Select, { name: "type", value: formValues.variant, onChange: valueVariantChange, children: _jsx(Select.Option, { value: "user_token", children: "User Token" }) }), _jsx(FormControl.Caption, { children: "Pick the most appropriate token type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: valueNameChange, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The token name is a short name that identifies in a unique way your token." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Expiration day" }), _jsx(Calendar, { showGoToToday: true, onSelectDate: expirationDateChange, value: formValues.expirationDate, strings: defaultCalendarStrings }), validationResult.expirationDate !== true ? (_jsx(FormControl.Validation, { variant: "error", children: "Pick an expiration date in the future." })) : (_jsxs(FormControl.Validation, { variant: "success", children: ["Expiration date:", ' ', formValues.expirationDate?.toLocaleDateString(), "."] }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: valueDescriptionChange }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.name ||
                                         !validationResult.description ||
                                         !validationResult.expirationDate, sx: { marginTop: 2 }, onClick: e => {
                                         e.preventDefault();

package/lib/views/iam-tokens/IAMTokens.d.ts

@@ -1,2 +1,8 @@
-export declare const IAMTokens: () => import("react/jsx-runtime").JSX.Element;
+export type IAMTokensProps = {
+    /** Route to navigate when clicking "New IAM token" button. Defaults to '/new/token'. */
+    newTokenRoute?: string;
+    /** Base route for the tokens list (used for edit navigation). Defaults to current relative path. */
+    tokensListRoute?: string;
+};
+export declare const IAMTokens: ({ newTokenRoute, tokensListRoute, }?: IAMTokensProps) => import("react/jsx-runtime").JSX.Element;
 export default IAMTokens;

package/lib/views/iam-tokens/IAMTokens.js

@@ -9,7 +9,7 @@ import { Blankslate, PageHeader, Table, DataTable, } from '@primer/react/experim
 import { Box } from '@datalayer/primer-addons';
 import { EditIcon } from '@datalayer/icons-react';
 import { useCache, useNavigate } from '../../hooks';
-const TokensTable = () => {
+const TokensTable = ({ tokensListRoute }) => {
     const { useTokens } = useCache();
     const getTokensQuery = useTokens();
     const navigate = useNavigate();
@@ -42,12 +42,14 @@ const TokensTable = () => {
                     {
                         header: '',
                         field: 'id',
-                        renderCell: token => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(`${token.id}`, e) })),
+                        renderCell: token => (_jsx(IconButton, { icon: EditIcon, "aria-label": "Edit", size: "small", variant: "invisible", onClick: e => navigate(tokensListRoute
+                                ? `${tokensListRoute}/${token.id}`
+                                : `${token.id}`, e) })),
                     },
                 ] })] }));
 };
-export const IAMTokens = () => {
+export const IAMTokens = ({ newTokenRoute = '/new/token', tokensListRoute, } = {}) => {
     const navigate = useNavigate();
-    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "IAM Tokens" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate('/new/token', e), children: "New IAM token" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, {}) }) })] }));
+    return (_jsxs(PageLayout, { containerWidth: "full", padding: "normal", style: { overflow: 'visible', minHeight: 'calc(100vh - 45px)' }, children: [_jsx(PageLayout.Header, { children: _jsxs(PageHeader, { children: [_jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "IAM Tokens" }) }), _jsx(PageHeader.Actions, { children: _jsx(Button, { size: "small", variant: "primary", onClick: e => navigate(newTokenRoute, e), children: "New IAM token" }) })] }) }), _jsx(PageLayout.Content, { children: _jsx(Box, { children: _jsx(TokensTable, { tokensListRoute: tokensListRoute }) }) })] }));
 };
 export default IAMTokens;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/core",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "type": "module",
   "workspaces": [
     ".",
@@ -103,7 +103,7 @@
   },
   "dependencies": {
     "@datalayer/icons-react": "^1.0.6",
-    "@datalayer/jupyter-lexical": "^1.0.8",
+    "@datalayer/jupyter-lexical": "^1.0.9",
     "@datalayer/jupyter-react": "^2.0.2",
     "@datalayer/primer-addons": "^1.0.4",
     "@datalayer/primer-rjsf": "^1.0.1",
@@ -125,7 +125,7 @@
     "@lumino/disposable": "^2.1.5",
     "@lumino/polling": "^2.1.5",
     "@lumino/signaling": "^2.1.5",
-    "@lumino/widgets": "^2.7.2",
+    "@lumino/widgets": "^2.7.3",
     "@primer/behaviors": "^1.8.4",
     "@primer/brand-primitives": "^0.51.0",
     "@primer/css": "^21.5.1",