@atlaskit/flag 14.7.1 → 14.7.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/flag
 
+## 14.7.2
+
+### Patch Changes
+
+- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
+
 ## 14.7.1
 
 ### Patch Changes

package/dist/cjs/auto-dismiss-flag.js

@@ -26,7 +26,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.7.1";
+var packageVersion = "14.7.2";
 var AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/cjs/flag.js

@@ -44,7 +44,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.7.1"
+  packageVersion: "14.7.2"
 };
 var gridSize = (0, _constants.gridSize)();
 var doubleGridSize = gridSize * 2;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.7.1",
+	"version": "14.7.2",
 	"sideEffects": false
 }

package/dist/es2019/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 const packageName = "@atlaskit/flag";
-const packageVersion = "14.7.1";
+const packageVersion = "14.7.2";
 export const AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/es2019/flag.js

@@ -16,7 +16,7 @@ import { Title, Description, Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.7.1"
+  packageVersion: "14.7.2"
 };
 const gridSize = getGridSize();
 const doubleGridSize = gridSize * 2;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.7.1",
+	"version": "14.7.2",
 	"sideEffects": false
 }

package/dist/esm/auto-dismiss-flag.js

@@ -5,7 +5,7 @@ import noop from '@atlaskit/ds-lib/noop';
 import Flag from './flag';
 import { useFlagGroup } from './flag-group';
 var packageName = "@atlaskit/flag";
-var packageVersion = "14.7.1";
+var packageVersion = "14.7.2";
 export var AUTO_DISMISS_SECONDS = 8;
 /**
  * __Auto dismiss flag__

package/dist/esm/flag.js

@@ -22,7 +22,7 @@ import { Title, Description, Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "14.7.1"
+  packageVersion: "14.7.2"
 };
 var gridSize = getGridSize();
 var doubleGridSize = gridSize * 2;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "14.7.1",
+	"version": "14.7.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "14.7.1",
+  "version": "14.7.2",
   "description": "A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -44,8 +46,8 @@
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/focus-ring": "^1.0.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/focus-ring": "^1.1.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.2.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.2.0",
@@ -60,7 +62,7 @@
   "devDependencies": {
     "@atlaskit/docs": "*",
     "@atlaskit/radio": "^5.4.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/theme": "^12.2.0",
@@ -83,6 +85,7 @@
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
       "design-system": "v1",
+      "design-tokens": "spacing",
       "ui-components": [
         "lite-mode"
       ],

package/report.api.md

@@ -1,12 +1,15 @@
-## API Report File for "@atlaskit/flag"
+## API Report File for "@atlaskit/flag".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />
 
 import { ComponentType } from 'react';
 import { CustomThemeButtonProps } from '@atlaskit/button/types';
+import { jsx } from '@emotion/react';
 import { MouseEventHandler } from 'react';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
@@ -34,6 +37,14 @@ export declare type AppearanceTypes =
   | 'success'
   | 'warning';
 
+/**
+ * __Auto dismiss flag__
+ *
+ * An auto dismiss flag is dismissed automatically after eight seconds.
+ *
+ * - [Examples](https://atlassian.design/components/flag/auto-dismiss-flag/examples)
+ * - [Code](https://atlassian.design/components/flag/auto-dismiss-flag/code)
+ */
 export declare const AutoDismissFlag: (
   props: AutoDismissFlagProps,
 ) => JSX.Element;
@@ -43,68 +54,93 @@ declare interface AutoDismissFlagProps
     FlagPropsId {}
 
 declare type AutoDismissFlagPropsWithoutId = {
-  /** Array of clickable actions to be shown at the bottom of the flag. For flags where appearance
+  /**
+   * Array of clickable actions to be shown at the bottom of the flag. For flags where appearance
    * is 'normal', actions will be shown as links. For all other appearance values, actions will
    * shown as buttons.
    * If href is passed the action will be shown as a link with the passed href prop.
    */
   actions?: ActionsType;
-  /** Makes the flag appearance bold. Setting this to anything other than 'normal' hides the
+  /**
+   * Makes the flag appearance bold. Setting this to anything other than 'normal' hides the
    * dismiss button.
    */
   appearance?: AppearanceTypes;
-  /** The secondary content shown below the flag title */
+  /**
+   * The secondary content shown below the flag title
+   */
   description?: ReactNode;
-  /** The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
+  /**
+   * The icon displayed in the top-left of the flag. Should be an instance of `@atlaskit/icon`.
    * Your icon will receive the appropriate default color, which you can override by wrapping the
    * icon in a containing element with CSS `color` set to your preferred icon color.
    */
   icon: ReactNode;
-  /** The bold text shown at the top of the flag. */
+  /**
+   * The bold text shown at the top of the flag.
+   */
   title: ReactNode;
-  /** Handler which will be called when a Flag's dismiss button is clicked.
+  /**
+   * Handler which will be called when a Flag's dismiss button is clicked.
    * Receives the id of the dismissed Flag as a parameter.
    */
   onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
-  /** A link component that is passed down to the `@atlaskit/button` used by actions,
-     to allow custom routers to be used. See the
-     [button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)
-     example of what this component should look like. */
+  /**
+   * A link component that is passed down to the `@atlaskit/button` used by actions,
+   * to allow custom routers to be used. See the
+   * [button with router](https://atlaskit.atlassian.com/packages/design-system/button/example/ButtonWithRouter)
+   * example of what this component should look like.
+   */
   linkComponent?: ComponentType<CustomThemeButtonProps>;
   /**
-     * 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,
-     * serving as a hook for automated tests.
-
-     * Will set these elements when defined:
-
-     * - Flag root element - `{testId}`
-     * - Close button visible on default flags - `{testId}-dismiss`
-     * - Toggle button visible on bold flags - `{testId}-toggle`
-     * - Flag content which wraps the description and actions - `{testId}-expander`
-     * - Flag description - `{testId}-description`
-     * - Flag actions - `{testId}-actions`
-     */
+   * 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,
+   * serving as a hook for automated tests.
+   *
+   * Will set these elements when defined:
+   *
+   * - Flag root element - `{testId}`
+   * - Close button visible on default flags - `{testId}-dismiss`
+   * - Toggle button visible on bold flags - `{testId}-toggle`
+   * - Flag content which wraps the description and actions - `{testId}-expander`
+   * - Flag description - `{testId}-description`
+   * - Flag actions - `{testId}-actions`
+   */
   testId?: string;
-  /** Additional information to be included in the `context` of analytics events that come from flag */
+  /**
+   * Additional information to be included in the `context` of analytics events that come from flag
+   */
   analyticsContext?: Record<string, any>;
 };
 
 declare type Combine<First, Second> = Omit<First, keyof Second> & Second;
 
 export declare interface CreateFlagArgs extends FlagPropsWithoutId {
-  /** A unique identifier used for rendering and onDismissed callbacks.
+  /**
+   * A unique identifier used for rendering and onDismissed callbacks.
    * This will be autogenerated if you don’t supply one.
    * If you don’t want the same flag showing multiple times, provide a unique id.
    */
   id?: FlagId;
-  /** Marks whether the flag should render as an AutoDismissFlag */
+  /**
+   * Marks whether the flag should render as an AutoDismissFlag
+   */
   isAutoDismiss?: boolean;
 }
 
 export declare type DismissFn = () => void;
 
-declare const Flag: (props: FlagProps) => JSX.Element;
+/**
+ * __Flag__
+ *
+ * A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction,
+ * often displayed using a flag group.
+ *
+ * - [Examples](https://atlassian.design/components/flag/examples)
+ * - [Code](https://atlassian.design/components/flag/code)
+ * - [Usage](https://atlassian.design/components/flag/usage)
+ */
+declare const Flag: (props: FlagProps) => jsx.JSX.Element;
 export default Flag;
 
 export declare type FlagAPI = {
@@ -118,18 +154,35 @@ export declare type FlagArgs = Combine<
   }
 >;
 
-export declare const FlagGroup: (props: FlagGroupProps) => JSX.Element;
+/**
+ * __Flag group__
+ *
+ * A flag group is used to group a set of related flags, with entry and exit animations.
+ *
+ * - [Examples](https://atlassian.design/components/flag/flag-group/examples)
+ * - [Code](https://atlassian.design/components/flag/flag-group/code)
+ */
+export declare const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
 
 declare type FlagGroupProps = {
-  /** ID attribute used for DOM selection. */
+  /**
+   * ID attribute used for DOM selection.
+   */
   id?: string;
-  /** Describes the specific role of this FlagGroup for users viewing the page with a screen reader (defaults to `Flag notifications`). */
+  /**
+   * Describes the specific role of this FlagGroup for users viewing the page with a screen reader (defaults to `Flag notifications`).
+   */
   label?: string;
-  /** Describes the specific tag on which the screen reader text will be rendered (defaults to `h2`). */
+  /**
+   * Describes the specific tag on which the screen reader text will be rendered (defaults to `h2`).
+   */
   labelTag?: React.ElementType;
-  /** Flag elements to be displayed. */
+  /**
+   * Flag elements to be displayed.
+   */
   children?: Array<ReactElement> | ReactElement | null | boolean;
-  /** Handler which will be called when a Flag's dismiss button is clicked.
+  /**
+   * Handler which will be called when a Flag's dismiss button is clicked.
    * Receives the id of the dismissed Flag as a parameter.
    */
   onDismissed?: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
@@ -140,26 +193,36 @@ declare type FlagId = string | number;
 export declare interface FlagProps extends FlagPropsWithoutId, FlagPropsId {}
 
 declare type FlagPropsId = {
-  /** A unique identifier used for rendering and onDismissed callbacks. */
+  /**
+   * A unique identifier used for rendering and onDismissed callbacks.
+   */
   id: number | string;
 };
 
 declare interface FlagPropsWithoutId
   extends AutoDismissFlagPropsWithoutId,
     WithAnalyticsEventsProps {
-  /** Standard onBlur event, applied to Flag by AutoDismissFlag */
+  /**
+   * Standard onBlur event, applied to Flag by AutoDismissFlag
+   */
   onBlur?: (
     e: React.FocusEvent<HTMLElement>,
     analyticsEvent: UIAnalyticsEvent,
   ) => void;
-  /** Standard onFocus event, applied to Flag by AutoDismissFlag */
+  /**
+   * Standard onFocus event, applied to Flag by AutoDismissFlag
+   */
   onFocus?: (
     e: React.FocusEvent<HTMLElement>,
     analyticsEvent: UIAnalyticsEvent,
   ) => void;
-  /** Standard onMouseOut event, applied to Flag by AutoDismissFlag */
+  /**
+   * Standard onMouseOut event, applied to Flag by AutoDismissFlag
+   */
   onMouseOut?: MouseEventHandler;
-  /** Standard onMouseOver event, applied to Flag by AutoDismissFlag */
+  /**
+   * Standard onMouseOver event, applied to Flag by AutoDismissFlag
+   */
   onMouseOver?: MouseEventHandler;
 }
 
@@ -169,6 +232,10 @@ export declare function FlagsProvider({
   children: React_2.ReactNode;
 }): JSX.Element;
 
+/**
+ * useFlags is used to access the `showFlags` function which can be used to programatically display flags.
+ * - [Examples](https://atlassian.design/components/flag/flags-provider/examples#using-showflags)
+ */
 export declare function useFlags(): FlagAPI;
 
 export declare const withFlagsProvider: (