@enonic/ui 1.6.0 → 1.7.0

package/dist/types/primitives/menu-primitive/menu-primitive.d.ts

@@ -20,25 +20,31 @@ export type MenuItemOwnProps = {
     onSelect?: (event: Event) => void;
     className?: string;
     children: ReactNode;
-} & ComponentPropsWithoutRef<'div'>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'>;
 /** Internal primitive props (own props + context operations for dependency injection) */
 export type MenuPrimitiveItemProps = MenuItemOwnProps & MenuContextOperations;
-export declare const MenuPrimitiveItem: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveItemProps> & {
-    ref?: import('preact').Ref<HTMLDivElement> | undefined;
-}>;
+export declare const MenuPrimitiveItem: import('react').ForwardRefExoticComponent<{
+    id?: string;
+    asChild?: boolean;
+    disabled?: boolean;
+    onSelect?: (event: Event) => void;
+    className?: string;
+    children: ReactNode;
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onSelect"> & MenuContextOperations & import('react').RefAttributes<HTMLDivElement>>;
 export type MenuPrimitiveLabelProps = {
     className?: string;
     children: ReactNode;
 } & ComponentPropsWithoutRef<'div'>;
-export declare const MenuPrimitiveLabel: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveLabelProps> & {
-    ref?: import('preact').Ref<HTMLDivElement> | undefined;
-}>;
+export declare const MenuPrimitiveLabel: import('react').ForwardRefExoticComponent<{
+    className?: string;
+    children: ReactNode;
+} & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 export type MenuPrimitiveSeparatorProps = {
     className?: string;
 } & ComponentPropsWithoutRef<'div'>;
-export declare const MenuPrimitiveSeparator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveSeparatorProps> & {
-    ref?: import('preact').Ref<HTMLDivElement> | undefined;
-}>;
+export declare const MenuPrimitiveSeparator: import('react').ForwardRefExoticComponent<{
+    className?: string;
+} & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
 type RadioGroupContextValue = {
     value: string | undefined;
     setValue: (value: string) => void;
@@ -59,9 +65,16 @@ export type MenuRadioGroupOwnProps = {
 export type MenuPrimitiveRadioGroupProps = MenuRadioGroupOwnProps & {
     setOpen: (open: boolean) => void;
 };
-export declare const MenuPrimitiveRadioGroup: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveRadioGroupProps> & {
-    ref?: import('preact').Ref<HTMLDivElement> | undefined;
-}>;
+export declare const MenuPrimitiveRadioGroup: import('react').ForwardRefExoticComponent<{
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    closeOnSelect?: boolean;
+    className?: string;
+    children?: ReactNode;
+} & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    setOpen: (open: boolean) => void;
+} & import('react').RefAttributes<HTMLDivElement>>;
 export declare const menuRadioItemVariants: (props?: ({
     active?: boolean | null | undefined;
     disabled?: boolean | null | undefined;
@@ -76,18 +89,26 @@ export type MenuRadioItemOwnProps = {
     onSelect?: (event: Event) => void;
     className?: string;
     children: ReactNode;
-} & ComponentPropsWithoutRef<'div'>;
+} & Omit<ComponentPropsWithoutRef<'div'>, 'onSelect'>;
 /** Internal primitive props (own props + context operations except setOpen, which comes from RadioGroup) */
 export type MenuPrimitiveRadioItemProps = MenuRadioItemOwnProps & Omit<MenuContextOperations, 'setOpen'>;
-export declare const MenuPrimitiveRadioItem: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveRadioItemProps> & {
-    ref?: import('preact').Ref<HTMLDivElement> | undefined;
-}>;
+export declare const MenuPrimitiveRadioItem: import('react').ForwardRefExoticComponent<{
+    id?: string;
+    value: string;
+    asChild?: boolean;
+    disabled?: boolean;
+    onSelect?: (event: Event) => void;
+    className?: string;
+    children: ReactNode;
+} & Omit<Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "onSelect"> & Omit<MenuContextOperations, "setOpen"> & import('react').RefAttributes<HTMLDivElement>>;
 export type MenuPrimitiveItemIndicatorProps = {
     forceMount?: boolean;
     className?: string;
     children?: ReactNode;
 } & ComponentPropsWithoutRef<'span'>;
-export declare const MenuPrimitiveItemIndicator: import('preact').FunctionalComponent<import('preact/compat').PropsWithoutRef<MenuPrimitiveItemIndicatorProps> & {
-    ref?: import('preact').Ref<HTMLSpanElement> | undefined;
-}>;
+export declare const MenuPrimitiveItemIndicator: import('react').ForwardRefExoticComponent<{
+    forceMount?: boolean;
+    className?: string;
+    children?: ReactNode;
+} & Omit<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import('react').RefAttributes<HTMLSpanElement>>;
 export {};

package/dist/types/providers/combobox-provider.d.ts

@@ -8,11 +8,11 @@ export type ComboboxOpenOptions = {
 export type ComboboxApplyOptions = Pick<ComboboxOpenOptions, 'restoreFocus'>;
 export type ComboboxContextValue = {
     baseId: string;
-    contentRef: RefObject<HTMLDivElement>;
-    controlRef: RefObject<HTMLDivElement> | null;
-    inputRef: RefObject<HTMLInputElement>;
-    applyRef: RefObject<HTMLButtonElement>;
-    popupRef: RefObject<HTMLDivElement>;
+    contentRef: RefObject<HTMLDivElement | null>;
+    controlRef: RefObject<HTMLDivElement | null> | null;
+    inputRef: RefObject<HTMLInputElement | null>;
+    applyRef: RefObject<HTMLButtonElement | null>;
+    popupRef: RefObject<HTMLDivElement | null>;
     restoreFocusOnCloseRef: RefObject<boolean>;
     inputFocusIntentRef: RefObject<boolean>;
     ignoreFocusExitCloseRef: RefObject<boolean>;

package/dist/types/providers/context-menu-provider.d.ts

@@ -10,7 +10,7 @@ export type ContextMenuContextValue = {
     baseId: string;
     open: boolean;
     setOpen: (open: boolean) => void;
-    /** Pointer coordinates where the menu was opened (set by Trigger onContextMenu) */
+    /** Coordinates where the menu was opened, from the pointer or keyboard target. */
     position: {
         x: number;
         y: number;
@@ -22,10 +22,9 @@ export type ContextMenuContextValue = {
     /**
      * Tracks whether the user has started keyboard navigation.
      *
-     * Context menus are always opened via pointer (right-click), so focus-visible
-     * rings are hidden initially. Once the user presses a navigation key (Arrow keys,
-     * Home, End), this becomes `true` and focus rings appear. The state resets to
-     * `false` when the menu closes.
+     * Keyboard openings show focus-visible rings immediately. Pointer openings
+     * show them once the user presses a navigation key (Arrow keys, Home, End).
+     * The state resets to `false` when the menu closes.
      */
     isUsingKeyboard: boolean;
     setIsUsingKeyboard: (value: boolean) => void;

package/dist/types/providers/context-menu-sub-provider.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { Context, RefObject } from 'react';
 import { ContextMenuContentContextValue } from './context-menu-content-provider';
 /**
  * Context value for a single `ContextMenu.Sub` wrapper.
@@ -16,13 +16,13 @@ export type ContextMenuSubContextValue = {
     /** Open/close the submenu */
     setOpen: (open: boolean) => void;
     /** Ref to the SubTrigger DOM node (for ArrowLeft refocus and collision anchoring) */
-    triggerRef: RefObject<HTMLDivElement> | null;
+    triggerRef: RefObject<HTMLDivElement | null> | null;
     /**
      * Snapshot of the parent content context captured at mount time.
      * Used by SubContent's ArrowLeft handler to set parent `active` back to the trigger.
      */
     parentContent: ContextMenuContentContextValue;
 };
-export declare const ContextMenuSubProvider: import('preact').Provider<ContextMenuSubContextValue | undefined>;
+export declare const ContextMenuSubProvider: Context<ContextMenuSubContextValue | undefined>['Provider'];
 export declare const useContextMenuSub: () => ContextMenuSubContextValue;
 export declare const useContextMenuSubOptional: () => ContextMenuSubContextValue | undefined;

package/dist/types/providers/date-picker-provider.d.ts

@@ -3,8 +3,8 @@ export type DatePickerContextValue = {
     baseId: string;
     open: boolean;
     setOpen: (open: boolean) => void;
-    triggerRef: RefObject<HTMLButtonElement>;
-    focusOnCloseRef?: RefObject<HTMLElement>;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    focusOnCloseRef?: RefObject<HTMLElement | null>;
     monthSelectId: string;
     yearSelectId: string;
     prevButtonId: string;

package/dist/types/providers/focus-container-provider.d.ts

@@ -12,7 +12,7 @@ export type FocusContainerRegistry = {
     /** Focus once the trap has acknowledged this container. Returns a cancellation callback. */
     requestFocus?: (container: HTMLElement, focus: () => void) => () => void;
 };
-export declare const FocusContainerContext: import('preact').Context<FocusContainerRegistry | null>;
+export declare const FocusContainerContext: import('react').Context<FocusContainerRegistry | null>;
 /**
  * Hook for portaled components to register with a parent focus trap.
  * Returns null when not inside a focus container provider (e.g., Dialog.Content).

package/dist/types/providers/menu-provider.d.ts

@@ -10,8 +10,8 @@ export type MenuContextValue = {
     getItems: () => string[];
     isItemDisabled: (id: string) => boolean;
     getItemElement: (id: string) => HTMLElement | null;
-    triggerRef: RefObject<HTMLButtonElement> | null;
-    contentRef: RefObject<HTMLDivElement>;
+    triggerRef: RefObject<HTMLButtonElement | null> | null;
+    contentRef: RefObject<HTMLDivElement | null>;
 };
 export type MenuProviderProps = {
     value: MenuContextValue;

package/dist/types/providers/menubar-menu-provider.d.ts

@@ -1,4 +1,4 @@
-import { RefObject } from 'react';
+import { Context, RefObject } from 'react';
 import { MenubarContextValue } from './menubar-provider';
 /**
  * Context value for individual menu within a menubar.
@@ -17,10 +17,10 @@ export type MenubarMenuContextValue = {
     /** Reference to the parent menubar context */
     menubarContext: MenubarContextValue;
     /** Reference to the trigger element */
-    triggerRef: RefObject<HTMLButtonElement> | null;
+    triggerRef: RefObject<HTMLButtonElement | null> | null;
 };
-export declare const MenubarMenuContext: import('preact').Context<MenubarMenuContextValue | undefined>;
-export declare const MenubarMenuProvider: import('preact').Provider<MenubarMenuContextValue | undefined>;
+export declare const MenubarMenuContext: Context<MenubarMenuContextValue | undefined>;
+export declare const MenubarMenuProvider: Context<MenubarMenuContextValue | undefined>['Provider'];
 /**
  * Access the menubar menu context.
  *

package/dist/types/providers/menubar-provider.d.ts

@@ -35,7 +35,7 @@ export type MenubarContextValue = {
     /**
      * Ref to the menubar container element for focus management.
      */
-    menubarRef: RefObject<HTMLDivElement> | null;
+    menubarRef: RefObject<HTMLDivElement | null> | null;
 };
 export type MenubarProviderProps = {
     value: MenubarContextValue;

package/dist/types/providers/search-field-provider.d.ts

@@ -8,7 +8,7 @@ export type SearchFieldContextValue = {
     placeholder?: string;
     clearLabel: string;
     setValue: (v: string) => void;
-    inputRef: RefObject<HTMLInputElement>;
+    inputRef: RefObject<HTMLInputElement | null>;
 };
 export type SearchFieldProviderProps = {
     value: SearchFieldContextValue;

package/dist/types/providers/selector-provider.d.ts

@@ -20,7 +20,7 @@ export type SelectorContextValue = {
     unregisterItemText: (id: string) => void;
     getItemText: (id: string) => string | undefined;
     keyHandler: (e: React.KeyboardEvent<HTMLElement>) => void;
-    triggerRef: RefObject<HTMLButtonElement>;
+    triggerRef: RefObject<HTMLButtonElement | null>;
 };
 export type SelectorProviderProps = {
     value: SelectorContextValue;

package/dist/types/providers/time-picker-provider.d.ts

@@ -3,9 +3,9 @@ export type TimePickerContextValue = {
     baseId: string;
     open: boolean;
     setOpen: (open: boolean) => void;
-    triggerRef: RefObject<HTMLButtonElement>;
-    hourTriggerRef: RefObject<HTMLButtonElement>;
-    minuteTriggerRef: RefObject<HTMLButtonElement>;
+    triggerRef: RefObject<HTMLButtonElement | null>;
+    hourTriggerRef: RefObject<HTMLButtonElement | null>;
+    minuteTriggerRef: RefObject<HTMLButtonElement | null>;
     hourSelectId: string;
     minuteSelectId: string;
     selectorActive: string | undefined;

package/dist/types/providers/toolbar-provider.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement, ReactNode } from 'react';
 export type ToolbarContextValue = {
     toolbarId: string;
-    toolbarRef: React.RefObject<HTMLDivElement>;
+    toolbarRef: React.RefObject<HTMLDivElement | null>;
     active: string | undefined;
     setActive: (id: string | undefined) => void;
     registerItem: (id: string, disabled?: boolean, element?: HTMLElement | null) => void;

package/dist/types/types/lucide.d.ts

@@ -1,7 +1,11 @@
-import { LucideIcon as LucideIconPreact } from 'lucide-preact';
-import { LucideIcon as LucideIconReact } from 'lucide-react';
+import { ComponentType } from 'react';
 /**
- * Unified LucideIcon type that accepts icons from both lucide-react and lucide-preact.
- * This allows the UI library to work seamlessly with both React and Preact projects.
+ * An icon component as the library renders it. Structural rather than `lucide-react`'s own type, so icons from
+ * both `lucide-react` and `lucide-preact` fit.
  */
-export type LucideIcon = LucideIconPreact | LucideIconReact;
+export type LucideIcon = ComponentType<{
+    size?: string | number;
+    strokeWidth?: string | number;
+    className?: string;
+    'aria-hidden'?: boolean | 'true' | 'false';
+}>;

package/dist/types/utils/dom.d.ts

@@ -13,13 +13,26 @@ export declare const getRoot: (node: Node | null | undefined) => Document | Shad
 /**
  * The deeply focused element. From outside a shadow root `document.activeElement` reports the host
  * rather than the focused element inside it. Stops at a closed root, whose `shadowRoot` is hidden.
+ *
+ * Reads from `root` when given instead of the global document: a held reference to a closed root
+ * still sees inside it, and another frame's document has its own focus.
  */
-export declare const getActiveElement: () => Element | null;
+export declare const getActiveElement: (root?: Document | ShadowRoot | null) => Element | null;
 /**
  * Whether a container holds a node, crossing shadow boundaries. `Node.contains` stops at them, so a
  * node focused inside a nested root reads as outside the host that holds it.
  */
 export declare const containsDeep: (container: Node | null | undefined, node: Node | null | undefined) => boolean;
+type BubbledEvent = {
+    currentTarget: EventTarget | null;
+    target: EventTarget | null;
+};
+/**
+ * Whether an event reached its handler from a portal rendered inside it rather than from the
+ * handler's own DOM. React bubbles events along the component tree, through portals, while Preact
+ * bubbles along the DOM. Container handlers return early on these so both runtimes behave alike.
+ */
+export declare const isPortaledEvent: ({ currentTarget, target }: BubbledEvent) => boolean;
 /**
  * The element a container asks to receive focus: the first `[data-autofocus]` that is not under a
  * `[hidden]` ancestor. The consumer marks the target; the caller decides when focus moves.
@@ -28,3 +41,4 @@ export declare const containsDeep: (container: Node | null | undefined, node: No
  * attribute as a string — toggle the marker with `data-autofocus={condition || undefined}`.
  */
 export declare const getAutofocusTarget: (container: Element | null | undefined) => HTMLElement | null;
+export {};

package/dist/types/utils/unwrap.d.ts

@@ -1,4 +1,4 @@
-type Signalish<T> = T | SignalLike<T>;
+export type Signalish<T> = T | SignalLike<T>;
 type SignalLike<T> = {
     value: T;
     peek(): T;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enonic/ui",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "Enonic UI Component Library",
   "author": "Enonic",
   "license": "Apache-2.0",
@@ -59,66 +59,61 @@
     "class-variance-authority": "~0.7.1",
     "clsx": "~2.1.1",
     "focus-trap-react": "^12.0.3",
-    "lucide-react": "^1.16.0",
+    "lucide-react": "^1.72.0",
     "tailwind-merge": "~3.7.0"
   },
   "peerDependencies": {
     "@radix-ui/react-slot": "^1.2.0",
-    "preact": ">=10.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "react-virtuoso": "^4.0.0",
     "tw-animate-css": "^1.4.0"
   },
   "peerDependenciesMeta": {
-    "preact": {
-      "optional": true
-    },
     "react": {
       "optional": true
     },
     "react-dom": {
       "optional": true
     },
-    "react-virtuoso": {
-      "optional": true
-    },
     "tw-animate-css": {
       "optional": true
     }
   },
   "devDependencies": {
     "@preact/preset-vite": "~2.10.6",
-    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-slot": "^1.5.0",
     "@size-limit/preset-small-lib": "~14.3.0",
-    "@storybook/addon-a11y": "~10.6.3",
-    "@storybook/addon-docs": "~10.6.3",
-    "@storybook/addon-themes": "~10.6.3",
-    "@storybook/preact-vite": "~10.6.3",
+    "@storybook/addon-a11y": "~10.6.7",
+    "@storybook/addon-docs": "~10.6.7",
+    "@storybook/addon-themes": "~10.6.7",
+    "@storybook/preact-vite": "~10.6.7",
     "@storybook/test-runner": "^0.26.0",
-    "@tailwindcss/vite": "~4.3.3",
-    "@types/node": "~26.4.1",
+    "@tailwindcss/vite": "~4.3.5",
+    "@types/node": "~26.6.6",
     "@types/react": "~19.3.0",
     "@types/react-dom": "~19.3.0",
     "@typescript/typescript6": "~6.0.2",
     "http-server": "^14.1.1",
-    "lucide-preact": "~1.65.0",
-    "playwright": "^1.62.1",
-    "publint": "^0.3.24",
-    "react-doctor": "0.9.18",
-    "react-virtuoso": "^4.18.11",
-    "rollup-plugin-visualizer": "~7.1.1",
+    "jsdom": "~31.0.0",
+    "playwright": "^1.65.0",
+    "preact": "~10.29.8",
+    "publint": "^0.3.25",
+    "react": "~19.3.1",
+    "react-doctor": "0.9.22",
+    "react-dom": "~19.3.1",
+    "react-virtuoso": "^4.18.21",
+    "rollup-plugin-visualizer": "~7.1.3",
     "size-limit": "~14.3.0",
-    "storybook": "~10.6.3",
-    "tailwindcss": "~4.3.3",
+    "storybook": "~10.6.7",
+    "tailwindcss": "~4.3.5",
     "terser": "~5.51.2",
     "tw-animate-css": "^1.4.0",
     "typescript": "~7.0.2",
-    "vite": "npm:@voidzero-dev/vite-plus-core@^1.0.0",
-    "vite-plugin-dts": "~5.1.0",
-    "vite-plugin-environment": "~1.1.3",
-    "vite-plus": "^1.0.0",
-    "wait-on": "^9.1.0"
+    "vite": "npm:@voidzero-dev/vite-plus-core@^1.6.0",
+    "vite-plugin-dts": "~5.1.2",
+    "vite-plugin-environment": "~1.1.4",
+    "vite-plus": "^1.6.0",
+    "wait-on": "^9.5.1"
   },
   "engines": {
     "node": ">=24.16.0",
@@ -172,9 +167,9 @@
     "format": "vp fmt",
     "format:check": "vp fmt --check",
     "check:react": "react-doctor --no-telemetry",
-    "test": "exit 0",
+    "test": "vp test",
     "check:package": "node scripts/package-smoke.mjs",
-    "test:ci": "exit 0",
+    "test:ci": "vp test",
     "test:storybook": "test-storybook --includeTags interactions-smoke",
     "release:dry": "pnpm publish --dry-run --no-git-checks",
     "analyze": "pnpm build && open dist/stats.html",