@atlaskit/lozenge
Version:
A lozenge is a visual indicator used to highlight an item's status for quick recognition.
65 lines • 1.86 kB
JavaScript
/* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.39.1 */
import _extends from "@babel/runtime/helpers/extends";
import * as React from 'react';
import { ax, ix } from "@compiled/react/runtime";
import { forwardRef, memo } from 'react';
import __noop from '@atlaskit/ds-lib/noop';
import LozengeBase from './lozenge-base';
/**
* __Lozenge Dropdown Trigger__
*
* An interactive lozenge component that acts as a dropdown trigger.
* Built on LozengeBase with dropdown interaction patterns.
*
* - Supports all color variants from the lozenge
* - Shows selected state with dedicated color tokens
* - Includes a chevron icon on the right of the text
* - Built for dropdown menu interactions
* - Supports analytics events and UFO press interactions
*/
const LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
children,
testId,
appearance = 'neutral',
spacing = 'default',
iconBefore,
trailingMetric,
trailingMetricAppearance,
isSelected = false,
isLoading = false,
maxWidth = 200,
onClick = __noop,
style,
analyticsContext,
interactionName,
'aria-controls': ariaControls,
'aria-expanded': ariaExpanded,
'aria-haspopup': ariaHaspopup,
'aria-label': ariaLabel
}, ref) => {
const baseProps = {
appearance,
spacing,
iconBefore,
trailingMetric,
trailingMetricAppearance,
isSelected,
isLoading,
maxWidth,
style,
testId,
onClick,
analyticsContext,
interactionName,
children,
'aria-controls': ariaControls,
'aria-expanded': ariaExpanded,
'aria-haspopup': ariaHaspopup,
'aria-label': ariaLabel
};
return /*#__PURE__*/React.createElement(LozengeBase, _extends({
ref: ref
}, baseProps), children);
}));
LozengeDropdownTrigger.displayName = 'LozengeDropdownTrigger';
export default LozengeDropdownTrigger;