@hitachivantara/uikit-react-core/dist/cjs/CheckBoxGroup/CheckBoxGroup.cjs

Core React components for the NEXT Design System.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const LabelContainer = require("../FormElement/LabelContainer.cjs");
const useControlled = require("../hooks/useControlled.cjs");
const useUniqueId = require("../hooks/useUniqueId.cjs");
const CounterLabel = require("../utils/CounterLabel.cjs");
const multiSelectionEventHandler = require("../utils/multiSelectionEventHandler.cjs");
const setId = require("../utils/setId.cjs");
const CheckBoxGroup_styles = require("./CheckBoxGroup.styles.cjs");
const FormElement = require("../FormElement/FormElement.cjs");
const CheckBox = require("../CheckBox/CheckBox.cjs");
const WarningText = require("../FormElement/WarningText/WarningText.cjs");
const computeSelectAllState = (selected, total) => {
  if (selected === 0) {
    return "none";
  }
  if (selected === total) {
    return "all";
  }
  return "some";
};
const getValueFromSelectedChildren = (children) => {
  const selectedValues = React.Children.toArray(children).map((child) => {
    const childIsControlled = child?.props?.checked !== void 0;
    const childIsSelected = childIsControlled ? child?.props?.checked : child?.props?.defaultChecked;
    return childIsSelected ? child?.props?.value : void 0;
  }).filter((v) => v !== void 0);
  return selectedValues;
};
const HvCheckBoxGroup = React.forwardRef(
  function HvCheckBoxGroup2(props, ref) {
    const {
      id,
      classes: classesProp,
      className,
      children,
      name,
      label,
      description,
      status,
      statusMessage,
      defaultValue,
      value: valueProp,
      required,
      readOnly,
      disabled,
      showSelectAll,
      orientation = "vertical",
      selectAllConjunctionLabel = "/",
      "aria-label": ariaLabel,
      "aria-labelledby": ariaLabelledBy,
      "aria-describedby": ariaDescribedBy,
      "aria-errormessage": ariaErrorMessage,
      onChange,
      ...others
    } = uikitReactUtils.useDefaultProps("HvCheckBoxGroup", props);
    const { classes, cx } = CheckBoxGroup_styles.useClasses(classesProp);
    const [value, setValue] = useControlled.useControlled(
      valueProp,
      defaultValue !== void 0 ? defaultValue : (
        // When uncontrolled and no default value is given,
        // extract the initial selected values from the children own state
        () => getValueFromSelectedChildren(children)
      )
    );
    const [validationState, setValidationState] = useControlled.useControlled(
      status,
      "standBy"
    );
    const [validationMessage] = useControlled.useControlled(statusMessage, "Required");
    const elementId = useUniqueId.useUniqueId(id);
    const selectionAnchor = React.useRef(void 0);
    const [allValues, selectedState, selectedCount] = React.useMemo(() => {
      const childValues = [];
      const childSelectedState = [];
      let childSelectedCounter = 0;
      React.Children.toArray(children).forEach((child, i) => {
        const childValue = child?.props?.value;
        const childIsSelected = value.indexOf(childValue) !== -1;
        childValues[i] = childValue;
        childSelectedState[i] = childIsSelected;
        if (childIsSelected) {
          childSelectedCounter += 1;
        }
      });
      return [childValues, childSelectedState, childSelectedCounter];
    }, [children, value]);
    const selectAllState = computeSelectAllState(
      value.length,
      selectedState.length
    );
    const onChildChangeInterceptor = React.useCallback(
      (index, childOnChange, event, isChecked) => {
        const newValue = multiSelectionEventHandler.multiSelectionEventHandler(
          event,
          index,
          selectionAnchor,
          allValues,
          selectedState,
          isChecked
        );
        childOnChange?.(event, isChecked);
        onChange?.(event, newValue);
        setValue(() => {
          if (required && newValue.length === 0) {
            setValidationState("invalid");
          } else {
            setValidationState("valid");
          }
          return newValue;
        });
      },
      [
        allValues,
        onChange,
        required,
        selectedState,
        setValidationState,
        setValue
      ]
    );
    const modifiedChildren = React.useMemo(() => {
      return React.Children.map(children, (child, i) => {
        const childIsSelected = selectedState[i];
        return React.cloneElement(child, {
          checked: childIsSelected,
          name: child?.props?.name || name,
          onChange: (event, isChecked) => onChildChangeInterceptor(
            i,
            child?.props?.onChange,
            event,
            isChecked
          ),
          disabled: disabled || child?.props?.disabled,
          readOnly: readOnly || child?.props?.readOnly
        });
      });
    }, [
      children,
      disabled,
      name,
      onChildChangeInterceptor,
      readOnly,
      selectedState
    ]);
    const handleSelectAll = (event, selectAllChecked) => {
      let newValue;
      if (selectAllState === "some") {
        newValue = [];
      } else if (selectAllChecked) {
        newValue = [...allValues];
      } else {
        newValue = [];
      }
      onChange?.(event, newValue);
      setValue(() => {
        if (required && newValue.length === 0) {
          setValidationState("invalid");
        } else {
          setValidationState("valid");
        }
        return newValue;
      });
    };
    const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && required);
    const errorMessageId = canShowError ? setId.setId(elementId, "error") : ariaErrorMessage;
    return /* @__PURE__ */ jsxRuntime.jsxs(
      FormElement.HvFormElement,
      {
        id,
        name,
        status: validationState,
        disabled,
        required,
        readOnly,
        className: cx(classes.root, className),
        children: [
          /* @__PURE__ */ jsxRuntime.jsx(
            LabelContainer.HvLabelContainer,
            {
              label,
              description,
              labelId: setId.setId(elementId, "label"),
              descriptionId: setId.setId(elementId, "description"),
              classes: {
                label: classes.label
              }
            }
          ),
          /* @__PURE__ */ jsxRuntime.jsxs(
            "div",
            {
              ref,
              role: "group",
              "aria-label": ariaLabel,
              "aria-labelledby": ariaLabelledBy || label && setId.setId(elementId, "label") || void 0,
              "aria-disabled": disabled ? true : void 0,
              "aria-invalid": validationState === "invalid" ? true : void 0,
              "aria-errormessage": validationState === "invalid" ? errorMessageId : void 0,
              "aria-describedby": [description && setId.setId(elementId, "description"), ariaDescribedBy].join(" ").trim() || void 0,
              className: cx(classes.group, {
                [classes.vertical]: orientation === "vertical",
                [classes.horizontal]: orientation === "horizontal",
                [classes.invalid]: validationState === "invalid"
              }),
              ...others,
              children: [
                showSelectAll && /* @__PURE__ */ jsxRuntime.jsx(
                  CheckBox.HvCheckBox,
                  {
                    checked: selectAllState === "all",
                    indeterminate: selectAllState === "some",
                    label: /* @__PURE__ */ jsxRuntime.jsx(
                      CounterLabel.CounterLabel,
                      {
                        selected: selectedCount,
                        total: React.Children.count(children),
                        conjunctionLabel: selectAllConjunctionLabel
                      }
                    ),
                    disabled,
                    readOnly,
                    className: classes.selectAll,
                    onChange: handleSelectAll
                  }
                ),
                modifiedChildren
              ]
            }
          ),
          canShowError && /* @__PURE__ */ jsxRuntime.jsx(
            WarningText.HvWarningText,
            {
              id: setId.setId(elementId, "error"),
              disableBorder: true,
              className: classes.error,
              children: validationMessage
            }
          )
        ]
      }
    );
  }
);
exports.checkBoxGroupClasses = CheckBoxGroup_styles.staticClasses;
exports.HvCheckBoxGroup = HvCheckBoxGroup;