@base-ui/react 1.4.1 → 1.5.0

package/esm/floating-ui-react/hooks/useInteractions.js

@@ -1,88 +0,0 @@
-import * as React from 'react';
-import { ACTIVE_KEY, FOCUSABLE_ATTRIBUTE, SELECTED_KEY } from "../utils/constants.js";
-/**
- * Merges an array of interaction hooks' props into prop getters, allowing
- * event handler functions to be composed together without overwriting one
- * another.
- * @see https://floating-ui.com/docs/useInteractions
- */
-export function useInteractions(propsList = []) {
-  const referenceDeps = propsList.map(key => key?.reference);
-  const floatingDeps = propsList.map(key => key?.floating);
-  const itemDeps = propsList.map(key => key?.item);
-  const triggerDeps = propsList.map(key => key?.trigger);
-  const getReferenceProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  referenceDeps);
-  const getFloatingProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  floatingDeps);
-  const getItemProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  itemDeps);
-  const getTriggerProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'trigger'),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  triggerDeps);
-  return React.useMemo(() => ({
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps,
-    getTriggerProps
-  }), [getReferenceProps, getFloatingProps, getItemProps, getTriggerProps]);
-}
-
-/* eslint-disable guard-for-in */
-
-function mergeProps(userProps, propsList, elementKey) {
-  const eventHandlers = new Map();
-  const isItem = elementKey === 'item';
-  const outputProps = {};
-  if (elementKey === 'floating') {
-    outputProps.tabIndex = -1;
-    outputProps[FOCUSABLE_ATTRIBUTE] = '';
-  }
-  for (const key in userProps) {
-    if (isItem && userProps) {
-      if (key === ACTIVE_KEY || key === SELECTED_KEY) {
-        continue;
-      }
-    }
-    outputProps[key] = userProps[key];
-  }
-  for (let i = 0; i < propsList.length; i += 1) {
-    let props;
-    const propsOrGetProps = propsList[i]?.[elementKey];
-    if (typeof propsOrGetProps === 'function') {
-      props = userProps ? propsOrGetProps(userProps) : null;
-    } else {
-      props = propsOrGetProps;
-    }
-    if (!props) {
-      continue;
-    }
-    mutablyMergeProps(outputProps, props, isItem, eventHandlers);
-  }
-  mutablyMergeProps(outputProps, userProps, isItem, eventHandlers);
-  return outputProps;
-}
-function mutablyMergeProps(outputProps, props, isItem, eventHandlers) {
-  for (const key in props) {
-    const value = props[key];
-    if (isItem && (key === ACTIVE_KEY || key === SELECTED_KEY)) {
-      continue;
-    }
-    if (!key.startsWith('on')) {
-      outputProps[key] = value;
-    } else {
-      if (!eventHandlers.has(key)) {
-        eventHandlers.set(key, []);
-      }
-      if (typeof value === 'function') {
-        eventHandlers.get(key)?.push(value);
-        outputProps[key] = (...args) => {
-          return eventHandlers.get(key)?.map(fn => fn(...args)).find(val => val !== undefined);
-        };
-      }
-    }
-  }
-}

package/esm/floating-ui-react/hooks/useRole.d.ts

@@ -1,17 +0,0 @@
-import type { ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
-type AriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
-type ComponentRole = 'select' | 'label' | 'combobox';
-export interface UseRoleProps {
-  /**
-   * The role of the floating element.
-   * @default 'dialog'
-   */
-  role?: AriaRole | ComponentRole | undefined;
-}
-/**
- * Adds base screen reader props to the reference and floating elements for a
- * given floating element `role`.
- * @see https://floating-ui.com/docs/useRole
- */
-export declare function useRole(context: FloatingRootContext | FloatingContext, props?: UseRoleProps): ElementProps;
-export {};

package/esm/floating-ui-react/hooks/useRole.js

@@ -1,113 +0,0 @@
-import * as React from 'react';
-import { useId } from '@base-ui/utils/useId';
-import { EMPTY_OBJECT } from '@base-ui/utils/empty';
-import { getFloatingFocusElement } from "../utils/element.js";
-import { useFloatingParentNodeId } from "../components/FloatingTree.js";
-const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
-
-/**
- * Adds base screen reader props to the reference and floating elements for a
- * given floating element `role`.
- * @see https://floating-ui.com/docs/useRole
- */
-export function useRole(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
-  const defaultFloatingId = store.useState('floatingId');
-  const domReference = store.useState('domReferenceElement');
-  const floatingElement = store.useState('floatingElement');
-  const {
-    role = 'dialog'
-  } = props;
-  const defaultReferenceId = useId();
-  const referenceId = domReference?.id || defaultReferenceId;
-  const floatingId = React.useMemo(() => getFloatingFocusElement(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
-  const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
-  const parentId = useFloatingParentNodeId();
-  const isNested = parentId != null;
-  const trigger = React.useMemo(() => {
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return EMPTY_OBJECT;
-    }
-    return {
-      'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
-      'aria-expanded': 'false',
-      ...(ariaRole === 'listbox' && {
-        role: 'combobox'
-      }),
-      ...(ariaRole === 'menu' && isNested && {
-        role: 'menuitem'
-      }),
-      ...(role === 'select' && {
-        'aria-autocomplete': 'none'
-      }),
-      ...(role === 'combobox' && {
-        'aria-autocomplete': 'list'
-      })
-    };
-  }, [ariaRole, isNested, role]);
-  const reference = React.useMemo(() => {
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return {
-        [`aria-${role === 'label' ? 'labelledby' : 'describedby'}`]: open ? floatingId : undefined
-      };
-    }
-    const triggerProps = trigger;
-    return {
-      ...triggerProps,
-      'aria-expanded': open ? 'true' : 'false',
-      'aria-controls': open ? floatingId : undefined,
-      ...(ariaRole === 'menu' && {
-        id: referenceId
-      })
-    };
-  }, [ariaRole, floatingId, open, referenceId, role, trigger]);
-  const floating = React.useMemo(() => {
-    const floatingProps = {
-      id: floatingId,
-      ...(ariaRole && {
-        role: ariaRole
-      })
-    };
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return floatingProps;
-    }
-    return {
-      ...floatingProps,
-      ...(ariaRole === 'menu' && {
-        'aria-labelledby': referenceId
-      })
-    };
-  }, [ariaRole, floatingId, referenceId, role]);
-  const item = React.useCallback(({
-    active,
-    selected
-  }) => {
-    const commonProps = {
-      role: 'option',
-      ...(active && {
-        id: `${floatingId}-fui-option`
-      })
-    };
-
-    // For `menu`, we are unable to tell if the item is a `menuitemradio`
-    // or `menuitemcheckbox`. For backwards-compatibility reasons, also
-    // avoid defaulting to `menuitem` as it may overwrite custom role props.
-    switch (role) {
-      case 'select':
-      case 'combobox':
-        return {
-          ...commonProps,
-          'aria-selected': selected
-        };
-      default:
-    }
-    return {};
-  }, [floatingId, role]);
-  return React.useMemo(() => ({
-    reference,
-    floating,
-    item,
-    trigger
-  }), [reference, floating, trigger, item]);
-}

package/floating-ui-react/hooks/useInteractions.d.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import type { ElementProps } from "../types.js";
-import { ACTIVE_KEY, SELECTED_KEY } from "../utils/constants.js";
-export type ExtendedUserProps = {
-  [ACTIVE_KEY]?: boolean | undefined;
-  [SELECTED_KEY]?: boolean | undefined;
-};
-export interface UseInteractionsReturn {
-  getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
-  getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
-  getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, 'selected' | 'active'> & ExtendedUserProps) => Record<string, unknown>;
-  getTriggerProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
-}
-/**
- * Merges an array of interaction hooks' props into prop getters, allowing
- * event handler functions to be composed together without overwriting one
- * another.
- * @see https://floating-ui.com/docs/useInteractions
- */
-export declare function useInteractions(propsList?: Array<ElementProps | void>): UseInteractionsReturn;

package/floating-ui-react/hooks/useInteractions.js

@@ -1,95 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useInteractions = useInteractions;
-var React = _interopRequireWildcard(require("react"));
-var _constants = require("../utils/constants");
-/**
- * Merges an array of interaction hooks' props into prop getters, allowing
- * event handler functions to be composed together without overwriting one
- * another.
- * @see https://floating-ui.com/docs/useInteractions
- */
-function useInteractions(propsList = []) {
-  const referenceDeps = propsList.map(key => key?.reference);
-  const floatingDeps = propsList.map(key => key?.floating);
-  const itemDeps = propsList.map(key => key?.item);
-  const triggerDeps = propsList.map(key => key?.trigger);
-  const getReferenceProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'reference'),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  referenceDeps);
-  const getFloatingProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'floating'),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  floatingDeps);
-  const getItemProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'item'),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  itemDeps);
-  const getTriggerProps = React.useCallback(userProps => mergeProps(userProps, propsList, 'trigger'),
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  triggerDeps);
-  return React.useMemo(() => ({
-    getReferenceProps,
-    getFloatingProps,
-    getItemProps,
-    getTriggerProps
-  }), [getReferenceProps, getFloatingProps, getItemProps, getTriggerProps]);
-}
-
-/* eslint-disable guard-for-in */
-
-function mergeProps(userProps, propsList, elementKey) {
-  const eventHandlers = new Map();
-  const isItem = elementKey === 'item';
-  const outputProps = {};
-  if (elementKey === 'floating') {
-    outputProps.tabIndex = -1;
-    outputProps[_constants.FOCUSABLE_ATTRIBUTE] = '';
-  }
-  for (const key in userProps) {
-    if (isItem && userProps) {
-      if (key === _constants.ACTIVE_KEY || key === _constants.SELECTED_KEY) {
-        continue;
-      }
-    }
-    outputProps[key] = userProps[key];
-  }
-  for (let i = 0; i < propsList.length; i += 1) {
-    let props;
-    const propsOrGetProps = propsList[i]?.[elementKey];
-    if (typeof propsOrGetProps === 'function') {
-      props = userProps ? propsOrGetProps(userProps) : null;
-    } else {
-      props = propsOrGetProps;
-    }
-    if (!props) {
-      continue;
-    }
-    mutablyMergeProps(outputProps, props, isItem, eventHandlers);
-  }
-  mutablyMergeProps(outputProps, userProps, isItem, eventHandlers);
-  return outputProps;
-}
-function mutablyMergeProps(outputProps, props, isItem, eventHandlers) {
-  for (const key in props) {
-    const value = props[key];
-    if (isItem && (key === _constants.ACTIVE_KEY || key === _constants.SELECTED_KEY)) {
-      continue;
-    }
-    if (!key.startsWith('on')) {
-      outputProps[key] = value;
-    } else {
-      if (!eventHandlers.has(key)) {
-        eventHandlers.set(key, []);
-      }
-      if (typeof value === 'function') {
-        eventHandlers.get(key)?.push(value);
-        outputProps[key] = (...args) => {
-          return eventHandlers.get(key)?.map(fn => fn(...args)).find(val => val !== undefined);
-        };
-      }
-    }
-  }
-}

package/floating-ui-react/hooks/useRole.d.ts

@@ -1,17 +0,0 @@
-import type { ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
-type AriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
-type ComponentRole = 'select' | 'label' | 'combobox';
-export interface UseRoleProps {
-  /**
-   * The role of the floating element.
-   * @default 'dialog'
-   */
-  role?: AriaRole | ComponentRole | undefined;
-}
-/**
- * Adds base screen reader props to the reference and floating elements for a
- * given floating element `role`.
- * @see https://floating-ui.com/docs/useRole
- */
-export declare function useRole(context: FloatingRootContext | FloatingContext, props?: UseRoleProps): ElementProps;
-export {};

package/floating-ui-react/hooks/useRole.js

@@ -1,120 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useRole = useRole;
-var React = _interopRequireWildcard(require("react"));
-var _useId = require("@base-ui/utils/useId");
-var _empty = require("@base-ui/utils/empty");
-var _element = require("../utils/element");
-var _FloatingTree = require("../components/FloatingTree");
-const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
-
-/**
- * Adds base screen reader props to the reference and floating elements for a
- * given floating element `role`.
- * @see https://floating-ui.com/docs/useRole
- */
-function useRole(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
-  const defaultFloatingId = store.useState('floatingId');
-  const domReference = store.useState('domReferenceElement');
-  const floatingElement = store.useState('floatingElement');
-  const {
-    role = 'dialog'
-  } = props;
-  const defaultReferenceId = (0, _useId.useId)();
-  const referenceId = domReference?.id || defaultReferenceId;
-  const floatingId = React.useMemo(() => (0, _element.getFloatingFocusElement)(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
-  const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
-  const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
-  const isNested = parentId != null;
-  const trigger = React.useMemo(() => {
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return _empty.EMPTY_OBJECT;
-    }
-    return {
-      'aria-haspopup': ariaRole === 'alertdialog' ? 'dialog' : ariaRole,
-      'aria-expanded': 'false',
-      ...(ariaRole === 'listbox' && {
-        role: 'combobox'
-      }),
-      ...(ariaRole === 'menu' && isNested && {
-        role: 'menuitem'
-      }),
-      ...(role === 'select' && {
-        'aria-autocomplete': 'none'
-      }),
-      ...(role === 'combobox' && {
-        'aria-autocomplete': 'list'
-      })
-    };
-  }, [ariaRole, isNested, role]);
-  const reference = React.useMemo(() => {
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return {
-        [`aria-${role === 'label' ? 'labelledby' : 'describedby'}`]: open ? floatingId : undefined
-      };
-    }
-    const triggerProps = trigger;
-    return {
-      ...triggerProps,
-      'aria-expanded': open ? 'true' : 'false',
-      'aria-controls': open ? floatingId : undefined,
-      ...(ariaRole === 'menu' && {
-        id: referenceId
-      })
-    };
-  }, [ariaRole, floatingId, open, referenceId, role, trigger]);
-  const floating = React.useMemo(() => {
-    const floatingProps = {
-      id: floatingId,
-      ...(ariaRole && {
-        role: ariaRole
-      })
-    };
-    if (ariaRole === 'tooltip' || role === 'label') {
-      return floatingProps;
-    }
-    return {
-      ...floatingProps,
-      ...(ariaRole === 'menu' && {
-        'aria-labelledby': referenceId
-      })
-    };
-  }, [ariaRole, floatingId, referenceId, role]);
-  const item = React.useCallback(({
-    active,
-    selected
-  }) => {
-    const commonProps = {
-      role: 'option',
-      ...(active && {
-        id: `${floatingId}-fui-option`
-      })
-    };
-
-    // For `menu`, we are unable to tell if the item is a `menuitemradio`
-    // or `menuitemcheckbox`. For backwards-compatibility reasons, also
-    // avoid defaulting to `menuitem` as it may overwrite custom role props.
-    switch (role) {
-      case 'select':
-      case 'combobox':
-        return {
-          ...commonProps,
-          'aria-selected': selected
-        };
-      default:
-    }
-    return {};
-  }, [floatingId, role]);
-  return React.useMemo(() => ({
-    reference,
-    floating,
-    item,
-    trigger
-  }), [reference, floating, trigger, item]);
-}