@tale-ui/react 0.0.3

package/tooltip/viewport/TooltipViewport.js

@@ -0,0 +1,62 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipViewport = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _TooltipRootContext = require("../root/TooltipRootContext");
+var _TooltipPositionerContext = require("../positioner/TooltipPositionerContext");
+var _useRenderElement = require("../../utils/useRenderElement");
+var _TooltipViewportCssVars = require("./TooltipViewportCssVars");
+var _usePopupViewport = require("../../utils/usePopupViewport");
+const stateAttributesMapping = {
+  activationDirection: value => value ? {
+    'data-activation-direction': value
+  } : null
+};
+
+/**
+ * A viewport for displaying content transitions.
+ * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
+ * and switching between them is animated.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Tale UI Tooltip](https://base-ui.com/react/components/tooltip)
+ */
+const TooltipViewport = exports.TooltipViewport = /*#__PURE__*/React.forwardRef(function TooltipViewport(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    children,
+    ...elementProps
+  } = componentProps;
+  const store = (0, _TooltipRootContext.useTooltipRootContext)();
+  const positioner = (0, _TooltipPositionerContext.useTooltipPositionerContext)();
+  const instantType = store.useState('instantType');
+  const {
+    children: childrenToRender,
+    state: viewportState
+  } = (0, _usePopupViewport.usePopupViewport)({
+    store,
+    side: positioner.side,
+    cssVars: _TooltipViewportCssVars.TooltipViewportCssVars,
+    children
+  });
+  const state = {
+    activationDirection: viewportState.activationDirection,
+    transitioning: viewportState.transitioning,
+    instant: instantType
+  };
+  return (0, _useRenderElement.useRenderElement)('div', componentProps, {
+    state,
+    ref: forwardedRef,
+    props: [elementProps, {
+      children: childrenToRender
+    }],
+    stateAttributesMapping
+  });
+});
+if (process.env.NODE_ENV !== "production") TooltipViewport.displayName = "TooltipViewport";

package/tooltip/viewport/TooltipViewportCssVars.d.ts

@@ -0,0 +1,14 @@
+export declare enum TooltipViewportCssVars {
+  /**
+   * The width of the parent popup.
+   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupWidth = "--popup-width",
+  /**
+   * The height of the parent popup.
+   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  popupHeight = "--popup-height",
+}

package/tooltip/viewport/TooltipViewportCssVars.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipViewportCssVars = void 0;
+let TooltipViewportCssVars = exports.TooltipViewportCssVars = /*#__PURE__*/function (TooltipViewportCssVars) {
+  /**
+   * The width of the parent popup.
+   * This variable is placed on the 'previous' container and stores the width of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  TooltipViewportCssVars["popupWidth"] = "--popup-width";
+  /**
+   * The height of the parent popup.
+   * This variable is placed on the 'previous' container and stores the height of the popup when the previous content was rendered.
+   * It can be used to freeze the dimensions of the popup when animating between different content.
+   */
+  TooltipViewportCssVars["popupHeight"] = "--popup-height";
+  return TooltipViewportCssVars;
+}({});

package/tooltip/viewport/TooltipViewportDataAttributes.d.ts

@@ -0,0 +1,26 @@
+export declare enum TooltipViewportDataAttributes {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  current = "data-current",
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  previous = "data-previous",
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   */
+  activationDirection = "data-activation-direction",
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  transitioning = "data-transitioning",
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  instant = "data-instant",
+}

package/tooltip/viewport/TooltipViewportDataAttributes.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipViewportDataAttributes = void 0;
+let TooltipViewportDataAttributes = exports.TooltipViewportDataAttributes = /*#__PURE__*/function (TooltipViewportDataAttributes) {
+  /**
+   * Applied to the direct child of the viewport when no transitions are present or the new content when it's entering.
+   */
+  TooltipViewportDataAttributes["current"] = "data-current";
+  /**
+   * Applied to the direct child of the viewport that contains the exiting content when transitions are present.
+   */
+  TooltipViewportDataAttributes["previous"] = "data-previous";
+  /**
+   * Indicates the direction from which the popup was activated.
+   * This can be used to create directional animations based on how the popup was triggered.
+   * Contains space-separated values for both horizontal and vertical axes.
+   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   */
+  TooltipViewportDataAttributes["activationDirection"] = "data-activation-direction";
+  /**
+   * Indicates that the viewport is currently transitioning between old and new content.
+   */
+  TooltipViewportDataAttributes["transitioning"] = "data-transitioning";
+  /**
+   * Present if animations should be instant.
+   * @type {'delay' | 'dismiss' | 'focus'}
+   */
+  TooltipViewportDataAttributes["instant"] = "data-instant";
+  return TooltipViewportDataAttributes;
+}({});

package/types/index.d.ts

@@ -0,0 +1,16 @@
+import type * as React from 'react';
+export type { TaleUIChangeEventDetails, TaleUIGenericEventDetails } from "../utils/createTaleUIEventDetails.js";
+export type HTMLProps<T = any> = React.HTMLAttributes<T> & {
+  ref?: React.Ref<T> | undefined;
+};
+/**
+ * Shape of the render prop: a function that takes props to be spread on the element and component's state and returns a React element.
+ *
+ * @template Props Props to be spread on the rendered element.
+ * @template State Component's internal state.
+ */
+export type ComponentRenderFn<Props, State> = (props: Props, state: State) => React.ReactElement<unknown>;
+export type TaleUIEvent<E extends React.SyntheticEvent<Element, Event>> = E & {
+  preventTaleUIHandler: () => void;
+  readonly taleUIHandlerPrevented?: boolean | undefined;
+};

package/types/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/unstable-use-media-query/index.d.ts

@@ -0,0 +1,31 @@
+export declare function useMediaQuery(query: string, options: useMediaQuery.Options): boolean;
+export interface UseMediaQueryOptions {
+  /**
+   * As `window.matchMedia()` is unavailable on the server,
+   * it returns a default matches during the first mount.
+   * @default false
+   */
+  defaultMatches?: boolean | undefined;
+  /**
+   * You can provide your own implementation of matchMedia.
+   * This can be used for handling an iframe content window.
+   */
+  matchMedia?: typeof window.matchMedia | undefined;
+  /**
+   * To perform the server-side hydration, the hook needs to render twice.
+   * A first time with `defaultMatches`, the value of the server, and a second time with the resolved value.
+   * This double pass rendering cycle comes with a drawback: it's slower.
+   * You can set this option to `true` if you use the returned value **only** client-side.
+   * @default false
+   */
+  noSsr?: boolean | undefined;
+  /**
+   * You can provide your own implementation of `matchMedia`, it's used when rendering server-side.
+   */
+  ssrMatchMedia?: ((query: string) => {
+    matches: boolean;
+  }) | undefined;
+}
+export declare namespace useMediaQuery {
+  type Options = UseMediaQueryOptions;
+}

package/unstable-use-media-query/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMediaQuery = useMediaQuery;
+var React = _interopRequireWildcard(require("react"));
+var _shim = require("use-sync-external-store/shim");
+function useMediaQuery(query, options) {
+  // Wait for jsdom to support the match media feature.
+  // All the browsers Tale UI support have this built-in.
+  // This defensive check is here for simplicity.
+  // Most of the time, the match media logic isn't central to people tests.
+  const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
+  query = query.replace(/^@media( ?)/m, '');
+  const {
+    defaultMatches = false,
+    matchMedia = supportMatchMedia ? window.matchMedia : null,
+    ssrMatchMedia = null,
+    noSsr = false
+  } = options;
+  const getDefaultSnapshot = React.useCallback(() => defaultMatches, [defaultMatches]);
+  const getServerSnapshot = React.useMemo(() => {
+    if (noSsr && matchMedia) {
+      return () => matchMedia(query).matches;
+    }
+    if (ssrMatchMedia !== null) {
+      const {
+        matches
+      } = ssrMatchMedia(query);
+      return () => matches;
+    }
+    return getDefaultSnapshot;
+  }, [getDefaultSnapshot, query, ssrMatchMedia, noSsr, matchMedia]);
+  const [getSnapshot, subscribe] = React.useMemo(() => {
+    if (matchMedia === null) {
+      return [getDefaultSnapshot, () => () => {}];
+    }
+    const mediaQueryList = matchMedia(query);
+    return [() => mediaQueryList.matches, notify => {
+      mediaQueryList.addEventListener('change', notify);
+      return () => {
+        mediaQueryList.removeEventListener('change', notify);
+      };
+    }];
+  }, [getDefaultSnapshot, matchMedia, query]);
+  const match = (0, _shim.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue({
+      query,
+      match
+    });
+  }
+  return match;
+}

package/use-button/index.d.ts

@@ -0,0 +1 @@
+export { useButton } from "./useButton.js";

package/use-button/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useButton", {
+  enumerable: true,
+  get: function () {
+    return _useButton.useButton;
+  }
+});
+var _useButton = require("./useButton");

package/use-button/useButton.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+export declare function useButton(parameters?: useButton.Parameters): useButton.ReturnValue;
+export interface UseButtonParameters {
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Whether the button may receive focus even if it is disabled.
+   * @default false
+   */
+  focusableWhenDisabled?: boolean | undefined;
+  tabIndex?: NonNullable<React.HTMLAttributes<any>['tabIndex']> | undefined;
+  /**
+   * Whether the component is being rendered as a native button.
+   * @default true
+   */
+  native?: boolean | undefined;
+}
+export interface UseButtonReturnValue {
+  /**
+   * Resolver for the button props.
+   * @param externalProps additional props for the button
+   * @returns props that should be spread on the button
+   */
+  getButtonProps: (externalProps?: React.ComponentPropsWithRef<any>) => React.ComponentPropsWithRef<any>;
+  /**
+   * A ref to the button DOM element. This ref should be passed to the rendered element.
+   * It is not a part of the props returned by `getButtonProps`.
+   */
+  buttonRef: React.Ref<HTMLElement>;
+}
+export declare namespace useButton {
+  type Parameters = UseButtonParameters;
+  type ReturnValue = UseButtonReturnValue;
+}

package/use-button/useButton.js

@@ -0,0 +1,161 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useButton = useButton;
+var React = _interopRequireWildcard(require("react"));
+var _dom = require("@floating-ui/utils/dom");
+var _useStableCallback = require("@tale-ui/utils/useStableCallback");
+var _error = require("@tale-ui/utils/error");
+var _safeReact = require("@tale-ui/utils/safeReact");
+var _useIsoLayoutEffect = require("@tale-ui/utils/useIsoLayoutEffect");
+var _mergeProps = require("../merge-props");
+var _CompositeRootContext = require("../composite/root/CompositeRootContext");
+var _useFocusableWhenDisabled = require("../utils/useFocusableWhenDisabled");
+function useButton(parameters = {}) {
+  const {
+    disabled = false,
+    focusableWhenDisabled,
+    tabIndex = 0,
+    native: isNativeButton = true
+  } = parameters;
+  const elementRef = React.useRef(null);
+  const isCompositeItem = (0, _CompositeRootContext.useCompositeRootContext)(true) !== undefined;
+  const {
+    props: focusableWhenDisabledProps
+  } = (0, _useFocusableWhenDisabled.useFocusableWhenDisabled)({
+    focusableWhenDisabled,
+    disabled,
+    composite: isCompositeItem,
+    tabIndex,
+    isNativeButton
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (!elementRef.current) {
+        return;
+      }
+      const isButtonTag = isButtonElement(elementRef.current);
+      if (isNativeButton) {
+        if (!isButtonTag) {
+          const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+          const message = 'A component that acts as a button expected a native <button> because the ' + '`nativeButton` prop is true. Rendering a non-<button> removes native button ' + 'semantics, which can impact forms and accessibility. Use a real <button> in the ' + '`render` prop, or set `nativeButton` to `false`.';
+          (0, _error.error)(`${message}${ownerStackMessage}`);
+        }
+      } else if (isButtonTag) {
+        const ownerStackMessage = _safeReact.SafeReact.captureOwnerStack?.() || '';
+        const message = 'A component that acts as a button expected a non-<button> because the `nativeButton` ' + 'prop is false. Rendering a <button> keeps native behavior while Tale UI applies ' + 'non-native attributes and handlers, which can add unintended extra attributes (such ' + 'as `role` or `aria-disabled`). Use a non-<button> in the `render` prop, or set ' + '`nativeButton` to `true`.';
+        (0, _error.error)(`${message}${ownerStackMessage}`);
+      }
+    }, [isNativeButton]);
+  }
+
+  // handles a disabled composite button rendering another button, e.g.
+  // <Toolbar.Button disabled render={<Menu.Trigger />} />
+  // the `disabled` prop needs to pass through 2 `useButton`s then finally
+  // delete the `disabled` attribute from DOM
+  const updateDisabled = React.useCallback(() => {
+    const element = elementRef.current;
+    if (!isButtonElement(element)) {
+      return;
+    }
+    if (isCompositeItem && disabled && focusableWhenDisabledProps.disabled === undefined && element.disabled) {
+      element.disabled = false;
+    }
+  }, [disabled, focusableWhenDisabledProps.disabled, isCompositeItem]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(updateDisabled, [updateDisabled]);
+  const getButtonProps = React.useCallback((externalProps = {}) => {
+    const {
+      onClick: externalOnClick,
+      onMouseDown: externalOnMouseDown,
+      onKeyUp: externalOnKeyUp,
+      onKeyDown: externalOnKeyDown,
+      onPointerDown: externalOnPointerDown,
+      ...otherExternalProps
+    } = externalProps;
+    const type = isNativeButton ? 'button' : undefined;
+    return (0, _mergeProps.mergeProps)({
+      type,
+      onClick(event) {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        externalOnClick?.(event);
+      },
+      onMouseDown(event) {
+        if (!disabled) {
+          externalOnMouseDown?.(event);
+        }
+      },
+      onKeyDown(event) {
+        if (disabled) {
+          return;
+        }
+        (0, _mergeProps.makeEventPreventable)(event);
+        externalOnKeyDown?.(event);
+        if (event.taleUIHandlerPrevented) {
+          return;
+        }
+
+        // Keyboard accessibility for non interactive elements
+        const shouldClick = event.target === event.currentTarget && !isNativeButton && !isValidLinkElement(elementRef.current);
+        if (shouldClick) {
+          const isEnterKey = event.key === 'Enter';
+          const isSpaceKey = event.key === ' ';
+          if (isSpaceKey || isEnterKey) {
+            event.preventDefault();
+          }
+          if (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
+        (0, _mergeProps.makeEventPreventable)(event);
+        externalOnKeyUp?.(event);
+        if (event.taleUIHandlerPrevented) {
+          return;
+        }
+
+        // Keyboard accessibility for non interactive elements
+        if (event.target === event.currentTarget && !isNativeButton && event.key === ' ') {
+          externalOnClick?.(event);
+        }
+      },
+      onPointerDown(event) {
+        if (disabled) {
+          event.preventDefault();
+          return;
+        }
+        externalOnPointerDown?.(event);
+      }
+    }, !isNativeButton ? {
+      role: 'button'
+    } : undefined, focusableWhenDisabledProps, otherExternalProps);
+  }, [disabled, focusableWhenDisabledProps, isNativeButton]);
+  const buttonRef = (0, _useStableCallback.useStableCallback)(element => {
+    elementRef.current = element;
+    updateDisabled();
+  });
+  return {
+    getButtonProps,
+    buttonRef
+  };
+}
+function isButtonElement(elem) {
+  return (0, _dom.isHTMLElement)(elem) && elem.tagName === 'BUTTON';
+}
+function isValidLinkElement(elem) {
+  return Boolean(elem?.tagName === 'A' && elem?.href);
+}

package/use-render/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./useRender.js";
+export type { HTMLProps, ComponentRenderFn } from "../utils/types.js";

package/use-render/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useRender = require("./useRender");
+Object.keys(_useRender).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useRender[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useRender[key];
+    }
+  });
+});

package/use-render/useRender.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import type { ComponentRenderFn } from "../utils/types.js";
+import { HTMLProps } from "../utils/types.js";
+import { StateAttributesMapping } from "../utils/getStateAttributesProps.js";
+/**
+ * Renders a Tale UI element.
+ *
+ * @public
+ */
+export declare function useRender<State extends Record<string, unknown>, RenderedElementType extends Element, Enabled extends boolean | undefined = undefined>(params: useRender.Parameters<State, RenderedElementType, Enabled>): useRender.ReturnValue<Enabled>;
+export type UseRenderRenderProp<State = Record<string, unknown>> = React.ReactElement | ComponentRenderFn<React.HTMLAttributes<any>, State>;
+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
+   * 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;
+};
+export interface UseRenderParameters<State, RenderedElementType extends Element, Enabled extends boolean | undefined> {
+  /**
+   * The React element or a function that returns one to override the default element.
+   */
+  render?: UseRenderRenderProp<State> | undefined;
+  /**
+   * The ref to apply to the rendered element.
+   */
+  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.
+   */
+  state?: State | undefined;
+  /**
+   * Custom mapping for converting state properties to data-* attributes.
+   * @example
+   * { isActive: (value) => (value ? { 'data-is-active': '' } : null) }
+   */
+  stateAttributesMapping?: StateAttributesMapping<State> | undefined;
+  /**
+   * Props to be spread on the rendered element.
+   * They are merged with the internal props of the component, so that event handlers
+   * are merged, `className` strings and `style` properties are joined, while other external props overwrite the
+   * internal ones.
+   */
+  props?: Record<string, unknown> | undefined;
+  /**
+   * If `false`, the hook will skip most of its internal logic and return `null`.
+   * This is useful for rendering a component conditionally.
+   * @default true
+   */
+  enabled?: Enabled | undefined;
+  /**
+   * The default tag name to use for the rendered element when `render` is not provided.
+   * @default 'div'
+   */
+  defaultTagName?: keyof React.JSX.IntrinsicElements | undefined;
+}
+export type UseRenderReturnValue<Enabled extends boolean | undefined> = Enabled extends false ? null : React.ReactElement;
+export declare namespace useRender {
+  type RenderProp<State = Record<string, unknown>> = UseRenderRenderProp<State>;
+  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 ReturnValue<Enabled extends boolean | undefined> = UseRenderReturnValue<Enabled>;
+}

package/use-render/useRender.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRender = useRender;
+var _useRenderElement = require("../utils/useRenderElement");
+/**
+ * Renders a Tale UI element.
+ *
+ * @public
+ */
+function useRender(params) {
+  return (0, _useRenderElement.useRenderElement)(params.defaultTagName ?? 'div', params, params);
+}

package/utils/FloatingPortalLite.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { type FloatingPortal } from "../floating-ui-react/index.js";
+/**
+ * `FloatingPortal` includes tabbable logic handling for focus management.
+ * For components that don't need tabbable logic, use `FloatingPortalLite`.
+ * @internal
+ */
+export declare const FloatingPortalLite: React.ForwardRefExoticComponent<Omit<FloatingPortalLite.Props<any>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface FloatingPortalLiteProps<State> extends FloatingPortal.Props<State> {}
+export declare namespace FloatingPortalLite {
+  type Props<State> = FloatingPortalLiteProps<State>;
+}

package/utils/FloatingPortalLite.js

@@ -0,0 +1,42 @@
+"use strict";
+'use client';
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FloatingPortalLite = void 0;
+var React = _interopRequireWildcard(require("react"));
+var ReactDOM = _interopRequireWildcard(require("react-dom"));
+var _floatingUiReact = require("../floating-ui-react");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * `FloatingPortal` includes tabbable logic handling for focus management.
+ * For components that don't need tabbable logic, use `FloatingPortalLite`.
+ * @internal
+ */
+const FloatingPortalLite = exports.FloatingPortalLite = /*#__PURE__*/React.forwardRef(function FloatingPortalLite(componentProps, forwardedRef) {
+  const {
+    children,
+    container,
+    className,
+    render,
+    ...elementProps
+  } = componentProps;
+  const {
+    portalNode,
+    portalSubtree
+  } = (0, _floatingUiReact.useFloatingPortalNode)({
+    container,
+    ref: forwardedRef,
+    componentProps,
+    elementProps
+  });
+  if (!portalSubtree && !portalNode) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
+    children: [portalSubtree, portalNode && /*#__PURE__*/ReactDOM.createPortal(children, portalNode)]
+  });
+});
+if (process.env.NODE_ENV !== "production") FloatingPortalLite.displayName = "FloatingPortalLite";

package/utils/FocusGuard.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+/**
+ * @internal
+ */
+export declare const FocusGuard: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;