@helpscout/hsds-react/components/DropList/DropList.togglers.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.getTogglerPlacementProps = getTogglerPlacementProps;
exports.IconBtn = exports.MeatButton = exports.SelectTag = exports.SplittedButton = exports.NavLink = exports.SimpleButton = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireWildcard(require("react"));

var _classnames = _interopRequireDefault(require("classnames"));

var _ControlGroup = _interopRequireDefault(require("../ControlGroup"));

var _Button = _interopRequireDefault(require("../Button"));

var _Icon = _interopRequireDefault(require("../Icon"));

var _constants = require("../../constants");

var _Tooltip = _interopRequireDefault(require("../Tooltip"));

var _DropListTogglers = require("./DropList.togglers.css");

var _Button2 = require("../Button/Button.utils");

var _jsxRuntime = require("react/jsx-runtime");

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); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function noop() {}

var SimpleButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var a11yLabel = _ref.a11yLabel,
      _ref$className = _ref.className,
      className = _ref$className === void 0 ? '' : _ref$className,
      _ref$isActive = _ref.isActive,
      isActive = _ref$isActive === void 0 ? false : _ref$isActive,
      _ref$theme = _ref.theme,
      theme = _ref$theme === void 0 ? _Button2.THEME_BLUE : _ref$theme,
      _ref$onClick = _ref.onClick,
      onClick = _ref$onClick === void 0 ? noop : _ref$onClick,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? _Button2.SIZE_LG : _ref$size,
      _ref$text = _ref.text,
      text = _ref$text === void 0 ? '' : _ref$text,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["a11yLabel", "className", "isActive", "theme", "onClick", "size", "text"]);
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, (0, _extends2.default)({
    "aria-label": a11yLabel || 'toggle menu',
    "aria-haspopup": "true",
    "aria-expanded": isActive,
    ref: ref,
    className: (0, _classnames.default)(className, 'ButtonToggler', isActive && 'is-active'),
    "data-cy": "DropList.ButtonToggler",
    "data-testid": "DropList.ButtonToggler",
    theme: theme,
    size: size,
    onClick: onClick
  }, rest, {
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      children: text
    })
  }));
}); // No need to test every single toggler if they're basically the same as Button

/* istanbul ignore next */

exports.SimpleButton = SimpleButton;
var NavLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
  var a11yLabel = _ref2.a11yLabel,
      _ref2$className = _ref2.className,
      className = _ref2$className === void 0 ? '' : _ref2$className,
      _ref2$isActive = _ref2.isActive,
      isActive = _ref2$isActive === void 0 ? false : _ref2$isActive,
      _ref2$kind = _ref2.kind,
      kind = _ref2$kind === void 0 ? 'primary' : _ref2$kind,
      _ref2$onClick = _ref2.onClick,
      onClick = _ref2$onClick === void 0 ? noop : _ref2$onClick,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? _Button2.SIZE_LG : _ref2$size,
      _ref2$text = _ref2.text,
      text = _ref2$text === void 0 ? '' : _ref2$text,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref2, ["a11yLabel", "className", "isActive", "kind", "onClick", "size", "text"]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropListTogglers.NavLinkTogglerUI, (0, _extends2.default)({
    "aria-label": a11yLabel || 'toggle menu',
    "aria-haspopup": "true",
    "aria-expanded": isActive,
    ref: ref,
    className: (0, _classnames.default)(className, 'NavLinkToggler', isActive && 'is-active'),
    "data-cy": "DropList.NavLinkToggler",
    "data-testid": "DropList.NavLinkToggler",
    isActive: isActive,
    onClick: onClick,
    type: "button"
  }, rest, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      children: text
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
      name: "caret-down",
      size: "14"
    })]
  }));
});
exports.NavLink = NavLink;
var SplittedButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, ref) {
  var a11yLabel = _ref3.a11yLabel,
      _ref3$actionButtonPro = _ref3.actionButtonProps,
      actionButtonProps = _ref3$actionButtonPro === void 0 ? {} : _ref3$actionButtonPro,
      _ref3$className = _ref3.className,
      className = _ref3$className === void 0 ? '' : _ref3$className,
      _ref3$isActive = _ref3.isActive,
      isActive = _ref3$isActive === void 0 ? false : _ref3$isActive,
      _ref3$theme = _ref3.theme,
      theme = _ref3$theme === void 0 ? _Button2.THEME_BLUE : _ref3$theme,
      _ref3$onActionClick = _ref3.onActionClick,
      onActionClick = _ref3$onActionClick === void 0 ? noop : _ref3$onActionClick,
      _ref3$onClick = _ref3.onClick,
      onClick = _ref3$onClick === void 0 ? noop : _ref3$onClick,
      _ref3$size = _ref3.size,
      size = _ref3$size === void 0 ? _Button2.SIZE_LG : _ref3$size,
      _ref3$text = _ref3.text,
      text = _ref3$text === void 0 ? '' : _ref3$text,
      _ref3$togglerButtonPr = _ref3.togglerButtonProps,
      togglerButtonProps = _ref3$togglerButtonPr === void 0 ? {} : _ref3$togglerButtonPr,
      _ref3$disabled = _ref3.disabled,
      disabled = _ref3$disabled === void 0 ? false : _ref3$disabled,
      _ref3$outlined = _ref3.outlined,
      outlined = _ref3$outlined === void 0 ? false : _ref3$outlined,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["a11yLabel", "actionButtonProps", "className", "isActive", "theme", "onActionClick", "onClick", "size", "text", "togglerButtonProps", "disabled", "outlined"]);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ControlGroup.default, (0, _extends2.default)({
    className: (0, _classnames.default)(className, 'SplitButtonTogglerControlGroup'),
    "data-cy": "DropList.SplitButtonTogglerControlGroup"
  }, rest, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ControlGroup.default.Item, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropListTogglers.SplitButtonUI, (0, _extends2.default)({
        theme: theme,
        size: size,
        disabled: disabled,
        outlined: outlined,
        className: "SplitButton__Action",
        "data-cy": "DropList.SplitButtonAction",
        "data-testid": "DropList.SplitButtonAction",
        onClick: onActionClick,
        type: "button"
      }, actionButtonProps, {
        children: text
      }))
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ControlGroup.default.Item, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropListTogglers.SplitButtonTogglerUI, (0, _extends2.default)({
        theme: theme,
        size: size,
        disabled: disabled,
        outlined: outlined,
        "aria-label": a11yLabel || 'toggle menu',
        "aria-haspopup": "true",
        "aria-expanded": isActive,
        ref: ref,
        className: (0, _classnames.default)('SplitButton__Toggler', isActive && 'is-active'),
        "data-cy": "DropList.SplitButtonToggler",
        "data-testid": "DropList.SplitButtonToggler",
        isLast: true,
        onClick: onClick,
        type: "button"
      }, togglerButtonProps, {
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
          name: togglerButtonProps.flipChevron && isActive ? 'caret-up' : 'caret-down',
          size: "14"
        })
      }))
    })]
  }));
});
exports.SplittedButton = SplittedButton;

var ErrorTooltipIcon = function ErrorTooltipIcon(_ref4) {
  var error = _ref4.error;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
    animationDelay: 0,
    animationDuration: 0,
    closeOnContentClick: true,
    display: "block",
    placement: "top-end",
    title: error,
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
      name: 'alert',
      size: 24,
      state: _constants.STATES.error,
      tabIndex: -1
    })
  });
};

var SelectTag = /*#__PURE__*/(0, _react.forwardRef)(function (_ref5, ref) {
  var a11yLabel = _ref5.a11yLabel,
      _ref5$className = _ref5.className,
      className = _ref5$className === void 0 ? '' : _ref5$className,
      error = _ref5.error,
      _ref5$isActive = _ref5.isActive,
      isActive = _ref5$isActive === void 0 ? false : _ref5$isActive,
      _ref5$onClick = _ref5.onClick,
      onClick = _ref5$onClick === void 0 ? noop : _ref5$onClick,
      _ref5$text = _ref5.text,
      text = _ref5$text === void 0 ? '' : _ref5$text,
      _ref5$withTooltip = _ref5.withTooltip,
      withTooltip = _ref5$withTooltip === void 0 ? false : _ref5$withTooltip,
      tooltipProps = _ref5.tooltipProps,
      _ref5$disabled = _ref5.disabled,
      disabled = _ref5$disabled === void 0 ? false : _ref5$disabled,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref5, ["a11yLabel", "className", "error", "isActive", "onClick", "text", "withTooltip", "tooltipProps", "disabled"]);
  var ariaLabelWithText = text ? "toggle menu, " + text + " currently selected" : 'toggle menu';
  var component = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_DropListTogglers.SelectUI, (0, _extends2.default)({
    "aria-label": a11yLabel || ariaLabelWithText,
    "aria-haspopup": "true",
    "aria-expanded": isActive,
    className: (0, _classnames.default)(className, 'SelectTagToggler', error && 'is-error', isActive && 'is-active'),
    "data-cy": "DropList.SelectTagToggler",
    "data-testid": "DropList.SelectTagToggler",
    isActive: isActive,
    disabled: disabled,
    onClick: onClick,
    ref: ref,
    type: "button"
  }, rest, {
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      children: text
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropListTogglers.SelectArrowsUI, {}), error &&
    /*#__PURE__*/
    // avoid list open/close when clicked on error icon
    (0, _jsxRuntime.jsx)(_DropListTogglers.SelectErrorTooltipIconUI, {
      onClick: function onClick(e) {
        return e.stopPropagation();
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ErrorTooltipIcon, {
        error: error
      })
    })]
  }));
  return withTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({
    animationDelay: 0,
    animationDuration: 0,
    placement: "top",
    title: a11yLabel,
    withTriggerWrapper: false
  }, tooltipProps, {
    children: disabled ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      tabIndex: -1,
      children: component
    }) : component
  })) : component;
}); // No need to test every single toggler if they're basically the same as Button

/* istanbul ignore next */

exports.SelectTag = SelectTag;
var MeatButton = /*#__PURE__*/(0, _react.forwardRef)(function (_ref6, ref) {
  var _ref6$a11yLabel = _ref6.a11yLabel,
      a11yLabel = _ref6$a11yLabel === void 0 ? '' : _ref6$a11yLabel,
      _ref6$className = _ref6.className,
      className = _ref6$className === void 0 ? '' : _ref6$className,
      _ref6$isActive = _ref6.isActive,
      isActive = _ref6$isActive === void 0 ? false : _ref6$isActive,
      _ref6$meatIcon = _ref6.meatIcon,
      meatIcon = _ref6$meatIcon === void 0 ? 'kebab' : _ref6$meatIcon,
      _ref6$size = _ref6.size,
      size = _ref6$size === void 0 ? _Button2.SIZE_LG : _ref6$size,
      _ref6$theme = _ref6.theme,
      theme = _ref6$theme === void 0 ? _Button2.THEME_GREY : _ref6$theme,
      _ref6$onClick = _ref6.onClick,
      onClick = _ref6$onClick === void 0 ? noop : _ref6$onClick,
      _ref6$withTooltip = _ref6.withTooltip,
      withTooltip = _ref6$withTooltip === void 0 ? false : _ref6$withTooltip,
      tooltipProps = _ref6.tooltipProps,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref6, ["a11yLabel", "className", "isActive", "meatIcon", "size", "theme", "onClick", "withTooltip", "tooltipProps"]);
  var component = /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropListTogglers.IconButtonUI, (0, _extends2.default)({
    "aria-haspopup": "true",
    "aria-expanded": isActive,
    className: (0, _classnames.default)(className, 'MeatButtonToggler', isActive && 'is-active'),
    "data-cy": "DropList.MeatButtonToggler",
    "data-testid": "DropList.MeatButtonToggler",
    onClick: onClick,
    ref: ref,
    icon: meatIcon,
    title: a11yLabel,
    theme: theme,
    size: size
  }, rest));
  return withTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({
    animationDelay: 0,
    animationDuration: 0,
    placement: "top-end",
    title: a11yLabel,
    withTriggerWrapper: false
  }, tooltipProps, {
    children: component
  })) : component;
}); // No need to test every single toggler if they're basically the same as Button

/* istanbul ignore next */

exports.MeatButton = MeatButton;
var IconBtn = /*#__PURE__*/(0, _react.forwardRef)(function (_ref7, ref) {
  var _ref7$a11yLabel = _ref7.a11yLabel,
      a11yLabel = _ref7$a11yLabel === void 0 ? '' : _ref7$a11yLabel,
      _ref7$className = _ref7.className,
      className = _ref7$className === void 0 ? '' : _ref7$className,
      _ref7$isActive = _ref7.isActive,
      isActive = _ref7$isActive === void 0 ? false : _ref7$isActive,
      _ref7$iconName = _ref7.iconName,
      iconName = _ref7$iconName === void 0 ? 'assign' : _ref7$iconName,
      _ref7$onClick = _ref7.onClick,
      onClick = _ref7$onClick === void 0 ? noop : _ref7$onClick,
      _ref7$withTooltip = _ref7.withTooltip,
      withTooltip = _ref7$withTooltip === void 0 ? false : _ref7$withTooltip,
      tooltipProps = _ref7.tooltipProps,
      _ref7$theme = _ref7.theme,
      theme = _ref7$theme === void 0 ? _Button2.THEME_GREY : _ref7$theme,
      _ref7$size = _ref7.size,
      size = _ref7$size === void 0 ? _Button2.SIZE_LG : _ref7$size,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref7, ["a11yLabel", "className", "isActive", "iconName", "onClick", "withTooltip", "tooltipProps", "theme", "size"]);
  var component = /*#__PURE__*/(0, _jsxRuntime.jsx)(_DropListTogglers.IconButtonUI, (0, _extends2.default)({
    "aria-label": a11yLabel || 'toggle-menu',
    "aria-haspopup": "true",
    "aria-expanded": isActive,
    className: (0, _classnames.default)(className, 'IconButtonToggler', isActive && 'is-active'),
    "data-cy": "DropList.IconButtonToggler",
    "data-testid": "DropList.IconButtonToggler",
    isActive: isActive,
    onClick: onClick,
    icon: iconName,
    ref: ref,
    theme: theme,
    size: size
  }, rest));
  return withTooltip ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, (0, _extends2.default)({
    animationDelay: 0,
    animationDuration: 0,
    placement: "top-end",
    title: a11yLabel,
    withTriggerWrapper: false
  }, tooltipProps, {
    children: component
  })) : component;
}); // No need to test this

/* istanbul ignore next */

exports.IconBtn = IconBtn;

function getTogglerPlacementProps(toggler, _ref8) {
  var placement = _ref8.placement,
      offset = _ref8.offset;

  if (toggler.type === SimpleButton) {
    return {
      placement: placement || 'bottom-end',
      offset: offset || [0, 5]
    };
  }

  if (toggler.type === NavLink) {
    return {
      placement: placement || 'bottom',
      offset: offset || [0, -10]
    };
  }

  if (toggler.type === MeatButton) {
    return {
      placement: placement || 'bottom-end',
      offset: offset || [0, 3]
    };
  }

  if (toggler.type === SplittedButton) {
    return {
      placement: placement || 'bottom-end',
      offset: offset || [0, 5]
    };
  }

  if (toggler.type === IconBtn) {
    return {
      placement: placement || 'bottom-start',
      offset: offset || [-5, 0]
    };
  }

  if (toggler.type === SelectTag) {
    return {
      placement: placement || 'bottom-start',
      offset: offset || [0, 5]
    };
  }

  return {
    placement: placement || 'bottom-start',
    offset: offset || [0, 0]
  };
}