@atlaskit/flag 15.0.4 → 15.0.6

package/dist/esm/flag-actions.js

@@ -1,8 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
 /* eslint-disable @repo/internal/styles/no-nested-styles */
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
@@ -35,22 +34,19 @@ var appearanceNormalButtonStyles = css({
     padding: '0 !important'
   }
 });
-
 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,
-      testId = props.testId;
-
+    appearance = _props$appearance === void 0 ? DEFAULT_APPEARANCE : _props$appearance,
+    _props$actions = props.actions,
+    actions = _props$actions === void 0 ? [] : _props$actions,
+    linkComponent = props.linkComponent,
+    testId = props.testId;
   if (!actions.length) {
     return null;
   }
-
   var isBold = appearance !== DEFAULT_APPEARANCE;
   return jsx(Inline, {
-    gap: "scale.100",
+    gap: "space.100",
     flexWrap: "wrap",
     alignItems: "center",
     divider: isBold ? null : '·',
@@ -60,7 +56,6 @@ var FlagActions = function FlagActions(props) {
     testId: testId && "".concat(testId, "-actions")
   }, actions.map(function (action, index) {
     var _ref;
-
     return jsx(Button, {
       onClick: action.onClick,
       href: action.href,
@@ -74,7 +69,7 @@ var FlagActions = function FlagActions(props) {
       css: [buttonStyles, appearance === 'normal' && appearanceNormalButtonStyles]
     }, action.content);
   }));
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default FlagActions;

package/dist/esm/flag-group.js

@@ -1,5 +1,4 @@
 import _typeof from "@babel/runtime/helpers/typeof";
-
 /** @jsx jsx */
 import { Children, createContext, useContext, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -17,15 +16,18 @@ var flagLeft = gridSize * 10;
 var defaultFlagGroupContext = {
   onDismissed: noop,
   isDismissAllowed: false
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
+};
 
-export var FlagGroupContext = /*#__PURE__*/createContext(defaultFlagGroupContext); // eslint-disable-next-line @repo/internal/react/require-jsdoc
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var FlagGroupContext = /*#__PURE__*/createContext(defaultFlagGroupContext);
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 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
+}
 
+// transition: none is set on first-of-type to prevent a bug in Firefox
+// that causes a broken transition
 var baseStyles = css({
   width: flagWidth,
   bottom: 0,
@@ -50,9 +52,10 @@ var baseStyles = css({
   '&:nth-of-type(n + 4)': {
     visibility: 'hidden'
   }
-}); // Transform needed to push up while 1st flag is leaving
-// Exiting time should match the exiting time of motion so is halved
+});
 
+// Transform needed to push up while 1st flag is leaving
+// Exiting time should match the exiting time of motion so is halved
 var dismissAllowedStyles = css({
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
   '&& + *': {
@@ -69,6 +72,7 @@ var flagGroupContainerStyles = css({
     left: 0
   }
 });
+
 /**
  * __Flag group__
  *
@@ -77,16 +81,15 @@ var flagGroupContainerStyles = css({
  * - [Examples](https://atlassian.design/components/flag/flag-group/examples)
  * - [Code](https://atlassian.design/components/flag/flag-group/code)
  */
-
 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;
+    _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 {
@@ -94,7 +97,6 @@ var FlagGroup = function FlagGroup(props) {
       isDismissAllowed: true
     };
   }, [onDismissed]);
-
   var renderChildren = function renderChildren() {
     return children && _typeof(children) === 'object' ? Children.map(children, function (flag, index) {
       var isDismissAllowed = index === 0;
@@ -107,7 +109,7 @@ var FlagGroup = function FlagGroup(props) {
         }
       }, function (_ref) {
         var className = _ref.className,
-            ref = _ref.ref;
+          ref = _ref.ref;
         return jsx(Box, {
           display: "block",
           position: "absolute",
@@ -115,13 +117,13 @@ var FlagGroup = function FlagGroup(props) {
           className: className,
           ref: ref
         }, jsx(FlagGroupContext.Provider, {
-          value: // Only the first flag should be able to be dismissed.
+          value:
+          // Only the first flag should be able to be dismissed.
           isDismissAllowed ? dismissFlagContext : defaultFlagGroupContext
         }, flag));
       });
     }) : false;
   };
-
   return jsx(Portal, {
     zIndex: layers.flag()
   }, jsx(Box, {
@@ -133,5 +135,4 @@ var FlagGroup = function FlagGroup(props) {
     appear: false
   }, renderChildren())));
 };
-
 export default FlagGroup;

package/dist/esm/flag-provider.js

@@ -4,46 +4,37 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["isAutoDismiss"];
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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);
+
 /**
  * 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 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];
-
+    _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) {
@@ -57,19 +48,18 @@ export function FlagsProvider(_ref) {
         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 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
-
+          }
 
+          // If flag already exists with the same id, then replace it
           var shallow = _toConsumableArray(current);
-
           shallow[index] = flag;
           return shallow;
         });
@@ -85,8 +75,7 @@ export function FlagsProvider(_ref) {
     onDismissed: removeFlag
   }, flags.map(function (flag) {
     var isAutoDismiss = flag.isAutoDismiss,
-        restProps = _objectWithoutProperties(flag, _excluded);
-
+      restProps = _objectWithoutProperties(flag, _excluded);
     var FlagType = isAutoDismiss ? AutoDismissFlag : Flag;
     return /*#__PURE__*/React.createElement(FlagType, _extends({}, restProps, {
       key: flag.id

package/dist/esm/flag.js

@@ -1,11 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : 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 { jsx } from '@emotion/react';
@@ -21,8 +18,9 @@ import { Expander, DismissButton } from './internal';
 var analyticsAttributes = {
   componentName: 'flag',
   packageName: "@atlaskit/flag",
-  packageVersion: "15.0.4"
+  packageVersion: "15.0.6"
 };
+
 /**
  * __Flag__
  *
@@ -33,42 +31,37 @@ var analyticsAttributes = {
  * - [Code](https://atlassian.design/components/flag/code)
  * - [Usage](https://atlassian.design/components/flag/usage)
  */
-
 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;
-
+    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;
-
+    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];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
   var onDismissedAnalytics = usePlatformLeafEventHandler(_objectSpread({
     fn: onDismissed,
     action: 'dismissed',
@@ -115,7 +108,7 @@ var Flag = function Flag(props) {
     display: "block",
     backgroundColor: flagBackgroundColor[appearance],
     shadow: "overlay",
-    padding: "scale.200",
+    padding: "space.200",
     borderRadius: "normal",
     overflow: "hidden",
     layer: "flag",
@@ -127,7 +120,7 @@ var Flag = function Flag(props) {
     tabIndex: 0,
     testId: testId
   }, autoDismissProps), jsx(Inline, {
-    gap: "scale.200"
+    gap: "space.200"
   }, jsx(Box, {
     alignItems: "start",
     UNSAFE_style: {
@@ -135,14 +128,14 @@ var Flag = function Flag(props) {
       flexShrink: 0
     }
   }, icon), jsx(Stack, {
-    gap: shouldRenderGap ? 'scale.100' : 'scale.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
+    gap: shouldRenderGap ? 'space.100' : 'space.0' // Gap exists even when not expanded due to Expander internals always being in the DOM
     ,
     UNSAFE_style: {
       flexGrow: 1,
       transition: "gap 0.3s"
     }
   }, jsx(Inline, {
-    gap: "scale.100",
+    gap: "space.100",
     justifyContent: "spaceBetween"
   }, jsx(Box, {
     display: "block",
@@ -151,10 +144,9 @@ var Flag = function Flag(props) {
     }
   }, jsx(Text, {
     color: textColor,
-    fontWeight: "600",
+    fontWeight: "semibold",
     UNSAFE_style: {
       overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
-
     }
   }, title)), isDismissable ? !(isBold && !description && !actions.length) && jsx(DismissButton, {
     testId: testId,
@@ -173,8 +165,8 @@ var Flag = function Flag(props) {
       // height is defined as 5 lines maximum by design
       overflow: 'auto',
       overflowWrap: 'anywhere' // For cases where a single word is longer than the container (e.g. filenames)
-
     },
+
     testId: testId && "".concat(testId, "-description")
   }, description), jsx(Actions, {
     actions: actions,
@@ -183,5 +175,4 @@ var Flag = function Flag(props) {
     testId: testId
   }))))));
 };
-
 export default Flag;

package/dist/esm/internal/dismiss-button.js

@@ -7,25 +7,22 @@ import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import CrossIcon from '@atlaskit/icon/glyph/cross';
 import { flagTextColorToken } from '../theme';
-
 var DismissButton = function DismissButton(_ref) {
   var appearance = _ref.appearance,
-      onClick = _ref.onClick,
-      isBold = _ref.isBold,
-      isExpanded = _ref.isExpanded,
-      testId = _ref.testId;
+    onClick = _ref.onClick,
+    isBold = _ref.isBold,
+    isExpanded = _ref.isExpanded,
+    testId = _ref.testId;
   var ButtonIcon = CrossIcon;
   var buttonLabel = 'Dismiss';
   var size = 'small';
   var buttonTestId = testId && "".concat(testId, "-dismiss");
-
   if (isBold) {
     ButtonIcon = isExpanded ? ChevronUpIcon : ChevronDownIcon;
     buttonLabel = isExpanded ? 'Collapse' : 'Expand';
     size = 'medium';
     buttonTestId = testId && "".concat(testId, "-toggle");
   }
-
   return jsx(FocusRing, null, jsx(Box, {
     as: "button",
     type: "button",
@@ -33,7 +30,7 @@ var DismissButton = function DismissButton(_ref) {
     alignItems: "center",
     borderStyle: "none",
     borderRadius: "normal",
-    padding: "scale.0",
+    padding: "space.0",
     width: "size.200",
     height: "size.200",
     onClick: onClick,
@@ -51,5 +48,4 @@ var DismissButton = function DismissButton(_ref) {
     primaryColor: flagTextColorToken[appearance]
   })));
 };
-
 export default /*#__PURE__*/memo(DismissButton);

package/dist/esm/internal/expander.js

@@ -2,14 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import { UNSAFE_Box as Box, UNSAFE_Stack as Stack } from '@atlaskit/ds-explorations';
 import { ExitingPersistence, FadeIn } from '@atlaskit/motion';
-
 var Expander = function Expander(_ref) {
   var children = _ref.children,
-      isExpanded = _ref.isExpanded,
-      testId = _ref.testId;
+    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 /*#__PURE__*/React.createElement(Box, {
     UNSAFE_style: {
       minWidth: 0,
@@ -28,10 +28,10 @@ var Expander = function Expander(_ref) {
         width: '100%'
       }
     }, props), /*#__PURE__*/React.createElement(Stack, {
-      gap: "scale.100"
+      gap: "space.100"
     }, children));
   })));
-}; // eslint-disable-next-line @repo/internal/react/require-jsdoc
-
+};
 
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default Expander;

package/dist/esm/theme.js

@@ -1,4 +1,5 @@
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 import { B100, B400, N0, N200, N30A, N40, N500, N700 } from '@atlaskit/theme/colors';
 export var flagBackgroundColor = {
   error: 'danger.bold',
@@ -14,8 +15,8 @@ export var flagIconColor = {
   success: "var(--ds-icon-inverse, ".concat(N0, ")"),
   warning: "var(--ds-icon-warning-inverse, ".concat(N700, ")")
 };
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export var flagTextColor = {
   error: 'inverse',
   info: 'inverse',

package/dist/esm/types.js

@@ -1,4 +1,7 @@
 /* eslint-disable @repo/internal/react/consistent-types-definitions */
+
 // exported for testing - keep in sync from `type AppearanceTypes`
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var AppearanceArray = ['error', 'info', 'normal', 'success', 'warning']; // CreateFlagsArg makes id optional so define this prop separately
+export var AppearanceArray = ['error', 'info', 'normal', 'success', 'warning'];
+
+// CreateFlagsArg makes id optional so define this prop separately

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/flag",
-  "version": "15.0.4",
+  "version": "15.0.6",
   "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/"
@@ -37,14 +37,14 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
     "@atlaskit/button": "^16.5.0",
-    "@atlaskit/ds-explorations": "^1.7.0",
+    "@atlaskit/ds-explorations": "^2.0.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.2.0",
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/portal": "^4.0.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"