@wordpress/components/build-module/composite/legacy/index.js

UI components for WordPress.

/**
 * Composite is a component that may contain navigable items represented by
 * CompositeItem. It's inspired by the WAI-ARIA Composite Role and implements
 * all the keyboard navigation mechanisms to ensure that there's only one
 * tab stop for the whole Composite element. This means that it can behave as
 * a roving tabindex or aria-activedescendant container.
 *
 * This file aims at providing components that are as close as possible to the
 * original `reakit`-based implementation (which was removed from the codebase),
 * although it is recommended that consumers of the package switch to the stable,
 * un-prefixed, `ariakit`-based version of `Composite`.
 *
 * @see https://ariakit.org/components/composite
 */

/**
 * External dependencies
 */
import * as Ariakit from '@ariakit/react';

/**
 * WordPress dependencies
 */
import { forwardRef } from '@wordpress/element';
import { useInstanceId } from '@wordpress/compose';
import deprecated from '@wordpress/deprecated';

/**
 * Internal dependencies
 */
import { Composite as Current } from '..';

// Legacy composite components can either provide state through a
// single `state` prop, or via individual props, usually through
// spreading the state generated by `useCompositeState`.
// That is, `<Composite* { ...state }>`.
import { jsx as _jsx } from "react/jsx-runtime";
function mapLegacyStatePropsToComponentProps(legacyProps) {
  // If a `state` prop is provided, we unpack that; otherwise,
  // the necessary props are provided directly in `legacyProps`.
  if (legacyProps.state) {
    const {
      state,
      ...rest
    } = legacyProps;
    const {
      store,
      ...props
    } = mapLegacyStatePropsToComponentProps(state);
    return {
      ...rest,
      ...props,
      store
    };
  }
  return legacyProps;
}
const LEGACY_TO_NEW_DISPLAY_NAME = {
  __unstableComposite: 'Composite',
  __unstableCompositeGroup: 'Composite.Group or Composite.Row',
  __unstableCompositeItem: 'Composite.Item',
  __unstableUseCompositeState: 'Composite'
};
function proxyComposite(ProxiedComponent, propMap = {}) {
  var _ProxiedComponent$dis;
  const displayName = (_ProxiedComponent$dis = ProxiedComponent.displayName) !== null && _ProxiedComponent$dis !== void 0 ? _ProxiedComponent$dis : '';
  const Component = legacyProps => {
    deprecated(`wp.components.${displayName}`, {
      since: '6.7',
      alternative: LEGACY_TO_NEW_DISPLAY_NAME.hasOwnProperty(displayName) ? LEGACY_TO_NEW_DISPLAY_NAME[displayName] : undefined
    });
    const {
      store,
      ...rest
    } = mapLegacyStatePropsToComponentProps(legacyProps);
    let props = rest;
    props = {
      ...props,
      id: useInstanceId(store, props.baseId, props.id)
    };
    Object.entries(propMap).forEach(([from, to]) => {
      if (props.hasOwnProperty(from)) {
        Object.assign(props, {
          [to]: props[from]
        });
        delete props[from];
      }
    });
    delete props.baseId;
    return /*#__PURE__*/_jsx(ProxiedComponent, {
      ...props,
      store: store
    });
  };
  Component.displayName = displayName;
  return Component;
}

// The old `CompositeGroup` used to behave more like the current
// `CompositeRow`, but this has been split into two different
// components. We handle that difference by checking on the
// provided role, and returning the appropriate component.
const UnproxiedCompositeGroup = forwardRef(({
  role,
  ...props
}, ref) => {
  const Component = role === 'row' ? Current.Row : Current.Group;
  return /*#__PURE__*/_jsx(Component, {
    ref: ref,
    role: role,
    ...props
  });
});

/**
 * _Note: please use the `Composite` component instead._
 *
 * @deprecated
 */
export const Composite = proxyComposite(Object.assign(Current, {
  displayName: '__unstableComposite'
}), {
  baseId: 'id'
});
/**
 * _Note: please use the `Composite.Row` or `Composite.Group` components instead._
 *
 * @deprecated
 */
export const CompositeGroup = proxyComposite(Object.assign(UnproxiedCompositeGroup, {
  displayName: '__unstableCompositeGroup'
}));
/**
 * _Note: please use the `Composite.Item` component instead._
 *
 * @deprecated
 */
export const CompositeItem = proxyComposite(Object.assign(Current.Item, {
  displayName: '__unstableCompositeItem'
}), {
  focusable: 'accessibleWhenDisabled'
});

/**
 * _Note: please use the `Composite` component instead._
 *
 * @deprecated
 */
export function useCompositeState(legacyStateOptions = {}) {
  deprecated(`wp.components.__unstableUseCompositeState`, {
    since: '6.7',
    alternative: LEGACY_TO_NEW_DISPLAY_NAME.__unstableUseCompositeState
  });
  const {
    baseId,
    currentId: defaultActiveId,
    orientation,
    rtl = false,
    loop: focusLoop = false,
    wrap: focusWrap = false,
    shift: focusShift = false,
    // eslint-disable-next-line camelcase
    unstable_virtual: virtualFocus
  } = legacyStateOptions;
  return {
    baseId: useInstanceId(Composite, 'composite', baseId),
    store: Ariakit.useCompositeStore({
      defaultActiveId,
      rtl,
      orientation,
      focusLoop,
      focusShift,
      focusWrap,
      virtualFocus
    })
  };
}
//# sourceMappingURL=index.js.map