@atlaskit/navigation-system 7.2.1 → 8.0.0

package/dist/cjs/ui/top-nav-items/themed/button.js

@@ -1,4 +1,3 @@
-/* button.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,364 +5,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.themedButtonSelectedText = exports.themedButtonSelectedBorder = exports.themedButtonSelectedBackgroundPressed = exports.themedButtonSelectedBackgroundHovered = exports.themedButtonSelectedBackground = exports.themedButtonPrimaryText = exports.themedButtonPrimaryBackgroundPressed = exports.themedButtonPrimaryBackgroundHovered = exports.themedButtonPrimaryBackground = exports.themedButtonDisabledText = exports.themedButtonDisabledBackground = exports.themedButtonBorder = exports.themedButtonBackgroundPressed = exports.themedButtonBackgroundHovered = exports.themedButtonBackground = exports.ThemedLinkIconButton = exports.ThemedLinkButton = exports.ThemedIconButton = exports.ThemedButton = void 0;
-require("./button.compiled.css");
-var _runtime = require("@compiled/react/runtime");
+exports.Button = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@compiled/react");
-var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
-var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _compiled = require("@atlaskit/primitives/compiled");
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-var _iconRenderer = _interopRequireDefault(require("../icon-renderer"));
-var _excluded = ["style", "xcss", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"],
-  _excluded2 = ["appearance", "shape", "isSelected", "isDisabled"],
-  _excluded3 = ["appearance", "shape", "isSelected", "isDisabled"],
-  _excluded4 = ["iconBefore", "children"],
-  _excluded5 = ["iconBefore", "children"],
-  _excluded6 = ["icon", "label", "tooltip"],
-  _excluded7 = ["icon", "label", "tooltip"];
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _hasCustomThemeContext = require("./has-custom-theme-context");
+var _themedButton = require("./themed-button");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-/**
- * Props from primitives that we explicitly ignore and remove from spread props,
- * because they apply styles.
- *
- * `css` / `className` are not here because primitives don't support them.
- *
- * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
- * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
- */
-
-/**
- * Returns the spread props to pass through to underlying primitive components.
- *
- * It removes the props which apply styles.
- */
-// eslint-disable no-unused-vars
-function getPrimitiveSpreadProps(_ref) {
-  var style = _ref.style,
-    xcss = _ref.xcss,
-    backgroundColor = _ref.backgroundColor,
-    padding = _ref.padding,
-    paddingBlock = _ref.paddingBlock,
-    paddingBlockStart = _ref.paddingBlockStart,
-    paddingBlockEnd = _ref.paddingBlockEnd,
-    paddingInline = _ref.paddingInline,
-    paddingInlineStart = _ref.paddingInlineStart,
-    paddingInlineEnd = _ref.paddingInlineEnd,
-    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return props;
-}
-// eslint-enable no-unused-vars
-
-/**
- * Props present in underlying primitives but we want to override,
- * so we don't want to inherit their definitions
- */
-
-/**
- * Props that are common between link buttons.
- */
-
-/**
- * Props shared by `Button` and `IconButton`
- */
-
-var themedButtonBackground = exports.themedButtonBackground = '--ds-top-bar-button-background';
-var themedButtonBackgroundHovered = exports.themedButtonBackgroundHovered = '--ds-top-bar-button-background-hovered';
-var themedButtonBackgroundPressed = exports.themedButtonBackgroundPressed = '--ds-top-bar-button-background-pressed';
-var themedButtonBorder = exports.themedButtonBorder = '--ds-top-bar-button-border';
-var themedButtonPrimaryText = exports.themedButtonPrimaryText = '--ds-top-bar-button-primary-text';
-var themedButtonPrimaryBackground = exports.themedButtonPrimaryBackground = '--ds-top-bar-button-primary-background';
-var themedButtonPrimaryBackgroundHovered = exports.themedButtonPrimaryBackgroundHovered = '--ds-top-bar-button-primary-background-hovered';
-var themedButtonPrimaryBackgroundPressed = exports.themedButtonPrimaryBackgroundPressed = '--ds-top-bar-button-primary-background-pressed';
-var themedButtonSelectedText = exports.themedButtonSelectedText = '--ds-top-bar-button-selected-text';
-var themedButtonSelectedBackground = exports.themedButtonSelectedBackground = '--ds-top-bar-button-selected-background';
-var themedButtonSelectedBackgroundHovered = exports.themedButtonSelectedBackgroundHovered = '--ds-top-bar-button-selected-background-hovered';
-var themedButtonSelectedBackgroundPressed = exports.themedButtonSelectedBackgroundPressed = '--ds-top-bar-button-selected-background-pressed';
-var themedButtonSelectedBorder = exports.themedButtonSelectedBorder = '--ds-top-bar-button-selected-border';
-var themedButtonDisabledText = exports.themedButtonDisabledText = '--ds-top-bar-button-disabled-text';
-var themedButtonDisabledBackground = exports.themedButtonDisabledBackground = '--ds-top-bar-button-disabled-background';
-var styles = {
-  root: "_zulp12x7 _11c8fhey _2rkofajl _v5649dqc _4bfu1r31 _1hmsglyw _ajmmnqa1 _1rjcze3t _1e0c1txw _4cvr1h6o _1bah1h6o _4t3i5r7u _kqswh2mm _1nrm1r31 _1a3b1r31 _9oik1r31 _c2waglyw _4fprglyw _1bnxglyw _1iohnqa1 _5goinqa1 _jf4cnqa1",
-  rootT26Shape: "_2rko1qi0",
-  border: "_14mj1kw7 _9v7aze3t _1tv3nqa1 _39yqe4h9 _aetrb3bt _18postnw",
-  selected: "_11q71qds _syazw5ct _8l3m15jn _f8pjw5ct _1053w5ct _19lcjrv1 _30l3w5ct _j6xtnh62 _9h8hw5ct",
-  disabled: "_11q71c9b _syaz1i3i _8l3m1j28 _f8pj1i3i _10531i3i _19lc1c9b _30l31i3i _j6xt1c9b _9h8h1i3i"
-};
-var shapeStyles = {
-  default: "_18zrutpp",
-  square: "_18zrze3t _1bsb5r7u _vwz4idpf"
-};
-var appearanceStyles = {
-  default: "_11q7pkxg _syaz1r31 _8l3maykr _f8pj1r31 _10531r31 _19lc1rps _30l31r31 _j6xtqtgh _9h8h1r31",
-  subtle: "_11q7pkxg _syaz1r31 _f8pj1r31 _10531r31 _19lc1rps _30l31r31 _j6xtqtgh _9h8h1r31",
-  primary: "_11q7esko _syaz15o7 _f8pj15o7 _105315o7 _19lcp6hf _30l315o7 _j6xt5sko _9h8h15o7"
-};
-
-/**
- * Props shared by `ThemedPressable` and `ThemedAnchor`
- */
-
-/**
- * Intentionally an almost-duplicate of `ThemedAnchor` - make sure to update both.
- *
- * See `ThemedAnchor` for more context.
- */
-var ThemedPressable = /*#__PURE__*/(0, _react.forwardRef)(function ThemedPressable(_ref2, ref) {
-  var _ref2$appearance = _ref2.appearance,
-    appearance = _ref2$appearance === void 0 ? 'default' : _ref2$appearance,
-    _ref2$shape = _ref2.shape,
-    shape = _ref2$shape === void 0 ? 'default' : _ref2$shape,
-    isSelected = _ref2.isSelected,
-    isDisabled = _ref2.isDisabled,
-    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
-  var hasBorder = appearance === 'default' || isSelected;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, (0, _extends2.default)({}, getPrimitiveSpreadProps(props), {
-    ref: ref,
-    type: "button"
-    /**
-     * We are using some style values that are outside of the strict
-     * `@atlaskit/css` types.
-     */
-    // @ts-expect-error
-    // eslint-disable-next-line @compiled/no-suppress-xcss
-    ,
-    xcss: (0, _react2.cx)(styles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled),
-    isDisabled: isDisabled
-  }));
-});
-function ThemedAnchorFn(_ref3, ref) {
-  var _ref3$appearance = _ref3.appearance,
-    appearance = _ref3$appearance === void 0 ? 'default' : _ref3$appearance,
-    _ref3$shape = _ref3.shape,
-    shape = _ref3$shape === void 0 ? 'default' : _ref3$shape,
-    isSelected = _ref3.isSelected,
-    isDisabled = _ref3.isDisabled,
-    props = (0, _objectWithoutProperties2.default)(_ref3, _excluded3);
-  var hasBorder = appearance === 'default' || isSelected;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, (0, _extends2.default)({}, getPrimitiveSpreadProps(props), {
+// Explicitly typed to use only the themed button API,
+// which is a subset of the normal button API
+var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
+  var Component = hasCustomTheme ? _themedButton.ThemedButton : _new.default;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
     ref: ref
-    /**
-     * We are using some style values that are outside of the strict
-     * `@atlaskit/css` types.
-     */
-    // @ts-expect-error
-    // eslint-disable-next-line @compiled/no-suppress-xcss
-    ,
-    xcss: (0, _react2.cx)(styles.root, (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && styles.rootT26Shape, shapeStyles[shape], hasBorder && styles.border, appearanceStyles[appearance], isSelected && styles.selected, isDisabled && styles.disabled)
-  }));
-}
-/**
- * Intentionally an almost-duplicate of `ThemedPressable` - make sure to update both.
- *
- * More 'clever' solutions were tried but I couldn't get them working in an acceptable state.
- *
- * Polymorphism had many typing issues and required sacrificing type safety.
- *
- * Render props had problems passing down styles through `xcss` to the `children` function.
- */
-var ThemedAnchor = (0, _forwardRefWithGeneric.default)(ThemedAnchorFn);
-var textButtonStyles = {
-  iconBefore: "_vwz4idpf",
-  text: "_k48p1wq8"
-};
-
-/**
- * Props shared by `Button` and `LinkButton`
- */
-
-/**
- * __Themed button__
- *
- * A themed button for the top bar.
- */
-var ThemedButton = exports.ThemedButton = /*#__PURE__*/(0, _react.forwardRef)(function ThemedButton(_ref4, ref) {
-  var IconBefore = _ref4.iconBefore,
-    children = _ref4.children,
-    props = (0, _objectWithoutProperties2.default)(_ref4, _excluded4);
-  return /*#__PURE__*/_react.default.createElement(ThemedPressable, (0, _extends2.default)({}, props, {
-    ref: ref
-  }), IconBefore && /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)([textButtonStyles.iconBefore])
-  }, (0, _platformFeatureFlags.fg)('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
-    icon: IconBefore
-  }) : /*#__PURE__*/_react.default.createElement(IconBefore, {
-    label: "",
-    color: "currentColor"
-  })), /*#__PURE__*/_react.default.createElement("span", {
-    className: (0, _runtime.ax)([textButtonStyles.text])
-  }, children));
-});
-function ThemedLinkButtonFn(_ref5, ref) {
-  var IconBefore = _ref5.iconBefore,
-    children = _ref5.children,
-    props = (0, _objectWithoutProperties2.default)(_ref5, _excluded5);
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    _react.default.createElement(ThemedAnchor, (0, _extends2.default)({}, props, {
-      ref: ref
-    }), IconBefore && /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _runtime.ax)([textButtonStyles.iconBefore])
-    }, /*#__PURE__*/_react.default.createElement(IconBefore, {
-      label: "",
-      color: "currentColor"
-    })), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _runtime.ax)([textButtonStyles.text])
-    }, children))
-  );
-}
-/**
- * __Themed link button__
- *
- * A themed link button for the top bar.
- */
-var ThemedLinkButton = exports.ThemedLinkButton = (0, _forwardRefWithGeneric.default)(ThemedLinkButtonFn);
-
-/**
- * Props shared by `ThemedIconButtonProps` and `ThemedLinkIconButton`
- */
-
-/**
- * __Themed icon button__
- *
- * A themed icon button for the top bar.
- */
-var ThemedIconButton = exports.ThemedIconButton = /*#__PURE__*/(0, _react.forwardRef)(function ThemedIconButton(_ref6, ref) {
-  var _tooltip$content;
-  var Icon = _ref6.icon,
-    label = _ref6.label,
-    tooltip = _ref6.tooltip,
-    props = (0, _objectWithoutProperties2.default)(_ref6, _excluded6);
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, (0, _extends2.default)({}, tooltip, {
-    content: (_tooltip$content = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content !== void 0 ? _tooltip$content : label
-  }), function (triggerProps) {
-    return (
-      /*#__PURE__*/
-      /**
-       * The `aria-describedby` from `triggerProps` is intentionally not passed down,
-       * because it would cause double announcements with the `VisuallyHidden` label.
-       *
-       * The `@atlaskit/button` IconButton uses the same approach.
-       */
-      _react.default.createElement(ThemedPressable, (0, _extends2.default)({}, props, {
-        shape: "square",
-        ref: (0, _mergeRefs.default)([ref, triggerProps.ref]),
-        onClick: function onClick(event, analyticsEvent) {
-          var _props$onClick, _triggerProps$onClick;
-          (_props$onClick = props.onClick) === null || _props$onClick === void 0 || _props$onClick.call(props, event, analyticsEvent);
-          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick = triggerProps.onClick) === null || _triggerProps$onClick === void 0 || _triggerProps$onClick.call(triggerProps, event);
-        },
-        onMouseOver: function onMouseOver(e) {
-          var _triggerProps$onMouse, _props$onMouseOver;
-          (_triggerProps$onMouse = triggerProps.onMouseOver) === null || _triggerProps$onMouse === void 0 || _triggerProps$onMouse.call(triggerProps, e);
-          (_props$onMouseOver = props.onMouseOver) === null || _props$onMouseOver === void 0 || _props$onMouseOver.call(props, e);
-        },
-        onMouseOut: function onMouseOut(e) {
-          var _triggerProps$onMouse2, _props$onMouseOut;
-          (_triggerProps$onMouse2 = triggerProps.onMouseOut) === null || _triggerProps$onMouse2 === void 0 || _triggerProps$onMouse2.call(triggerProps, e);
-          (_props$onMouseOut = props.onMouseOut) === null || _props$onMouseOut === void 0 || _props$onMouseOut.call(props, e);
-        },
-        onMouseMove: function onMouseMove(e) {
-          var _triggerProps$onMouse3, _props$onMouseMove;
-          (_triggerProps$onMouse3 = triggerProps.onMouseMove) === null || _triggerProps$onMouse3 === void 0 || _triggerProps$onMouse3.call(triggerProps, e);
-          (_props$onMouseMove = props.onMouseMove) === null || _props$onMouseMove === void 0 || _props$onMouseMove.call(props, e);
-        },
-        onMouseDown: function onMouseDown(e) {
-          var _triggerProps$onMouse4, _props$onMouseDown;
-          (_triggerProps$onMouse4 = triggerProps.onMouseDown) === null || _triggerProps$onMouse4 === void 0 || _triggerProps$onMouse4.call(triggerProps, e);
-          (_props$onMouseDown = props.onMouseDown) === null || _props$onMouseDown === void 0 || _props$onMouseDown.call(props, e);
-        },
-        onFocus: function onFocus(e) {
-          var _triggerProps$onFocus, _props$onFocus;
-          (_triggerProps$onFocus = triggerProps.onFocus) === null || _triggerProps$onFocus === void 0 || _triggerProps$onFocus.call(triggerProps, e);
-          (_props$onFocus = props.onFocus) === null || _props$onFocus === void 0 || _props$onFocus.call(props, e);
-        },
-        onBlur: function onBlur(e) {
-          var _triggerProps$onBlur, _props$onBlur;
-          (_triggerProps$onBlur = triggerProps.onBlur) === null || _triggerProps$onBlur === void 0 || _triggerProps$onBlur.call(triggerProps, e);
-          (_props$onBlur = props.onBlur) === null || _props$onBlur === void 0 || _props$onBlur.call(props, e);
-        }
-      }), (0, _platformFeatureFlags.fg)('platform_themed_button_use_icon_renderer') ? /*#__PURE__*/_react.default.createElement(_iconRenderer.default, {
-        icon: Icon
-      }) : /*#__PURE__*/_react.default.createElement(Icon, {
-        label: "",
-        color: "currentColor"
-      }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
-    );
-  });
-});
-function ThemedLinkIconButtonFn(_ref7, ref) {
-  var _tooltip$content2;
-  var Icon = _ref7.icon,
-    label = _ref7.label,
-    tooltip = _ref7.tooltip,
-    props = (0, _objectWithoutProperties2.default)(_ref7, _excluded7);
-  return /*#__PURE__*/_react.default.createElement(_tooltip.default, (0, _extends2.default)({}, tooltip, {
-    content: (_tooltip$content2 = tooltip === null || tooltip === void 0 ? void 0 : tooltip.content) !== null && _tooltip$content2 !== void 0 ? _tooltip$content2 : label
-  }), function (triggerProps) {
-    return (
-      /*#__PURE__*/
-      /**
-       * The `aria-describedby` from `triggerProps` is intentionally not passed down,
-       * because it would cause double announcements with the `VisuallyHidden` label.
-       *
-       * The `@atlaskit/button` IconButton uses the same approach.
-       */
-      _react.default.createElement(ThemedAnchor, (0, _extends2.default)({}, props, {
-        shape: "square",
-        ref: (0, _mergeRefs.default)([ref, triggerProps.ref]),
-        onClick: function onClick(event, analyticsEvent) {
-          var _props$onClick2, _triggerProps$onClick2;
-          (_props$onClick2 = props.onClick) === null || _props$onClick2 === void 0 || _props$onClick2.call(props, event, analyticsEvent);
-          triggerProps === null || triggerProps === void 0 || (_triggerProps$onClick2 = triggerProps.onClick) === null || _triggerProps$onClick2 === void 0 || _triggerProps$onClick2.call(triggerProps, event);
-        },
-        onMouseOver: function onMouseOver(e) {
-          var _triggerProps$onMouse5, _props$onMouseOver2;
-          (_triggerProps$onMouse5 = triggerProps.onMouseOver) === null || _triggerProps$onMouse5 === void 0 || _triggerProps$onMouse5.call(triggerProps, e);
-          (_props$onMouseOver2 = props.onMouseOver) === null || _props$onMouseOver2 === void 0 || _props$onMouseOver2.call(props, e);
-        },
-        onMouseOut: function onMouseOut(e) {
-          var _triggerProps$onMouse6, _props$onMouseOut2;
-          (_triggerProps$onMouse6 = triggerProps.onMouseOut) === null || _triggerProps$onMouse6 === void 0 || _triggerProps$onMouse6.call(triggerProps, e);
-          (_props$onMouseOut2 = props.onMouseOut) === null || _props$onMouseOut2 === void 0 || _props$onMouseOut2.call(props, e);
-        },
-        onMouseMove: function onMouseMove(e) {
-          var _triggerProps$onMouse7, _props$onMouseMove2;
-          (_triggerProps$onMouse7 = triggerProps.onMouseMove) === null || _triggerProps$onMouse7 === void 0 || _triggerProps$onMouse7.call(triggerProps, e);
-          (_props$onMouseMove2 = props.onMouseMove) === null || _props$onMouseMove2 === void 0 || _props$onMouseMove2.call(props, e);
-        },
-        onMouseDown: function onMouseDown(e) {
-          var _triggerProps$onMouse8, _props$onMouseDown2;
-          (_triggerProps$onMouse8 = triggerProps.onMouseDown) === null || _triggerProps$onMouse8 === void 0 || _triggerProps$onMouse8.call(triggerProps, e);
-          (_props$onMouseDown2 = props.onMouseDown) === null || _props$onMouseDown2 === void 0 || _props$onMouseDown2.call(props, e);
-        },
-        onFocus: function onFocus(e) {
-          var _triggerProps$onFocus2, _props$onFocus2;
-          (_triggerProps$onFocus2 = triggerProps.onFocus) === null || _triggerProps$onFocus2 === void 0 || _triggerProps$onFocus2.call(triggerProps, e);
-          (_props$onFocus2 = props.onFocus) === null || _props$onFocus2 === void 0 || _props$onFocus2.call(props, e);
-        },
-        onBlur: function onBlur(e) {
-          var _triggerProps$onBlur2, _props$onBlur2;
-          (_triggerProps$onBlur2 = triggerProps.onBlur) === null || _triggerProps$onBlur2 === void 0 || _triggerProps$onBlur2.call(triggerProps, e);
-          (_props$onBlur2 = props.onBlur) === null || _props$onBlur2 === void 0 || _props$onBlur2.call(props, e);
-        }
-      }), /*#__PURE__*/_react.default.createElement(Icon, {
-        label: "",
-        color: "currentColor"
-      }), /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, label))
-    );
-  });
-}
-
-/**
- * __Themed link icon button__
- *
- * A themed link icon button for the top bar.
- */
-var ThemedLinkIconButton = exports.ThemedLinkIconButton = (0, _forwardRefWithGeneric.default)(ThemedLinkIconButtonFn);
+  }, props));
+});

package/dist/cjs/ui/top-nav-items/themed/get-custom-theme-styles.js

@@ -7,10 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.getCustomThemeStyles = getCustomThemeStyles;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _logoRenderer = require("../nav-logo/logo-renderer");
-var _button = require("./button");
 var _colorUtils = require("./color-utils");
 var _hex = require("./color-utils/formats/hex");
 var _palette = require("./palette");
+var _paletteRgba = require("./palette-rgba");
 var _search = require("./search");
 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; }
@@ -41,11 +41,11 @@ function toRGBAString(_ref2) {
 // We will need to invert the colors based on backgroundColor independently of the app's color mode (dark/light)
 // Values here are not final
 var buttonStyles = {
-  light: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _button.themedButtonBackground, 'transparent'), _button.themedButtonBackgroundHovered, _palette.palette.Neutral200A), _button.themedButtonBackgroundPressed, _palette.palette.Neutral300A), _button.themedButtonBorder, _palette.palette.Neutral300A), _button.themedButtonSelectedBackground, _palette.palette.Neutral300A), _button.themedButtonSelectedBackgroundHovered, _palette.palette.Neutral400A), _button.themedButtonSelectedBackgroundPressed, _palette.palette.Neutral500A), _button.themedButtonDisabledText, _palette.palette.Neutral400A), _button.themedButtonDisabledBackground, _palette.palette.Neutral100A),
-  dark: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _button.themedButtonBackground, 'transparent'), _button.themedButtonBackgroundHovered, _palette.palette.DarkNeutral200A), _button.themedButtonBackgroundPressed, _palette.palette.DarkNeutral300A), _button.themedButtonBorder, _palette.palette.DarkNeutral300A), _button.themedButtonSelectedBackground, _palette.palette.DarkNeutral300A), _button.themedButtonSelectedBackgroundHovered, _palette.palette.DarkNeutral400A), _button.themedButtonSelectedBackgroundPressed, _palette.palette.DarkNeutral500A), _button.themedButtonDisabledText, _palette.palette.DarkNeutral400A), _button.themedButtonDisabledBackground, _palette.palette.DarkNeutral100A)
+  light: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--ds-top-bar-button-background', 'transparent'), '--ds-top-bar-button-background-hovered', _palette.palette.Neutral200A), '--ds-top-bar-button-background-pressed', _palette.palette.Neutral300A), '--ds-top-bar-button-border', _palette.palette.Neutral300A), '--ds-top-bar-button-selected-background', _palette.palette.Neutral300A), '--ds-top-bar-button-selected-background-hovered', _palette.palette.Neutral400A), '--ds-top-bar-button-selected-background-pressed', _palette.palette.Neutral500A), '--ds-top-bar-button-disabled-text', _palette.palette.Neutral400A), '--ds-top-bar-button-disabled-background', _palette.palette.Neutral100A),
+  dark: (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--ds-top-bar-button-background', 'transparent'), '--ds-top-bar-button-background-hovered', _palette.palette.DarkNeutral200A), '--ds-top-bar-button-background-pressed', _palette.palette.DarkNeutral300A), '--ds-top-bar-button-border', _palette.palette.DarkNeutral300A), '--ds-top-bar-button-selected-background', _palette.palette.DarkNeutral300A), '--ds-top-bar-button-selected-background-hovered', _palette.palette.DarkNeutral400A), '--ds-top-bar-button-selected-background-pressed', _palette.palette.DarkNeutral500A), '--ds-top-bar-button-disabled-text', _palette.palette.DarkNeutral400A), '--ds-top-bar-button-disabled-background', _palette.palette.DarkNeutral100A)
 };
 var logoStyles = {
-  light: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _logoRenderer.themedLogoIcon, _palette.palette.DarkNeutral0), _logoRenderer.themedLogoText, _palette.palette.DarkNeutral0),
+  light: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--ds-top-bar-logo-icon', _palette.palette.DarkNeutral0), '--ds-top-bar-logo-text', _palette.palette.DarkNeutral0),
   dark: (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _logoRenderer.themedLogoIcon, _palette.palette.Neutral0), _logoRenderer.themedLogoText, _palette.palette.Neutral0)
 };
 
@@ -76,19 +76,19 @@ function getCustomThemeStyles(_ref3) {
     a: 0.5
   }))), _search.themedSearchBorderFocused, toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
     a: 0.8
-  }))), _button.themedButtonPrimaryBackground, toRGBString(highlightRgb)), _button.themedButtonPrimaryBackgroundHovered, toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
+  }))), '--ds-top-bar-button-primary-background', toRGBString(highlightRgb)), '--ds-top-bar-button-primary-background-hovered', toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
     a: 0.8
-  }))), _button.themedButtonPrimaryBackgroundPressed, toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
+  }))), '--ds-top-bar-button-primary-background-pressed', toRGBAString(_objectSpread(_objectSpread({}, highlightRgb), {}, {
     a: 0.65
-  }))), _button.themedButtonPrimaryText, highlightTextColor.hex));
+  }))), '--ds-top-bar-button-primary-text', highlightTextColor.hex));
 }
 
 /**
  * Precomputed RGBA values for the selected backgrounds
  */
 var selectedBackgroundRGBA = {
-  light: _palette.paletteRgba.Neutral300A,
-  dark: _palette.paletteRgba.DarkNeutral300A
+  light: _paletteRgba.paletteRgba.Neutral300A,
+  dark: _paletteRgba.paletteRgba.DarkNeutral300A
 };
 function getSelectedStyles(_ref4) {
   var backgroundColor = _ref4.backgroundColor,
@@ -108,5 +108,5 @@ function getSelectedStyles(_ref4) {
     background: backgroundColor,
     foreground: foregroundColor
   });
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, _button.themedButtonSelectedText, (0, _colorUtils.getTextColor)(blendedBackground).hex), _button.themedButtonSelectedBorder, (0, _colorUtils.isLight)(blendedBackground) ? _palette.palette.Neutral1100 : _palette.palette.DarkNeutral1100);
+  return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, '--ds-top-bar-button-selected-text', (0, _colorUtils.getTextColor)(blendedBackground).hex), '--ds-top-bar-button-selected-border', (0, _colorUtils.isLight)(blendedBackground) ? _palette.palette.Neutral1100 : _palette.palette.DarkNeutral1100);
 }

package/dist/cjs/ui/top-nav-items/themed/get-primitives-spread-props.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPrimitiveSpreadProps = getPrimitiveSpreadProps;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _excluded = ["style", "xcss", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd"];
+/**
+ * Props from primitives that we explicitly ignore and remove from spread props,
+ * because they apply styles.
+ *
+ * `css` / `className` are not here because primitives don't support them.
+ *
+ * See `packages/design-system/primitives/src/components/anchor.tsx` and `packages/design-system/primitives/src/components/pressable.tsx`
+ * for where these are defined. These shouldn't change very often as the direction is `xcss` over individual props.
+ */
+
+/**
+ * Returns the spread props to pass through to underlying primitive components.
+ *
+ * It removes the props which apply styles.
+ */
+// eslint-disable no-unused-vars
+function getPrimitiveSpreadProps(_ref) {
+  var style = _ref.style,
+    xcss = _ref.xcss,
+    backgroundColor = _ref.backgroundColor,
+    padding = _ref.padding,
+    paddingBlock = _ref.paddingBlock,
+    paddingBlockStart = _ref.paddingBlockStart,
+    paddingBlockEnd = _ref.paddingBlockEnd,
+    paddingInline = _ref.paddingInline,
+    paddingInlineStart = _ref.paddingInlineStart,
+    paddingInlineEnd = _ref.paddingInlineEnd,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return props;
+}

package/dist/cjs/ui/top-nav-items/themed/icon-button.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _new = require("@atlaskit/button/new");
+var _hasCustomThemeContext = require("./has-custom-theme-context");
+var _themedIconButton = require("./themed-icon-button");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var IconButton = exports.IconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
+  var Component = hasCustomTheme ? _themedIconButton.ThemedIconButton : _new.IconButton;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref
+  }, props));
+});

package/dist/cjs/ui/top-nav-items/themed/link-button.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _new = require("@atlaskit/button/new");
+var _hasCustomThemeContext = require("./has-custom-theme-context");
+var _themedLinkButton = require("./themed-link-button");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var LinkButton = exports.LinkButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
+  var Component = hasCustomTheme ? _themedLinkButton.ThemedLinkButton : _new.LinkButton;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref
+  }, props));
+});

package/dist/cjs/ui/top-nav-items/themed/link-icon-button.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkIconButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _new = require("@atlaskit/button/new");
+var _hasCustomThemeContext = require("./has-custom-theme-context");
+var _themedLinkIconButton = require("./themed-link-icon-button");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var LinkIconButton = exports.LinkIconButton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var hasCustomTheme = (0, _hasCustomThemeContext.useHasCustomTheme)();
+  var Component = hasCustomTheme ? _themedLinkIconButton.ThemedLinkIconButton : _new.LinkIconButton;
+  return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
+    ref: ref
+  }, props));
+});

package/dist/cjs/ui/top-nav-items/themed/palette-rgba.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.paletteRgba = void 0;
+var paletteRgba = exports.paletteRgba = {
+  DarkNeutral300A: {
+    r: 0xe3,
+    g: 0xe4,
+    b: 0xf2,
+    a: 0x1f / 255
+  },
+  Neutral300A: {
+    r: 0x0b,
+    g: 0x12,
+    b: 0x0e,
+    a: 0x24 / 255
+  }
+};

package/dist/cjs/ui/top-nav-items/themed/palette.js

@@ -3,13 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.paletteRgba = exports.palette = void 0;
-/**
- * Copied from the brand refresh palette.
- *
- * Ideally we'd codegen this but the brand refresh palette isn't exposed
- * through public API and we shouldn't use the private API of another package.
- */
+exports.palette = void 0;
 var palette = exports.palette = {
   'DarkNeutral-100': '#111213',
   'DarkNeutral-100A': '#01040475',
@@ -51,18 +45,4 @@ var palette = exports.palette = {
   Neutral900: '#3B3D42',
   Neutral1000: '#292A2E',
   Neutral1100: '#1E1F21'
-};
-var paletteRgba = exports.paletteRgba = {
-  DarkNeutral300A: {
-    r: 0xe3,
-    g: 0xe4,
-    b: 0xf2,
-    a: 0x1f / 255
-  },
-  Neutral300A: {
-    r: 0x0b,
-    g: 0x12,
-    b: 0x0e,
-    a: 0x24 / 255
-  }
 };

package/dist/cjs/ui/top-nav-items/themed/search.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.themedSearchBorderFocused = exports.themedSearchBorder = void 0;
 exports.useLegacySearchTheme = useLegacySearchTheme;
-var _button = require("./button");
 var _hasCustomThemeContext = require("./has-custom-theme-context");
 var themedSearchBorder = exports.themedSearchBorder = '--ds-top-bar-search-border';
 var themedSearchBorderFocused = exports.themedSearchBorderFocused = '--ds-top-bar-search-border-focused';
@@ -40,7 +39,7 @@ var legacySearchTheme = {
      *
      * Instead it's used as the hover background color for a close button when on mobile.
      */
-    backgroundColor: "var(".concat(_button.themedButtonBackgroundHovered, ")")
+    backgroundColor: "var(--ds-top-bar-button-background-hovered)"
   }
 };
 

package/dist/cjs/ui/top-nav-items/themed/{button.compiled.css → themed-anchor.compiled.css}

@@ -28,7 +28,6 @@
 ._4t3i5r7u{height:2.2857142857142856em}
 ._aetrb3bt:after{content:""}
 ._ajmmnqa1{text-decoration-style:solid}
-._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
 ._kqswh2mm{position:relative}
 ._syaz15o7{color:var(--ds-top-bar-button-primary-text)}
 ._syaz1i3i{color:var(--ds-top-bar-button-disabled-text)}