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

package/dist/es/search/SearchField/SearchField.js

@@ -0,0 +1,406 @@
+import { jsxs as W, jsx as s, Fragment as G } from "react/jsx-runtime";
+import { useState as M } from "react";
+import j from "clsx";
+import r from "prop-types";
+import J from "react-select/async-creatable";
+import { Button as K, CircularProgress as Q, TextField as X, MenuItem as Y, Typography as u, Paper as Z, Chip as ee } from "@material-ui/core";
+import { Search as te, Cancel as oe } from "@material-ui/icons";
+import { item as re } from "@vidispine/vdt-api";
+const je = (e) => ({
+  root: {
+    width: "100%",
+    display: "flex",
+    marginTop: e.spacing(0.5),
+    marginBottom: e.spacing(0.5)
+  },
+  createTable: {},
+  button: {
+    backgroundColor: e.palette.type === "light" ? e.palette.grey[100] : e.palette.grey[800],
+    color: e.palette.text.primary,
+    borderColor: e.palette.grey[400],
+    padding: 0,
+    borderWidth: 1,
+    borderStyle: "solid",
+    borderRadius: "0 2px 2px 0"
+  },
+  valueContainer: {
+    display: "flex",
+    flexWrap: "wrap",
+    flex: 1,
+    alignItems: "center",
+    overflow: "hidden",
+    minHeight: 36
+  },
+  input: {
+    height: "100%",
+    display: "flex",
+    padding: 0
+  },
+  option: {},
+  noOptionsMessage: {
+    padding: e.spacing(1)
+  },
+  chip: {
+    margin: e.spacing(0.5)
+  },
+  chipLabel: {
+    cursor: "inherit",
+    display: "flex",
+    alignItems: "center",
+    userSelect: "none",
+    whiteSpace: "nowrap",
+    paddingLeft: e.spacing(1.5),
+    paddingRight: e.spacing(1.5),
+    "& p:nth-child(1)": {
+      fontWeight: 600
+    },
+    "& p:nth-child(2)": {
+      marginLeft: e.spacing(0.5)
+    }
+  },
+  modifierValue: {},
+  placeholder: {
+    position: "absolute",
+    left: e.spacing(0.25),
+    color: e.palette.grey[500]
+  },
+  menu: {
+    position: "absolute",
+    zIndex: 100,
+    marginTop: e.spacing(0.5),
+    left: 0,
+    right: 0
+  },
+  focused: {
+    borderColor: e.palette.primary.main
+  }
+}), ne = ({ isFocused: e, ...o }) => (t) => ({
+  input: (n) => ({
+    ...n,
+    color: t.palette ? t.palette.text.primary : "#AAA",
+    "& input": {
+      font: "inherit"
+    }
+  }),
+  clearIndicator: (n) => ({
+    ...n,
+    cursor: "pointer"
+  }),
+  container: (n) => ({
+    ...n,
+    width: "100%",
+    minWidth: 270,
+    position: "relative",
+    borderStyle: "solid",
+    // eslint-disable-next-line no-nested-ternary
+    borderColor: t.palette ? e ? t.palette.primary.main : t.palette.grey[400] : "#AAA",
+    borderRadius: "2px 0px 0px 2px",
+    transition: "border-color .3s ease-in",
+    borderWidth: "1px 0 1px 1px",
+    paddingLeft: t.spacing ? t.spacing(1) : 4
+  }),
+  ...o
+});
+function se(e) {
+  const {
+    selectProps: { classes: o },
+    children: t
+  } = e;
+  return /* @__PURE__ */ s("div", { className: o.valueContainer, children: t });
+}
+const ie = ({ inputRef: e, ...o }) => /* @__PURE__ */ s("div", { ref: e, ...o });
+function le(e) {
+  const { selectProps: o, innerRef: t, children: n, innerProps: l } = e;
+  return /* @__PURE__ */ s(
+    X,
+    {
+      fullWidth: !0,
+      InputProps: {
+        inputComponent: ie,
+        disableUnderline: !0,
+        inputProps: {
+          className: o.classes.input,
+          inputRef: t,
+          children: n,
+          ...l
+        }
+      },
+      ...o.textFieldProps
+    }
+  );
+}
+function ae(e) {
+  const {
+    isFocused: o,
+    selectProps: { classes: t },
+    innerProps: n,
+    children: l
+  } = e;
+  return /* @__PURE__ */ s(Y, { className: j(t.option), selected: o, component: "div", ...n, children: l });
+}
+function ce(e) {
+  const {
+    selectProps: { classes: o },
+    innerProps: t,
+    children: n
+  } = e;
+  return /* @__PURE__ */ s(u, { color: "textSecondary", className: o.noOptionsMessage, ...t, children: n });
+}
+function pe(e) {
+  const {
+    selectProps: { classes: o },
+    innerProps: t,
+    children: n
+  } = e;
+  return /* @__PURE__ */ s(u, { className: o.placeholder, ...t, children: n });
+}
+function de(e) {
+  const {
+    selectProps: { classes: o },
+    innerProps: t,
+    children: n
+  } = e;
+  return /* @__PURE__ */ s(u, { className: o.singleValue, ...t, children: n });
+}
+function ue(e) {
+  const {
+    selectProps: { classes: o },
+    children: t,
+    removeProps: n,
+    size: l = "small"
+  } = e;
+  return /* @__PURE__ */ s(
+    ee,
+    {
+      tabIndex: -1,
+      label: t,
+      size: l,
+      className: o.chip,
+      classes: { label: o.chipLabel },
+      onDelete: n.onClick,
+      deleteIcon: /* @__PURE__ */ s(oe, { ...n }),
+      color: "default"
+    }
+  );
+}
+function fe(e) {
+  const {
+    selectProps: { classes: o },
+    data: { isModifier: t, label: n, modifier_label: l }
+  } = e;
+  return t ? /* @__PURE__ */ s("div", { className: o.modifierValue, children: /* @__PURE__ */ s(u, { noWrap: !0, children: `${n}: ` }) }) : /* @__PURE__ */ s(ue, { className: o.modifierValue, ...e, children: /* @__PURE__ */ W(G, { children: [
+    /* @__PURE__ */ s(u, { noWrap: !0, children: `${l}: ` }),
+    /* @__PURE__ */ s(u, { noWrap: !0, children: n })
+  ] }) });
+}
+function me(e) {
+  const {
+    selectProps: { classes: o },
+    children: t,
+    innerProps: n
+  } = e;
+  return /* @__PURE__ */ s(Z, { square: !0, className: o.menu, ...n, children: t });
+}
+function be() {
+  return null;
+}
+function ge() {
+  return null;
+}
+const he = {
+  Control: le,
+  Menu: me,
+  MultiValue: fe,
+  NoOptionsMessage: ce,
+  Option: ae,
+  Placeholder: pe,
+  SingleValue: de,
+  ValueContainer: se,
+  DropdownIndicator: be,
+  IndicatorSeparator: ge
+}, ye = (e, o) => (t) => new Promise((n, l) => {
+  const { value: a } = e, S = [
+    { ...a && { field: a }, text: t },
+    { ...a && { field: a }, text: t.toUpperCase() },
+    { ...a && { field: a }, text: t.toLowerCase() },
+    {
+      ...a && { field: a },
+      text: `${t[0].toUpperCase()}${t.slice(1)}`
+    }
+  ], h = {
+    ...o,
+    autocomplete: S
+  };
+  try {
+    re.searchItem({ itemSearchDocument: h }).then(({ data: p }) => {
+      const { autocomplete: c = [] } = p, f = [];
+      c.forEach((m) => {
+        if (m.field && m.field !== a)
+          return;
+        const { suggestion: x = [] } = m;
+        x.forEach((b) => {
+          f.find((O) => O.value === b) || f.push({ label: b, value: b });
+        });
+      }), n(f);
+    }).catch((p) => l(p));
+  } catch (p) {
+    l(p);
+  }
+}), Pe = (e) => (o) => new Promise((t) => {
+  if (o) {
+    const n = o.toLowerCase(), l = e.filter((a) => a.label.toLowerCase().includes(n));
+    t(l);
+  }
+  t(e);
+}), Ce = ({ currentModifier: e, modifiers: o, itemSearchDocument: t }) => e ? ye(e, t) : Pe(o), Se = (e) => `Search for ${e}`;
+function v({
+  classes: e,
+  className: o,
+  theme: t,
+  defaultValue: n,
+  modifiers: l,
+  loadOptions: a,
+  itemSearchDocument: S,
+  onSubmit: h,
+  submitting: p,
+  onChange: c,
+  placeholder: f,
+  CreateTabelSelectComponents: m,
+  CreateTabelSelectProps: x,
+  CreateTablestyles: b,
+  ButtonComponent: O,
+  ButtonProps: A,
+  SearchIconComponent: B,
+  SearchIconsProps: D,
+  ProgressComponent: R,
+  ProgressProps: $
+}) {
+  const [z, g] = M(n), [y, P] = M(), [T, F] = M(!1), U = y ? [] : l, _ = ne({ isFocused: T, CreateTablestyles: b })(t), k = (i, { action: d, option: I = {} }) => {
+    const { isModifier: q } = I;
+    if (q) {
+      g(i), P(I);
+      return;
+    }
+    if (d === "create-option" || d === "select-option") {
+      let C = I;
+      d === "create-option" && (C = i[i.length - 1]);
+      const { value: N, label: w, isFreeText: V } = y, L = [...i], H = {
+        ...V && { isFreeText: V },
+        modifier_value: N,
+        modifier_label: w,
+        ...C
+      };
+      L.splice(-2, 2, H), g(L), P(), c && c(L);
+      return;
+    }
+    if (d === "remove-value" || d === "pop-value") {
+      g(i);
+      const C = i && i.length > 0 && i[i.length - 1].isModifier ? i[i.length - 1] : void 0;
+      P(C);
+      const N = i.filter((w) => !w.isModifier);
+      c && c(N);
+      return;
+    }
+    if (d === "clear") {
+      g([]), P(), c && c(i);
+      return;
+    }
+    g(i);
+  }, E = (i) => {
+    i.preventDefault(), h && h();
+  };
+  return /* @__PURE__ */ W("form", { className: j(o, e.root, "VdtSearchField-root"), onSubmit: E, children: [
+    /* @__PURE__ */ s(
+      J,
+      {
+        className: e.createTable,
+        classes: e,
+        styles: _,
+        loadOptions: a({ currentModifier: y, modifiers: l, itemSearchDocument: S }),
+        components: { ...he, ...m },
+        value: z,
+        defaultOptions: U,
+        onChange: k,
+        onFocus: () => F(!0),
+        onBlur: () => F(!1),
+        isFocused: T,
+        placeholder: f,
+        isValidNewOption: (i) => i && y,
+        blurInputOnSelect: !1,
+        isMulti: !0,
+        allowCreateWhileLoading: !0,
+        createOptionPosition: "first",
+        formatCreateLabel: Se,
+        ...x
+      }
+    ),
+    /* @__PURE__ */ s(
+      O,
+      {
+        size: "small",
+        type: "submit",
+        disableRipple: !0,
+        className: j(e.button, { [e.focused]: T }, "VdtSearchField-button"),
+        ...A,
+        children: p ? /* @__PURE__ */ s(R, { size: 20, color: "inherit", ...$ }) : /* @__PURE__ */ s(B, { ...D })
+      }
+    )
+  ] });
+}
+v.propTypes = {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: r.objectOf(r.string),
+  /**
+   * Override styles with className
+   */
+  className: r.string,
+  theme: r.objectOf(r.any),
+  // eslint-disable-next-line react/forbid-prop-types
+  defaultValue: r.arrayOf(r.object),
+  modifiers: r.arrayOf(r.any),
+  loadOptions: r.func,
+  itemSearchDocument: r.objectOf(r.any),
+  submitting: r.bool,
+  onSubmit: r.func,
+  onChange: r.func,
+  placeholder: r.string,
+  CreateTabelSelectComponents: r.objectOf(r.elementType),
+  CreateTabelSelectProps: r.objectOf(r.any),
+  CreateTablestyles: r.objectOf(r.any),
+  ButtonComponent: r.elementType,
+  ButtonProps: r.objectOf(r.any),
+  SearchIconComponent: r.elementType,
+  SearchIconsProps: r.objectOf(r.any),
+  ProgressComponent: r.elementType,
+  ProgressProps: r.objectOf(r.any)
+};
+v.defaultProps = {
+  className: void 0,
+  classes: {},
+  theme: {},
+  defaultValue: [],
+  modifiers: [],
+  loadOptions: Ce,
+  itemSearchDocument: {},
+  submitting: !1,
+  onSubmit: () => {
+  },
+  onChange: () => {
+  },
+  placeholder: "Search Items",
+  CreateTabelSelectComponents: void 0,
+  CreateTabelSelectProps: {},
+  CreateTablestyles: {},
+  ButtonComponent: K,
+  ButtonProps: {},
+  SearchIconComponent: te,
+  SearchIconsProps: {},
+  ProgressComponent: Q,
+  ProgressProps: {}
+};
+export {
+  v as default,
+  je as styles
+};

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

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

package/dist/es/search/SearchInput/SearchInput.js

@@ -0,0 +1,246 @@
+import { jsxs as k, jsx as s, Fragment as A } from "react/jsx-runtime";
+import { useRef as oe, useState as p, useEffect as F, useMemo as ne } from "react";
+import R from "clsx";
+import e from "prop-types";
+import { InputBase as te, IconButton as re, Button as se, CircularProgress as ie } from "@material-ui/core";
+import { ArrowDropUp as ce, ArrowDropDown as le, Search as ue, Close as ae } from "@material-ui/icons";
+const ye = (n) => ({
+  root: {
+    alignItems: "center",
+    width: "100%",
+    display: "flex"
+  },
+  input: {
+    paddingLeft: n.spacing(1),
+    borderWidth: 1,
+    flex: 1,
+    borderStyle: "solid",
+    borderColor: n.palette.grey[400],
+    borderRadius: 2,
+    transition: "border-color .3s ease-in",
+    height: 32
+  },
+  button: {
+    backgroundColor: n.palette.type === "light" ? n.palette.grey[100] : n.palette.grey[800],
+    color: n.palette.text.primary,
+    borderBottomLeftRadius: 0,
+    borderTopLeftRadius: 0,
+    borderLeftWidth: 1,
+    borderLeftStyle: "solid",
+    borderRadius: 2,
+    borderLeftColor: n.palette.grey[400],
+    padding: 0,
+    height: "100%"
+  },
+  closeButton: {
+    visibility: "visible",
+    cursor: "pointer",
+    transition: "visibility .5s ease-in"
+  },
+  closeButtonHidden: {
+    visibility: "hidden"
+  },
+  focused: {
+    borderColor: n.palette.primary.main
+  },
+  touched: {},
+  progressButton: {
+    width: "100%",
+    marginTop: "4px"
+  }
+});
+function pe({ suggestions: n, inputRef: o }) {
+  const u = ne(
+    () => [...o.current ? [o.current.value] : [], ...n || []],
+    [o, n]
+  ), [a, l] = p(0);
+  F(() => {
+    l(0);
+  }, [u]);
+  const b = (t, i) => (t % i + i) % i, d = (t, i) => b(t + (i.key === "ArrowDown" ? 1 : -1), u.length);
+  return {
+    onKeyDown: (t) => {
+      (t.key === "ArrowDown" || t.key === "ArrowUp") && (o.current && (o.current.value = u[d(a, t)], l((i) => d(i, t))), t.preventDefault());
+    },
+    onHoverSuggestion: (t) => l(t + 1),
+    focusedSuggestion: a
+  };
+}
+function L({
+  className: n,
+  classes: o,
+  value: u,
+  onSubmit: a,
+  defaultValue: l,
+  submitting: b,
+  onCancel: d,
+  suggestions: g,
+  searchPlaceholder: C,
+  onChange: t,
+  SuggestionsComponent: i,
+  SuggestionsProps: N,
+  TopSearchesComponent: y,
+  TopSearchesProps: M,
+  ButtonProps: z,
+  InputBaseProps: E,
+  SearchIconComponent: K,
+  ProgressComponent: V,
+  ProgressProps: W,
+  CloseIconComponent: v,
+  inputRef: P
+}) {
+  let c = oe(null);
+  P && (c = P);
+  const [B, O] = p(!1), [S, f] = p(!!l);
+  F(() => {
+    l !== "" && f(!0);
+  }, [l]);
+  const w = (r) => {
+    t(r), f(c.current.value.length > 0);
+  }, I = (r) => {
+    u === void 0 && (c.current.value = r), w(r);
+  }, T = (r) => {
+    r.preventDefault(), c && c.current && c.current.blur();
+    const { value: m } = c.current || "";
+    a && a(m), m && f(!0);
+  }, U = () => {
+    f(!1), a(""), I("");
+  }, q = (r, m) => {
+    I(m), T(r);
+  }, [h, G] = p(null), [D, j] = p(!1), J = !!h && B && S, x = !!h && D, Q = () => {
+    j(!D);
+  }, [X, H] = p(!1), Y = () => {
+    H(!0);
+  }, Z = () => {
+    H(!1);
+  }, { onKeyDown: _, onHoverSuggestion: $, focusedSuggestion: ee } = pe({
+    suggestions: g,
+    inputRef: c
+  });
+  return /* @__PURE__ */ k("form", { className: R(n, o.root, "VdtSearchInput-root"), onSubmit: T, children: [
+    /* @__PURE__ */ s(
+      te,
+      {
+        value: u,
+        classes: {
+          root: o.input,
+          focused: o.focused
+        },
+        defaultValue: l,
+        ref: (r) => G(r),
+        inputProps: {
+          onFocus: () => O(!0),
+          onBlur: () => O(!1)
+        },
+        placeholder: C,
+        inputRef: c,
+        endAdornment: /* @__PURE__ */ k(A, { children: [
+          /* @__PURE__ */ s(
+            v,
+            {
+              className: S ? o.closeButton : o.closeButtonHidden,
+              onClick: U
+            }
+          ),
+          y && /* @__PURE__ */ s(re, { onClick: Q, style: { borderRadius: "50%" }, children: x ? /* @__PURE__ */ s(ce, { fontSize: "small" }) : /* @__PURE__ */ s(le, { fontSize: "small" }) }),
+          /* @__PURE__ */ s(
+            se,
+            {
+              size: "small",
+              type: "submit",
+              disableRipple: !0,
+              className: R(o.button, {
+                [o.focused]: B,
+                [o.touched]: S
+              }),
+              onMouseOver: Y,
+              onMouseOut: Z,
+              ...z,
+              children: b ? (
+                // eslint-disable-next-line react/jsx-no-useless-fragment
+                /* @__PURE__ */ s(A, { children: X ? /* @__PURE__ */ s(v, { onClick: d }) : /* @__PURE__ */ s(V, { size: 20, color: "inherit", ...W }) })
+              ) : /* @__PURE__ */ s(K, {})
+            }
+          )
+        ] }),
+        onChange: (r) => w(r.target.value),
+        onKeyDown: g && _,
+        ...E
+      }
+    ),
+    J && i && /* @__PURE__ */ s(
+      i,
+      {
+        suggestions: g,
+        onSelected: q,
+        onHover: $,
+        focused: ee,
+        anchorEl: h,
+        ...N
+      }
+    ),
+    x && y && /* @__PURE__ */ s(
+      y,
+      {
+        setIsTopSearchesOpen: j,
+        anchorEl: h,
+        ...M
+      }
+    )
+  ] });
+}
+L.propTypes = {
+  className: e.string,
+  classes: e.objectOf(e.string).isRequired,
+  value: e.string,
+  onSubmit: e.func,
+  /** Note: This can only be changed before mount */
+  defaultValue: e.string,
+  submitting: e.bool,
+  onCancel: e.func,
+  suggestions: e.arrayOf(e.string),
+  searchPlaceholder: e.string,
+  onChange: e.func,
+  SuggestionsComponent: e.elementType,
+  SuggestionsProps: e.objectOf(e.any),
+  TopSearchesComponent: e.elementType,
+  TopSearchesProps: e.objectOf(e.any),
+  ButtonProps: e.objectOf(e.any),
+  InputBaseProps: e.objectOf(e.any),
+  SearchIconComponent: e.elementType,
+  ProgressComponent: e.elementType,
+  ProgressProps: e.objectOf(e.any),
+  CloseIconComponent: e.elementType,
+  CloseIconProps: e.objectOf(e.any),
+  inputRef: e.shape({ current: e.instanceOf(Element) })
+};
+L.defaultProps = {
+  className: void 0,
+  value: void 0,
+  defaultValue: void 0,
+  submitting: !1,
+  suggestions: void 0,
+  searchPlaceholder: "Search",
+  onSubmit: () => {
+  },
+  onChange: () => {
+  },
+  onCancel: () => {
+  },
+  SuggestionsComponent: null,
+  SuggestionsProps: {},
+  TopSearchesComponent: null,
+  TopSearchesProps: {},
+  ButtonProps: {},
+  InputBaseProps: {},
+  SearchIconComponent: ue,
+  ProgressComponent: ie,
+  ProgressProps: {},
+  CloseIconComponent: ae,
+  CloseIconProps: {},
+  inputRef: void 0
+};
+export {
+  L as default,
+  ye as styles
+};

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

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