@atlaskit/flag 14.4.1

package/dist/es2019/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/es2019/theme.js

@@ -0,0 +1,119 @@
+import * as colors from '@atlaskit/theme/colors';
+const 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 const getFlagBackgroundColor = (appearance, mode) => flagBackgroundColor[appearance][mode];
+export const flagBorderColor = colors.N60A;
+const 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 const getFlagTextColor = (appearance, mode) => flagTextColor[appearance][mode];
+export const flagShadowColor = colors.N50A;
+const 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 const getFlagFocusRingColor = (appearance, mode) => flagFocusRingColor[appearance][mode];
+const lightButtonBackground = 'rgba(255, 255, 255, 0.08)';
+const 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'
+  }
+};
+const 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 const getActionBackground = (appearance, mode) => actionBackground[appearance][mode];
+export const getActionColor = (appearance, mode) => actionColor[appearance][mode];

package/dist/es2019/types.js

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

package/dist/es2019/version.json

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

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

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { useCallback, useEffect, useRef } from 'react';
+import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
+import Flag from './flag';
+import { useFlagGroup } from './flag-group';
+var packageName = "@atlaskit/flag";
+var packageVersion = "14.4.1";
+export var AUTO_DISMISS_SECONDS = 8;
+
+function noop() {}
+
+var AutoDismissFlag = function AutoDismissFlag(props) {
+  var id = props.id,
+      analyticsContext = props.analyticsContext,
+      _props$onDismissed = props.onDismissed,
+      onDismissedProp = _props$onDismissed === void 0 ? noop : _props$onDismissed;
+  var autoDismissTimer = useRef(null);
+
+  var _useFlagGroup = useFlagGroup(),
+      onDismissedFromFlagGroup = _useFlagGroup.onDismissed,
+      isDismissAllowed = _useFlagGroup.isDismissAllowed;
+
+  var onDismissed = useCallback(function (id, analyticsEvent) {
+    onDismissedProp(id, analyticsEvent);
+    onDismissedFromFlagGroup(id, analyticsEvent);
+  }, [onDismissedProp, onDismissedFromFlagGroup]);
+  var onDismissedAnalytics = usePlatformLeafEventHandler({
+    fn: onDismissed,
+    action: 'dismissed',
+    analyticsData: analyticsContext,
+    componentName: 'flag',
+    packageName: packageName,
+    packageVersion: packageVersion
+  });
+  var isAutoDismissAllowed = isDismissAllowed && onDismissed;
+  var dismissFlag = useCallback(function () {
+    if (isAutoDismissAllowed) {
+      onDismissedAnalytics(id);
+    }
+  }, [id, onDismissedAnalytics, isAutoDismissAllowed]);
+  var stopAutoDismissTimer = useCallback(function () {
+    if (autoDismissTimer.current) {
+      clearTimeout(autoDismissTimer.current);
+      autoDismissTimer.current = null;
+    }
+  }, []);
+  var startAutoDismissTimer = useCallback(function () {
+    if (!isAutoDismissAllowed) {
+      return;
+    }
+
+    stopAutoDismissTimer();
+    autoDismissTimer.current = window.setTimeout(dismissFlag, AUTO_DISMISS_SECONDS * 1000);
+  }, [dismissFlag, stopAutoDismissTimer, isAutoDismissAllowed]);
+  useEffect(function () {
+    startAutoDismissTimer();
+    return stopAutoDismissTimer;
+  }, [startAutoDismissTimer, stopAutoDismissTimer]);
+  return /*#__PURE__*/React.createElement(Flag, _extends({}, props, {
+    onMouseOver: stopAutoDismissTimer,
+    onFocus: stopAutoDismissTimer,
+    onMouseOut: startAutoDismissTimer,
+    onBlur: startAutoDismissTimer
+  }));
+};
+
+export default AutoDismissFlag;

package/dist/esm/constants.js

@@ -0,0 +1 @@
+export var DEFAULT_APPEARANCE = 'normal';

package/dist/esm/expander.js

@@ -0,0 +1,29 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { gridSize } from '@atlaskit/theme/constants';
+var paddingLeft = gridSize() * 5;
+
+var Expander = function Expander(_ref) {
+  var children = _ref.children,
+      isExpanded = _ref.isExpanded,
+      testId = _ref.testId;
+  // Need to always render the ExpanderInternal otherwise the
+  // reveal transition doesn't happen. We can't use CSS animation for
+  // the the reveal because we don't know the height of the content.
+  return jsx("div", {
+    "aria-hidden": !isExpanded,
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        max-height: ", "px;\n        transition: max-height 0.3s;\n        display: flex;\n        flex: 1 1 100%;\n        flex-direction: column;\n        justify-content: center;\n        min-width: 0;\n        padding: 0 0 0 ", "px;\n      "])), isExpanded ? 150 : 0, paddingLeft),
+    "data-testid": testId && "".concat(testId, "-expander")
+  }, jsx(ExitingPersistence, {
+    appear: true
+  }, isExpanded && jsx(FadeIn, null, function (props) {
+    return jsx("div", props, children);
+  })));
+};
+
+export default Expander;

package/dist/esm/flag-actions.js

@@ -0,0 +1,50 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import Button from '@atlaskit/button/custom-theme-button';
+import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { DEFAULT_APPEARANCE } from './constants';
+import { getActionBackground, getActionColor, getFlagFocusRingColor } from './theme';
+var gridSize = getGridSize();
+var separatorWidth = gridSize * 2;
+var defaultAppearanceTranslate = gridSize / 4;
+
+var FlagActions = function FlagActions(props) {
+  var _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? DEFAULT_APPEARANCE : _props$appearance,
+      _props$actions = props.actions,
+      actions = _props$actions === void 0 ? [] : _props$actions,
+      linkComponent = props.linkComponent,
+      mode = props.mode,
+      testId = props.testId;
+
+  if (!actions.length) {
+    return null;
+  }
+
+  var isBold = appearance !== DEFAULT_APPEARANCE;
+  return jsx("div", {
+    css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        display: flex;\n        flex-wrap: wrap;\n        padding-top: ", "px;\n        transform: ", ";\n        align-items: center;\n      "])), gridSize, appearance === DEFAULT_APPEARANCE ? "translateX(-".concat(defaultAppearanceTranslate, "px)") : 0),
+    "data-testid": testId && "".concat(testId, "-actions")
+  }, actions.map(function (action, index) {
+    return [index && !isBold ? jsx("div", {
+      css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n              text-align: center;\n              display: inline-block;\n              width: ", "px;\n            "])), separatorWidth),
+      key: index + 0.5
+    }, "\xB7") : '', jsx(Button, {
+      onClick: action.onClick,
+      href: action.href,
+      target: action.target,
+      appearance: isBold ? 'default' : 'link',
+      component: linkComponent,
+      spacing: "compact",
+      testId: action.testId,
+      key: index,
+      css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            &&,\n            a&& {\n              margin-left: ", "px;\n              font-weight: 500;\n              padding: 0 ", "px !important;\n              background: ", ";\n              color: ", " !important;\n            }\n            &&:focus,\n            a&&:focus {\n              box-shadow: 0 0 0 2px ", ";\n            }\n            &&:hover,\n            &&:active,\n            a&&:hover,\n            a&&:active {\n              text-decoration: underline;\n            }\n          "])), index && isBold ? gridSize : 0, appearance === 'normal' ? 0 : gridSize, getActionBackground(appearance, mode), getActionColor(appearance, mode), getFlagFocusRingColor(appearance, mode))
+    }, action.content)];
+  }));
+};
+
+export default FlagActions;

package/dist/esm/flag-group.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+import _typeof from "@babel/runtime/helpers/typeof";
+
+var _templateObject, _templateObject2, _templateObject3;
+
+/** @jsx jsx */
+import { Children, createContext, useContext, useMemo } from 'react';
+import { css, jsx } from '@emotion/core';
+import { easeIn, ExitingPersistence, SlideIn } from '@atlaskit/motion';
+import Portal from '@atlaskit/portal';
+import { gridSize as getGridSize, layers } from '@atlaskit/theme/constants';
+var gridSize = getGridSize();
+export var flagWidth = gridSize * 50;
+export var flagAnimationTime = 400;
+var flagBottom = gridSize * 6;
+var flagLeft = gridSize * 10;
+
+function noop() {}
+
+var defaultFlagGroupContext = {
+  onDismissed: function onDismissed() {},
+  isDismissAllowed: false
+};
+export var FlagGroupContext = /*#__PURE__*/createContext(defaultFlagGroupContext);
+export function useFlagGroup() {
+  return useContext(FlagGroupContext);
+} // transition: none is set on first-of-type to prevent a bug in Firefox
+// that causes a broken transition
+
+var baseStyles = "\n  bottom: 0;\n  position: absolute;\n  width: ".concat(flagWidth, "px;\n  transition: transform ").concat(flagAnimationTime, "ms ease-in-out;\n\n  @media (max-width: 560px) {\n    width: 100vw;\n  }\n\n  &:first-of-type {\n    transition: none;\n    transform: translate(0,0);\n  }\n\n  &:nth-of-type(n + 2) {\n    animation-duration: 0ms;\n    transform: translateX(0) translateY(100%) translateY(").concat(2 * gridSize, "px);\n  }\n\n  /* Layer the 'primary' flag above the 'secondary' flag */\n  &:nth-of-type(1) {\n    z-index: 5;\n  }\n  &:nth-of-type(2) {\n    z-index: 4;\n  }\n\n  &:nth-of-type(n + 4) {\n    visibility: hidden;\n  }\n");
+
+var FlagGroup = function FlagGroup(props) {
+  var id = props.id,
+      _props$label = props.label,
+      label = _props$label === void 0 ? 'Flag notifications' : _props$label,
+      _props$labelTag = props.labelTag,
+      LabelTag = _props$labelTag === void 0 ? 'h2' : _props$labelTag,
+      children = props.children,
+      _props$onDismissed = props.onDismissed,
+      onDismissed = _props$onDismissed === void 0 ? noop : _props$onDismissed;
+  var hasFlags = Array.isArray(children) ? children.length > 0 : Boolean(children);
+  var dismissFlagContext = useMemo(function () {
+    return {
+      onDismissed: onDismissed,
+      isDismissAllowed: true
+    };
+  }, [onDismissed]);
+
+  var renderChildren = function renderChildren() {
+    return children && _typeof(children) === 'object' ? Children.map(children, function (flag, index) {
+      var isDismissAllowed = index === 0;
+      return jsx(SlideIn, {
+        enterFrom: 'left',
+        fade: 'inout',
+        duration: flagAnimationTime,
+        animationTimingFunction: function animationTimingFunction() {
+          return easeIn;
+        }
+      }, function (props) {
+        return jsx("div", _extends({}, props, {
+          css: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n                    ", "\n                    ", "\n                  "])), baseStyles, isDismissAllowed ? // Transform needed to push up while 1st flag is leaving
+          // Exiting time should match the exiting time of motion so is halved
+          "\n                    && + * {\n                     transform: translate(0, 0);\n                     transition-duration: ".concat(flagAnimationTime / 2, "ms\n                   }") : '')
+        }), jsx(FlagGroupContext.Provider, {
+          value: // Only the first flag should be able to be dismissed.
+          isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
+        }, flag));
+      });
+    }) : false;
+  };
+
+  return jsx(Portal, {
+    zIndex: layers.flag()
+  }, jsx("div", {
+    id: id,
+    css: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n          bottom: ", "px;\n          left: ", "px;\n          position: fixed;\n          z-index: ", ";\n          @media (max-width: 560px) {\n            bottom: 0;\n            left: 0;\n          }\n        "])), flagBottom, flagLeft, layers.flag())
+  }, hasFlags ? jsx(LabelTag, {
+    css: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n              border: 0;\n              clip: rect(1px, 1px, 1px, 1px);\n              height: 1px;\n              overflow: hidden;\n              padding: 0;\n              position: absolute;\n              white-space: nowrap;\n              width: 1px;\n            "])))
+  }, label) : null, jsx(ExitingPersistence, {
+    appear: false
+  }, renderChildren())));
+};
+
+export default FlagGroup;

package/dist/esm/flag-provider.js

@@ -0,0 +1,92 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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; }
+
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import AutoDismissFlag from './auto-dismiss-flag';
+import Flag from './flag';
+import FlagGroup from './flag-group';
+var FlagContext = /*#__PURE__*/React.createContext(null);
+export function useFlags() {
+  var api = useContext(FlagContext);
+
+  if (api == null) {
+    throw new Error('Unable to find FlagProviderContext');
+  }
+
+  return api;
+}
+
+var getUniqueId = function () {
+  var count = 0;
+  return function () {
+    return "flag-provider-unique-id:".concat(count++);
+  };
+}();
+
+export function FlagsProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      flags = _useState2[0],
+      setFlags = _useState2[1];
+
+  var removeFlag = useCallback(function (id) {
+    setFlags(function (current) {
+      return current.slice(0).filter(function (flag) {
+        return flag.id !== id;
+      });
+    });
+  }, []);
+  var api = useMemo(function () {
+    return {
+      showFlag: function show(value) {
+        var flag = _objectSpread(_objectSpread({}, value), {}, {
+          id: value.id || getUniqueId()
+        });
+
+        setFlags(function (current) {
+          var index = current.findIndex(function (value) {
+            return value.id === flag.id;
+          }); // If flag is not found add it
+
+          if (index === -1) {
+            return [flag].concat(_toConsumableArray(current));
+          } // If flag already exists with the same id, then replace it
+
+
+          var shallow = _toConsumableArray(current);
+
+          shallow[index] = flag;
+          return shallow;
+        });
+        return function dismiss() {
+          removeFlag(flag.id);
+        };
+      }
+    };
+  }, [removeFlag]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FlagContext.Provider, {
+    value: api
+  }, children), /*#__PURE__*/React.createElement(FlagGroup, {
+    onDismissed: removeFlag
+  }, flags.map(function (flag) {
+    var isAutoDismiss = flag.isAutoDismiss,
+        restProps = _objectWithoutProperties(flag, ["isAutoDismiss"]);
+
+    var FlagType = isAutoDismiss ? AutoDismissFlag : Flag;
+    return /*#__PURE__*/React.createElement(FlagType, _extends({}, restProps, {
+      key: flag.id
+    }));
+  })));
+}
+export var withFlagsProvider = function withFlagsProvider(fn) {
+  return /*#__PURE__*/React.createElement(FlagsProvider, null, fn());
+};