@atlaskit/flag 14.4.1

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,13 @@
+# Flag
+
+A flag is used for confirmations, alerts, and acknowledgments that require minimal user interaction, often displayed using a flag group.
+
+## Installation
+
+```sh
+yarn add @atlaskit/flag
+```
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlassian.design/components/flag/).

package/__perf__/autodismiss.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import InfoIcon from '@atlaskit/icon/glyph/info';
+
+import { AutoDismissFlag } from '../src';
+
+export default function FlagInfo() {
+  return (
+    <AutoDismissFlag
+      appearance="info"
+      icon={<InfoIcon label="Info" />}
+      id="info"
+      title="Where is everybody?"
+      description="There’s no one in this project. Add yourself or your team to get the party started."
+      actions={[]}
+    />
+  );
+}

package/__perf__/default.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import InfoIcon from '@atlaskit/icon/glyph/info';
+
+import Flag from '../src';
+
+export default function FlagInfo() {
+  return (
+    <Flag
+      appearance="info"
+      icon={<InfoIcon label="Info" />}
+      id="info"
+      title="Where is everybody?"
+      description="There’s no one in this project. Add yourself or your team to get the party started."
+      actions={[]}
+    />
+  );
+}

package/__perf__/withFlagGroup.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import SuccessIcon from '@atlaskit/icon/glyph/check-circle';
+import { G400 } from '@atlaskit/theme/colors';
+
+import Flag, { FlagGroup } from '../src';
+
+export default () => (
+  <FlagGroup>
+    <Flag
+      appearance="success"
+      icon={<SuccessIcon label="Success" secondaryColor={G400} />}
+      id="success"
+      key="success"
+      title="Connected"
+      description="All wires now hooked up."
+      actions={[{ content: 'Alrighty then', onClick: () => {} }]}
+    />
+  </FlagGroup>
+);

package/auto-dismiss-flag/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/flag/auto-dismiss-flag",
+  "main": "../dist/cjs/auto-dismiss-flag.js",
+  "module": "../dist/esm/auto-dismiss-flag.js",
+  "module:es2019": "../dist/es2019/auto-dismiss-flag.js",
+  "types": "../dist/types/auto-dismiss-flag.d.ts"
+}

package/constants/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@atlaskit/flag/constants",
+  "main": "../dist/cjs/constants.js",
+  "module": "../dist/esm/constants.js",
+  "module:es2019": "../dist/es2019/constants.js",
+  "types": "../dist/types/constants.d.ts"
+}

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

@@ -0,0 +1,89 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.AUTO_DISMISS_SECONDS = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
+
+var _flag = _interopRequireDefault(require("./flag"));
+
+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 = "14.4.1";
+var AUTO_DISMISS_SECONDS = 8;
+exports.AUTO_DISMISS_SECONDS = AUTO_DISMISS_SECONDS;
+
+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 = (0, _react.useRef)(null);
+
+  var _useFlagGroup = (0, _flagGroup.useFlagGroup)(),
+      onDismissedFromFlagGroup = _useFlagGroup.onDismissed,
+      isDismissAllowed = _useFlagGroup.isDismissAllowed;
+
+  var onDismissed = (0, _react.useCallback)(function (id, analyticsEvent) {
+    onDismissedProp(id, analyticsEvent);
+    onDismissedFromFlagGroup(id, analyticsEvent);
+  }, [onDismissedProp, onDismissedFromFlagGroup]);
+  var onDismissedAnalytics = (0, _usePlatformLeafEventHandler.usePlatformLeafEventHandler)({
+    fn: onDismissed,
+    action: 'dismissed',
+    analyticsData: analyticsContext,
+    componentName: 'flag',
+    packageName: packageName,
+    packageVersion: packageVersion
+  });
+  var isAutoDismissAllowed = isDismissAllowed && onDismissed;
+  var dismissFlag = (0, _react.useCallback)(function () {
+    if (isAutoDismissAllowed) {
+      onDismissedAnalytics(id);
+    }
+  }, [id, onDismissedAnalytics, isAutoDismissAllowed]);
+  var stopAutoDismissTimer = (0, _react.useCallback)(function () {
+    if (autoDismissTimer.current) {
+      clearTimeout(autoDismissTimer.current);
+      autoDismissTimer.current = null;
+    }
+  }, []);
+  var startAutoDismissTimer = (0, _react.useCallback)(function () {
+    if (!isAutoDismissAllowed) {
+      return;
+    }
+
+    stopAutoDismissTimer();
+    autoDismissTimer.current = window.setTimeout(dismissFlag, AUTO_DISMISS_SECONDS * 1000);
+  }, [dismissFlag, stopAutoDismissTimer, isAutoDismissAllowed]);
+  (0, _react.useEffect)(function () {
+    startAutoDismissTimer();
+    return stopAutoDismissTimer;
+  }, [startAutoDismissTimer, stopAutoDismissTimer]);
+  return /*#__PURE__*/_react.default.createElement(_flag.default, (0, _extends2.default)({}, props, {
+    onMouseOver: stopAutoDismissTimer,
+    onFocus: stopAutoDismissTimer,
+    onMouseOut: startAutoDismissTimer,
+    onBlur: startAutoDismissTimer
+  }));
+};
+
+var _default = AutoDismissFlag;
+exports.default = _default;

package/dist/cjs/constants.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DEFAULT_APPEARANCE = void 0;
+var DEFAULT_APPEARANCE = 'normal';
+exports.DEFAULT_APPEARANCE = DEFAULT_APPEARANCE;

package/dist/cjs/expander.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _core = require("@emotion/core");
+
+var _motion = require("@atlaskit/motion");
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _templateObject;
+
+var paddingLeft = (0, _constants.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 (0, _core.jsx)("div", {
+    "aria-hidden": !isExpanded,
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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")
+  }, (0, _core.jsx)(_motion.ExitingPersistence, {
+    appear: true
+  }, isExpanded && (0, _core.jsx)(_motion.FadeIn, null, function (props) {
+    return (0, _core.jsx)("div", props, children);
+  })));
+};
+
+var _default = Expander;
+exports.default = _default;

package/dist/cjs/flag-actions.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _core = require("@emotion/core");
+
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _constants2 = require("./constants");
+
+var _theme = require("./theme");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var gridSize = (0, _constants.gridSize)();
+var separatorWidth = gridSize * 2;
+var defaultAppearanceTranslate = gridSize / 4;
+
+var FlagActions = function FlagActions(props) {
+  var _props$appearance = props.appearance,
+      appearance = _props$appearance === void 0 ? _constants2.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 !== _constants2.DEFAULT_APPEARANCE;
+  return (0, _core.jsx)("div", {
+    css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n        display: flex;\n        flex-wrap: wrap;\n        padding-top: ", "px;\n        transform: ", ";\n        align-items: center;\n      "])), gridSize, appearance === _constants2.DEFAULT_APPEARANCE ? "translateX(-".concat(defaultAppearanceTranslate, "px)") : 0),
+    "data-testid": testId && "".concat(testId, "-actions")
+  }, actions.map(function (action, index) {
+    return [index && !isBold ? (0, _core.jsx)("div", {
+      css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n              text-align: center;\n              display: inline-block;\n              width: ", "px;\n            "])), separatorWidth),
+      key: index + 0.5
+    }, "\xB7") : '', (0, _core.jsx)(_customThemeButton.default, {
+      onClick: action.onClick,
+      href: action.href,
+      target: action.target,
+      appearance: isBold ? 'default' : 'link',
+      component: linkComponent,
+      spacing: "compact",
+      testId: action.testId,
+      key: index,
+      css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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, (0, _theme.getActionBackground)(appearance, mode), (0, _theme.getActionColor)(appearance, mode), (0, _theme.getFlagFocusRingColor)(appearance, mode))
+    }, action.content)];
+  }));
+};
+
+var _default = FlagActions;
+exports.default = _default;

package/dist/cjs/flag-group.js

@@ -0,0 +1,107 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFlagGroup = useFlagGroup;
+exports.default = exports.FlagGroupContext = exports.flagAnimationTime = exports.flagWidth = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _react = require("react");
+
+var _core = require("@emotion/core");
+
+var _motion = require("@atlaskit/motion");
+
+var _portal = _interopRequireDefault(require("@atlaskit/portal"));
+
+var _constants = require("@atlaskit/theme/constants");
+
+var _templateObject, _templateObject2, _templateObject3;
+
+var gridSize = (0, _constants.gridSize)();
+var flagWidth = gridSize * 50;
+exports.flagWidth = flagWidth;
+var flagAnimationTime = 400;
+exports.flagAnimationTime = flagAnimationTime;
+var flagBottom = gridSize * 6;
+var flagLeft = gridSize * 10;
+
+function noop() {}
+
+var defaultFlagGroupContext = {
+  onDismissed: function onDismissed() {},
+  isDismissAllowed: false
+};
+var FlagGroupContext = /*#__PURE__*/(0, _react.createContext)(defaultFlagGroupContext);
+exports.FlagGroupContext = FlagGroupContext;
+
+function useFlagGroup() {
+  return (0, _react.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 = (0, _react.useMemo)(function () {
+    return {
+      onDismissed: onDismissed,
+      isDismissAllowed: true
+    };
+  }, [onDismissed]);
+
+  var renderChildren = function renderChildren() {
+    return children && (0, _typeof2.default)(children) === 'object' ? _react.Children.map(children, function (flag, index) {
+      var isDismissAllowed = index === 0;
+      return (0, _core.jsx)(_motion.SlideIn, {
+        enterFrom: 'left',
+        fade: 'inout',
+        duration: flagAnimationTime,
+        animationTimingFunction: function animationTimingFunction() {
+          return _motion.easeIn;
+        }
+      }, function (props) {
+        return (0, _core.jsx)("div", (0, _extends2.default)({}, props, {
+          css: (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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                   }") : '')
+        }), (0, _core.jsx)(FlagGroupContext.Provider, {
+          value: // Only the first flag should be able to be dismissed.
+          isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
+        }, flag));
+      });
+    }) : false;
+  };
+
+  return (0, _core.jsx)(_portal.default, {
+    zIndex: _constants.layers.flag()
+  }, (0, _core.jsx)("div", {
+    id: id,
+    css: (0, _core.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\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, _constants.layers.flag())
+  }, hasFlags ? (0, _core.jsx)(LabelTag, {
+    css: (0, _core.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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, (0, _core.jsx)(_motion.ExitingPersistence, {
+    appear: false
+  }, renderChildren())));
+};
+
+var _default = FlagGroup;
+exports.default = _default;

package/dist/cjs/flag-provider.js

@@ -0,0 +1,119 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFlags = useFlags;
+exports.FlagsProvider = FlagsProvider;
+exports.withFlagsProvider = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _autoDismissFlag = _interopRequireDefault(require("./auto-dismiss-flag"));
+
+var _flag = _interopRequireDefault(require("./flag"));
+
+var _flagGroup = _interopRequireDefault(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; }
+
+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) { (0, _defineProperty2.default)(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; }
+
+var FlagContext = /*#__PURE__*/_react.default.createContext(null);
+
+function useFlags() {
+  var api = (0, _react.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++);
+  };
+}();
+
+function FlagsProvider(_ref) {
+  var children = _ref.children;
+
+  var _useState = (0, _react.useState)([]),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      flags = _useState2[0],
+      setFlags = _useState2[1];
+
+  var removeFlag = (0, _react.useCallback)(function (id) {
+    setFlags(function (current) {
+      return current.slice(0).filter(function (flag) {
+        return flag.id !== id;
+      });
+    });
+  }, []);
+  var api = (0, _react.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((0, _toConsumableArray2.default)(current));
+          } // If flag already exists with the same id, then replace it
+
+
+          var shallow = (0, _toConsumableArray2.default)(current);
+          shallow[index] = flag;
+          return shallow;
+        });
+        return function dismiss() {
+          removeFlag(flag.id);
+        };
+      }
+    };
+  }, [removeFlag]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(FlagContext.Provider, {
+    value: api
+  }, children), /*#__PURE__*/_react.default.createElement(_flagGroup.default, {
+    onDismissed: removeFlag
+  }, flags.map(function (flag) {
+    var isAutoDismiss = flag.isAutoDismiss,
+        restProps = (0, _objectWithoutProperties2.default)(flag, ["isAutoDismiss"]);
+    var FlagType = isAutoDismiss ? _autoDismissFlag.default : _flag.default;
+    return /*#__PURE__*/_react.default.createElement(FlagType, (0, _extends2.default)({}, restProps, {
+      key: flag.id
+    }));
+  })));
+}
+
+var withFlagsProvider = function withFlagsProvider(fn) {
+  return /*#__PURE__*/_react.default.createElement(FlagsProvider, null, fn());
+};
+
+exports.withFlagsProvider = withFlagsProvider;