@hitachivantara/uikit-react-core/dist/esm/ActionsGeneric/ActionsGeneric.js

Core React components for the NEXT Design System.

import { jsx, jsxs, Fragment } from "react/jsx-runtime";
import { forwardRef, isValidElement } from "react";
import { useDefaultProps } from "@hitachivantara/uikit-react-utils";
import { HvIcon } from "../icons.js";
import { setId } from "../utils/setId.js";
import { useClasses } from "./ActionsGeneric.styles.js";
import { staticClasses } from "./ActionsGeneric.styles.js";
import { HvDropDownMenu } from "../DropDownMenu/DropDownMenu.js";
import { HvIconButton } from "../IconButton/IconButton.js";
import { HvButton } from "../Button/Button.js";
const HvActionsGeneric = forwardRef(function HvActionsGeneric2(props, ref) {
  const {
    id: idProp,
    classes: classesProp,
    className,
    category = "secondaryGhost",
    // TODO - remove and update variant default in v6
    variant: variantProp,
    disabled = false,
    actions = [],
    actionsCallback,
    // TODO - remove in v6
    onAction,
    maxVisibleActions = Infinity,
    iconOnly: iconOnlyProp,
    dropdownMenuProps: dropdownMenuPropsProp,
    ...others
  } = useDefaultProps("HvActionsGeneric", props);
  const { onClick: onClickDropdownMenu, ...dropdownMenuProps } = dropdownMenuPropsProp || {};
  const variant = variantProp || category;
  const { classes, cx } = useClasses(classesProp);
  const handleCallback = (event, id, action) => {
    actionsCallback?.(event, id, action);
    onAction?.(event, action);
  };
  if (!Array.isArray(actions)) return isValidElement(actions) ? actions : null;
  const renderButton = (action, idx) => {
    const {
      disabled: actDisabled,
      id: actId,
      icon,
      label,
      iconOnly,
      ...other
    } = action;
    const actionId = setId(idProp, idx, "action", action.id);
    const renderedIcon = isValidElement(icon) ? icon : icon?.({ isDisabled: disabled });
    const commonButtonProps = {
      id: actionId,
      variant,
      className: classes.button,
      disabled: actDisabled ?? disabled,
      onClick: (event) => handleCallback(event, idProp || "", action),
      ...other
    };
    const key = actionId || idx;
    const isIcon = iconOnly ?? iconOnlyProp;
    if (isIcon) {
      return /* @__PURE__ */ jsx(HvIconButton, { ...commonButtonProps, title: label, children: renderedIcon }, key);
    }
    return /* @__PURE__ */ jsx(HvButton, { ...commonButtonProps, startIcon: renderedIcon, children: label }, key);
  };
  const renderActionsGrid = () => {
    const actsVisible = actions.slice(0, maxVisibleActions);
    const actsDropdown = actions.slice(maxVisibleActions);
    const iconColor = variant === "semantic" && "textDark" || void 0;
    return /* @__PURE__ */ jsxs(Fragment, { children: [
      actsVisible.map((action, idx) => renderButton(action, idx)),
      /* @__PURE__ */ jsx(
        HvDropDownMenu,
        {
          id: setId(idProp, "menu"),
          disabled,
          variant,
          classes: {
            root: classes.dropDownMenu,
            icon: classes.dropDownMenuButton,
            iconSelected: classes.dropDownMenuButtonSelected
          },
          icon: /* @__PURE__ */ jsx(HvIcon, { name: "DotsVertical", color: iconColor }),
          placement: "left",
          onClick: (event, action) => {
            handleCallback(event, idProp || "", action);
            onClickDropdownMenu?.(event, action);
          },
          dataList: actsDropdown,
          keepOpened: false,
          disablePortal: false,
          ...dropdownMenuProps
        }
      )
    ] });
  };
  const actionOverflow = actions.length > maxVisibleActions;
  return /* @__PURE__ */ jsx(
    "div",
    {
      ref,
      className: cx(
        classes.root,
        { [classes.actionContainer]: actionOverflow },
        className
      ),
      ...others,
      children: actionOverflow ? renderActionsGrid() : actions.map((action, idx) => renderButton(action, idx))
    }
  );
});
export {
  HvActionsGeneric,
  staticClasses as actionsGenericClasses
};