haze-ui 1.20.0 → 1.21.0

package/README.md

@@ -106,6 +106,26 @@ import { AsyncSection } from 'haze-ui';
 </AsyncSection>
 ```
 
+## useTitle: view-level document.title
+
+`useTitle(title)` sets `document.title` while the view is mounted and
+restores the pre-entry title (the static `<title>` from the host page) on
+unmount. Two timing pitfalls are baked into the implementation: the write
+and the restore are two separate effects (a single `[title]` effect would
+restore the *previous round's* title, not the entry default, on every prop
+change), and the entry snapshot is taken at effect time, not render time —
+a route swap is one commit, so at render time the old view's cleanup has
+not run yet and `document.title` still holds the previous page.
+
+```jsx
+import { useTitle } from 'haze-ui';
+
+function SettingsView() {
+  useTitle('Settings');
+  // ...
+}
+```
+
 ## react-f0rm Integration
 
 react-f0rm owns form field state, and its headless `useField` hook is

package/dist/hooks/useTitle.js

@@ -0,0 +1,12 @@
+import { useEffect as e, useRef as t } from "react";
+//#region src/lib/hooks/useTitle.ts
+function n(n) {
+	let r = t(null);
+	e(() => {
+		r.current === null && (r.current = document.title), document.title = n;
+	}, [n]), e(() => () => {
+		r.current !== null && (document.title = r.current);
+	}, []);
+}
+//#endregion
+export { n as useTitle };

package/dist/index.js

@@ -142,6 +142,7 @@ import Kt from "./components/ConversationList/ConversationItem.js";
 import qt from "./components/DiffViewer/DiffViewer.js";
 import Jt from "./components/LogViewer/LogViewer.js";
 import Yt from "./components/AsyncSection/AsyncSection.js";
-import Xt from "./form/FormItem.js";
-import { useControl as Zt } from "react-use-control";
-export { N as Accordion, P as AccordionItem, St as Affix, F as Alert, Ht as ApprovalCard, Dt as AspectRatio, Yt as AsyncSection, I as Avatar, xt as BackToTop, _ as Badge, wt as Banner, jt as BottomSheet, H as Breadcrumb, U as BreadcrumbItem, o as Button, s as ButtonLink, i as COMPONENT_TOKENS, x as Card, ce as Carousel, le as CarouselSlide, Pt as ChatContainer, Ft as ChatInput, Nt as ChatMessage, m as Checkbox, p as CheckboxCore, Xe as Chip, Et as CodeBlock, Ae as Collapsible, je as CollapsibleContent, Me as CollapsibleTrigger, Re as ColorPicker, Le as ColorPickerCore, ne as Combobox, Ce as Command, we as CommandInput, Te as CommandItem, Ee as CommandList, Tt as ConfirmDialog, Ct as Container, mt as ContextMenu, gt as ContextMenuContent, _t as ContextMenuItem, vt as ContextMenuSeparator, ht as ContextMenuTrigger, Kt as ConversationItem, Gt as ConversationList, tt as DateRangePicker, et as DateRangePickerCore, de as Datepicker, ue as DatepickerCore, v as Dialog, qt as DiffViewer, W as Disclosure, pe as Divider, be as Drawer, lt as DropdownMenu, dt as DropdownMenuContent, ft as DropdownMenuItem, pt as DropdownMenuSeparator, ut as DropdownMenuTrigger, he as Empty, X as FileInput, V as Flex, Xt as FormItem, ve as Grid, ye as GridItem, z as Icon, B as Image, ct as InlineEdit, l as Input, c as InputCore, ee as List, te as ListItem, Jt as LogViewer, Lt as MarkdownRenderer, G as Menu, q as MenuDivider, K as MenuItem, Wt as ModelPicker, bt as NavLink, yt as NavigationBar, Y as NumberInput, J as NumberInputCore, rt as OTPInput, nt as OTPInputCore, f as Option, _e as Pagination, Ue as Paragraph, at as PasswordInput, it as PasswordInputCore, b as Popover, ge as Progress, S as Radio, w as RadioGroup, C as RadioGroupCore, Be as Rating, ze as RatingCore, De as ResizableGroup, Oe as ResizableHandle, ke as ResizablePanel, Ze as ScrollArea, Ye as Segmented, Je as SegmentedCore, d as Select, u as SelectCore, R as Skeleton, O as Slider, D as SliderCore, me as Spinner, Ke as Stat, qe as StatGroup, Se as Step, Bt as StepTimeline, Vt as StepTimelineItem, xe as Stepper, It as StreamingText, Mt as SwipeAction, g as Switch, h as SwitchCore, a as TOKEN_REGISTRY, j as Tab, A as TabList, M as TabPanel, re as Table, ae as TableBody, se as TableCell, ie as TableHead, oe as TableRow, k as Tabs, L as Tag, kt as TagGroup, At as TagGroupItem, st as TagInput, ot as TagInputCore, We as Text, E as Textarea, T as TextareaCore, zt as ThinkingIndicator, $e as TimePicker, Qe as TimePickerCore, Ve as Timeline, He as TimelineItem, Ge as Title, Z as Toast, Q as ToastContainer, Ut as TokenCounter, Rt as ToolCallCard, y as Tooltip, Pe as Transfer, Ne as TransferCore, fe as Tree, Ie as Upload, Fe as UploadCore, Ot as VirtualList, e as darkTheme, t as lightTheme, n as spacing, r as typography, Zt as useControl, $ as useToast };
+import { useTitle as Xt } from "./hooks/useTitle.js";
+import Zt from "./form/FormItem.js";
+import { useControl as Qt } from "react-use-control";
+export { N as Accordion, P as AccordionItem, St as Affix, F as Alert, Ht as ApprovalCard, Dt as AspectRatio, Yt as AsyncSection, I as Avatar, xt as BackToTop, _ as Badge, wt as Banner, jt as BottomSheet, H as Breadcrumb, U as BreadcrumbItem, o as Button, s as ButtonLink, i as COMPONENT_TOKENS, x as Card, ce as Carousel, le as CarouselSlide, Pt as ChatContainer, Ft as ChatInput, Nt as ChatMessage, m as Checkbox, p as CheckboxCore, Xe as Chip, Et as CodeBlock, Ae as Collapsible, je as CollapsibleContent, Me as CollapsibleTrigger, Re as ColorPicker, Le as ColorPickerCore, ne as Combobox, Ce as Command, we as CommandInput, Te as CommandItem, Ee as CommandList, Tt as ConfirmDialog, Ct as Container, mt as ContextMenu, gt as ContextMenuContent, _t as ContextMenuItem, vt as ContextMenuSeparator, ht as ContextMenuTrigger, Kt as ConversationItem, Gt as ConversationList, tt as DateRangePicker, et as DateRangePickerCore, de as Datepicker, ue as DatepickerCore, v as Dialog, qt as DiffViewer, W as Disclosure, pe as Divider, be as Drawer, lt as DropdownMenu, dt as DropdownMenuContent, ft as DropdownMenuItem, pt as DropdownMenuSeparator, ut as DropdownMenuTrigger, he as Empty, X as FileInput, V as Flex, Zt as FormItem, ve as Grid, ye as GridItem, z as Icon, B as Image, ct as InlineEdit, l as Input, c as InputCore, ee as List, te as ListItem, Jt as LogViewer, Lt as MarkdownRenderer, G as Menu, q as MenuDivider, K as MenuItem, Wt as ModelPicker, bt as NavLink, yt as NavigationBar, Y as NumberInput, J as NumberInputCore, rt as OTPInput, nt as OTPInputCore, f as Option, _e as Pagination, Ue as Paragraph, at as PasswordInput, it as PasswordInputCore, b as Popover, ge as Progress, S as Radio, w as RadioGroup, C as RadioGroupCore, Be as Rating, ze as RatingCore, De as ResizableGroup, Oe as ResizableHandle, ke as ResizablePanel, Ze as ScrollArea, Ye as Segmented, Je as SegmentedCore, d as Select, u as SelectCore, R as Skeleton, O as Slider, D as SliderCore, me as Spinner, Ke as Stat, qe as StatGroup, Se as Step, Bt as StepTimeline, Vt as StepTimelineItem, xe as Stepper, It as StreamingText, Mt as SwipeAction, g as Switch, h as SwitchCore, a as TOKEN_REGISTRY, j as Tab, A as TabList, M as TabPanel, re as Table, ae as TableBody, se as TableCell, ie as TableHead, oe as TableRow, k as Tabs, L as Tag, kt as TagGroup, At as TagGroupItem, st as TagInput, ot as TagInputCore, We as Text, E as Textarea, T as TextareaCore, zt as ThinkingIndicator, $e as TimePicker, Qe as TimePickerCore, Ve as Timeline, He as TimelineItem, Ge as Title, Z as Toast, Q as ToastContainer, Ut as TokenCounter, Rt as ToolCallCard, y as Tooltip, Pe as Transfer, Ne as TransferCore, fe as Tree, Ie as Upload, Fe as UploadCore, Ot as VirtualList, e as darkTheme, t as lightTheme, n as spacing, r as typography, Qt as useControl, Xt as useTitle, $ as useToast };

package/dist/types/hooks/index.d.ts

@@ -0,0 +1 @@
+export { useTitle } from './useTitle';

package/dist/types/hooks/useTitle.d.ts

@@ -0,0 +1 @@
+export declare function useTitle(title: string): void;

package/dist/types/index.d.ts

@@ -183,6 +183,7 @@ export { LogViewer } from './components/LogViewer';
 export type { LogViewerProps, LogEntry, LogLevel } from './components/LogViewer';
 export { AsyncSection } from './components/AsyncSection';
 export type { AsyncSectionProps } from './components/AsyncSection';
+export { useTitle } from './hooks';
 export { FormItem } from './form';
 export type { FieldValidator, FormItemAsProps, FormItemBinding, FormItemOwnProps, FormItemProps, FormItemRawElement, FormItemRawElementBinding, FormInstance, PathValueOf, } from './form';
 export { useControl } from 'react-use-control';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "haze-ui",
-  "version": "1.20.0",
+  "version": "1.21.0",
   "type": "module",
   "description": "A React UI component library powered by react-use-control and Linaria",
   "main": "./dist/index.js",