@wordpress/components
Version:
UI components for WordPress.
189 lines (180 loc) • 6.42 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.CompositeItem = exports.CompositeGroup = exports.Composite = void 0;
exports.useCompositeState = useCompositeState;
var Ariakit = _interopRequireWildcard(require("@ariakit/react"));
var _element = require("@wordpress/element");
var _compose = require("@wordpress/compose");
var _deprecated = _interopRequireDefault(require("@wordpress/deprecated"));
var _ = require("..");
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
* 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
*/
/**
* WordPress dependencies
*/
/**
* Internal dependencies
*/
// 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 }>`.
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 => {
(0, _deprecated.default)(`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: (0, _compose.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__*/(0, _jsxRuntime.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 = (0, _element.forwardRef)(({
role,
...props
}, ref) => {
const Component = role === 'row' ? _.Composite.Row : _.Composite.Group;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
ref: ref,
role: role,
...props
});
});
/**
* _Note: please use the `Composite` component instead._
*
* @deprecated
*/
const Composite = exports.Composite = proxyComposite(Object.assign(_.Composite, {
displayName: '__unstableComposite'
}), {
baseId: 'id'
});
/**
* _Note: please use the `Composite.Row` or `Composite.Group` components instead._
*
* @deprecated
*/
const CompositeGroup = exports.CompositeGroup = proxyComposite(Object.assign(UnproxiedCompositeGroup, {
displayName: '__unstableCompositeGroup'
}));
/**
* _Note: please use the `Composite.Item` component instead._
*
* @deprecated
*/
const CompositeItem = exports.CompositeItem = proxyComposite(Object.assign(_.Composite.Item, {
displayName: '__unstableCompositeItem'
}), {
focusable: 'accessibleWhenDisabled'
});
/**
* _Note: please use the `Composite` component instead._
*
* @deprecated
*/
function useCompositeState(legacyStateOptions = {}) {
(0, _deprecated.default)(`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: (0, _compose.useInstanceId)(Composite, 'composite', baseId),
store: Ariakit.useCompositeStore({
defaultActiveId,
rtl,
orientation,
focusLoop,
focusShift,
focusWrap,
virtualFocus
})
};
}
//# sourceMappingURL=index.js.map