@hybridcore/ui 1.3.6 → 1.4.0

package/dist/AccordionDetails-CGs6GZQK.js

@@ -0,0 +1,454 @@
+import { _ as c, a as E } from "./objectWithoutPropertiesLoose-BK36oJDi.js";
+import * as i from "react";
+import { r as U, P as e } from "./createStyled-BzvgQjjR.js";
+import { g as M, u as w, c as R, b as _, a as V } from "./useThemeProps-uYx_RkOH.js";
+import { g as O, s as y } from "./styled-LNCprp4n.js";
+import { jsxs as I, jsx as g } from "react/jsx-runtime";
+import { P as B } from "./Paper-btu3j72o.js";
+import { u as q } from "./useControlled-BYdyS7Pn.js";
+import { C as W } from "./Collapse-CL6LGGZw.js";
+import { B as L } from "./ButtonBase-D0qccOVb.js";
+const $ = /* @__PURE__ */ i.createContext({});
+process.env.NODE_ENV !== "production" && ($.displayName = "AccordionContext");
+function F(o) {
+  return O("MuiAccordion", o);
+}
+const h = M("MuiAccordion", ["root", "rounded", "expanded", "disabled", "gutters", "region"]), H = ["children", "className", "defaultExpanded", "disabled", "disableGutters", "expanded", "onChange", "square", "TransitionComponent", "TransitionProps"], z = (o) => {
+  const {
+    classes: s,
+    square: r,
+    expanded: n,
+    disabled: a,
+    disableGutters: d
+  } = o;
+  return V({
+    root: ["root", !r && "rounded", n && "expanded", a && "disabled", !d && "gutters"],
+    region: ["region"]
+  }, F, s);
+}, J = y(B, {
+  name: "MuiAccordion",
+  slot: "Root",
+  overridesResolver: (o, s) => {
+    const {
+      ownerState: r
+    } = o;
+    return [{
+      [`& .${h.region}`]: s.region
+    }, s.root, !r.square && s.rounded, !r.disableGutters && s.gutters];
+  }
+})(({
+  theme: o
+}) => {
+  const s = {
+    duration: o.transitions.duration.shortest
+  };
+  return {
+    position: "relative",
+    transition: o.transitions.create(["margin"], s),
+    overflowAnchor: "none",
+    // Keep the same scrolling position
+    "&:before": {
+      position: "absolute",
+      left: 0,
+      top: -1,
+      right: 0,
+      height: 1,
+      content: '""',
+      opacity: 1,
+      backgroundColor: (o.vars || o).palette.divider,
+      transition: o.transitions.create(["opacity", "background-color"], s)
+    },
+    "&:first-of-type": {
+      "&:before": {
+        display: "none"
+      }
+    },
+    [`&.${h.expanded}`]: {
+      "&:before": {
+        opacity: 0
+      },
+      "&:first-of-type": {
+        marginTop: 0
+      },
+      "&:last-of-type": {
+        marginBottom: 0
+      },
+      "& + &": {
+        "&:before": {
+          display: "none"
+        }
+      }
+    },
+    [`&.${h.disabled}`]: {
+      backgroundColor: (o.vars || o).palette.action.disabledBackground
+    }
+  };
+}, ({
+  theme: o,
+  ownerState: s
+}) => c({}, !s.square && {
+  borderRadius: 0,
+  "&:first-of-type": {
+    borderTopLeftRadius: (o.vars || o).shape.borderRadius,
+    borderTopRightRadius: (o.vars || o).shape.borderRadius
+  },
+  "&:last-of-type": {
+    borderBottomLeftRadius: (o.vars || o).shape.borderRadius,
+    borderBottomRightRadius: (o.vars || o).shape.borderRadius,
+    // Fix a rendering issue on Edge
+    "@supports (-ms-ime-align: auto)": {
+      borderBottomLeftRadius: 0,
+      borderBottomRightRadius: 0
+    }
+  }
+}, !s.disableGutters && {
+  [`&.${h.expanded}`]: {
+    margin: "16px 0"
+  }
+})), K = /* @__PURE__ */ i.forwardRef(function(s, r) {
+  const n = w({
+    props: s,
+    name: "MuiAccordion"
+  }), {
+    children: a,
+    className: d,
+    defaultExpanded: l = !1,
+    disabled: p = !1,
+    disableGutters: f = !1,
+    expanded: N,
+    onChange: m,
+    square: C = !1,
+    TransitionComponent: v = W,
+    TransitionProps: A
+  } = n, T = E(n, H), [t, u] = q({
+    controlled: N,
+    default: l,
+    name: "Accordion",
+    state: "expanded"
+  }), x = i.useCallback((k) => {
+    u(!t), m && m(k, !t);
+  }, [t, m, u]), [S, ...P] = i.Children.toArray(a), D = i.useMemo(() => ({
+    expanded: t,
+    disabled: p,
+    disableGutters: f,
+    toggle: x
+  }), [t, p, f, x]), j = c({}, n, {
+    square: C,
+    disabled: p,
+    disableGutters: f,
+    expanded: t
+  }), G = z(j);
+  return /* @__PURE__ */ I(J, c({
+    className: R(G.root, d),
+    ref: r,
+    ownerState: j,
+    square: C
+  }, T, {
+    children: [/* @__PURE__ */ g($.Provider, {
+      value: D,
+      children: S
+    }), /* @__PURE__ */ g(v, c({
+      in: t,
+      timeout: "auto"
+    }, A, {
+      children: /* @__PURE__ */ g("div", {
+        "aria-labelledby": S.props.id,
+        id: S.props["aria-controls"],
+        role: "region",
+        className: G.region,
+        children: P
+      })
+    }))]
+  }));
+});
+process.env.NODE_ENV !== "production" && (K.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: _(e.node.isRequired, (o) => {
+    const s = i.Children.toArray(o.children)[0];
+    return U.isFragment(s) ? new Error("MUI: The Accordion doesn't accept a Fragment as a child. Consider providing an array instead.") : /* @__PURE__ */ i.isValidElement(s) ? null : new Error("MUI: Expected the first child of Accordion to be a valid element.");
+  }),
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * If `true`, expands the accordion by default.
+   * @default false
+   */
+  defaultExpanded: e.bool,
+  /**
+   * If `true`, the component is disabled.
+   * @default false
+   */
+  disabled: e.bool,
+  /**
+   * If `true`, it removes the margin between two expanded accordion items and the increase of height.
+   * @default false
+   */
+  disableGutters: e.bool,
+  /**
+   * If `true`, expands the accordion, otherwise collapse it.
+   * Setting this prop enables control over the accordion.
+   */
+  expanded: e.bool,
+  /**
+   * Callback fired when the expand/collapse state is changed.
+   *
+   * @param {React.SyntheticEvent} event The event source of the callback. **Warning**: This is a generic event not a change event.
+   * @param {boolean} expanded The `expanded` state of the accordion.
+   */
+  onChange: e.func,
+  /**
+   * If `true`, rounded corners are disabled.
+   * @default false
+   */
+  square: e.bool,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object]),
+  /**
+   * The component used for the transition.
+   * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * @default Collapse
+   */
+  TransitionComponent: e.elementType,
+  /**
+   * Props applied to the transition element.
+   * By default, the element is based on this [`Transition`](http://reactcommunity.org/react-transition-group/transition/) component.
+   */
+  TransitionProps: e.object
+});
+function Q(o) {
+  return O("MuiAccordionSummary", o);
+}
+const b = M("MuiAccordionSummary", ["root", "expanded", "focusVisible", "disabled", "gutters", "contentGutters", "content", "expandIconWrapper"]), X = ["children", "className", "expandIcon", "focusVisibleClassName", "onClick"], Y = (o) => {
+  const {
+    classes: s,
+    expanded: r,
+    disabled: n,
+    disableGutters: a
+  } = o;
+  return V({
+    root: ["root", r && "expanded", n && "disabled", !a && "gutters"],
+    focusVisible: ["focusVisible"],
+    content: ["content", r && "expanded", !a && "contentGutters"],
+    expandIconWrapper: ["expandIconWrapper", r && "expanded"]
+  }, Q, s);
+}, Z = y(L, {
+  name: "MuiAccordionSummary",
+  slot: "Root",
+  overridesResolver: (o, s) => s.root
+})(({
+  theme: o,
+  ownerState: s
+}) => {
+  const r = {
+    duration: o.transitions.duration.shortest
+  };
+  return c({
+    display: "flex",
+    minHeight: 48,
+    padding: o.spacing(0, 2),
+    transition: o.transitions.create(["min-height", "background-color"], r),
+    [`&.${b.focusVisible}`]: {
+      backgroundColor: (o.vars || o).palette.action.focus
+    },
+    [`&.${b.disabled}`]: {
+      opacity: (o.vars || o).palette.action.disabledOpacity
+    },
+    [`&:hover:not(.${b.disabled})`]: {
+      cursor: "pointer"
+    }
+  }, !s.disableGutters && {
+    [`&.${b.expanded}`]: {
+      minHeight: 64
+    }
+  });
+}), oo = y("div", {
+  name: "MuiAccordionSummary",
+  slot: "Content",
+  overridesResolver: (o, s) => s.content
+})(({
+  theme: o,
+  ownerState: s
+}) => c({
+  display: "flex",
+  flexGrow: 1,
+  margin: "12px 0"
+}, !s.disableGutters && {
+  transition: o.transitions.create(["margin"], {
+    duration: o.transitions.duration.shortest
+  }),
+  [`&.${b.expanded}`]: {
+    margin: "20px 0"
+  }
+})), eo = y("div", {
+  name: "MuiAccordionSummary",
+  slot: "ExpandIconWrapper",
+  overridesResolver: (o, s) => s.expandIconWrapper
+})(({
+  theme: o
+}) => ({
+  display: "flex",
+  color: (o.vars || o).palette.action.active,
+  transform: "rotate(0deg)",
+  transition: o.transitions.create("transform", {
+    duration: o.transitions.duration.shortest
+  }),
+  [`&.${b.expanded}`]: {
+    transform: "rotate(180deg)"
+  }
+})), so = /* @__PURE__ */ i.forwardRef(function(s, r) {
+  const n = w({
+    props: s,
+    name: "MuiAccordionSummary"
+  }), {
+    children: a,
+    className: d,
+    expandIcon: l,
+    focusVisibleClassName: p,
+    onClick: f
+  } = n, N = E(n, X), {
+    disabled: m = !1,
+    disableGutters: C,
+    expanded: v,
+    toggle: A
+  } = i.useContext($), T = (x) => {
+    A && A(x), f && f(x);
+  }, t = c({}, n, {
+    expanded: v,
+    disabled: m,
+    disableGutters: C
+  }), u = Y(t);
+  return /* @__PURE__ */ I(Z, c({
+    focusRipple: !1,
+    disableRipple: !0,
+    disabled: m,
+    component: "div",
+    "aria-expanded": v,
+    className: R(u.root, d),
+    focusVisibleClassName: R(u.focusVisible, p),
+    onClick: T,
+    ref: r,
+    ownerState: t
+  }, N, {
+    children: [/* @__PURE__ */ g(oo, {
+      className: u.content,
+      ownerState: t,
+      children: a
+    }), l && /* @__PURE__ */ g(eo, {
+      className: u.expandIconWrapper,
+      ownerState: t,
+      children: l
+    })]
+  }));
+});
+process.env.NODE_ENV !== "production" && (so.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The icon to display as the expand indicator.
+   */
+  expandIcon: e.node,
+  /**
+   * This prop can help identify which element has keyboard focus.
+   * The class name will be applied when the element gains the focus through keyboard interaction.
+   * It's a polyfill for the [CSS :focus-visible selector](https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo).
+   * The rationale for using this feature [is explained here](https://github.com/WICG/focus-visible/blob/HEAD/explainer.md).
+   * A [polyfill can be used](https://github.com/WICG/focus-visible) to apply a `focus-visible` class to other components
+   * if needed.
+   */
+  focusVisibleClassName: e.string,
+  /**
+   * @ignore
+   */
+  onClick: e.func,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+function ro(o) {
+  return O("MuiAccordionDetails", o);
+}
+M("MuiAccordionDetails", ["root"]);
+const no = ["className"], to = (o) => {
+  const {
+    classes: s
+  } = o;
+  return V({
+    root: ["root"]
+  }, ro, s);
+}, ao = y("div", {
+  name: "MuiAccordionDetails",
+  slot: "Root",
+  overridesResolver: (o, s) => s.root
+})(({
+  theme: o
+}) => ({
+  padding: o.spacing(1, 2, 2)
+})), io = /* @__PURE__ */ i.forwardRef(function(s, r) {
+  const n = w({
+    props: s,
+    name: "MuiAccordionDetails"
+  }), {
+    className: a
+  } = n, d = E(n, no), l = n, p = to(l);
+  return /* @__PURE__ */ g(ao, c({
+    className: R(p.root, a),
+    ref: r,
+    ownerState: l
+  }, d));
+});
+process.env.NODE_ENV !== "production" && (io.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // |     To update them edit the d.ts file and run "yarn proptypes"     |
+  // ----------------------------------------------------------------------
+  /**
+   * The content of the component.
+   */
+  children: e.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: e.object,
+  /**
+   * @ignore
+   */
+  className: e.string,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
+});
+export {
+  K as A,
+  so as a,
+  io as b
+};