@weng-lab/ui-components 3.0.0 → 3.0.1

package/dist/ui-components.es47.js

@@ -1,464 +1,133 @@
-import * as le from "react";
-import { createElement as re } from "react";
-import e from "./ui-components.es89.js";
-import { clsx as R } from "./ui-components.es102.js";
-import y from "./ui-components.es105.js";
-import f, { getTablePaginationUtilityClass as ie } from "./ui-components.es141.js";
-import m from "./ui-components.es123.js";
-import { j as i } from "./ui-components.es15.js";
-import { useDefaultProps as ce } from "./ui-components.es92.js";
-import pe from "./ui-components.es142.js";
-import x from "./ui-components.es44.js";
-import v from "./ui-components.es124.js";
-import me from "./ui-components.es49.js";
-import ue from "./ui-components.es114.js";
-import u from "./ui-components.es48.js";
-import be from "./ui-components.es86.js";
-import de from "./ui-components.es51.js";
-import fe from "./ui-components.es130.js";
-import S from "./ui-components.es119.js";
-import ge from "./ui-components.es115.js";
-var M;
-const Te = u(x, {
-  name: "MuiTablePagination",
-  slot: "Root"
-})(y(({
-  theme: t
+import { j as e } from "./ui-components.es15.js";
+import * as h from "react";
+import { Toolbar as F, ColumnsPanelTrigger as E, ToolbarButton as a, FilterPanelTrigger as k, ExportPrint as w, ExportCsv as T, ExportExcel as O, QuickFilterTrigger as P, QuickFilterControl as R, QuickFilterClear as A, QuickFilter as D } from "@mui/x-data-grid-premium";
+import M from "./ui-components.es73.js";
+import Q from "./ui-components.es74.js";
+import B from "./ui-components.es75.js";
+import b from "./ui-components.es76.js";
+import u from "./ui-components.es22.js";
+import { InfoOutline as N } from "@mui/icons-material";
+import V from "./ui-components.es25.js";
+import s from "./ui-components.es26.js";
+import j from "./ui-components.es77.js";
+import L from "./ui-components.es78.js";
+import W from "./ui-components.es79.js";
+import d from "./ui-components.es80.js";
+import g from "./ui-components.es81.js";
+import m from "./ui-components.es34.js";
+import X from "./ui-components.es54.js";
+const q = m(D)({
+  display: "grid",
+  alignItems: "center"
+}), G = m(a)(({
+  theme: r,
+  ownerState: t
 }) => ({
-  overflow: "auto",
-  color: (t.vars || t).palette.text.primary,
-  fontSize: t.typography.pxToRem(14),
-  // Increase the specificity to override TableCell.
-  "&:last-child": {
-    padding: 0
-  }
-}))), ye = u(de, {
-  name: "MuiTablePagination",
-  slot: "Toolbar",
-  overridesResolver: (t, o) => ({
-    [`& .${f.actions}`]: o.actions,
-    ...o.toolbar
-  })
-})(y(({
-  theme: t
+  gridArea: "1 / 1",
+  width: "min-content",
+  height: "min-content",
+  zIndex: 1,
+  opacity: t.expanded ? 0 : 1,
+  pointerEvents: t.expanded ? "none" : "auto",
+  transition: r.transitions.create(["opacity"])
+})), H = m(X)(({
+  theme: r,
+  ownerState: t
 }) => ({
-  minHeight: 52,
-  paddingRight: 2,
-  [`${t.breakpoints.up("xs")} and (orientation: landscape)`]: {
-    minHeight: 52
-  },
-  [t.breakpoints.up("sm")]: {
-    minHeight: 52,
-    paddingRight: 2
-  },
-  [`& .${f.actions}`]: {
-    flexShrink: 0,
-    marginLeft: 20
-  }
-}))), Pe = u("div", {
-  name: "MuiTablePagination",
-  slot: "Spacer"
-})({
-  flex: "1 1 100%"
-}), he = u("p", {
-  name: "MuiTablePagination",
-  slot: "SelectLabel"
-})(y(({
-  theme: t
-}) => ({
-  ...t.typography.body2,
-  flexShrink: 0
-}))), Ie = u(fe, {
-  name: "MuiTablePagination",
-  slot: "Select",
-  overridesResolver: (t, o) => ({
-    [`& .${f.selectIcon}`]: o.selectIcon,
-    [`& .${f.select}`]: o.select,
-    ...o.input,
-    ...o.selectRoot
-  })
-})({
-  color: "inherit",
-  fontSize: "inherit",
-  flexShrink: 0,
-  marginRight: 32,
-  marginLeft: 8,
-  [`& .${f.select}`]: {
-    paddingLeft: 8,
-    paddingRight: 24,
-    textAlign: "right",
-    textAlignLast: "right"
-    // Align <select> on Chrome.
-  }
-}), Re = u(be, {
-  name: "MuiTablePagination",
-  slot: "MenuItem"
-})({}), Se = u("p", {
-  name: "MuiTablePagination",
-  slot: "DisplayedRows"
-})(y(({
-  theme: t
-}) => ({
-  ...t.typography.body2,
-  flexShrink: 0
-})));
-function xe({
-  from: t,
-  to: o,
-  count: a
+  gridArea: "1 / 1",
+  overflowX: "clip",
+  width: t.expanded ? 260 : "var(--trigger-width)",
+  opacity: t.expanded ? 1 : 0,
+  transition: r.transitions.create(["width", "opacity"])
+}));
+function pe({
+  label: r,
+  labelTooltip: t,
+  extra: p,
+  style: C,
+  iconColor: y,
+  ...S
 }) {
-  return `${t}–${o} of ${a !== -1 ? a : `more than ${o}`}`;
-}
-function je(t) {
-  return `Go to ${t} page`;
-}
-const we = (t) => {
-  const {
-    classes: o
-  } = t;
-  return ue({
-    root: ["root"],
-    toolbar: ["toolbar"],
-    spacer: ["spacer"],
-    selectLabel: ["selectLabel"],
-    select: ["select"],
-    input: ["input"],
-    selectIcon: ["selectIcon"],
-    menuItem: ["menuItem"],
-    displayedRows: ["displayedRows"],
-    actions: ["actions"]
-  }, ie, o);
-}, Be = /* @__PURE__ */ le.forwardRef(function(o, a) {
-  const g = ce({
-    props: o,
-    name: "MuiTablePagination"
-  }), {
-    ActionsComponent: T = pe,
-    backIconButtonProps: C,
-    colSpan: $,
-    component: P = x,
-    count: c,
-    disabled: j = !1,
-    getItemAriaLabel: k = je,
-    labelDisplayedRows: N = xe,
-    labelRowsPerPage: A = "Rows per page:",
-    nextIconButtonProps: D,
-    onPageChange: q,
-    onRowsPerPageChange: O,
-    page: d,
-    rowsPerPage: b,
-    rowsPerPageOptions: h = [10, 25, 50, 100],
-    SelectProps: E = {},
-    showFirstButton: F = !1,
-    showLastButton: H = !1,
-    slotProps: I = {},
-    slots: w = {},
-    ...U
-  } = g, r = g, n = we(r), s = I?.select ?? E, z = s.native ? "option" : Re;
-  let B;
-  (P === x || P === "td") && (B = $ || 1e3);
-  const G = v(s.id), L = v(s.labelId), _ = () => c === -1 ? (d + 1) * b : b === -1 ? c : Math.min(c, (d + 1) * b), p = {
-    slots: w,
-    slotProps: I
-  }, [V, J] = m("root", {
-    ref: a,
-    className: n.root,
-    elementType: Te,
-    externalForwardedProps: {
-      ...p,
-      component: P,
-      ...U
-    },
-    ownerState: r,
-    additionalProps: {
-      colSpan: B
-    }
-  }), [K, Q] = m("toolbar", {
-    className: n.toolbar,
-    elementType: ye,
-    externalForwardedProps: p,
-    ownerState: r
-  }), [W, X] = m("spacer", {
-    className: n.spacer,
-    elementType: Pe,
-    externalForwardedProps: p,
-    ownerState: r
-  }), [Y, Z] = m("selectLabel", {
-    className: n.selectLabel,
-    elementType: he,
-    externalForwardedProps: p,
-    ownerState: r,
-    additionalProps: {
-      id: L
-    }
-  }), [ee, te] = m("select", {
-    className: n.select,
-    elementType: Ie,
-    externalForwardedProps: p,
-    ownerState: r
-  }), [oe, ne] = m("menuItem", {
-    className: n.menuItem,
-    elementType: z,
-    externalForwardedProps: p,
-    ownerState: r
-  }), [ae, se] = m("displayedRows", {
-    className: n.displayedRows,
-    elementType: Se,
-    externalForwardedProps: p,
-    ownerState: r
-  });
-  return /* @__PURE__ */ i.jsx(V, {
-    ...J,
-    children: /* @__PURE__ */ i.jsxs(K, {
-      ...Q,
-      children: [/* @__PURE__ */ i.jsx(W, {
-        ...X
-      }), h.length > 1 && /* @__PURE__ */ i.jsx(Y, {
-        ...Z,
-        children: A
-      }), h.length > 1 && /* @__PURE__ */ i.jsx(ee, {
-        variant: "standard",
-        ...!s.variant && {
-          input: M || (M = /* @__PURE__ */ i.jsx(me, {}))
-        },
-        value: b,
-        onChange: O,
-        id: G,
-        labelId: L,
-        ...s,
-        classes: {
-          ...s.classes,
-          // TODO v5 remove `classes.input`
-          root: R(n.input, n.selectRoot, (s.classes || {}).root),
-          select: R(n.select, (s.classes || {}).select),
-          // TODO v5 remove `selectIcon`
-          icon: R(n.selectIcon, (s.classes || {}).icon)
+  const [c, o] = h.useState(!1), x = h.useRef(null), l = y ?? "inherit", {
+    printOptions: v,
+    csvOptions: I,
+    excelOptions: z,
+    ...J
+  } = S;
+  return /* @__PURE__ */ e.jsxs(F, { style: C, children: [
+    typeof r != "string" && r,
+    /* @__PURE__ */ e.jsxs(V, { fontWeight: "medium", sx: {
+      flex: 1,
+      mx: 0.5,
+      display: "flex",
+      alignItems: "center",
+      gap: 1
+    }, children: [
+      typeof r == "string" && r,
+      t && (typeof t == "string" || typeof t == "number") ? /* @__PURE__ */ e.jsx(s, { title: t, children: /* @__PURE__ */ e.jsx(N, { fontSize: "inherit", color: "primary" }) }) : t
+    ] }),
+    p && /* @__PURE__ */ e.jsxs(e.Fragment, { children: [
+      p,
+      /* @__PURE__ */ e.jsx(j, { orientation: "vertical", variant: "middle", flexItem: !0, sx: {
+        mx: 0.5
+      } })
+    ] }),
+    /* @__PURE__ */ e.jsx(s, { title: "Columns", children: /* @__PURE__ */ e.jsx(E, { render: /* @__PURE__ */ e.jsx(a, {}), children: /* @__PURE__ */ e.jsx(M, { fontSize: "small", htmlColor: l }) }) }),
+    /* @__PURE__ */ e.jsx(s, { title: "Filters", children: /* @__PURE__ */ e.jsx(k, { render: (n, i) => /* @__PURE__ */ e.jsx(a, { ...n, color: "default", children: /* @__PURE__ */ e.jsx(L, { badgeContent: i.filterCount, color: "primary", variant: "dot", children: /* @__PURE__ */ e.jsx(Q, { fontSize: "small", htmlColor: l }) }) }) }) }),
+    /* @__PURE__ */ e.jsx(j, { orientation: "vertical", variant: "middle", flexItem: !0, sx: {
+      mx: 0.5
+    } }),
+    /* @__PURE__ */ e.jsx(s, { title: "Export", children: /* @__PURE__ */ e.jsx(a, { ref: x, id: "export-menu-trigger", "aria-controls": "export-menu", "aria-haspopup": "true", "aria-expanded": c ? "true" : void 0, onClick: () => o(!0), children: /* @__PURE__ */ e.jsx(B, { fontSize: "small", htmlColor: l }) }) }),
+    /* @__PURE__ */ e.jsxs(W, { id: "export-menu", anchorEl: x.current, open: c, onClose: () => o(!1), anchorOrigin: {
+      vertical: "bottom",
+      horizontal: "right"
+    }, transformOrigin: {
+      vertical: "top",
+      horizontal: "right"
+    }, slotProps: {
+      list: {
+        "aria-labelledby": "export-menu-trigger"
+      }
+    }, children: [
+      /* @__PURE__ */ e.jsx(w, { options: v, render: /* @__PURE__ */ e.jsx(d, {}), onClick: () => o(!1), children: "Print" }),
+      /* @__PURE__ */ e.jsx(T, { options: {
+        ...typeof r == "string" ? {
+          fileName: r
+        } : {},
+        ...I
+      }, render: /* @__PURE__ */ e.jsx(d, {}), onClick: () => o(!1), children: "Download as CSV" }),
+      /* @__PURE__ */ e.jsx(O, { options: {
+        ...typeof r == "string" ? {
+          fileName: r
+        } : {},
+        ...z
+      }, render: /* @__PURE__ */ e.jsx(d, {}), onClick: () => o(!1), children: "Download as Excel" })
+    ] }),
+    /* @__PURE__ */ e.jsxs(q, { children: [
+      /* @__PURE__ */ e.jsx(P, { render: (n, i) => /* @__PURE__ */ e.jsx(s, { title: "Search", enterDelay: 0, children: /* @__PURE__ */ e.jsx(G, { ...n, ownerState: {
+        expanded: i.expanded
+      }, color: "default", "aria-disabled": i.expanded, children: /* @__PURE__ */ e.jsx(u, { fontSize: "small", htmlColor: l }) }) }) }),
+      /* @__PURE__ */ e.jsx(R, { render: ({
+        ref: n,
+        ...i
+      }, f) => /* @__PURE__ */ e.jsx(H, { ...i, ownerState: {
+        expanded: f.expanded
+      }, inputRef: n, "aria-label": "Search", placeholder: "Search...", size: "small", slotProps: {
+        input: {
+          startAdornment: /* @__PURE__ */ e.jsx(g, { position: "start", children: /* @__PURE__ */ e.jsx(u, { fontSize: "small" }) }),
+          endAdornment: f.value ? /* @__PURE__ */ e.jsx(g, { position: "end", children: /* @__PURE__ */ e.jsx(A, { edge: "end", size: "small", "aria-label": "Clear search", material: {
+            sx: {
+              marginRight: -0.75
+            }
+          }, children: /* @__PURE__ */ e.jsx(b, { fontSize: "small" }) }) }) : null,
+          ...i.slotProps?.input
         },
-        disabled: j,
-        ...te,
-        children: h.map((l) => /* @__PURE__ */ re(oe, {
-          ...ne,
-          key: l.label ? l.label : l,
-          value: l.value ? l.value : l
-        }, l.label ? l.label : l))
-      }), /* @__PURE__ */ i.jsx(ae, {
-        ...se,
-        children: N({
-          from: c === 0 ? 0 : d * b + 1,
-          to: _(),
-          count: c === -1 ? -1 : c,
-          page: d
-        })
-      }), /* @__PURE__ */ i.jsx(T, {
-        className: n.actions,
-        backIconButtonProps: C,
-        count: c,
-        nextIconButtonProps: D,
-        onPageChange: q,
-        page: d,
-        rowsPerPage: b,
-        showFirstButton: F,
-        showLastButton: H,
-        slotProps: I.actions,
-        slots: w.actions,
-        getItemAriaLabel: k,
-        disabled: j
-      })]
-    })
-  });
-});
-process.env.NODE_ENV !== "production" && (Be.propTypes = {
-  // ┌────────────────────────────── Warning ──────────────────────────────┐
-  // │ These PropTypes are generated from the TypeScript type definitions. │
-  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
-  // └─────────────────────────────────────────────────────────────────────┘
-  /**
-   * The component used for displaying the actions.
-   * Either a string to use a HTML element or a component.
-   * @default TablePaginationActions
-   */
-  ActionsComponent: e.elementType,
-  /**
-   * Props applied to the back arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) component.
-   *
-   * This prop is an alias for `slotProps.actions.previousButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.previousButton` instead.
-   */
-  backIconButtonProps: e.object,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: e.object,
-  /**
-   * @ignore
-   */
-  colSpan: e.number,
-  /**
-   * The component used for the root node.
-   * Either a string to use a HTML element or a component.
-   */
-  component: e.elementType,
-  /**
-   * The total number of rows.
-   *
-   * To enable server side pagination for an unknown number of items, provide -1.
-   */
-  count: S.isRequired,
-  /**
-   * If `true`, the component is disabled.
-   * @default false
-   */
-  disabled: e.bool,
-  /**
-   * Accepts a function which returns a string value that provides a user-friendly name for the current page.
-   * This is important for screen reader users.
-   *
-   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
-   * @param {string} type The link or button type to format ('first' | 'last' | 'next' | 'previous').
-   * @returns {string}
-   * @default function defaultGetAriaLabel(type) {
-   *   return `Go to ${type} page`;
-   * }
-   */
-  getItemAriaLabel: e.func,
-  /**
-   * Customize the displayed rows label. Invoked with a `{ from, to, count, page }`
-   * object.
-   *
-   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
-   * @default function defaultLabelDisplayedRows({ from, to, count }) {
-   *   return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
-   * }
-   */
-  labelDisplayedRows: e.func,
-  /**
-   * Customize the rows per page label.
-   *
-   * For localization purposes, you can use the provided [translations](https://mui.com/material-ui/guides/localization/).
-   * @default 'Rows per page:'
-   */
-  labelRowsPerPage: e.node,
-  /**
-   * Props applied to the next arrow [`IconButton`](https://mui.com/material-ui/api/icon-button/) element.
-   *
-   * This prop is an alias for `slotProps.actions.nextButton` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.actions.nextButton` instead.
-   */
-  nextIconButtonProps: e.object,
-  /**
-   * Callback fired when the page is changed.
-   *
-   * @param {React.MouseEvent<HTMLButtonElement> | null} event The event source of the callback.
-   * @param {number} page The page selected.
-   */
-  onPageChange: e.func.isRequired,
-  /**
-   * Callback fired when the number of rows per page is changed.
-   *
-   * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
-   */
-  onRowsPerPageChange: e.func,
-  /**
-   * The zero-based index of the current page.
-   */
-  page: ge(S.isRequired, (t) => {
-    const {
-      count: o,
-      page: a,
-      rowsPerPage: g
-    } = t;
-    if (o === -1)
-      return null;
-    const T = Math.max(0, Math.ceil(o / g) - 1);
-    return a < 0 || a > T ? new Error(`MUI: The page prop of a TablePagination is out of range (0 to ${T}, but page is ${a}).`) : null;
-  }),
-  /**
-   * The number of rows per page.
-   *
-   * Set -1 to display all the rows.
-   */
-  rowsPerPage: S.isRequired,
-  /**
-   * Customizes the options of the rows per page select field. If less than two options are
-   * available, no select field will be displayed.
-   * Use -1 for the value with a custom label to show all the rows.
-   * @default [10, 25, 50, 100]
-   */
-  rowsPerPageOptions: e.arrayOf(e.oneOfType([e.number, e.shape({
-    label: e.string.isRequired,
-    value: e.number.isRequired
-  })]).isRequired),
-  /**
-   * Props applied to the rows per page [`Select`](https://mui.com/material-ui/api/select/) element.
-   *
-   * This prop is an alias for `slotProps.select` and will be overridden by it if both are used.
-   * @deprecated Use `slotProps.select` instead.
-   *
-   * @default {}
-   */
-  SelectProps: e.object,
-  /**
-   * If `true`, show the first-page button.
-   * @default false
-   */
-  showFirstButton: e.bool,
-  /**
-   * If `true`, show the last-page button.
-   * @default false
-   */
-  showLastButton: e.bool,
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps: e.shape({
-    actions: e.shape({
-      firstButton: e.object,
-      firstButtonIcon: e.object,
-      lastButton: e.object,
-      lastButtonIcon: e.object,
-      nextButton: e.object,
-      nextButtonIcon: e.object,
-      previousButton: e.object,
-      previousButtonIcon: e.object
-    }),
-    displayedRows: e.oneOfType([e.func, e.object]),
-    menuItem: e.oneOfType([e.func, e.object]),
-    root: e.oneOfType([e.func, e.object]),
-    select: e.object,
-    selectLabel: e.oneOfType([e.func, e.object]),
-    spacer: e.oneOfType([e.func, e.object]),
-    toolbar: e.oneOfType([e.func, e.object])
-  }),
-  /**
-   * The components used for each slot inside.
-   * @default {}
-   */
-  slots: e.shape({
-    actions: e.shape({
-      firstButton: e.elementType,
-      firstButtonIcon: e.elementType,
-      lastButton: e.elementType,
-      lastButtonIcon: e.elementType,
-      nextButton: e.elementType,
-      nextButtonIcon: e.elementType,
-      previousButton: e.elementType,
-      previousButtonIcon: e.elementType
-    }),
-    displayedRows: e.elementType,
-    menuItem: e.elementType,
-    root: e.elementType,
-    select: e.elementType,
-    selectLabel: e.elementType,
-    spacer: e.elementType,
-    toolbar: e.elementType
-  }),
-  /**
-   * 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])
-});
+        ...i.slotProps
+      } }) })
+    ] })
+  ] });
+}
 export {
-  Be as default
+  pe as CustomToolbar
 };
 //# sourceMappingURL=ui-components.es47.js.map