@wordpress/components
Version:
UI components for WordPress.
198 lines • 8.8 kB
TypeScript
/**
* Composite is a component that may contain navigable items represented by
* Composite.Item. 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.
*
* @see https://ariakit.org/components/composite
*/
/**
* External dependencies
*/
import * as Ariakit from '@ariakit/react';
/**
* Renders a widget based on the WAI-ARIA [`composite`](https://w3c.github.io/aria/#composite)
* role, which provides a single tab stop on the page and arrow key navigation
* through the focusable descendants.
*
* @example
* ```jsx
* import { Composite } from '@wordpress/components';
*
* <Composite>
* <Composite.Item>Item 1</Composite.Item>
* <Composite.Item>Item 2</Composite.Item>
* </Composite>
* ```
*/
export declare const Composite: import("react").ForwardRefExoticComponent<{
activeId?: Ariakit.CompositeStoreProps["activeId"];
defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
focusShift?: Ariakit.CompositeStoreProps["focusShift"];
virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
orientation?: Ariakit.CompositeStoreProps["orientation"];
rtl?: Ariakit.CompositeStoreProps["rtl"];
} & {
render?: Ariakit.CompositeProps["render"];
focusable?: Ariakit.CompositeProps["focusable"];
disabled?: Ariakit.CompositeProps["disabled"];
accessibleWhenDisabled?: Ariakit.CompositeProps["accessibleWhenDisabled"];
onFocusVisible?: Ariakit.CompositeProps["onFocusVisible"];
children?: Ariakit.CompositeProps["children"];
} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "disabled" | "focusable" | "children" | "as" | "render" | "accessibleWhenDisabled" | "onFocusVisible" | keyof {
activeId?: Ariakit.CompositeStoreProps["activeId"];
defaultActiveId?: Ariakit.CompositeStoreProps["defaultActiveId"];
setActiveId?: Ariakit.CompositeStoreProps["setActiveId"];
focusLoop?: Ariakit.CompositeStoreProps["focusLoop"];
focusWrap?: Ariakit.CompositeStoreProps["focusWrap"];
focusShift?: Ariakit.CompositeStoreProps["focusShift"];
virtualFocus?: Ariakit.CompositeStoreProps["virtualFocus"];
orientation?: Ariakit.CompositeStoreProps["orientation"];
rtl?: Ariakit.CompositeStoreProps["rtl"];
}> & import("react").RefAttributes<HTMLDivElement>> & {
/**
* Renders a group element for composite items.
*
* @example
* ```jsx
* import { Composite } from '@wordpress/components';
*
* <Composite>
* <Composite.Group>
* <Composite.GroupLabel>Label</Composite.GroupLabel>
* <Composite.Item>Item 1</Composite.Item>
* <Composite.Item>Item 2</Composite.Item>
* </CompositeGroup>
* </Composite>
* ```
*/
Group: import("react").ForwardRefExoticComponent<import("./types").CompositeGroupProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeGroupProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a label in a composite group. This component must be wrapped with
* `Composite.Group` so the `aria-labelledby` prop is properly set on the
* composite group element.
*
* @example
* ```jsx
* import { Composite } from '@wordpress/components';
*
* <Composite>
* <Composite.Group>
* <Composite.GroupLabel>Label</Composite.GroupLabel>
* <Composite.Item>Item 1</Composite.Item>
* <Composite.Item>Item 2</Composite.Item>
* </CompositeGroup>
* </Composite>
* ```
*/
GroupLabel: import("react").ForwardRefExoticComponent<import("./types").CompositeGroupLabelProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeGroupLabelProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a composite item.
*
* @example
* ```jsx
* import { Composite } from '@wordpress/components';
*
* <Composite>
* <Composite.Item>Item 1</Composite.Item>
* <Composite.Item>Item 2</Composite.Item>
* <Composite.Item>Item 3</Composite.Item>
* </Composite>
* ```
*/
Item: import("react").ForwardRefExoticComponent<import("./types").CompositeItemProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "as" | keyof import("./types").CompositeItemProps> & import("react").RefAttributes<HTMLButtonElement>> & {
displayName: string;
};
/**
* Renders a composite row. Wrapping `Composite.Item` elements within
* `Composite.Row` will create a two-dimensional composite widget, such as a
* grid.
*
* @example
* ```jsx
* import { Composite } from '@wordpress/components';
*
* <Composite>
* <Composite.Row>
* <Composite.Item>Item 1.1</Composite.Item>
* <Composite.Item>Item 1.2</Composite.Item>
* <Composite.Item>Item 1.3</Composite.Item>
* </Composite.Row>
* <Composite.Row>
* <Composite.Item>Item 2.1</Composite.Item>
* <Composite.Item>Item 2.2</Composite.Item>
* <Composite.Item>Item 2.3</Composite.Item>
* </Composite.Row>
* </Composite>
* ```
*/
Row: import("react").ForwardRefExoticComponent<import("./types").CompositeRowProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeRowProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders an element in a composite widget that receives focus on mouse move
* and loses focus to the composite base element on mouse leave. This should
* be combined with the `Composite.Item` component.
*
* @example
* ```jsx
* import { Composite } from '@wordpress/components';
*
* <Composite>
* <Composite.Hover render={ <Composite.Item /> }>
* Item 1
* </Composite.Hover>
* <Composite.Hover render={ <Composite.Item /> }>
* Item 2
* </Composite.Hover>
* </Composite>
* ```
*/
Hover: import("react").ForwardRefExoticComponent<import("./types").CompositeHoverProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeHoverProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* Renders a component that adds typeahead functionality to composite
* components. Hitting printable character keys will move focus to the next
* composite item that begins with the input characters.
*
* @example
* ```jsx
* import { Composite } from '@wordpress/components';
*
* <Composite render={ <CompositeTypeahead /> }>
* <Composite.Item>Item 1</Composite.Item>
* <Composite.Item>Item 2</Composite.Item>
* </Composite>
* ```
*/
Typeahead: import("react").ForwardRefExoticComponent<import("./types").CompositeTypeaheadProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "as" | keyof import("./types").CompositeTypeaheadProps> & import("react").RefAttributes<HTMLDivElement>> & {
displayName: string;
};
/**
* The React context used by the composite components. It can be used by
* to access the composite store, and to forward the context when composite
* sub-components are rendered across portals (ie. `SlotFill` components)
* that would not otherwise forward the context to the `Fill` children.
*
* @example
* ```jsx
* import { Composite } from '@wordpress/components';
* import { useContext } from '@wordpress/element';
*
* const compositeContext = useContext( Composite.Context );
* ```
*/
Context: import("react").Context<import("./types").CompositeContextProps> & {
displayName: string;
};
};
//# sourceMappingURL=index.d.ts.map