@endfield-ui/react 1.2.0 → 1.2.1

package/src/components/nav-menu/NavMenu.tsx

@@ -1,6 +1,5 @@
 import { Dialog as BaseDialog } from "@base-ui/react/dialog";
 import {
-  createContext,
   useContext,
   useRef,
   type ComponentProps,
@@ -18,10 +17,13 @@ import { firstFocusableIn } from "../dialog/initial-focus";
 import { GhostText } from "../ghost-text/GhostText";
 import { IconButton } from "../icon-button/IconButton";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
-import { NavActionContext } from "../nav-action/NavAction";
+import { getNavActionContext } from "../nav-action/NavAction";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 /** 导航项点了之后要把菜单关上 */
-const NavMenuContext = createContext<() => void>(() => {});
+const getNavMenuContext = /* @__PURE__ */ createLazyContext<() => void>(
+  () => {},
+);
 
 export type NavMenuProps = {
   /** 菜单钮，通常是顶栏最右边的 `<IconButton>`。不传就用 `open` / `onOpenChange` 自己控制 */
@@ -68,6 +70,8 @@ export function NavMenu({
   className,
   children,
 }: NavMenuProps) {
+  const NavMenuContext = getNavMenuContext();
+  const NavActionContext = getNavActionContext();
   const [isOpen, setOpen] = useControllableState({
     value: open,
     defaultValue: defaultOpen,
@@ -114,11 +118,11 @@ export function NavMenu({
             ref={bodyRef}
             className="flex min-h-0 flex-1 flex-col overflow-y-auto overscroll-contain"
           >
-            <NavMenuContext value={() => setOpen(false)}>
+            <NavMenuContext.Provider value={() => setOpen(false)}>
               <nav aria-label={navLabel}>
                 <ul className="flex flex-col gap-1 p-4">{children}</ul>
               </nav>
-            </NavMenuContext>
+            </NavMenuContext.Provider>
 
             {tools && (
               <div className="mx-4 flex flex-wrap gap-1 bg-surface-muted p-1">
@@ -146,7 +150,9 @@ export function NavMenu({
 
             {footer && (
               <div className="flex shrink-0 flex-col gap-2 p-4">
-                <NavActionContext value="block">{footer}</NavActionContext>
+                <NavActionContext.Provider value="block">
+                  {footer}
+                </NavActionContext.Provider>
               </div>
             )}
           </div>
@@ -204,7 +210,7 @@ export function NavMenuItem({
   children,
   ...props
 }: NavMenuItemProps) {
-  const close = useContext(NavMenuContext);
+  const close = useContext(getNavMenuContext());
   const isLink = href !== undefined || render !== undefined;
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {

package/src/components/radio/Radio.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useId,
   useMemo,
@@ -18,6 +17,7 @@ import {
   choiceMark,
 } from "../checkbox/choice-style";
 import { useFieldContext } from "../field/Field";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 type RadioGroupContextValue = {
   name: string;
@@ -28,7 +28,8 @@ type RadioGroupContextValue = {
   invalid: boolean;
 };
 
-const RadioGroupContext = createContext<RadioGroupContextValue | null>(null);
+const getRadioGroupContext =
+  /* @__PURE__ */ createLazyContext<RadioGroupContextValue | null>(null);
 
 export type RadioGroupOrientation = "vertical" | "horizontal";
 
@@ -64,6 +65,7 @@ export function RadioGroup({
   className,
   ...props
 }: RadioGroupProps) {
+  const RadioGroupContext = getRadioGroupContext();
   const field = useFieldContext();
   const autoName = useId();
   const [current, setCurrent] = useControllableState<string | undefined>({
@@ -92,7 +94,7 @@ export function RadioGroup({
   );
 
   return (
-    <RadioGroupContext value={context}>
+    <RadioGroupContext.Provider value={context}>
       <div
         role="radiogroup"
         // 字段是 <fieldset> 时名称由 <legend> 给；否则指向字段的标签
@@ -109,7 +111,7 @@ export function RadioGroup({
           className,
         )}
       />
-    </RadioGroupContext>
+    </RadioGroupContext.Provider>
   );
 }
 
@@ -134,7 +136,7 @@ export function Radio({
   children,
   ...props
 }: RadioProps) {
-  const group = useContext(RadioGroupContext);
+  const group = useContext(getRadioGroupContext());
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     onChange?.(event);

package/src/components/schedule/Schedule.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useMemo,
   type ComponentProps,
@@ -14,6 +13,7 @@ import { decor } from "../../lib/decor";
 import { focusRingInset } from "../../lib/focus-ring";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
 import { Tag } from "../tag/Tag";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 type ScheduleContextValue = {
   start: string;
@@ -23,10 +23,11 @@ type ScheduleContextValue = {
   describe: (start: string, end: string) => string;
 };
 
-const ScheduleContext = createContext<ScheduleContextValue | null>(null);
+const getScheduleContext =
+  /* @__PURE__ */ createLazyContext<ScheduleContextValue | null>(null);
 
 function useSchedule(part: string) {
-  const context = useContext(ScheduleContext);
+  const context = useContext(getScheduleContext());
   if (!context) throw new Error(`${part} 要放在 Schedule 里面`);
   return context;
 }
@@ -86,6 +87,7 @@ export function Schedule({
   children,
   ...props
 }: ScheduleProps) {
+  const ScheduleContext = getScheduleContext();
   const [scrollerRef, overflowing] = useOverflowing();
   const dates = useMemo(() => eachDay(start, end), [start, end]);
   const days = dates.length;
@@ -125,7 +127,7 @@ export function Schedule({
       : null;
 
   return (
-    <ScheduleContext value={context}>
+    <ScheduleContext.Provider value={context}>
       <div
         ref={scrollerRef}
         {...props}
@@ -257,7 +259,7 @@ export function Schedule({
           )}
         </div>
       </div>
-    </ScheduleContext>
+    </ScheduleContext.Provider>
   );
 }
 

package/src/components/segmented-control/SegmentedControl.tsx

@@ -1,5 +1,4 @@
 import {
-  createContext,
   useContext,
   useId,
   useMemo,
@@ -18,6 +17,7 @@ import {
   type ControlSize,
   type ControlVariant,
 } from "../input/control-box";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type SegmentedControlSize = ControlSize;
 export type SegmentedControlVariant = ControlVariant;
@@ -32,7 +32,8 @@ type SegmentedContextValue = {
   invalid: boolean;
 };
 
-const SegmentedContext = createContext<SegmentedContextValue | null>(null);
+const getSegmentedContext =
+  /* @__PURE__ */ createLazyContext<SegmentedContextValue | null>(null);
 
 export type SegmentedControlProps = Omit<
   ComponentProps<"div">,
@@ -85,6 +86,7 @@ export function SegmentedControl({
   ref,
   ...props
 }: SegmentedControlProps) {
+  const SegmentedContext = getSegmentedContext();
   const field = useFieldContext();
   // 选中的那块底画在轨道上：换一段时是同一块滑过去
   const trackRef = useIndicator<HTMLDivElement>("[data-selected]");
@@ -116,7 +118,7 @@ export function SegmentedControl({
   );
 
   return (
-    <SegmentedContext value={context}>
+    <SegmentedContext.Provider value={context}>
       <div
         role="radiogroup"
         // 字段是 <fieldset> 时名称由 <legend> 给；否则指向字段的标签
@@ -149,7 +151,7 @@ export function SegmentedControl({
           className,
         )}
       />
-    </SegmentedContext>
+    </SegmentedContext.Provider>
   );
 }
 
@@ -182,7 +184,7 @@ export function Segment({
   children,
   ...props
 }: SegmentProps) {
-  const context = useContext(SegmentedContext);
+  const context = useContext(getSegmentedContext());
   if (!context) {
     throw new Error("<Segment> 必须放在 <SegmentedControl> 里");
   }

package/src/components/select/Select.tsx

@@ -1,6 +1,5 @@
 import { Select as BaseSelect } from "@base-ui/react/select";
 import {
-  createContext,
   Fragment,
   useContext,
   useRef,
@@ -13,7 +12,7 @@ import { StatusDanger } from "../../icons/StatusDanger";
 import { TriangleRight } from "../../icons/TriangleRight";
 import { cn } from "../../lib/cn";
 import {
-  MenuVariantContext,
+  getMenuVariantContext,
   menuGroupLabel,
   menuItem,
   menuItemCurrent,
@@ -31,6 +30,7 @@ import {
   type ControlSize,
   type ControlVariant,
 } from "../input/control-box";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type SelectSize = ControlSize;
 export type SelectVariant = ControlVariant;
@@ -107,7 +107,7 @@ export type SelectMultipleProps = SelectCommonProps & {
 export type SelectProps = SelectSingleProps | SelectMultipleProps;
 
 /** 面板里的选项要知道自己在不在多选的下拉里 */
-const SelectMultipleContext = createContext(false);
+const getSelectMultipleContext = /* @__PURE__ */ createLazyContext(false);
 
 function joinedLabels(selected: SelectOption[]) {
   return (
@@ -137,6 +137,8 @@ function joinedLabels(selected: SelectOption[]) {
  * 选项只有两三个、又都该一眼看到时，用单选或页签，不用它。
  */
 export function Select(props: SelectProps) {
+  const MenuVariantContext = getMenuVariantContext();
+  const SelectMultipleContext = getSelectMultipleContext();
   const {
     items,
     placeholder,
@@ -253,8 +255,8 @@ export function Select(props: SelectProps) {
             className={cn(menuPanel, "min-w-(--anchor-width)")}
           >
             <BaseSelect.List className="max-h-[min(var(--available-height),20rem)] overflow-y-auto overscroll-contain">
-              <MenuVariantContext value={panelVariant}>
-                <SelectMultipleContext value={multiple}>
+              <MenuVariantContext.Provider value={panelVariant}>
+                <SelectMultipleContext.Provider value={multiple}>
                   {children ??
                     items.map((item) => (
                       <SelectItem
@@ -265,8 +267,8 @@ export function Select(props: SelectProps) {
                         {item.label}
                       </SelectItem>
                     ))}
-                </SelectMultipleContext>
-              </MenuVariantContext>
+                </SelectMultipleContext.Provider>
+              </MenuVariantContext.Provider>
             </BaseSelect.List>
           </BaseSelect.Popup>
         </BaseSelect.Positioner>
@@ -320,8 +322,8 @@ export function SelectItem({
   children,
   ...props
 }: SelectItemProps) {
-  const variant = useContext(MenuVariantContext);
-  const multiple = useContext(SelectMultipleContext);
+  const variant = useContext(getMenuVariantContext());
+  const multiple = useContext(getSelectMultipleContext());
 
   return (
     <BaseSelect.Item

package/src/components/side-rail/SideRail.tsx

@@ -1,6 +1,5 @@
 import { Tooltip as BaseTooltip } from "@base-ui/react/tooltip";
 import {
-  createContext,
   useContext,
   useMemo,
   type ComponentProps,
@@ -11,9 +10,14 @@ import { usePortalScope } from "../../hooks/usePortalScope";
 import { cn } from "../../lib/cn";
 import { focusRingInset } from "../../lib/focus-ring";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
-import { NavActionContext } from "../nav-action/NavAction";
+import { getNavActionContext } from "../nav-action/NavAction";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
-export const SideRailContext = createContext({ collapsed: false });
+export const getSideRailContext = /* @__PURE__ */ createLazyContext<{
+  collapsed: boolean;
+}>({
+  collapsed: false,
+});
 
 /**
  * 一行栏目的样子：普通栏目和二级的父项共用。
@@ -92,10 +96,12 @@ export function SideRail({
   children,
   ...props
 }: SideRailProps) {
+  const SideRailContext = getSideRailContext();
+  const NavActionContext = getNavActionContext();
   const context = useMemo(() => ({ collapsed }), [collapsed]);
 
   return (
-    <SideRailContext value={context}>
+    <SideRailContext.Provider value={context}>
       <nav
         {...props}
         data-collapsed={collapsed ? "" : undefined}
@@ -137,9 +143,9 @@ export function SideRail({
           <div
             className={cn("flex shrink-0 p-3", collapsed && "justify-center")}
           >
-            <NavActionContext value={collapsed ? "stacked" : "block"}>
+            <NavActionContext.Provider value={collapsed ? "stacked" : "block"}>
               {action}
-            </NavActionContext>
+            </NavActionContext.Provider>
           </div>
         )}
 
@@ -154,7 +160,7 @@ export function SideRail({
           </div>
         )}
       </nav>
-    </SideRailContext>
+    </SideRailContext.Provider>
   );
 }
 
@@ -195,7 +201,7 @@ export function SideRailItem({
   children,
   ...props
 }: SideRailItemProps) {
-  const { collapsed } = useContext(SideRailContext);
+  const { collapsed } = useContext(getSideRailContext());
   const { anchorRef, portalRef } = usePortalScope();
   const isLink = href !== undefined || render !== undefined;
 
@@ -294,7 +300,7 @@ export function SideRailGroup({
   children,
   ...props
 }: SideRailGroupProps) {
-  const { collapsed } = useContext(SideRailContext);
+  const { collapsed } = useContext(getSideRailContext());
 
   return (
     <li {...props} className={cn("not-first:mt-2", className)}>

package/src/components/side-rail/SideRailSub.tsx

@@ -2,7 +2,6 @@ import { Collapsible as BaseCollapsible } from "@base-ui/react/collapsible";
 import { Menu as BaseMenu } from "@base-ui/react/menu";
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   useEffect,
@@ -25,10 +24,13 @@ import {
   menuPanel,
 } from "../dropdown-menu/menu-style";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
-import { RailIcon, railItemClass, SideRailContext } from "./SideRail";
+import { RailIcon, railItemClass, getSideRailContext } from "./SideRail";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 /** 子项要知道自己是排在侧轨里，还是在收起时弹出的那块菜单里 */
-const SubContext = createContext<"list" | "menu">("list");
+const getSubContext = /* @__PURE__ */ createLazyContext<"list" | "menu">(
+  "list",
+);
 
 type SubOwnProps = {
   /** 图标。收起时只剩它 */
@@ -63,7 +65,8 @@ export function SideRailSub({
   children,
   ...props
 }: SideRailSubProps) {
-  const { collapsed } = useContext(SideRailContext);
+  const SubContext = getSubContext();
+  const { collapsed } = useContext(getSideRailContext());
   const { anchorRef, portalRef } = usePortalScope();
 
   // 当前项在不在里面：从子元素上读，所以 SideRailSubItem 要直接放在这里
@@ -121,7 +124,9 @@ export function SideRailSub({
                   <BaseMenu.GroupLabel className={menuGroupLabel}>
                     {label}
                   </BaseMenu.GroupLabel>
-                  <SubContext value="menu">{children}</SubContext>
+                  <SubContext.Provider value="menu">
+                    {children}
+                  </SubContext.Provider>
                 </BaseMenu.Group>
               </BaseMenu.Popup>
             </BaseMenu.Positioner>
@@ -167,7 +172,7 @@ export function SideRailSub({
             aria-label={label}
             className="relative before:absolute before:inset-y-0 before:left-8 before:w-px before:bg-line before:content-['']"
           >
-            <SubContext value="list">{children}</SubContext>
+            <SubContext.Provider value="list">{children}</SubContext.Provider>
           </ul>
         </BaseCollapsible.Panel>
       </BaseCollapsible.Root>
@@ -208,7 +213,7 @@ export function SideRailSubItem({
   children,
   ...props
 }: SideRailSubItemProps) {
-  const placement = useContext(SubContext);
+  const placement = useContext(getSubContext());
   const isLink = href !== undefined || render !== undefined;
 
   const content = (

package/src/components/steps/Steps.tsx

@@ -1,6 +1,5 @@
 import {
   Children,
-  createContext,
   useContext,
   type ComponentProps,
   type MouseEventHandler,
@@ -11,6 +10,7 @@ import { StatusDanger } from "../../icons/StatusDanger";
 import { cn } from "../../lib/cn";
 import { focusRingWithin } from "../../lib/focus-ring";
 import { LinkElement, type LinkRender } from "../link-element/LinkElement";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type StepsOrientation = "horizontal" | "vertical";
 export type StepsSize = "sm" | "md";
@@ -37,7 +37,8 @@ type StepContextValue = {
   labels: StepStatusLabels;
 };
 
-const StepContext = createContext<StepContextValue | null>(null);
+const getStepContext =
+  /* @__PURE__ */ createLazyContext<StepContextValue | null>(null);
 
 export type StepsProps = Omit<ComponentProps<"ol">, "aria-label"> & {
   /** 这是哪件事的步骤，比如"建站流程" */
@@ -107,6 +108,7 @@ export function Steps({
   children,
   ...props
 }: StepsProps) {
+  const StepContext = getStepContext();
   const labels = { ...defaultLabels, ...statusLabels };
   const steps = Children.toArray(children);
 
@@ -118,7 +120,7 @@ export function Steps({
     >
       <ol {...props} className={cn("flex", listLayout[orientation])}>
         {steps.map((step, index) => (
-          <StepContext
+          <StepContext.Provider
             // 步骤是按位置认的：序号、状态都从位置来
             key={index}
             value={{
@@ -135,7 +137,7 @@ export function Steps({
             }}
           >
             {step}
-          </StepContext>
+          </StepContext.Provider>
         ))}
       </ol>
     </div>
@@ -203,7 +205,7 @@ export function Step({
   className,
   ...props
 }: StepProps) {
-  const context = useContext(StepContext);
+  const context = useContext(getStepContext());
   if (!context) {
     throw new Error("<Step> 必须放在 <Steps> 里");
   }

package/src/components/table/Table.tsx

@@ -1,6 +1,5 @@
 import {
   Children,
-  createContext,
   isValidElement,
   useContext,
   useEffect,
@@ -22,6 +21,7 @@ import { cn } from "../../lib/cn";
 import { focusRing, focusRingInset } from "../../lib/focus-ring";
 import { mergeRefs } from "../../lib/merge-refs";
 import { collapse, collapseEnter, collapseInner } from "../../lib/motion";
+import { createLazyContext } from "../../lib/create-lazy-context";
 
 export type TableHeaderVariant = "band" | "muted";
 export type TableSize = "sm" | "md";
@@ -36,7 +36,7 @@ type TableContextValue = {
   ruled: boolean;
 };
 
-const TableContext = createContext<TableContextValue>({
+const getTableContext = /* @__PURE__ */ createLazyContext<TableContextValue>({
   headerVariant: "band",
   size: "md",
   sticky: false,
@@ -45,10 +45,12 @@ const TableContext = createContext<TableContextValue>({
 });
 
 /** 单元格要知道自己在表头里还是表身里 */
-const SectionContext = createContext<"head" | "body">("body");
+const getSectionContext = /* @__PURE__ */ createLazyContext<"head" | "body">(
+  "body",
+);
 
 /** 能展开的行交给里面的展开钮 */
-const RowContext = createContext<{
+const getRowContext = /* @__PURE__ */ createLazyContext<{
   expanded: boolean;
   toggle: () => void;
   detailId: string;
@@ -97,6 +99,7 @@ export function Table({
   className,
   ...props
 }: TableProps) {
+  const TableContext = getTableContext();
   const [scrollerRef, overflowing] = useOverflowing();
   const scrollable = overflowing.x || overflowing.y;
 
@@ -123,7 +126,7 @@ export function Table({
   );
 
   return (
-    <TableContext value={context}>
+    <TableContext.Provider value={context}>
       <div
         ref={scrollerRef}
         // 冻结列右缘的那条线只看横向
@@ -151,23 +154,24 @@ export function Table({
           className="w-full border-separate border-spacing-0 text-left text-sm text-ink"
         />
       </div>
-    </TableContext>
+    </TableContext.Provider>
   );
 }
 
 export type TableHeadProps = ComponentProps<"thead">;
 
 export function TableHead(props: TableHeadProps) {
-  const { headerVariant } = useContext(TableContext);
+  const SectionContext = getSectionContext();
+  const { headerVariant } = useContext(getTableContext());
   return (
-    <SectionContext value="head">
+    <SectionContext.Provider value="head">
       <thead
         // 反转的标题带整个换成反转主题：列头的焦点环、排序的三角、
         // 放在里面的复选框都按这条带子的底色取值
         data-theme={headerVariant === "band" ? "inverse" : undefined}
         {...props}
       />
-    </SectionContext>
+    </SectionContext.Provider>
   );
 }
 
@@ -184,11 +188,12 @@ const ruledLines = [
 ].join(" ");
 
 export function TableBody({ className, ...props }: TableBodyProps) {
-  const { ruled } = useContext(TableContext);
+  const SectionContext = getSectionContext();
+  const { ruled } = useContext(getTableContext());
   return (
-    <SectionContext value="body">
+    <SectionContext.Provider value="body">
       <tbody {...props} className={cn(ruled && ruledLines, className)} />
-    </SectionContext>
+    </SectionContext.Provider>
   );
 }
 
@@ -233,7 +238,8 @@ export function TableRow({
   children,
   ...props
 }: TableRowProps) {
-  const section = useContext(SectionContext);
+  const RowContext = getRowContext();
+  const section = useContext(getSectionContext());
   const rowRef = useRef<HTMLTableRowElement>(null);
   const detailId = useId();
   const [expanded, setExpanded] = useControllableState({
@@ -279,7 +285,7 @@ export function TableRow({
           className,
         )}
       >
-        <RowContext value={context}>{children}</RowContext>
+        <RowContext.Provider value={context}>{children}</RowContext.Provider>
       </tr>
       {detailPresence.mounted && (
         <DetailRow
@@ -377,7 +383,7 @@ export function TableExpander({
   onClick,
   ...props
 }: TableExpanderProps) {
-  const row = useContext(RowContext);
+  const row = useContext(getRowContext());
   if (!row) return null;
 
   return (
@@ -460,7 +466,7 @@ export function TableHeaderCell({
   children,
   ...props
 }: TableHeaderCellProps) {
-  const { headerVariant, sticky, stickyHeader } = useContext(TableContext);
+  const { headerVariant, sticky, stickyHeader } = useContext(getTableContext());
 
   return (
     <th
@@ -542,7 +548,7 @@ export function TableCell({
   children,
   ...props
 }: TableCellProps) {
-  const { size, sticky } = useContext(TableContext);
+  const { size, sticky } = useContext(getTableContext());
   const Cell = rowHeader ? "th" : "td";
 
   return (