@coder/backstage-plugin-coder/dist/components/Disclosure/Disclosure.esm.js

Create and manage Coder workspaces from Backstage

import { jsxs, jsx } from 'react/jsx-runtime';
import { useState } from 'react';
import { useId } from '../../hooks/hookPolyfills.esm.js';
import { makeStyles } from '@material-ui/core';

const useStyles = makeStyles((theme) => ({
  disclosureTriangle: {
    display: "inline-block",
    textAlign: "right",
    width: theme.spacing(2.25),
    fontSize: "0.7rem"
  },
  disclosureBody: {
    margin: 0,
    padding: `${theme.spacing(0.5)}px ${theme.spacing(3.5)}px 0 ${theme.spacing(
      4
    )}px`
  },
  button: {
    width: "100%",
    textAlign: "left",
    color: theme.palette.text.primary,
    backgroundColor: theme.palette.background.paper,
    padding: theme.spacing(1),
    border: "none",
    borderRadius: theme.shape.borderRadius,
    fontSize: theme.typography.body2.fontSize,
    cursor: "pointer",
    "&:hover": {
      backgroundColor: theme.palette.action.hover
    },
    "&:not(:first-child)": {
      paddingTop: theme.spacing(6)
    }
  }
}));
const Disclosure = ({
  isExpanded,
  onExpansionToggle,
  headerText,
  children,
  ...delegatedProps
}) => {
  const hookId = useId();
  const styles = useStyles();
  const [internalIsExpanded, setInternalIsExpanded] = useState(
    isExpanded ?? false
  );
  const activeIsExpanded = isExpanded ?? internalIsExpanded;
  const disclosureBodyId = `${hookId}-disclosure-body`;
  return /* @__PURE__ */ jsxs("div", { ...delegatedProps, children: [
    /* @__PURE__ */ jsxs(
      "button",
      {
        type: "button",
        "aria-expanded": activeIsExpanded,
        "aria-controls": disclosureBodyId,
        className: styles.button,
        onClick: () => {
          setInternalIsExpanded(!internalIsExpanded);
          onExpansionToggle?.();
        },
        children: [
          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: styles.disclosureTriangle, children: activeIsExpanded ? "\u25BC" : "\u25BA" }),
          " ",
          headerText
        ]
      }
    ),
    activeIsExpanded && /* @__PURE__ */ jsx("p", { id: disclosureBodyId, className: styles.disclosureBody, children })
  ] });
};

export { Disclosure };
//# sourceMappingURL=Disclosure.esm.js.map