reblend-ui/cjs/DropdownToggle.js

Utilities for creating robust overlay components

"use strict";

exports.__esModule = true;
exports.isRoleMenu = exports.default = void 0;
exports.useDropdownToggle = useDropdownToggle;
var _reblendjs = require("reblendjs");
var _DropdownContext = require("./DropdownContext");
const isRoleMenu = el => el.getAttribute('role')?.toLowerCase() === 'menu';
exports.isRoleMenu = isRoleMenu;
const noop = () => {};

/**
 * Wires up Dropdown toggle functionality, returning a set a props to attach
 * to the element that functions as the dropdown toggle (generally a button).
 *
 * @memberOf Dropdown
 */
function useDropdownToggle(
  /* @Reblend: Transformed from function to class */
) {
  const [dropdownContextValue] = _reblendjs.useContext.bind(this)(_DropdownContext.default, "dropdownContextValue");
  this.state.dropdownContextValue = dropdownContextValue;
  const handleClick = _reblendjs.useCallback.bind(this)(e => {
    this.state.dropdownContextValue?.toggle(!this.state.dropdownContextValue?.show, e);
  });
  this.state.handleClick = handleClick;
  const props = {
    ref: this.state.dropdownContextValue?.setToggle || noop,
    onClick: this.state.handleClick,
    'aria-expanded': !!this.state.dropdownContextValue?.show
  };
  this.state.props = props;
  const meta = {
    show: this.state.dropdownContextValue?.show,
    toggle: this.state.dropdownContextValue?.toggle
  };
  this.state.meta = meta;
  _reblendjs.useEffect.bind(this)(() => {
    if (this.state.dropdownContextValue?.menuElement && isRoleMenu(this.state.dropdownContextValue?.menuElement)) {
      this.state.props['aria-haspopup'] = true;
    }
    this.state.meta.show = this.state.dropdownContextValue?.show;
  });
  return {
    props: this.state.props,
    meta: this.state.meta
  };
}
/**
 * Also exported as `<Dropdown.Toggle>` from `Dropdown`.
 *
 * @displayName DropdownToggle
 * @memberOf Dropdown
 */
class DropdownToggle extends _reblendjs.default {
  static ELEMENT_NAME = "DropdownToggle";
  constructor() {
    super();
  }
  async initState() {
    const dropDownToggle = useDropdownToggle.bind(this)();
    this.state.dropDownToggle = dropDownToggle;
  }
  async initProps({
    children
  }) {
    this.props = {};
    this.props.children = children;
  }
  async html() {
    return _reblendjs.default.construct.bind(this)(_reblendjs.default, null, this.props.children.map(child => child(this.state.dropDownToggle.props, this.state.dropDownToggle.meta)));
  }
}
/* @Reblend: Transformed from function to class */
DropdownToggle.displayName = 'DropdownToggle';

/** @component */
var _default = exports.default = DropdownToggle;