@momentum-ui/react-collaboration
Version:
Cisco Momentum UI Framework for React Collaboration Applications
60 lines • 2.89 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);
};
/* eslint-disable @typescript-eslint/ban-types */
import React, { forwardRef } from 'react';
import ListBoxSection from '../ListBoxSection';
import ListBoxItem from '../ListBoxItem';
import { useListBox } from '@react-aria/listbox';
import MenuListBackground from '../MenuListBackground';
import { ListContext } from '../List/List.utils';
import { useSpatialNavigationContext } from '../SpatialNavigationProvider/SpatialNavigationProvider.utils';
export var ListBoxContext = React.createContext(null);
var ListBoxBase = function (props, ref) {
var state = props.state, className = props.className, id = props.id, style = props.style;
var mutatedProps = __assign({}, props);
delete mutatedProps.id;
var listBoxProps = useListBox(__assign(__assign({ autoFocus: props.autoFocus }, mutatedProps), { shouldSelectOnPressUp: false, id: id }), state, ref).listBoxProps;
var spatialNav = useSpatialNavigationContext();
var renderItems = function () {
return Array.from(state.collection.getKeys()).map(function (key) {
var item = state.collection.getItem(key);
if (item.type === 'section') {
return React.createElement(ListBoxSection, { key: item.key, section: item });
}
else if (item.type === 'item' && !item.parentKey) {
return React.createElement(ListBoxItem, { item: item, key: item.key });
}
});
};
var menuListProps = __assign(__assign({}, listBoxProps), { onKeyDown: function (e) {
if (spatialNav) {
// skip spatial navigation
e.nativeEvent.stopImmediatePropagation();
}
listBoxProps.onKeyDown(e);
} });
// ListContext is necessary to prevent changes in parent ListContext
// for example when Menu is inside a list row
return (React.createElement(ListBoxContext.Provider, { value: state },
React.createElement(ListContext.Provider, { value: {} },
React.createElement(MenuListBackground, __assign({}, menuListProps, { color: 'primary', ref: ref, style: style, className: className }), renderItems()))));
};
/**
* ListBox component that displays a list of options
* and allows a user to select one or more of them.
*
* @internal Used internally only, should not be exported as part of the library.
*/
var _ListBoxBase = forwardRef(ListBoxBase);
_ListBoxBase.displayName = 'ListBoxBase';
export default _ListBoxBase;
//# sourceMappingURL=ListBoxBase.js.map