@atlaskit/atlassian-navigation/dist/cjs/components/Create/index.js

A horizontal navigation component for Atlassian apps.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Create = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
var _add = _interopRequireDefault(require("@atlaskit/icon/core/add"));
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _constants = require("../../common/constants");
var _theme = require("../../theme");
var _IconButton = require("../IconButton");
var _styles = require("./styles");
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); }
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var wrapperStyles = (0, _react2.css)({
  display: 'flex',
  alignItems: 'center',
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& [data-hide-on-smallscreens]': (0, _defineProperty2.default)({}, "@media (max-width: ".concat(_constants.CREATE_BREAKPOINT - 1, "px)"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
    display: 'none !important'
  }),
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
  '& [data-hide-on-largescreens]': (0, _defineProperty2.default)({}, "@media (min-width: ".concat(_constants.CREATE_BREAKPOINT, "px)"), {
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
    display: 'none !important'
  }),
  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
  '&&': {
    marginInlineStart: "var(--ds-space-150, 12px)"
  }
});
var TooltipSwitch = function TooltipSwitch(_ref) {
  var buttonTooltip = _ref.buttonTooltip,
    children = _ref.children;
  return buttonTooltip ? (0, _react2.jsx)(_tooltip.default, {
    content: buttonTooltip,
    hideTooltipOnClick: true
  }, children) : (0, _react2.jsx)(_react.Fragment, null, children);
};

/**
 * _Create__
 *
 * A call to action button that can be passed into `AtlassianNavigation`'s
 * `renderCreate` prop. It is shown after all other primary buttons.
 *
 * - [Examples](https://atlassian.design/components/atlassian-navigation/examples#create)
 * - [Code](https://atlassian.design/components/atlassian-navigation/code)
 *
 * @deprecated `@atlaskit/atlassian-navigation` is deprecated. Use `@atlaskit/navigation-system` instead.
 */
var Create = exports.Create = function Create(_ref2) {
  var onClick = _ref2.onClick,
    href = _ref2.href,
    text = _ref2.text,
    buttonTooltip = _ref2.buttonTooltip,
    iconButtonTooltip = _ref2.iconButtonTooltip,
    testId = _ref2.testId,
    label = _ref2.label;
  var theme = (0, _theme.useTheme)();
  return (0, _react2.jsx)("div", {
    css: wrapperStyles,
    role: "listitem",
    "data-testid": "create-button-wrapper"
  }, (0, _react2.jsx)(TooltipSwitch, {
    buttonTooltip: buttonTooltip
  }, (0, _react2.jsx)(_customThemeButton.default, {
    id: "createGlobalItem",
    "aria-label": label,
    onClick: onClick,
    href: href
    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides, @atlaskit/design-system/no-unsafe-style-overrides
    ,
    theme: (0, _styles.getCreateButtonTheme)(theme),
    testId: testId && "".concat(testId, "-button"),
    "data-hide-on-smallscreens": true
  }, text)), (0, _react2.jsx)(_IconButton.IconButton, {
    id: "createGlobalItemIconButton",
    testId: testId && "".concat(testId, "-icon-button"),
    icon: (0, _react2.jsx)(_add.default, {
      color: "currentColor",
      spacing: "spacious",
      label: text
    }),
    onClick: onClick,
    href: href,
    tooltip: iconButtonTooltip
    // eslint-disable-next-line @repo/internal/react/no-unsafe-overrides
    ,
    theme: (0, _styles.getCreateButtonTheme)(theme),
    "aria-label": text,
    "data-hide-on-largescreens": true
  }));
};