@atlaskit/button 16.10.2 → 16.11.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/button
 
+## 16.11.0
+
+### Minor Changes
+
+- [#41859](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41859) [`7c662f243b9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7c662f243b9) - Expose more UNSAFE exports from UNSAFE entry point for internal work. PLEASE DO NO USE ANYTHING FROM "UNSAFE" ENTRY POINT WITH "UNSAFE" PREFIX.
+
 ## 16.10.2
 
 ### Patch Changes

package/dist/cjs/entry-points/new.js

@@ -22,6 +22,12 @@ Object.defineProperty(exports, "LinkIconButton", {
     return _link2.default;
   }
 });
+Object.defineProperty(exports, "SplitButton", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButton;
+  }
+});
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
@@ -31,4 +37,5 @@ Object.defineProperty(exports, "default", {
 var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
 var _link = _interopRequireDefault(require("../new-button/variants/default/link"));
 var _button2 = _interopRequireDefault(require("../new-button/variants/icon/button"));
-var _link2 = _interopRequireDefault(require("../new-button/variants/icon/link"));
+var _link2 = _interopRequireDefault(require("../new-button/variants/icon/link"));
+var _splitButton = require("../new-button/containers/split-button");

package/dist/cjs/entry-points/unsafe.js

@@ -10,4 +10,43 @@ Object.defineProperty(exports, "UNSAFE_BUTTON", {
     return _button.default;
   }
 });
-var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
+Object.defineProperty(exports, "UNSAFE_DIVIDER", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.Divider;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_GET_ACTIONS", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.getActions;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_ICON_BUTTON", {
+  enumerable: true,
+  get: function get() {
+    return _button2.default;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_SPLIT_BUTTON", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButton;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_SPLIT_BUTTON_CONTAINER", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButtonContainer;
+  }
+});
+Object.defineProperty(exports, "UNSAFE_SPLIT_BUTTON_CONTEXT", {
+  enumerable: true,
+  get: function get() {
+    return _splitButtonContext.SplitButtonContext;
+  }
+});
+var _button = _interopRequireDefault(require("../new-button/variants/default/button"));
+var _button2 = _interopRequireDefault(require("../new-button/variants/icon/button"));
+var _splitButton = require("../new-button/containers/split-button");
+var _splitButtonContext = require("../new-button/containers/split-button/split-button-context");

package/dist/cjs/new-button/containers/split-button/index.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Divider", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.Divider;
+  }
+});
+Object.defineProperty(exports, "SplitButton", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButton;
+  }
+});
+Object.defineProperty(exports, "SplitButtonContainer", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButtonContainer;
+  }
+});
+Object.defineProperty(exports, "SplitButtonContext", {
+  enumerable: true,
+  get: function get() {
+    return _splitButtonContext.SplitButtonContext;
+  }
+});
+Object.defineProperty(exports, "SplitButtonWithSlots", {
+  enumerable: true,
+  get: function get() {
+    return _splitButton.SplitButtonWithSlots;
+  }
+});
+Object.defineProperty(exports, "getActions", {
+  enumerable: true,
+  get: function get() {
+    return _utils.getActions;
+  }
+});
+Object.defineProperty(exports, "useSplitButtonContext", {
+  enumerable: true,
+  get: function get() {
+    return _splitButtonContext.useSplitButtonContext;
+  }
+});
+var _splitButton = require("./split-button");
+var _utils = require("./utils");
+var _splitButtonContext = require("./split-button-context");

package/dist/cjs/new-button/containers/split-button/split-button-context.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSplitButtonContext = exports.SplitButtonContext = void 0;
+var _react = require("react");
+/**
+ * TODO: Add jsdoc
+ */
+var SplitButtonContext = exports.SplitButtonContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useSplitButtonContext = exports.useSplitButtonContext = function useSplitButtonContext() {
+  var context = (0, _react.useContext)(SplitButtonContext);
+  if (!context) {
+    return undefined;
+  }
+  if (context.appearance === 'navigation') {
+    var newContext = {
+      spacing: 'default',
+      appearance: 'subtle',
+      isDisabled: false,
+      isActiveOverSelected: false,
+      isNavigationSplitButton: true,
+      isHighlighted: context.isHighlighted
+    };
+    return newContext;
+  }
+  var splitButtonContext = {
+    spacing: context.spacing,
+    appearance: context.appearance,
+    isDisabled: context.isDisabled,
+    isActiveOverSelected: true,
+    isNavigationSplitButton: false,
+    isHighlighted: false
+  };
+  return splitButtonContext;
+};

package/dist/cjs/new-button/containers/split-button/split-button.js

@@ -0,0 +1,137 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SplitButtonWithSlots = exports.SplitButtonContainer = exports.SplitButton = exports.Divider = void 0;
+var _react = require("@emotion/react");
+var _constants = require("@atlaskit/theme/constants");
+var _splitButtonContext = require("./split-button-context");
+var _utils = require("./utils");
+/** @jsx jsx */
+
+var fontSize = (0, _constants.fontSize)();
+var defaultDividerHeight = 20 / fontSize + 'em';
+var defaultDividerStyles = (0, _react.css)({
+  height: defaultDividerHeight,
+  margin: "var(--ds-space-075, 6px)".concat(" -0.5px")
+});
+var compactDividerHeight = 16 / fontSize + 'em';
+var compactDividerStyles = (0, _react.css)({
+  height: compactDividerHeight,
+  margin: "var(--ds-space-050, 4px)".concat(" -0.5px")
+});
+var baseDividerStyles = (0, _react.css)({
+  display: 'inline-flex',
+  width: '1px',
+  position: 'relative',
+  zIndex: 2
+});
+var disabledStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-border, #091E4224)",
+  cursor: 'not-allowed'
+});
+var navigationDividerStyles = (0, _react.css)({
+  height: compactDividerHeight,
+  margin: "var(--ds-space-100, 8px)".concat(" -0.5px"),
+  backgroundColor: "var(--ds-border, #0052cc)"
+});
+var dividerAppearance = {
+  default: (0, _react.css)({
+    backgroundColor: "var(--ds-text, #172B4D)"
+  }),
+  primary: (0, _react.css)({
+    backgroundColor: "var(--ds-text-inverse, #FFF)"
+  }),
+  danger: (0, _react.css)({
+    backgroundColor: "var(--ds-text-inverse, #FFF)"
+  }),
+  warning: (0, _react.css)({
+    backgroundColor: "var(--ds-text-warning-inverse, #172B4D)"
+  }),
+  navigation: navigationDividerStyles
+};
+var dividerHeight = {
+  default: defaultDividerStyles,
+  compact: compactDividerStyles
+};
+/**
+ * TODO: Add JSDoc
+ */
+var Divider = exports.Divider = function Divider(_ref) {
+  var appearance = _ref.appearance,
+    spacing = _ref.spacing,
+    _ref$isDisabled = _ref.isDisabled,
+    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled;
+  return (
+    // I find it funny to provide a div for Divider
+    (0, _react.jsx)("div", {
+      css: [baseDividerStyles, dividerAppearance[appearance], dividerHeight[spacing], isDisabled ? disabledStyles : undefined]
+    })
+  );
+};
+var splitButtonStyles = (0, _react.css)({
+  display: 'inline-flex',
+  position: 'relative',
+  whiteSpace: 'nowrap'
+});
+
+/**
+ * TODO: Add JSdoc
+ */
+var SplitButtonContainer = exports.SplitButtonContainer = function SplitButtonContainer(_ref2) {
+  var children = _ref2.children;
+  return (0, _react.jsx)("div", {
+    css: splitButtonStyles
+  }, children);
+};
+/**
+ * TODO: Add description when adding docs
+ */
+var SplitButton = exports.SplitButton = function SplitButton(_ref3) {
+  var children = _ref3.children,
+    _ref3$appearance = _ref3.appearance,
+    appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
+    _ref3$spacing = _ref3.spacing,
+    spacing = _ref3$spacing === void 0 ? 'default' : _ref3$spacing,
+    _ref3$isDisabled = _ref3.isDisabled,
+    isDisabled = _ref3$isDisabled === void 0 ? false : _ref3$isDisabled;
+  var _getActions = (0, _utils.getActions)(children),
+    PrimaryAction = _getActions.PrimaryAction,
+    SecondaryAction = _getActions.SecondaryAction;
+  return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
+    value: {
+      appearance: appearance,
+      spacing: spacing,
+      isDisabled: isDisabled
+    }
+  }, PrimaryAction, (0, _react.jsx)(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), SecondaryAction));
+};
+/**
+ * TODO: Decide on API
+ */
+var SplitButtonWithSlots = exports.SplitButtonWithSlots = function SplitButtonWithSlots(_ref4) {
+  var primaryAction = _ref4.primaryAction,
+    secondaryAction = _ref4.secondaryAction,
+    _ref4$appearance = _ref4.appearance,
+    appearance = _ref4$appearance === void 0 ? 'default' : _ref4$appearance,
+    _ref4$spacing = _ref4.spacing,
+    spacing = _ref4$spacing === void 0 ? 'default' : _ref4$spacing,
+    _ref4$isDisabled = _ref4.isDisabled,
+    isDisabled = _ref4$isDisabled === void 0 ? false : _ref4$isDisabled;
+  return (0, _react.jsx)(SplitButtonContainer, null, (0, _react.jsx)(_splitButtonContext.SplitButtonContext.Provider, {
+    value: {
+      appearance: appearance,
+      spacing: spacing,
+      isDisabled: isDisabled
+    }
+  }, primaryAction, (0, _react.jsx)(Divider, {
+    appearance: appearance,
+    spacing: spacing,
+    isDisabled: isDisabled
+  }), secondaryAction));
+};

package/dist/cjs/new-button/containers/split-button/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/new-button/containers/split-button/utils.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getActions = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var getActions = exports.getActions = function getActions(children) {
+  var _Children$toArray = _react.Children.toArray(children),
+    _Children$toArray2 = (0, _slicedToArray2.default)(_Children$toArray, 2),
+    PrimaryAction = _Children$toArray2[0],
+    SecondaryAction = _Children$toArray2[1];
+  if (typeof process !== 'undefined' && process.env.NODE_ENV === 'development' && (!PrimaryAction || !SecondaryAction)) {
+    // TODO: i18n?
+    throw new SyntaxError('SplitButton requires two children to be provided');
+  }
+  return {
+    PrimaryAction: PrimaryAction,
+    SecondaryAction: SecondaryAction
+  };
+};

package/dist/cjs/new-button/variants/shared/use-button-base.js

@@ -13,6 +13,7 @@ var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _primitives = require("@atlaskit/primitives");
+var _splitButtonContext = require("../../containers/split-button/split-button-context");
 var _blockEvents = _interopRequireDefault(require("./block-events"));
 var _xcss = require("./xcss");
 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); }
@@ -48,13 +49,13 @@ var overlayStyles = (0, _primitives.xcss)({
 var useButtonBase = function useButtonBase(_ref) {
   var analyticsContext = _ref.analyticsContext,
     _ref$appearance = _ref.appearance,
-    appearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
+    propAppearance = _ref$appearance === void 0 ? 'default' : _ref$appearance,
     _ref$autoFocus = _ref.autoFocus,
     autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
     buttonType = _ref.buttonType,
     interactionName = _ref.interactionName,
     _ref$isDisabled = _ref.isDisabled,
-    isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+    propIsDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
     isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
     _ref$isIconButton = _ref.isIconButton,
@@ -80,8 +81,16 @@ var useButtonBase = function useButtonBase(_ref) {
     _ref$shouldFitContain = _ref.shouldFitContainer,
     shouldFitContainer = _ref$shouldFitContain === void 0 ? false : _ref$shouldFitContain,
     _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
+    propSpacing = _ref$spacing === void 0 ? 'default' : _ref$spacing;
   var ourRef = (0, _react.useRef)();
+  var splitButtonContext = (0, _splitButtonContext.useSplitButtonContext)();
+  var isSplitButton = Boolean(splitButtonContext);
+  var isNavigationSplitButton = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isNavigationSplitButton) || false;
+  var appearance = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.appearance) || propAppearance;
+  var spacing = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.spacing) || propSpacing;
+  var isDisabled = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isDisabled) || propIsDisabled;
+  var isHighlighted = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isHighlighted) || false;
+  var isActiveOverSelected = (splitButtonContext === null || splitButtonContext === void 0 ? void 0 : splitButtonContext.isActiveOverSelected) || false;
   var setRef = (0, _react.useCallback)(function (node) {
     ourRef.current = node;
     if (ref === null) {
@@ -106,7 +115,7 @@ var useButtonBase = function useButtonBase(_ref) {
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.2",
+    packageVersion: "16.11.0",
     analyticsData: analyticsContext,
     actionSubject: buttonType
   });
@@ -116,14 +125,18 @@ var useButtonBase = function useButtonBase(_ref) {
       spacing: spacing,
       isDisabled: isDisabled,
       isSelected: isSelected,
+      isHighlighted: isHighlighted,
+      isActiveOverSelected: isActiveOverSelected,
       shouldFitContainer: shouldFitContainer,
       isIconButton: isIconButton,
       hasOverlay: Boolean(overlay),
       isLink: buttonType === 'link',
       hasIconBefore: hasIconBefore,
-      hasIconAfter: hasIconAfter
+      hasIconAfter: hasIconAfter,
+      isSplit: isSplitButton,
+      isNavigationSplit: isNavigationSplitButton
     });
-  }, [appearance, buttonType, spacing, isDisabled, isSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter]);
+  }, [appearance, buttonType, spacing, isDisabled, isSelected, isHighlighted, isActiveOverSelected, isIconButton, shouldFitContainer, overlay, hasIconBefore, hasIconAfter, isSplitButton, isNavigationSplitButton]);
   var isEffectivelyDisabled = isDisabled || Boolean(overlay);
   return _objectSpread({
     ref: setRef,

package/dist/cjs/new-button/variants/shared/xcss.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getXCSS = getXCSS;
+exports.heights = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
@@ -12,7 +13,7 @@ var _colors = _interopRequireDefault(require("./colors"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var fontSize = (0, _constants.fontSize)();
-var heights = {
+var heights = exports.heights = {
   default: "".concat(32 / fontSize, "em"),
   compact: "".concat(24 / fontSize, "em"),
   none: 'auto'
@@ -41,6 +42,19 @@ var verticalAlign = {
   compact: 'middle',
   none: 'baseline'
 };
+var splitBorderStyles = {
+  ':first-of-type': {
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0
+  },
+  ':last-of-type': {
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0
+  },
+  ':focus-visible': {
+    zIndex: 1
+  }
+};
 function getColor(_ref) {
   var group = _ref.group,
     key = _ref.key;
@@ -52,11 +66,13 @@ function getColors(_ref2) {
     interactionState = _ref2$interactionStat === void 0 ? 'default' : _ref2$interactionStat,
     isDisabled = _ref2.isDisabled,
     isSelected = _ref2.isSelected,
+    isHighlighted = _ref2.isHighlighted,
+    isActiveOverSelected = _ref2.isActiveOverSelected,
     hasOverlay = _ref2.hasOverlay;
   var key = interactionState;
   // Overlay does not change color on interaction, revert to 'default' or resting state
   key = hasOverlay ? 'default' : key;
-  key = isSelected ? 'selected' : key;
+  key = isSelected || isHighlighted ? isActiveOverSelected ? 'active' : 'selected' : key;
   // Disabled colors overrule everything else
   key = isDisabled ? 'disabled' : key;
   return {
@@ -75,27 +91,51 @@ function getXCSS(_ref3) {
     spacing = _ref3.spacing,
     isDisabled = _ref3.isDisabled,
     isSelected = _ref3.isSelected,
+    isHighlighted = _ref3.isHighlighted,
+    isActiveOverSelected = _ref3.isActiveOverSelected,
     isIconButton = _ref3.isIconButton,
     shouldFitContainer = _ref3.shouldFitContainer,
     isLink = _ref3.isLink,
+    isSplit = _ref3.isSplit,
+    isNavigationSplit = _ref3.isNavigationSplit,
     hasOverlay = _ref3.hasOverlay,
     hasIconBefore = _ref3.hasIconBefore,
     hasIconAfter = _ref3.hasIconAfter;
   var baseColors = getColors({
     appearance: appearance,
     isSelected: isSelected,
+    isHighlighted: isHighlighted,
+    isActiveOverSelected: isActiveOverSelected,
     isDisabled: isDisabled
   });
   var combinedBaseColorStyles = isLink ? _objectSpread(_objectSpread({}, baseColors), {}, {
     textDecoration: 'none',
     // Disabling visited styles (by re-declaring the base colors)
     ':visited': baseColors
+  }) : isNavigationSplit && !isSelected ? _objectSpread(_objectSpread({}, baseColors), {}, {
+    backgroundColor: 'color.background.neutral.subtle'
   }) : baseColors;
   var height = heights[spacing];
   var width = shouldFitContainer ? '100%' : 'auto';
-  width = isIconButton ? height : width;
-  var paddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
-  var paddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  width = isIconButton ? isNavigationSplit ? '24px' : height : width;
+  var defaultPaddingInlineStart = paddingInline[spacing][hasIconBefore ? 'withIcon' : 'default'];
+  var defaultPaddingInlineEnd = paddingInline[spacing][hasIconAfter ? 'withIcon' : 'default'];
+  var splitButtonStyles = isSplit ? splitBorderStyles : {};
+  var getNavigationSplitButtonPaddings = function getNavigationSplitButtonPaddings() {
+    if (isNavigationSplit) {
+      return {
+        paddingInlineStart: 'space.075',
+        paddingInlineEnd: 'space.075'
+      };
+    }
+    return {
+      paddingInlineStart: isIconButton ? 'space.0' : defaultPaddingInlineStart,
+      paddingInlineEnd: isIconButton ? 'space.0' : defaultPaddingInlineEnd
+    };
+  };
+  var _getNavigationSplitBu = getNavigationSplitButtonPaddings(),
+    paddingInlineStart = _getNavigationSplitBu.paddingInlineStart,
+    paddingInlineEnd = _getNavigationSplitBu.paddingInlineEnd;
   return (0, _primitives.xcss)(_objectSpread(_objectSpread(_objectSpread({
     alignItems: 'center',
     borderWidth: 'border.width.0',
@@ -114,8 +154,8 @@ function getXCSS(_ref3) {
     whiteSpace: 'nowrap',
     height: height,
     paddingBlock: 'space.0',
-    paddingInlineStart: isIconButton ? 'space.0' : paddingInlineStart,
-    paddingInlineEnd: isIconButton ? 'space.0' : paddingInlineEnd,
+    paddingInlineStart: paddingInlineStart,
+    paddingInlineEnd: paddingInlineEnd,
     columnGap: gap[spacing],
     verticalAlign: verticalAlign[spacing],
     width: width,
@@ -126,7 +166,8 @@ function getXCSS(_ref3) {
   } : {}), {}, {
     ':hover': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'hover',
       hasOverlay: hasOverlay
@@ -137,7 +178,8 @@ function getXCSS(_ref3) {
     }),
     ':active': _objectSpread(_objectSpread({}, getColors({
       appearance: appearance,
-      isSelected: isSelected,
+      isSelected: isNavigationSplit && !isSelected ? false : isSelected,
+      isActiveOverSelected: isActiveOverSelected,
       isDisabled: isDisabled,
       interactionState: 'active',
       hasOverlay: hasOverlay
@@ -145,5 +187,5 @@ function getXCSS(_ref3) {
       // background, box-shadow
       transitionDuration: '0s, 0s'
     })
-  }));
+  }, splitButtonStyles));
 }

package/dist/cjs/old-button/shared/button-base.js

@@ -118,7 +118,7 @@ var _default = exports.default = /*#__PURE__*/_react.default.forwardRef(function
     action: 'clicked',
     componentName: 'button',
     packageName: "@atlaskit/button",
-    packageVersion: "16.10.2",
+    packageVersion: "16.11.0",
     analyticsData: analyticsContext
   });
 

package/dist/es2019/entry-points/new.js

@@ -1,4 +1,5 @@
 export { default } from '../new-button/variants/default/button';
 export { default as LinkButton } from '../new-button/variants/default/link';
 export { default as IconButton } from '../new-button/variants/icon/button';
-export { default as LinkIconButton } from '../new-button/variants/icon/link';
+export { default as LinkIconButton } from '../new-button/variants/icon/link';
+export { SplitButton } from '../new-button/containers/split-button';

package/dist/es2019/entry-points/unsafe.js

@@ -1 +1,4 @@
-export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
+export { default as UNSAFE_BUTTON } from '../new-button/variants/default/button';
+export { default as UNSAFE_ICON_BUTTON } from '../new-button/variants/icon/button';
+export { SplitButton as UNSAFE_SPLIT_BUTTON, SplitButtonContainer as UNSAFE_SPLIT_BUTTON_CONTAINER, Divider as UNSAFE_DIVIDER, getActions as UNSAFE_GET_ACTIONS } from '../new-button/containers/split-button';
+export { SplitButtonContext as UNSAFE_SPLIT_BUTTON_CONTEXT } from '../new-button/containers/split-button/split-button-context';

package/dist/es2019/new-button/containers/split-button/index.js

@@ -0,0 +1,3 @@
+export { SplitButton, SplitButtonWithSlots, Divider, SplitButtonContainer } from './split-button';
+export { getActions } from './utils';
+export { SplitButtonContext, useSplitButtonContext } from './split-button-context';

package/dist/es2019/new-button/containers/split-button/split-button-context.js

@@ -0,0 +1,31 @@
+import { createContext, useContext } from 'react';
+/**
+ * TODO: Add jsdoc
+ */
+export const SplitButtonContext = /*#__PURE__*/createContext(undefined);
+export const useSplitButtonContext = () => {
+  const context = useContext(SplitButtonContext);
+  if (!context) {
+    return undefined;
+  }
+  if (context.appearance === 'navigation') {
+    const newContext = {
+      spacing: 'default',
+      appearance: 'subtle',
+      isDisabled: false,
+      isActiveOverSelected: false,
+      isNavigationSplitButton: true,
+      isHighlighted: context.isHighlighted
+    };
+    return newContext;
+  }
+  const splitButtonContext = {
+    spacing: context.spacing,
+    appearance: context.appearance,
+    isDisabled: context.isDisabled,
+    isActiveOverSelected: true,
+    isNavigationSplitButton: false,
+    isHighlighted: false
+  };
+  return splitButtonContext;
+};