@atlaskit/flag 14.4.1

package/dist/es2019/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';
+const packageName = "@atlaskit/flag";
+const packageVersion = "14.4.1";
+export const AUTO_DISMISS_SECONDS = 8;
+
+function noop() {}
+
+const AutoDismissFlag = props => {
+  const {
+    id,
+    analyticsContext,
+    onDismissed: onDismissedProp = noop
+  } = props;
+  const autoDismissTimer = useRef(null);
+  const {
+    onDismissed: onDismissedFromFlagGroup,
+    isDismissAllowed
+  } = useFlagGroup();
+  const onDismissed = useCallback((id, analyticsEvent) => {
+    onDismissedProp(id, analyticsEvent);
+    onDismissedFromFlagGroup(id, analyticsEvent);
+  }, [onDismissedProp, onDismissedFromFlagGroup]);
+  const onDismissedAnalytics = usePlatformLeafEventHandler({
+    fn: onDismissed,
+    action: 'dismissed',
+    analyticsData: analyticsContext,
+    componentName: 'flag',
+    packageName,
+    packageVersion
+  });
+  const isAutoDismissAllowed = isDismissAllowed && onDismissed;
+  const dismissFlag = useCallback(() => {
+    if (isAutoDismissAllowed) {
+      onDismissedAnalytics(id);
+    }
+  }, [id, onDismissedAnalytics, isAutoDismissAllowed]);
+  const stopAutoDismissTimer = useCallback(() => {
+    if (autoDismissTimer.current) {
+      clearTimeout(autoDismissTimer.current);
+      autoDismissTimer.current = null;
+    }
+  }, []);
+  const startAutoDismissTimer = useCallback(() => {
+    if (!isAutoDismissAllowed) {
+      return;
+    }
+
+    stopAutoDismissTimer();
+    autoDismissTimer.current = window.setTimeout(dismissFlag, AUTO_DISMISS_SECONDS * 1000);
+  }, [dismissFlag, stopAutoDismissTimer, isAutoDismissAllowed]);
+  useEffect(() => {
+    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/es2019/constants.js

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

package/dist/es2019/expander.js

@@ -0,0 +1,33 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
+import { gridSize } from '@atlaskit/theme/constants';
+const paddingLeft = gridSize() * 5;
+
+const Expander = ({
+  children,
+  isExpanded,
+  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`
+        max-height: ${isExpanded ? 150 : 0}px;
+        transition: max-height 0.3s;
+        display: flex;
+        flex: 1 1 100%;
+        flex-direction: column;
+        justify-content: center;
+        min-width: 0;
+        padding: 0 0 0 ${paddingLeft}px;
+      `,
+    "data-testid": testId && `${testId}-expander`
+  }, jsx(ExitingPersistence, {
+    appear: true
+  }, isExpanded && jsx(FadeIn, null, props => jsx("div", props, children))));
+};
+
+export default Expander;

package/dist/es2019/flag-actions.js

@@ -0,0 +1,73 @@
+/** @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';
+const gridSize = getGridSize();
+const separatorWidth = gridSize * 2;
+const defaultAppearanceTranslate = gridSize / 4;
+
+const FlagActions = props => {
+  const {
+    appearance = DEFAULT_APPEARANCE,
+    actions = [],
+    linkComponent,
+    mode,
+    testId
+  } = props;
+
+  if (!actions.length) {
+    return null;
+  }
+
+  const isBold = appearance !== DEFAULT_APPEARANCE;
+  return jsx("div", {
+    css: css`
+        display: flex;
+        flex-wrap: wrap;
+        padding-top: ${gridSize}px;
+        transform: ${appearance === DEFAULT_APPEARANCE ? `translateX(-${defaultAppearanceTranslate}px)` : 0};
+        align-items: center;
+      `,
+    "data-testid": testId && `${testId}-actions`
+  }, actions.map((action, index) => [index && !isBold ? jsx("div", {
+    css: css`
+              text-align: center;
+              display: inline-block;
+              width: ${separatorWidth}px;
+            `,
+    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`
+            &&,
+            a&& {
+              margin-left: ${index && isBold ? gridSize : 0}px;
+              font-weight: 500;
+              padding: 0 ${appearance === 'normal' ? 0 : gridSize}px !important;
+              background: ${getActionBackground(appearance, mode)};
+              color: ${getActionColor(appearance, mode)} !important;
+            }
+            &&:focus,
+            a&&:focus {
+              box-shadow: 0 0 0 2px ${getFlagFocusRingColor(appearance, mode)};
+            }
+            &&:hover,
+            &&:active,
+            a&&:hover,
+            a&&:active {
+              text-decoration: underline;
+            }
+          `
+  }, action.content)]));
+};
+
+export default FlagActions;

package/dist/es2019/flag-group.js

@@ -0,0 +1,130 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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';
+const gridSize = getGridSize();
+export const flagWidth = gridSize * 50;
+export const flagAnimationTime = 400;
+const flagBottom = gridSize * 6;
+const flagLeft = gridSize * 10;
+
+function noop() {}
+
+const defaultFlagGroupContext = {
+  onDismissed: () => {},
+  isDismissAllowed: false
+};
+export const 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
+
+const baseStyles = `
+  bottom: 0;
+  position: absolute;
+  width: ${flagWidth}px;
+  transition: transform ${flagAnimationTime}ms ease-in-out;
+
+  @media (max-width: 560px) {
+    width: 100vw;
+  }
+
+  &:first-of-type {
+    transition: none;
+    transform: translate(0,0);
+  }
+
+  &:nth-of-type(n + 2) {
+    animation-duration: 0ms;
+    transform: translateX(0) translateY(100%) translateY(${2 * gridSize}px);
+  }
+
+  /* Layer the 'primary' flag above the 'secondary' flag */
+  &:nth-of-type(1) {
+    z-index: 5;
+  }
+  &:nth-of-type(2) {
+    z-index: 4;
+  }
+
+  &:nth-of-type(n + 4) {
+    visibility: hidden;
+  }
+`;
+
+const FlagGroup = props => {
+  const {
+    id,
+    label = 'Flag notifications',
+    labelTag: LabelTag = 'h2',
+    children,
+    onDismissed = noop
+  } = props;
+  const hasFlags = Array.isArray(children) ? children.length > 0 : Boolean(children);
+  const dismissFlagContext = useMemo(() => ({
+    onDismissed: onDismissed,
+    isDismissAllowed: true
+  }), [onDismissed]);
+
+  const renderChildren = () => {
+    return children && typeof children === 'object' ? Children.map(children, (flag, index) => {
+      const isDismissAllowed = index === 0;
+      return jsx(SlideIn, {
+        enterFrom: 'left',
+        fade: 'inout',
+        duration: flagAnimationTime,
+        animationTimingFunction: () => easeIn
+      }, props => jsx("div", _extends({}, props, {
+        css: css`
+                    ${baseStyles}
+                    ${isDismissAllowed ? // Transform needed to push up while 1st flag is leaving
+        // Exiting time should match the exiting time of motion so is halved
+        `
+                    && + * {
+                     transform: translate(0, 0);
+                     transition-duration: ${flagAnimationTime / 2}ms
+                   }` : ''}
+                  `
+      }), 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`
+          bottom: ${flagBottom}px;
+          left: ${flagLeft}px;
+          position: fixed;
+          z-index: ${layers.flag()};
+          @media (max-width: 560px) {
+            bottom: 0;
+            left: 0;
+          }
+        `
+  }, hasFlags ? jsx(LabelTag, {
+    css: css`
+              border: 0;
+              clip: rect(1px, 1px, 1px, 1px);
+              height: 1px;
+              overflow: hidden;
+              padding: 0;
+              position: absolute;
+              white-space: nowrap;
+              width: 1px;
+            `
+  }, label) : null, jsx(ExitingPersistence, {
+    appear: false
+  }, renderChildren())));
+};
+
+export default FlagGroup;

package/dist/es2019/flag-provider.js

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

package/dist/es2019/flag.js

@@ -0,0 +1,245 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @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() {}
+
+const analyticsAttributes = {
+  componentName: 'flag',
+  packageName: "@atlaskit/flag",
+  packageVersion: "14.4.1"
+};
+const gridSize = getGridSize();
+const doubleGridSize = gridSize * 2;
+const headerHeight = gridSize * 4;
+
+const Flag = props => {
+  const {
+    actions = [],
+    appearance = DEFAULT_APPEARANCE,
+    icon,
+    title,
+    description,
+    linkComponent,
+    onMouseOver,
+    onFocus = noop,
+    onMouseOut,
+    onBlur = noop,
+    onDismissed: onDismissedProp = noop,
+    testId,
+    id,
+    analyticsContext
+  } = props;
+  const {
+    onDismissed: onDismissedFromFlagGroup,
+    isDismissAllowed
+  } = useFlagGroup();
+  const onDismissed = useCallback((id, analyticsEvent) => {
+    onDismissedProp(id, analyticsEvent);
+    onDismissedFromFlagGroup(id, analyticsEvent);
+  }, [onDismissedProp, onDismissedFromFlagGroup]);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const onDismissedAnalytics = usePlatformLeafEventHandler({
+    fn: onDismissed,
+    action: 'dismissed',
+    analyticsData: analyticsContext,
+    ...analyticsAttributes
+  });
+  const isBold = appearance !== DEFAULT_APPEARANCE;
+  const renderToggleOrDismissButton = useCallback(({
+    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;
+    }
+
+    let ButtonIcon = CrossIcon;
+    let buttonLabel = 'Dismiss';
+
+    let buttonAction = () => {
+      if (isDismissAllowed) {
+        onDismissedAnalytics(id);
+      }
+    };
+
+    let size = 'small';
+    let buttonTestId = testId && `${testId}-dismiss`;
+    let a11yProps = {};
+
+    if (isBold) {
+      ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
+      buttonLabel = isExpanded ? 'Collapse' : 'Expand';
+
+      buttonAction = () => setIsExpanded(!isExpanded);
+
+      size = 'large';
+      buttonTestId = testId && `${testId}-toggle`;
+      a11yProps = {
+        'aria-expanded': isExpanded
+      };
+    }
+
+    return jsx("button", _extends({
+      css: css`
+            appearance: none;
+            background: none;
+            border: none;
+            border-radius: ${borderRadius()}px;
+            color: ${getFlagTextColor(appearance, mode)};
+            cursor: pointer;
+            flex: 0 0 auto;
+            line-height: 1;
+            margin-left: ${gridSize}px;
+            padding: 0;
+            white-space: nowrap;
+            &:focus {
+              outline: none;
+              box-shadow: 0 0 0 2px ${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(() => {
+    // 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]);
+  const onFocusAnalytics = usePlatformLeafEventHandler({
+    fn: onFocus,
+    action: 'focused',
+    analyticsData: analyticsContext,
+    ...analyticsAttributes
+  });
+  const onBlurAnalytics = usePlatformLeafEventHandler({
+    fn: onBlur,
+    action: 'blurred',
+    analyticsData: analyticsContext,
+    ...analyticsAttributes
+  });
+  const autoDismissProps = {
+    onMouseOver,
+    onFocus: onFocusAnalytics,
+    onMouseOut,
+    onBlur: onBlurAnalytics
+  };
+  const OptionalDismissButton = renderToggleOrDismissButton;
+  let boxShadow = `0 20px 32px -8px ${flagShadowColor}`;
+
+  if (!isBold) {
+    boxShadow = `0 0 1px ${flagBorderColor}, ${boxShadow}`;
+  }
+
+  return jsx(GlobalTheme.Consumer, null, tokens => {
+    const mode = tokens.mode;
+    const textColour = getFlagTextColor(appearance, mode);
+    return jsx("div", _extends({
+      css: css`
+              background-color: ${getFlagBackgroundColor(appearance, mode)};
+              border-radius: ${borderRadius()}px;
+              box-shadow: ${boxShadow};
+              color: ${textColour};
+              transition: background-color 200ms;
+              width: 100%;
+              z-index: ${layers.flag()};
+            `,
+      role: "alert",
+      "data-testid": testId
+    }, autoDismissProps), jsx("div", {
+      css: css`
+                width: 100%;
+                padding: ${doubleGridSize}px;
+                box-sizing: border-box;
+                border-radius: ${borderRadius()}px;
+
+                &:focus-visible {
+                  outline: none;
+                  box-shadow: 0 0 0 2px
+                    ${getFlagFocusRingColor(appearance, mode)};
+                }
+
+                @supports not selector(*:focus-visible) {
+                  &:focus {
+                    outline: none;
+                    box-shadow: 0 0 0 2px
+                      ${getFlagFocusRingColor(appearance, mode)};
+                  }
+                }
+
+                @media screen and (forced-colors: active),
+                  screen and (-ms-high-contrast: active) {
+                  &:focus-visible {
+                    outline: 1px solid;
+                  }
+                }
+              ` // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+      ,
+      tabIndex: 0
+    }, jsx("div", {
+      css: css`
+                  display: flex;
+                  align-items: center;
+                  height: ${headerHeight}px;
+                `
+    }, icon, jsx("span", {
+      css: css`
+                    color: ${textColour};
+                    font-weight: 600;
+                    flex: 1;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                    padding: 0 0 0 ${doubleGridSize}px;
+                  `
+    }, title), jsx(OptionalDismissButton, {
+      mode: mode
+    })), jsx(Expander, {
+      isExpanded: !isBold || isExpanded,
+      testId: testId
+    }, description && jsx("div", {
+      css: css`
+                      color: ${textColour};
+                      word-wrap: break-word;
+                      overflow: auto;
+                      max-height: 100px; /* height is defined as 5 lines maximum by design */
+                    `,
+      "data-testid": testId && `${testId}-description`
+    }, description), jsx(Actions, {
+      actions: actions,
+      appearance: appearance,
+      linkComponent: linkComponent,
+      testId: testId,
+      mode: mode
+    }))));
+  });
+};
+
+export default Flag;