@hitachivantara/uikit-react-lab/dist/esm/Blades/Blades.js

Contributed React components for the NEXT UI Kit.

import { jsx } from "react/jsx-runtime";
import { useCallback, useMemo, Children, cloneElement } from "react";
import { useDefaultProps, useControlled } from "@hitachivantara/uikit-react-core";
import { useClasses } from "./Blades.styles.js";
import { staticClasses } from "./Blades.styles.js";
function getExpandedBlades(defaultExpanded, children, atMostOneExpanded, atLeastOneExpanded) {
  const childrenArray = Children.toArray(children);
  const expandedBlades = defaultExpanded ?? childrenArray.map((child, i) => {
    const childIsControlled = child?.props?.expanded !== void 0;
    const childIsExpanded = childIsControlled ? child?.props?.expanded : child?.props?.defaultExpanded;
    return childIsExpanded ? i : void 0;
  }).filter((v) => v !== void 0);
  const numberOfExpandedBlades = expandedBlades.length;
  if (atLeastOneExpanded && numberOfExpandedBlades === 0 && childrenArray.length > 0) {
    return [0];
  }
  if (atMostOneExpanded && numberOfExpandedBlades > 1) {
    return [expandedBlades[0]];
  }
  return expandedBlades;
}
const HvBlades = (props) => {
  const {
    id,
    className,
    classes: classesProp,
    children,
    expanded: expandedProp,
    defaultExpanded,
    atMostOneExpanded = false,
    atLeastOneExpanded = false,
    fullWidthBlades = false,
    onChange,
    ...others
  } = useDefaultProps("HvBlades", props);
  const { classes, cx } = useClasses(classesProp);
  const [expanded, setExpanded] = useControlled(
    expandedProp,
    () => getExpandedBlades(
      defaultExpanded,
      children,
      atMostOneExpanded,
      atLeastOneExpanded
    )
  );
  const onChildChangeInterceptor = useCallback(
    (index, childOnChange, event, isExpanded) => {
      const newValue = [];
      if (atMostOneExpanded) {
        if (isExpanded) {
          newValue.push(index);
        }
      } else {
        newValue.push(...expanded);
        if (isExpanded) {
          newValue.push(index);
        } else {
          newValue.splice(newValue.indexOf(index), 1);
        }
      }
      if (atLeastOneExpanded && newValue.length === 0) {
        newValue.push(index);
      }
      childOnChange?.(event, isExpanded);
      onChange?.(event, newValue);
      setExpanded(newValue);
    },
    [onChange, expanded, setExpanded, atMostOneExpanded, atLeastOneExpanded]
  );
  const modifiedChildren = useMemo(() => {
    return Children.map(children, (child, i) => {
      const childIsExpanded = expanded.includes(i);
      return cloneElement(child, {
        expanded: childIsExpanded,
        fullWidth: child?.props?.fullWidth ?? fullWidthBlades,
        buttonProps: {
          ...child?.props?.buttonProps,
          "aria-disabled": (
            // If the accordion panel associated with an accordion header is visible,
            // and if the accordion does not permit the panel to be collapsed, the header
            // button element has aria-disabled set to true.
            child?.props?.disabled || childIsExpanded && atMostOneExpanded && expanded.length === 1 ? true : void 0
          )
        },
        onChange: (event, isExpanded) => onChildChangeInterceptor(
          i,
          child?.props?.onChange,
          event,
          isExpanded
        )
      });
    });
  }, [
    children,
    expanded,
    fullWidthBlades,
    atMostOneExpanded,
    onChildChangeInterceptor
  ]);
  return /* @__PURE__ */ jsx("div", { id, className: cx(classes.root, className), ...others, children: modifiedChildren });
};
export {
  HvBlades,
  staticClasses as bladesClasses
};