@chayns-components/core/lib/esm/components/list/List.js

A set of beautiful React components for developing your own applications with chayns.

import { c as _c } from "react-compiler-runtime";
import { AnimatePresence, MotionConfig } from 'motion/react';
import React, { useCallback, useMemo, useState } from 'react';
import { useColorScheme } from '../color-scheme-provider/ColorSchemeProvider';
import { useUuid } from '../../hooks/uuid';
import { shouldShowExpandIndicator } from './List.utils';
export const ListContext = /*#__PURE__*/React.createContext({
  isAnyItemExpandable: false,
  isWrapped: false,
  openItemUuid: undefined,
  updateOpenItemUuid: () => {},
  shouldEnableKeyboardHighlighting: false,
  listGroupUuid: undefined,
  listItemUuids: undefined,
  registerListItemUuid: undefined,
  unregisterListItemUuid: undefined,
  activeListItemUuid: undefined,
  updateActiveListItemUuid: undefined
});
ListContext.displayName = 'ListContext';
const List = t0 => {
  "use memo";

  const $ = _c(24);
  const {
    children,
    isWrapped: t1,
    shouldEnableKeyboardHighlighting
  } = t0;
  const isWrapped = t1 === undefined ? false : t1;
  const colorScheme = useColorScheme();
  const shouldEnableKeyboardHighlightingEffective = shouldEnableKeyboardHighlighting ?? colorScheme?.shouldEnableKeyboardHighlighting ?? false;
  const [openItemUuid, setOpenItemUuid] = useState(undefined);
  const [listItemUuids, setListItemUuids] = useState();
  const [activeListItemUuid, setActiveListItemUuid] = useState(undefined);
  const listGroupUuid = useUuid();
  let t2;
  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
    t2 = (uuid, t3) => {
      const {
        shouldOnlyOpen
      } = t3 === undefined ? {} : t3;
      setOpenItemUuid(currentOpenItemUuid => {
        if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {
          return;
        }
        return uuid;
      });
    };
    $[0] = t2;
  } else {
    t2 = $[0];
  }
  const updateOpenItemUuid = t2;
  let t3;
  if ($[1] !== listGroupUuid) {
    t3 = uuids => {
      if (typeof document === "undefined") {
        return uuids;
      }
      const domOrderedUuids = Array.from(document.querySelectorAll(`[data-uuid^="${listGroupUuid}---"]`)).map(_temp).filter(_temp2);
      return domOrderedUuids.filter(uuid_1 => uuids.includes(uuid_1));
    };
    $[1] = listGroupUuid;
    $[2] = t3;
  } else {
    t3 = $[2];
  }
  const sortListItemUuidsByDom = t3;
  let t4;
  if ($[3] !== sortListItemUuidsByDom) {
    t4 = uuid_2 => {
      setListItemUuids(t5 => {
        const currentListItemUuids = t5 === undefined ? [] : t5;
        const nextListItemUuids = currentListItemUuids.includes(uuid_2) ? currentListItemUuids : [...currentListItemUuids, uuid_2];
        return sortListItemUuidsByDom(nextListItemUuids);
      });
    };
    $[3] = sortListItemUuidsByDom;
    $[4] = t4;
  } else {
    t4 = $[4];
  }
  const registerListItemUuid = t4;
  let t5;
  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
    t5 = uuid_3 => {
      setListItemUuids(t6 => {
        const currentListItemUuids_0 = t6 === undefined ? [] : t6;
        return currentListItemUuids_0.filter(currentUuid => currentUuid !== uuid_3);
      });
    };
    $[5] = t5;
  } else {
    t5 = $[5];
  }
  const unregisterListItemUuid = t5;
  let t6;
  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
    t6 = uuid_4 => {
      setActiveListItemUuid(uuid_4);
    };
    $[6] = t6;
  } else {
    t6 = $[6];
  }
  const updateActiveListItemUuid = t6;
  let t7;
  if ($[7] !== children) {
    t7 = shouldShowExpandIndicator(children);
    $[7] = children;
    $[8] = t7;
  } else {
    t7 = $[8];
  }
  let t8;
  if ($[9] !== activeListItemUuid || $[10] !== isWrapped || $[11] !== listGroupUuid || $[12] !== listItemUuids || $[13] !== openItemUuid || $[14] !== registerListItemUuid || $[15] !== shouldEnableKeyboardHighlightingEffective || $[16] !== t7) {
    t8 = {
      isAnyItemExpandable: t7,
      isWrapped,
      openItemUuid,
      updateOpenItemUuid,
      shouldEnableKeyboardHighlighting: shouldEnableKeyboardHighlightingEffective,
      listGroupUuid,
      listItemUuids,
      registerListItemUuid,
      unregisterListItemUuid,
      activeListItemUuid,
      updateActiveListItemUuid
    };
    $[9] = activeListItemUuid;
    $[10] = isWrapped;
    $[11] = listGroupUuid;
    $[12] = listItemUuids;
    $[13] = openItemUuid;
    $[14] = registerListItemUuid;
    $[15] = shouldEnableKeyboardHighlightingEffective;
    $[16] = t7;
    $[17] = t8;
  } else {
    t8 = $[17];
  }
  const providerValue = t8;
  let t9;
  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
    t9 = {
      type: "tween"
    };
    $[18] = t9;
  } else {
    t9 = $[18];
  }
  let t10;
  if ($[19] !== children) {
    t10 = /*#__PURE__*/React.createElement(MotionConfig, {
      transition: t9
    }, /*#__PURE__*/React.createElement(AnimatePresence, {
      initial: false
    }, children));
    $[19] = children;
    $[20] = t10;
  } else {
    t10 = $[20];
  }
  let t11;
  if ($[21] !== providerValue || $[22] !== t10) {
    t11 = /*#__PURE__*/React.createElement(ListContext.Provider, {
      value: providerValue
    }, t10);
    $[21] = providerValue;
    $[22] = t10;
    $[23] = t11;
  } else {
    t11 = $[23];
  }
  return t11;
};
List.displayName = 'List';
export default List;
function _temp(element) {
  return element.getAttribute("data-uuid")?.split("---")[1];
}
function _temp2(uuid_0) {
  return Boolean(uuid_0);
}
//# sourceMappingURL=List.js.map