@pantheon-systems/design-toolkit-react/dist/__pds/SplitButton/SplitButton.js

Pantheon's React Design Toolkit

import PropTypes from 'prop-types';
import MenuButton from '../MenuButton/MenuButton.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import Button from '../Button/Button.js';

var SplitButton = function SplitButton(_ref) {
  var actionItems = _ref.actionItems,
    disabled = _ref.disabled,
    variant = _ref.variant;
  // store the first item as the primary action
  var primaryAction = actionItems[0];

  // Render the output
  return /*#__PURE__*/jsxs("span", {
    className: "pds-split-button pds-split-button--".concat(variant),
    children: [/*#__PURE__*/jsx(Button, {
      "aria-disabled": disabled ? true : undefined,
      className: "pds-split-button__primary-action",
      disabled: disabled,
      label: primaryAction.label,
      onClick: function onClick() {
        return primaryAction.callback(primaryAction);
      },
      variant: variant
    }), /*#__PURE__*/jsx(MenuButton, {
      "aria-disabled": disabled ? true : undefined,
      className: "pds-split-button__menu-button",
      disabled: disabled,
      listboxPositionInitial: "bottom-end",
      menuItems: actionItems,
      variant: variant
    })]
  });
};

//
// Prop types

var ActionItemType = PropTypes.exact({
  /**
   * Label for a menu item
   */
  label: PropTypes.string.isRequired,
  /**
   * Callback function to execute when menu item is clicked/tapped/activated
   */
  callback: PropTypes.func.isRequired
});

//
// Component propType definitions
SplitButton.propTypes = {
  /**
   * Array of menu items
   */
  actionItems: PropTypes.arrayOf(ActionItemType).isRequired,
  /**
   * Is the button disabled?
   */
  disabled: PropTypes.bool,
  /**
   * Button style variant.
   */
  variant: PropTypes.oneOf(['primary', 'secondary'])
};
SplitButton.defaultProps = {
  disabled: false,
  variant: 'secondary'
};

//
var SplitButton$1 = SplitButton;

export { SplitButton$1 as default };
//# sourceMappingURL=SplitButton.js.map