@atlaskit/flag 15.2.1 → 15.2.2

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/flag
 
+## 15.2.2
+
+### Patch Changes
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 15.2.1
 
 ### Patch Changes

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

@@ -15,7 +15,7 @@ var _flagGroup = require("./flag-group");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 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 = "15.2.1";
+var packageVersion = "15.2.2";
 var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/cjs/flag.js

@@ -26,7 +26,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.2.1"
+  packageVersion: "15.2.2"
 };
 var transitionStyles = (0, _react2.css)({
   flexGrow: 1,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.2.1",
+	"version": "15.2.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 = "15.2.1";
+const packageVersion = "15.2.2";
 export const AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/es2019/flag.js

@@ -16,7 +16,7 @@ import { Expander, DismissButton } from './internal';
 const analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.2.1"
+  packageVersion: "15.2.2"
 };
 const transitionStyles = css({
   flexGrow: 1,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/flag",
-	"version": "15.2.1",
+	"version": "15.2.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 = "15.2.1";
+var packageVersion = "15.2.2";
 export var AUTO_DISMISS_SECONDS = 8;
 
 /**

package/dist/esm/flag.js

@@ -20,7 +20,7 @@ import { Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.2.1"
+  packageVersion: "15.2.2"
 };
 var transitionStyles = css({
   flexGrow: 1,

package/dist/esm/version.json

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

package/dist/types-ts4.5/auto-dismiss-flag.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AutoDismissFlagProps } from './types';
+export declare const AUTO_DISMISS_SECONDS = 8;
+/**
+ * __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)
+ */
+declare const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;
+export default AutoDismissFlag;

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

@@ -0,0 +1,6 @@
+import { AppearanceTypes } from './types';
+export declare const DEFAULT_APPEARANCE: AppearanceTypes;
+export declare const VAR_COLOR = "--color";
+export declare const VAR_BG_COLOR = "--bg-color";
+export declare const VAR_BG_COLOR_HOVER = "--bg-color-hover";
+export declare const VAR_BG_COLOR_ACTIVE = "--bg-color-active";

package/dist/types-ts4.5/flag-actions.d.ts

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { ComponentType, FC } from 'react';
+import type { CustomThemeButtonProps } from '@atlaskit/button/types';
+import type { ActionsType, AppearanceTypes } from './types';
+type FlagActionsProps = {
+    appearance: AppearanceTypes;
+    actions: ActionsType;
+    linkComponent?: ComponentType<CustomThemeButtonProps>;
+    testId?: string;
+};
+declare const FlagActions: FC<FlagActionsProps>;
+export default FlagActions;

package/dist/types-ts4.5/flag-group.d.ts

@@ -0,0 +1,45 @@
+/** @jsx jsx */
+import { ReactElement } from 'react';
+import { jsx } from '@emotion/react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+type FlagGroupProps = {
+    /**
+     * 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`).
+     */
+    label?: string;
+    /**
+     * Describes the specific tag on which the screen reader text will be rendered (defaults to `h2`).
+     */
+    labelTag?: React.ElementType;
+    /**
+     * Flag elements to be displayed.
+     */
+    children?: Array<ReactElement> | ReactElement | null | boolean;
+    /**
+     * 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;
+};
+export declare const flagWidth: number;
+export declare const flagAnimationTime = 400;
+type FlagGroupAPI = {
+    onDismissed: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
+    isDismissAllowed: boolean;
+};
+export declare const FlagGroupContext: import("react").Context<FlagGroupAPI>;
+export declare function useFlagGroup(): FlagGroupAPI;
+/**
+ * __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)
+ */
+declare const FlagGroup: (props: FlagGroupProps) => jsx.JSX.Element;
+export default FlagGroup;

package/dist/types-ts4.5/flag-provider.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { FlagPropsWithoutId } from './types';
+type FlagId = string | number;
+export type Combine<First, Second> = Omit<First, keyof Second> & Second;
+export interface CreateFlagArgs extends FlagPropsWithoutId {
+    /**
+     * 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
+     */
+    isAutoDismiss?: boolean;
+}
+export type FlagArgs = Combine<CreateFlagArgs, {
+    id: FlagId;
+}>;
+export type DismissFn = () => void;
+export type FlagAPI = {
+    showFlag: (args: CreateFlagArgs) => DismissFn;
+};
+/**
+ * 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 function FlagsProvider({ children }: {
+    children: React.ReactNode;
+}): JSX.Element;
+export declare const withFlagsProvider: (fn: () => React.ReactNode) => React.ReactNode;
+export {};

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

@@ -0,0 +1,15 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import type { FlagProps } from './types';
+/**
+ * __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: FC<FlagProps>;
+export default Flag;

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

@@ -0,0 +1,6 @@
+export { default } from './flag';
+export { default as AutoDismissFlag } from './auto-dismiss-flag';
+export { default as FlagGroup } from './flag-group';
+export { useFlags, withFlagsProvider, FlagsProvider } from './flag-provider';
+export type { CreateFlagArgs, DismissFn, FlagAPI, FlagArgs, } from './flag-provider';
+export type { FlagProps, ActionsType, AppearanceTypes } from './types';

package/dist/types-ts4.5/internal/dismiss-button.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+import { AppearanceTypes } from '../types';
+interface DismissButtonProps {
+    appearance: AppearanceTypes;
+    onClick: (...args: any) => void;
+    isExpanded: boolean;
+    isBold: boolean;
+    testId?: string;
+}
+declare const _default: import("react").MemoExoticComponent<({ appearance, onClick, isBold, isExpanded, testId, }: DismissButtonProps) => jsx.JSX.Element>;
+export default _default;

package/dist/types-ts4.5/internal/expander.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type ExpanderProps = {
+    isExpanded: boolean;
+    testId?: string;
+    children: React.ReactNode;
+};
+declare const Expander: React.FC<ExpanderProps>;
+export default Expander;

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

@@ -0,0 +1,2 @@
+export { default as Expander } from './expander';
+export { default as DismissButton } from './dismiss-button';

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

@@ -0,0 +1,24 @@
+import { UNSAFE_BoxProps as BoxProps, UNSAFE_TextProps as TextProps } from '@atlaskit/ds-explorations';
+import { AppearanceTypes } from './types';
+export declare const flagBackgroundColor: Record<AppearanceTypes, BoxProps['backgroundColor']>;
+export declare const flagIconColor: Record<AppearanceTypes, string>;
+export declare const flagTextColor: Record<AppearanceTypes, TextProps['color']>;
+export declare const flagTextColorToken: {
+    error: "var(--ds-text-inverse)";
+    info: "var(--ds-text-inverse)";
+    normal: "var(--ds-text-subtle)";
+    success: "var(--ds-text-inverse)";
+    warning: "var(--ds-text-warning-inverse)";
+};
+type ActionBackgroundColor = Record<Exclude<AppearanceTypes, 'normal'>, {
+    default: 'var(--ds-background-inverse-subtle)';
+    active: 'var(--ds-background-inverse-subtle-pressed)';
+    pressed: 'var(--ds-background-inverse-subtle-hovered)';
+}> & Record<Extract<AppearanceTypes, 'normal'>, {
+    default: 'none';
+    active: 'none';
+    pressed: 'none';
+}>;
+export declare const actionBackgroundColor: ActionBackgroundColor;
+export declare const actionTextColor: Record<AppearanceTypes, string>;
+export {};

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

@@ -0,0 +1,101 @@
+import { ComponentType, MouseEventHandler, ReactNode } from 'react';
+import { UIAnalyticsEvent, WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { CustomThemeButtonProps } from '@atlaskit/button/types';
+export type ActionType = {
+    content: ReactNode;
+    onClick?: (e: React.MouseEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    href?: string;
+    target?: string;
+    testId?: string;
+};
+export type ActionsType = Array<ActionType>;
+export type AppearanceTypes = 'error' | 'info' | 'success' | 'warning' | 'normal';
+export declare const AppearanceArray: AppearanceTypes[];
+type FlagPropsId = {
+    /**
+     * A unique identifier used for rendering and onDismissed callbacks.
+     */
+    id: number | string;
+};
+type AutoDismissFlagPropsWithoutId = {
+    /**
+     * 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
+     * dismiss button.
+     */
+    appearance?: AppearanceTypes;
+    /**
+     * 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`.
+     * 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.
+     */
+    title: ReactNode;
+    /**
+     * 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.
+     */
+    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`
+     */
+    testId?: string;
+    /**
+     * Additional information to be included in the `context` of analytics events that come from flag
+     */
+    analyticsContext?: Record<string, any>;
+};
+export interface AutoDismissFlagProps extends AutoDismissFlagPropsWithoutId, FlagPropsId {
+}
+export interface FlagPropsWithoutId extends AutoDismissFlagPropsWithoutId, WithAnalyticsEventsProps {
+    /**
+     * Standard onBlur event, applied to Flag by AutoDismissFlag
+     */
+    onBlur?: (e: React.FocusEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Standard onFocus event, applied to Flag by AutoDismissFlag
+     */
+    onFocus?: (e: React.FocusEvent<HTMLElement>, analyticsEvent: UIAnalyticsEvent) => void;
+    /**
+     * Standard onMouseOut event, applied to Flag by AutoDismissFlag
+     */
+    onMouseOut?: MouseEventHandler;
+    /**
+     * Standard onMouseOver event, applied to Flag by AutoDismissFlag
+     */
+    onMouseOver?: MouseEventHandler;
+}
+export interface FlagProps extends FlagPropsWithoutId, FlagPropsId {
+}
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "15.2.1",
+  "version": "15.2.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/"