@vidispine/vdt-mui 23.3.0-pre.2 → 23.3.0-pre.4

package/dist/es/general/ScrubLine/ScrubLine.js

@@ -1,130 +1,69 @@
-import { jsxs as w, jsx as l } from "react/jsx-runtime";
-import { useRef as E } from "react";
-import o from "prop-types";
-import f from "@mui/material/Box";
-import { styled as p } from "@mui/material/styles";
-import R from "../CompactLabel/index.js";
-const P = p(f)(() => ({
+import { jsxs as R, jsx as s } from "react/jsx-runtime";
+import { useRef as S } from "react";
+import u from "@mui/material/Box";
+import { styled as c } from "@mui/material/styles";
+import w from "../CompactLabel/index.js";
+const F = c(u)(() => ({
   position: "relative",
   width: "100%",
   height: "100%"
-})), S = p(f, {
-  shouldForwardProp: (t) => !["position", "show"].includes(t)
-})(({
-  position: t,
-  show: i
-}) => ({
+})), W = c(u)(() => ({
   position: "absolute",
   top: 0,
   backgroundColor: "#FFF",
   width: "2px",
   height: "100%",
   zIndex: 6,
-  opacity: 0.9,
-  left: t,
-  display: i ? "block" : "none"
-})), F = p(f)(() => ({
+  opacity: 0.9
+})), j = c(u)(() => ({
   height: "inherit",
   zIndex: 3
 })), z = {
-  Root: P,
-  CompactLabel: R,
-  LineBox: S,
-  ContentBox: F
-};
-function h({
-  position: t,
-  offset: i,
-  show: x,
+  Root: F,
+  CompactLabel: w,
+  LineBox: W,
+  ContentBox: j
+}, I = ({
+  position: h,
+  offset: p,
+  show: a,
   label: d,
-  children: M,
-  onMouseMove: y,
-  onMouseEnter: B,
-  onMouseLeave: b,
-  components: L,
-  componentsProps: r
-}) {
-  var m;
+  children: m,
+  onMouseMove: x,
+  onMouseEnter: M,
+  onMouseLeave: v,
+  components: B,
+  componentsProps: e
+}) => {
+  var l;
   const {
-    Root: v,
-    LineBox: C,
-    CompactLabel: O,
-    ContentBox: g
-  } = L, a = E(), s = (m = a.current) == null ? void 0 : m.offsetWidth, T = (e) => {
+    Root: L,
+    LineBox: g,
+    CompactLabel: C,
+    ContentBox: y
+  } = B, f = S({
+    offsetWidth: void 0
+  }), n = (l = f.current) == null ? void 0 : l.offsetWidth, b = (o) => {
     try {
-      return Math.round(e.getBoundingClientRect().left);
+      return Math.round(o.getBoundingClientRect().left);
     } catch {
       return 0;
     }
-  }, j = (e) => {
-    const n = T(e.currentTarget), u = e.clientX - n - i;
-    return u < 0 ? 0 : u > s ? s : u;
-  }, c = (e, n) => {
-    n && n(e, {
-      position: j(e),
-      contentWidth: s
+  }, E = (o) => {
+    const t = b(o.currentTarget), r = o.clientX - t - p;
+    return r < 0 ? 0 : r > n ? n : r;
+  }, i = (o, t) => {
+    t && t(o, {
+      position: E(o),
+      contentWidth: n
     });
   };
-  return /* @__PURE__ */ w(v, { onMouseMove: (e) => c(e, y), onMouseEnter: (e) => c(e, B), onMouseLeave: (e) => c(e, b), ...r.root, children: [
-    /* @__PURE__ */ l(C, { position: t, show: x, ...r.lineBox, children: d && /* @__PURE__ */ l(O, { children: d }) }),
-    /* @__PURE__ */ l(g, { ref: a, ...r.contentBox, children: M })
+  return /* @__PURE__ */ R(L, { onMouseMove: (o) => i(o, x), onMouseEnter: (o) => i(o, M), onMouseLeave: (o) => i(o, v), ...e.root, children: [
+    /* @__PURE__ */ s(g, { left: h, display: a ? "block" : "none", ...e.lineBox, children: d && /* @__PURE__ */ s(C, { children: d }) }),
+    /* @__PURE__ */ s(y, { ref: f, ...e.contentBox, children: m })
   ] });
-}
-h.propTypes = {
-  /**
-   * Set the position of the scrub line
-   */
-  position: o.number,
-  /**
-   * Custom offset the scrub line from the mouse pointer
-   */
-  offset: o.number,
-  /**
-   * Callback for clicking expand button
-   */
-  show: o.bool,
-  /**
-   * Add a label next to the scrub line
-   */
-  label: o.string,
-  /**
-   * Children for component
-   */
-  children: o.oneOfType([o.arrayOf(o.node), o.node]),
-  // Callbacks
-  /**
-   * Callback for when mouse moving over children/content
-   */
-  onMouseMove: o.func,
-  /**
-   * Callback for mouse leaving children/content
-   */
-  onMouseLeave: o.func,
-  /**
-   * Callback for mouse leaving children/content
-   */
-  onMouseEnter: o.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: o.shape({
-    Root: o.elementType,
-    LineBox: o.elementType,
-    CompactLabel: o.elementType,
-    ContentBox: o.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: o.shape({
-    root: o.instanceOf(Object),
-    lineBox: o.instanceOf(Object),
-    compactLabel: o.instanceOf(Object),
-    contentBox: o.instanceOf(Object)
-  })
 };
-h.defaultProps = {
+I.defaultProps = {
   position: 0,
   offset: 0,
   show: !0,
@@ -137,5 +76,5 @@ h.defaultProps = {
   componentsProps: void 0
 };
 export {
-  h as default
+  I as default
 };

package/dist/es/general/ScrubLine/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './ScrubLine';
+declare const StyledComponent: typeof Component;
+export default StyledComponent;

package/dist/es/general/ScrubLine/index.js

@@ -4,7 +4,7 @@ import m from "./ScrubLine.js";
 const o = "ScrubLine", e = `Vdt${o}`, i = n(e)(m), s = r(i, {
   name: e,
   overridesResolver: (d, t) => t.root
-})(() => ({}));
+})({});
 s.displayName = o;
 export {
   s as default

package/dist/es/general/Sort/Sort.d.ts

@@ -0,0 +1,50 @@
+import { SortMenuItemProps } from './components/MenuItem';
+import { FC } from 'react';
+/// <reference types="react" />
+import VdtButtonBase from './components/ButtonBase';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+declare const SORT: {
+    readonly descending: "descending";
+    readonly ascending: "ascending";
+};
+type StyledVdtButtonBaseType = StyledComponent<typeof VdtButtonBase, {
+    descending?: boolean;
+}>;
+declare const defaultComponents: {
+    Root: any;
+    Menu: any;
+    MenuItem: FC<SortMenuItemProps>;
+    ButtonBase: StyledVdtButtonBaseType;
+};
+export interface SortProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Text shown before sort options
+     */
+    caption?: string;
+    /**
+     * Function that is called when sort option is changed
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        value: any;
+        direction: keyof typeof SORT;
+    }) => void;
+    /**
+     * Array of sort options
+     */
+    options?: Array<{
+        value: any;
+        label: string;
+    }>;
+    /**
+     * Initial sort option
+     */
+    initialSort?: {
+        option: {
+            value: any;
+            label: string;
+        };
+        direction?: keyof typeof SORT;
+    };
+}
+declare const Sort: React.FC<SortProps>;
+export default Sort;

package/dist/es/general/Sort/Sort.js

@@ -1,98 +1,100 @@
-import { jsxs as A, jsx as m } from "react/jsx-runtime";
-import { useState as M } from "react";
-import e from "prop-types";
-import E from "@mui/material/Box";
-import P from "@mui/material/Menu";
-import { styled as u, alpha as W } from "@mui/material/styles";
-import D from "./components/ButtonBase.js";
-import F from "./components/MenuItem.js";
-const V = u(E)(({
-  theme: n
+import { jsxs as L, jsx as m } from "react/jsx-runtime";
+import { useState as S } from "react";
+import j from "@mui/material/Box";
+import z from "@mui/material/Menu";
+import { styled as u, alpha as E } from "@mui/material/styles";
+import W from "./components/ButtonBase.js";
+import A from "./components/MenuItem.js";
+const r = {
+  descending: "descending",
+  ascending: "ascending"
+}, D = u(j)(({
+  theme: t
 }) => {
-  var t;
+  var e;
   return {
-    color: (t = n.palette) == null ? void 0 : t.secondary.main,
+    color: (e = t.palette) == null ? void 0 : e.secondary.main,
     paddingLeft: 9,
     paddingRight: 9,
     borderRadius: 4
   };
-}), $ = u(P)(() => ({
+}), F = u(z)(() => ({
   minWidth: 150,
   marginTop: 4
-})), q = u(F)(({
-  theme: n
+})), V = u(A)(({
+  theme: t
 }) => {
-  var t, a, o, l;
+  var e, a, n, l;
   return {
     "&$selected": {
-      backgroundColor: n.palette && W((a = (t = n.palette) == null ? void 0 : t.secondary) == null ? void 0 : a.main, 0.16),
-      color: (l = (o = n.palette) == null ? void 0 : o.secondary) == null ? void 0 : l.main
+      backgroundColor: t.palette && E((a = (e = t.palette) == null ? void 0 : e.secondary) == null ? void 0 : a.main, 0.16),
+      color: (l = (n = t.palette) == null ? void 0 : n.secondary) == null ? void 0 : l.main
     }
   };
-}), w = u(D, {
-  shouldForwardProp: (n) => n !== "descending"
+}), $ = u(W, {
+  shouldForwardProp: (t) => t !== "descending"
 })(({
-  descending: n,
-  theme: t
+  theme: t,
+  descending: e
 }) => {
-  var a, o;
+  var a, n;
   return {
     "& .MuiBox-root": {
       marginRight: "-2px",
       marginLeft: "4px",
-      color: (o = (a = t.palette) == null ? void 0 : a.secondary) == null ? void 0 : o.main,
+      color: (n = (a = t.palette) == null ? void 0 : a.secondary) == null ? void 0 : n.main,
       transition: "transform .2s ease-out",
       transform: "rotate(180deg)",
-      ...n && {
+      ...e && {
         transform: "rotate(0deg)"
       }
     }
   };
-}), G = {
-  Root: V,
-  Menu: $,
-  MenuItem: q,
-  ButtonBase: w
-};
-function B({
-  caption: n,
-  options: t,
-  sortAsc: a,
-  sortDesc: o,
-  initialSort: l,
-  onChange: p,
-  components: O,
+}), q = {
+  Root: D,
+  Menu: F,
+  MenuItem: V,
+  ButtonBase: $
+}, w = ({
+  caption: t,
+  options: e,
+  initialSort: a,
+  onChange: n,
+  components: l,
   componentsProps: i
-}) {
-  var y, b;
+}) => {
+  var v, h;
   const {
-    Root: S,
-    Menu: T,
-    MenuItem: x,
-    ButtonBase: C
-  } = O, [f, g] = M(null), I = (r) => {
-    g(r.currentTarget);
-  }, h = () => {
-    g(null);
-  }, [s, j] = M(l || {
-    option: {},
-    direction: o
-  }), R = (r, v) => {
+    Root: b,
+    Menu: B,
+    MenuItem: y,
+    ButtonBase: x
+  } = l, [g, p] = S(null), C = (o) => {
+    p(o.currentTarget);
+  }, f = () => {
+    p(null);
+  }, [d, I] = S(a || {
+    option: {
+      value: void 0,
+      label: void 0
+    },
+    direction: r.descending
+  }), O = (o, M) => {
     let {
-      option: c,
-      direction: d
-    } = s;
-    v !== c.value ? c = t.find((z) => z.value === v) : d = d === o ? a : o, j({
-      option: c,
-      direction: d
-    }), p && p(r, {
-      value: c.value,
-      direction: d
-    }), h();
-  }, k = t === void 0 || t.length === 0, L = s.direction !== a;
-  return /* @__PURE__ */ A(S, { ...i.root, children: [
-    /* @__PURE__ */ m(C, { onClick: I, disabled: k, label: n, optionLabel: s.option.label || "", descending: L, ...i.buttonBase }),
-    /* @__PURE__ */ m(T, { anchorEl: f, keepMounted: !0, open: !!f, onClose: h, elevation: 1, marginThreshold: 0, PaperProps: {
+      option: s,
+      direction: c
+    } = d;
+    M !== s.value ? s = e.find((T) => T.value === M) : c = c === r.descending ? r.ascending : r.descending, I({
+      option: s,
+      direction: c
+    }), n && n(o, {
+      value: s.value,
+      direction: c
+    }), f();
+  }, R = e === void 0 || e.length === 0, k = d.direction !== r.ascending;
+  return /* @__PURE__ */ L(b, { ...i.root, children: [
+    /* @__PURE__ */ m(x, { onClick: C, disabled: R, label: t, optionLabel: d.option.label || "", descending: k, ...i.buttonBase }),
+    /* @__PURE__ */ m(B, { anchorEl: g, keepMounted: !0, open: !!g, onClose: f, elevation: 1, marginThreshold: 0, PaperProps: {
       style: {
         minWidth: 150,
         marginTop: 4
@@ -100,80 +102,22 @@ function B({
     }, ...i.menu, anchorOrigin: {
       vertical: "bottom",
       horizontal: "left",
-      ...((y = i.menu) == null ? void 0 : y.anchorOrigin) || {}
+      ...((v = i.menu) == null ? void 0 : v.anchorOrigin) || {}
     }, transformOrigin: {
       vertical: "top",
       horizontal: "left",
-      ...((b = i.menu) == null ? void 0 : b.transformOrigin) || {}
-    }, children: t.map((r) => /* @__PURE__ */ m(x, { value: r.value, label: r.label, onClick: R, selected: r.value === s.option.value, ...i.menuItem }, r.value)) })
+      ...((h = i.menu) == null ? void 0 : h.transformOrigin) || {}
+    }, children: e.map((o) => /* @__PURE__ */ m(y, { value: o.value, label: o.label, onClick: O, selected: o.value === d.option.value, ...i.menuItem }, o.value)) })
   ] });
-}
-B.propTypes = {
-  /**
-   * Text shown before sort options
-   */
-  caption: e.string,
-  /**
-   * Value string for ascending sort
-   */
-  sortAsc: e.string,
-  /**
-   * Value string for descending sort
-   */
-  sortDesc: e.string,
-  /**
-   * Function that is called when sort option is changed
-   */
-  onChange: e.func,
-  /**
-   * Array of sort options
-   */
-  options: e.arrayOf(e.shape({
-    // eslint-disable-next-line react/forbid-prop-types
-    value: e.any,
-    label: e.string
-  })),
-  /**
-   * Initial sort option
-   */
-  initialSort: e.shape({
-    option: e.shape({
-      // eslint-disable-next-line react/forbid-prop-types
-      value: e.any,
-      label: e.string
-    }),
-    direction: e.string
-  }),
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    Menu: e.elementType,
-    MenuItem: e.elementType,
-    ButtonBase: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    menu: e.instanceOf(Object),
-    menuItem: e.instanceOf(Object),
-    buttonBase: e.instanceOf(Object)
-  })
 };
-B.defaultProps = {
+w.defaultProps = {
   caption: "Sort by",
-  sortAsc: "ascending",
-  sortDesc: "descending",
   onChange: void 0,
   initialSort: void 0,
   options: [],
-  components: G,
+  components: q,
   componentsProps: void 0
 };
 export {
-  B as default
+  w as default
 };

package/dist/es/general/Sort/components/ButtonBase.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { ButtonBaseProps as MuiButtonBaseProps } from '@mui/material';
+export interface SortButtonBaseProps extends MuiButtonBaseProps {
+    disabled?: boolean;
+    label?: string;
+    optionLabel?: string;
+}
+declare const SortButtonBase: React.FC<SortButtonBaseProps>;
+export default SortButtonBase;

package/dist/es/general/Sort/components/ButtonBase.js

@@ -1,19 +1,17 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import e from "@mui/icons-material/esm/ArrowDropDown";
-import p from "@mui/material/Box";
-import a from "@mui/material/ButtonBase";
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import p from "@mui/icons-material/esm/ArrowDropDown";
+import a from "@mui/material/Box";
+import e from "@mui/material/ButtonBase";
 import c from "@mui/material/Typography";
-function h({
-  disabled: o,
+const h = ({
+  disabled: r,
   label: t,
-  optionLabel: n,
-  ...i
-}) {
-  return /* @__PURE__ */ m(a, { disabled: o, ...i, children: [
-    /* @__PURE__ */ r(c, { variant: "caption", color: o ? "textSecondary" : "textPrimary", children: `${t}: ${n}` }),
-    /* @__PURE__ */ r(p, { children: /* @__PURE__ */ r(e, {}) })
-  ] });
-}
+  optionLabel: i,
+  ...m
+}) => /* @__PURE__ */ n(e, { disabled: r, ...m, children: [
+  /* @__PURE__ */ o(c, { variant: "caption", color: r ? "textSecondary" : "textPrimary", children: `${t}: ${i}` }),
+  /* @__PURE__ */ o(a, { children: /* @__PURE__ */ o(p, {}) })
+] });
 export {
   h as default
 };

package/dist/es/general/Sort/components/MenuItem.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { MenuItemProps as MuiMenuItemProps } from '@mui/material';
+export interface SortMenuItemProps extends Omit<MuiMenuItemProps, 'onClick'> {
+    value?: string;
+    label?: string;
+    selected?: boolean;
+    onClick?: (event: React.MouseEvent<HTMLLIElement>, value: string) => void;
+}
+declare const SortMenuItem: React.FC<SortMenuItemProps>;
+export default SortMenuItem;

package/dist/es/general/Sort/components/MenuItem.js

@@ -1,15 +1,13 @@
 import { jsx as r } from "react/jsx-runtime";
 import p from "@mui/material/MenuItem";
-import u from "@mui/material/Typography";
-function d({
-  value: t,
-  label: e = "",
-  selected: o,
-  onClick: n,
-  ...i
-}) {
-  return /* @__PURE__ */ r(p, { selected: o, onClick: (m) => n(m, t), dense: !0, ...i, children: /* @__PURE__ */ r(u, { variant: "caption", children: e }) });
-}
+import a from "@mui/material/Typography";
+const f = ({
+  value: o,
+  label: t = "",
+  selected: e,
+  onClick: i,
+  ...n
+}) => /* @__PURE__ */ r(p, { selected: e, onClick: (m) => i(m, o), dense: !0, ...n, children: /* @__PURE__ */ r(a, { variant: "caption", children: t ?? "" }) });
 export {
-  d as default
+  f as default
 };

package/dist/es/general/Sort/index.d.ts

@@ -0,0 +1,3 @@
+import Component from './Sort';
+declare const StyledComponent: typeof Component;
+export default StyledComponent;

package/dist/es/general/Sort/index.js

@@ -4,7 +4,7 @@ import n from "./Sort.js";
 const o = "Sort", t = `Vdt${o}`, s = m(t)(n), i = r(s, {
   name: t,
   overridesResolver: (d, e) => e.root
-})(() => ({}));
+})({});
 i.displayName = o;
 export {
   i as default

package/dist/es/general/TablePagination/TablePagination.d.ts

@@ -0,0 +1,47 @@
+/// <reference types="react" />
+import { TablePagination as MuiTablePagination } from '@mui/material';
+import type { WithOverrideProps } from '../../_types';
+declare const StyledMuiTablePagination: typeof MuiTablePagination;
+declare const defaultComponents: {
+    Root: typeof StyledMuiTablePagination;
+};
+export interface TablePaginationProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * The total amount of entities
+     */
+    count?: number;
+    /**
+     * Current page
+     */
+    page?: number;
+    /**
+     * Number of rows shown per page
+     */
+    rowsPerPage?: number;
+    /**
+     * An array of options for how many rows should be shown per page
+     */
+    rowsPerPageOptions?: number[];
+    /**
+     * Number of rows shown per page
+     */
+    showFirstButton?: boolean;
+    /**
+     * Number of rows shown per page
+     */
+    showLastButton?: boolean;
+    /**
+     * Callback for when the page changes
+     */
+    onPageChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>, payload: {
+        value: number;
+    }) => void;
+    /**
+     * Callback for when the user selects from the rowsPerPageOptions
+     */
+    onRowsPerPageChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, payload: {
+        value: number;
+    }) => void;
+}
+declare const TablePagination: React.FC<TablePaginationProps>;
+export default TablePagination;