@atlaskit/lozenge 13.2.2 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/lozenge
 
+## 13.3.0
+
+### Minor Changes
+
+- [`3f338c9019166`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f338c9019166) -
+  Added “./lozenge-dropdown-trigger” entrypoint. Mapped the new semantic values to the existing
+  appearance to ensure backward compatibility.
+
 ## 13.2.2
 
 ### Patch Changes

package/dist/cjs/lozenge.js

@@ -44,7 +44,21 @@ var styles = {
   'text.subtle': "_syazi7uo",
   'text.bold': "_syazwwip"
 };
-var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
+var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed'];
+var newSemanticColors = ['success', 'discovery', 'warning', 'danger', 'information', 'neutral'];
+var appearanceMapping = {
+  neutral: 'default',
+  default: 'default',
+  information: 'inprogress',
+  inprogress: 'inprogress',
+  warning: 'moved',
+  moved: 'moved',
+  removed: 'removed',
+  danger: 'removed',
+  success: 'success',
+  discovery: 'new',
+  new: 'new'
+};
 /**
  * __Lozenge__
  *
@@ -66,7 +80,7 @@ var LegacyLozenge = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     style = _ref.style;
   var appearanceStyle = isBold ? 'bold' : 'subtle';
   var appearanceType = (0, _react.useMemo)(function () {
-    return appearanceTypes.includes(appearance) ? appearance : 'default';
+    return appearanceTypes.includes(appearance) || newSemanticColors.includes(appearance) ? appearanceMapping[appearance] : 'default';
   }, [appearance]);
   var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
   var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);

package/dist/cjs/new/lozenge.js

@@ -32,7 +32,6 @@ var Lozenge = function Lozenge(_ref) {
   return /*#__PURE__*/React.createElement(_lozengeBase.default, {
     appearance: appearance,
     iconBefore: iconBefore,
-    isInteractive: true,
     maxWidth: maxWidth
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,

package/dist/es2019/lozenge.js

@@ -35,7 +35,21 @@ const styles = {
   'text.subtle': "_syazi7uo",
   'text.bold': "_syazwwip"
 };
-const appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
+const appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed'];
+const newSemanticColors = ['success', 'discovery', 'warning', 'danger', 'information', 'neutral'];
+const appearanceMapping = {
+  neutral: 'default',
+  default: 'default',
+  information: 'inprogress',
+  inprogress: 'inprogress',
+  warning: 'moved',
+  moved: 'moved',
+  removed: 'removed',
+  danger: 'removed',
+  success: 'success',
+  discovery: 'new',
+  new: 'new'
+};
 /**
  * __Lozenge__
  *
@@ -54,7 +68,7 @@ const LegacyLozenge = /*#__PURE__*/memo(({
   style
 }) => {
   const appearanceStyle = isBold ? 'bold' : 'subtle';
-  const appearanceType = useMemo(() => appearanceTypes.includes(appearance) ? appearance : 'default', [appearance]);
+  const appearanceType = useMemo(() => appearanceTypes.includes(appearance) || newSemanticColors.includes(appearance) ? appearanceMapping[appearance] : 'default', [appearance]);
   const maxWidthValue = typeof maxWidth === 'string' ? maxWidth : `${maxWidth}px`;
   const maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);
   return /*#__PURE__*/React.createElement("span", {

package/dist/es2019/new/lozenge.js

@@ -22,7 +22,6 @@ const Lozenge = ({
   return /*#__PURE__*/React.createElement(LozengeBase, {
     appearance: appearance,
     iconBefore: iconBefore,
-    isInteractive: true,
     maxWidth: maxWidth
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,

package/dist/esm/lozenge.js

@@ -35,7 +35,21 @@ var styles = {
   'text.subtle': "_syazi7uo",
   'text.bold': "_syazwwip"
 };
-var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed', 'success'];
+var appearanceTypes = ['default', 'inprogress', 'moved', 'new', 'removed'];
+var newSemanticColors = ['success', 'discovery', 'warning', 'danger', 'information', 'neutral'];
+var appearanceMapping = {
+  neutral: 'default',
+  default: 'default',
+  information: 'inprogress',
+  inprogress: 'inprogress',
+  warning: 'moved',
+  moved: 'moved',
+  removed: 'removed',
+  danger: 'removed',
+  success: 'success',
+  discovery: 'new',
+  new: 'new'
+};
 /**
  * __Lozenge__
  *
@@ -57,7 +71,7 @@ var LegacyLozenge = /*#__PURE__*/memo(function (_ref) {
     style = _ref.style;
   var appearanceStyle = isBold ? 'bold' : 'subtle';
   var appearanceType = useMemo(function () {
-    return appearanceTypes.includes(appearance) ? appearance : 'default';
+    return appearanceTypes.includes(appearance) || newSemanticColors.includes(appearance) ? appearanceMapping[appearance] : 'default';
   }, [appearance]);
   var maxWidthValue = typeof maxWidth === 'string' ? maxWidth : "".concat(maxWidth, "px");
   var maxWidthIsPc = typeof maxWidth === 'string' && /%$/.test(maxWidth);

package/dist/esm/new/lozenge.js

@@ -23,7 +23,6 @@ var Lozenge = function Lozenge(_ref) {
   return /*#__PURE__*/React.createElement(LozengeBase, {
     appearance: appearance,
     iconBefore: iconBefore,
-    isInteractive: true,
     maxWidth: maxWidth
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,

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

@@ -1,9 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type Ref } from 'react';
 import { type LozengeDropdownTriggerProps, type NewLozengeProps } from './types';
+interface LozengeBaseProps extends NewLozengeProps, LozengeDropdownTriggerProps {
+    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<(NewLozengeProps | LozengeDropdownTriggerProps) & import("react").RefAttributes<HTMLButtonElement | HTMLElement>>>;
+declare const LozengeBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LozengeBaseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | HTMLElement>>>;
 export default LozengeBase;

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

@@ -35,16 +35,6 @@ export interface NewLozengeProps {
      * Icon to display before the text content. Should be an ADS icon component.
      */
     iconBefore?: IconProp;
-    /**
-     * Whether the lozenge is interactive (dropdown trigger). Only used internally.
-     * @internal
-     */
-    isInteractive?: boolean;
-    /**
-     * Whether the lozenge is selected (for dropdown triggers). Only used internally.
-     * @internal
-     */
-    isSelected?: boolean;
     /**
      * max-width of lozenge container. Default to 200px.
      */
@@ -54,22 +44,6 @@ export interface NewLozengeProps {
      * @deprecated This prop is deprecated and will be removed in a future version.
      */
     style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
-    /**
-     * Callback fired when the lozenge is clicked (only for interactive lozenges).
-     * The second argument provides an Atlaskit UI analytics event.
-     * @internal
-     */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
-    /**
-     * Additional information to be included in the `context` of Atlaskit analytics events.
-     * @internal
-     */
-    analyticsContext?: Record<string, any>;
-    /**
-     * An optional name used to identify events for React UFO press interactions.
-     * @internal
-     */
-    interactionName?: string;
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
@@ -84,7 +58,7 @@ export interface NewLozengeProps {
 /**
  * Props for the LozengeDropdownTrigger component
  */
-export interface LozengeDropdownTriggerProps extends Omit<NewLozengeProps, 'onClick' | 'isInteractive'> {
+export interface LozengeDropdownTriggerProps extends NewLozengeProps {
     /**
      * Whether the dropdown is currently selected/open.
      */

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

@@ -1,9 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type Ref } from 'react';
 import { type LozengeDropdownTriggerProps, type NewLozengeProps } from './types';
+interface LozengeBaseProps extends NewLozengeProps, LozengeDropdownTriggerProps {
+    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<(NewLozengeProps | LozengeDropdownTriggerProps) & import("react").RefAttributes<HTMLButtonElement | HTMLElement>>>;
+declare const LozengeBase: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Omit<LozengeBaseProps, "ref"> & import("react").RefAttributes<HTMLButtonElement | HTMLElement>>>;
 export default LozengeBase;

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

@@ -35,16 +35,6 @@ export interface NewLozengeProps {
      * Icon to display before the text content. Should be an ADS icon component.
      */
     iconBefore?: IconProp;
-    /**
-     * Whether the lozenge is interactive (dropdown trigger). Only used internally.
-     * @internal
-     */
-    isInteractive?: boolean;
-    /**
-     * Whether the lozenge is selected (for dropdown triggers). Only used internally.
-     * @internal
-     */
-    isSelected?: boolean;
     /**
      * max-width of lozenge container. Default to 200px.
      */
@@ -54,22 +44,6 @@ export interface NewLozengeProps {
      * @deprecated This prop is deprecated and will be removed in a future version.
      */
     style?: Pick<CSSProperties, 'backgroundColor' | 'color'>;
-    /**
-     * Callback fired when the lozenge is clicked (only for interactive lozenges).
-     * The second argument provides an Atlaskit UI analytics event.
-     * @internal
-     */
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
-    /**
-     * Additional information to be included in the `context` of Atlaskit analytics events.
-     * @internal
-     */
-    analyticsContext?: Record<string, any>;
-    /**
-     * An optional name used to identify events for React UFO press interactions.
-     * @internal
-     */
-    interactionName?: string;
     /**
      * A `testId` prop is provided for specified elements, which is a unique
      * string that appears as a data attribute `data-testid` in the rendered code,
@@ -84,7 +58,7 @@ export interface NewLozengeProps {
 /**
  * Props for the LozengeDropdownTrigger component
  */
-export interface LozengeDropdownTriggerProps extends Omit<NewLozengeProps, 'onClick' | 'isInteractive'> {
+export interface LozengeDropdownTriggerProps extends NewLozengeProps {
     /**
      * Whether the dropdown is currently selected/open.
      */

package/lozenge-dropdown-trigger/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@atlaskit/lozenge/lozenge-dropdown-trigger",
+  "main": "../dist/cjs/new/lozenge-dropdown-trigger.js",
+  "module": "../dist/esm/new/lozenge-dropdown-trigger.js",
+  "module:es2019": "../dist/es2019/new/lozenge-dropdown-trigger.js",
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
+  "types": "../dist/types/new/lozenge-dropdown-trigger.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/new/lozenge-dropdown-trigger.d.ts"
+      ]
+    }
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/lozenge",
-	"version": "13.2.2",
+	"version": "13.3.0",
 	"description": "A lozenge is a visual indicator used to highlight an item's status for quick recognition.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"