@base-ui-components/react/cjs/checkbox-group/useCheckboxGroupParent.js

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

"use strict";
'use client';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.UseCheckboxGroupParent = void 0;
exports.useCheckboxGroupParent = useCheckboxGroupParent;
var React = _interopRequireWildcard(require("react"));
var _useBaseUiId = require("../utils/useBaseUiId");
var _useEventCallback = require("../utils/useEventCallback");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function useCheckboxGroupParent(params) {
  const {
    allValues = [],
    value = [],
    onValueChange: onValueChangeProp = () => {}
  } = params;
  const uncontrolledStateRef = React.useRef(value);
  const disabledStatesRef = React.useRef(new Map());
  const [status, setStatus] = React.useState('mixed');
  const id = (0, _useBaseUiId.useBaseUiId)();
  const checked = value.length === allValues.length;
  const indeterminate = value.length !== allValues.length && value.length > 0;
  const onValueChange = (0, _useEventCallback.useEventCallback)(onValueChangeProp);
  const getParentProps = React.useCallback(() => ({
    id,
    indeterminate,
    checked,
    'aria-controls': allValues.map(v => `${id}-${v}`).join(' '),
    onCheckedChange(_, event) {
      const uncontrolledState = uncontrolledStateRef.current;

      // None except the disabled ones that are checked, which can't be changed.
      const none = allValues.filter(v => disabledStatesRef.current.get(v) && uncontrolledState.includes(v));
      // "All" that are valid:
      // - any that aren't disabled
      // - disabled ones that are checked
      const all = allValues.filter(v => !disabledStatesRef.current.get(v) || disabledStatesRef.current.get(v) && uncontrolledState.includes(v));
      const allOnOrOff = uncontrolledState.length === all.length || uncontrolledState.length === 0;
      if (allOnOrOff) {
        if (value.length === all.length) {
          onValueChange(none, event);
        } else {
          onValueChange(all, event);
        }
        return;
      }
      if (status === 'mixed') {
        onValueChange(all, event);
        setStatus('on');
      } else if (status === 'on') {
        onValueChange(none, event);
        setStatus('off');
      } else if (status === 'off') {
        onValueChange(uncontrolledState, event);
        setStatus('mixed');
      }
    }
  }), [allValues, checked, id, indeterminate, onValueChange, status, value.length]);
  const getChildProps = React.useCallback(name => ({
    name,
    id: `${id}-${name}`,
    checked: value.includes(name),
    onCheckedChange(nextChecked, event) {
      const newValue = [...value];
      if (nextChecked) {
        newValue.push(name);
      } else {
        newValue.splice(newValue.indexOf(name), 1);
      }
      uncontrolledStateRef.current = newValue;
      onValueChange(newValue, event);
      setStatus('mixed');
    }
  }), [id, onValueChange, value]);
  return React.useMemo(() => ({
    id,
    indeterminate,
    getParentProps,
    getChildProps,
    disabledStatesRef
  }), [id, indeterminate, getParentProps, getChildProps]);
}
let UseCheckboxGroupParent = exports.UseCheckboxGroupParent = void 0;