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

package/dist/es/inputs/RadioGroupInput/RadioGroupInput.js

@@ -1,16 +1,15 @@
-import { jsxs as N, jsx as l } from "react/jsx-runtime";
-import e from "prop-types";
+import { jsxs as N, jsx as e } from "react/jsx-runtime";
 import U from "@mui/material/FormControl";
-import V from "@mui/material/FormHelperText";
+import W from "@mui/material/FormHelperText";
 import k from "@mui/material/InputLabel";
-import w from "@mui/material/OutlinedInput";
+import q from "@mui/material/OutlinedInput";
 import E from "@mui/material/FilledInput";
-import P from "@mui/material/Input";
+import V from "@mui/material/Input";
 import $ from "@mui/material/Radio";
-import { styled as n } from "@mui/material/styles";
-import A from "../_components/FormControlLabel.js";
-import D from "./components/RadioGroup.js";
-const J = n(w)(() => ({
+import { styled as i } from "@mui/material/styles";
+import w from "../_components/FormControlLabel.js";
+import A from "./components/RadioGroup.js";
+const D = i(q)(() => ({
   paddingLeft: 14,
   paddingRight: 14,
   // Medium Size (56px)
@@ -22,7 +21,7 @@ const J = n(w)(() => ({
   "&.MuiInputBase-sizeSmall": {
     paddingTop: 2
   }
-})), K = n(E)(() => ({
+})), J = i(E)(() => ({
   // Medium Size
   "&:not(.MuiInputBase-sizeSmall)": {
     paddingLeft: 12,
@@ -43,7 +42,7 @@ const J = n(w)(() => ({
       }
     }
   }
-})), Q = n(P)(() => ({
+})), K = i(V)(() => ({
   // Medium Size
   "&:not(.MuiInputBase-sizeSmall)": {
     paddingLeft: 11,
@@ -60,207 +59,95 @@ const J = n(w)(() => ({
       }
     }
   }
-})), X = n(k)(() => ({
+})), Q = i(k)(() => ({
   paddingRight: 8
-})), Y = {
+})), X = {
   Root: U,
-  FormHelperText: V,
-  InputLabel: X,
-  Input: Q,
+  FormHelperText: W,
+  InputLabel: Q,
+  Input: K,
   // Standard Input
-  FilledInput: K,
-  OutlinedInput: J,
-  RadioGroup: D,
-  FormControlLabel: A,
+  FilledInput: J,
+  OutlinedInput: D,
+  RadioGroup: A,
+  FormControlLabel: w,
   Radio: $
-};
-function f({
-  name: o,
-  label: r,
-  value: b,
-  defaultValue: c,
+}, Y = ({
+  name: t,
+  label: n,
+  value: s,
+  defaultValue: f,
   options: g,
-  helperText: a,
-  error: d,
+  helperText: l,
+  error: r,
   required: I,
-  disabled: O,
-  fullWidth: p,
-  orientation: h,
-  labelPlacement: C,
-  justifyContent: T,
-  variant: i,
+  disabled: M,
+  fullWidth: a,
+  orientation: C,
+  labelPlacement: b,
+  justifyContent: h,
+  variant: d,
   size: u,
   onChange: L,
-  onBlur: F,
-  onFocus: R,
-  components: y,
-  componentsProps: t
-}) {
+  onBlur: R,
+  onFocus: F,
+  components: c,
+  componentsProps: o
+}) => {
   const {
-    Root: M,
-    FormHelperText: x,
-    InputLabel: v,
-    Input: j,
-    FilledInput: B,
-    OutlinedInput: S,
-    RadioGroup: z,
+    Root: x,
+    FormHelperText: v,
+    InputLabel: B,
+    Input: S,
+    FilledInput: T,
+    OutlinedInput: z,
+    RadioGroup: y,
     FormControlLabel: G,
     Radio: H
-  } = y, W = {
-    standard: j,
-    filled: B,
-    outlined: S
-  }[i], q = {
+  } = c, O = {
+    standard: S,
+    filled: T,
+    outlined: z
+  }[d], j = {
     standard: {
       disableUnderline: !0,
-      ...t.input
+      ...o.input
     },
     filled: {
       disableUnderline: !0,
-      ...t.filledInput
+      ...o.filledInput
     },
     outlined: {
-      label: r,
+      label: n,
       notched: !0,
-      ...t.outlinedInput
+      ...o.outlinedInput
     }
-  }[i], m = !!d, s = (d || "").trim();
-  return /* @__PURE__ */ N(M, { error: m, required: I, disabled: O, variant: i, fullWidth: p, ...t.root, children: [
-    /* @__PURE__ */ l(v, { htmlFor: o, id: `${o}-label`, shrink: !0, ...t.inputLabel, children: r }),
-    /* @__PURE__ */ l(W, { id: o, name: o, fullWidth: p, size: u, inputComponent: z, inputProps: {
-      id: o,
-      value: b,
-      defaultValue: c,
+  }[d], p = !!r, m = (r || "").trim();
+  return /* @__PURE__ */ N(x, { error: p, required: I, disabled: M, variant: d, fullWidth: a, ...o.root, children: [
+    /* @__PURE__ */ e(B, { htmlFor: t, id: `${t}-label`, shrink: !0, ...o.inputLabel, children: n }),
+    /* @__PURE__ */ e(O, { id: t, name: t, fullWidth: a, size: u, inputComponent: y, inputProps: {
+      id: t,
+      value: s,
+      defaultValue: f,
       options: g,
-      orientation: h,
-      labelPlacement: C,
-      justifyContent: T,
+      orientation: C,
+      labelPlacement: b,
+      justifyContent: h,
       size: u,
       onChange: L,
-      onFocus: R,
-      onBlur: F,
+      onFocus: F,
+      onBlur: R,
       FormControlLabelComponent: G,
-      formControlLabelProps: t.formControlLabel,
+      formControlLabelProps: o.formControlLabel,
       RadioComponent: H,
-      radioProps: t.radio,
-      vdtClassNames: t.radioGroup.className,
-      ...t.radioGroup
-    }, ...q }),
-    (s || a) && /* @__PURE__ */ l(x, { ...t.formHelperText, children: m ? s : a })
+      radioProps: o.radio,
+      vdtClassNames: o.radioGroup.className,
+      ...o.radioGroup
+    }, ...j }),
+    (m || l) && /* @__PURE__ */ e(v, { ...o.formHelperText, children: p ? m : l })
   ] });
-}
-f.propTypes = {
-  /**
-   * Name of input
-   */
-  name: e.string,
-  /**
-   * Label of input
-   */
-  label: e.string,
-  /**
-   * Value of input
-   */
-  value: e.string,
-  /**
-   * Default value of input (use if uncontrolled)
-   */
-  defaultValue: e.string,
-  /**
-   * Options for input
-   */
-  options: e.arrayOf(e.shape({
-    name: e.string,
-    value: e.string,
-    label: e.string,
-    disabled: e.bool
-  })),
-  /**
-   * Help text underneath input
-   */
-  helperText: e.string,
-  /**
-   * Error to display underneath input (overrides `helperText`)
-   */
-  error: e.string,
-  /**
-   * Set if required
-   */
-  required: e.bool,
-  /**
-   * Set if disabled
-   */
-  disabled: e.bool,
-  /**
-   * Set if input should be full width
-   */
-  fullWidth: e.bool,
-  /**
-   * Set direction inputs should be aligned
-   */
-  orientation: e.oneOf(["horizontal", "vertical"]),
-  /**
-   * Radio label placement
-   */
-  labelPlacement: e.oneOf(["end", "start", "bottom", "top"]),
-  /**
-   * Alignment of inputs
-   *
-   * Only used when `orientation:horizontal`
-   */
-  justifyContent: e.oneOf(["flex-start", "center", "space-around", "space-evenly", "space-between", "flex-end"]),
-  /**
-   * Set variant of input
-   */
-  variant: e.oneOf(["outlined", "filled", "standard"]),
-  /**
-   * Whether the slider is a range or not
-   */
-  size: e.oneOf(["medium", "small"]),
-  // Callbacks
-  /**
-   * Callback when value changed
-   */
-  onChange: e.func,
-  /**
-   * Callback when input is blurred
-   */
-  onBlur: e.func,
-  /**
-   * Callback when input is focused
-   */
-  onFocus: e.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: e.shape({
-    Root: e.elementType,
-    FormHelperText: e.elementType,
-    InputLabel: e.elementType,
-    Input: e.elementType,
-    FilledInput: e.elementType,
-    OutlinedInput: e.elementType,
-    RadioGroup: e.elementType,
-    FormControlLabel: e.elementType,
-    Radio: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    formHelperText: e.instanceOf(Object),
-    inputLabel: e.instanceOf(Object),
-    input: e.instanceOf(Object),
-    filledInput: e.instanceOf(Object),
-    outlinedInput: e.instanceOf(Object),
-    radioGroup: e.instanceOf(Object),
-    formControlLabel: e.instanceOf(Object),
-    radio: e.instanceOf(Object)
-  })
 };
-f.defaultProps = {
+Y.defaultProps = {
   name: void 0,
   label: void 0,
   value: void 0,
@@ -279,9 +166,9 @@ f.defaultProps = {
   onChange: () => null,
   onBlur: void 0,
   onFocus: void 0,
-  components: Y,
+  components: X,
   componentsProps: void 0
 };
 export {
-  f as default
+  Y as default
 };

package/dist/es/inputs/RadioGroupInput/components/RadioGroup.d.ts

@@ -0,0 +1,42 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { RadioGroupProps as MuiRadioGroupProps, FormControlLabelProps as MuiFormControlLabelProps, RadioProps as MuiRadioProps } from '@mui/material';
+export interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'onChange'> {
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    options?: {
+        name: string;
+        value: string;
+        label?: string;
+        count?: string | number;
+        disabled?: boolean;
+        [key: string]: any;
+    }[];
+    orientation?: 'horizontal' | 'vertical';
+    labelPlacement?: 'bottom' | 'top' | 'end' | 'start';
+    justifyContent?: string;
+    size?: 'small' | 'medium';
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>, payload: {
+        value: string;
+    }) => void;
+    FormControlLabelComponent?: (props?: MuiFormControlLabelProps & {
+        count?: string | number;
+        orientation?: 'horizontal' | 'vertical';
+        size?: 'small' | 'medium';
+    }) => JSX.Element;
+    formControlLabelProps?: MuiFormControlLabelProps & {
+        [key: string]: any;
+    };
+    RadioComponent?: (props?: MuiRadioProps) => JSX.Element;
+    radioProps?: MuiRadioProps & {
+        [key: string]: any;
+    };
+    vdtClassNames: string;
+    autoComplete: boolean;
+    autoFocus: boolean;
+    rows: boolean;
+    type: string;
+}
+declare const RadioGroup: ForwardRefExoticComponent<Pick<RadioGroupProps, keyof RadioGroupProps> & RefAttributes<unknown>>;
+export default RadioGroup;

package/dist/es/inputs/RadioGroupInput/components/RadioGroup.js

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as G } from "react";
+import { forwardRef as M } from "react";
 import N from "@mui/material/RadioGroup";
-import P from "@mui/material/FormControlLabel";
-import $ from "@mui/material/Radio";
-import { styled as y } from "@mui/material/styles";
-const x = y(N, {
+import n from "@mui/material/FormControlLabel";
+import m from "@mui/material/Radio";
+import { styled as $ } from "@mui/material/styles";
+const j = $(N, {
   shouldForwardProp: (o) => o !== "justifyContent"
 })(({
   row: o,
@@ -22,51 +22,67 @@ const x = y(N, {
     marginLeft: 0,
     marginRight: 1.5
   }
-})), K = G(({
+})), x = M(({
   id: o,
   value: l,
-  defaultValue: n,
-  disabled: i,
-  options: s,
-  orientation: e,
-  labelPlacement: d,
-  justifyContent: u,
-  size: m,
-  onChange: c,
-  FormControlLabelComponent: p = P,
-  formControlLabelProps: f = {},
-  RadioComponent: h = $,
-  radioProps: C = {},
+  defaultValue: s,
+  disabled: u,
+  options: e,
+  orientation: d,
+  labelPlacement: v,
+  justifyContent: C,
+  size: i,
+  onChange: p,
+  FormControlLabelComponent: c = n,
+  formControlLabelProps: f,
+  RadioComponent: b = m,
+  radioProps: h,
   ...g
-}, b) => {
+}, P) => {
   const {
     vdtClassNames: R,
-    // Ignore
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     className: S,
-    autoComplete: j,
+    // ignore as it adds styles we don't want
+    autoComplete: z,
     autoFocus: E,
     rows: _,
     type: k,
-    ...v
+    ...L
   } = g;
-  return /* @__PURE__ */ t(x, { ref: b, id: o, className: R, ...l !== void 0 ? {
+  return /* @__PURE__ */ t(j, { ref: P, id: o, className: R, ...l !== void 0 ? {
     value: l
   } : {
-    defaultValue: n
-  }, row: e === "horizontal", justifyContent: u, onChange: (a) => {
+    defaultValue: s
+  }, row: d === "horizontal", justifyContent: C, onChange: (a) => {
     var r;
-    c(a, {
+    p(a, {
       value: (r = a == null ? void 0 : a.target) == null ? void 0 : r.value
     });
-  }, ...v, children: s.map(({
+  }, ...L, children: e == null ? void 0 : e.map(({
     name: a,
     value: r,
-    label: w,
-    count: F,
-    disabled: L,
-    ...M
-  }) => /* @__PURE__ */ t(p, { label: w, count: F, labelPlacement: d, orientation: e, size: m, control: /* @__PURE__ */ t(h, { id: `${o}-${a || r}`, value: r, disabled: L || i, size: m, ...M, ...C }), ...f }, `${o}-${r}`)) });
+    label: F,
+    count: w,
+    disabled: y,
+    ...G
+  }) => /* @__PURE__ */ t(c, { label: F, count: w, labelPlacement: v, orientation: d, size: i, control: /* @__PURE__ */ t(b, { id: `${o}-${a || r}`, value: r, disabled: y || u, size: i, ...G, ...h ?? {} }), ...f ?? {} }, `${o}-${r}`)) });
 });
+x.defaultProps = {
+  value: void 0,
+  defaultValue: void 0,
+  disabled: void 0,
+  options: void 0,
+  orientation: void 0,
+  labelPlacement: void 0,
+  justifyContent: void 0,
+  size: void 0,
+  onChange: void 0,
+  FormControlLabelComponent: n,
+  formControlLabelProps: void 0,
+  RadioComponent: m,
+  radioProps: void 0
+};
 export {
-  K as default
+  x as default
 };

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

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

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

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

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

@@ -0,0 +1,95 @@
+/// <reference types="react" />
+import { TextField as MuiTextField } from '@mui/material';
+import VdtMenuItem from '../_components/MenuItem';
+import type { WithOverrideProps } from '../../_types';
+declare const StyledMuiTextField: typeof MuiTextField;
+declare const defaultComponents: {
+    Root: typeof StyledMuiTextField;
+    MenuItem: typeof VdtMenuItem;
+};
+export interface SelectInputProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Name for input (htmlFor attribute of InputLabel)
+     */
+    name?: string;
+    /**
+     * Label of input
+     */
+    label?: string;
+    /**
+     * Value of input (uncontrolled if unset)
+     */
+    value?: string | string[];
+    /**
+     * Default value of input component (use with uncontrolled)
+     */
+    defaultValue?: string | string[];
+    /**
+     * Options for input
+     */
+    options?: {
+        value: string;
+        label?: string;
+        count?: number;
+    }[];
+    /**
+     * 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 multiple options can be selected
+     */
+    multiple?: 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.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, payload: {
+        value: string | string[];
+    }) => void;
+    /**
+     * Callback when input is blurred
+     */
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback when input is focused
+     */
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback when options are opened
+     */
+    onOpen?: (event: React.SyntheticEvent<Element, Event>) => void;
+    /**
+     * Callback when options are closed
+     */
+    onClose?: (event: React.SyntheticEvent<Element, Event>) => void;
+}
+declare const SelectInput: React.FC<SelectInputProps>;
+export default SelectInput;