@react-md/utils
Version:
General utils for react-md.
79 lines • 2.4 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { ActiveDescendantContextProvider } from "./activeDescendantContext";
/**
* This component should be used with the {@link KeyboardMovementProvider}
* component to implement custom keyboard focusable behavior using
* `aria-activedescendant`.
*
* @example
* Base Example
* ```tsx
* function Descendant({ id, children, ...props }: HTMLAttributes<HTMLDivElement>): ReactElement {
* const { ref, active } = useActiveDescendant({ id });
* return (
* <div
* {...props}
* id={id}
* ref={ref}
* role="option"
* tabIndex={-1}
* className={active ? "active" : undefined}
* >
* {children}
* </div>
* );
* }
*
* function CustomFocus(): ReactElement {
* const { providerProps, focusIndex, ...containerProps } =
* useActiveDescendantFocus()
*
* return (
* <ActiveDescendantMovementProvider>
* <div
* {...containerProps}
* id="some-unique-id"
* role="listbox"
* tabIndex={0}
* >
* <Descendant id="some-descendant-id">
* Some Option
* </Descendant>
* </div>
* </ActiveDescendantMovementProvider>
* );
* }
*
* function Example() {
* return (
* <KeyboardMovementProvider loopable searchable>
* <CustomFocus />
* </KeyboardMovementProvider>
* );
* }
* ```
*
* @see https://www.w3.org/TR/wai-aria-practices/#kbd_focus_activedescendant
* @internal
* @remarks \@since 5.0.0
*/
export function ActiveDescendantMovementProvider(_a) {
var children = _a.children, activeId = _a.activeId, setActiveId = _a.setActiveId;
return (_jsx(ActiveDescendantContextProvider, __assign({ value: useMemo(function () { return ({
activeId: activeId,
setActiveId: setActiveId,
}); }, [activeId, setActiveId]) }, { children: children })));
}
//# sourceMappingURL=ActiveDescendantMovementProvider.js.map