@fluentui/react-northstar
Version:
A themable React component library.
174 lines (172 loc) • 6.82 kB
JavaScript
import _map from "lodash/map";
import _invoke from "lodash/invoke";
import { listBehavior } from '@fluentui/accessibility';
import { getElementType, useUnhandledProps, useAccessibility, useAutoControlled, useFluentContext, useStyles, useTelemetry } from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { childrenExist, commonPropTypes, rtlTextContainer, createShorthandFactory } from '../../utils';
import { ListContextProvider } from './listContext';
import { ListItem } from './ListItem';
import { ListItemContent } from './ListItemContent';
import { ListItemContentMedia } from './ListItemContentMedia';
import { ListItemEndMedia } from './ListItemEndMedia';
import { ListItemHeader } from './ListItemHeader';
import { ListItemHeaderMedia } from './ListItemHeaderMedia';
import { ListItemMedia } from './ListItemMedia';
export var listClassName = 'ui-list';
/**
* A List displays a group of related sequential items.
*
* @accessibility
* List may follow one of the following accessibility semantics:
* - Static non-navigable list. Implements [ARIA list](https://www.w3.org/TR/wai-aria-1.1/#list) role.
* - Selectable list: allows the user to select item from a list of choices. Implements [ARIA Listbox](https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox) design pattern.
* @accessibilityIssues
* [NVDA - Browse Mode does not work with listbox #12350](https://github.com/nvaccess/nvda/issues/12350)
* [JAWS - Listbox options are not reachable in Virtual Cursor PC mode #517](https://github.com/FreedomScientific/VFO-standards-support/issues/517)
* [JAWS - Aria-selected is not narrated for the single-select listbox, when selection is NOT moved with focus #440](https://github.com/FreedomScientific/VFO-standards-support/issues/440)
*/
export var List = /*#__PURE__*/function () {
var List = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = useFluentContext();
var _useTelemetry = useTelemetry(List.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var accessibility = props.accessibility,
as = props.as,
children = props.children,
className = props.className,
debug = props.debug,
design = props.design,
horizontal = props.horizontal,
items = props.items,
navigable = props.navigable,
selectable = props.selectable,
styles = props.styles,
truncateContent = props.truncateContent,
truncateHeader = props.truncateHeader,
variables = props.variables,
wrap = props.wrap;
var _useAutoControlled = useAutoControlled({
defaultValue: props.defaultSelectedIndex,
value: props.selectedIndex,
initialValue: -1
}),
selectedIndex = _useAutoControlled[0],
setSelectedIndex = _useAutoControlled[1];
var getA11Props = useAccessibility(accessibility, {
debugName: List.displayName,
mapPropsToBehavior: function mapPropsToBehavior() {
return {
horizontal: horizontal,
navigable: navigable,
selectable: selectable
};
},
rtl: context.rtl
});
var _useStyles = useStyles(List.displayName, {
className: listClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
isListTag: as === 'ol' || as === 'ul',
debug: debug,
horizontal: horizontal
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes;
var latestProps = React.useRef(props);
latestProps.current = props;
var ElementType = getElementType(props);
var unhandledProps = useUnhandledProps(List.handledProps, props);
var hasContent = childrenExist(children) || items && items.length > 0;
var onItemClick = React.useCallback(function (e, itemIndex) {
if (latestProps.current.selectable) {
setSelectedIndex(itemIndex);
_invoke(latestProps.current, 'onSelectedIndexChange', e, Object.assign({}, latestProps.current, {
selectedIndex: itemIndex
}));
}
}, [latestProps, setSelectedIndex]);
var childProps = {
debug: debug,
navigable: navigable,
onItemClick: onItemClick,
selectable: selectable,
selectedIndex: selectedIndex,
truncateContent: truncateContent,
truncateHeader: truncateHeader,
variables: variables
};
var renderItems = function renderItems() {
return _map(items, function (item, index) {
return ListItem.create(item, {
defaultProps: function defaultProps() {
return {
index: index
};
}
});
});
};
var element = getA11Props.unstable_wrapWithFocusZone( /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
className: classes.root,
ref: ref
}, rtlTextContainer.getAttributes({
forElements: [children]
}), unhandledProps)), /*#__PURE__*/React.createElement(ListContextProvider, {
value: childProps
}, hasContent && wrap(childrenExist(children) ? children : renderItems()))));
setEnd();
return element;
});
List.displayName = 'List';
List.defaultProps = {
as: 'ul',
accessibility: listBehavior,
wrap: function wrap(children) {
return children;
}
};
List.propTypes = Object.assign({}, commonPropTypes.createCommon({
content: false
}), {
debug: PropTypes.bool,
items: customPropTypes.collectionShorthand,
selectable: customPropTypes.every([customPropTypes.disallow(['navigable']), PropTypes.bool]),
navigable: customPropTypes.every([customPropTypes.disallow(['selectable']), PropTypes.bool]),
truncateContent: PropTypes.bool,
truncateHeader: PropTypes.bool,
selectedIndex: PropTypes.number,
defaultSelectedIndex: PropTypes.number,
onSelectedIndexChange: PropTypes.func,
horizontal: PropTypes.bool,
wrap: PropTypes.func
});
List.handledProps = Object.keys(List.propTypes);
List.Item = ListItem;
List.ItemContent = ListItemContent;
List.ItemContentMedia = ListItemContentMedia;
List.ItemEndMedia = ListItemEndMedia;
List.ItemHeader = ListItemHeader;
List.ItemHeaderMedia = ListItemHeaderMedia;
List.ItemMedia = ListItemMedia;
List.create = createShorthandFactory({
Component: List,
mappedArrayProp: 'items'
});
return List;
}();
//# sourceMappingURL=List.js.map