@atlaskit/flag 14.4.1

package/dist/esm/flag.js

@@ -0,0 +1,195 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+/** @jsx jsx */
+import { useCallback, useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/core';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/chevron-up';
+import CrossIcon from '@atlaskit/icon/glyph/cross';
+import GlobalTheme from '@atlaskit/theme/components';
+import { borderRadius, gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import { DEFAULT_APPEARANCE } from './constants';
+import { flagBorderColor, flagShadowColor, getFlagBackgroundColor, getFlagFocusRingColor, getFlagTextColor } from './theme';
+import Expander from './expander';
+import Actions from './flag-actions';
+import { useFlagGroup } from './flag-group';
+
+function noop() {}
+
+var analyticsAttributes = {
+  componentName: 'flag',
+  packageName: "@atlaskit/flag",
+  packageVersion: "14.4.1"
+};
+var gridSize = getGridSize();
+var doubleGridSize = gridSize * 2;
+var headerHeight = gridSize * 4;
+
+var Flag = function Flag(props) {
+  var _props$actions = props.actions,
+      actions = _props$actions === void 0 ? [] : _props$actions,
+      _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? DEFAULT_APPEARANCE : _props$appearance,
+      icon = props.icon,
+      title = props.title,
+      description = props.description,
+      linkComponent = props.linkComponent,
+      onMouseOver = props.onMouseOver,
+      _props$onFocus = props.onFocus,
+      onFocus = _props$onFocus === void 0 ? noop : _props$onFocus,
+      onMouseOut = props.onMouseOut,
+      _props$onBlur = props.onBlur,
+      onBlur = _props$onBlur === void 0 ? noop : _props$onBlur,
+      _props$onDismissed = props.onDismissed,
+      onDismissedProp = _props$onDismissed === void 0 ? noop : _props$onDismissed,
+      testId = props.testId,
+      id = props.id,
+      analyticsContext = props.analyticsContext;
+
+  var _useFlagGroup = useFlagGroup(),
+      onDismissedFromFlagGroup = _useFlagGroup.onDismissed,
+      isDismissAllowed = _useFlagGroup.isDismissAllowed;
+
+  var onDismissed = useCallback(function (id, analyticsEvent) {
+    onDismissedProp(id, analyticsEvent);
+    onDismissedFromFlagGroup(id, analyticsEvent);
+  }, [onDismissedProp, onDismissedFromFlagGroup]);
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isExpanded = _useState2[0],
+      setIsExpanded = _useState2[1];
+
+  var onDismissedAnalytics = usePlatformLeafEventHandler(_objectSpread({
+    fn: onDismissed,
+    action: 'dismissed',
+    analyticsData: analyticsContext
+  }, analyticsAttributes));
+  var isBold = appearance !== DEFAULT_APPEARANCE;
+  var renderToggleOrDismissButton = useCallback(function (_ref) {
+    var mode = _ref.mode;
+
+    // If it is normal appearance a toggle button cannot be rendered
+    // Ensure onDismissed is defined and isDismissAllowed is true to render
+    // the dismiss button
+    if (!isBold && !isDismissAllowed) {
+      return null;
+    } // If it is bold then ensure there is a description or actions to render
+    // the toggle button
+
+
+    if (isBold && !description && !actions.length) {
+      return null;
+    }
+
+    var ButtonIcon = CrossIcon;
+    var buttonLabel = 'Dismiss';
+
+    var buttonAction = function buttonAction() {
+      if (isDismissAllowed) {
+        onDismissedAnalytics(id);
+      }
+    };
+
+    var size = 'small';
+    var buttonTestId = testId && "".concat(testId, "-dismiss");
+    var a11yProps = {};
+
+    if (isBold) {
+      ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
+      buttonLabel = isExpanded ? 'Collapse' : 'Expand';
+
+      buttonAction = function buttonAction() {
+        return setIsExpanded(!isExpanded);
+      };
+
+      size = 'large';
+      buttonTestId = testId && "".concat(testId, "-toggle");
+      a11yProps = {
+        'aria-expanded': isExpanded
+      };
+    }
+
+    return jsx("button", _extends({
+      css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n            appearance: none;\n            background: none;\n            border: none;\n            border-radius: ", "px;\n            color: ", ";\n            cursor: pointer;\n            flex: 0 0 auto;\n            line-height: 1;\n            margin-left: ", "px;\n            padding: 0;\n            white-space: nowrap;\n            &:focus {\n              outline: none;\n              box-shadow: 0 0 0 2px ", ";\n            }\n          "])), borderRadius(), getFlagTextColor(appearance, mode), gridSize, getFlagFocusRingColor(appearance, mode)),
+      onClick: buttonAction,
+      "data-testid": buttonTestId,
+      type: "button"
+    }, a11yProps), jsx(ButtonIcon, {
+      label: buttonLabel,
+      size: size
+    }));
+  }, [actions.length, appearance, description, id, isBold, isDismissAllowed, isExpanded, onDismissedAnalytics, testId]);
+  useEffect(function () {
+    // If buttons are removed as a prop, update isExpanded to be false
+    if (isBold && isExpanded && !description && !actions.length) {
+      setIsExpanded(false);
+    }
+  }, [actions.length, description, isBold, isExpanded]);
+  var onFocusAnalytics = usePlatformLeafEventHandler(_objectSpread({
+    fn: onFocus,
+    action: 'focused',
+    analyticsData: analyticsContext
+  }, analyticsAttributes));
+  var onBlurAnalytics = usePlatformLeafEventHandler(_objectSpread({
+    fn: onBlur,
+    action: 'blurred',
+    analyticsData: analyticsContext
+  }, analyticsAttributes));
+  var autoDismissProps = {
+    onMouseOver: onMouseOver,
+    onFocus: onFocusAnalytics,
+    onMouseOut: onMouseOut,
+    onBlur: onBlurAnalytics
+  };
+  var OptionalDismissButton = renderToggleOrDismissButton;
+  var boxShadow = "0 20px 32px -8px ".concat(flagShadowColor);
+
+  if (!isBold) {
+    boxShadow = "0 0 1px ".concat(flagBorderColor, ", ").concat(boxShadow);
+  }
+
+  return jsx(GlobalTheme.Consumer, null, function (tokens) {
+    var mode = tokens.mode;
+    var textColour = getFlagTextColor(appearance, mode);
+    return jsx("div", _extends({
+      css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              background-color: ", ";\n              border-radius: ", "px;\n              box-shadow: ", ";\n              color: ", ";\n              transition: background-color 200ms;\n              width: 100%;\n              z-index: ", ";\n            "])), getFlagBackgroundColor(appearance, mode), borderRadius(), boxShadow, textColour, layers.flag()),
+      role: "alert",
+      "data-testid": testId
+    }, autoDismissProps), jsx("div", {
+      css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n                width: 100%;\n                padding: ", "px;\n                box-sizing: border-box;\n                border-radius: ", "px;\n\n                &:focus-visible {\n                  outline: none;\n                  box-shadow: 0 0 0 2px\n                    ", ";\n                }\n\n                @supports not selector(*:focus-visible) {\n                  &:focus {\n                    outline: none;\n                    box-shadow: 0 0 0 2px\n                      ", ";\n                  }\n                }\n\n                @media screen and (forced-colors: active),\n                  screen and (-ms-high-contrast: active) {\n                  &:focus-visible {\n                    outline: 1px solid;\n                  }\n                }\n              "])), doubleGridSize, borderRadius(), getFlagFocusRingColor(appearance, mode), getFlagFocusRingColor(appearance, mode)) // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0
+    }, jsx("div", {
+      css: css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n                  display: flex;\n                  align-items: center;\n                  height: ", "px;\n                "])), headerHeight)
+    }, icon, jsx("span", {
+      css: css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n                    color: ", ";\n                    font-weight: 600;\n                    flex: 1;\n                    overflow: hidden;\n                    text-overflow: ellipsis;\n                    white-space: nowrap;\n                    padding: 0 0 0 ", "px;\n                  "])), textColour, doubleGridSize)
+    }, title), jsx(OptionalDismissButton, {
+      mode: mode
+    })), jsx(Expander, {
+      isExpanded: !isBold || isExpanded,
+      testId: testId
+    }, description && jsx("div", {
+      css: css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n                      color: ", ";\n                      word-wrap: break-word;\n                      overflow: auto;\n                      max-height: 100px; /* height is defined as 5 lines maximum by design */\n                    "])), textColour),
+      "data-testid": testId && "".concat(testId, "-description")
+    }, description), jsx(Actions, {
+      actions: actions,
+      appearance: appearance,
+      linkComponent: linkComponent,
+      testId: testId,
+      mode: mode
+    }))));
+  });
+};
+
+export default Flag;

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+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';

package/dist/esm/theme.js

@@ -0,0 +1,129 @@
+import * as colors from '@atlaskit/theme/colors';
+var flagBackgroundColor = {
+  error: {
+    light: colors.R400,
+    dark: colors.R300
+  },
+  info: {
+    light: colors.N500,
+    dark: colors.N500
+  },
+  normal: {
+    light: colors.N0,
+    dark: colors.DN50
+  },
+  success: {
+    light: colors.G400,
+    dark: colors.G300
+  },
+  warning: {
+    light: colors.Y200,
+    dark: colors.Y300
+  }
+};
+export var getFlagBackgroundColor = function getFlagBackgroundColor(appearance, mode) {
+  return flagBackgroundColor[appearance][mode];
+};
+export var flagBorderColor = colors.N60A;
+var flagTextColor = {
+  error: {
+    light: colors.N0,
+    dark: colors.DN40
+  },
+  info: {
+    light: colors.N0,
+    dark: colors.DN600
+  },
+  normal: {
+    light: colors.N500,
+    dark: colors.DN600
+  },
+  success: {
+    light: colors.N0,
+    dark: colors.DN40
+  },
+  warning: {
+    light: colors.N700,
+    dark: colors.DN40
+  }
+};
+export var getFlagTextColor = function getFlagTextColor(appearance, mode) {
+  return flagTextColor[appearance][mode];
+};
+export var flagShadowColor = colors.N50A;
+var flagFocusRingColor = {
+  error: {
+    light: colors.N40,
+    dark: colors.N40
+  },
+  info: {
+    light: colors.N40,
+    dark: colors.N40
+  },
+  normal: {
+    light: colors.B100,
+    dark: colors.B100
+  },
+  success: {
+    light: colors.N40,
+    dark: colors.N40
+  },
+  warning: {
+    light: colors.N200,
+    dark: colors.N200
+  }
+};
+export var getFlagFocusRingColor = function getFlagFocusRingColor(appearance, mode) {
+  return flagFocusRingColor[appearance][mode];
+};
+var lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
+var actionBackground = {
+  success: {
+    light: lightButtonBackground,
+    dark: colors.N30A
+  },
+  info: {
+    light: lightButtonBackground,
+    dark: lightButtonBackground
+  },
+  error: {
+    light: lightButtonBackground,
+    dark: colors.N30A
+  },
+  warning: {
+    light: colors.N30A,
+    dark: colors.N30A
+  },
+  normal: {
+    light: 'none',
+    dark: 'none'
+  }
+};
+var actionColor = {
+  success: {
+    light: colors.N0,
+    dark: colors.DN40
+  },
+  info: {
+    light: colors.N0,
+    dark: colors.DN600
+  },
+  error: {
+    light: colors.N0,
+    dark: colors.DN600
+  },
+  warning: {
+    light: colors.N700,
+    dark: colors.DN40
+  },
+  normal: {
+    light: colors.B400,
+    dark: colors.B100
+  }
+};
+export var getActionBackground = function getActionBackground(appearance, mode) {
+  return actionBackground[appearance][mode];
+};
+export var getActionColor = function getActionColor(appearance, mode) {
+  return actionColor[appearance][mode];
+};

package/dist/esm/types.js

@@ -0,0 +1,2 @@
+// exported for testing - keep in sync from `type AppearanceTypes`
+export var AppearanceArray = ['error', 'info', 'normal', 'success', 'warning']; // CreateFlagsArg makes id optional so define this prop separately

package/dist/esm/version.json

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

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

@@ -0,0 +1,4 @@
+import { AutoDismissFlagProps } from './types';
+export declare const AUTO_DISMISS_SECONDS = 8;
+declare const AutoDismissFlag: (props: AutoDismissFlagProps) => JSX.Element;
+export default AutoDismissFlag;

package/dist/types/constants.d.ts

@@ -0,0 +1,2 @@
+import { AppearanceTypes } from './types';
+export declare const DEFAULT_APPEARANCE: AppearanceTypes;

package/dist/types/expander.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+declare type Props = {
+    children: ReactNode;
+    isExpanded: boolean;
+    testId?: string;
+};
+declare const Expander: ({ children, isExpanded, testId }: Props) => JSX.Element;
+export default Expander;

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

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { ComponentType } from 'react';
+import { CustomThemeButtonProps } from '@atlaskit/button/types';
+import { ThemeModes } from '@atlaskit/theme/types';
+import { ActionsType, AppearanceTypes } from './types';
+declare type Props = {
+    appearance: AppearanceTypes;
+    actions: ActionsType;
+    linkComponent?: ComponentType<CustomThemeButtonProps>;
+    mode: ThemeModes;
+    testId?: string;
+};
+declare const FlagActions: (props: Props) => JSX.Element | null;
+export default FlagActions;

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

@@ -0,0 +1,27 @@
+/** @jsx jsx */
+import { ReactElement } from 'react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+declare type Props = {
+    /** 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;
+declare type FlagGroupAPI = {
+    onDismissed: (id: number | string, analyticsEvent: UIAnalyticsEvent) => void;
+    isDismissAllowed: boolean;
+};
+export declare const FlagGroupContext: import("react").Context<FlagGroupAPI>;
+export declare function useFlagGroup(): FlagGroupAPI;
+declare const FlagGroup: (props: Props) => JSX.Element;
+export default FlagGroup;

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FlagPropsWithoutId } from './types';
+declare type FlagId = string | number;
+export declare 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 declare type FlagArgs = Combine<CreateFlagArgs, {
+    id: FlagId;
+}>;
+export declare type DismissFn = () => void;
+export declare type FlagAPI = {
+    showFlag: (args: CreateFlagArgs) => DismissFn;
+};
+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/flag.d.ts

@@ -0,0 +1,3 @@
+import { FlagProps } from './types';
+declare const Flag: (props: FlagProps) => JSX.Element;
+export default Flag;

package/dist/types/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';