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

Core React components for the NEXT Design System.

import { jsxs, jsx } from "react/jsx-runtime";
import { useMemo } from "react";
import { useDefaultProps, mergeStyles } from "@hitachivantara/uikit-react-utils";
import { theme, getColor } from "@hitachivantara/uikit-styles";
import { fixedForwardRef } from "../types/generic.js";
import { useClasses, getIconSizeStyles, getSizeStyles } from "./Button.styles.js";
import { staticClasses } from "./Button.styles.js";
function parseVariant(variant) {
  if (variant === "semantic") return ["inherit", "ghost"];
  if (variant === "secondary") return ["secondary", "subtle"];
  if (variant === "ghost") return ["primary", "ghost"];
  if (variant === "contained" || variant === "subtle") {
    return ["secondary", variant];
  }
  const result = variant.split(/(?=[A-Z])/);
  if (!result[1]) return [result[0], "contained"];
  return result.map((x) => x.toLowerCase());
}
const HvButton = fixedForwardRef(function HvButton2(props, ref) {
  const {
    classes: classesProp,
    children,
    icon = false,
    variant: variantProp = icon ? "secondaryGhost" : "primary",
    color: colorProp,
    disabled = false,
    className,
    startIcon,
    endIcon,
    size,
    radius,
    overrideIconColors,
    component: Component = "button",
    focusableWhenDisabled,
    onClick: onClickProp,
    onMouseDown: onMouseDownProp,
    selected,
    style,
    ...others
  } = useDefaultProps("HvButton", props);
  const { classes, css, cx } = useClasses(classesProp);
  const [parsedColor, variant] = parseVariant(variantProp);
  const color = colorProp ?? parsedColor;
  const handleClick = (e) => {
    if (disabled) return;
    onClickProp?.(e);
  };
  const handleMouseDown = (e) => {
    if (disabled) return;
    onMouseDownProp?.(e);
  };
  const sizeStyles = useMemo(
    () => size && (icon ? getIconSizeStyles(size) : getSizeStyles(size)),
    [size, icon]
  );
  return /* @__PURE__ */ jsxs(
    Component,
    {
      ref,
      style: mergeStyles(style, {
        "--color": color && getColor(color),
        "--radius": radius && theme.radii[radius],
        "--HvButton-height": sizeStyles?.height ?? "32px"
      }),
      className: cx(
        classes.root,
        classes[variant],
        classes[variantProp],
        // Placed after type and color CSS for DS3 override
        {
          [classes.icon]: icon,
          [classes.disabled]: disabled
        },
        sizeStyles && css(sizeStyles),
        className
      ),
      "data-color": color,
      onClick: handleClick,
      onMouseDown: handleMouseDown,
      ...Component === "button" && { type: "button" },
      ...disabled && {
        disabled: !focusableWhenDisabled,
        tabIndex: focusableWhenDisabled ? 0 : -1,
        "aria-disabled": true
      },
      ...selected != null && { "aria-pressed": selected },
      ...others,
      children: [
        startIcon && /* @__PURE__ */ jsx("span", { className: classes.startIcon, children: startIcon }),
        children,
        endIcon && /* @__PURE__ */ jsx("span", { className: classes.endIcon, children: endIcon })
      ]
    }
  );
});
export {
  HvButton,
  staticClasses as buttonClasses
};