@hitachivantara/uikit-react-lab/dist/cjs/Blade/Blade.cjs

Contributed React components for the NEXT UI Kit.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const react = require("react");
const uikitReactCore = require("@hitachivantara/uikit-react-core");
const Blade_styles = require("./Blade.styles.cjs");
const HvBlade = (props) => {
  const {
    id: idProp,
    className,
    classes: classesProp,
    expanded,
    defaultExpanded = false,
    label,
    labelVariant = "label",
    headingLevel,
    onChange,
    disabled = false,
    children,
    fullWidth,
    buttonProps,
    containerProps,
    ...others
  } = uikitReactCore.useDefaultProps("HvBlade", props);
  const { classes, cx } = Blade_styles.useClasses(classesProp);
  const [isExpanded, setIsExpanded] = uikitReactCore.useControlled(
    expanded,
    Boolean(defaultExpanded)
  );
  const handleAction = react.useCallback(
    (event) => {
      if (!disabled) {
        onChange?.(event, !isExpanded);
        setIsExpanded(!isExpanded);
        return true;
      }
      return false;
    },
    [disabled, onChange, isExpanded, setIsExpanded]
  );
  const handleClick = react.useCallback(
    (event) => {
      handleAction(event);
      event.preventDefault();
      event.stopPropagation();
    },
    [handleAction]
  );
  const handleKeyDown = react.useCallback(
    (event) => {
      let isEventHandled = false;
      const { key } = event;
      if (event.altKey || event.ctrlKey || event.metaKey || event.currentTarget !== event.target) {
        return;
      }
      switch (key) {
        case "Enter":
        case " ":
          isEventHandled = handleAction(event);
          break;
        default:
          return;
      }
      if (isEventHandled) {
        event.preventDefault();
        event.stopPropagation();
      }
    },
    [handleAction]
  );
  const id = uikitReactCore.useUniqueId(idProp);
  const bladeHeaderId = uikitReactCore.setId(id, "button");
  const bladeContainerId = uikitReactCore.setId(id, "container");
  const bladeHeader = react.useMemo(() => {
    const buttonLabel = typeof label === "function" ? label(isExpanded) : label;
    const bladeButton = /* @__PURE__ */ jsxRuntime.jsx(
      uikitReactCore.HvTypography,
      {
        id: bladeHeaderId,
        component: "div",
        role: "button",
        className: cx(classes.button, {
          [classes.textOnlyLabel]: typeof buttonLabel === "string",
          [classes.disabled]: disabled
        }),
        style: { flexShrink: headingLevel === void 0 ? 0 : void 0 },
        disabled,
        tabIndex: 0,
        onKeyDown: handleKeyDown,
        onClick: handleClick,
        variant: labelVariant,
        "aria-expanded": isExpanded,
        "aria-controls": bladeContainerId,
        ...buttonProps,
        children: buttonLabel
      }
    );
    return headingLevel === void 0 ? bladeButton : /* @__PURE__ */ jsxRuntime.jsx(
      uikitReactCore.HvTypography,
      {
        component: `h${headingLevel}`,
        variant: labelVariant,
        className: classes.heading,
        style: { flexShrink: 0 },
        children: bladeButton
      }
    );
  }, [
    bladeContainerId,
    bladeHeaderId,
    buttonProps,
    classes.button,
    classes.disabled,
    classes.heading,
    classes.textOnlyLabel,
    cx,
    disabled,
    handleClick,
    handleKeyDown,
    headingLevel,
    isExpanded,
    label,
    labelVariant
  ]);
  const bladeRef = react.useRef(null);
  const [maxWidth, setMaxWidth] = react.useState(void 0);
  react.useEffect(() => {
    if (!bladeRef.current) return;
    const resizeObserver = new ResizeObserver((entries) => {
      setMaxWidth(entries[0].target.clientWidth);
    });
    resizeObserver.observe(
      // using the blade's container as reference max-width is more stable
      bladeRef.current.parentElement ?? bladeRef.current
    );
    return () => {
      resizeObserver.disconnect();
    };
  }, [isExpanded]);
  const { style: containerStyle, ...otherContainerProps } = containerProps || {};
  return /* @__PURE__ */ jsxRuntime.jsxs(
    "div",
    {
      ref: bladeRef,
      id: idProp,
      className: cx(classes.root, className, {
        [classes.fullWidth]: fullWidth,
        [classes.expanded]: isExpanded
      }),
      ...others,
      children: [
        bladeHeader,
        /* @__PURE__ */ jsxRuntime.jsx(
          "div",
          {
            id: bladeContainerId,
            role: "region",
            "aria-labelledby": bladeHeaderId,
            className: classes.container,
            hidden: !isExpanded,
            style: {
              ...containerStyle,
              maxWidth: isExpanded ? maxWidth : 0
            },
            ...otherContainerProps,
            children
          }
        )
      ]
    }
  );
};
exports.bladeClasses = Blade_styles.staticClasses;
exports.HvBlade = HvBlade;