@spaced-out/ui-design-system/lib/components/Menu/MenuOptionButton.js

Sense UI components library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.MenuOptionButton = void 0;
var React = _interopRequireWildcard(require("react"));
var _classify = require("../../utils/classify");
var _qa = require("../../utils/qa");
var _Button = require("../Button");
var _Checkbox = require("../Checkbox");
var _Icon = require("../Icon");
var _RadioButton = require("../RadioButton");
var _Truncate = require("../Truncate");
var _TruncatedTextWithTooltip = require("../TruncatedTextWithTooltip");
var _MenuModule = _interopRequireDefault(require("./Menu.module.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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); }
const MenuOptionButton = props => {
  const lastMenuItemRef = React.useRef(null);
  const {
    option,
    size = 'medium',
    onSelect,
    selectedOption,
    menuDisabled,
    classNames,
    optionsVariant = 'normal',
    selectedKeys,
    isLastItem,
    onTabOut,
    resolveLabel,
    resolveSecondaryLabel,
    style,
    showLabelTooltip,
    allowWrap = false,
    testId
  } = props;
  const {
    key,
    label,
    secondaryLabel,
    customComponent,
    iconLeft,
    iconLeftType,
    classNames: optionClassNames,
    iconRight,
    iconRightType,
    disabled,
    optionSize,
    optionVariant = optionsVariant,
    indeterminate = false,
    testId: optionTestId
  } = option;
  const [buttonSize, setButtonSize] = React.useState(optionSize || size);
  const resolvedLabel = resolveLabel ? resolveLabel(option) : label;
  const resolvedSecondaryLabel = resolveSecondaryLabel ? resolveSecondaryLabel(option) : secondaryLabel;
  const isSelected = () => {
    if (!selectedKeys || !Array.isArray(selectedKeys) || !selectedKeys.length) {
      return false;
    }
    return selectedKeys.includes(option.key);
  };
  React.useEffect(() => {
    setButtonSize(optionSize || size);
  }, [optionSize, size]);
  React.useEffect(() => {
    const handleKeyDown = event => {
      if (event.key === 'Tab' && !event.shiftKey) {
        // Tab pressed without shift key, calling tab out callback
        onTabOut?.();
      }
    };
    lastMenuItemRef.current?.addEventListener('keydown', handleKeyDown);
    return () => {
      lastMenuItemRef.current?.removeEventListener('keydown', handleKeyDown);
    };
  }, [isLastItem]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Button.UnstyledButton, {
    className: (0, _classify.classify)(_MenuModule.default.option, {
      [_MenuModule.default.selected]: isSelected() || key === selectedOption?.key,
      [_MenuModule.default.optionSmall]: buttonSize === 'small',
      [_MenuModule.default.optionMedium]: buttonSize === 'medium',
      [_MenuModule.default.disabled]: menuDisabled || disabled,
      [_MenuModule.default.withIconLeft]: !!iconLeft,
      [_MenuModule.default.withIconRight]: !!iconRight
    }, classNames?.option, optionClassNames?.wrapper),
    style: style,
    disabled: menuDisabled || disabled,
    onClick: e => onSelect && onSelect(option, e),
    autoFocus: selectedOption?.key === key,
    testId: (0, _qa.generateTestId)({
      base: optionTestId || testId,
      slot: 'option-button',
      index: key
    }),
    ...(isLastItem ? {
      ref: lastMenuItemRef
    } : {}),
    children: [optionVariant === 'checkbox' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
      tabIndex: -1,
      disabled: menuDisabled || disabled,
      checked: isSelected(),
      indeterminate: indeterminate,
      testId: (0, _qa.generateTestId)({
        base: optionTestId || testId,
        slot: 'checkbox',
        index: key
      })
    }), optionVariant === 'radio' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.RadioButton, {
      disabled: menuDisabled || disabled,
      value: option.key,
      selectedValue: selectedKeys?.[0],
      tabIndex: -1,
      testId: (0, _qa.generateTestId)({
        base: optionTestId || testId,
        slot: 'radio-button',
        index: key
      })
    }), !!iconLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
      name: iconLeft,
      type: iconLeftType,
      size: "small",
      className: _MenuModule.default.icon,
      testId: (0, _qa.generateTestId)({
        base: optionTestId || testId,
        slot: 'icon-left',
        index: key
      })
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: (0, _classify.classify)(_MenuModule.default.optionTextContainer, classNames?.optionTextContainer),
      "data-testid": (0, _qa.generateTestId)({
        base: optionTestId || testId,
        slot: 'text-container',
        index: key
      }),
      children: [/*#__PURE__*/React.isValidElement(customComponent) ? customComponent : /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: (0, _classify.classify)(_MenuModule.default.optionTextLabel, classNames?.optionTextLabel),
        "data-testid": (0, _qa.generateTestId)({
          base: optionTestId || testId,
          slot: 'label',
          index: key
        }),
        children: renderLabel({
          label: resolvedLabel,
          allowWrap,
          showLabelTooltip,
          testId: optionTestId || testId,
          key
        })
      }), !!secondaryLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: _MenuModule.default.optionTextSecondaryLabel,
        "data-testid": (0, _qa.generateTestId)({
          base: optionTestId || testId,
          slot: 'secondary-label',
          index: key
        }),
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
          testId: (0, _qa.generateTestId)({
            base: optionTestId || testId,
            slot: 'secondary-label-text',
            index: key
          }),
          children: resolvedSecondaryLabel
        })
      })]
    }), !!iconRight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
      name: iconRight,
      type: iconRightType,
      size: "small",
      className: (0, _classify.classify)(_MenuModule.default.icon, _MenuModule.default.rightIcon),
      testId: (0, _qa.generateTestId)({
        base: optionTestId || testId,
        slot: 'icon-right',
        index: key
      })
    })]
  });
};
exports.MenuOptionButton = MenuOptionButton;
const renderLabel = _ref => {
  let {
    label,
    allowWrap,
    showLabelTooltip,
    testId,
    key
  } = _ref;
  if (showLabelTooltip) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
      tooltip: {
        bodyMaxLines: showLabelTooltip.maxLines ?? 10,
        delayMotionDuration: 'normal'
      },
      line: 3,
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'label-tooltip',
        index: key
      }),
      children: label
    });
  }
  if (allowWrap) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_TruncatedTextWithTooltip.TruncatedTextWithTooltip, {
      tooltip: {
        bodyMaxLines: 10,
        delayMotionDuration: 'normal'
      },
      line: 3,
      testId: (0, _qa.generateTestId)({
        base: testId,
        slot: 'label-wrap-tooltip',
        index: key
      }),
      children: label
    });
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
    testId: (0, _qa.generateTestId)({
      base: testId,
      slot: 'label-text',
      index: key
    }),
    children: label
  });
};