UNPKG

@primer/react

Version:

An implementation of GitHub's Primer Design System using React

90 lines (83 loc) 4.03 kB
'use strict'; var React = require('react'); require('@styled-system/css'); var merge = require('deepmerge'); var defaultSxProp = require('../utils/defaultSxProp.js'); require('@primer/behaviors/utils'); require('@primer/behaviors'); var useRefObjectAsForwardedRef = require('../hooks/useRefObjectAsForwardedRef.js'); var Heading$1 = require('../Heading/Heading.js'); var shared = require('./shared.js'); var _VisuallyHidden = require('../_VisuallyHidden.js'); var ActionListContainerContext = require('./ActionListContainerContext.js'); var invariant = require('../utils/invariant.js'); var clsx = require('clsx'); require('../FeatureFlags/FeatureFlags.js'); var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js'); require('../FeatureFlags/DefaultFeatureFlags.js'); var Heading_module = require('./Heading.module.css.js'); var featureflag = require('./featureflag.js'); function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; } var React__default = /*#__PURE__*/_interopDefault(React); var merge__default = /*#__PURE__*/_interopDefault(merge); function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); } const Heading = /*#__PURE__*/React.forwardRef(({ as, size, children, sx = defaultSxProp.defaultSxProp, visuallyHidden = false, className, ...props }, forwardedRef) => { var _props$id, _props$id2, _props$id3; const innerRef = React__default.default.useRef(null); useRefObjectAsForwardedRef.useRefObjectAsForwardedRef(forwardedRef, innerRef); const enabled = useFeatureFlag.useFeatureFlag(featureflag.actionListCssModulesFlag); const { headingId: headingId, variant: listVariant } = React__default.default.useContext(shared.ListContext); const { container } = React__default.default.useContext(ActionListContainerContext.ActionListContainerContext); // Semantic <menu>s don't have a place for headers within them, they should be aria-labelledby the menu button's name. !(container !== 'ActionMenu') ? process.env.NODE_ENV !== "production" ? invariant.invariant(false, `ActionList.Heading shouldn't be used within an ActionMenu container. Menus are labelled by the menu button's name.`) : invariant.invariant(false) : undefined; const styles = { marginBottom: 2, marginX: listVariant === 'full' ? 2 : 3 }; return /*#__PURE__*/React__default.default.createElement(_VisuallyHidden, { isVisible: !visuallyHidden }, enabled ? sx !== defaultSxProp.defaultSxProp ? /*#__PURE__*/React__default.default.createElement(Heading$1, _extends({ as: as, variant: size, ref: innerRef // use custom id if it is provided. Otherwise, use the id from the context , id: (_props$id = props.id) !== null && _props$id !== undefined ? _props$id : headingId, className: clsx.clsx(className, Heading_module.ActionListHeader), "data-list-variant": listVariant, sx: sx }, props), children) : /*#__PURE__*/React__default.default.createElement(Heading$1, _extends({ as: as, variant: size, ref: innerRef // use custom id if it is provided. Otherwise, use the id from the context , id: (_props$id2 = props.id) !== null && _props$id2 !== undefined ? _props$id2 : headingId, className: clsx.clsx(className, Heading_module.ActionListHeader), "data-list-variant": listVariant }, props), children) : /*#__PURE__*/React__default.default.createElement(Heading$1, _extends({ as: as, variant: size, ref: innerRef // use custom id if it is provided. Otherwise, use the id from the context , id: (_props$id3 = props.id) !== null && _props$id3 !== undefined ? _props$id3 : headingId, sx: merge__default.default(styles, sx), className: className }, props), children)); }); Heading.displayName = 'ActionList.Heading'; exports.Heading = Heading;