@atlaskit/dropdown-menu
Version:
A dropdown menu displays a list of actions or options to a user.
69 lines (68 loc) • 2.29 kB
JavaScript
/* dropdown-menu-item-group.tsx generated by @compiled/babel-plugin v3.0.2 */
import _extends from "@babel/runtime/helpers/extends";
import "./dropdown-menu-item-group.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { forwardRef, useContext } from 'react';
import { useId } from '@atlaskit/ds-lib/use-id';
import Section from '@atlaskit/menu/section';
import { fg } from '@atlaskit/platform-feature-flags/fg';
import GroupTitle from './internal/components/group-title';
import { NewSpacingContext } from './internal/context/spacing-context';
const styles = {
root: "_1reo1wug _18m91wug _18zrutpp _1e0c1txw _kqswpfqs _2lx21bp4 _1p57v77o _1q51utpp _85i5utpp _1o9zidpf",
compact: "_18zru2gc _1q51u2gc _85i5u2gc",
separator: "_qgnu1l7x _1sw7nqa1 _7myae4h9",
scrollable: "_1reo1wug _18m91wug _1o9zkb7n"
};
/**
* __Dropdown item group__
*
* A wrapping element for dropdown menu items.
*
*/
export const DropdownItemGroup = /*#__PURE__*/forwardRef(({
children,
id,
isList,
isScrollable,
title,
testId,
hasSeparator,
titleId,
label,
...rest
}, ref) => {
const spacing = useContext(NewSpacingContext);
const isCompact = spacing === 'compact';
const uid = useId();
const oldTitleId = `dropdown-menu-item-group-title-${uid}`;
const groupTitleId = titleId || (title ? `dropdown-menu-item-group-title-${uid}` : undefined);
if (fg('platform-dst-new-menu')) {
return /*#__PURE__*/React.createElement("div", {
role: "group",
"data-testid": testId,
"aria-label": label,
"aria-labelledby": groupTitleId,
id: id,
ref: ref,
className: ax([styles.root, isCompact && styles.compact, hasSeparator && styles.separator, isScrollable && styles.scrollable])
}, title && /*#__PURE__*/React.createElement(GroupTitle, {
id: groupTitleId,
title: title
}), children);
}
return /*#__PURE__*/React.createElement(Section, _extends({
id: id,
ref: ref,
isList: isList,
isScrollable: isScrollable,
hasSeparator: hasSeparator,
testId: testId,
titleId: title ? oldTitleId : titleId,
label: label
}, rest), title && /*#__PURE__*/React.createElement(GroupTitle, {
id: oldTitleId,
title: title
}), children);
});
export default DropdownItemGroup;