@vidispine/vdt-mui 23.2.0-pre.2 → 23.2.0

package/dist/es/item/ItemTable/components/ItemTableHead.js

@@ -0,0 +1,35 @@
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
+import n from "@mui/material/Checkbox";
+import x from "@mui/material/Skeleton";
+import i from "@mui/material/TableCell";
+import f from "@mui/material/TableHead";
+import b from "@mui/material/TableRow";
+function w({
+  rows: m,
+  isLoading: c,
+  checked: d,
+  showAvatar: h,
+  indeterminate: t,
+  onCheck: a,
+  ...p
+}) {
+  return /* @__PURE__ */ r(f, { ...p, children: /* @__PURE__ */ l(b, { children: [
+    a && /* @__PURE__ */ r(i, { padding: "checkbox", children: c ? /* @__PURE__ */ r(x, { sx: {
+      width: "18px",
+      height: "36px",
+      margin: "auto"
+    } }) : /* @__PURE__ */ r(n, { checked: d || t, indeterminate: t, onChange: (o) => {
+      var e;
+      return a(o, {
+        value: (e = o == null ? void 0 : o.target) == null ? void 0 : e.checked
+      });
+    } }) }),
+    h && /* @__PURE__ */ r(i, { padding: "checkbox" }),
+    m.map(({
+      label: o
+    }, e) => /* @__PURE__ */ r(i, { children: o }, o || e))
+  ] }) });
+}
+export {
+  w as default
+};

package/dist/es/item/ItemTable/index.js

@@ -0,0 +1,11 @@
+import { styled as r } from "@mui/material/styles";
+import { withOverrides as m } from "../../_utils/withOverrides.js";
+import n from "./ItemTable.js";
+const e = "ItemTable", o = `Vdt${e}`, s = m(o)(n), i = r(s, {
+  name: o,
+  overridesResolver: (a, t) => t.root
+})(() => ({}));
+i.displayName = e;
+export {
+  i as default
+};

package/dist/es/item/ItemTableRow/ItemTableRow.js

@@ -0,0 +1,150 @@
+import { jsxs as R, jsx as r } from "react/jsx-runtime";
+import { useMemo as g, useState as V } from "react";
+import e from "prop-types";
+import E from "@mui/material/TableRow";
+import I from "@mui/material/TableCell";
+import M from "@mui/material/Skeleton";
+import S from "@mui/material/Checkbox";
+import { styled as q } from "@mui/material/styles";
+import N from "@vidispine/proptypes";
+import { uuidv4 as P } from "../../_utils/uuidv4.js";
+import "clsx";
+import { getEntityText as U } from "../../entity/_utils/getEntityText.js";
+import z from "../../entity/EntityTableRow/components/EntityTableCellAvatar.js";
+import B from "../../entity/EntityTableRow/components/EntityTableCellCheckbox.js";
+const D = q(E)(({
+  onClick: t
+}) => ({
+  ...t ? {
+    cursor: "pointer"
+  } : {}
+})), F = {
+  Root: D,
+  TableCell: I,
+  TableCellAvatar: z,
+  TableCellCheckbox: B,
+  Checkbox: S
+};
+function h({
+  itemType: t,
+  rows: b,
+  defaultValue: s,
+  checked: c,
+  showAvatar: d,
+  avatarVariant: u,
+  isLoading: n,
+  onClick: f,
+  onCheck: p,
+  components: v,
+  componentsProps: l
+}) {
+  const {
+    Root: k,
+    TableCell: T,
+    TableCellAvatar: x,
+    TableCellCheckbox: y,
+    Checkbox: O
+  } = v, A = g(() => b.map(({
+    value: o
+  } = {}) => U(o, {
+    itemType: t
+  }) || s), [t, s, b]), [j, w] = V(!1), i = c === void 0 ? j : c, m = typeof p != "function" ? void 0 : (o) => {
+    const a = !i;
+    p(o, {
+      value: a,
+      itemType: t
+    }), c === void 0 && w(a);
+  };
+  return /* @__PURE__ */ R(k, { hover: !0, selected: i, onClick: typeof f != "function" ? void 0 : (o) => {
+    var a, C;
+    ((a = o == null ? void 0 : o.target) == null ? void 0 : a.nodeName) === "INPUT" && ((C = o == null ? void 0 : o.target) == null ? void 0 : C.checked) !== void 0 || f(o, {
+      itemType: t
+    });
+  }, ...l.root, children: [
+    m && /* @__PURE__ */ r(y, { itemType: t, isLoading: n, ...l.tableCellCheckbox, children: /* @__PURE__ */ r(O, { checked: i, onChange: m, ...l.checkbox }) }),
+    d && /* @__PURE__ */ r(x, { itemType: t, isLoading: n, variant: u, ...l.tableCellAvatar }),
+    A.map((o) => /* @__PURE__ */ r(T, { ...l.tableCell, children: n ? /* @__PURE__ */ r(M, {}) : o }, P()))
+  ] });
+}
+h.propTypes = {
+  /**
+   * The `ItemType` to show
+   */
+  itemType: N.ItemType,
+  /**
+   * A list of what item content to display in the table rows
+   */
+  rows: e.arrayOf(e.shape({
+    value: e.oneOfType([e.node, e.func])
+  })),
+  /**
+   * Add a default value for all row values that are empty
+   */
+  defaultValue: e.string,
+  /**
+   * Set if avatar should be shown on row
+   */
+  showAvatar: e.bool,
+  /**
+   * Whether the checkbox is checked or not
+   */
+  checked: e.bool,
+  /**
+   * Variant/shapes for the Avatar
+   */
+  avatarVariant: e.oneOf(["circular", "rounded", "square"]),
+  /**
+   * Show skeleton table item as loading state
+   */
+  isLoading: e.bool,
+  // Callbacks
+  /**
+   * A function that handles the item being clicked
+   */
+  onClick: e.func,
+  /**
+   * A function that handles the checkbox being clicked
+   */
+  onCheck: e.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    TableCell: e.elementType,
+    TableCellAvatar: e.elementType,
+    TableCellCheckbox: e.elementType,
+    Checkbox: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    tableCell: e.instanceOf(Object),
+    tableCellAvatar: e.shape({
+      entityAvatar: e.instanceOf(Object)
+    }),
+    tableCellCheckbox: e.shape({
+      checkbox: e.instanceOf(Object)
+    }),
+    checkbox: e.instanceOf(Object)
+  })
+};
+h.defaultProps = {
+  itemType: void 0,
+  defaultValue: void 0,
+  rows: [],
+  checked: void 0,
+  showAvatar: !0,
+  avatarVariant: "square",
+  isLoading: !1,
+  onClick: void 0,
+  onCheck: void 0,
+  components: F,
+  componentsProps: void 0
+};
+export {
+  h as default
+};

package/dist/es/item/ItemTableRow/index.js

@@ -0,0 +1,11 @@
+import { styled as r } from "@mui/material/styles";
+import { withOverrides as m } from "../../_utils/withOverrides.js";
+import n from "./ItemTableRow.js";
+const o = "ItemTableRow", e = `Vdt${o}`, s = m(e)(n), i = r(s, {
+  name: e,
+  overridesResolver: (a, t) => t.root
+})(() => ({}));
+i.displayName = o;
+export {
+  i as default
+};

package/dist/es/item/ItemThumbnail/ItemThumbnail.js

@@ -0,0 +1,210 @@
+import { jsx as i, jsxs as T } from "react/jsx-runtime";
+import e from "prop-types";
+import s from "@mui/material/Box";
+import { styled as t } from "@mui/material/styles";
+import w from "@vidispine/proptypes";
+import "../../general/AvatarMenu/index.js";
+import O from "../../general/BlurredBackground/index.js";
+import "../../general/CalendarPicker/index.js";
+import "../../general/CompactBadge/index.js";
+import "../../general/CompactLabel/index.js";
+import j from "../../general/CornerLabelPlacer/index.js";
+import "../../general/ExpandButton/index.js";
+import "../../general/ImageCollage/index.js";
+import "../../general/MediaIcon/index.js";
+import "../../general/MenuItem/index.js";
+import z from "../../general/ScrubLine/index.js";
+import "../../general/Sort/index.js";
+import "../../general/TablePagination/index.js";
+import "../../general/ThemeContext/ThemeContext.js";
+const R = t(s)(({
+  onClick: o
+}) => ({
+  height: "100%",
+  width: "100%",
+  ...o && {
+    cursor: "pointer"
+  }
+})), V = t(z)(() => ({
+  position: "relative",
+  zIndex: 10
+})), $ = t(j)(() => ({
+  height: "100%",
+  width: "100%",
+  position: "absolute",
+  zIndex: 15,
+  top: 0
+})), E = t(O)(() => ({
+  height: "100%",
+  width: "100%",
+  position: "absolute",
+  zIndex: 0,
+  top: 0
+})), F = t(s, {
+  shouldForwardProp: (o) => !["image", "cover"].includes(o)
+})(({
+  image: o,
+  cover: n
+}) => ({
+  height: "inherit",
+  width: "inherit",
+  position: "relative",
+  zIndex: 5,
+  transition: "all .3s ease-in-out",
+  background: o ? `url(${o})` : "none",
+  backgroundPosition: "center",
+  backgroundRepeat: "no-repeat",
+  ...n ? {
+    backgroundSize: "cover"
+  } : {
+    backgroundSize: "contain"
+  }
+})), q = {
+  Root: R,
+  ScrubLine: V,
+  CornerLabelPlacer: $,
+  BlurredBackground: E,
+  ImageBox: F
+};
+function u({
+  itemType: o,
+  thumbnailIndex: n,
+  placeholderImage: p,
+  showBlurredBackground: m,
+  label: b,
+  cover: g,
+  showScrub: h,
+  scrubLabel: f,
+  scrubPosition: B,
+  onClick: l,
+  onMouseMove: v,
+  onMouseEnter: y,
+  onMouseLeave: k,
+  components: x,
+  componentsProps: r
+}) {
+  var d;
+  const {
+    Root: L,
+    ScrubLine: S,
+    BlurredBackground: I,
+    ImageBox: C,
+    CornerLabelPlacer: M
+  } = x, {
+    thumbnails: c
+  } = o || {}, a = ((d = c == null ? void 0 : c.uri) == null ? void 0 : d[n]) || p;
+  return /* @__PURE__ */ i(L, { onClick: typeof l != "function" ? void 0 : (P) => {
+    l(P, {
+      itemType: o,
+      thumbnailIndex: n
+    });
+  }, ...r.root, children: /* @__PURE__ */ T(S, { show: h, label: f, position: B, onMouseMove: v, onMouseEnter: y, onMouseLeave: k, ...r.scrubLine, children: [
+    m && /* @__PURE__ */ i(I, { image: a, ...r.blurredBackground }),
+    /* @__PURE__ */ i(C, { component: "div", image: a, cover: g, ...r.imageBox }),
+    /* @__PURE__ */ i(M, { labelBottomRight: b, ...r.cornerLabelPlacer })
+  ] }) });
+}
+u.propTypes = {
+  /**
+   * ItemType
+   */
+  itemType: w.ItemType,
+  /**
+   * The index for which thumbnail to use from the ItemType
+   */
+  thumbnailIndex: e.number,
+  /**
+   * Add a placeholder if image is unavailable
+   */
+  placeholderImage: e.string,
+  /**
+   * Show a label on the thumbnail
+   */
+  label: e.string,
+  /**
+   * Cover the whole width/height of container
+   */
+  cover: e.bool,
+  /**
+   * Whether to show a blurred background behind the thumbnail or not
+   */
+  showBlurredBackground: e.bool,
+  /**
+   * Show a scrub line above the thumbnail
+   */
+  showScrub: e.bool,
+  /**
+   * Set position for the scrub line
+   */
+  scrubPosition: e.number,
+  /**
+   * Show a label for the scrub line
+   */
+  scrubLabel: e.string,
+  // Callbacks
+  /**
+   * Add event handler when the thumbnail is clicked
+   *
+   * Set `undefined` to disable
+   */
+  onClick: e.func,
+  /**
+   * Callback when mouse moves over thumbnail
+   *
+   * e.g. to handle scrubbing
+   */
+  onMouseMove: e.func,
+  /**
+   * Callback for mouse entering thumbnail
+   *
+   * e.g. to handle scrubbing or showing label/blurred background
+   */
+  onMouseEnter: e.func,
+  /**
+   * Callback for mouse leaving thumbnail
+   *
+   * e.g. to handle scrubbing or hiding label/blurred background
+   */
+  onMouseLeave: e.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: e.shape({
+    Root: e.elementType,
+    ScrubLine: e.elementType,
+    BlurredBackground: e.elementType,
+    ImageBox: e.elementType,
+    CornerLabelPlacer: e.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: e.shape({
+    root: e.instanceOf(Object),
+    scrubLine: e.instanceOf(Object),
+    blurredBackground: e.instanceOf(Object),
+    imageBox: e.instanceOf(Object),
+    cornerLabelPlacer: e.instanceOf(Object)
+  })
+};
+u.defaultProps = {
+  itemType: void 0,
+  thumbnailIndex: 0,
+  label: void 0,
+  placeholderImage: void 0,
+  showBlurredBackground: !1,
+  cover: !1,
+  showScrub: !1,
+  scrubLabel: void 0,
+  scrubPosition: 0,
+  onClick: void 0,
+  onMouseMove: void 0,
+  onMouseEnter: void 0,
+  onMouseLeave: void 0,
+  components: q,
+  componentsProps: void 0
+};
+export {
+  u as default
+};

package/dist/es/item/ItemThumbnail/index.js

@@ -0,0 +1,11 @@
+import { styled as m } from "@mui/material/styles";
+import { withOverrides as r } from "../../_utils/withOverrides.js";
+import n from "./ItemThumbnail.js";
+const o = "ItemThumbnail", e = `Vdt${o}`, i = r(e)(n), s = m(i, {
+  name: e,
+  overridesResolver: (a, t) => t.root
+})(() => ({}));
+s.displayName = o;
+export {
+  s as default
+};

package/dist/es/search/SearchFilterForm/SearchFilterForm.js

@@ -0,0 +1,138 @@
+import { jsx as d } from "react/jsx-runtime";
+import o from "prop-types";
+import x from "@mui/material/Box";
+import l from "@vidispine/proptypes";
+import L from "../../general/Form/index.js";
+import M from "./hooks/UseSearchFilterFormInputs.js";
+import g from "./utils/mapValuesToFilter.js";
+const E = {
+  Root: x,
+  Form: L
+};
+function m({
+  fieldList: u,
+  facetList: h,
+  dataToPropsMap: y,
+  includeFacetsAsOptions: v,
+  inputsProps: O,
+  mapValuesToFilter: r,
+  onClear: i,
+  onReset: p,
+  onChange: s,
+  onSubmit: a,
+  onError: c,
+  components: F,
+  componentsProps: f
+}) {
+  const {
+    Root: b,
+    Form: T
+  } = F, n = M({
+    fieldList: u,
+    facetList: h,
+    dataToPropsMap: y,
+    includeFacetsAsOptions: v,
+    inputsProps: O
+  }), C = typeof i != "function" ? void 0 : (e, t) => {
+    i(e, r(t, n));
+  }, P = typeof p != "function" ? void 0 : (e, t) => {
+    p(e, r(t, n));
+  }, R = typeof s != "function" ? void 0 : (e, t) => {
+    s(e, r(t, n));
+  }, S = typeof a != "function" ? void 0 : (e, t) => {
+    a(e, r(t, n));
+  }, j = typeof c != "function" ? void 0 : (e, t) => {
+    c(e, t);
+  };
+  return /* @__PURE__ */ d(b, { ...f.root, children: /* @__PURE__ */ d(T, { inputs: n, onClear: C, onReset: P, onChange: R, onSubmit: S, onError: j, ...f.form }) });
+}
+m.propTypes = {
+  /**
+   * A VidiCore field definition list to create filter inputs from
+   */
+  fieldList: o.arrayOf(l.MetadataFieldType),
+  /**
+   * A VidiCore facet list to add options and/or count for options for the filter inputs
+   */
+  facetList: o.arrayOf(l.FacetType),
+  /**
+   * Override input props using field __name__ or __type__ as key
+   *
+   * Note: `name` props has precedence if prop is applicable from both name and type
+   *
+   * E.g. `{ 'vdt_stringField': { label: 'String Field', disabled: true, Component: CheckboxGroupInput } }` or `{ 'string-exact': { ...customInputProps } }`
+   */
+  inputsProps: o.instanceOf(Object),
+  /**
+   * Add facets as options (if false, only adds facet count for field value enumerations)
+   */
+  includeFacetsAsOptions: o.bool,
+  /**
+   * Map a field data key to an input prop
+   *
+   * E.g. `{ label: 'displayName' }` would add the value from data key 'displayName' as a label prop
+   */
+  dataToPropsMap: o.instanceOf(Object),
+  /**
+   * Function for mapping values to filter
+   */
+  mapValuesToFilter: o.func,
+  // Callbacks
+  /**
+   * Callback when filters are cleared (doesn't reset default values)
+   */
+  onClear: o.func,
+  /**
+   * Callback when filters are reset (resets to default values)
+   */
+  onReset: o.func,
+  /**
+   * Callback when filters are changed
+   */
+  onChange: o.func,
+  /**
+   * Callback when filters are submitted
+   */
+  onSubmit: o.func,
+  /**
+   * Callback when filters are submitted with errors (invalid values according to form rules)
+   */
+  onError: o.func,
+  // Overrides
+  /**
+   * Replace internal components
+   */
+  components: o.shape({
+    Root: o.elementType,
+    Form: o.elementType
+  }),
+  /**
+   * Add internal component props
+   */
+  componentsProps: o.shape({
+    root: o.instanceOf(Object),
+    form: o.instanceOf(Object)
+  })
+};
+m.defaultProps = {
+  fieldList: void 0,
+  facetList: void 0,
+  includeFacetsAsOptions: !0,
+  dataToPropsMap: {
+    label: "label",
+    helperText: "description",
+    placeholder: "placeholder"
+  },
+  inputsProps: void 0,
+  mapValuesToFilter: g,
+  onClear: void 0,
+  onReset: void 0,
+  onChange: void 0,
+  onSubmit: void 0,
+  onError: void 0,
+  components: E,
+  componentsProps: void 0
+};
+export {
+  m as default
+};

package/dist/es/search/SearchFilterForm/hooks/UseSearchFilterFormInputs.js

@@ -0,0 +1,130 @@
+import { useMemo as N, useCallback as f } from "react";
+import { parseFieldDefinitionList as X, parseFacetList as z } from "@vidispine/vdt-js";
+import B from "../../../inputs/DateRangeInput/index.js";
+import H from "../../../inputs/SliderInput/index.js";
+import J from "../../../inputs/TagInput/index.js";
+import O from "../../../inputs/TextInput/index.js";
+const Q = "Invalid value", Y = {
+  TextInput: O,
+  TagInput: J,
+  SliderInput: H,
+  DateRangeInput: B
+}, ee = ({
+  fieldList: R,
+  facetList: b,
+  includeFacetsAsOptions: g,
+  dataToPropsMap: h,
+  errorMessages: i,
+  inputsProps: o
+}) => {
+  const {
+    TextInput: T,
+    TagInput: d,
+    SliderInput: D,
+    DateRangeInput: _
+  } = Y, a = N(() => X(R), [R]), m = N(() => z(b), [b]), $ = f((e) => {
+    const n = (u) => {
+      const t = e == null ? void 0 : e[u], r = i == null ? void 0 : i[u];
+      if (t !== void 0)
+        return {
+          value: t,
+          message: (typeof r == "function" ? r(u) : r) || Q
+        };
+    };
+    return {
+      required: n("required"),
+      minLength: n("minLength"),
+      maxLength: n("maxLength"),
+      min: n("minInclusive"),
+      max: n("maxInclusive"),
+      pattern: n("pattern")
+    };
+  }, [i]), C = f((e, n) => n === void 0 ? e : e == null ? void 0 : e.map((u) => {
+    const t = n == null ? void 0 : n[u.value];
+    return {
+      ...u,
+      ...t ? {
+        count: t
+      } : {}
+    };
+  }), []), F = f(({
+    count: e,
+    range: n
+  }, u) => e ? [...u, ...Object.entries(e || {}).filter(([t]) => !(u != null && u.some((r) => r.value === t))).map(([t, r] = []) => ({
+    label: t,
+    value: t,
+    ...r ? {
+      count: r
+    } : {}
+  }))] : n ? [...u, ...n.map(({
+    start: t,
+    end: r,
+    count: c
+  }, S) => {
+    const E = (() => t === "*" && r === "*" ? "*" : t === "*" ? `<= ${r}` : r === "*" ? `>= ${t}` : `${t} - ${r}`)(), v = [t === "*" ? Number.MIN_SAFE_INTEGER : Number(t), r === "*" ? Number.MAX_SAFE_INTEGER : Number(r)];
+    return {
+      label: E,
+      value: S + 1,
+      ...t !== void 0 && r !== void 0 ? {
+        rangeValues: v
+      } : {},
+      ...c ? {
+        count: c
+      } : {}
+    };
+  })] : u, []), A = (e) => ["float", "integer", "long"].includes(e), I = (e) => ["string", "string-exact"].includes(e), j = (e) => e === "date", G = f(({
+    type: e,
+    options: n
+  }) => I(e) ? {
+    freeSolo: !0,
+    multiple: !0,
+    placeholder: "",
+    showChipCount: !0
+  } : A(e) ? {
+    range: !0,
+    valueLabelDisplay: "auto",
+    showMarks: !1,
+    ...n != null && n.length ? {} : {
+      step: 1,
+      infiniteMin: !0,
+      infiniteMax: !0
+    }
+  } : j(e) ? {} : {}, []), L = f(({
+    type: e
+  }) => I(e) ? d : A(e) ? D : j(e) ? _ : T, [_, D, d, T]);
+  return N(() => a == null ? void 0 : a.map(({
+    name: e,
+    restrictions: n,
+    options: u,
+    type: t,
+    data: r,
+    defaultValue: c
+  }) => {
+    var q, w;
+    const S = {
+      ...(o == null ? void 0 : o[t]) || {},
+      ...(o == null ? void 0 : o[e]) || {}
+    }, E = $(n), v = (q = m == null ? void 0 : m.find((l) => l.fieldName === e)) == null ? void 0 : q.count, V = (w = m == null ? void 0 : m.find((l) => l.fieldName === e)) == null ? void 0 : w.range, M = C(u, v), W = g === !0 ? F({
+      count: v,
+      range: V
+    }, M) : M, U = {
+      type: t,
+      defaultValue: c && I(t) ? [c] : void 0,
+      options: W,
+      rules: E,
+      ...Object.fromEntries(Object.entries(h).map(([l, x]) => r[x] ? [l, r[x]] : void 0).filter((l) => !!l)),
+      ...S
+    }, k = {
+      ...G(U),
+      ...U
+    };
+    return {
+      name: e,
+      Component: L(k),
+      ...k
+    };
+  }), [C, F, h, L, G, $, g, o, m, a]);
+};
+export {
+  ee as default
+};