@adaptui/react/dist/esm/accordion/accordion-state.js

Collection of headless components/hooks that are accessible, composable, customizable from low level to build your own UI & Design System powered by Reakit

var _excluded = ["orientation", "focusLoop", "selectOnMove", "shouldSelectFirstId", "allowMultiple", "allowToggle"];

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

import { useCallback, useEffect, useMemo, useRef } from "react";
import { useCollectionState } from "ariakit/collection/collection-state";
import { useCompositeState } from "ariakit/composite/composite-state";
import { useControlledState, useLiveRef } from "ariakit-utils/hooks";
import { useStorePublisher } from "ariakit-utils/store";

function findEnabledAccordionById(items, id) {
  return items.find(item => item.id === id && !item.disabled && !item.dimmed);
}

function findFirstEnabledAccordion(items) {
  return items.find(item => !item.disabled && !item.dimmed);
}
/**
 * Provides state for the `Accordion` components.
 * @example
 * ```jsx
 * const accordion = useAccordionState();
 * <Accordion state={accordion}>
 *   <AccordionDisclosure>Accordion 1</AccordionDisclosure>
 *   <AccordionPanel>Panel 1</AccordionPanel>
 *   <AccordionDisclosure>Accordion 2</AccordionDisclosure>
 *   <AccordionPanel>Panel 2</AccordionPanel>
 * </Accordion>
 * ```
 */


export function useAccordionState() {
  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      {
    orientation = "vertical",
    focusLoop = true,
    selectOnMove = false,
    shouldSelectFirstId = false,
    allowMultiple = false,
    allowToggle = allowMultiple || false
  } = _ref,
      props = _objectWithoutProperties(_ref, _excluded);

  var [selectedId, setSelectedId] = useControlledState(props.defaultSelectedId, props.selectedId, props.setSelectedId);
  var composite = useCompositeState(_objectSpread({
    orientation,
    focusLoop
  }, props));
  var panels = useCollectionState();
  var compositeRef = useLiveRef(composite);
  var firstEnabledAccordionSelected = useRef(false);
  var select = useCallback(id => {
    // Runs when the accordion has `allowMultiple` - `false`
    if (!allowMultiple || id == null) {
      setSelectedId(id);
      return;
    } // Runs when the accordion has `allowMultiple` - `true`


    setSelectedId([id]);
  }, [allowMultiple, setSelectedId]); // Automatically set selectedId if it's undefined.

  useEffect(() => {
    if (!shouldSelectFirstId) return;
    if (allowToggle) return;
    if (selectedId !== undefined) return; // First, we try to set selectedId based on the current active accordion.

    var activeId = compositeRef.current.activeId;
    if (!activeId) return;
    var accordion = findEnabledAccordionById(composite.items, activeId);

    if (!accordion) {
      // If there's no active accordion or the active accordion is dimmed, we get the first
      // enabled accordion instead.
      var firstEnabledAccordion = findFirstEnabledAccordion(composite.items);
      if (!firstEnabledAccordion) return;
      select(firstEnabledAccordion === null || firstEnabledAccordion === void 0 ? void 0 : firstEnabledAccordion.id);
      return;
    }

    select(activeId); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [allowToggle, shouldSelectFirstId, selectedId, composite.items, allowMultiple, setSelectedId]); // Automatically set selectedId if it's undefined.

  useEffect(() => {
    if (!shouldSelectFirstId || !allowToggle) return;
    if (firstEnabledAccordionSelected.current === true) return; // First, we try to set selectedId based on the current active accordion.

    var activeId = compositeRef.current.activeId;
    if (!activeId) return;
    var accordion = findEnabledAccordionById(composite.items, activeId);

    if (!accordion) {
      // If there's no active accordion or the active accordion is dimmed, we get the first
      // enabled accordion instead.
      var firstEnabledAccordion = findFirstEnabledAccordion(composite.items);
      if (!firstEnabledAccordion) return;
      select(firstEnabledAccordion === null || firstEnabledAccordion === void 0 ? void 0 : firstEnabledAccordion.id);
      return;
    }

    firstEnabledAccordionSelected.current = true;
    select(activeId); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [allowToggle, shouldSelectFirstId, selectedId, composite.items, setSelectedId, allowMultiple, select]); // Keep panels accordionIds in sync with the current accordions.

  useEffect(() => {
    if (!composite.items.length) return;
    panels.setItems(prevPanels => {
      var hasOrphanPanels = prevPanels.some(panel => !panel.accordionId);
      if (!hasOrphanPanels) return prevPanels;
      return prevPanels.map((panel, i) => {
        if (panel.accordionId) return panel;
        var accordion = composite.items[i];
        return _objectSpread(_objectSpread({}, panel), {}, {
          accordionId: accordion === null || accordion === void 0 ? void 0 : accordion.id
        });
      });
    }); // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [composite.items, panels.setItems]);
  var toggle = useCallback(id => {
    // If the accordion is already selected, we unselect it.
    if (allowToggle && id === selectedId) {
      setSelectedId(undefined);
      return;
    } // If the accordion is toggled, we move the composite accordingly.


    composite.move(id); // Runs when the accordion has `allowMultiple` - `false`
    // and the `id` is `null`.

    if (!allowMultiple || id == null) {
      setSelectedId(id);
      return;
    } // Runs when the accordion has `allowMultiple` - `true`


    if (selectedId !== null && selectedId !== void 0 && selectedId.includes(id)) {
      setSelectedId(prevId => prevId === null || prevId === void 0 ? void 0 : prevId.filter(pId => pId !== id));
      return;
    }

    setSelectedId(prevId => {
      if (prevId == null) return [id];
      return [...prevId, id];
    });
  }, // eslint-disable-next-line react-hooks/exhaustive-deps
  [allowToggle, selectedId, setSelectedId, composite.move, allowMultiple]);
  var state = useMemo(() => _objectSpread(_objectSpread({}, composite), {}, {
    allowToggle,
    allowMultiple,
    selectedId,
    setSelectedId,
    toggle,
    panels,
    selectOnMove
  }), [composite, allowToggle, allowMultiple, selectedId, setSelectedId, toggle, panels, selectOnMove]);
  return useStorePublisher(state);
}
//# sourceMappingURL=accordion-state.js.map