@atlaskit/lozenge 13.4.0 → 13.4.2

package/dist/esm/new/lozenge-dropdown-trigger.js

@@ -1,4 +1,5 @@
 /* lozenge-dropdown-trigger.tsx generated by @compiled/babel-plugin v0.38.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';
@@ -24,8 +25,12 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
     _ref$spacing = _ref.spacing,
     spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing,
     iconBefore = _ref.iconBefore,
+    trailingMetric = _ref.trailingMetric,
+    trailingMetricAppearance = _ref.trailingMetricAppearance,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isLoading = _ref.isLoading,
+    isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
     _ref$maxWidth = _ref.maxWidth,
     maxWidth = _ref$maxWidth === void 0 ? 200 : _ref$maxWidth,
     _ref$onClick = _ref.onClick,
@@ -33,21 +38,25 @@ var LozengeDropdownTrigger = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function
     style = _ref.style,
     analyticsContext = _ref.analyticsContext,
     interactionName = _ref.interactionName;
-  return /*#__PURE__*/React.createElement(LozengeBase, {
-    ref: ref,
+  var baseProps = {
     appearance: appearance,
     spacing: spacing,
     iconBefore: iconBefore,
+    trailingMetric: trailingMetric,
+    trailingMetricAppearance: trailingMetricAppearance,
     isSelected: isSelected,
-    maxWidth: maxWidth
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
+    isLoading: isLoading,
+    maxWidth: maxWidth,
     style: style,
     testId: testId,
     onClick: onClick,
     analyticsContext: analyticsContext,
-    interactionName: interactionName
-  }, children);
+    interactionName: interactionName,
+    children: children
+  };
+  return /*#__PURE__*/React.createElement(LozengeBase, _extends({
+    ref: ref
+  }, baseProps), children);
 }));
 LozengeDropdownTrigger.displayName = 'LozengeDropdownTrigger';
 export default LozengeDropdownTrigger;

package/dist/esm/new/lozenge.js

@@ -21,17 +21,21 @@ var Lozenge = function Lozenge(_ref) {
     style = _ref.style,
     testId = _ref.testId,
     children = _ref.children,
-    iconBefore = _ref.iconBefore;
-  return /*#__PURE__*/React.createElement(LozengeBase, {
+    iconBefore = _ref.iconBefore,
+    trailingMetric = _ref.trailingMetric,
+    trailingMetricAppearance = _ref.trailingMetricAppearance;
+  var baseProps = {
     appearance: appearance,
     spacing: spacing,
     iconBefore: iconBefore,
-    maxWidth: maxWidth
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
+    trailingMetric: trailingMetric,
+    trailingMetricAppearance: trailingMetricAppearance,
+    maxWidth: maxWidth,
     style: style,
-    testId: testId
-  }, children);
+    testId: testId,
+    children: children
+  };
+  return /*#__PURE__*/React.createElement(LozengeBase, baseProps, children);
 };
 Lozenge.displayName = 'Lozenge';
 export default Lozenge;

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './lozenge';
 export type { ThemeAppearance, LozengeProps } from './lozenge';
 export { default as LozengeDropdownTrigger } from './new/lozenge-dropdown-trigger';
-export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, LozengeSpacing, } from './new/types';
+export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, LozengeSpacing, SemanticColor, AccentColor, } from './new/types';

package/dist/types/new/icon-renderer.d.ts

@@ -9,10 +9,6 @@ export interface IconRendererProps {
      * The lozenge color to determine icon color
      */
     color: LozengeColor;
-    /**
-     * Whether the lozenge is in a selected state
-     */
-    isSelected?: boolean;
     /**
      * Test ID for the icon
      */
@@ -26,5 +22,5 @@ export interface IconRendererProps {
  * Icon renderer for lozenge components
  * Handles proper sizing and color theming for icons
  */
-export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId, size, }: IconRendererProps) => React.JSX.Element;
+export declare const IconRenderer: ({ icon: Icon, color, testId, size }: IconRendererProps) => React.JSX.Element;
 export default IconRenderer;

package/dist/types/new/lozenge-base.d.ts

@@ -3,15 +3,15 @@
  * @jsx jsx
  */
 import { type Ref } from 'react';
-import { type LozengeDropdownTriggerProps, type NewLozengeProps } from './types';
-interface LozengeBaseProps extends NewLozengeProps, LozengeDropdownTriggerProps {
+import { type LozengeBaseProps } from './types';
+type LozengeBasePropsWithRef = LozengeBaseProps & {
     ref?: Ref<HTMLElement | HTMLButtonElement>;
-}
+};
 /**
  * __New Lozenge__
  *
  * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
  * This is the updated version with the new North Star visual language.
  */
-declare const LozengeBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LozengeBaseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | HTMLElement>>>;
+declare const LozengeBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LozengeBasePropsWithRef, "ref"> & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>>;
 export default LozengeBase;

package/dist/types/new/lozenge.d.ts

@@ -9,7 +9,7 @@ import { type NewLozengeProps } from './types';
  * - [Usage](https://atlassian.design/components/lozenge/usage)
  */
 declare const Lozenge: {
-    ({ appearance, spacing, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
+    ({ appearance, spacing, maxWidth, style, testId, children, iconBefore, trailingMetric, trailingMetricAppearance, }: NewLozengeProps): JSX.Element;
     displayName: string;
 };
 export default Lozenge;

package/dist/types/new/types.d.ts

@@ -22,12 +22,7 @@ export type IconProp = ComponentType<Omit<NewIconProps, 'spacing'>>;
  * Props for the NewLozenge component
  */
 export type LozengeSpacing = 'default' | 'spacious';
-export interface NewLozengeProps {
-    /**
-     * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
-     * Legacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.
-     */
-    appearance?: ThemeAppearance | LozengeColor;
+type NewLozengeBaseProps = {
     /**
      * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
      */
@@ -62,15 +57,69 @@ export interface NewLozengeProps {
      * @deprecated This prop is deprecated and will be removed. Use Tag component for non-bold styles.
      */
     isBold?: boolean;
-}
+};
+type NewLozengeSemanticProps = NewLozengeBaseProps & {
+    /**
+     * The appearance of the lozenge. Supports legacy semantic appearances and new semantic colors.
+     */
+    appearance?: ThemeAppearance | SemanticColor;
+    /**
+     * Numeric metric displayed at the end of the lozenge as a badge.
+     */
+    trailingMetric?: string;
+    /**
+     * Overrides the appearance of the trailing metric badge.
+     *
+     * If not specified, the trailing metric badge inherits the lozenge appearance.
+     *
+     * This prop is not supported for accent lozenges.
+     */
+    trailingMetricAppearance?: ThemeAppearance | SemanticColor | 'inverse';
+};
+type NewLozengeAccentProps = NewLozengeBaseProps & {
+    /**
+     * Accent appearance values.
+     */
+    appearance: AccentColor;
+    /**
+     * Trailing metric is not supported for accent lozenges.
+     */
+    trailingMetric?: never;
+    /**
+     * Trailing metric appearance is not supported for accent lozenges.
+     */
+    trailingMetricAppearance?: never;
+};
+export type NewLozengeProps = NewLozengeSemanticProps | NewLozengeAccentProps;
+/**
+ * Props for LozengeBase (internal). A single merged type so that Lozenge and
+ * LozengeDropdownTrigger can pass their props without union narrowing requiring
+ * appearance to match only one branch (AccentColor vs ThemeAppearance | SemanticColor).
+ * Must not intersect with LozengeDropdownTriggerProps (which extends NewLozengeProps union).
+ */
+export type LozengeBaseProps = NewLozengeBaseProps & {
+    appearance?: ThemeAppearance | SemanticColor | AccentColor;
+    trailingMetric?: string;
+    trailingMetricAppearance?: ThemeAppearance | SemanticColor | 'inverse';
+    isSelected?: boolean;
+    isLoading?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    analyticsContext?: Record<string, any>;
+    interactionName?: string;
+};
 /**
  * Props for the LozengeDropdownTrigger component
  */
-export interface LozengeDropdownTriggerProps extends NewLozengeProps {
+export type LozengeDropdownTriggerProps = NewLozengeProps & {
     /**
      * Whether the dropdown is currently selected/open.
      */
     isSelected?: boolean;
+    /**
+     * Whether the dropdown trigger is in a loading state.
+     * When true, a spinner is shown and the trigger becomes non-interactive.
+     */
+    isLoading?: boolean;
     /**
      * Callback fired when the trigger is clicked. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the [analytics-next documentation](https://atlaskit.atlassian.com/packages/analytics/analytics-next) for more information.
      */
@@ -83,4 +132,5 @@ export interface LozengeDropdownTriggerProps extends NewLozengeProps {
      * An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see [React UFO integration](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
-}
+};
+export {};

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
 export { default } from './lozenge';
 export type { ThemeAppearance, LozengeProps } from './lozenge';
 export { default as LozengeDropdownTrigger } from './new/lozenge-dropdown-trigger';
-export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, LozengeSpacing, } from './new/types';
+export type { NewLozengeProps, LozengeColor as NewLozengeColor, LozengeDropdownTriggerProps, LozengeSpacing, SemanticColor, AccentColor, } from './new/types';

package/dist/types-ts4.5/new/icon-renderer.d.ts

@@ -9,10 +9,6 @@ export interface IconRendererProps {
      * The lozenge color to determine icon color
      */
     color: LozengeColor;
-    /**
-     * Whether the lozenge is in a selected state
-     */
-    isSelected?: boolean;
     /**
      * Test ID for the icon
      */
@@ -26,5 +22,5 @@ export interface IconRendererProps {
  * Icon renderer for lozenge components
  * Handles proper sizing and color theming for icons
  */
-export declare const IconRenderer: ({ icon: Icon, color, isSelected, testId, size, }: IconRendererProps) => React.JSX.Element;
+export declare const IconRenderer: ({ icon: Icon, color, testId, size }: IconRendererProps) => React.JSX.Element;
 export default IconRenderer;

package/dist/types-ts4.5/new/lozenge-base.d.ts

@@ -3,15 +3,15 @@
  * @jsx jsx
  */
 import { type Ref } from 'react';
-import { type LozengeDropdownTriggerProps, type NewLozengeProps } from './types';
-interface LozengeBaseProps extends NewLozengeProps, LozengeDropdownTriggerProps {
+import { type LozengeBaseProps } from './types';
+type LozengeBasePropsWithRef = LozengeBaseProps & {
     ref?: Ref<HTMLElement | HTMLButtonElement>;
-}
+};
 /**
  * __New Lozenge__
  *
  * A lozenge is a visual indicator used to highlight an item's status for quick recognition.
  * This is the updated version with the new North Star visual language.
  */
-declare const LozengeBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LozengeBaseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | HTMLElement>>>;
+declare const LozengeBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LozengeBasePropsWithRef, "ref"> & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>>;
 export default LozengeBase;

package/dist/types-ts4.5/new/lozenge.d.ts

@@ -9,7 +9,7 @@ import { type NewLozengeProps } from './types';
  * - [Usage](https://atlassian.design/components/lozenge/usage)
  */
 declare const Lozenge: {
-    ({ appearance, spacing, maxWidth, style, testId, children, iconBefore, }: NewLozengeProps): JSX.Element;
+    ({ appearance, spacing, maxWidth, style, testId, children, iconBefore, trailingMetric, trailingMetricAppearance, }: NewLozengeProps): JSX.Element;
     displayName: string;
 };
 export default Lozenge;

package/dist/types-ts4.5/new/types.d.ts

@@ -22,12 +22,7 @@ export type IconProp = ComponentType<Omit<NewIconProps, 'spacing'>>;
  * Props for the NewLozenge component
  */
 export type LozengeSpacing = 'default' | 'spacious';
-export interface NewLozengeProps {
-    /**
-     * The appearance of the lozenge. Supports both legacy semantic appearances and new accent/semantic colors.
-     * Legacy appearances (default, success, removed, inprogress, new, moved) are automatically mapped to the new semantic colors.
-     */
-    appearance?: ThemeAppearance | LozengeColor;
+type NewLozengeBaseProps = {
     /**
      * Elements to be rendered inside the lozenge. This should ideally be just a word or two.
      */
@@ -62,15 +57,69 @@ export interface NewLozengeProps {
      * @deprecated This prop is deprecated and will be removed. Use Tag component for non-bold styles.
      */
     isBold?: boolean;
-}
+};
+type NewLozengeSemanticProps = NewLozengeBaseProps & {
+    /**
+     * The appearance of the lozenge. Supports legacy semantic appearances and new semantic colors.
+     */
+    appearance?: ThemeAppearance | SemanticColor;
+    /**
+     * Numeric metric displayed at the end of the lozenge as a badge.
+     */
+    trailingMetric?: string;
+    /**
+     * Overrides the appearance of the trailing metric badge.
+     *
+     * If not specified, the trailing metric badge inherits the lozenge appearance.
+     *
+     * This prop is not supported for accent lozenges.
+     */
+    trailingMetricAppearance?: ThemeAppearance | SemanticColor | 'inverse';
+};
+type NewLozengeAccentProps = NewLozengeBaseProps & {
+    /**
+     * Accent appearance values.
+     */
+    appearance: AccentColor;
+    /**
+     * Trailing metric is not supported for accent lozenges.
+     */
+    trailingMetric?: never;
+    /**
+     * Trailing metric appearance is not supported for accent lozenges.
+     */
+    trailingMetricAppearance?: never;
+};
+export type NewLozengeProps = NewLozengeSemanticProps | NewLozengeAccentProps;
+/**
+ * Props for LozengeBase (internal). A single merged type so that Lozenge and
+ * LozengeDropdownTrigger can pass their props without union narrowing requiring
+ * appearance to match only one branch (AccentColor vs ThemeAppearance | SemanticColor).
+ * Must not intersect with LozengeDropdownTriggerProps (which extends NewLozengeProps union).
+ */
+export type LozengeBaseProps = NewLozengeBaseProps & {
+    appearance?: ThemeAppearance | SemanticColor | AccentColor;
+    trailingMetric?: string;
+    trailingMetricAppearance?: ThemeAppearance | SemanticColor | 'inverse';
+    isSelected?: boolean;
+    isLoading?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    analyticsContext?: Record<string, any>;
+    interactionName?: string;
+};
 /**
  * Props for the LozengeDropdownTrigger component
  */
-export interface LozengeDropdownTriggerProps extends NewLozengeProps {
+export type LozengeDropdownTriggerProps = NewLozengeProps & {
     /**
      * Whether the dropdown is currently selected/open.
      */
     isSelected?: boolean;
+    /**
+     * Whether the dropdown trigger is in a loading state.
+     * When true, a spinner is shown and the trigger becomes non-interactive.
+     */
+    isLoading?: boolean;
     /**
      * Callback fired when the trigger is clicked. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the [analytics-next documentation](https://atlaskit.atlassian.com/packages/analytics/analytics-next) for more information.
      */
@@ -83,4 +132,5 @@ export interface LozengeDropdownTriggerProps extends NewLozengeProps {
      * An optional name used to identify events for React UFO (Unified Frontend Observability) press interactions. For more information, see [React UFO integration](https://go.atlassian.com/react-ufo-dst-integration).
      */
     interactionName?: string;
-}
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "13.4.0",
+	"version": "13.4.2",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -50,11 +50,13 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
+		"@atlaskit/badge": "^18.4.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^5.3.0",
 		"@atlaskit/icon": "^30.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
+		"@atlaskit/spinner": "^19.0.0",
 		"@atlaskit/tokens": "^11.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6"
@@ -68,7 +70,7 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/docs": "^11.3.0",
 		"@atlaskit/dropdown-menu": "^16.4.0",
-		"@atlaskit/heading": "^5.2.0",
+		"@atlaskit/heading": "^5.3.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",