@lumiose/ui 0.1.2 → 0.2.0

package/dist/accordion/accordion.tsx

@@ -18,6 +18,7 @@ import {
 import defineAccordion from "./accordion.script.ts?client";
 import type { LuAccordion } from "./accordion.script.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -119,13 +120,13 @@ const HeaderContext = createContext<AccordionHeaderProps>();
 
 function useAccordion(): AccordionContextValue {
   const context = useContext(AccordionContext);
-  if (!context) throw new Error("Accordion parts must be inside <Accordion.Root>.");
+  if (!context) throw notInside("Accordion parts", "<Accordion.Root>");
   return context;
 }
 
 function useItem(): ItemContextValue {
   const context = useContext(ItemContext);
-  if (!context) throw new Error("Accordion parts must be inside an <Accordion.Item>.");
+  if (!context) throw notInside("Accordion parts", "an <Accordion.Item>");
   return context;
 }
 

package/dist/collapsible/collapsible.tsx

@@ -7,6 +7,7 @@
 import { createContext, effect, ref, untrack, useContext, useId } from "lumiose";
 import collapsibleScript from "./collapsible.script.ts?client";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 /**
  * The `<details>` props Root passes on (`class`, `style`, `name`, `data-*`, `aria-*`, events),
@@ -54,7 +55,7 @@ const CollapsibleContext = createContext<CollapsibleContextValue>();
 
 function useCollapsible(): CollapsibleContextValue {
   const context = useContext(CollapsibleContext);
-  if (!context) throw new Error("Collapsible parts must be inside <Collapsible.Root>.");
+  if (!context) throw notInside("Collapsible parts", "<Collapsible.Root>");
   return context;
 }
 

package/dist/collapsible/panel.ts

@@ -34,7 +34,9 @@ function panelOf(details: HTMLDetailsElement): HTMLElement | undefined {
 
 /** The variables' prefix: an accordion item is a `<details>` right inside `<lu-accordion>`. */
 const prefix = (details: HTMLDetailsElement) =>
-  details.parentElement?.localName === "lu-accordion" ? "--lu-accordion-panel" : "--lu-collapsible-panel";
+  details.parentElement?.localName === "lu-accordion"
+    ? "--lu-accordion-panel"
+    : "--lu-collapsible-panel";
 
 function measure(panel: HTMLElement, name: string) {
   panel.style.setProperty(`${name}-height`, `${panel.scrollHeight}px`);

package/dist/combobox/combobox.tsx

@@ -28,6 +28,7 @@ import { onFormReset } from "../form/reset.ts";
 import { anchorName, placement, withStyle, type PlacementProps } from "../placement/placement.ts";
 import { ComboboxContext, register, useCombobox, type ComboboxContextValue } from "./context.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -489,7 +490,7 @@ function GroupElement({
 
 function GroupLabel({ children, ...rest }: ComboboxGroupLabelProps) {
   const group = useContext(GroupContext);
-  if (!group) throw new Error("Combobox.GroupLabel must be inside <Combobox.Group>.");
+  if (!group) throw notInside("Combobox.GroupLabel", "<Combobox.Group>");
   register(group.labels);
   return (
     <div role="presentation" {...rest} id={group.labelId}>

package/dist/combobox/context.ts

@@ -1,6 +1,7 @@
 // The context the Combobox parts share, with Autocomplete's Root (TASK-377): the same parts work
 // under either Root, which says how the input behaves.
 import { createContext, onCleanup, useContext, type Signal } from "lumiose";
+import { notInside } from "../not-inside.ts";
 
 export interface ComboboxContextValue {
   /** The element's id; the parts' ids and the anchor name derive from it. */
@@ -35,7 +36,7 @@ export const ComboboxContext = createContext<ComboboxContextValue>();
 
 export function useCombobox(): ComboboxContextValue {
   const context = useContext(ComboboxContext);
-  if (!context) throw new Error("Combobox parts must be inside <Combobox.Root>.");
+  if (!context) throw notInside("Combobox parts", "<Combobox.Root>");
   return context;
 }
 

package/dist/context-menu/context-menu.tsx

@@ -20,6 +20,7 @@ import { anchorName } from "../placement/placement.ts";
 import contextMenuScript from "./context-menu.script.ts?client";
 import type { ContextMenuElement } from "./context-menu.script.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -72,7 +73,7 @@ const ContextMenuContext = createContext<ContextMenuContextValue>();
 
 function useContextMenu(): ContextMenuContextValue {
   const context = useContext(ContextMenuContext);
-  if (!context) throw new Error("ContextMenu parts must be inside <ContextMenu.Root>.");
+  if (!context) throw notInside("ContextMenu parts", "<ContextMenu.Root>");
   return context;
 }
 

package/dist/dialog/dialog.tsx

@@ -17,6 +17,7 @@ import {
 } from "lumiose";
 import dialogScript from "./dialog.script.ts?client";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 /**
  * `Dialog.Root` renders no element: it holds the dialog's state and the ids its parts share.
@@ -69,7 +70,7 @@ const DialogContext = createContext<DialogContextValue>();
 
 function useDialog(): DialogContextValue {
   const context = useContext(DialogContext);
-  if (!context) throw new Error("Dialog parts must be inside <Dialog.Root>.");
+  if (!context) throw notInside("Dialog parts", "<Dialog.Root>");
   return context;
 }
 

package/dist/drawer/drawer.tsx

@@ -13,6 +13,7 @@ import {
   type DialogTriggerProps,
 } from "../dialog/dialog.tsx";
 import drawerScript from "./drawer.script.ts?client";
+import { notInside } from "../not-inside.ts";
 
 /** The direction a swipe closes the drawer in, and the edge of the window it sits against. */
 export type DrawerSwipeDirection = "up" | "down" | "left" | "right";
@@ -68,7 +69,7 @@ function Root(props: DrawerRootProps) {
 
 function Popup({ children, ...rest }: DrawerPopupProps) {
   const drawer = useContext(DrawerContext);
-  if (!drawer) throw new Error("Drawer parts must be inside <Drawer.Root>.");
+  if (!drawer) throw notInside("Drawer parts", "<Drawer.Root>");
   return (
     <Dialog.Popup {...rest} data-swipe-direction={drawer.direction()}>
       {children}

package/dist/field/field.tsx

@@ -32,6 +32,7 @@ import fieldScript from "./field.script.ts?client";
 import { listenToForm, reportValidity } from "../form/native.ts";
 import { Input, type InputProps } from "../input/input.tsx";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -373,7 +374,7 @@ function Validity({ children }: FieldValidityProps) {
 
 function useFieldPart(part: string): FieldContextValue {
   const field = useContext(FieldContext);
-  if (!field) throw new Error(`Field.${part} must be inside <Field.Root>.`);
+  if (!field) throw notInside(`Field.${part}`, "<Field.Root>");
   return field;
 }
 

package/dist/index.ts

@@ -259,3 +259,20 @@ export type {
   NavigationMenuRootProps,
   NavigationMenuTriggerProps,
 } from "./navigation-menu/navigation-menu.tsx";
+export {
+  createVirtualizer,
+  VirtualGrid,
+  VirtualList,
+  VirtualTable,
+} from "./virtualizer/virtual.tsx";
+export type {
+  Virtualizer,
+  VirtualizerOptions,
+  VirtualizerScrollOptions,
+  VirtualizerValue,
+  VirtualGridProps,
+  VirtualItem,
+  VirtualListProps,
+  VirtualProps,
+  VirtualTableProps,
+} from "./virtualizer/virtual.tsx";

package/dist/menu/menu.tsx

@@ -22,6 +22,7 @@ import menuScript from "./menu.script.ts?client";
 import { anchorName, placement, withStyle, type Align, type Side } from "../placement/placement.ts";
 import { OUTSIDE_TOOLBAR, ToolbarContext } from "../toolbar/context.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -190,7 +191,7 @@ const RadioContext = createContext<{ value: () => string | undefined }>();
 
 function useMenu(): MenuContextValue {
   const context = useContext(MenuContext);
-  if (!context) throw new Error("Menu parts must be inside <Menu.Root>.");
+  if (!context) throw notInside("Menu parts", "<Menu.Root>");
   return context;
 }
 
@@ -417,7 +418,7 @@ function Group(props: MenuGroupProps) {
 
 function GroupLabel({ children, ...rest }: MenuGroupLabelProps) {
   const group = useContext(GroupContext);
-  if (!group) throw new Error("Menu.GroupLabel must be inside <Menu.Group> or <Menu.RadioGroup>.");
+  if (!group) throw notInside("Menu.GroupLabel", "<Menu.Group> or <Menu.RadioGroup>");
   register(group.labels);
   return (
     <div role="presentation" {...rest} id={group.labelId}>
@@ -467,7 +468,7 @@ function RadioItem({
 }: MenuRadioItemProps) {
   useMenu();
   const radio = useContext(RadioContext);
-  if (!radio) throw new Error("Menu.RadioItem must be inside <Menu.RadioGroup>.");
+  if (!radio) throw notInside("Menu.RadioItem", "<Menu.RadioGroup>");
   return (
     <button
       type="button"

package/dist/meter/meter.tsx

@@ -6,6 +6,7 @@
 import { createContext, useContext, useId } from "lumiose";
 import { withStyle } from "../placement/placement.ts";
 import { formatValue, percent } from "../progress/value.ts";
+import { notInside } from "../not-inside.ts";
 
 interface MeterContextValue {
   id: string;
@@ -52,7 +53,7 @@ export type MeterValueProps = Omit<JSX.IntrinsicElements["span"], "children"> &
 
 function useMeter(part: string): MeterContextValue {
   const context = useContext(MeterContext);
-  if (!context) throw new Error(`Meter.${part} must be inside <Meter.Root>.`);
+  if (!context) throw notInside(`Meter.${part}`, "<Meter.Root>");
   return context;
 }
 

package/dist/navigation-menu/navigation-menu.tsx

@@ -16,6 +16,7 @@ import type {
   NavigationMenuValueChangeDetail,
 } from "./navigation-menu.script.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -100,7 +101,7 @@ const ItemContext = createContext<ItemContextValue>();
 
 function useItem(part: string): ItemContextValue {
   const item = useContext(ItemContext);
-  if (!item) throw new Error(`NavigationMenu.${part} must be inside <NavigationMenu.Item>.`);
+  if (!item) throw notInside(`NavigationMenu.${part}`, "<NavigationMenu.Item>");
   return item;
 }
 

package/dist/not-inside.ts

@@ -0,0 +1,13 @@
+// The error a compound component's part throws when the Root (or another part) it needs is not
+// above it. The case that is hard to see is an island in between (TASK-550): a part passed to an
+// island as a slot renders in the page, where the Root the island renders around the slot is not.
+
+/** `subject must be inside container.`, with the island hint. */
+export function notInside(subject: string, container: string): Error {
+  return new Error(
+    `${subject} must be inside ${container}. If this part looks inside, check for an island in between: ` +
+      "a part passed to an island as a slot (children or a JSX prop) renders in the page, not inside " +
+      "the components the island renders around it. Pass the data as props and render the parts " +
+      "inside the island.",
+  );
+}

package/dist/number-field/number-field.tsx

@@ -25,6 +25,7 @@ import { formatNumber, formatter } from "./format.ts";
 import type { NumberFieldElement } from "./number-field.script.ts";
 import numberFieldScript from "./number-field.script.ts?client";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -165,7 +166,7 @@ const NumberFieldContext = createContext<NumberFieldContextValue>();
 
 function useNumberField(part: string): NumberFieldContextValue {
   const context = useContext(NumberFieldContext);
-  if (!context) throw new Error(`NumberField.${part} must be inside <NumberField.Root>.`);
+  if (!context) throw notInside(`NumberField.${part}`, "<NumberField.Root>");
   return context;
 }
 

package/dist/otp-field/otp-field.tsx

@@ -13,6 +13,7 @@ import { onFormReset } from "../form/reset.ts";
 import type { OTPFieldElement, OTPFieldValueDetail } from "./otp-field.script.ts";
 import otpFieldScript from "./otp-field.script.ts?client";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -145,7 +146,7 @@ const OTPFieldContext = createContext<OTPFieldContextValue>();
 
 function useOTPField(part: string): OTPFieldContextValue {
   const context = useContext(OTPFieldContext);
-  if (!context) throw new Error(`OTPField.${part} must be inside <OTPField.Root>.`);
+  if (!context) throw notInside(`OTPField.${part}`, "<OTPField.Root>");
   return context;
 }
 

package/dist/popover/hover.ts

@@ -157,7 +157,8 @@ export function hoverIntent(source: HoverSource): HoverIntent {
     const { popup, x, y } = corridor;
     // Arrived (the popup's `pointerover` cancelled the close), or closed already.
     if (!closing.has(popup)) corridor = undefined;
-    else if (toward(popup.getBoundingClientRect(), x, y, event.clientX, event.clientY)) close(popup);
+    else if (toward(popup.getBoundingClientRect(), x, y, event.clientX, event.clientY))
+      close(popup);
     else corridor = undefined;
   });
 

package/dist/popover/popover.tsx

@@ -28,6 +28,7 @@ import popoverScript from "./popover.script.ts?client";
 import popoverHoverScript from "./popover-hover.script.ts?client";
 import { OUTSIDE_TOOLBAR, ToolbarContext } from "../toolbar/context.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 /**
  * `Popover.Root` renders no element: it holds the ids its parts share. `bind:open={signal}`
@@ -97,7 +98,7 @@ const PopoverContext = createContext<PopoverContextValue>();
 
 function usePopover(): PopoverContextValue {
   const context = useContext(PopoverContext);
-  if (!context) throw new Error("Popover parts must be inside <Popover.Root>.");
+  if (!context) throw notInside("Popover parts", "<Popover.Root>");
   return context;
 }
 
@@ -174,13 +175,16 @@ function Trigger({
       ? { command: "show-modal", commandfor: popover.popupId, "aria-expanded": "false" as const }
       : { popovertarget: popover.popupId };
   // A function, so hover opening and its delays follow the props: the script reads them from
-  // the trigger at each hover (TASK-477).
-  const hover = () =>
-    openOnHover && !popover.modal && !off
-      ? { "data-open-on-hover": "", "data-delay": delay, "data-close-delay": closeDelay }
-      : {};
-  // Only a hover trigger loads the hover timing on a server page (TASK-541).
-  if (untrack(() => openOnHover)) popoverHoverScript();
+  // the trigger at each hover (TASK-477). Only a hover trigger loads the hover timing (TASK-541),
+  // on a server page or in an island, once `openOnHover` is on: the call is conditional, so an
+  // island loads the script when it is made (TASK-551).
+  const hover = () => {
+    if (openOnHover && !popover.modal && !off) {
+      popoverHoverScript();
+      return { "data-open-on-hover": "", "data-delay": delay, "data-close-delay": closeDelay };
+    }
+    return {};
+  };
   return (
     <button
       type="button"

package/dist/preview-card/preview-card.tsx

@@ -8,6 +8,7 @@ import { createContext, effect, ref, useContext, useId } from "lumiose";
 import { anchorName, placement, withStyle, type PlacementProps } from "../placement/placement.ts";
 import previewCardScript from "./preview-card.script.ts?client";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 /**
  * `PreviewCard.Root` renders no element: it holds the ids its parts share. `bind:open={signal}`
@@ -44,7 +45,7 @@ const PreviewCardContext = createContext<PreviewCardContextValue>();
 
 function usePreviewCard(part: string): PreviewCardContextValue {
   const context = useContext(PreviewCardContext);
-  if (!context) throw new Error(`PreviewCard.${part} must be inside <PreviewCard.Root>.`);
+  if (!context) throw notInside(`PreviewCard.${part}`, "<PreviewCard.Root>");
   return context;
 }
 

package/dist/progress/progress.tsx

@@ -6,6 +6,7 @@
 import { createContext, useContext, useId } from "lumiose";
 import { withStyle } from "../placement/placement.ts";
 import { formatValue, percent } from "./value.ts";
+import { notInside } from "../not-inside.ts";
 
 interface ProgressContextValue {
   id: string;
@@ -52,7 +53,7 @@ export type ProgressValueProps = Omit<JSX.IntrinsicElements["span"], "children">
 
 function useProgress(part: string): ProgressContextValue {
   const context = useContext(ProgressContext);
-  if (!context) throw new Error(`Progress.${part} must be inside <Progress.Root>.`);
+  if (!context) throw notInside(`Progress.${part}`, "<Progress.Root>");
   return context;
 }
 

package/dist/radio-group/radio-group.tsx

@@ -8,6 +8,7 @@ import checkboxScript from "../checkbox/checkbox.script.ts?client";
 import { describedBy, labelledBy, useField, useFormValues } from "../field/context.ts";
 import { onFormReset } from "../form/reset.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 interface RadioGroupContextValue {
   name: () => string;
@@ -137,7 +138,7 @@ export function RadioGroup({
 
 function Root({ value, ...rest }: RadioRootProps) {
   const group = useContext(RadioGroupContext);
-  if (!group) throw new Error("Radio.Root must be inside <RadioGroup>.");
+  if (!group) throw notInside("Radio.Root", "<RadioGroup>");
   return (
     <input
       required={group.required() || undefined}

package/dist/select/select.tsx

@@ -19,6 +19,7 @@ import selectScript from "./select.script.ts?client";
 import { fieldProps, useField, useFormValues } from "../field/context.ts";
 import { onFormReset } from "../form/reset.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -149,14 +150,19 @@ function Value(props: SelectValueProps) {
 
 function Item({ children, value, label, ...rest }: SelectItemProps) {
   const select = useContext(SelectContext);
-  if (!select) throw new Error("Select parts must be inside <Select.Root>.");
-  // Only items with a label need the script.
-  if (untrack(() => label) !== undefined) selectScript();
+  if (!select) throw notInside("Select parts", "<Select.Root>");
+  // Only items with a label need the script. Read where the attribute is, so a label that appears
+  // after an island's first render still loads it (TASK-552; the call is conditional, so an island
+  // loads the script when it is made, TASK-551).
+  const labelled = () => {
+    if (label !== undefined) selectScript();
+    return label;
+  };
   return (
     <option
       aria-label={label}
       {...rest}
-      label={label}
+      label={labelled()}
       value={value}
       selected={select.initial === value || undefined}
     >

package/dist/slider/slider.tsx

@@ -14,6 +14,7 @@ import { formatValues } from "./format.ts";
 import type { SliderElement } from "./slider.script.ts";
 import sliderScript from "./slider.script.ts?client";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -156,7 +157,7 @@ const SliderContext = createContext<SliderContextValue>();
 
 function useSlider(part: string): SliderContextValue {
   const context = useContext(SliderContext);
-  if (!context) throw new Error(`Slider.${part} must be inside <Slider.Root>.`);
+  if (!context) throw notInside(`Slider.${part}`, "<Slider.Root>");
   return context;
 }
 

package/dist/tabs/tabs.tsx

@@ -20,6 +20,7 @@ import { withStyle } from "../placement/placement.ts";
 import defineTabs from "./tabs.script.ts?client";
 import type { LuTabs } from "./tabs.script.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -114,7 +115,7 @@ const TabsContext = createContext<TabsContextValue>();
 
 function useTabs(): TabsContextValue {
   const context = useContext(TabsContext);
-  if (!context) throw new Error("Tabs parts must be inside <Tabs.Root>.");
+  if (!context) throw notInside("Tabs parts", "<Tabs.Root>");
   return context;
 }
 

package/dist/toast/toast.tsx

@@ -17,6 +17,7 @@ import toastScript from "./toast.script.ts?client";
 import { CLOSE_COMMAND } from "./command.ts";
 import type { LuToastViewport } from "./toast.script.ts";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -255,7 +256,7 @@ const ToastItemContext = createContext<ToastItemContextValue>();
 
 function useToastItem(): ToastItemContextValue {
   const context = useContext(ToastItemContext);
-  if (!context) throw new Error("Toast parts must be inside <Toast.Root>.");
+  if (!context) throw notInside("Toast parts", "<Toast.Root>");
   return context;
 }
 

package/dist/toolbar/toolbar.tsx

@@ -14,6 +14,7 @@ import { Separator, type SeparatorProps } from "../separator/separator.tsx";
 import { ToolbarContext, type ToolbarContextValue } from "./context.ts";
 import type { ToolbarElement } from "./toolbar.script.ts";
 import toolbarScript from "./toolbar.script.ts?client";
+import { notInside } from "../not-inside.ts";
 
 declare module "lumiose/jsx-runtime" {
   namespace JSX {
@@ -63,7 +64,7 @@ export type ToolbarSeparatorProps = SeparatorProps;
 
 function useToolbar(part: string): ToolbarContextValue {
   const context = useContext(ToolbarContext);
-  if (!context) throw new Error(`Toolbar.${part} must be inside <Toolbar.Root>.`);
+  if (!context) throw notInside(`Toolbar.${part}`, "<Toolbar.Root>");
   return context;
 }
 

package/dist/tooltip/tooltip.tsx

@@ -9,6 +9,7 @@ import { createContext, effect, ref, useContext, useId } from "lumiose";
 import { anchorName, placement, withStyle, type PlacementProps } from "../placement/placement.ts";
 import tooltipScript from "./tooltip.script.ts?client";
 import { batched } from "../batched.ts";
+import { notInside } from "../not-inside.ts";
 
 /**
  * `Tooltip.Root` renders no element: it holds the ids its parts share. `bind:open={signal}`
@@ -62,7 +63,7 @@ const TooltipContext = createContext<TooltipContextValue>();
 
 function useTooltip(): TooltipContextValue {
   const context = useContext(TooltipContext);
-  if (!context) throw new Error("Tooltip parts must be inside <Tooltip.Root>.");
+  if (!context) throw notInside("Tooltip parts", "<Tooltip.Root>");
   return context;
 }