@base-ui/react 1.0.0 → 1.2.0

package/utils/useValueChanged.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

package/esm/toast/viewport/ToastViewportContext.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface ToastViewportContext {
-  viewportRef: React.RefObject<HTMLElement | null>;
-}
-export declare const ToastViewportContext: React.Context<ToastViewportContext | undefined>;
-export declare function useToastViewportContext(): ToastViewportContext;

package/esm/toast/viewport/ToastViewportContext.js

@@ -1,11 +0,0 @@
-import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
-import * as React from 'react';
-export const ToastViewportContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ToastViewportContext.displayName = "ToastViewportContext";
-export function useToastViewportContext() {
-  const context = React.useContext(ToastViewportContext);
-  if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToastViewportContext is missing. Toast parts must be placed within <Toast.Viewport>.' : _formatErrorMessage(67));
-  }
-  return context;
-}

package/esm/utils/interactions/useFocusWithDelay.d.ts

@@ -1,9 +0,0 @@
-import type { FloatingRootContext, ElementProps } from "../../floating-ui-react/index.js";
-interface UseFocusWithDelayProps {
-  delay?: number | (() => number | undefined);
-}
-/**
- * Adds support for delay, since Floating UI's `useFocus` hook does not support it.
- */
-export declare function useFocusWithDelay(store: FloatingRootContext, props?: UseFocusWithDelayProps): ElementProps;
-export {};

package/esm/utils/interactions/useFocusWithDelay.js

@@ -1,81 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { getWindow, isHTMLElement } from '@floating-ui/utils/dom';
-import { useTimeout } from '@base-ui/utils/useTimeout';
-import { createChangeEventDetails } from "../createBaseUIEventDetails.js";
-import { REASONS } from "../reasons.js";
-import { activeElement, contains, getDocument } from "../../floating-ui-react/utils.js";
-/**
- * Adds support for delay, since Floating UI's `useFocus` hook does not support it.
- */
-export function useFocusWithDelay(store, props = {}) {
-  const domReference = store.useState('domReferenceElement');
-  const dataRef = store.context.dataRef;
-  const {
-    delay
-  } = props;
-  const timeout = useTimeout();
-  const blockFocusRef = React.useRef(false);
-  React.useEffect(() => {
-    // TODO: remove domReference from dependencies or split this hook into trigger/popup hooks.
-    const win = getWindow(domReference);
-
-    // If the reference was focused and the user left the tab/window, and the preview card was not
-    // open, the focus should be blocked when they return to the tab/window.
-    function handleBlur() {
-      const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && isHTMLElement(currentDomReference) && currentDomReference === activeElement(getDocument(currentDomReference))) {
-        blockFocusRef.current = true;
-      }
-    }
-    win.addEventListener('blur', handleBlur);
-    return () => {
-      win.removeEventListener('blur', handleBlur);
-    };
-  }, [store, domReference]);
-  const reference = React.useMemo(() => ({
-    onFocus(event) {
-      const {
-        nativeEvent
-      } = event;
-      const delayValue = typeof delay === 'function' ? delay() : delay;
-      timeout.start(delayValue ?? 0, () => {
-        store.setOpen(true, createChangeEventDetails(REASONS.triggerFocus, nativeEvent));
-      });
-    },
-    onBlur(event) {
-      blockFocusRef.current = false;
-      const {
-        relatedTarget,
-        nativeEvent
-      } = event;
-
-      // Wait for the window blur listener to fire.
-      timeout.start(0, () => {
-        const currentDomReference = store.select('domReferenceElement');
-        const activeEl = activeElement(currentDomReference ? currentDomReference.ownerDocument : document);
-
-        // Focus left the page, keep it open.
-        if (!relatedTarget && activeEl === currentDomReference) {
-          return;
-        }
-
-        // When focusing the reference element (e.g. regular click), then
-        // clicking into the floating element, prevent it from hiding.
-        // Note: it must be focusable, e.g. `tabindex="-1"`.
-        // We can not rely on relatedTarget to point to the correct element
-        // as it will only point to the shadow host of the newly focused element
-        // and not the element that actually has received focus if it is located
-        // inside a shadow root.
-        if (contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || contains(currentDomReference, activeEl)) {
-          return;
-        }
-        store.setOpen(false, createChangeEventDetails(REASONS.triggerFocus, nativeEvent));
-      });
-    }
-  }), [delay, store, dataRef, timeout]);
-  return React.useMemo(() => ({
-    reference
-  }), [reference]);
-}

package/toast/viewport/ToastViewportContext.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface ToastViewportContext {
-  viewportRef: React.RefObject<HTMLElement | null>;
-}
-export declare const ToastViewportContext: React.Context<ToastViewportContext | undefined>;
-export declare function useToastViewportContext(): ToastViewportContext;

package/toast/viewport/ToastViewportContext.js

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ToastViewportContext = void 0;
-exports.useToastViewportContext = useToastViewportContext;
-var _formatErrorMessage2 = _interopRequireDefault(require("@base-ui/utils/formatErrorMessage"));
-var React = _interopRequireWildcard(require("react"));
-const ToastViewportContext = exports.ToastViewportContext = /*#__PURE__*/React.createContext(undefined);
-if (process.env.NODE_ENV !== "production") ToastViewportContext.displayName = "ToastViewportContext";
-function useToastViewportContext() {
-  const context = React.useContext(ToastViewportContext);
-  if (!context) {
-    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: ToastViewportContext is missing. Toast parts must be placed within <Toast.Viewport>.' : (0, _formatErrorMessage2.default)(67));
-  }
-  return context;
-}

package/utils/interactions/useFocusWithDelay.d.ts

@@ -1,9 +0,0 @@
-import type { FloatingRootContext, ElementProps } from "../../floating-ui-react/index.js";
-interface UseFocusWithDelayProps {
-  delay?: number | (() => number | undefined);
-}
-/**
- * Adds support for delay, since Floating UI's `useFocus` hook does not support it.
- */
-export declare function useFocusWithDelay(store: FloatingRootContext, props?: UseFocusWithDelayProps): ElementProps;
-export {};

package/utils/interactions/useFocusWithDelay.js

@@ -1,87 +0,0 @@
-"use strict";
-'use client';
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useFocusWithDelay = useFocusWithDelay;
-var React = _interopRequireWildcard(require("react"));
-var _dom = require("@floating-ui/utils/dom");
-var _useTimeout = require("@base-ui/utils/useTimeout");
-var _createBaseUIEventDetails = require("../createBaseUIEventDetails");
-var _reasons = require("../reasons");
-var _utils = require("../../floating-ui-react/utils");
-/**
- * Adds support for delay, since Floating UI's `useFocus` hook does not support it.
- */
-function useFocusWithDelay(store, props = {}) {
-  const domReference = store.useState('domReferenceElement');
-  const dataRef = store.context.dataRef;
-  const {
-    delay
-  } = props;
-  const timeout = (0, _useTimeout.useTimeout)();
-  const blockFocusRef = React.useRef(false);
-  React.useEffect(() => {
-    // TODO: remove domReference from dependencies or split this hook into trigger/popup hooks.
-    const win = (0, _dom.getWindow)(domReference);
-
-    // If the reference was focused and the user left the tab/window, and the preview card was not
-    // open, the focus should be blocked when they return to the tab/window.
-    function handleBlur() {
-      const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && (0, _dom.isHTMLElement)(currentDomReference) && currentDomReference === (0, _utils.activeElement)((0, _utils.getDocument)(currentDomReference))) {
-        blockFocusRef.current = true;
-      }
-    }
-    win.addEventListener('blur', handleBlur);
-    return () => {
-      win.removeEventListener('blur', handleBlur);
-    };
-  }, [store, domReference]);
-  const reference = React.useMemo(() => ({
-    onFocus(event) {
-      const {
-        nativeEvent
-      } = event;
-      const delayValue = typeof delay === 'function' ? delay() : delay;
-      timeout.start(delayValue ?? 0, () => {
-        store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));
-      });
-    },
-    onBlur(event) {
-      blockFocusRef.current = false;
-      const {
-        relatedTarget,
-        nativeEvent
-      } = event;
-
-      // Wait for the window blur listener to fire.
-      timeout.start(0, () => {
-        const currentDomReference = store.select('domReferenceElement');
-        const activeEl = (0, _utils.activeElement)(currentDomReference ? currentDomReference.ownerDocument : document);
-
-        // Focus left the page, keep it open.
-        if (!relatedTarget && activeEl === currentDomReference) {
-          return;
-        }
-
-        // When focusing the reference element (e.g. regular click), then
-        // clicking into the floating element, prevent it from hiding.
-        // Note: it must be focusable, e.g. `tabindex="-1"`.
-        // We can not rely on relatedTarget to point to the correct element
-        // as it will only point to the shadow host of the newly focused element
-        // and not the element that actually has received focus if it is located
-        // inside a shadow root.
-        if ((0, _utils.contains)(dataRef.current.floatingContext?.refs.floating.current, activeEl) || (0, _utils.contains)(currentDomReference, activeEl)) {
-          return;
-        }
-        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));
-      });
-    }
-  }), [delay, store, dataRef, timeout]);
-  return React.useMemo(() => ({
-    reference
-  }), [reference]);
-}