@wordpress/components
Version:
UI components for WordPress.
244 lines (239 loc) • 7.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Composite = void 0;
var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
var _i18n = require("@wordpress/i18n");
var _element = require("@wordpress/element");
var _context = require("./context");
var _group = require("./group");
var _groupLabel = require("./group-label");
var _hover = require("./hover");
var _item = require("./item");
var _row = require("./row");
var _typeahead = require("./typeahead");
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
/**
* 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
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
/**
* 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>
* ```
*/
const Composite = exports.Composite = Object.assign((0, _element.forwardRef)(function Composite({
// Composite store props
activeId,
defaultActiveId,
setActiveId,
focusLoop = false,
focusWrap = false,
focusShift = false,
virtualFocus = false,
orientation = 'both',
rtl = (0, _i18n.isRTL)(),
// Composite component props
children,
disabled = false,
// Rest props
...props
}, ref) {
// @ts-expect-error The store prop is undocumented and only used by the
// legacy compat layer.
const storeProp = props.store;
const internalStore = Ariakit.useCompositeStore({
activeId,
defaultActiveId,
setActiveId,
focusLoop,
focusWrap,
focusShift,
virtualFocus,
orientation,
rtl
});
const store = storeProp !== null && storeProp !== void 0 ? storeProp : internalStore;
const contextValue = (0, _element.useMemo)(() => ({
store
}), [store]);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Ariakit.Composite, {
disabled: disabled,
store: store,
...props,
ref: ref,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_context.CompositeContext.Provider, {
value: contextValue,
children: children
})
});
}), {
/**
* 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: Object.assign(_group.CompositeGroup, {
displayName: 'Composite.Group'
}),
/**
* 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: Object.assign(_groupLabel.CompositeGroupLabel, {
displayName: 'Composite.GroupLabel'
}),
/**
* 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: Object.assign(_item.CompositeItem, {
displayName: 'Composite.Item'
}),
/**
* 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: Object.assign(_row.CompositeRow, {
displayName: 'Composite.Row'
}),
/**
* 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: Object.assign(_hover.CompositeHover, {
displayName: 'Composite.Hover'
}),
/**
* 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: Object.assign(_typeahead.CompositeTypeahead, {
displayName: 'Composite.Typeahead'
}),
/**
* 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: Object.assign(_context.CompositeContext, {
displayName: 'Composite.Context'
})
});
//# sourceMappingURL=index.js.map