@datalayer/primer-addons 1.0.21 → 1.0.23

package/lib/components/date-picker/DatePicker.d.ts

@@ -0,0 +1,81 @@
+import { type CalendarPickerProps } from "../calendar-picker/CalendarPicker";
+/** `YYYY-MM-DD`, the one format that means the same thing everywhere. */
+export declare function formatISODate(date: Date): string;
+/** `YYYY-MM-DD HH:mm`, the same date with the minute it holds. */
+export declare function formatISODateTime(date: Date): string;
+/** `HH:mm` of a date, which is what a `type="time"` field holds. */
+export declare function formatTime(date: Date): string;
+/**
+ * Reads `YYYY-MM-DD` as a local date.
+ *
+ * `new Date('2026-01-31')` is UTC midnight, which is the day before in the
+ * Americas; the parts are given to the constructor separately so the date
+ * means the same day in every zone.
+ */
+export declare function parseISODate(text: string): Date | null;
+/**
+ * Reads `YYYY-MM-DD HH:mm` — or the same with a `T`, or with seconds, or with
+ * no time at all — as a local date.
+ *
+ * Lenient on the way in and strict on the way out: somebody typing a date into
+ * a field has a shape in their fingers, and rejecting `2026-01-31T09:00`
+ * because the separator is a `T` teaches them nothing. What the field *writes*
+ * is always one shape.
+ */
+export declare function parseISODateTime(text: string): Date | null;
+export interface DatePickerProps extends Pick<CalendarPickerProps, "min" | "max" | "isDisabled" | "weekStartsOn" | "locale"> {
+    /** The chosen date, or nothing chosen. */
+    value?: Date | null;
+    /** Told when a date is picked or typed. `null` when the field is emptied. */
+    onChange?: (date: Date | null) => void;
+    /** What the empty field says. */
+    placeholder?: string;
+    /** The field's accessible name. */
+    "aria-label"?: string;
+    /** Nothing can be picked or typed. */
+    disabled?: boolean;
+    /** The field's width. Primer's `medium` by default. */
+    size?: "small" | "medium" | "large";
+    /**
+     * Marks the field as holding something invalid, or as settled. Primer's own
+     * two, spelled out rather than imported from a path inside the package that
+     * not every consumer's module resolution can see.
+     */
+    validationStatus?: "error" | "success";
+    /**
+     * How a chosen date is written into the field. ISO `YYYY-MM-DD` by
+     * default, which is also the only shape the field parses back.
+     */
+    format?: (date: Date) => string;
+    /** An id for the field, for a label that names it from outside. */
+    id?: string;
+    /**
+     * Whether the field holds a time as well as a day.
+     *
+     * With it, the field reads and writes `YYYY-MM-DD HH:mm`, and the overlay
+     * carries a time beneath the calendar. Without it — the default — nothing
+     * about the field changes, because most dates are days.
+     */
+    withTime?: boolean;
+    /**
+     * Minutes between the options the minute column offers. Default: five.
+     *
+     * A minute the step does not land on — one read back from a stored value —
+     * is still offered, so choosing an hour never quietly moves it.
+     */
+    timeStep?: number;
+    /**
+     * The time a day picked from the calendar takes when the field held nothing
+     * yet. `"00:00"` by default — a window that starts "on the 3rd" starts at
+     * the beginning of the 3rd.
+     */
+    defaultTime?: string;
+}
+/**
+ * A date field with a calendar behind it.
+ *
+ * Controlled: `value` is the caller's, and every pick and every parsed entry
+ * arrives through `onChange`.
+ */
+export declare function DatePicker({ value, onChange, placeholder, "aria-label": ariaLabel, disabled, size, validationStatus, format, id, min, max, isDisabled, weekStartsOn, locale, withTime, timeStep, defaultTime, }: DatePickerProps): import("react").JSX.Element;
+export default DatePicker;

package/lib/components/date-picker/DatePicker.js

@@ -0,0 +1,204 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { AnchoredOverlay, Box, Button, TextInput } from "@primer/react";
+import { CalendarIcon } from "@primer/octicons-react";
+import { CalendarPicker } from "../calendar-picker/CalendarPicker";
+import { TimeColumns } from "./TimeColumns";
+/** `YYYY-MM-DD`, the one format that means the same thing everywhere. */
+export function formatISODate(date) {
+    const month = `${date.getMonth() + 1}`.padStart(2, "0");
+    const day = `${date.getDate()}`.padStart(2, "0");
+    return `${date.getFullYear()}-${month}-${day}`;
+}
+/** `YYYY-MM-DD HH:mm`, the same date with the minute it holds. */
+export function formatISODateTime(date) {
+    const hours = `${date.getHours()}`.padStart(2, "0");
+    const minutes = `${date.getMinutes()}`.padStart(2, "0");
+    return `${formatISODate(date)} ${hours}:${minutes}`;
+}
+/** `HH:mm` of a date, which is what a `type="time"` field holds. */
+export function formatTime(date) {
+    const hours = `${date.getHours()}`.padStart(2, "0");
+    const minutes = `${date.getMinutes()}`.padStart(2, "0");
+    return `${hours}:${minutes}`;
+}
+/**
+ * Reads `YYYY-MM-DD` as a local date.
+ *
+ * `new Date('2026-01-31')` is UTC midnight, which is the day before in the
+ * Americas; the parts are given to the constructor separately so the date
+ * means the same day in every zone.
+ */
+export function parseISODate(text) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(text.trim());
+    if (!match) {
+        return null;
+    }
+    const [, year, month, day] = match;
+    const date = new Date(Number(year), Number(month) - 1, Number(day));
+    return isExactly(date, Number(year), Number(month), Number(day)) ? date : null;
+}
+/**
+ * Whether `date` holds exactly the fields it was built from.
+ *
+ * The `Date` constructor rolls an out-of-range field into the next one —
+ * `2026-02-31` becomes the 3rd of March, `24:00` the next day — instead of
+ * failing, so a typo would be committed as some other moment. A field that
+ * does not come back as written was not a real one.
+ */
+function isExactly(date, year, month, day, hours = 0, minutes = 0, seconds = 0) {
+    return (!Number.isNaN(date.getTime()) &&
+        date.getFullYear() === year &&
+        date.getMonth() === month - 1 &&
+        date.getDate() === day &&
+        date.getHours() === hours &&
+        date.getMinutes() === minutes &&
+        date.getSeconds() === seconds);
+}
+/**
+ * Reads `YYYY-MM-DD HH:mm` — or the same with a `T`, or with seconds, or with
+ * no time at all — as a local date.
+ *
+ * Lenient on the way in and strict on the way out: somebody typing a date into
+ * a field has a shape in their fingers, and rejecting `2026-01-31T09:00`
+ * because the separator is a `T` teaches them nothing. What the field *writes*
+ * is always one shape.
+ */
+export function parseISODateTime(text) {
+    const match = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{1,2}):(\d{2})(?::(\d{2}))?)?$/.exec(text.trim());
+    if (!match) {
+        return null;
+    }
+    const [, year, month, day, hours, minutes, seconds] = match;
+    const date = new Date(Number(year), Number(month) - 1, Number(day), Number(hours ?? 0), Number(minutes ?? 0), Number(seconds ?? 0));
+    return isExactly(date, Number(year), Number(month), Number(day), Number(hours ?? 0), Number(minutes ?? 0), Number(seconds ?? 0))
+        ? date
+        : null;
+}
+/**
+ * A date field with a calendar behind it.
+ *
+ * Controlled: `value` is the caller's, and every pick and every parsed entry
+ * arrives through `onChange`.
+ */
+export function DatePicker({ value = null, onChange, placeholder, "aria-label": ariaLabel = "Date", disabled = false, size = "medium", validationStatus, format, id, min, max, isDisabled, weekStartsOn, locale, withTime = false, timeStep = 5, defaultTime = "00:00", }) {
+    // The two shapes, chosen once: a caller that passed a `format` keeps it,
+    // and a caller that asked for a time gets the one that carries a time.
+    const writeDate = format ?? (withTime ? formatISODateTime : formatISODate);
+    const readDate = withTime ? parseISODateTime : parseISODate;
+    const emptyText = placeholder ?? (withTime ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD");
+    const [open, setOpen] = useState(false);
+    const [text, setText] = useState(() => (value ? writeDate(value) : ""));
+    const anchorRef = useRef(null);
+    // The field follows the value, except while it is being typed into: a
+    // controlled rewrite mid-word moves the caret to the end.
+    const typing = useRef(false);
+    useEffect(() => {
+        if (!typing.current) {
+            setText(value ? writeDate(value) : "");
+        }
+    }, [value, writeDate]);
+    const commit = (next) => {
+        typing.current = false;
+        const trimmed = next.trim();
+        if (trimmed === "") {
+            onChange?.(null);
+            return;
+        }
+        const parsed = readDate(trimmed);
+        if (parsed) {
+            onChange?.(parsed);
+            setText(writeDate(parsed));
+        }
+        else {
+            // Unreadable: put back what is actually held, rather than keeping a
+            // date on screen that the caller never received.
+            setText(value ? writeDate(value) : "");
+        }
+    };
+    /** The day picked, wearing the time the field already held. */
+    const withHeldTime = (day) => {
+        const [hours, minutes] = (value ? formatTime(value) : defaultTime)
+            .split(":")
+            .map(Number);
+        const next = new Date(day);
+        next.setHours(hours || 0, minutes || 0, 0, 0);
+        return next;
+    };
+    /** The time the field holds right now, or the one a new pick starts from. */
+    const held = (() => {
+        const [hours, minutes] = (value ? formatTime(value) : defaultTime)
+            .split(":")
+            .map(Number);
+        return { hour: hours || 0, minute: minutes || 0 };
+    })();
+    /** The day the field holds, at the time just chosen. */
+    const atTime = (hour, minute) => {
+        const next = new Date(value ?? new Date());
+        next.setHours(hour, minute, 0, 0);
+        return next;
+    };
+    const calendar = useMemo(() => (_jsxs(Box, { sx: { p: 3 }, children: [_jsx(CalendarPicker, { value: value, defaultMonth: value ?? undefined, onChange: (date) => {
+                    // A day picked while a time is held keeps that time: somebody
+                    // moving a window from the 3rd to the 4th did not mean to move
+                    // it to midnight.
+                    const next = withTime ? withHeldTime(date) : date;
+                    onChange?.(next);
+                    setText(writeDate(next));
+                    if (!withTime) {
+                        setOpen(false);
+                    }
+                }, min: min, max: max, isDisabled: isDisabled, weekStartsOn: weekStartsOn, locale: locale, "aria-label": `${ariaLabel}, choose a day` }), withTime && (_jsxs(Box, { sx: {
+                    mt: 3,
+                    pt: 3,
+                    borderTop: "1px solid",
+                    borderColor: "border.default",
+                }, children: [_jsx(TimeColumns, { hour: held.hour, minute: held.minute, step: timeStep, disabled: disabled, labelPrefix: ariaLabel, onChange: (hour, minute) => {
+                            const next = atTime(hour, minute);
+                            onChange?.(next);
+                            setText(writeDate(next));
+                        } }), _jsx(Box, { sx: {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-end",
+                            gap: 2,
+                            mt: 2,
+                        }, children: _jsx(Button, { size: "small", variant: "primary", onClick: () => setOpen(false), children: "Done" }) })] }))] })), 
+    // `withHeldTime`, `held` and `atTime` all close over `value` and
+    // `defaultTime`, both of which are named here.
+    [
+        ariaLabel,
+        defaultTime,
+        disabled,
+        isDisabled,
+        locale,
+        max,
+        min,
+        onChange,
+        size,
+        timeStep,
+        value,
+        weekStartsOn,
+        withTime,
+        writeDate,
+    ]);
+    return (_jsxs(Box, { ref: anchorRef, sx: { display: "inline-block" }, children: [_jsx(AnchoredOverlay, { open: open, onOpen: () => !disabled && setOpen(true), onClose: () => setOpen(false), 
+                // The field's own box is the anchor; `useRef` types its current as
+                // nullable, which is not how the overlay declares what it takes.
+                anchorRef: anchorRef, 
+                // The field is the anchor; the button inside it does the opening.
+                renderAnchor: null, overlayProps: { role: "dialog", "aria-label": `${ariaLabel} calendar` }, children: calendar }), _jsx(TextInput, { id: id, "aria-label": ariaLabel, "aria-haspopup": "dialog", "aria-expanded": open, value: text, placeholder: emptyText, disabled: disabled, size: size, validationStatus: validationStatus, onChange: (event) => {
+                    typing.current = true;
+                    setText(event.target.value);
+                }, onBlur: (event) => commit(event.target.value), onKeyDown: (event) => {
+                    if (event.key === "Enter") {
+                        commit(event.target.value);
+                        setOpen(false);
+                    }
+                    if (event.key === "ArrowDown" && !open) {
+                        event.preventDefault();
+                        setOpen(true);
+                    }
+                }, trailingAction: _jsx(TextInput.Action, { onClick: () => !disabled && setOpen((was) => !was), icon: CalendarIcon, "aria-label": open ? "Close the calendar" : "Open the calendar", disabled: disabled }) })] }));
+}
+export default DatePicker;

package/lib/components/date-picker/TimeColumns.d.ts

@@ -0,0 +1,23 @@
+/** `7` → `07`. Two digits, always, because a column of ragged numbers reads badly. */
+export declare const pad: (value: number) => string;
+export interface TimeColumnsProps {
+    /** The hour shown as chosen, 0–23. */
+    hour: number;
+    /** The minute shown as chosen, 0–59. */
+    minute: number;
+    /** Minutes between the options offered. 1 lists all sixty. */
+    step?: number;
+    /** Told when either column is used, with the whole time. */
+    onChange: (hour: number, minute: number) => void;
+    disabled?: boolean;
+    /** Names the columns for a screen reader: "Start date, hour". Not drawn —
+     *  on screen the two columns are headed "Hour" and "Minute", and a whole
+     *  field label repeated over them reads as noise. */
+    labelPrefix?: string;
+}
+/**
+ * The two columns, side by side, with the time they currently mean between
+ * them.
+ */
+export declare function TimeColumns({ hour, minute, step, onChange, disabled, labelPrefix, }: TimeColumnsProps): import("react").JSX.Element;
+export default TimeColumns;

package/lib/components/date-picker/TimeColumns.js

@@ -0,0 +1,88 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+/**
+ * Hours and minutes, as two columns the reader scrolls.
+ *
+ * The browser's own `type="time"` control draws its dropdown itself: unstyled,
+ * unaware of the page's theme, and — because it is the platform's own popup —
+ * *over* whatever is already open. Beside a calendar that means the time
+ * dropdown covers the days, which is the one thing somebody choosing a moment
+ * needs to keep seeing.
+ *
+ * So the columns are drawn here, in Primer, inside the overlay that already
+ * exists. Not a second overlay: a menu anchored inside an `AnchoredOverlay`
+ * portals out of it, and the outer overlay's own click-away closes everything
+ * the moment the pointer lands in the inner one.
+ *
+ * @module components/date-picker/TimeColumns
+ */
+import { useEffect, useRef } from "react";
+import { ActionList, Box, Text } from "@primer/react";
+/** `7` → `07`. Two digits, always, because a column of ragged numbers reads badly. */
+export const pad = (value) => `${value}`.padStart(2, "0");
+const HOURS = Array.from({ length: 24 }, (_, index) => index);
+function Column({ label, ariaLabel, values, selected, onPick, disabled, }) {
+    const scroller = useRef(null);
+    const chosen = useRef(null);
+    // The chosen value, in view, the moment the column is drawn. A column that
+    // opens at midnight when it holds 17:00 makes the reader scroll to find out
+    // what it is already set to.
+    useEffect(() => {
+        const item = chosen.current;
+        if (!item) {
+            return;
+        }
+        // After layout, and against the scroller rather than whatever the list
+        // happens to be positioned against.
+        const frame = requestAnimationFrame(() => {
+            item.scrollIntoView({ block: "center", inline: "nearest" });
+        });
+        return () => cancelAnimationFrame(frame);
+    }, [selected]);
+    return (_jsxs(Box, { sx: { flex: 1, minWidth: 0 }, children: [_jsx(Text, { sx: {
+                    display: "block",
+                    fontSize: 0,
+                    color: "fg.muted",
+                    mb: 1,
+                    textAlign: "center",
+                }, children: label }), _jsx(Box, { ref: scroller, sx: {
+                    height: 132,
+                    overflowY: "auto",
+                    border: "1px solid",
+                    borderColor: "border.default",
+                    borderRadius: 2,
+                    bg: "canvas.default",
+                    // The scrollbar is the only hint that there is more below, so it
+                    // stays: a hidden one turns the column into a list of six hours.
+                    scrollbarWidth: "thin",
+                }, children: _jsx(ActionList, { selectionVariant: "single", "aria-label": ariaLabel, sx: { p: 1 }, children: values.map((value) => (_jsx(ActionList.Item, { ref: value === selected ? chosen : undefined, selected: value === selected, disabled: disabled, onSelect: () => onPick(value), sx: { justifyContent: "center", fontVariantNumeric: "tabular-nums" }, children: pad(value) }, value))) }) })] }));
+}
+/**
+ * The two columns, side by side, with the time they currently mean between
+ * them.
+ */
+export function TimeColumns({ hour, minute, step = 5, onChange, disabled, labelPrefix, }) {
+    const every = Math.min(60, Math.max(1, Math.floor(step) || 1));
+    const minutes = Array.from({ length: Math.ceil(60 / every) }, (_, index) => index * every);
+    // A minute the step does not land on — 17:07 read back from a stored value —
+    // still has to be selectable, or choosing an hour would silently move it.
+    const shown = minutes.includes(minute)
+        ? minutes
+        : [...minutes, minute].sort((left, right) => left - right);
+    return (_jsxs(Box, { children: [_jsxs(Box, { sx: {
+                    display: "flex",
+                    alignItems: "baseline",
+                    justifyContent: "space-between",
+                    gap: 2,
+                    mb: 1,
+                }, children: [_jsx(Text, { sx: { fontSize: 0, color: "fg.muted" }, children: "Time" }), _jsxs(Text, { sx: {
+                            fontFamily: "mono",
+                            fontSize: 1,
+                            fontWeight: "bold",
+                            fontVariantNumeric: "tabular-nums",
+                        }, children: [pad(hour), ":", pad(minute)] })] }), _jsxs(Box, { sx: { display: "flex", gap: 2 }, children: [_jsx(Column, { label: "Hour", ariaLabel: labelPrefix ? `${labelPrefix}, hour` : "Hour", values: HOURS, selected: hour, disabled: disabled, onPick: (next) => onChange(next, minute) }), _jsx(Column, { label: "Minute", ariaLabel: labelPrefix ? `${labelPrefix}, minute` : "Minute", values: shown, selected: minute, disabled: disabled, onPick: (next) => onChange(hour, next) })] })] }));
+}
+export default TimeColumns;

package/lib/components/date-picker/index.d.ts

@@ -0,0 +1 @@
+export * from "./DatePicker";

package/lib/components/date-picker/index.js

@@ -0,0 +1,5 @@
+/*
+ * Copyright (c) 2023-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from "./DatePicker";

package/lib/components/icons/CircleIcon.d.ts

@@ -2,5 +2,5 @@ export type CircleIconProps = {
     color?: string;
     variant?: 'fg' | 'default' | 'muted' | 'onEmphasis' | 'subtle';
 };
-export declare const CircleIcon: ({ color, variant, }: CircleIconProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CircleIcon: ({ color, variant, }: CircleIconProps) => import("react").JSX.Element;
 export default CircleIcon;

package/lib/components/icons/CircleIcon.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useTheme } from '@primer/react';
 import { CircleCurrentColorIcon } from '@datalayer/icons-react';
 export const CircleIcon = ({ color = 'white', variant = 'fg', }) => {

package/lib/components/icons/CircleIcon.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { CircleIconProps } from '../..';
 declare const meta: {
     title: string;
-    component: ({ color, variant, }: CircleIconProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ color, variant, }: CircleIconProps) => import("react").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/lib/components/index.d.ts

@@ -1,13 +1,18 @@
 export * from "./appearance/AppearanceControls";
 export * from "./appearance/AppearanceControlsWithStore";
 export * from "./appearance/AppearanceMenu";
+export * from "./appearance/AppearanceMenuWithStore";
+export * from "./appearance/CollaboratorPalette";
 export * from "./appearance/ColorModeCircle";
 export * from "./appearance/ThemePreviewCard";
 export * from "./appearance/ThemeCircle";
 export * from "./box/Box";
+export * from "./calendar-picker";
 export * from "./card/Card";
 export * from "./color";
+export * from "./color-picker";
 export * from "./content-loader/ContentLoader";
+export * from "./date-picker";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./side-overlay/SideOverlay";

package/lib/components/index.js

@@ -1,13 +1,22 @@
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 export * from "./appearance/AppearanceControls";
 export * from "./appearance/AppearanceControlsWithStore";
 export * from "./appearance/AppearanceMenu";
+export * from "./appearance/AppearanceMenuWithStore";
+export * from "./appearance/CollaboratorPalette";
 export * from "./appearance/ColorModeCircle";
 export * from "./appearance/ThemePreviewCard";
 export * from "./appearance/ThemeCircle";
 export * from "./box/Box";
+export * from "./calendar-picker";
 export * from "./card/Card";
 export * from "./color";
+export * from "./color-picker";
 export * from "./content-loader/ContentLoader";
+export * from "./date-picker";
 export * from "./closeable-flash/CloseableFlash";
 export * from "./icons/CircleIcon";
 export * from "./side-overlay/SideOverlay";

package/lib/components/logo/DatalayerText.d.ts

@@ -18,5 +18,5 @@ export interface DatalayerTextProps extends Omit<SVGProps<SVGGElement>, 'ref'> {
  *   - "DATA"  = secondaryColor (gray in the original)
  *   - "LAYER" = primaryColor   (green accent in the original)
  */
-export declare const DatalayerText: ({ primaryColor, secondaryColor, sizeMultiplier, x, y, ...groupProps }: DatalayerTextProps) => JSX.Element;
+export declare const DatalayerText: ({ primaryColor, secondaryColor, sizeMultiplier, x, y, ...groupProps }: DatalayerTextProps) => React.JSX.Element;
 export default DatalayerText;

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

@@ -1,4 +1,3 @@
-export * from "./DI";
 export * from "./DatalayerLogo";
 export * from "./DatalayerLogoText";
 export * from "./DatalayerText";

package/lib/components/logo/index.js

@@ -1,4 +1,7 @@
-export * from "./DI";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 export * from "./DatalayerLogo";
 export * from "./DatalayerLogoText";
 export * from "./DatalayerText";

package/lib/components/side-overlay/SideOverlay.d.ts

@@ -1,13 +1,13 @@
 export interface SideOverlayProps {
-    closeButtonRef?: React.RefObject<HTMLButtonElement>;
-    content: JSX.Element;
+    closeButtonRef?: React.RefObject<HTMLButtonElement | null>;
+    content: React.JSX.Element;
     direction?: 'left' | 'right';
-    headingRef?: React.RefObject<HTMLHeadingElement>;
+    headingRef?: React.RefObject<HTMLElement | null>;
     isOpen?: boolean;
-    openButtonRef?: React.RefObject<HTMLButtonElement>;
+    openButtonRef?: React.RefObject<HTMLButtonElement | null>;
     setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
     width?: number | string;
     zIndex?: number;
 }
-export declare const SideOverlay: ({ width, direction, zIndex, ...rest }: SideOverlayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SideOverlay: ({ width, direction, zIndex, ...rest }: SideOverlayProps) => import("react").JSX.Element;
 export default SideOverlay;

package/lib/components/side-overlay/SideOverlay.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useEffect, useState } from 'react';
 import { IconButton, Overlay as PrimerOverlay, ThemeProvider, useTheme } from "@primer/react";
 import { XIcon } from "@primer/octicons-react";

package/lib/components/side-overlay/SideOverlay.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { SideOverlayProps } from '../..';
 declare const meta: {
     title: string;
-    component: ({ width, direction, zIndex, ...rest }: SideOverlayProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ width, direction, zIndex, ...rest }: SideOverlayProps) => import("react").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/lib/components/side-overlay/SideOverlay.stories.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useState, useRef } from "react";
 import { Heading, Text, Box, Button } from "@primer/react";
 import { SideOverlay } from '../..';

package/lib/components/slider/Slider.d.ts

@@ -19,5 +19,5 @@ type ConditionalProps = {
     step?: number;
 };
 export type SliderProps = CommonProps & ConditionalProps;
-export declare const Slider: ({ name, id, min, max, value, label, step, markers, displayValue, disabled, orientation, width, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Slider: ({ name, id, min, max, value, label, step, markers, displayValue, disabled, orientation, width, onChange, }: SliderProps) => import("react").JSX.Element;
 export default Slider;

package/lib/components/slider/Slider.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useEffect, useState } from "react";
 import { useTheme, Box, CounterLabel, FormControl } from "@primer/react";
 export const Slider = ({ name = "slider", id = "slider", min = 0, max = 10, value = 5, label = "label", step = 1, markers = false, displayValue = true, disabled = false, orientation = "horizontal", width = "200px", onChange, }) => {

package/lib/components/slider/Slider.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { SliderProps } from '../../index';
 declare const meta: {
     title: string;
-    component: ({ name, id, min, max, value, label, step, markers, displayValue, disabled, orientation, width, onChange, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ name, id, min, max, value, label, step, markers, displayValue, disabled, orientation, width, onChange, }: SliderProps) => import("react").JSX.Element;
     tags: string[];
     parameters: {
         layout: string;

package/lib/components/slider/Slider.stories.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useState } from 'react';
 import { Box, CounterLabel } from "@primer/react";
 import { Slider } from '../../index';

package/lib/components/sliding-panel/SlidingPanel.d.ts

@@ -15,5 +15,5 @@ export interface SlidingPanelProps {
     panelSize?: number | string;
     fullWidth?: boolean;
 }
-export declare const SlidingPanel: ({ isOpen, message, details, onDismiss, position, variant, durationMs, transitionMs, zIndex, offset, panelSize, fullWidth, }: SlidingPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const SlidingPanel: ({ isOpen, message, details, onDismiss, position, variant, durationMs, transitionMs, zIndex, offset, panelSize, fullWidth, }: SlidingPanelProps) => import("react").JSX.Element | null;
 export default SlidingPanel;

package/lib/components/sliding-panel/SlidingPanel.js

@@ -1,4 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2021-2026 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
 import { useEffect, useMemo, useState } from 'react';
 import { IconButton } from '@primer/react';
 import { XIcon } from '@primer/octicons-react';
@@ -169,7 +173,19 @@ export const SlidingPanel = ({ isOpen, message, details, onDismiss, position = '
             display: 'flex',
             pointerEvents: 'none',
             ...anchorStyles,
-        }, children: _jsxs(Box, { role: variant === 'error' || variant === 'danger' ? 'alert' : 'status', "aria-live": variant === 'error' || variant === 'danger' ? 'assertive' : 'polite', onClick: onDismiss, sx: {
+        }, children: _jsxs(Box, { role: variant === 'error' || variant === 'danger' ? 'alert' : 'status', "aria-live": variant === 'error' || variant === 'danger' ? 'assertive' : 'polite', onClick: onDismiss
+                ? event => {
+                    // A tap on the panel dismisses it — but not a click on a
+                    // link, button or field in its content, nor the end of a
+                    // text selection: those are someone using what it says.
+                    const target = event.target;
+                    if (target.closest('a, button, input, select, textarea, label, [role="button"], [contenteditable="true"]') ||
+                        (window.getSelection()?.toString() ?? '') !== '') {
+                        return;
+                    }
+                    onDismiss();
+                }
+                : undefined, sx: {
                 pointerEvents: 'auto',
                 position: 'relative',
                 display: 'flex',

package/lib/components/sliding-panel/SlidingPanel.stories.d.ts

@@ -2,7 +2,7 @@ import type { StoryObj } from '@storybook/react';
 import { type SlidingPanelProps } from './SlidingPanel';
 declare const meta: {
     title: string;
-    component: ({ isOpen, message, details, onDismiss, position, variant, durationMs, transitionMs, zIndex, offset, panelSize, fullWidth, }: SlidingPanelProps) => import("react/jsx-runtime").JSX.Element | null;
+    component: ({ isOpen, message, details, onDismiss, position, variant, durationMs, transitionMs, zIndex, offset, panelSize, fullWidth, }: SlidingPanelProps) => import("react").JSX.Element | null;
     tags: string[];
     parameters: {
         layout: string;