@fluentui/react-northstar
Version:
A themable React component library.
102 lines (100 loc) • 5.04 kB
JavaScript
;
exports.__esModule = true;
exports.headerClassName = exports.Header = void 0;
var customPropTypes = _interopRequireWildcard(require("@fluentui/react-proptypes"));
var React = _interopRequireWildcard(require("react"));
var _utils = require("../../utils");
var _HeaderDescription = require("./HeaderDescription");
var _reactBindings = require("@fluentui/react-bindings");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
var headerClassName = 'ui-header';
exports.headerClassName = headerClassName;
/**
* A Header organises the content by declaring a content's topic.
*
* @accessibility
* Headings communicate the organization of the content on the page. Web browsers, plug-ins, and assistive technologies can use them to provide in-page navigation.
* Nest headings by their rank (or level). The most important heading has the rank 1 (<h1>), the least important heading rank 6 (<h6>). Headings with an equal or higher rank start a new section, headings with a lower rank start new subsections that are part of the higher ranked section.
*
* Other considerations:
* - when the description property is used in header, readers will narrate both header content and description within the element. In addition to that, both will be displayed in the list of headings.
*/
var Header = /*#__PURE__*/React.forwardRef(function (props, ref) {
var context = (0, _reactBindings.useFluentContext)();
var _useTelemetry = (0, _reactBindings.useTelemetry)(Header.displayName, context.telemetry),
setStart = _useTelemetry.setStart,
setEnd = _useTelemetry.setEnd;
setStart();
var children = props.children,
content = props.content,
variables = props.variables,
align = props.align,
className = props.className,
design = props.design,
styles = props.styles,
description = props.description,
color = props.color;
var ElementType = (0, _reactBindings.getElementType)(props);
var unhandledProps = (0, _reactBindings.useUnhandledProps)(Header.handledProps, props);
var hasChildren = (0, _utils.childrenExist)(children);
var contentElement = hasChildren ? children : content;
var getA11yProps = (0, _reactBindings.useAccessibility)(props.accessibility, {
debugName: Header.displayName,
rtl: context.rtl
});
var _useStyles = (0, _reactBindings.useStyles)(Header.displayName, {
className: headerClassName,
mapPropsToStyles: function mapPropsToStyles() {
return {
align: align,
hasDescription: !!description,
color: color
};
},
mapPropsToInlineStyles: function mapPropsToInlineStyles() {
return {
className: className,
design: design,
styles: styles,
variables: variables
};
},
rtl: context.rtl
}),
classes = _useStyles.classes;
var element = /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
className: classes.root,
ref: ref
}, unhandledProps, _utils.rtlTextContainer.getAttributes({
forElements: [children, content],
condition: !description
}))), _utils.rtlTextContainer.createFor({
element: contentElement,
condition: !!description
}), !hasChildren && _HeaderDescription.HeaderDescription.create(description, {
defaultProps: function defaultProps() {
return getA11yProps('description', {});
}
}));
setEnd();
return element;
});
exports.Header = Header;
Header.displayName = 'Header';
Header.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon({
color: true
}), {
description: customPropTypes.itemShorthand,
align: customPropTypes.align
});
Header.defaultProps = {
as: 'h1'
};
Header.handledProps = Object.keys(Header.propTypes);
Header.Description = _HeaderDescription.HeaderDescription;
Header.create = (0, _utils.createShorthandFactory)({
Component: Header,
mappedProp: 'content'
});
//# sourceMappingURL=Header.js.map