@base-ui/react 1.2.0 → 1.4.0

package/esm/use-button/useButton.js

@@ -14,14 +14,12 @@ export function useButton(parameters = {}) {
     disabled = false,
     focusableWhenDisabled,
     tabIndex = 0,
-    native: isNativeButton = true
+    native: isNativeButton = true,
+    composite: compositeProp
   } = parameters;
   const elementRef = React.useRef(null);
-  const isCompositeItem = useCompositeRootContext(true) !== undefined;
-  const isValidLink = useStableCallback(() => {
-    const element = elementRef.current;
-    return Boolean(element?.tagName === 'A' && element?.href);
-  });
+  const compositeRootContext = useCompositeRootContext(true);
+  const isCompositeItem = compositeProp ?? compositeRootContext !== undefined;
   const {
     props: focusableWhenDisabledProps
   } = useFocusableWhenDisabled({
@@ -37,7 +35,7 @@ export function useButton(parameters = {}) {
       if (!elementRef.current) {
         return;
       }
-      const isButtonTag = elementRef.current.tagName === 'BUTTON';
+      const isButtonTag = isButtonElement(elementRef.current);
       if (isNativeButton) {
         if (!isButtonTag) {
           const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
@@ -91,39 +89,67 @@ export function useButton(parameters = {}) {
         }
       },
       onKeyDown(event) {
-        if (!disabled) {
-          makeEventPreventable(event);
-          externalOnKeyDown?.(event);
+        if (disabled) {
+          return;
         }
+        makeEventPreventable(event);
+        externalOnKeyDown?.(event);
         if (event.baseUIHandlerPrevented) {
           return;
         }
-        const shouldClick = event.target === event.currentTarget && !isNativeButton && !isValidLink() && !disabled;
+        const isCurrentTarget = event.target === event.currentTarget;
+        const currentTarget = event.currentTarget;
+        const isButton = isButtonElement(currentTarget);
+        const isLink = !isNativeButton && isValidLinkElement(currentTarget);
+        const shouldClick = isCurrentTarget && (isNativeButton ? isButton : !isLink);
         const isEnterKey = event.key === 'Enter';
         const isSpaceKey = event.key === ' ';
+        const role = currentTarget.getAttribute('role');
+        const isTextNavigationRole = role?.startsWith('menuitem') || role === 'option' || role === 'gridcell';
+        if (isCurrentTarget && isCompositeItem && isSpaceKey) {
+          if (event.defaultPrevented && isTextNavigationRole) {
+            return;
+          }
+          event.preventDefault();
+          if (isLink || isNativeButton && isButton) {
+            currentTarget.click();
+            event.preventBaseUIHandler();
+          } else if (shouldClick) {
+            externalOnClick?.(event);
+            event.preventBaseUIHandler();
+          }
+          return;
+        }
 
-        // Keyboard accessibility for non interactive elements
+        // Keyboard accessibility for native and non-native elements.
         if (shouldClick) {
-          if (isSpaceKey || isEnterKey) {
+          if (!isNativeButton && (isSpaceKey || isEnterKey)) {
             event.preventDefault();
           }
-          if (isEnterKey) {
+          if (!isNativeButton && isEnterKey) {
             externalOnClick?.(event);
           }
         }
       },
       onKeyUp(event) {
+        if (disabled) {
+          return;
+        }
+
         // calling preventDefault in keyUp on a <button> will not dispatch a click event if Space is pressed
         // https://codesandbox.io/p/sandbox/button-keyup-preventdefault-dn7f0
-        // Keyboard accessibility for non interactive elements
-        if (!disabled) {
-          makeEventPreventable(event);
-          externalOnKeyUp?.(event);
+        makeEventPreventable(event);
+        externalOnKeyUp?.(event);
+        if (event.target === event.currentTarget && isNativeButton && isCompositeItem && isButtonElement(event.currentTarget) && event.key === ' ') {
+          event.preventDefault();
+          return;
         }
         if (event.baseUIHandlerPrevented) {
           return;
         }
-        if (event.target === event.currentTarget && !isNativeButton && !disabled && event.key === ' ') {
+
+        // Keyboard accessibility for non interactive elements
+        if (event.target === event.currentTarget && !isNativeButton && !isCompositeItem && event.key === ' ') {
           externalOnClick?.(event);
         }
       },
@@ -137,7 +163,7 @@ export function useButton(parameters = {}) {
     }, !isNativeButton ? {
       role: 'button'
     } : undefined, focusableWhenDisabledProps, otherExternalProps);
-  }, [disabled, focusableWhenDisabledProps, isNativeButton, isValidLink]);
+  }, [disabled, focusableWhenDisabledProps, isCompositeItem, isNativeButton]);
   const buttonRef = useStableCallback(element => {
     elementRef.current = element;
     updateDisabled();
@@ -149,4 +175,7 @@ export function useButton(parameters = {}) {
 }
 function isButtonElement(elem) {
   return isHTMLElement(elem) && elem.tagName === 'BUTTON';
+}
+function isValidLinkElement(elem) {
+  return Boolean(elem?.tagName === 'A' && elem?.href);
 }

package/esm/use-render/useRender.d.ts

@@ -12,12 +12,12 @@ export type UseRenderRenderProp<State = Record<string, unknown>> = React.ReactEl
 export type UseRenderElementProps<ElementType extends React.ElementType> = React.ComponentPropsWithRef<ElementType>;
 export type UseRenderComponentProps<ElementType extends React.ElementType, State = {}, RenderFunctionProps = HTMLProps> = React.ComponentPropsWithRef<ElementType> & {
   /**
-   * Allows you to replace the component’s HTML element
+   * Allows you to replace the component's HTML element
    * with a different tag, or compose it with another component.
    *
    * Accepts a `ReactElement` or a function that returns the element to render.
    */
-  render?: (React.ReactElement | ComponentRenderFn<RenderFunctionProps, State>) | undefined;
+  render?: React.ReactElement | ComponentRenderFn<RenderFunctionProps, State> | undefined;
 };
 export interface UseRenderParameters<State, RenderedElementType extends Element, Enabled extends boolean | undefined> {
   /**
@@ -27,7 +27,7 @@ export interface UseRenderParameters<State, RenderedElementType extends Element,
   /**
    * The ref to apply to the rendered element.
    */
-  ref?: (React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[]) | undefined;
+  ref?: React.Ref<RenderedElementType> | React.Ref<RenderedElementType>[] | undefined;
   /**
    * The state of the component, passed as the second argument to the `render` callback.
    * State properties are automatically converted to data-* attributes.
@@ -59,10 +59,12 @@ export interface UseRenderParameters<State, RenderedElementType extends Element,
   defaultTagName?: keyof React.JSX.IntrinsicElements | undefined;
 }
 export type UseRenderReturnValue<Enabled extends boolean | undefined> = Enabled extends false ? null : React.ReactElement;
+export interface UseRenderState {}
 export declare namespace useRender {
-  type RenderProp<State = Record<string, unknown>> = UseRenderRenderProp<State>;
+  type State = UseRenderState;
+  type RenderProp<TState = Record<string, unknown>> = UseRenderRenderProp<TState>;
   type ElementProps<ElementType extends React.ElementType> = UseRenderElementProps<ElementType>;
-  type ComponentProps<ElementType extends React.ElementType, State = {}, RenderFunctionProps = HTMLProps> = UseRenderComponentProps<ElementType, State, RenderFunctionProps>;
-  type Parameters<State, RenderedElementType extends Element, Enabled extends boolean | undefined> = UseRenderParameters<State, RenderedElementType, Enabled>;
+  type ComponentProps<ElementType extends React.ElementType, TState = {}, RenderFunctionProps = HTMLProps> = UseRenderComponentProps<ElementType, TState, RenderFunctionProps>;
+  type Parameters<TState, RenderedElementType extends Element, Enabled extends boolean | undefined> = UseRenderParameters<TState, RenderedElementType, Enabled>;
   type ReturnValue<Enabled extends boolean | undefined> = UseRenderReturnValue<Enabled>;
 }

package/esm/utils/FloatingPortalLite.d.ts

@@ -6,7 +6,9 @@ import { type FloatingPortal } from "../floating-ui-react/index.js";
  * @internal
  */
 export declare const FloatingPortalLite: React.ForwardRefExoticComponent<Omit<FloatingPortalLite.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface FloatingPortalLiteProps<State> extends FloatingPortal.Props<State> {}
+export interface FloatingPortalLiteState {}
+export interface FloatingPortalLiteProps<TState> extends FloatingPortal.Props<TState> {}
 export declare namespace FloatingPortalLite {
-  type Props<State> = FloatingPortalLiteProps<State>;
+  type State = FloatingPortalLiteState;
+  type Props<TState> = FloatingPortalLiteProps<TState>;
 }

package/esm/utils/FloatingPortalLite.js

@@ -16,6 +16,7 @@ export const FloatingPortalLite = /*#__PURE__*/React.forwardRef(function Floatin
     container,
     className,
     render,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/utils/InternalBackdrop.d.ts

@@ -3,13 +3,15 @@ import * as React from 'react';
  * @internal
  */
 export declare const InternalBackdrop: React.ForwardRefExoticComponent<InternalBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export interface InternalBackdropState {}
 export interface InternalBackdropProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * The element to cut out of the backdrop.
    * This is useful for allowing certain elements to be interactive while the backdrop is present.
    */
-  cutout?: (Element | null) | undefined;
+  cutout?: Element | null | undefined;
 }
 export declare namespace InternalBackdrop {
+  type State = InternalBackdropState;
   type Props = InternalBackdropProps;
 }

package/esm/utils/InternalBackdrop.js

@@ -11,19 +11,8 @@ export const InternalBackdrop = /*#__PURE__*/React.forwardRef(function InternalB
   } = props;
   let clipPath;
   if (cutout) {
-    const rect = cutout?.getBoundingClientRect();
-    clipPath = `polygon(
-      0% 0%,
-      100% 0%,
-      100% 100%,
-      0% 100%,
-      0% 0%,
-      ${rect.left}px ${rect.top}px,
-      ${rect.left}px ${rect.bottom}px,
-      ${rect.right}px ${rect.bottom}px,
-      ${rect.right}px ${rect.top}px,
-      ${rect.left}px ${rect.top}px
-    )`;
+    const rect = cutout.getBoundingClientRect();
+    clipPath = `polygon(0% 0%,100% 0%,100% 100%,0% 100%,0% 0%,${rect.left}px ${rect.top}px,${rect.left}px ${rect.bottom}px,${rect.right}px ${rect.bottom}px,${rect.right}px ${rect.top}px,${rect.left}px ${rect.top}px)`;
   }
   return /*#__PURE__*/_jsx("div", {
     ref: ref,

package/esm/utils/closePart.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+interface ClosePartContextValue {
+  register: () => () => void;
+}
+export declare function useClosePartCount(): {
+  context: {
+    register: () => () => void;
+  };
+  hasClosePart: boolean;
+};
+export declare function ClosePartProvider(props: {
+  value: ClosePartContextValue;
+  children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useClosePartRegistration(): void;
+export {};

package/esm/utils/closePart.js

@@ -0,0 +1,40 @@
+'use client';
+
+import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { jsx as _jsx } from "react/jsx-runtime";
+const ClosePartContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") ClosePartContext.displayName = "ClosePartContext";
+export function useClosePartCount() {
+  const [closePartCount, setClosePartCount] = React.useState(0);
+  const register = useStableCallback(() => {
+    setClosePartCount(count => count + 1);
+    return () => {
+      setClosePartCount(count => Math.max(0, count - 1));
+    };
+  });
+  const context = React.useMemo(() => ({
+    register
+  }), [register]);
+  return {
+    context,
+    hasClosePart: closePartCount > 0
+  };
+}
+export function ClosePartProvider(props) {
+  const {
+    value,
+    children
+  } = props;
+  return /*#__PURE__*/_jsx(ClosePartContext.Provider, {
+    value: value,
+    children: children
+  });
+}
+export function useClosePartRegistration() {
+  const context = React.useContext(ClosePartContext);
+  useIsoLayoutEffect(() => {
+    return context?.register();
+  }, [context]);
+}

package/esm/utils/constants.d.ts

@@ -7,6 +7,10 @@ export declare const DISABLED_TRANSITIONS_STYLE: {
 };
 export { EMPTY_OBJECT, EMPTY_ARRAY } from '@base-ui/utils/empty';
 export declare const CLICK_TRIGGER_IDENTIFIER = "data-base-ui-click-trigger";
+export declare const BASE_UI_SWIPE_IGNORE_ATTRIBUTE = "data-base-ui-swipe-ignore";
+export declare const LEGACY_SWIPE_IGNORE_ATTRIBUTE = "data-swipe-ignore";
+export declare const BASE_UI_SWIPE_IGNORE_SELECTOR = "[data-base-ui-swipe-ignore]";
+export declare const LEGACY_SWIPE_IGNORE_SELECTOR = "[data-swipe-ignore]";
 /**
  * Used for dropdowns that usually strictly prefer top/bottom placements and
  * use `var(--available-height)` to limit their height.

package/esm/utils/constants.js

@@ -7,6 +7,10 @@ export const DISABLED_TRANSITIONS_STYLE = {
 };
 export { EMPTY_OBJECT, EMPTY_ARRAY } from '@base-ui/utils/empty';
 export const CLICK_TRIGGER_IDENTIFIER = 'data-base-ui-click-trigger';
+export const BASE_UI_SWIPE_IGNORE_ATTRIBUTE = 'data-base-ui-swipe-ignore';
+export const LEGACY_SWIPE_IGNORE_ATTRIBUTE = 'data-swipe-ignore';
+export const BASE_UI_SWIPE_IGNORE_SELECTOR = `[${BASE_UI_SWIPE_IGNORE_ATTRIBUTE}]`;
+export const LEGACY_SWIPE_IGNORE_SELECTOR = `[${LEGACY_SWIPE_IGNORE_ATTRIBUTE}]`;
 
 /**
  * Used for dropdowns that usually strictly prefer top/bottom placements and

package/esm/utils/createBaseUIEventDetails.d.ts

@@ -71,7 +71,7 @@ type BaseUIChangeEventDetail<Reason extends string, CustomProperties extends obj
 /**
  * Details of custom change events emitted by Base UI components.
  */
-export type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> : never;
+export type BaseUIChangeEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIChangeEventDetail<Reason, CustomProperties> & {} : never;
 /**
  * Details of custom generic events emitted by Base UI components.
  */
@@ -85,11 +85,11 @@ type BaseUIGenericEventDetail<Reason extends string, CustomProperties extends ob
    */
   event: ReasonToEvent<Reason>;
 } & CustomProperties;
-export type BaseUIGenericEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIGenericEventDetail<Reason, CustomProperties> : never;
+export type BaseUIGenericEventDetails<Reason extends string, CustomProperties extends object = {}> = Reason extends string ? BaseUIGenericEventDetail<Reason, CustomProperties> & {} : never;
 /**
  * Creates a Base UI event details object with the given reason and utilities
  * for preventing Base UI's internal event handling.
  */
 export declare function createChangeEventDetails<Reason extends string, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, trigger?: HTMLElement, customProperties?: CustomProperties): BaseUIChangeEventDetails<Reason, CustomProperties>;
-export declare function createGenericEventDetails<Reason extends string, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, customProperties?: CustomProperties): BaseUIGenericEventDetails<Reason, CustomProperties>;
+export declare function createGenericEventDetails<Reason extends keyof ReasonToEventMap, CustomProperties extends object = {}>(reason: Reason, event?: ReasonToEvent<Reason>, customProperties?: CustomProperties): BaseUIGenericEventDetails<Reason, CustomProperties>;
 export {};

package/esm/utils/getElementAtPoint.d.ts

@@ -0,0 +1 @@
+export declare function getElementAtPoint(doc: Document | null | undefined, x: number, y: number): Element | null;

package/esm/utils/getElementAtPoint.js

@@ -0,0 +1,3 @@
+export function getElementAtPoint(doc, x, y) {
+  return typeof doc?.elementFromPoint === 'function' ? doc.elementFromPoint(x, y) : null;
+}

package/esm/utils/getPseudoElementBounds.js

@@ -1,3 +1,4 @@
+import { ownerWindow } from '@base-ui/utils/owner';
 export function getPseudoElementBounds(element) {
   const elementRect = element.getBoundingClientRect();
 
@@ -5,8 +6,9 @@ export function getPseudoElementBounds(element) {
   if (process.env.NODE_ENV !== 'production') {
     return elementRect;
   }
-  const beforeStyles = window.getComputedStyle(element, '::before');
-  const afterStyles = window.getComputedStyle(element, '::after');
+  const win = ownerWindow(element);
+  const beforeStyles = win.getComputedStyle(element, '::before');
+  const afterStyles = win.getComputedStyle(element, '::after');
   const hasPseudoElements = beforeStyles.content !== 'none' || afterStyles.content !== 'none';
   if (!hasPseudoElements) {
     return elementRect;

package/esm/utils/popups/store.js

@@ -11,7 +11,7 @@ export function createInitialPopupStoreState() {
     open: false,
     openProp: undefined,
     mounted: false,
-    transitionStatus: 'idle',
+    transitionStatus: undefined,
     floatingRootContext: getEmptyRootContext(),
     preventUnmountingOnClose: false,
     payload: undefined,

package/esm/utils/popups/useTriggerFocusGuards.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type BaseUIChangeEventDetails } from "../createBaseUIEventDetails.js";
+import { REASONS } from "../reasons.js";
+/**
+ * Minimal store interface required by the focus guard hook.
+ * Both PopoverStore and MenuStore satisfy this interface.
+ */
+interface TriggerFocusGuardStore {
+  setOpen(open: boolean, eventDetails: BaseUIChangeEventDetails<typeof REASONS.focusOut>): void;
+  select(key: 'positionerElement'): HTMLElement | null;
+  context: {
+    readonly beforeContentFocusGuardRef: React.RefObject<HTMLElement | null>;
+    readonly triggerFocusTargetRef: React.RefObject<HTMLElement | null>;
+  };
+}
+/**
+ * Provides focus guard handlers for popup triggers (Popover, Menu).
+ *
+ * When the popup is open, invisible focus guard elements are placed before and after
+ * the trigger. These handlers close the popup and move focus to the appropriate
+ * tabbable element when the guards receive focus (i.e. when the user tabs out).
+ */
+export declare function useTriggerFocusGuards(store: TriggerFocusGuardStore, triggerElementRef: React.RefObject<HTMLElement | null>): {
+  preFocusGuardRef: React.RefObject<HTMLElement | null>;
+  handlePreFocusGuardFocus: (event: React.FocusEvent) => void;
+  handleFocusTargetFocus: (event: React.FocusEvent) => void;
+};
+export {};

package/esm/utils/popups/useTriggerFocusGuards.js

@@ -0,0 +1,55 @@
+'use client';
+
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { contains, getNextTabbable, getTabbableAfterElement, getTabbableBeforeElement, isOutsideEvent } from "../../floating-ui-react/utils.js";
+import { createChangeEventDetails } from "../createBaseUIEventDetails.js";
+import { REASONS } from "../reasons.js";
+
+/**
+ * Minimal store interface required by the focus guard hook.
+ * Both PopoverStore and MenuStore satisfy this interface.
+ */
+
+/**
+ * Provides focus guard handlers for popup triggers (Popover, Menu).
+ *
+ * When the popup is open, invisible focus guard elements are placed before and after
+ * the trigger. These handlers close the popup and move focus to the appropriate
+ * tabbable element when the guards receive focus (i.e. when the user tabs out).
+ */
+export function useTriggerFocusGuards(store, triggerElementRef) {
+  const preFocusGuardRef = React.useRef(null);
+  const handlePreFocusGuardFocus = useStableCallback(event => {
+    ReactDOM.flushSync(() => {
+      store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
+    });
+    const previousTabbable = getTabbableBeforeElement(preFocusGuardRef.current);
+    previousTabbable?.focus();
+  });
+  const handleFocusTargetFocus = useStableCallback(event => {
+    const positionerElement = store.select('positionerElement');
+    if (positionerElement && isOutsideEvent(event, positionerElement)) {
+      store.context.beforeContentFocusGuardRef.current?.focus();
+    } else {
+      ReactDOM.flushSync(() => {
+        store.setOpen(false, createChangeEventDetails(REASONS.focusOut, event.nativeEvent, event.currentTarget));
+      });
+      let nextTabbable = getTabbableAfterElement(store.context.triggerFocusTargetRef.current || triggerElementRef.current);
+      while (nextTabbable !== null && contains(positionerElement, nextTabbable)) {
+        const prevTabbable = nextTabbable;
+        nextTabbable = getNextTabbable(nextTabbable);
+        if (nextTabbable === prevTabbable) {
+          break;
+        }
+      }
+      nextTabbable?.focus();
+    }
+  });
+  return {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  };
+}

package/esm/utils/reason-parts.d.ts

@@ -30,4 +30,7 @@ export declare const siblingOpen: "sibling-open";
 export declare const disabled: "disabled";
 export declare const imperativeAction: "imperative-action";
 export declare const swipe: "swipe";
-export declare const windowResize: "window-resize";
+export declare const windowResize: "window-resize";
+export declare const dayPress: "day-press";
+export declare const monthChange: "month-change";
+export declare const valuePropChange: "value-prop-change";

package/esm/utils/reason-parts.js

@@ -30,4 +30,7 @@ export const siblingOpen = 'sibling-open';
 export const disabled = 'disabled';
 export const imperativeAction = 'imperative-action';
 export const swipe = 'swipe';
-export const windowResize = 'window-resize';
+export const windowResize = 'window-resize';
+export const dayPress = 'day-press';
+export const monthChange = 'month-change';
+export const valuePropChange = 'value-prop-change';

package/esm/utils/resolveAriaLabelledBy.d.ts

@@ -0,0 +1,2 @@
+export declare function getDefaultLabelId(id: string | null | undefined): string | undefined;
+export declare function resolveAriaLabelledBy(fieldLabelId: string | undefined, localLabelId: string | undefined): string | undefined;

package/esm/utils/resolveAriaLabelledBy.js

@@ -0,0 +1,8 @@
+'use client';
+
+export function getDefaultLabelId(id) {
+  return id == null ? undefined : `${id}-label`;
+}
+export function resolveAriaLabelledBy(fieldLabelId, localLabelId) {
+  return fieldLabelId ?? localLabelId;
+}

package/esm/utils/resolveValueLabel.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 type ItemRecord = Record<string, React.ReactNode>;
-type ItemsInput = ItemRecord | ReadonlyArray<LabeledItem> | ReadonlyArray<Group<LabeledItem>> | undefined;
+type ItemsInput = ItemRecord | ReadonlyArray<LabeledItem> | ReadonlyArray<Group<any>> | undefined;
 interface LabeledItem {
   value: any;
   label: React.ReactNode;
 }
 export interface Group<Item = any> {
-  value: unknown;
-  items: Item[];
+  [key: string]: unknown;
+  items: ReadonlyArray<Item>;
 }
-export declare function isGroupedItems(items: ReadonlyArray<any | Group<any>> | undefined): items is Group<any>[];
+export declare function isGroupedItems(items: ReadonlyArray<any | Group<any>> | undefined): items is ReadonlyArray<Group<any>>;
 /**
  * Checks if the items array contains an item with a null value that has a non-null label.
  */

package/esm/utils/resolveValueLabel.js

@@ -12,10 +12,11 @@ export function isGroupedItems(items) {
  */
 export function hasNullItemLabel(items) {
   if (!Array.isArray(items)) {
-    return items != null && !('null' in items);
+    return items != null && 'null' in items;
   }
-  if (isGroupedItems(items)) {
-    for (const group of items) {
+  const arrayItems = items;
+  if (isGroupedItems(arrayItems)) {
+    for (const group of arrayItems) {
       for (const item of group.items) {
         if (item && item.value == null && item.label != null) {
           return true;
@@ -24,7 +25,7 @@ export function hasNullItemLabel(items) {
     }
     return false;
   }
-  for (const item of items) {
+  for (const item of arrayItems) {
     if (item && item.value == null && item.label != null) {
       return true;
     }
@@ -74,7 +75,8 @@ export function resolveSelectedLabel(value, items, itemToStringLabel) {
 
   // Items provided as array (flat or grouped)
   if (Array.isArray(items)) {
-    const flatItems = isGroupedItems(items) ? items.flatMap(g => g.items) : items;
+    const arrayItems = items;
+    const flatItems = isGroupedItems(arrayItems) ? arrayItems.flatMap(group => group.items) : arrayItems;
     if (value == null || typeof value !== 'object') {
       const match = flatItems.find(item => item.value === value);
       if (match && match.label != null) {

package/esm/{scroll-area/utils → utils}/scrollEdges.d.ts

@@ -1,2 +1,3 @@
 export declare const SCROLL_EDGE_TOLERANCE_PX = 1;
+export declare function getMaxScrollOffset(scrollSize: number, clientSize: number): number;
 export declare function normalizeScrollOffset(value: number, max: number): number;

package/esm/{scroll-area/utils → utils}/scrollEdges.js

@@ -1,5 +1,8 @@
-import { clamp } from "../../utils/clamp.js";
+import { clamp } from "./clamp.js";
 export const SCROLL_EDGE_TOLERANCE_PX = 1;
+export function getMaxScrollOffset(scrollSize, clientSize) {
+  return Math.max(0, scrollSize - clientSize);
+}
 export function normalizeScrollOffset(value, max) {
   if (max <= 0) {
     return 0;

package/esm/utils/temporal/date-helpers.d.ts

@@ -0,0 +1,15 @@
+import { TemporalAdapter, TemporalSupportedObject } from "../../types/temporal/index.js";
+export declare function mergeDateAndTime(adapter: TemporalAdapter, dateParam: TemporalSupportedObject, timeParam: TemporalSupportedObject): TemporalSupportedObject;
+export declare function areDatesEqual(adapter: TemporalAdapter, a: TemporalSupportedObject | null, b: TemporalSupportedObject | null): boolean;
+export declare function replaceInvalidDateByNull(adapter: TemporalAdapter, value: TemporalSupportedObject | null): TemporalSupportedObject | null;
+/**
+ * Check if the day of the date A is after the day of the date B.
+ * Uses timezone of the date A.
+ */
+export declare function isAfterDay(adapter: TemporalAdapter, dateA: TemporalSupportedObject, dateB: TemporalSupportedObject): boolean;
+/**
+ * Check if the day of the date A is before the day of the date B.
+ * Uses timezone of the date A.
+ */
+export declare function isBeforeDay(adapter: TemporalAdapter, dateA: TemporalSupportedObject, dateB: TemporalSupportedObject): boolean;
+export declare function formatMonthFullLetterAndYear(adapter: TemporalAdapter, date: TemporalSupportedObject): string;

package/esm/utils/temporal/date-helpers.js

@@ -0,0 +1,43 @@
+export function mergeDateAndTime(adapter, dateParam, timeParam) {
+  let mergedDate = dateParam;
+  mergedDate = adapter.setHours(mergedDate, adapter.getHours(timeParam));
+  mergedDate = adapter.setMinutes(mergedDate, adapter.getMinutes(timeParam));
+  mergedDate = adapter.setSeconds(mergedDate, adapter.getSeconds(timeParam));
+  mergedDate = adapter.setMilliseconds(mergedDate, adapter.getMilliseconds(timeParam));
+  return mergedDate;
+}
+export function areDatesEqual(adapter, a, b) {
+  if (!adapter.isValid(a) && a != null && !adapter.isValid(b) && b != null) {
+    return true;
+  }
+  return adapter.isEqual(a, b);
+}
+export function replaceInvalidDateByNull(adapter, value) {
+  if (adapter.isValid(value)) {
+    return value;
+  }
+  return null;
+}
+
+/**
+ * Check if the day of the date A is after the day of the date B.
+ * Uses timezone of the date A.
+ */
+export function isAfterDay(adapter, dateA, dateB) {
+  const dateBWithCorrectTimezone = adapter.setTimezone(dateB, adapter.getTimezone(dateA));
+  return adapter.isAfter(dateA, adapter.endOfDay(dateBWithCorrectTimezone));
+}
+
+/**
+ * Check if the day of the date A is before the day of the date B.
+ * Uses timezone of the date A.
+ */
+export function isBeforeDay(adapter, dateA, dateB) {
+  const dateBWithCorrectTimezone = adapter.setTimezone(dateB, adapter.getTimezone(dateA));
+  return adapter.isBefore(dateA, adapter.startOfDay(dateBWithCorrectTimezone));
+}
+export function formatMonthFullLetterAndYear(adapter, date) {
+  const f = adapter.formats;
+  const dateFormat = `${f.monthFullLetter} ${f.yearPadded}`;
+  return adapter.formatByString(date, dateFormat);
+}

package/esm/utils/temporal/getDateManager.d.ts

@@ -0,0 +1,5 @@
+import { ValidateDateReturnValue, ValidateDateValidationProps } from "./validateDate.js";
+import { TemporalManager } from "./types.js";
+import { TemporalValue, TemporalAdapter } from "../../types/temporal/index.js";
+export declare function getDateManager(adapter: TemporalAdapter): GetDateManagerReturnValue;
+export type GetDateManagerReturnValue = TemporalManager<TemporalValue, ValidateDateReturnValue, ValidateDateValidationProps>;