@wix/design-system/dist/cjs/SidebarItemNext/SidebarItemButtonNext.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _react = _interopRequireWildcard(require("react"));
var _SidebarNextContext = require("../SidebarNext/SidebarNextContext");
var _useFocusRing = require("../providers/useFocusRing/useFocusRing");
var _constants = require("./constants");
var _SidebarItemNextSt = require("./SidebarItemNext.st.css.js");
var _Transition = _interopRequireDefault(require("../Transition"));
var _Text = _interopRequireDefault(require("../Text"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _excluded = ["as", "role", "href", "dataHook", "children", "disabled", "onClick", "className", "itemKey", "suffix", "prefix", "isInQuickNavigation", "minimizedTooltipContent"];
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/SidebarItemNext/SidebarItemButtonNext.tsx";
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); }
// FIXME: this will produce invalid intersections (e.g. `prefix` already is HTML attribute but HTML attributes cannot be `ReactNode`)

var SidebarItemButtonNext = /*#__PURE__*/(0, _react.memo)(props => {
  var context = (0, _react.useContext)(_SidebarNextContext.SidebarNextContext);
  var {
    skin,
    level,
    selectedPath,
    inert,
    parent,
    closeQuickNav,
    legacy,
    minimized,
    isFirstLevelWithPrefix
  } = context;
  var {
      as = 'button',
      role = as === 'a' ? 'link' : 'button',
      // FIXME: check original code, this is weird
      // @ts-ignore
      href,
      // FIXME: from intersection
      dataHook,
      children,
      disabled,
      onClick,
      className,
      itemKey,
      suffix,
      prefix,
      isInQuickNavigation,
      minimizedTooltipContent
    } = props,
    asComponentProps = (0, _objectWithoutProperties2.default)(props, _excluded);
  var {
    isFocusVisible,
    focusProps
  } = (0, _useFocusRing.useFocusRing)();
  var Component = as;
  var selected = !!(selectedPath != null && selectedPath.length) && selectedPath[selectedPath.length - 1] === itemKey;
  var htmlHref = disabled ? undefined : href;
  var tabIndex = inert ? -1 : 0;
  var textSize = level === 1 ? 'small' : 'tiny';
  var inContextMenu = parent === 'inContextMenu';
  var buttonClassName = (0, _SidebarItemNextSt.st)(_SidebarItemNextSt.classes.root, {
    selected,
    disabled,
    skin,
    inContextMenu,
    hasPrefix: !!prefix,
    isFirstLevelWithPrefix,
    level,
    legacy,
    isFocusVisible,
    minimized
  }, className);
  var handleClick = event => {
    if (!disabled) {
      closeQuickNav == null || closeQuickNav();
      // @ts-ignore
      onClick == null || onClick(event, itemKey); // FIXME: itemKey was not typed in props
    }
  };

  // Support accessibility for keyboard navigation
  var handleKeyDown = event => {
    if (event.key === 'Enter' || event.key === ' ') {
      handleClick == null || handleClick(event);
    }
  };
  var tooltipVisible = minimized && !!minimizedTooltipContent;
  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
    className: (0, _SidebarItemNextSt.st)(_SidebarItemNextSt.classes.tooltipWrapper)
  }, focusProps, {
    tabIndex: tabIndex,
    onKeyDown: handleKeyDown,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 135,
      columnNumber: 5
    }
  }), /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
    placement: "right",
    content: minimizedTooltipContent,
    disabled: !tooltipVisible,
    className: _SidebarItemNextSt.classes.tooltip,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 141,
      columnNumber: 7
    }
  }, /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({
    tabIndex: -1,
    className: buttonClassName,
    "data-hook": dataHook,
    type: "button",
    role: role,
    href: htmlHref,
    disabled: href ? false : disabled,
    onClick: handleClick,
    "aria-current": selected ? 'page' : undefined // FIXME: no longer correct
    ,
    "data-selected": selected,
    "data-disabled": disabled,
    "data-text-size": textSize,
    "data-skin": skin
  }, asComponentProps, {
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 147,
      columnNumber: 9
    }
  }), level === 3 && !inContextMenu && /*#__PURE__*/_react.default.createElement("hr", {
    className: _SidebarItemNextSt.classes.divider,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 163,
      columnNumber: 45
    }
  }), prefix && /*#__PURE__*/_react.default.createElement("span", {
    className: _SidebarItemNextSt.classes.prefix,
    "data-hook": _constants.dataHooks.prefix,
    "aria-hidden": true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 165,
      columnNumber: 13
    }
  }, prefix), /*#__PURE__*/_react.default.createElement(_Transition.default, {
    className: _SidebarItemNextSt.classes.textWrapper,
    show: !minimized,
    exitAnimation: {
      fadeOut: {
        duration: 'fast01',
        easing: 'exitEasing'
      }
    },
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 173,
      columnNumber: 11
    }
  }, /*#__PURE__*/_react.default.createElement(_Text.default, {
    dataHook: _constants.dataHooks.title,
    className: _SidebarItemNextSt.classes.text,
    size: textSize,
    weight: "normal",
    secondary: skin === _constants.skins.light,
    light: skin === _constants.skins.dark,
    skin: disabled ? 'disabled' : 'standard',
    showTooltip: false,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 183,
      columnNumber: 13
    }
  }, children)), !disabled && suffix && !minimized && /*#__PURE__*/_react.default.createElement("div", {
    className: _SidebarItemNextSt.classes.suffixContainer,
    "aria-hidden": true,
    __self: void 0,
    __source: {
      fileName: _jsxFileName,
      lineNumber: 197,
      columnNumber: 13
    }
  }, Array.isArray(suffix) ? suffix.slice(0, 2).map(renderSuffix) : renderSuffix(suffix, 0)))));
});
var renderSuffix = (suffix, index) => /*#__PURE__*/_react.default.createElement("span", {
  key: "".concat(_constants.dataHooks.suffix, "-").concat(index),
  "data-hook": _constants.dataHooks.suffix,
  className: _SidebarItemNextSt.classes.suffix,
  __self: void 0,
  __source: {
    fileName: _jsxFileName,
    lineNumber: 210,
    columnNumber: 3
  }
}, suffix);
SidebarItemButtonNext.displayName = 'SidebarItemButtonNext';
var _default = exports.default = SidebarItemButtonNext;
//# sourceMappingURL=SidebarItemButtonNext.js.map