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

package/dist/es/search/SearchInputFieldSelect.js

@@ -0,0 +1,88 @@
+import { jsxs as A, jsx as e } from "react/jsx-runtime";
+import { useState as s, useRef as I } from "react";
+import { withStyles as Q, Box as S, InputBase as v, InputAdornment as y, IconButton as g, Divider as j, Menu as z, MenuItem as T } from "@material-ui/core";
+import { Label as q, Search as w } from "@material-ui/icons";
+const L = (n) => ({
+  root: {
+    backgroundColor: n.palette.background.paper
+  }
+});
+function R({
+  classes: n,
+  onSubmit: x,
+  fields: B = [
+    { label: "Item ID", value: "itemId" },
+    { label: "Shape ID", value: "shapeId" },
+    { label: "Tag", value: "tag" }
+  ],
+  value: C = "",
+  query: F = "",
+  fieldPlaceHolder: b = "Field",
+  queryPlaceHolder: k = "Query",
+  disableReset: D = !1,
+  disableRequired: l = !1,
+  fieldInputRef: p,
+  queryInputRef: m,
+  ...E
+}) {
+  const [r, o] = s(C), [u, d] = s(F), [f, a] = s(null);
+  let i = I();
+  p && (i = p);
+  let c = I();
+  m && (c = m);
+  const M = () => {
+    d(""), o("");
+  }, N = (t) => (t.preventDefault(), !l && !r ? i.current.focus() : !l && !u ? c.current.focus() : (x({ field: r, query: u }), D ? null : M()));
+  return /* @__PURE__ */ A(S, { className: n.root, component: "form", display: "flex", onSubmit: N, ...E, children: [
+    /* @__PURE__ */ e(
+      v,
+      {
+        className: n.inputBaseField,
+        inputRef: i,
+        placeholder: b,
+        value: r,
+        required: !l,
+        onChange: ({ target: t }) => o(t.value),
+        startAdornment: /* @__PURE__ */ e(y, { position: "start", children: /* @__PURE__ */ e(g, { size: "small", onClick: ({ currentTarget: t }) => a(t), children: /* @__PURE__ */ e(q, {}) }) })
+      }
+    ),
+    /* @__PURE__ */ e(S, { mx: 2, children: /* @__PURE__ */ e(j, { orientation: "vertical" }) }),
+    /* @__PURE__ */ e(
+      v,
+      {
+        className: n.inputBaseQuery,
+        fullWidth: !0,
+        inputRef: c,
+        placeholder: k,
+        value: u,
+        required: !l,
+        onChange: ({ target: t }) => d(t.value),
+        endAdornment: /* @__PURE__ */ e(y, { position: "end", children: /* @__PURE__ */ e(g, { type: "submit", size: "small", children: /* @__PURE__ */ e(w, {}) }) })
+      }
+    ),
+    /* @__PURE__ */ e(
+      z,
+      {
+        className: n.menu,
+        anchorEl: f,
+        keepMounted: !0,
+        open: !!f,
+        onClose: () => a(null),
+        children: B.map(({ label: t, value: h }) => /* @__PURE__ */ e(
+          T,
+          {
+            onClick: () => {
+              o(h), a(null);
+            },
+            children: t
+          },
+          h
+        ))
+      }
+    )
+  ] });
+}
+const H = Q(L, { name: "VdtSearchInputFieldSelect" })(R);
+export {
+  H as default
+};

package/dist/es/search/SearchResultRow.js

@@ -0,0 +1,41 @@
+import { jsxs as n, jsx as c } from "react/jsx-runtime";
+import { useMemo as p } from "react";
+import { TableRow as b, TableCell as i, Hidden as T } from "@material-ui/core";
+import { parseMetadataType as M } from "@vidispine/vdt-js";
+import j from "../media/MediaCardCheckbox.js";
+const f = ({ searchResultEntryType: e, parseMetadataOpts: m, options: u, innerProps: a }) => {
+  const { metadata: r = {} } = e.item || e.collection, s = M(r, m);
+  return u.map(({ value: t, valueComponent: l }) => {
+    const { [t]: o } = s;
+    return l ? l({ value: o, innerProps: a }) : o;
+  });
+};
+function v({
+  options: e = [],
+  metadataToProps: m = f,
+  parseMetadataOpts: u = { joinValue: ", ", flat: !0 },
+  selected: a,
+  onCheck: r,
+  onClick: s,
+  ...t
+}) {
+  const { searchResultEntryType: l } = t, o = p(
+    () => m({
+      searchResultEntryType: l,
+      parseMetadataOpts: u,
+      options: e,
+      innerProps: t
+    }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [l, e, f]
+  );
+  return /* @__PURE__ */ n(b, { hover: !0, selected: a, onClick: s, style: { cursor: "pointer" }, children: [
+    r && /* @__PURE__ */ c(i, { padding: "checkbox", children: /* @__PURE__ */ c(j, { checked: a, handleChecked: (d) => {
+      d.preventDefault(), r && r(d, !a, t);
+    } }) }),
+    o.map((d, h) => /* @__PURE__ */ c(T, { only: e[h].hide, children: /* @__PURE__ */ c(i, { children: d }) }, e[h].value || e[h].label))
+  ] });
+}
+export {
+  v as default
+};

package/dist/es/search/SearchResultTable.js

@@ -0,0 +1,33 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Table as h, TableHead as j, TableRow as p, TableCell as r, Hidden as x, TableBody as s } from "@material-ui/core";
+import T from "./SearchResultRow.js";
+function S({
+  searchResultType: a = {},
+  RowComponent: c = T,
+  options: l = [],
+  onCheck: d,
+  onRowClick: m,
+  ...t
+}) {
+  const { entry: o = [] } = a;
+  return /* @__PURE__ */ n(h, { size: "small", children: [
+    /* @__PURE__ */ e(j, { children: /* @__PURE__ */ n(p, { children: [
+      d && /* @__PURE__ */ e(r, { padding: "checkbox" }),
+      l.map(({ label: i, value: b, hide: f }) => /* @__PURE__ */ e(x, { only: f, children: /* @__PURE__ */ e(r, { children: i }) }, [i, b].join("_")))
+    ] }) }),
+    /* @__PURE__ */ e(s, { children: o && o.map((i) => /* @__PURE__ */ e(
+      c,
+      {
+        searchResultEntryType: i,
+        options: l,
+        onCheck: d,
+        onClick: () => m(i),
+        ...t
+      },
+      [i.type, i.id].join("_")
+    )) })
+  ] });
+}
+export {
+  S as default
+};

package/dist/es/search/SearchSuggestions.js

@@ -0,0 +1,52 @@
+import { jsx as n } from "react/jsx-runtime";
+import a from "clsx";
+import { withStyles as f, Popper as h, MenuList as S, MenuItem as M } from "@material-ui/core";
+const g = (e) => ({
+  popper: {
+    backgroundColor: e.palette.background.default,
+    zIndex: 100
+  },
+  focused: {
+    backgroundColor: e.palette.action.hover
+  }
+});
+function x({
+  suggestions: e = [],
+  focused: c,
+  onHover: r,
+  onSelected: p,
+  anchorEl: o,
+  classes: l,
+  className: s,
+  MenuProps: d = {},
+  MenuItemProps: i = {}
+}) {
+  return e.length > 0 ? /* @__PURE__ */ n(
+    h,
+    {
+      anchorEl: o,
+      open: !0,
+      style: {
+        width: o ? o.clientWidth : null
+      },
+      className: a(l.popper, s),
+      children: /* @__PURE__ */ n(S, { onMouseLeave: () => r(-1), ...d, children: e.map((t, u) => /* @__PURE__ */ n(
+        M,
+        {
+          onMouseEnter: () => r(u),
+          onMouseDown: (m) => p(m, t),
+          className: a({
+            [l.focused]: c === u
+          }),
+          ...i,
+          children: t
+        },
+        t
+      )) })
+    }
+  ) : null;
+}
+const y = f(g, { name: "VdtSearchSuggestions" })(x);
+export {
+  y as default
+};

package/dist/es/search/Sort/Sort.js

@@ -0,0 +1,147 @@
+import { jsxs as f, Fragment as M, jsx as n } from "react/jsx-runtime";
+import { useState as y } from "react";
+import I from "clsx";
+import e from "prop-types";
+import { ButtonBase as N, Typography as O, Menu as R } from "@material-ui/core";
+import { ArrowDropDown as j } from "@material-ui/icons";
+import k from "../SortMenuItem.js";
+const F = (t) => ({
+  root: {
+    color: t.palette.secondary.main,
+    paddingLeft: 9,
+    paddingRight: 9,
+    borderRadius: 4
+  },
+  indicator: {
+    marginRight: -2,
+    marginLeft: 4,
+    color: t.palette.secondary.main,
+    transition: "transform .2s ease-out"
+  },
+  indicatorAsc: {
+    transform: "rotate(180deg)"
+  },
+  menuPaper: {
+    minWidth: 150,
+    marginTop: 4
+  }
+});
+function v({
+  classes: t,
+  caption: b,
+  options: l,
+  sortAsc: c,
+  sortDesc: s,
+  IconComponent: p,
+  MenuItemComponent: C,
+  onChange: d,
+  initialSort: S,
+  ...T
+}) {
+  const [m, u] = y(null), P = (o) => {
+    u(o.currentTarget);
+  }, g = () => {
+    u(null);
+  }, [r, x] = y(
+    S || {
+      option: {},
+      direction: s
+    }
+  ), A = (o) => (B) => {
+    let { option: a, direction: i } = r;
+    o.value !== a.value ? a = o : i = i === s ? c : s, x({ option: a, direction: i }), d && d(B, a.value, i), g();
+  }, h = l === void 0 || l.length === 0;
+  return /* @__PURE__ */ f(M, { children: [
+    /* @__PURE__ */ f(N, { onClick: P, className: t.root, disabled: h, children: [
+      /* @__PURE__ */ n(
+        O,
+        {
+          variant: "caption",
+          color: h ? "textSecondary" : "textPrimary",
+          className: t.label,
+          children: `${b}: ${r.option.label || ""}`
+        }
+      ),
+      p && /* @__PURE__ */ n(
+        "span",
+        {
+          className: I(t.indicator, {
+            [t.indicatorAsc]: r.direction === c
+          }),
+          children: /* @__PURE__ */ n(p, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ n(
+      R,
+      {
+        anchorEl: m,
+        keepMounted: !0,
+        open: !!m,
+        onClose: g,
+        elevation: 1,
+        getContentAnchorEl: null,
+        marginThreshold: 0,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "left"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "left"
+        },
+        PaperProps: {
+          className: t.menuPaper
+        },
+        children: l.map((o) => /* @__PURE__ */ n(
+          C,
+          {
+            primary: o.label,
+            onClick: A(o),
+            selected: o.value === r.option.value,
+            ...T
+          },
+          o.value
+        ))
+      }
+    )
+  ] });
+}
+v.propTypes = {
+  classes: e.objectOf(e.any).isRequired,
+  caption: e.string,
+  sortAsc: e.string,
+  sortDesc: e.string,
+  IconComponent: e.elementType,
+  MenuItemComponent: e.elementType,
+  onChange: e.func,
+  options: e.arrayOf(
+    e.shape({
+      // eslint-disable-next-line react/forbid-prop-types
+      value: e.any,
+      label: e.string
+    })
+  ),
+  initialSort: e.shape({
+    option: e.shape({
+      // eslint-disable-next-line react/forbid-prop-types
+      value: e.any,
+      label: e.string
+    }),
+    direction: e.string
+  })
+};
+v.defaultProps = {
+  caption: "Sort by",
+  sortAsc: "ascending",
+  sortDesc: "descending",
+  IconComponent: j,
+  MenuItemComponent: k,
+  onChange: void 0,
+  initialSort: void 0,
+  options: []
+};
+export {
+  v as default,
+  F as styles
+};

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

@@ -0,0 +1,7 @@
+import { withStyles as t } from "@material-ui/core";
+import o, { styles as r } from "./Sort.js";
+const e = t(r, { name: "VdtSort" })(o);
+e.displayName = "Sort";
+export {
+  e as default
+};

package/dist/es/search/SortMenuItem.js

@@ -0,0 +1,58 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import e from "prop-types";
+import { MenuItem as d, ListItemText as f } from "@material-ui/core";
+import { red as y } from "@material-ui/core/colors";
+import { makeStyles as u, alpha as I } from "@material-ui/core/styles";
+const P = (r) => u({
+  selected: {
+    "&$selected": {
+      backgroundColor: I(r, 0.16),
+      color: r
+    }
+  }
+}), t = i(
+  ({ primary: r, onClick: s, selected: p, secondaryColor: m, MenuItemProps: a, ListItemTextProps: c }, l) => {
+    const n = P(m)();
+    return /* @__PURE__ */ o(
+      d,
+      {
+        selected: p,
+        onClick: s,
+        dense: !0,
+        classes: {
+          selected: n.selected
+        },
+        ref: l,
+        ...a,
+        children: /* @__PURE__ */ o(
+          f,
+          {
+            primary: r,
+            primaryTypographyProps: { variant: "caption" },
+            ...c
+          }
+        )
+      }
+    );
+  }
+);
+t.propTypes = {
+  primary: e.string,
+  secondaryColor: e.string,
+  onClick: e.func,
+  selected: e.bool,
+  MenuItemProps: e.objectOf(e.any),
+  ListItemTextProps: e.objectOf(e.any)
+};
+t.defaultProps = {
+  primary: "",
+  secondaryColor: y.A200,
+  onClick: void 0,
+  selected: !1,
+  MenuItemProps: {},
+  ListItemTextProps: {}
+};
+export {
+  t as default
+};

package/dist/es/search/SpellCheck/SpellCheck.js

@@ -0,0 +1,94 @@
+import { jsxs as c, jsx as p } from "react/jsx-runtime";
+import m from "clsx";
+import n from "prop-types";
+import { Typography as x, Button as y } from "@material-ui/core";
+const B = (t) => ({
+  suggestion: {
+    "&:hover": {
+      textFillColor: t.palette.text.primary,
+      textStrokeColor: t.palette.text.primary,
+      textStrokeWidth: 0.5
+    },
+    userSelect: "text"
+  },
+  suggested: {
+    fontStyle: "italic"
+  },
+  suggestionButton: {
+    "&:hover": {
+      backgroundColor: "transparent"
+    },
+    paddingTop: 0,
+    paddingBottom: 0
+  },
+  didYouMean: {
+    color: t.palette.secondary.main
+  }
+}), S = (...t) => t.length === 1 ? t[0].map((e) => [e]) : t.reduce((e, o) => e.flatMap((s) => o.map((i) => [s, i].flat()))), C = (t) => new RegExp(t.map(({ term: e }) => `(${e})`).join("|"));
+function k(t, e) {
+  return t.split(C(e)).filter((o) => o && o.length > 0).map((o) => {
+    const s = e.find((i) => i.term === o);
+    return s ? { term: s.suggestion, replaced: !0 } : { term: o, replaced: !1 };
+  }).filter(({ term: o }) => o !== t);
+}
+function b(t, e, o) {
+  return S(
+    ...e.map(({ term: i, suggestion: r }) => r.map((a) => ({ term: i, suggestion: a })))
+  ).slice(0, o).map((i) => k(t, i)).filter((i) => i.length > 0);
+}
+function f({
+  className: t,
+  classes: e,
+  searchText: o,
+  suggestions: s,
+  onClick: i,
+  maxSuggestions: r,
+  didYouMeanText: a = "Did you mean"
+}) {
+  if (!(s && s.length > 0) || !o)
+    return null;
+  const u = b(o, s, r);
+  return u.length === 0 ? null : /* @__PURE__ */ c("div", { className: m(t, e.root, "VdtSpellCheck-root"), children: [
+    /* @__PURE__ */ p(x, { classes: { root: e.didYouMean }, display: "inline", children: `${a}:` }),
+    u.map((d, h) => /* @__PURE__ */ p(
+      y,
+      {
+        disableRipple: !0,
+        classes: { root: e.suggestionButton, label: e.suggestion },
+        onClick: () => i(d.map(({ term: l }) => l).join("")),
+        children: d.map(({ replaced: l, term: g }) => /* @__PURE__ */ c("span", { children: [
+          l ? /* @__PURE__ */ p("span", { className: m(e.suggested, "VdtSpellCheck-suggested"), children: g }) : g,
+          " "
+        ] }, g))
+      },
+      `${h}-root`
+    ))
+  ] });
+}
+f.propTypes = {
+  className: n.string,
+  classes: n.objectOf(n.string).isRequired,
+  searchText: n.string,
+  suggestions: n.arrayOf(
+    n.shape({
+      term: n.string,
+      suggestion: n.arrayOf(n.string)
+    })
+  ),
+  maxSuggestions: n.number,
+  didYouMeanText: n.string,
+  onClick: n.func
+};
+f.defaultProps = {
+  className: void 0,
+  searchText: void 0,
+  suggestions: void 0,
+  maxSuggestions: void 0,
+  didYouMeanText: "Did you mean",
+  onClick: () => {
+  }
+};
+export {
+  f as default,
+  B as styles
+};

package/dist/es/search/SpellCheck/index.js

@@ -0,0 +1,7 @@
+import { withStyles as e } from "@material-ui/core";
+import l, { styles as t } from "./SpellCheck.js";
+const o = e(t, { name: "VdtSpellCheck" })(l);
+o.displayName = "SpellCheck";
+export {
+  o as default
+};

package/dist/es/search/querybuilder/QueryBetween/QueryBetween.js

@@ -0,0 +1,84 @@
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import v from "clsx";
+import l from "lodash.get";
+import n from "prop-types";
+import y from "@vidispine/proptypes";
+import h from "../QueryInput/index.js";
+const P = (e) => ({
+  root: {
+    width: "50%"
+  },
+  and: {
+    marginLeft: e.spacing(0.5),
+    marginRight: e.spacing(0.5)
+  },
+  input: {}
+});
+function c({
+  classes: e,
+  className: g,
+  field: t,
+  onChange: r,
+  InputComponent: o,
+  ...s
+}) {
+  const i = (a, d) => ({
+    name: t.name,
+    range: [
+      {
+        value: [{ value: a }, { value: d }]
+      }
+    ]
+  }), m = l(t, "range.0.value.0.value", ""), p = l(t, "range.0.value.1.value", "");
+  return /* @__PURE__ */ f("div", { className: v(e.root, g), children: [
+    /* @__PURE__ */ u(
+      o,
+      {
+        className: e.input,
+        value: m,
+        onChange: ({ target: { value: a } }) => r(i(a, p)),
+        ...s
+      }
+    ),
+    /* @__PURE__ */ u(
+      o,
+      {
+        className: e.input,
+        value: p,
+        onChange: ({ target: { value: a } }) => r(i(m, a)),
+        ...s
+      }
+    )
+  ] });
+}
+c.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: n.objectOf(n.string),
+  /**
+   * Override styles with className
+   */
+  className: n.string,
+  /**
+   * Override the InputComponent.
+   */
+  InputComponent: n.elementType,
+  /**
+   * Input change function.
+   */
+  onChange: n.func.isRequired,
+  /**
+   * Search Field with name and value/range.
+   */
+  field: y.SearchFieldType.isRequired
+};
+c.defaultProps = {
+  className: void 0,
+  classes: {},
+  InputComponent: h
+};
+export {
+  c as default,
+  P as styles
+};

package/dist/es/search/querybuilder/QueryBetween/index.js

@@ -0,0 +1,6 @@
+import { withStyles as e } from "@material-ui/core";
+import t, { styles as r } from "./QueryBetween.js";
+const n = e(r, { name: "VdtQueryBetween" })(t);
+export {
+  n as default
+};