@weng-lab/ui-components 2.2.4 → 3.0.0

package/dist/ui-components.es32.js

@@ -1,115 +1,44 @@
-import * as i from "react";
-import e from "./ui-components.es89.js";
-import { clsx as b } from "./ui-components.es90.js";
-import w from "./ui-components.es92.js";
-import y from "./ui-components.es93.js";
-import f, { getTableRowUtilityClass as R } from "./ui-components.es100.js";
-import { j as T } from "./ui-components.es15.js";
-import { useDefaultProps as C } from "./ui-components.es95.js";
-import h from "./ui-components.es97.js";
-import x from "./ui-components.es37.js";
-const O = (o) => {
-  const {
-    classes: t,
-    selected: r,
-    hover: s,
-    head: n,
-    footer: a
-  } = o;
-  return h({
-    root: ["root", r && "selected", s && "hover", n && "head", a && "footer"]
-  }, R, t);
-}, g = x("tr", {
-  name: "MuiTableRow",
-  slot: "Root",
-  overridesResolver: (o, t) => {
-    const {
-      ownerState: r
-    } = o;
-    return [t.root, r.head && t.head, r.footer && t.footer];
+function s(e, r) {
+  switch (r.type) {
+    //This case has no dispatch event
+    case "pageChanged":
+      return {
+        ...e,
+        page: r.page
+      };
+    case "searchChanged":
+      return {
+        ...e,
+        page: 0,
+        filter: r.value
+      };
+    case "sortChanged":
+      return {
+        ...e,
+        sort: {
+          column: r.sortColumn,
+          asc: r.sortColumn === e.sort.column ? !e.sort.asc : !0
+        }
+      };
+    case "modalChanged":
+      return {
+        ...e,
+        showAddColumnsModal: r.showAddColumnsModal
+      };
+    case "columnsChanged":
+      return {
+        ...e,
+        columns: r.columns
+      };
+    //Bypassing this for now, not understood why it was implemented this way
+    case "mousedOver":
+      return console.log("moused over"), {
+        ...e,
+        mousedOver: r.index
+      };
   }
-})(y(({
-  theme: o
-}) => ({
-  color: "inherit",
-  display: "table-row",
-  verticalAlign: "middle",
-  // We disable the focus ring for mouse, touch and keyboard users.
-  outline: 0,
-  [`&.${f.hover}:hover`]: {
-    backgroundColor: (o.vars || o).palette.action.hover
-  },
-  [`&.${f.selected}`]: {
-    backgroundColor: o.alpha((o.vars || o).palette.primary.main, (o.vars || o).palette.action.selectedOpacity),
-    "&:hover": {
-      backgroundColor: o.alpha((o.vars || o).palette.primary.main, `${(o.vars || o).palette.action.selectedOpacity} + ${(o.vars || o).palette.action.hoverOpacity}`)
-    }
-  }
-}))), d = "tr", j = /* @__PURE__ */ i.forwardRef(function(t, r) {
-  const s = C({
-    props: t,
-    name: "MuiTableRow"
-  }), {
-    className: n,
-    component: a = d,
-    hover: c = !1,
-    selected: m = !1,
-    ...v
-  } = s, l = i.useContext(w), p = {
-    ...s,
-    component: a,
-    hover: c,
-    selected: m,
-    head: l && l.variant === "head",
-    footer: l && l.variant === "footer"
-  }, u = O(p);
-  return /* @__PURE__ */ T.jsx(g, {
-    as: a,
-    ref: r,
-    className: b(u.root, n),
-    role: a === d ? null : "row",
-    ownerState: p,
-    ...v
-  });
-});
-process.env.NODE_ENV !== "production" && (j.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * Should be valid `<tr>` children such as `TableCell`.
-   */
-  children: e.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: e.object,
-  /**
-   * @ignore
-   */
-  className: e.string,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: e.elementType,
-  /**
-   * If `true`, the table row will shade on hover.
-   * @default false
-   */
-  hover: e.bool,
-  /**
-   * If `true`, the table row will have the selected shading.
-   * @default false
-   */
-  selected: 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])
-});
+}
 export {
-  j as default
+  s as reducer
 };
 //# sourceMappingURL=ui-components.es32.js.map

package/dist/ui-components.es32.js.map

@@ -1 +1 @@
-{"version":3,"file":"ui-components.es32.js","sources":["../../../node_modules/.pnpm/@mui+material@7.3.9_@emotion+react@11.14.0_@types+react@19.2.14_react@19.2.4__@emotion+_5efc65b7a21bb615fd4ee8d4bf58b896/node_modules/@mui/material/esm/TableRow/TableRow.js"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport PropTypes from 'prop-types';\nimport clsx from 'clsx';\nimport composeClasses from '@mui/utils/composeClasses';\nimport Tablelvl2Context from \"../Table/Tablelvl2Context.js\";\nimport { styled } from \"../zero-styled/index.js\";\nimport memoTheme from \"../utils/memoTheme.js\";\nimport { useDefaultProps } from \"../DefaultPropsProvider/index.js\";\nimport tableRowClasses, { getTableRowUtilityClass } from \"./tableRowClasses.js\";\nimport { jsx as _jsx } from \"react/jsx-runtime\";\nconst useUtilityClasses = ownerState => {\n  const {\n    classes,\n    selected,\n    hover,\n    head,\n    footer\n  } = ownerState;\n  const slots = {\n    root: ['root', selected && 'selected', hover && 'hover', head && 'head', footer && 'footer']\n  };\n  return composeClasses(slots, getTableRowUtilityClass, classes);\n};\nconst TableRowRoot = styled('tr', {\n  name: 'MuiTableRow',\n  slot: 'Root',\n  overridesResolver: (props, styles) => {\n    const {\n      ownerState\n    } = props;\n    return [styles.root, ownerState.head && styles.head, ownerState.footer && styles.footer];\n  }\n})(memoTheme(({\n  theme\n}) => ({\n  color: 'inherit',\n  display: 'table-row',\n  verticalAlign: 'middle',\n  // We disable the focus ring for mouse, touch and keyboard users.\n  outline: 0,\n  [`&.${tableRowClasses.hover}:hover`]: {\n    backgroundColor: (theme.vars || theme).palette.action.hover\n  },\n  [`&.${tableRowClasses.selected}`]: {\n    backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, (theme.vars || theme).palette.action.selectedOpacity),\n    '&:hover': {\n      backgroundColor: theme.alpha((theme.vars || theme).palette.primary.main, `${(theme.vars || theme).palette.action.selectedOpacity} + ${(theme.vars || theme).palette.action.hoverOpacity}`)\n    }\n  }\n})));\nconst defaultComponent = 'tr';\n/**\n * Will automatically set dynamic row height\n * based on the material table element parent (head, body, etc).\n */\nconst TableRow = /*#__PURE__*/React.forwardRef(function TableRow(inProps, ref) {\n  const props = useDefaultProps({\n    props: inProps,\n    name: 'MuiTableRow'\n  });\n  const {\n    className,\n    component = defaultComponent,\n    hover = false,\n    selected = false,\n    ...other\n  } = props;\n  const tablelvl2 = React.useContext(Tablelvl2Context);\n  const ownerState = {\n    ...props,\n    component,\n    hover,\n    selected,\n    head: tablelvl2 && tablelvl2.variant === 'head',\n    footer: tablelvl2 && tablelvl2.variant === 'footer'\n  };\n  const classes = useUtilityClasses(ownerState);\n  return /*#__PURE__*/_jsx(TableRowRoot, {\n    as: component,\n    ref: ref,\n    className: clsx(classes.root, className),\n    role: component === defaultComponent ? null : 'row',\n    ownerState: ownerState,\n    ...other\n  });\n});\nprocess.env.NODE_ENV !== \"production\" ? TableRow.propTypes /* remove-proptypes */ = {\n  // ┌────────────────────────────── Warning ──────────────────────────────┐\n  // │ These PropTypes are generated from the TypeScript type definitions. │\n  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │\n  // └─────────────────────────────────────────────────────────────────────┘\n  /**\n   * Should be valid `<tr>` children such as `TableCell`.\n   */\n  children: PropTypes.node,\n  /**\n   * Override or extend the styles applied to the component.\n   */\n  classes: PropTypes.object,\n  /**\n   * @ignore\n   */\n  className: PropTypes.string,\n  /**\n   * The component used for the root node.\n   * Either a string to use a HTML element or a component.\n   */\n  component: PropTypes.elementType,\n  /**\n   * If `true`, the table row will shade on hover.\n   * @default false\n   */\n  hover: PropTypes.bool,\n  /**\n   * If `true`, the table row will have the selected shading.\n   * @default false\n   */\n  selected: PropTypes.bool,\n  /**\n   * The system prop that allows defining system overrides as well as additional CSS styles.\n   */\n  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])\n} : void 0;\nexport default TableRow;"],"names":["useUtilityClasses","ownerState","classes","selected","hover","head","footer","composeClasses","getTableRowUtilityClass","TableRowRoot","styled","props","styles","memoTheme","theme","tableRowClasses","defaultComponent","TableRow","React","inProps","ref","useDefaultProps","className","component","other","tablelvl2","Tablelvl2Context","_jsx","clsx","PropTypes"],"mappings":"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","x_google_ignoreList":[0]}
+{"version":3,"file":"ui-components.es32.js","sources":["../src/components/DataTable/reducer.ts"],"sourcesContent":["import { DataTableAction, DataTableState } from \"./types\"\n\nexport function reducer<T>(previousState: DataTableState<T>, action: DataTableAction<T>): DataTableState<T> {\n  switch (action.type) {\n    //This case has no dispatch event\n    case \"pageChanged\":\n      return {\n        ...previousState,\n        page: action.page,\n      }\n    case \"searchChanged\":\n      return {\n        ...previousState,\n        page: 0,\n        filter: action.value,\n      }\n    case \"sortChanged\":\n      return {\n        ...previousState,\n        sort: {\n          column: action.sortColumn,\n          asc: action.sortColumn === previousState.sort.column ? !previousState.sort.asc : true,\n        },\n      }\n    case \"modalChanged\":\n      return {\n        ...previousState,\n        showAddColumnsModal: action.showAddColumnsModal,\n      }\n    case \"columnsChanged\":\n      return {\n        ...previousState,\n        columns: action.columns,\n      }\n    //Bypassing this for now, not understood why it was implemented this way\n    case \"mousedOver\":\n      console.log(\"moused over\")\n      return {\n        ...previousState,\n        mousedOver: action.index,\n      }\n  }\n}\n"],"names":["reducer","previousState","action","type","page","filter","value","sort","column","sortColumn","asc","showAddColumnsModal","columns","console","log","mousedOver","index"],"mappings":"AAEO,SAASA,EAAWC,GAAkCC,GAA+C;AAC1G,UAAQA,EAAOC,MAAAA;AAAAA;AAAAA,IAEb,KAAK;AACH,aAAO;AAAA,QACL,GAAGF;AAAAA,QACHG,MAAMF,EAAOE;AAAAA,MAAAA;AAAAA,IAEjB,KAAK;AACH,aAAO;AAAA,QACL,GAAGH;AAAAA,QACHG,MAAM;AAAA,QACNC,QAAQH,EAAOI;AAAAA,MAAAA;AAAAA,IAEnB,KAAK;AACH,aAAO;AAAA,QACL,GAAGL;AAAAA,QACHM,MAAM;AAAA,UACJC,QAAQN,EAAOO;AAAAA,UACfC,KAAKR,EAAOO,eAAeR,EAAcM,KAAKC,SAAS,CAACP,EAAcM,KAAKG,MAAM;AAAA,QAAA;AAAA,MACnF;AAAA,IAEJ,KAAK;AACH,aAAO;AAAA,QACL,GAAGT;AAAAA,QACHU,qBAAqBT,EAAOS;AAAAA,MAAAA;AAAAA,IAEhC,KAAK;AACH,aAAO;AAAA,QACL,GAAGV;AAAAA,QACHW,SAASV,EAAOU;AAAAA,MAAAA;AAAAA;AAAAA,IAGpB,KAAK;AACHC,qBAAQC,IAAI,aAAa,GAClB;AAAA,QACL,GAAGb;AAAAA,QACHc,YAAYb,EAAOc;AAAAA,MAAAA;AAAAA,EACrB;AAEN;"}

package/dist/ui-components.es320.js

@@ -1,79 +1,337 @@
-import p from "./ui-components.es309.js";
-import r from "./ui-components.es311.js";
-import c from "./ui-components.es310.js";
-import { createUnaryUnit as a, getValue as l } from "./ui-components.es193.js";
-import { handleBreakpoints as s } from "./ui-components.es312.js";
-const u = (o) => {
-  if (o.gap !== void 0 && o.gap !== null) {
-    const e = a(o.theme, "spacing", 8, "gap"), n = (t) => ({
-      gap: l(e, t)
-    });
-    return s(o, o.gap, n);
+import C from "./ui-components.es359.js";
+import D from "./ui-components.es362.js";
+import o from "./ui-components.es89.js";
+import v from "react";
+import b from "react-dom";
+import T from "./ui-components.es365.js";
+import { timeoutsShape as R } from "./ui-components.es366.js";
+import O from "./ui-components.es363.js";
+import { forceReflow as k } from "./ui-components.es367.js";
+var x = "unmounted", f = "exited", l = "entering", h = "entered", N = "exiting", p = /* @__PURE__ */ (function(d) {
+  D(u, d);
+  function u(i, e) {
+    var t;
+    t = d.call(this, i, e) || this;
+    var n = e, r = n && !n.isMounting ? i.enter : i.appear, s;
+    return t.appearStatus = null, i.in ? r ? (s = f, t.appearStatus = l) : s = h : i.unmountOnExit || i.mountOnEnter ? s = x : s = f, t.state = {
+      status: s
+    }, t.nextCallback = null, t;
   }
-  return null;
-};
-u.propTypes = process.env.NODE_ENV !== "production" ? {
-  gap: p
-} : {};
-u.filterProps = ["gap"];
-const i = (o) => {
-  if (o.columnGap !== void 0 && o.columnGap !== null) {
-    const e = a(o.theme, "spacing", 8, "columnGap"), n = (t) => ({
-      columnGap: l(e, t)
+  u.getDerivedStateFromProps = function(e, t) {
+    var n = e.in;
+    return n && t.status === x ? {
+      status: f
+    } : null;
+  };
+  var a = u.prototype;
+  return a.componentDidMount = function() {
+    this.updateStatus(!0, this.appearStatus);
+  }, a.componentDidUpdate = function(e) {
+    var t = null;
+    if (e !== this.props) {
+      var n = this.state.status;
+      this.props.in ? n !== l && n !== h && (t = l) : (n === l || n === h) && (t = N);
+    }
+    this.updateStatus(!1, t);
+  }, a.componentWillUnmount = function() {
+    this.cancelNextCallback();
+  }, a.getTimeouts = function() {
+    var e = this.props.timeout, t, n, r;
+    return t = n = r = e, e != null && typeof e != "number" && (t = e.exit, n = e.enter, r = e.appear !== void 0 ? e.appear : n), {
+      exit: t,
+      enter: n,
+      appear: r
+    };
+  }, a.updateStatus = function(e, t) {
+    if (e === void 0 && (e = !1), t !== null)
+      if (this.cancelNextCallback(), t === l) {
+        if (this.props.unmountOnExit || this.props.mountOnEnter) {
+          var n = this.props.nodeRef ? this.props.nodeRef.current : b.findDOMNode(this);
+          n && k(n);
+        }
+        this.performEnter(e);
+      } else
+        this.performExit();
+    else this.props.unmountOnExit && this.state.status === f && this.setState({
+      status: x
     });
-    return s(o, o.columnGap, n);
-  }
-  return null;
-};
-i.propTypes = process.env.NODE_ENV !== "production" ? {
-  columnGap: p
-} : {};
-i.filterProps = ["columnGap"];
-const m = (o) => {
-  if (o.rowGap !== void 0 && o.rowGap !== null) {
-    const e = a(o.theme, "spacing", 8, "rowGap"), n = (t) => ({
-      rowGap: l(e, t)
+  }, a.performEnter = function(e) {
+    var t = this, n = this.props.enter, r = this.context ? this.context.isMounting : e, s = this.props.nodeRef ? [r] : [b.findDOMNode(this), r], c = s[0], m = s[1], S = this.getTimeouts(), g = r ? S.appear : S.enter;
+    if (!e && !n || T.disabled) {
+      this.safeSetState({
+        status: h
+      }, function() {
+        t.props.onEntered(c);
+      });
+      return;
+    }
+    this.props.onEnter(c, m), this.safeSetState({
+      status: l
+    }, function() {
+      t.props.onEntering(c, m), t.onTransitionEnd(g, function() {
+        t.safeSetState({
+          status: h
+        }, function() {
+          t.props.onEntered(c, m);
+        });
+      });
     });
-    return s(o, o.rowGap, n);
-  }
-  return null;
-};
-m.propTypes = process.env.NODE_ENV !== "production" ? {
-  rowGap: p
+  }, a.performExit = function() {
+    var e = this, t = this.props.exit, n = this.getTimeouts(), r = this.props.nodeRef ? void 0 : b.findDOMNode(this);
+    if (!t || T.disabled) {
+      this.safeSetState({
+        status: f
+      }, function() {
+        e.props.onExited(r);
+      });
+      return;
+    }
+    this.props.onExit(r), this.safeSetState({
+      status: N
+    }, function() {
+      e.props.onExiting(r), e.onTransitionEnd(n.exit, function() {
+        e.safeSetState({
+          status: f
+        }, function() {
+          e.props.onExited(r);
+        });
+      });
+    });
+  }, a.cancelNextCallback = function() {
+    this.nextCallback !== null && (this.nextCallback.cancel(), this.nextCallback = null);
+  }, a.safeSetState = function(e, t) {
+    t = this.setNextCallback(t), this.setState(e, t);
+  }, a.setNextCallback = function(e) {
+    var t = this, n = !0;
+    return this.nextCallback = function(r) {
+      n && (n = !1, t.nextCallback = null, e(r));
+    }, this.nextCallback.cancel = function() {
+      n = !1;
+    }, this.nextCallback;
+  }, a.onTransitionEnd = function(e, t) {
+    this.setNextCallback(t);
+    var n = this.props.nodeRef ? this.props.nodeRef.current : b.findDOMNode(this), r = e == null && !this.props.addEndListener;
+    if (!n || r) {
+      setTimeout(this.nextCallback, 0);
+      return;
+    }
+    if (this.props.addEndListener) {
+      var s = this.props.nodeRef ? [this.nextCallback] : [n, this.nextCallback], c = s[0], m = s[1];
+      this.props.addEndListener(c, m);
+    }
+    e != null && setTimeout(this.nextCallback, e);
+  }, a.render = function() {
+    var e = this.state.status;
+    if (e === x)
+      return null;
+    var t = this.props, n = t.children;
+    t.in, t.mountOnEnter, t.unmountOnExit, t.appear, t.enter, t.exit, t.timeout, t.addEndListener, t.onEnter, t.onEntering, t.onEntered, t.onExit, t.onExiting, t.onExited, t.nodeRef;
+    var r = C(t, ["children", "in", "mountOnEnter", "unmountOnExit", "appear", "enter", "exit", "timeout", "addEndListener", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "nodeRef"]);
+    return (
+      // allows for nested Transitions
+      /* @__PURE__ */ v.createElement(O.Provider, {
+        value: null
+      }, typeof n == "function" ? n(e, r) : v.cloneElement(v.Children.only(n), r))
+    );
+  }, u;
+})(v.Component);
+p.contextType = O;
+p.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * A React reference to DOM element that need to transition:
+   * https://stackoverflow.com/a/51127130/4671932
+   *
+   *   - When `nodeRef` prop is used, `node` is not passed to callback functions
+   *      (e.g. `onEnter`) because user already has direct access to the node.
+   *   - When changing `key` prop of `Transition` in a `TransitionGroup` a new
+   *     `nodeRef` need to be provided to `Transition` with changed `key` prop
+   *     (see
+   *     [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).
+   */
+  nodeRef: o.shape({
+    current: typeof Element > "u" ? o.any : function(d, u, a, i, e, t) {
+      var n = d[u];
+      return o.instanceOf(n && "ownerDocument" in n ? n.ownerDocument.defaultView.Element : Element)(d, u, a, i, e, t);
+    }
+  }),
+  /**
+   * A `function` child can be used instead of a React element. This function is
+   * called with the current transition status (`'entering'`, `'entered'`,
+   * `'exiting'`, `'exited'`), which can be used to apply context
+   * specific props to a component.
+   *
+   * ```jsx
+   * <Transition in={this.state.in} timeout={150}>
+   *   {state => (
+   *     <MyComponent className={`fade fade-${state}`} />
+   *   )}
+   * </Transition>
+   * ```
+   */
+  children: o.oneOfType([o.func.isRequired, o.element.isRequired]).isRequired,
+  /**
+   * Show the component; triggers the enter or exit states
+   */
+  in: o.bool,
+  /**
+   * By default the child component is mounted immediately along with
+   * the parent `Transition` component. If you want to "lazy mount" the component on the
+   * first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
+   * mounted, even on "exited", unless you also specify `unmountOnExit`.
+   */
+  mountOnEnter: o.bool,
+  /**
+   * By default the child component stays mounted after it reaches the `'exited'` state.
+   * Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
+   */
+  unmountOnExit: o.bool,
+  /**
+   * By default the child component does not perform the enter transition when
+   * it first mounts, regardless of the value of `in`. If you want this
+   * behavior, set both `appear` and `in` to `true`.
+   *
+   * > **Note**: there are no special appear states like `appearing`/`appeared`, this prop
+   * > only adds an additional enter transition. However, in the
+   * > `<CSSTransition>` component that first enter transition does result in
+   * > additional `.appear-*` classes, that way you can choose to style it
+   * > differently.
+   */
+  appear: o.bool,
+  /**
+   * Enable or disable enter transitions.
+   */
+  enter: o.bool,
+  /**
+   * Enable or disable exit transitions.
+   */
+  exit: o.bool,
+  /**
+   * The duration of the transition, in milliseconds.
+   * Required unless `addEndListener` is provided.
+   *
+   * You may specify a single timeout for all transitions:
+   *
+   * ```jsx
+   * timeout={500}
+   * ```
+   *
+   * or individually:
+   *
+   * ```jsx
+   * timeout={{
+   *  appear: 500,
+   *  enter: 300,
+   *  exit: 500,
+   * }}
+   * ```
+   *
+   * - `appear` defaults to the value of `enter`
+   * - `enter` defaults to `0`
+   * - `exit` defaults to `0`
+   *
+   * @type {number | { enter?: number, exit?: number, appear?: number }}
+   */
+  timeout: function(u) {
+    var a = R;
+    u.addEndListener || (a = a.isRequired);
+    for (var i = arguments.length, e = new Array(i > 1 ? i - 1 : 0), t = 1; t < i; t++)
+      e[t - 1] = arguments[t];
+    return a.apply(void 0, [u].concat(e));
+  },
+  /**
+   * Add a custom transition end trigger. Called with the transitioning
+   * DOM node and a `done` callback. Allows for more fine grained transition end
+   * logic. Timeouts are still used as a fallback if provided.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * ```jsx
+   * addEndListener={(node, done) => {
+   *   // use the css transitionend event to mark the finish of a transition
+   *   node.addEventListener('transitionend', done, false);
+   * }}
+   * ```
+   */
+  addEndListener: o.func,
+  /**
+   * Callback fired before the "entering" status is applied. An extra parameter
+   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement, isAppearing: bool) -> void
+   */
+  onEnter: o.func,
+  /**
+   * Callback fired after the "entering" status is applied. An extra parameter
+   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement, isAppearing: bool)
+   */
+  onEntering: o.func,
+  /**
+   * Callback fired after the "entered" status is applied. An extra parameter
+   * `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement, isAppearing: bool) -> void
+   */
+  onEntered: o.func,
+  /**
+   * Callback fired before the "exiting" status is applied.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement) -> void
+   */
+  onExit: o.func,
+  /**
+   * Callback fired after the "exiting" status is applied.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed.
+   *
+   * @type Function(node: HtmlElement) -> void
+   */
+  onExiting: o.func,
+  /**
+   * Callback fired after the "exited" status is applied.
+   *
+   * **Note**: when `nodeRef` prop is passed, `node` is not passed
+   *
+   * @type Function(node: HtmlElement) -> void
+   */
+  onExited: o.func
 } : {};
-m.filterProps = ["rowGap"];
-const g = r({
-  prop: "gridColumn"
-}), d = r({
-  prop: "gridRow"
-}), f = r({
-  prop: "gridAutoFlow"
-}), w = r({
-  prop: "gridAutoColumns"
-}), G = r({
-  prop: "gridAutoRows"
-}), A = r({
-  prop: "gridTemplateColumns"
-}), T = r({
-  prop: "gridTemplateRows"
-}), y = r({
-  prop: "gridTemplateAreas"
-}), P = r({
-  prop: "gridArea"
-});
-c(u, i, m, g, d, f, w, G, A, T, y, P);
+function E() {
+}
+p.defaultProps = {
+  in: !1,
+  mountOnEnter: !1,
+  unmountOnExit: !1,
+  appear: !1,
+  enter: !0,
+  exit: !0,
+  onEnter: E,
+  onEntering: E,
+  onEntered: E,
+  onExit: E,
+  onExiting: E,
+  onExited: E
+};
+p.UNMOUNTED = x;
+p.EXITED = f;
+p.ENTERING = l;
+p.ENTERED = h;
+p.EXITING = N;
 export {
-  i as columnGap,
-  u as gap,
-  P as gridArea,
-  w as gridAutoColumns,
-  f as gridAutoFlow,
-  G as gridAutoRows,
-  g as gridColumn,
-  d as gridRow,
-  y as gridTemplateAreas,
-  A as gridTemplateColumns,
-  T as gridTemplateRows,
-  m as rowGap
+  h as ENTERED,
+  l as ENTERING,
+  f as EXITED,
+  N as EXITING,
+  x as UNMOUNTED,
+  p as default
 };
 //# sourceMappingURL=ui-components.es320.js.map