@zohodesk/components/es/v1/Accordion/Accordion.js

In this Package, we Provide Some Basic Components to Build Web App

import React, { useState } from 'react';
import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
import { Accordion_defaultProps } from "./props/defaultProps";
import { Accordion_propTypes } from "./props/propTypes";
export default function Accordion(props) {
  const {
    className,
    height,
    unMount,
    disableInternalState,
    selectedItem: propSelectedItem,
    a11y,
    dataId,
    dataSelectorId,
    onSelect,
    children
  } = props;
  const {
    role,
    ariaExpanded,
    ariaHaspopup
  } = a11y;
  const [selectedItem, setSelectedItem] = useState(propSelectedItem);

  function selectMenu(selectedItem) {
    if (onSelect) {
      onSelect(selectedItem);
    }

    !disableInternalState && setSelectedItem(selectedItem);
  }

  useEffectCallOnlyAfterState(() => {
    if (!disableInternalState) {
      setSelectedItem(propSelectedItem);
    }
  }, [propSelectedItem]);
  let renderChildren = React.Children.map(children, child => {
    if (child) {
      return /*#__PURE__*/React.cloneElement(child, {
        selectedItem: disableInternalState ? propSelectedItem : selectedItem,
        selectMenu: selectMenu,
        unMount: unMount
      });
    }
  });
  return /*#__PURE__*/React.createElement("div", {
    className: className ? className : '',
    style: {
      height
    },
    role: role,
    "aria-expanded": ariaExpanded,
    "aria-haspopup": ariaHaspopup,
    "data-id": dataId,
    "data-test-id": dataId,
    "data-selector-id": dataSelectorId
  }, renderChildren);
}
Accordion.propTypes = Accordion_propTypes;
Accordion.defaultProps = Accordion_defaultProps; // if (__DOCS__) {
//   Accordion.docs = {
//     componentGroup: 'Animation',
//     folderName: 'Style Guide'
//   };
// }