gridsmith-ui 0.31.1 → 0.33.0

package/dist/index.d.ts

@@ -42,6 +42,20 @@ interface BulkActionBarProps {
     onClearSelection: () => void;
     className?: string;
 }
+/**
+ * The selection's actions, floating at the foot of the page while something is selected (Sprint 25.33, the owner's look
+ * review of 19 October: the bar written above the table pushed the page down 65 px as a row was selected).
+ *
+ * - It is drawn in its host's layer: the shell's content column, a SplitView's pane, a Drawer's or a Dialog's body (with
+ *   none, the window's foot), as wide as its content and centred, over the content, so nothing on the page moves. The
+ *   host keeps room for it at the foot of what scrolls, and toasts at the bottom rise above it.
+ * - Where it is written, it takes its bearing as it appears, from a marker it removes before the page is drawn, so the
+ *   marker never takes room (a spaced stack round it would open a gap under the table): from there, as the bar goes, focus
+ *   goes to the selection's own control.
+ * - One Tab stop, after the host's content, and the arrow keys move between its controls (the APG's toolbar).
+ * - The count is said through the ToastProvider's polite region, which is in the page before the bar is.
+ * - On a phone, or in a host too narrow for its buttons, the actions are one Actions menu.
+ */
 declare function BulkActionBar({ selectedCount, actions, onClearSelection, className }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
 
 type InputSize = "sm" | "md" | "lg";
@@ -994,13 +1008,17 @@ interface FormWrapperProps {
     errorSummary?: boolean | ((errors: FormFieldError[]) => ReactNode);
     /**
      * The form takes the full width it is given, for the rare form whose fields need it: several columns side by side,
-     * line items. Without it the form, its buttons with it, keeps the narrow reading width wherever it sits.
+     * line items. Without it the form's rows of fields, its buttons with them, keep the narrow reading width wherever it
+     * sits; a row that holds a wide control (a FileUpload's drop zone, a RichTextEditor, a Table, a DataGrid or a
+     * TransferList) fills the form's width, and the buttons end where it does (Sprint 25.33).
      */
     fullWidth?: boolean;
     /**
      * Classes for the form. Wherever it sits — a page of its own, a card, beside a list, under a tab, a settings panel —
-     * the form keeps the narrow page's reading width however wide its box is (--ds-form-max, Sprint 25.9 A4; everywhere
-     * since Sprint 25.16 A8); in a Drawer or a Dialog it takes the overlay's width. A `max-w-*` class here wins.
+     * its rows of fields keep the narrow page's reading width however wide its box is (--ds-form-max, Sprint 25.9 A4;
+     * everywhere since Sprint 25.16 A8; per row since Sprint 25.33, so a drop zone or an editor fills the width); in a
+     * Drawer or a Dialog they take the overlay's width. A `max-w-*` class here wins: the form takes that width, and its
+     * rows fill it.
      */
     className?: string;
     ref?: React.Ref<HTMLFormElement>;
@@ -1533,10 +1551,16 @@ interface BadgeProps {
     iconRight?: IconName;
     /** Max width before truncation (e.g. "120px", "16ch"). Shows tooltip when truncated. */
     maxWidth?: string;
+    /**
+     * A set width (a CSS length, e.g. "6rem"), for a set of badges that should line up: a table column of statuses gives
+     * each the same width. The text is centred, and truncated with a tooltip if it doesn't fit. Without it a badge is as
+     * wide as what it says (Sprint 25.33).
+     */
+    width?: string;
     className?: string;
     children?: ReactNode;
 }
-declare function Badge({ variant, severity, size, color, iconLeft, iconRight, maxWidth, className, children }: BadgeProps): react_jsx_runtime.JSX.Element;
+declare function Badge({ variant, severity, size, color, iconLeft, iconRight, maxWidth, width, className, children }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 type TagVariant = "default" | "subtle" | "success" | "warning" | "error" | "outline";
 type TagPaletteColor = 1 | 2 | 3 | 4 | 5;
@@ -1547,6 +1571,11 @@ interface TagProps {
     color?: TagPaletteColor;
     /** Max width before truncation (e.g. "120px", "16ch"). Shows tooltip when truncated. */
     maxWidth?: string;
+    /**
+     * A set width (a CSS length, e.g. "6rem"), for a set of tags that should line up. The text is centred, and truncated
+     * with a tooltip if it doesn't fit. Without it a tag is as wide as what it says (Sprint 25.33).
+     */
+    width?: string;
     onRemove?: () => void;
     onClick?: () => void;
     /**
@@ -2050,7 +2079,7 @@ type AsidePanelPosition = "flush" | "floating";
 interface AsidePanelProps {
     open: boolean;
     onClose: () => void;
-    /** Which side of the content column. Default "right". Pass the same value as AppShell's asideSide. */
+    /** Which side of the content column. Default "right". In AppShell's aside slot, the same value as its asideSide; a page's own panel docks on the side it names. */
     side?: AsidePanelSide;
     /** Column width while open. Default "420px" — the same as the side panel. */
     width?: string;
@@ -2085,7 +2114,7 @@ interface AsidePanelProps {
  * returns to the opener, an outside click does nothing, drafts survive closing.
  * Below `collapseBelow` it becomes the overlay Drawer; on phones the Sheet.
  */
-declare function AsidePanel({ open, onClose, side, width, position, navbarFloating: navbarFloatingProp, sidebarFloating: sidebarFloatingProp, collapseBelow, keepMounted, resizable, maxWidth, labelledBy, id, children, className, }: AsidePanelProps): react_jsx_runtime.JSX.Element;
+declare function AsidePanel({ open, onClose, side, width, position, navbarFloating: navbarFloatingProp, sidebarFloating: sidebarFloatingProp, collapseBelow, keepMounted, resizable, maxWidth, labelledBy, id, children, className, }: AsidePanelProps): react_jsx_runtime.JSX.Element | null;
 
 interface StackedListItem {
     id: string | number;
@@ -3787,8 +3816,15 @@ interface ScrollAreaProps {
      * what it holds ("Release notes"). Default "Scrollable content".
      */
     "aria-label"?: string;
+    /**
+     * Content runs to the area's edges. Without it the area keeps 4 px of room inside its edges, so what sits at an edge
+     * (a first letter, a focused control's outline, the area's own keyboard outline) is never cut or crossed by them
+     * (Sprint 25.33, the owner's answer to Sprint 25.30's look question). For content that insets itself, such as the
+     * Sidebar's navigation.
+     */
+    flush?: boolean;
 }
-declare function ScrollArea({ children, className, orientation, maxHeight, maxWidth, "aria-label": ariaLabel, }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
+declare function ScrollArea({ children, className, orientation, maxHeight, maxWidth, "aria-label": ariaLabel, flush, }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
 
 interface AppShellContextValue {
     hasSidebar: boolean;
@@ -3808,16 +3844,35 @@ interface AppShellContextValue {
     sidebarCollapsed: boolean;
     /** Records an explicit user choice. Overrides the auto tier in both directions for the session. */
     setSidebarCollapsed: (collapsed: boolean) => void;
-    /** True while a docked AsidePanel in the aside slot is open beside the content. Pages may hide non-essential chrome on it. */
+    /** True while a docked AsidePanel (the aside slot's, or a page's own) is open beside the content. Pages may hide non-essential chrome on it. */
     asideOpen: boolean;
-    /** Set by AsidePanel; not for pages to call. */
+    /** For a docked panel of an app's own, not an AsidePanel, which tells the shell itself (`reportAside`); not for pages to call. */
     setAsideOpen: (open: boolean) => void;
     /** Which side the aside slot is on (AppShell's asideSide). */
     asideSide: "right" | "left";
     /** True while the docked AsidePanel is floating — a floating PageHeader drops its gutter on that side, as it does beside a floating Sidebar. */
     asideFloating: boolean;
-    /** Set by AsidePanel; not for pages to call. */
+    /** As setAsideOpen: for a docked panel of an app's own; not for pages to call. */
     setAsideFloating: (floating: boolean) => void;
+    /** The side of the docked AsidePanel that is open and floating, or null: a floating PageHeader drops its gutter on that side. */
+    asideFloatingSide: "right" | "left" | null;
+    /**
+     * How each AsidePanel in the shell tells it where it stands, by its onClose (a ref to the latest), null as it goes. One
+     * AsidePanel is open at a time in a shell, whatever its side or its form (docked, drawer or sheet): the one opened last
+     * wins, and the shell closes the others through their own onClose. Read by AsidePanel; not for pages to call.
+     */
+    reportAside: (onClose: {
+        readonly current: () => void;
+    }, state: AsidePanelReport | null) => void;
+    /**
+     * Where an AsidePanel a page renders docks (Sprint 32): beside the content column on its side, where the aside slot's
+     * does, so a page's own panel (a dashboard editor's widget library) docks like the app's while it stays in the page's
+     * tree, and the page's context reaches it. Read by AsidePanel; not for pages to read.
+     */
+    asideHosts: {
+        left: HTMLElement | null;
+        right: HTMLElement | null;
+    };
     /**
      * The shell's root element, for previews that need to render overlays inside their frame
      * (the dashboard builder passes it to Launcher, CornerPanel and Drawer as `container`).
@@ -3878,6 +3933,20 @@ interface AppShellFocus {
     /** What the exit control does: save and log out, or return to where the user came from. */
     onExit?: () => void;
 }
+/** What an AsidePanel tells the shell it's in (AppShellContextValue's `reportAside`). */
+interface AsidePanelReport {
+    open: boolean;
+    /** Its `open` has just turned true (an onClose new each render is no opening). */
+    opened: boolean;
+    /** A page's own panel, not the aside slot's: of two opened together, the page's wins. */
+    page: boolean;
+    /** Docked beside the content column at this width, not the Drawer it becomes below its collapse width. */
+    docked: boolean;
+    floating: boolean;
+    side: "right" | "left";
+    /** The id of the heading that names it (its labelledBy), for a development warning. */
+    name: string;
+}
 /**
  * The app shell around this component, or null outside one: its layout state — whether it has a sidebar, a mobile menu
  * and a mobile nav, whether the sidebar is open or collapsed and the aside open (each with its setter), the viewport tier
@@ -4245,7 +4314,9 @@ interface SectionHeadingProps {
      * top of a SplitView pane on a fill page (an inbox, a library), where there is no PageHeader — a 16 px inset that
      * matches the list rows under it, a rule at the bottom and no margin below (Sprint 25.4 C-9, folded in from
      * PaneHeader on the owner's review). At the top of the detail, an item's own header: there it insets at the page's
-     * gutter, as the item's path above it does.
+     * gutter, as the item's path above it does. In a pane that pads its content (a tree's list pane, a detail) it cancels
+     * that padding, so it is inset once and its rule reaches the pane's edges: place it first in the pane, in no padded
+     * wrapper (Sprint 25.33 C1; run 97's title, inset twice, read as floating).
      */
     variant?: "section" | "pane";
     className?: string;
@@ -4338,4 +4409,15 @@ interface UseTextOverflowResult {
  */
 declare function useTextOverflow(options?: UseTextOverflowOptions): UseTextOverflowResult;
 
-export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, type AddAnotherProps, Alert, type AlertConsent, type AlertConsentChoice, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus, AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, type CalendarColour, type CalendarDay, type CalendarDayClickDetail, type CalendarEvent, type CalendarEventAction, type CalendarEventAttendee, type CalendarProps, type CalendarSize, type CalendarView, Card, CardContent, CardDescription, CardFooter, CardGrid, type CardGridProps, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, type ColorSwatch, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DangerZone, type DangerZoneProps, DataList, type DateInput, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeWords, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, type DisabledDates, Divider, Dock, Drawer, Dropdown, DropdownMenuEntry, EmptyState, EntityCell, type EventCategory, Field, type FieldControlProps, type FieldLabel, type FieldProps, FileUpload, type FileUploadItem, type FileUploadRequestOptions, type FileUploadStatus, type FitLabelsOptions, type FittedLabel, type FlowNavigate, type FlowProgress, FlowSaved, type FlowSavedProps, type FlowStep, type FlowSteps, FormWrapper, Gantt, type GanttGroup, type GanttItem, type GanttProps, type GanttStatus, type GanttTone, type GridKeyboard, type GridKeyboardOptions, HoverCard, INPUT_MODALITY_ATTR, InlineFieldError, Input, type InputModality, Kbd, Label, type LabelBox, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, LocaleProvider, type LocaleProviderProps, MentionInput, type MentionInputProps, MentionSuggestion, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, type Occurrence, PageActions, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, Pager, Pagination, PinInput, Popover, Progress, type PromiseToastMessages, RadioGroup, Rating, type Recurrence, type RecurrenceFrequency, RecurrencePicker, type RecurrencePickerProps, type RecurrencePreset, type RecurrenceScope, RecurrenceScopeDialog, type RecurrenceScopeDialogProps, RelativeTime, type RelativeTimeProps, type RepeatChange, type RepeatingEvent, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, type SortDir, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, TIME_ZOOMS, type Tab, Table, type TableDensity, type TableProps, type TableRow, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimeBar, type TimeBarProps, TimePicker, TimeRow, type TimeRowProps, type TimeScale, TimeScaleHeader, type TimeScaleHeaderProps, type TimeScaleOptions, type TimeTick, type TimeValue, TimeViewport, type TimeViewportHandle, type TimeViewportLayout, type TimeViewportProps, type TimeViewportState, type TimeZoom, Timeline, TimezoneSelect, type TimezoneSelectProps, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseFlowStepsOptions, type UseTextOverflowOptions, type UseTextOverflowResult, type WeekOfMonth, type Weekday, browserTimeZone, canonicalTimeZone, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, fitLabel, fitLabels, formatDateRange, formatFullTime, formatRelativeTime, inputModality, installInputModality, nthOf, occurrenceOn, occurrences, parseRRule, readFlowProgress, readRecurrence, recurrencePresets, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule, useAppShell, useBrowserTimeZone, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useFormContext, useFormatLocale, useGridKeyboard, useHydrated, useInputModality, useRelativeTimeFormat, useRevealFocus, useSidebar, useTextMeasure, useTextOverflow, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional, useUnsavedChanges };
+/**
+ * The theme's colours as hex, for anything that takes colours rather than CSS: a map's style, a canvas, a PDF, a drawing
+ * library. Each named token (`"--ds-bg-canvas"`) is read where `ref`'s element sits, since part of a page can carry the
+ * theme in its other mode, and read again whenever a `data-mode` changes. A value comes back as `#rrggbb`, or as
+ * `#rrggbbaa` when the token is see-through (`--ds-accent-subtle` is a tenth of the accent), so it keeps the look it has
+ * on the page. On the server and in the first render it is null, so the page hydrates as the server drew it. The answer
+ * keeps its identity until a colour changes, so a list written inline causes no loop, and what is built from it can be
+ * memoised on it. A name that isn't a colour of the theme there (not yet, or never) comes back transparent.
+ */
+declare function useThemeColors<N extends string>(ref: RefObject<Element | null>, names: readonly N[]): Readonly<Record<N, string>> | null;
+
+export { Accordion, ActionPanel, ActionPanelGroup, AddAnother, type AddAnotherProps, Alert, type AlertConsent, type AlertConsentChoice, type AlertPlacement, AppShell, type AppShellContextValue, type AppShellFocus, AppShellPreferences, type AppShellTheme, AsidePanel, type AsidePanelProps, type AsidePanelSide, Avatar, AvatarGroup, type AvatarGroupItem, type AvatarGroupProps, type AvatarStatus, Badge, type BadgePaletteColor, type BadgeSeverity, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, BreakpointKey, BulkActionBar, Button, ButtonSizeContext, Calendar, type CalendarColour, type CalendarDay, type CalendarDayClickDetail, type CalendarEvent, type CalendarEventAction, type CalendarEventAttendee, type CalendarProps, type CalendarSize, type CalendarView, Card, CardContent, CardDescription, CardFooter, CardGrid, type CardGridProps, CardHeader, type CardSelectType, CardTitle, type CardVariant, Carousel, type ChatMessage, type ChatMessageAction, type ChatMessageLayout, ChatMessageList, type ChatMessageSender, type ChatMessageSource, type ChatMessageStatus, ChatPanel, type ChatPanelProps, type ChatPanelStatusTone, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, CollapsibleContent, CollapsibleTrigger, ColorPicker, type ColorPickerProps, type ColorSwatch, type Column, Combobox, CommandPalette, ContextMenu, type ControlSize, ControlSizeContext, CornerPanel, type CornerPanelEdge, type CornerPanelProps, DEFAULT_DATE_RANGE_PRESETS, DangerZone, type DangerZoneProps, DataList, type DateInput, DatePicker, type DateRange, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeWords, type DescriptionItem, DescriptionList, type DescriptionListOrientation, type DescriptionListSize, type DestructiveActionHandle, type DestructiveActionOptions, Dialog, type DisabledDates, Divider, Dock, Drawer, Dropdown, DropdownMenuEntry, EmptyState, EntityCell, type EventCategory, Field, type FieldControlProps, type FieldLabel, type FieldProps, FileUpload, type FileUploadItem, type FileUploadRequestOptions, type FileUploadStatus, type FitLabelsOptions, type FittedLabel, type FlowNavigate, type FlowProgress, FlowSaved, type FlowSavedProps, type FlowStep, type FlowSteps, FormWrapper, Gantt, type GanttGroup, type GanttItem, type GanttProps, type GanttStatus, type GanttTone, type GridKeyboard, type GridKeyboardOptions, HoverCard, INPUT_MODALITY_ATTR, InlineFieldError, Input, type InputModality, Kbd, Label, type LabelBox, Launcher, type LauncherEdge, type LauncherProps, type LauncherVariant, type LauncherWhenOpen, Link, type LinkProps, LocaleProvider, type LocaleProviderProps, MentionInput, type MentionInputProps, MentionSuggestion, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavItem, type NavItemProps, type NavItemType, NavMenu, type NavMenuItem, Navbar, type NavbarSize, type NavbarType, type NavbarVariant, NotificationCenter, NumberInput, type Occurrence, PageActions, PageContainer, type PageContainerWidth, PageHeader, type PageHeaderBehavior, type PageHeaderIntensity, type PageHeaderProps, type PageHeaderVariant, Pager, Pagination, PinInput, Popover, Progress, type PromiseToastMessages, RadioGroup, Rating, type Recurrence, type RecurrenceFrequency, RecurrencePicker, type RecurrencePickerProps, type RecurrencePreset, type RecurrenceScope, RecurrenceScopeDialog, type RecurrenceScopeDialogProps, RelativeTime, type RelativeTimeProps, type RepeatChange, type RepeatingEvent, ScrollArea, SectionHeading, type SectionHeadingProps, SegmentedControl, SettingsLayout, type SettingsLayoutProps, type SettingsSection, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarNavSize, type SidebarPosition, type SidebarSection, type SidebarType, Skeleton, SkipLink, SliderRange, type SortDir, Spinner, StackedList, type StackedListVariant, StatsCard, StatusDot, type StatusDotVariant, Stepper, TIME_ZOOMS, type Tab, Table, type TableDensity, type TableProps, type TableRow, TableToolbar, type TableToolbarActiveFilter, type TableToolbarFilterOption, Tabs, TabsContent, TabsList, TabsTrigger, Tag, TagInput, type TagPaletteColor, type TagVariant, TextOverflow, type TextOverflowProps, Textarea, TimeBar, type TimeBarProps, TimePicker, TimeRow, type TimeRowProps, type TimeScale, TimeScaleHeader, type TimeScaleHeaderProps, type TimeScaleOptions, type TimeTick, type TimeValue, TimeViewport, type TimeViewportHandle, type TimeViewportLayout, type TimeViewportProps, type TimeViewportState, type TimeZoom, Timeline, TimezoneSelect, type TimezoneSelectProps, Toast, type ToastAction, type ToastApi, type ToastOptions, type ToastPosition, ToastProvider, type ToastVariant, Toggle, Tooltip, Tour, TransferList, TreeView, type Trend, type UseFlowStepsOptions, type UseTextOverflowOptions, type UseTextOverflowResult, type WeekOfMonth, type Weekday, browserTimeZone, canonicalTimeZone, countEdited, dateOfDay, dayOf, deleteOccurrence, describeRecurrence, endDayOf, fitLabel, fitLabels, formatDateRange, formatFullTime, formatRelativeTime, inputModality, installInputModality, nthOf, occurrenceOn, occurrences, parseRRule, readFlowProgress, readRecurrence, recurrencePresets, sameRecurrence, saveOccurrence, timeExtent, timeZoneOffset, toRRule, useAppShell, useBrowserTimeZone, useContentWidth, useDestructiveAction, useFittedLabels, useFlowSteps, useFormContext, useFormatLocale, useGridKeyboard, useHydrated, useInputModality, useRelativeTimeFormat, useRevealFocus, useSidebar, useTextMeasure, useTextOverflow, useThemeColors, useTimeScale, useTimeViewport, useTimeViewportLayout, useToast, useToastOptional, useUnsavedChanges };