@base-ui-components/react
Version:
Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.
60 lines (59 loc) • 2.46 kB
JavaScript
;
'use client';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.useCompositeListItem = useCompositeListItem;
var React = _interopRequireWildcard(require("react"));
var _useEnhancedEffect = require("../../utils/useEnhancedEffect");
var _CompositeListContext = require("./CompositeListContext");
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; }
/**
* Used to register a list item and its index (DOM position) in the `CompositeList`.
*/
function useCompositeListItem(params = {}) {
const {
label,
metadata
} = params;
const {
register,
unregister,
map,
elementsRef,
labelsRef
} = (0, _CompositeListContext.useCompositeListContext)();
const [index, setIndex] = React.useState(null);
const componentRef = React.useRef(null);
const ref = React.useCallback(node => {
componentRef.current = node;
if (index !== null) {
elementsRef.current[index] = node;
if (labelsRef) {
const isLabelDefined = label !== undefined;
labelsRef.current[index] = isLabelDefined ? label : node?.textContent ?? null;
}
}
}, [index, elementsRef, labelsRef, label]);
(0, _useEnhancedEffect.useEnhancedEffect)(() => {
const node = componentRef.current;
if (node) {
register(node, metadata);
return () => {
unregister(node);
};
}
return undefined;
}, [register, unregister, metadata]);
(0, _useEnhancedEffect.useEnhancedEffect)(() => {
const i = componentRef.current ? map.get(componentRef.current)?.index : null;
if (i != null) {
setIndex(i);
}
}, [map]);
return React.useMemo(() => ({
ref,
index: index == null ? -1 : index
}), [index, ref]);
}