Item

Prop	Required	Default	Type	Descripton
children	✅		ReactNode	Any valid node which can be rendered
data			any	Passed to the Item onClick callback.Accessible via data
onClick			ItemHandler	Callback when the current Item is clicked
disabled		false	BooleanPredicate	Disable Item. If a function is used, a boolean must be returned
hidden		false	BooleanPredicate	Hide Item. If a function is used, a boolean must be returned
any HTML Attribute			HTMLAttribute	Any valid HTML attribute

ItemHandler

interface ItemParams<Props = any, Data = any> {
  /**
   * Any props supplied when triggering the menu
   */
  props?: Props;

  /**
   * Data object provided to item
   */
  data?: Data;

  /**
   * The event that occured on the Item node
   */
  event: DomEvent;

  /**
   * The event that triggered the context menu
   */
  triggerEvent: DomEvent;
}

function handleItemClick({ 
  triggerEvent,
  event,
  props,
  data 
  }: ItemParams<type of props, type of data>
  ){
  // retrieve the id of the Item or any other dom attribute
  const id = e.currentTarget.id; // equal to "item-id"
   
  // access the props and the data
  console.log(props, data);
   
  // access the coordinate of the mouse when the menu has been displayed
  const {  clientX, clientY } = triggerEvent;   
}
   
<Item 
  id="item-id"
  onClick={handleItemClick}
  data={{key: 'value'}}
>
  Something
</Item>

BooleanPredicate

interface HandlerParams<Props = any, Data = any> {
  /**
   * The event that triggered the context menu
   */
  triggerEvent: DomEvent;

  /**
   * Any props supplied when triggering the menu
   */
  props?: Props;

  /**
   * Data object provided to item
   */
  data?: Data;
}

type BooleanPredicate = boolean | ((args: HandlerParams) => boolean);


<Item disabled={true}>An item</Item>

function isItemDisabled({ 
  triggerEvent,
  props,
  data
  }: PredicateParams<type of props, type of data>){
  return boolean;
}

<Item disabled={isItemDisabled} data={data}>item content</Item>

<Item hidden={true}>hidden</Item>

function isItemHidden({ 
  triggerEvent,
  props,
  data
  }: PredicateParams<type of props, type of data>){
  return boolean;
}

<Item hidden={isItemHidden}>hidden</Item>

HTMLAttribute

<Item 
  id="anId"
  data-test="item-1"
  className="a-css-class"
  style={{ color: "purple" }}
>
  Item 1
</Item>