rift-ds 1.18.0 → 1.19.0

package/components/TableToolbar/TableToolbar.js

@@ -1,9 +1,11 @@
 "use client";
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { useState, useEffect, useRef, useLayoutEffect, useId, useSyncExternalStore } from "react";
+import React, { useState, useEffect, useRef, useLayoutEffect, useId, useSyncExternalStore, useCallback } from "react";
 import { createPortal } from "react-dom";
+import { AiButton } from "../AiButton/AiButton.js";
 import { Button } from "../Button/Button.js";
 import { Chip } from "../Chip/Chip.js";
+import { Composer } from "../Composer/Composer.js";
 import { Dropdown } from "../Dropdown/Dropdown.js";
 import { CircularButton } from "../CircularButton/CircularButton.js";
 import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
@@ -13,14 +15,17 @@ import { Popover } from "../Popover/Popover.js";
 import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
 import { SplitButton } from "../SplitButton/SplitButton.js";
 import { Tabs } from "../Tabs/Tabs.js";
+import { useOptionalToast, ToastProvider, useToast } from "../Toast/Toast.js";
 import { ToggleSwitch } from "../ToggleSwitch/ToggleSwitch.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
 import { FilterEditor } from "../DataTable/FilterEditor.js";
 import { startDrag } from "../DataTable/dragGesture.js";
 import { parseDate, absoluteDate } from "../DataTable/columnTypes.js";
 import "../../behaviors/visually-hidden.css";
 import { DEFAULT_FILTER_LABELS, isComplete, VALUELESS, OPERATORS, valueText, newFilterId } from "../DataTable/filterModel.js";
 import { useTableContext } from "../DataTable/tableContext.js";
-import { BREAKPOINT_PHONE_PX, mediaBelow } from "../../tokens/breakpoints.js";
+import { MOTION_ACTION_DISMISS_MS } from "../../tokens/motion.js";
+import { BREAKPOINT_PHONE_PX, BREAKPOINT_SHEET_PX, mediaBelow } from "../../tokens/breakpoints.js";
 import "./TableToolbar.css";
 import { mirrorClass } from "../../behaviors/direction.js";
 const DEFAULT_LABELS = {
@@ -67,6 +72,14 @@ const DEFAULT_LABELS = {
   movedSort: (column, rank, count) => `${column}, sort ${rank} of ${count}`,
   selected: (count) => `${count} selected`,
   allSelected: (count) => `All ${count} selected`,
+  command: "Describe",
+  commandClose: "Close",
+  commandPlaceholder: "Tell the table what to show",
+  commandSend: "Apply",
+  commandApplied: "The table has been updated.",
+  commandFailed: "That did not work. The table has not changed.",
+  commandUndo: "Undo",
+  commandDismiss: "Dismiss",
   moreBulkActions: "More actions",
   selectAll: (count) => `Select all ${count}`,
   clearSelection: "Clear selection",
@@ -127,6 +140,134 @@ function ToolbarPanel({
     )
   ] });
 }
+function CommandRow({ command, table, labels, size, open, onClose, state, onStateChange }) {
+  const { toast, dismiss } = useToast();
+  const [text, setText] = useState("");
+  const row = useRef(null);
+  const lastToast = useRef(null);
+  const controller = useRef(null);
+  const latestTable = useRef(table);
+  useEffect(() => {
+    latestTable.current = table;
+  }, [table]);
+  useEffect(() => {
+    if (open) row.current?.querySelector("textarea")?.focus();
+  }, [open]);
+  useEffect(() => () => controller.current?.abort(), []);
+  const report = useCallback(
+    (data) => {
+      lastToast.current = toast(data);
+    },
+    [toast]
+  );
+  const run = useCallback(
+    async (typed) => {
+      const trimmed = typed.trim();
+      if (!trimmed || state === "working") return;
+      const before = JSON.parse(JSON.stringify(table.view));
+      onClose();
+      setText("");
+      onStateChange("working");
+      if (lastToast.current) dismiss(lastToast.current);
+      lastToast.current = null;
+      const running = new AbortController();
+      controller.current = running;
+      try {
+        const result = await command.onSubmit({
+          text: trimmed,
+          view: before,
+          columns: table.columns,
+          signal: running.signal
+        });
+        if (running.signal.aborted) return;
+        const changed = Boolean(result.view) && JSON.stringify(result.view) !== JSON.stringify(before);
+        if (changed) {
+          latestTable.current.applyView(result.view);
+          const id = `table-command-${Date.now()}`;
+          report({
+            id,
+            variant: "positive",
+            description: result.message || labels.commandApplied,
+            duration: MOTION_ACTION_DISMISS_MS,
+            action: /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "secondary",
+                tone: "neutral",
+                size: "compact",
+                iconLeft: "refresh",
+                label: labels.commandUndo,
+                onClick: () => {
+                  latestTable.current.applyView(before);
+                  dismiss(id);
+                }
+              }
+            )
+          });
+        } else if (result.message) {
+          report({ variant: "info", description: result.message });
+        }
+        onStateChange("done");
+      } catch (error) {
+        if (running.signal.aborted) return;
+        setText(trimmed);
+        report({
+          variant: "error",
+          description: error instanceof Error && error.message ? error.message : labels.commandFailed,
+          duration: 0
+        });
+        onStateChange("error");
+      }
+    },
+    [command, table, state, onClose, onStateChange, labels.commandApplied, labels.commandFailed, labels.commandUndo, report, dismiss]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "ds-table-toolbar__command-row",
+      "data-open": open || void 0,
+      inert: !open || void 0,
+      ref: row,
+      onKeyDown: (event) => {
+        if (event.key !== "Escape") return;
+        event.preventDefault();
+        onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          CircularButton,
+          {
+            className: "ds-table-toolbar__command-close",
+            icon: "close",
+            variant: "tertiary",
+            size,
+            ariaLabel: labels.commandClose,
+            tooltip: false,
+            onClick: onClose
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Composer,
+          {
+            inline: true,
+            size,
+            value: text,
+            onValueChange: setText,
+            onSubmit: run,
+            placeholder: labels.commandPlaceholder,
+            sendLabel: labels.commandSend,
+            attachButton: false
+          }
+        )
+      ]
+    }
+  );
+}
+function ToolbarCommand(props) {
+  const host = useOptionalToast();
+  if (host) return /* @__PURE__ */ jsx(CommandRow, { ...props });
+  return /* @__PURE__ */ jsx(ToastProvider, { position: "bottom-right", dismissLabel: props.labels.commandDismiss, children: /* @__PURE__ */ jsx(CommandRow, { ...props }) });
+}
 function useBound(value, defaultValue, onChange, table) {
   const [own, setOwn] = useState(defaultValue);
   const current = value !== void 0 ? value : table ? table.value : own;
@@ -181,6 +322,7 @@ const TableToolbar = React.forwardRef(
     primaryAction,
     secondaryActions = [],
     actions,
+    command,
     labels: labelsProp,
     filterLabels: filterLabelsProp,
     className = "",
@@ -366,10 +508,14 @@ const TableToolbar = React.forwardRef(
     const activeFilters = filters.filter(isComplete).length;
     const rootRef = useRef(null);
     const [narrow, setNarrow] = useState(false);
+    const [crowded, setCrowded] = useState(false);
     useEffect(() => {
       const node = rootRef.current;
       if (!node) return;
-      const observer = new ResizeObserver(([entry]) => setNarrow(entry.contentRect.width < BREAKPOINT_PHONE_PX));
+      const observer = new ResizeObserver(([entry]) => {
+        setNarrow(entry.contentRect.width < BREAKPOINT_PHONE_PX);
+        setCrowded(entry.contentRect.width < BREAKPOINT_SHEET_PX);
+      });
       observer.observe(node);
       return () => observer.disconnect();
     }, []);
@@ -459,6 +605,29 @@ const TableToolbar = React.forwardRef(
     const bulkMode = selectedCount > 0;
     const phoneScreen = useSyncExternalStore(subscribePhone, isPhone, () => false);
     const floating = phoneScreen && bulkMode;
+    const [commandOpen, setCommandOpen] = useState(false);
+    const [commandState, setCommandState] = useState("idle");
+    const commandButton = useRef(null);
+    const commandShown = commandOpen && Boolean(command && table) && !(bulkMode && !floating);
+    const closeCommand = () => {
+      setCommandOpen(false);
+      requestAnimationFrame(() => commandButton.current?.focus());
+    };
+    const covered = commandShown || bulkMode && !floating;
+    const commandButtonDrawn = /* @__PURE__ */ jsx(
+      AiButton,
+      {
+        ref: commandButton,
+        className: "ds-table-toolbar__command",
+        iconOnly: narrow,
+        size,
+        label: labels.command,
+        state: commandState,
+        "aria-expanded": commandShown,
+        onClick: () => setCommandOpen(true)
+      }
+    );
+    const commandTrigger = narrow ? /* @__PURE__ */ jsx(Tooltip, { content: labels.command, children: commandButtonDrawn }) : commandButtonDrawn;
     const matching = table?.matchingIds ?? [];
     const matchingCount = table?.matchingCount ?? matching.length;
     const allMatching = table?.allMatching ?? (matching.length > 0 && matching.every((id) => table.selectedIds.includes(id)));
@@ -1070,7 +1239,30 @@ const TableToolbar = React.forwardRef(
         }
       )
     ] });
-    const groupControl = groupable && groupableColumns.length > 0 && /* @__PURE__ */ jsxs("span", { className: "ds-table-toolbar__badge-host", children: [
+    const groupOffered = groupable && groupableColumns.length > 0;
+    const groupPanel = /* @__PURE__ */ jsxs("div", { className: "ds-table-toolbar__menu", children: [
+      /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-heading", "aria-hidden": "true", children: labels.groupBy }),
+      /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-row", children: /* @__PURE__ */ jsx(
+        Dropdown,
+        {
+          className: "ds-table-toolbar__menu-field",
+          size,
+          "aria-label": labels.groupBy,
+          options: [
+            { value: "", label: labels.noGrouping },
+            ...groupableColumns.map((col) => ({ value: col.key, label: col.label }))
+          ],
+          value: groupedBy ?? "",
+          onValueChange: (next) => setGrouping(next ? [String(next)] : [])
+        }
+      ) }),
+      table && groupedBy && menuSeparator,
+      table && groupedBy && /* @__PURE__ */ jsxs("div", { className: "ds-table-toolbar__menu-actions", children: [
+        menuItem(labels.collapseAll, "unfold_less", () => table.setAllGroupsOpen(false)),
+        menuItem(labels.expandAll, "unfold_more", () => table.setAllGroupsOpen(true))
+      ] })
+    ] });
+    const groupControl = groupOffered && /* @__PURE__ */ jsxs("span", { className: "ds-table-toolbar__badge-host", children: [
       /* @__PURE__ */ jsx(
         ToolbarPanel,
         {
@@ -1079,28 +1271,7 @@ const TableToolbar = React.forwardRef(
           size,
           ariaLabel: labels.group(Boolean(groupedBy)),
           position: "bottom",
-          content: /* @__PURE__ */ jsxs("div", { className: "ds-table-toolbar__menu", children: [
-            /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-heading", "aria-hidden": "true", children: labels.groupBy }),
-            /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-row", children: /* @__PURE__ */ jsx(
-              Dropdown,
-              {
-                className: "ds-table-toolbar__menu-field",
-                size,
-                "aria-label": labels.groupBy,
-                options: [
-                  { value: "", label: labels.noGrouping },
-                  ...groupableColumns.map((col) => ({ value: col.key, label: col.label }))
-                ],
-                value: groupedBy ?? "",
-                onValueChange: (next) => setGrouping(next ? [String(next)] : [])
-              }
-            ) }),
-            table && groupedBy && menuSeparator,
-            table && groupedBy && /* @__PURE__ */ jsxs("div", { className: "ds-table-toolbar__menu-actions", children: [
-              menuItem(labels.collapseAll, "unfold_less", () => table.setAllGroupsOpen(false)),
-              menuItem(labels.expandAll, "unfold_more", () => table.setAllGroupsOpen(true))
-            ] })
-          ] }),
+          content: groupPanel,
           children: /* @__PURE__ */ jsx(
             CircularButton,
             {
@@ -1144,7 +1315,9 @@ const TableToolbar = React.forwardRef(
     );
     const foldedActions = narrow ? [...secondaryActions, ...primaryAction?.menu ?? []] : [];
     const foldedDensity = narrow ? density : false;
-    const moreControl = (foldedDensity || foldedActions.length > 0) && /* @__PURE__ */ jsx(
+    const foldedGroup = crowded && groupOffered;
+    const foldedColumns = crowded ? columnsList : false;
+    const morePanel = /* @__PURE__ */ jsx(
       ToolbarPanel,
       {
         sheet: phoneScreen,
@@ -1157,10 +1330,19 @@ const TableToolbar = React.forwardRef(
             /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-heading", "aria-hidden": "true", children: labels.actionsSection }),
             /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-actions", children: foldedActions.map((action) => /* @__PURE__ */ jsx("span", { children: menuItem(action.label, action.icon, action.onSelect, action.disabled) }, action.id)) })
           ] }),
-          foldedActions.length > 0 && foldedDensity && menuSeparator,
+          foldedActions.length > 0 && (foldedGroup || foldedDensity) && menuSeparator,
+          foldedGroup && groupPanel,
+          foldedGroup && foldedDensity && menuSeparator,
           foldedDensity && /* @__PURE__ */ jsxs(Fragment, { children: [
             /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-heading", "aria-hidden": "true", children: labels.density }),
             /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-row", children: foldedDensity })
+          ] }),
+          foldedColumns && (foldedActions.length > 0 || foldedGroup || foldedDensity) && menuSeparator,
+          foldedColumns && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-heading", "aria-hidden": "true", children: labels.columns }),
+            foldedColumns,
+            menuSeparator,
+            /* @__PURE__ */ jsx("div", { className: "ds-table-toolbar__menu-actions", children: showAllColumns })
           ] })
         ] }),
         children: /* @__PURE__ */ jsx(
@@ -1176,6 +1358,10 @@ const TableToolbar = React.forwardRef(
         )
       }
     );
+    const moreControl = (foldedDensity || foldedActions.length > 0 || foldedGroup || foldedColumns) && /* @__PURE__ */ jsxs("span", { className: "ds-table-toolbar__badge-host", children: [
+      morePanel,
+      foldedGroup && groupedBy && /* @__PURE__ */ jsx("span", { className: "ds-table-toolbar__badge", "aria-hidden": "true", children: "1" })
+    ] });
     const showFilters = filterable && filterableColumns.length > 0;
     return /* @__PURE__ */ jsxs(
       "div",
@@ -1203,14 +1389,28 @@ const TableToolbar = React.forwardRef(
                 }
               )
             ] }),
+            command && table && /* @__PURE__ */ jsx(
+              ToolbarCommand,
+              {
+                command,
+                table,
+                labels,
+                size,
+                open: commandShown,
+                onClose: closeCommand,
+                state: commandState,
+                onStateChange: setCommandState
+              }
+            ),
             /* @__PURE__ */ jsxs(
               "div",
               {
                 className: "ds-table-toolbar__main",
-                inert: bulkMode && !floating || void 0,
-                "data-covered": bulkMode && !floating || void 0,
+                inert: covered || void 0,
+                "data-covered": commandShown ? "command" : covered ? "bulk" : void 0,
                 children: [
                   /* @__PURE__ */ jsxs("div", { className: "ds-table-toolbar__start", ref: startRef, children: [
+                    command && table && commandTrigger,
                     searchable && !narrow && searchField,
                     showFilters && !narrow && /* @__PURE__ */ jsx("span", { className: "ds-table-toolbar__filter-button", children: addFilterMenu(filterIcon) }),
                     showFilters && !narrow && chips,
@@ -1268,8 +1468,8 @@ const TableToolbar = React.forwardRef(
                     ),
                     showFilters && narrow && filterPanel,
                     sortControl,
-                    groupControl,
-                    columnsControl,
+                    !crowded && groupControl,
+                    !crowded && columnsControl,
                     !narrow && densityIcons,
                     moreControl,
                     (primaryAction || !narrow && secondaryActions.length > 0) && /* @__PURE__ */ jsxs("span", { className: "ds-table-toolbar__actions", children: [

package/components/ThemeToggle/ThemeToggle.css

@@ -10,3 +10,29 @@
 .ds-theme-toggle {
   flex-shrink: 0;
 }
+
+/* The cycle form: one circle in the track recipe the strip, the
+   CommandPaletteTrigger and the ThemePicker's trigger wear (container fill,
+   hairline border, the track's curve), so it reads as one of that family in
+   a row; it hovers like the picker's trigger, the fill stepping up. */
+.ds-theme-toggle--cycle {
+  display: inline-flex;
+}
+
+.ds-theme-toggle--cycle .ds-circular-button {
+  background-color: var(--color-bg-container-primary);
+  border: var(--border-025) solid var(--color-bg-container-border);
+  border-radius: calc(var(--radius-pill) + var(--padding-100));
+}
+
+.ds-theme-toggle--cycle .ds-circular-button:not(.ds-circular-button--disabled):hover {
+  background-color: var(--color-bg-container-secondary);
+}
+
+/* The glyph holds the icon colour in every state, as the family's glyphs
+   do: only the fill steps on hover. */
+.ds-theme-toggle--cycle .ds-circular-button .ds-circular-button__icon,
+.ds-theme-toggle--cycle .ds-circular-button:not(.ds-circular-button--disabled):hover .ds-circular-button__icon,
+.ds-theme-toggle--cycle .ds-circular-button:not(.ds-circular-button--disabled):active .ds-circular-button__icon {
+  color: var(--color-action-icon-default);
+}

package/components/ThemeToggle/ThemeToggle.d.ts

@@ -17,6 +17,15 @@ type ThemeToggleOwnProps = {
     size?: 'default' | 'compact';
     /** Show each segment's label beside its icon. Set `false` for an icon-only strip: each label becomes the segment's tooltip on hover and keyboard focus, and stays its accessible name. */
     showLabels?: boolean;
+    /**
+     * Draw one circle that shows the current setting and steps to the next on
+     * each press (System, Light, Dark), in place of the strip, for a row short
+     * of room, such as a condensed SiteHeader's `condensedActions`. Each label
+     * becomes the circle's tooltip and its accessible name comes from `cycleLabel`.
+     */
+    cycle?: boolean;
+    /** The cycle circle's accessible name, from the current setting's label and the next one's. Default: the control's `aria-label`, then both, as in "Colour mode: Light. Switch to Dark". */
+    cycleLabel?: (current: string, next: string) => string;
     /** The localStorage key the choice is kept under. Match the key given to `colorModeScript`. Default `theme`. */
     storageKey?: string;
     /** Label of the setting that follows the operating system. */
@@ -36,7 +45,8 @@ export interface ThemeToggleProps extends ThemeToggleOwnProps, Omit<React.Compon
  * choice survives a reload. Pair it with `colorModeScript` in the document
  * head, which applies the stored choice before first paint.
  *
- * Forwards a ref to the strip and spreads unrecognised props onto it.
+ * Forwards a ref to the strip (in the `cycle` form, the circle's wrapper)
+ * and spreads unrecognised props onto it.
  */
 export declare const ThemeToggle: React.ForwardRefExoticComponent<ThemeToggleProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/components/ThemeToggle/ThemeToggle.js

@@ -2,6 +2,7 @@
 import { jsx } from "react/jsx-runtime";
 import React, { useEffect } from "react";
 import { SegmentedControl } from "../SegmentedControl/SegmentedControl.js";
+import { CircularButton } from "../CircularButton/CircularButton.js";
 import { DEFAULT_COLOR_MODE_STORAGE_KEY } from "./colorMode.js";
 import { useColorMode } from "./useColorMode.js";
 import "./ThemeToggle.css";
@@ -12,12 +13,14 @@ const ThemeToggle = React.forwardRef(
     onValueChange,
     size = "default",
     showLabels = true,
+    cycle = false,
     storageKey,
     systemLabel = "System",
     lightLabel = "Light",
     darkLabel = "Dark",
     className = "",
     "aria-label": ariaLabel = "Colour mode",
+    cycleLabel = (current, next) => `${ariaLabel}: ${current}. Switch to ${next}`,
     ...rest
   }, ref) => {
     const [storedSetting, setSetting] = useColorMode({ storageKey });
@@ -36,6 +39,38 @@ const ThemeToggle = React.forwardRef(
       { value: "light", label: lightLabel, icon: "light_mode" },
       { value: "dark", label: darkLabel, icon: "dark_mode" }
     ];
+    const pick = (next) => {
+      if (value === void 0) setSetting(next);
+      onValueChange?.(next);
+    };
+    if (cycle) {
+      const index = Math.max(
+        segments.findIndex((segment) => segment.value === setting),
+        0
+      );
+      const current = segments[index];
+      const next = segments[(index + 1) % segments.length];
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...rest,
+          ref,
+          className: ["ds-theme-toggle", "ds-theme-toggle--cycle", className].filter(Boolean).join(" "),
+          children: /* @__PURE__ */ jsx(
+            CircularButton,
+            {
+              icon: current.icon,
+              size,
+              variant: "secondary",
+              tone: "neutral",
+              ariaLabel: cycleLabel(current.label, next.label),
+              tooltip: current.label,
+              onClick: () => pick(next.value)
+            }
+          )
+        }
+      );
+    }
     return /* @__PURE__ */ jsx(
       SegmentedControl,
       {
@@ -45,11 +80,7 @@ const ThemeToggle = React.forwardRef(
         className: ["ds-theme-toggle", !showLabels && "ds-theme-toggle--icons", className].filter(Boolean).join(" "),
         segments,
         value: setting,
-        onValueChange: (picked) => {
-          const next = picked;
-          if (value === void 0) setSetting(next);
-          onValueChange?.(next);
-        },
+        onValueChange: (picked) => pick(picked),
         size,
         showLabels
       }

package/components/Toast/Toast.css

@@ -361,3 +361,7 @@
 .ds-toast .material-symbols-rounded {
   color: inherit;
 }
+
+.ds-toast__action {
+  margin-block-start: var(--gap-200);
+}

package/components/Toast/Toast.d.ts

@@ -14,6 +14,8 @@ export interface ToastData {
     dismissible?: boolean;
     /** Custom icon override — Material Symbol name (string) or custom element (ReactNode) */
     icon?: string | React.ReactNode;
+    /** A control under the text, such as an Undo. One whose control must not leave on a timer sets `duration` to 0. */
+    action?: React.ReactNode;
 }
 export interface ToastProviderProps {
     /** Children that can access the toast context */
@@ -40,6 +42,11 @@ export interface ToastContextValue {
  * Must be used within a ToastProvider.
  */
 export declare const useToast: () => ToastContextValue;
+/**
+ * The toast API when a ToastProvider surrounds the caller, else null: for a
+ * component that joins the host's stack if there is one and brings its own if not.
+ */
+export declare const useOptionalToast: () => ToastContextValue | null;
 /**
  * ToastProvider wraps your application and provides the
  * toast context. Renders a fixed container that stacks
@@ -61,6 +68,8 @@ type ToastOwnProps = {
     dismissible?: boolean;
     /** Custom icon override — Material Symbol name (string) or custom element (ReactNode) */
     icon?: string | React.ReactNode;
+    /** A control under the text, such as an Undo. */
+    action?: React.ReactNode;
     /** Fires when the dismiss button is pressed. The button renders only when this is given (and `dismissible` is not false); the host owns removing the toast */
     onDismiss?: () => void;
     /** Accessible name of the dismiss button */

package/components/Toast/Toast.js

@@ -16,6 +16,7 @@ const useToast = () => {
   }
   return context;
 };
+const useOptionalToast = () => useContext(ToastContext);
 const defaultIcons = {
   info: "info",
   positive: "check_circle",
@@ -31,6 +32,7 @@ const ToastItem = ({
   variant,
   dismissible,
   icon,
+  action,
   duration,
   dismissLabel,
   onDismiss
@@ -81,7 +83,8 @@ const ToastItem = ({
         ),
         /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
           title && /* @__PURE__ */ jsx("p", { className: `${baseClass}__title`, children: title }),
-          description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description })
+          description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description }),
+          action && /* @__PURE__ */ jsx("div", { className: `${baseClass}__action`, children: action })
         ] }),
         dismissible && /* @__PURE__ */ jsx(
           "button",
@@ -164,6 +167,7 @@ const ToastProvider = ({
               variant: t.variant || "info",
               dismissible: t.dismissible ?? true,
               icon: t.icon,
+              action: t.action,
               duration: t.duration ?? MOTION_AUTO_DISMISS_MS,
               dismissLabel,
               onDismiss: dismiss
@@ -183,6 +187,7 @@ const Toast = React.forwardRef(
     variant = "info",
     dismissible = true,
     icon,
+    action,
     onDismiss,
     dismissLabel = "Dismiss notification",
     className = "",
@@ -202,7 +207,8 @@ const Toast = React.forwardRef(
       ),
       /* @__PURE__ */ jsxs("div", { className: `${baseClass}__content`, children: [
         title && /* @__PURE__ */ jsx("p", { className: `${baseClass}__title`, children: title }),
-        description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description })
+        description && /* @__PURE__ */ jsx("p", { className: `${baseClass}__description`, children: description }),
+        action && /* @__PURE__ */ jsx("div", { className: `${baseClass}__action`, children: action })
       ] }),
       dismissible && onDismiss && /* @__PURE__ */ jsx(
         "button",
@@ -221,5 +227,6 @@ Toast.displayName = "Toast";
 export {
   Toast,
   ToastProvider,
+  useOptionalToast,
   useToast
 };

package/components/Tooltip/Tooltip.css

@@ -16,11 +16,15 @@
 /* Placed by the shared anchored-position behaviour
    (src/behaviors/useAnchoredPosition.ts), which makes the panel fixed and
    sets where it sits, so a scroll container around the trigger (a bordered
-   table's wrapper, a rail) cannot clip it. The panel keeps its place in the
-   DOM, so it stacks inside the trigger's own context at the floating layer.
-   The side it lands on, after any flip, is its data-side. */
+   table's wrapper, a rail) cannot clip it. While visible the panel is a
+   manual popover in the top layer (src/behaviors/useTopLayer), above every
+   z-index on the page; the floating layer only ranks it in a browser
+   without the Popover API. The side it lands on, after any flip, is its
+   data-side. */
 .ds-tooltip__panel {
   z-index: var(--layer-floating);
+  /* Over the popover default, so the arrow outside the box still draws. */
+  overflow: visible;
   padding: var(--padding-150) var(--padding-200); /* 6px 8px */
   border-radius: var(--radius-100); /* 4px */
   /* The floating surface, same recipe as Popover: page background (the
@@ -43,7 +47,8 @@
      browsers without those skip the fades but show and hide correctly. */
   display: none;
   opacity: 0;
-  transition-property: opacity, transform, display;
+  /* overlay holds the panel in the top layer through the exit fade. */
+  transition-property: opacity, transform, display, overlay;
   transition-duration: var(--motion-duration-fast);
   transition-timing-function: var(--motion-ease-standard);
   transition-behavior: allow-discrete;

package/components/Tooltip/Tooltip.d.ts

@@ -24,8 +24,10 @@ export interface TooltipProps extends TooltipOwnProps, Omit<React.ComponentProps
  * Rides the system's floating surface — page background, hairline border,
  * floating shadow — so the bubble stays light in light theme and dark in dark.
  *
- * The panel stays in the trigger's DOM position (so it keeps the trigger's
- * stacking context and any theme scoped above it) but is `position: fixed`,
+ * The panel stays in the trigger's DOM position (so it keeps any theme
+ * scoped above it) but paints in the browser's top layer while visible
+ * (src/behaviors/useTopLayer), above every z-index on the page, and is
+ * `position: fixed`,
  * placed from the trigger's rectangle each time it shows and again on scroll
  * and resize while visible. That is what lets a tooltip inside a scroll
  * container — a bordered table's wrapper, a rail — show whole instead of