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

package/dist/es/inputs/TagInput/TagInput.d.ts

@@ -0,0 +1,118 @@
+/// <reference types="react" />
+import { FormControl as MuiFormControl, FormHelperText as MuiFormHelperText, Autocomplete as MuiAutocomplete, TextField as MuiTextField, Chip as MuiChip } from '@mui/material';
+import type { AutocompleteCloseReason } from '@mui/material';
+import VdtMenuItem from '../_components/MenuItem';
+import type { WithOverrideProps } from '../../_types';
+declare const StyledMuiAutocomplete: typeof MuiAutocomplete<string, true, true, true, any>;
+declare const StyledMuiTextField: typeof MuiTextField;
+declare const defaultComponents: {
+    Root: typeof MuiFormControl;
+    FormHelperText: typeof MuiFormHelperText;
+    Autocomplete: typeof StyledMuiAutocomplete;
+    TextField: typeof StyledMuiTextField;
+    MenuItem: typeof VdtMenuItem;
+    Chip: typeof MuiChip;
+};
+export interface TagInputProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Name of input
+     */
+    name?: string;
+    /**
+     * Label of input
+     */
+    label?: string;
+    /**
+     * Value of input
+     */
+    value?: string[];
+    /**
+     * Default value of input
+     */
+    defaultValue?: string[];
+    /**
+     * Options for input
+     */
+    options?: (string | {
+        value: string;
+        label?: string;
+        disabled?: boolean;
+        count?: number | string;
+    })[];
+    /**
+     * Help text underneath input
+     */
+    helperText?: string;
+    /**
+     * Error to display underneath input (overrides `helperText`)
+     */
+    error?: string;
+    /**
+     * Set if input is required
+     */
+    required?: boolean;
+    /**
+     * Allows for arbitrary values
+     */
+    disabled?: boolean;
+    /**
+     * Set if input should be full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Allows for arbitrary values
+     */
+    freeSolo?: boolean;
+    /**
+     * Show a loading state
+     *
+     * (e.g. useful when loading options async)
+     */
+    loading?: boolean;
+    /**
+     * Show count from option inside the chips
+     */
+    showChipCount?: boolean;
+    /**
+     * Set variant of input
+     */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /**
+     * Set size of input
+     */
+    size?: 'medium' | 'small';
+    /**
+     * Set placeholder for input
+     */
+    placeholder?: string;
+    /**
+     * Callback when value changed
+     */
+    onChange?: (event: React.SyntheticEvent<Element, Event>, payload: {
+        value: string[];
+    }) => void;
+    /**
+     * Callback when input inside text field changes
+     */
+    onInputChange?: (event: React.SyntheticEvent<Element, Event>, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Callback when input is blurred
+     */
+    onBlur?: React.FocusEventHandler<HTMLDivElement>;
+    /**
+     * Callback when input is focused
+     */
+    onFocus?: React.FocusEventHandler<HTMLDivElement>;
+    /**
+     * Callback when options are opened
+     */
+    onOpen?: (event: React.SyntheticEvent<Element, Event>) => void;
+    /**
+     * Callback when options are closed
+     */
+    onClose?: (event: React.SyntheticEvent<Element, Event>, reason: AutocompleteCloseReason) => void;
+}
+declare const TagInput: React.FC<TagInputProps>;
+export default TagInput;

package/dist/es/inputs/TagInput/TagInput.js

@@ -1,14 +1,13 @@
-import { jsxs as K, jsx as u } from "react/jsx-runtime";
-import e from "prop-types";
-import Q from "@mui/material/FormControl";
-import U from "@mui/material/FormHelperText";
-import X from "@mui/material/Autocomplete";
-import Y from "@mui/material/TextField";
-import Z from "@mui/material/Chip";
-import _ from "@mui/material/CircularProgress";
-import { styled as I } from "@mui/material/styles";
-import ee from "../_components/MenuItem.js";
-const te = I(X)(() => ({
+import { jsxs as J, jsx as d } from "react/jsx-runtime";
+import K from "@mui/material/FormControl";
+import Q from "@mui/material/FormHelperText";
+import U from "@mui/material/Autocomplete";
+import X from "@mui/material/TextField";
+import Y from "@mui/material/Chip";
+import Z from "@mui/material/CircularProgress";
+import { styled as f } from "@mui/material/styles";
+import _ from "../_components/MenuItem.js";
+const ee = f(U)(() => ({
   /* Fix so label is not clashing with popup icon */
   "&.MuiAutocomplete-hasPopupIcon": {
     "& .MuiInputLabel-filled": {
@@ -38,7 +37,7 @@ const te = I(X)(() => ({
       visibility: "hidden"
     }
   }
-})), ie = I(Y)(() => ({
+})), te = f(X)(() => ({
   /* Fix so chips is not clashing with each other */
   "& .MuiChip-root": {
     margin: 1
@@ -116,216 +115,125 @@ const te = I(X)(() => ({
       }
     }
   }
-})), ne = {
-  Root: Q,
-  FormHelperText: U,
-  Autocomplete: te,
-  TextField: ie,
-  MenuItem: ee,
-  Chip: Z
-};
-function T({
-  name: m,
-  label: C,
-  value: d,
-  defaultValue: O,
-  options: l,
-  helperText: s,
-  error: g,
-  required: c,
-  disabled: x,
-  fullWidth: B,
-  placeholder: h,
-  freeSolo: F,
-  loading: f,
+})), ie = {
+  Root: K,
+  FormHelperText: Q,
+  Autocomplete: ee,
+  TextField: te,
+  MenuItem: _,
+  Chip: Y
+}, oe = ({
+  name: b,
+  label: I,
+  value: a,
+  defaultValue: C,
+  options: o,
+  helperText: r,
+  error: m,
+  required: g,
+  disabled: T,
+  fullWidth: x,
+  placeholder: c,
+  freeSolo: B,
+  loading: h,
   variant: L,
-  size: b,
-  showChipCount: y,
+  size: M,
+  showChipCount: F,
   onChange: A,
-  onInputChange: v,
-  onBlur: S,
-  onFocus: H,
-  onOpen: R,
-  onClose: j,
-  components: k,
-  componentsProps: o
-}) {
+  onInputChange: y,
+  onBlur: j,
+  onFocus: O,
+  onOpen: S,
+  onClose: k,
+  components: R,
+  componentsProps: u
+}) => {
   const {
     Root: z,
-    TextField: P,
-    FormHelperText: V,
-    Autocomplete: W,
-    MenuItem: q,
-    Chip: w
-  } = k, D = (t) => {
-    const i = l == null ? void 0 : l.find((n) => ((n == null ? void 0 : n.value) || n) === t);
-    return ((i == null ? void 0 : i.label) || (t == null ? void 0 : t.value) || t) + (y && (i == null ? void 0 : i.count) !== void 0 ? ` (${i == null ? void 0 : i.count})` : "");
-  }, E = (t) => {
-    var i;
-    return ((i = l == null ? void 0 : l.find((n) => ((n == null ? void 0 : n.value) || n) === t)) == null ? void 0 : i.label) || t;
-  }, N = (t) => {
+    TextField: H,
+    FormHelperText: v,
+    Autocomplete: P,
+    MenuItem: V,
+    Chip: D
+  } = R, l = (t) => typeof t == "object" ? t.value : t, E = (t) => {
     var i;
-    return ((i = l == null ? void 0 : l.find((n) => ((n == null ? void 0 : n.value) || n) === t)) == null ? void 0 : i.disabled) || !1;
-  }, $ = (t, i) => {
+    const e = o == null ? void 0 : o.find((n) => l(n) === t);
+    return (typeof e == "object" && (e == null ? void 0 : e.label) || typeof t == "object" && (t == null ? void 0 : t.value) || t) + (F && ((i = typeof e == "object" && e) == null ? void 0 : i.count) !== void 0 ? ` (${typeof e == "object" && (e == null ? void 0 : e.count)})` : "");
+  }, W = (t) => {
+    const e = o == null ? void 0 : o.find((i) => l(i) === t);
+    return typeof e == "object" ? e == null ? void 0 : e.label : t;
+  }, q = (t) => {
+    const e = o == null ? void 0 : o.find((i) => l(i) === t);
+    return typeof e == "object" ? e == null ? void 0 : e.disabled : !1;
+  }, w = (t, e) => {
     A(t, {
-      value: i == null ? void 0 : i.map((n) => (n == null ? void 0 : n.value) || n)
+      value: e == null ? void 0 : e.map((i) => typeof i == "object" ? i == null ? void 0 : i.value : i)
     });
-  }, G = (l == null ? void 0 : l.map((t) => (t == null ? void 0 : t.value) || t)) || [], J = d !== void 0, r = !!g, M = (g || "").trim();
-  return /* @__PURE__ */ K(z, { error: r, required: c, fullWidth: B, ...o.root, children: [
-    /* @__PURE__ */ u(W, { id: m, name: m, value: d, ...J ? {
-      value: d
-    } : {
-      defaultValue: O
-    }, options: G, getOptionLabel: (t) => E(t), getOptionDisabled: (t) => N(t), isOptionEqualToValue: (t, i) => t === i, freeSolo: F, disabled: x, loading: f, onChange: $, onInputChange: (t, i) => v(t, {
-      value: i
-    }), onBlur: S, onFocus: H, onOpen: R, onClose: j, multiple: !0, disableClearable: !0, disablePortal: !0, openOnFocus: !0, renderTags: (t, i) => t.map((n, p) => /* @__PURE__ */ u(w, { label: D(n), size: b, ...i({
-      index: p
-    }), ...o.chip })), renderOption: ({
-      className: t,
-      ...i
-    }, n) => {
-      const p = (l == null ? void 0 : l.find((a) => ((a == null ? void 0 : a.value) || a) === n)) || {
-        value: n
-      };
-      return /* @__PURE__ */ u(q, { ...p, ...i, ...o.menuItem });
-    }, renderInput: (t) => {
-      var i;
-      return /* @__PURE__ */ u(P, { ...t, label: C, error: r, required: c, variant: L, size: b, placeholder: h, fullWidth: !0, ...o.textField, InputProps: {
-        ...t.InputProps,
-        endAdornment: f ? /* @__PURE__ */ u(_, { color: "inherit", size: 20 }) : null,
-        ...((i = o.textField) == null ? void 0 : i.InputProps) || {}
-      }, InputLabelProps: {
-        ...h !== void 0 ? {
-          shrink: !0
-        } : {},
-        ...o.textField.InputLabelProps || {}
-      } });
-    }, ...o.autocomplete }),
-    (M || s) && /* @__PURE__ */ u(V, { ...o.formHelperText, children: r ? M : s })
+  }, N = (o == null ? void 0 : o.map(l)) || [], $ = a !== void 0, p = !!m, s = (m || "").trim();
+  return /* @__PURE__ */ J(z, { error: p, required: g, fullWidth: x, ...u.root, children: [
+    /* @__PURE__ */ d(
+      P,
+      {
+        id: b,
+        value: a,
+        ...$ ? {
+          value: a
+        } : {
+          defaultValue: C
+        },
+        options: N,
+        getOptionLabel: (t) => W(t),
+        getOptionDisabled: (t) => q(t),
+        isOptionEqualToValue: (t, e) => t === e,
+        freeSolo: B,
+        disabled: T,
+        loading: h,
+        onChange: w,
+        onInputChange: (t, e) => y(t, {
+          value: e
+        }),
+        onBlur: j,
+        onFocus: O,
+        onOpen: S,
+        onClose: k,
+        multiple: !0,
+        disableClearable: !0,
+        disablePortal: !0,
+        openOnFocus: !0,
+        renderTags: (t, e) => t.map((i, n) => /* @__PURE__ */ d(D, { label: E(i), size: M, ...e({
+          index: n
+        }), ...u.chip })),
+        renderOption: ({
+          className: t,
+          ...e
+        }, i) => {
+          const n = (o == null ? void 0 : o.find((G) => l(G) === i)) || {
+            value: i
+          };
+          return /* @__PURE__ */ d(V, { ...typeof n == "object" ? n : {
+            value: n
+          }, ...e, ...u.menuItem });
+        },
+        renderInput: (t) => {
+          var e;
+          return /* @__PURE__ */ d(H, { ...t, label: I, error: p, required: g, variant: L, size: M, placeholder: c, fullWidth: !0, ...u.textField, InputProps: {
+            ...t.InputProps,
+            endAdornment: h ? /* @__PURE__ */ d(Z, { color: "inherit", size: 20 }) : null,
+            ...((e = u.textField) == null ? void 0 : e.InputProps) || {}
+          }, InputLabelProps: {
+            ...c !== void 0 ? {
+              shrink: !0
+            } : {},
+            ...u.textField.InputLabelProps || {}
+          } });
+        },
+        ...u.autocomplete
+      }
+    ),
+    (s || r) && /* @__PURE__ */ d(v, { ...u.formHelperText, children: p ? s : r })
   ] });
-}
-T.propTypes = {
-  /**
-   * Name of input
-   */
-  name: e.string,
-  /**
-   * Label of input
-   */
-  label: e.string,
-  /**
-   * Value of input
-   */
-  value: e.arrayOf(e.string),
-  /**
-   * Default value of input
-   */
-  defaultValue: e.arrayOf(e.string),
-  /**
-   * Options for input
-   */
-  options: e.arrayOf(e.oneOfType([e.string, e.shape({
-    value: e.string,
-    label: e.string,
-    count: e.oneOfType([e.number, e.string]),
-    disabled: e.bool
-  })])),
-  /**
-   * Help text underneath input
-   */
-  helperText: e.string,
-  /**
-   * Error to display underneath input (overrides `helperText`)
-   */
-  error: e.string,
-  /**
-   * Set if input is required
-   */
-  required: e.bool,
-  /**
-   * Allows for arbitrary values
-   */
-  disabled: e.bool,
-  /**
-   * Set if input should be full width
-   */
-  fullWidth: e.bool,
-  /**
-   * Allows for arbitrary values
-   */
-  freeSolo: e.bool,
-  /**
-   * Show a loading state
-   *
-   * (e.g. useful when loading options async)
-   */
-  loading: e.bool,
-  /**
-   * Show count from option inside the chips
-   */
-  showChipCount: e.bool,
-  /**
-   * Set variant of input
-   */
-  variant: e.oneOf(["outlined", "filled", "standard"]),
-  /**
-   * Set size of input
-   */
-  size: e.oneOf(["medium", "small"]),
-  /**
-   * Set placeholder for input
-   */
-  placeholder: e.string,
-  // Callbacks
-  /**
-   * Callback when value changed
-   */
-  onChange: e.func,
-  /**
-   * Callback when input inside text field changes
-   */
-  onInputChange: e.func,
-  /**
-   * Callback when input is blurred
-   */
-  onBlur: e.func,
-  /**
-   * Callback when input is focused
-   */
-  onFocus: e.func,
-  /**
-   * Callback when options are opened
-   */
-  onOpen: e.func,
-  /**
-   * Callback when options are closed
-   */
-  onClose: e.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    FormHelperText: e.elementType,
-    Autocomplete: e.elementType,
-    TextField: e.elementType,
-    MenuItem: e.elementType,
-    Chip: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    formHelperText: e.instanceOf(Object),
-    autocomplete: e.instanceOf(Object),
-    textField: e.instanceOf(Object),
-    menuItem: e.instanceOf(Object),
-    chip: e.instanceOf(Object)
-  })
 };
-T.defaultProps = {
+oe.defaultProps = {
   name: void 0,
   label: void 0,
   value: void 0,
@@ -348,9 +256,9 @@ T.defaultProps = {
   onFocus: void 0,
   onOpen: void 0,
   onClose: void 0,
-  components: ne,
+  components: ie,
   componentsProps: void 0
 };
 export {
-  T as default
+  oe as default
 };

package/dist/es/inputs/TagInput/index.d.ts

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

package/dist/es/inputs/TagInput/index.js

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

package/dist/es/inputs/TextInput/TextInput.d.ts

@@ -0,0 +1,80 @@
+import { FocusEventHandler, SyntheticEvent } from 'react';
+import { TextField as MuiTextField } from '@mui/material';
+import type { WithOverrideProps } from '../../_types';
+declare const defaultComponents: {
+    Root: typeof MuiTextField;
+};
+export interface TextInputProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Name for input
+     */
+    name?: string;
+    /**
+     * Label for input
+     */
+    label?: string;
+    /**
+     * Value of input
+     */
+    value?: string;
+    /**
+     * Default value of input (use if uncontrolled)
+     */
+    defaultValue?: string;
+    /**
+     * Help text underneath input
+     */
+    helperText?: string;
+    /**
+     * An error message to display underneath input component
+     */
+    error?: string;
+    /**
+     * Set if required
+     */
+    required?: boolean;
+    /**
+     * Set if disabled
+     */
+    disabled?: boolean;
+    /**
+     * Set if input should be full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Set if multiline (use text area)
+     */
+    multiline?: boolean;
+    /**
+     * Set variant of input
+     */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /**
+     * Set size of input
+     */
+    size?: 'medium' | 'small';
+    /**
+     * Set type of text input
+     */
+    type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+    /**
+     * Set placeholder for input
+     */
+    placeholder?: string;
+    /**
+     * Callback when value changed
+     */
+    onChange?: (event: SyntheticEvent, payload: {
+        value: string;
+    }) => void;
+    /**
+     * Callback when input is blurred
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback when input is focused
+     */
+    onFocus?: FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}
+declare const TextInput: React.FC<TextInputProps>;
+export default TextInput;