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

package/dist/es/inputs/CheckboxGroupInput/CheckboxGroupInput.js

@@ -1,18 +1,17 @@
-import { jsxs as $, jsx as r } from "react/jsx-runtime";
-import e from "prop-types";
-import q from "@mui/material/FormControl";
+import { jsxs as j, jsx as n } from "react/jsx-runtime";
+import $ from "@mui/material/FormControl";
 import U from "@mui/material/FormHelperText";
-import V from "@mui/material/InputLabel";
-import w from "@mui/material/OutlinedInput";
+import W from "@mui/material/InputLabel";
+import q from "@mui/material/OutlinedInput";
 import E from "@mui/material/FilledInput";
-import P from "@mui/material/Input";
-import A from "@mui/material/Checkbox";
-import { styled as n } from "@mui/material/styles";
-import D from "../_components/FormControlLabel.js";
-import J from "./components/CheckboxGroup.js";
-const K = n(V)(() => ({
+import V from "@mui/material/Input";
+import w from "@mui/material/Checkbox";
+import { styled as e } from "@mui/material/styles";
+import A from "../_components/FormControlLabel.js";
+import D from "./components/CheckboxGroup.js";
+const J = e(W)(() => ({
   paddingRight: 8
-})), Q = n(P)(() => ({
+})), K = e(V)(() => ({
   // Medium Size
   "&:not(.MuiInputBase-sizeSmall)": {
     minHeight: 58,
@@ -32,7 +31,7 @@ const K = n(V)(() => ({
       }
     }
   }
-})), X = n(E)(() => ({
+})), Q = e(E)(() => ({
   // Medium Size
   "&:not(.MuiInputBase-sizeSmall)": {
     minHeight: 66,
@@ -55,7 +54,7 @@ const K = n(V)(() => ({
       }
     }
   }
-})), Y = n(w)(() => ({
+})), X = e(q)(() => ({
   paddingLeft: 14,
   paddingRight: 14,
   // Medium Size (56px)
@@ -69,203 +68,92 @@ const K = n(V)(() => ({
     minHeight: 40,
     paddingTop: 2
   }
-})), Z = {
-  Root: q,
-  InputLabel: K,
-  Input: Q,
+})), Y = {
+  Root: $,
+  InputLabel: J,
+  Input: K,
   // Standard input
-  FilledInput: X,
-  OutlinedInput: Y,
-  FormControlLabel: D,
-  FormGroup: J,
+  FilledInput: Q,
+  OutlinedInput: X,
+  FormControlLabel: A,
+  FormGroup: D,
   FormHelperText: U,
-  Checkbox: A
-};
-function f({
-  name: o,
-  label: l,
-  value: c,
-  defaultValue: b,
-  options: g,
-  helperText: a,
-  error: d,
-  required: h,
-  disabled: C,
-  fullWidth: p,
-  orientation: I,
-  labelPlacement: O,
-  justifyContent: x,
+  Checkbox: w
+}, Z = ({
+  name: t,
+  label: d,
+  value: s,
+  defaultValue: h,
+  options: b,
+  helperText: r,
+  error: l,
+  required: g,
+  disabled: f,
+  fullWidth: u,
+  orientation: c,
+  labelPlacement: C,
+  justifyContent: I,
   variant: i,
-  size: u,
-  onChange: y,
-  onBlur: F,
-  onFocus: T,
+  size: a,
+  onChange: x,
+  onBlur: M,
+  onFocus: F,
   components: L,
-  componentsProps: t
-}) {
+  componentsProps: o
+}) => {
   const {
-    Root: M,
-    FormHelperText: v,
-    InputLabel: H,
-    Input: j,
-    FilledInput: k,
-    OutlinedInput: B,
-    FormGroup: S,
-    FormControlLabel: z,
-    Checkbox: R
+    Root: H,
+    FormHelperText: k,
+    InputLabel: v,
+    Input: B,
+    FilledInput: S,
+    OutlinedInput: y,
+    FormGroup: T,
+    FormControlLabel: R,
+    Checkbox: z
   } = L, G = {
-    standard: j,
-    filled: k,
-    outlined: B
-  }[i], W = {
+    standard: B,
+    filled: S,
+    outlined: y
+  }[i], O = {
     standard: {
       disableUnderline: !0,
-      ...t.input
+      ...o.input
     },
     filled: {
       disableUnderline: !0,
-      ...t.filledInput
+      ...o.filledInput
     },
     outlined: {
-      label: l,
+      label: d,
       notched: !0,
-      ...t.outlinedInput
+      ...o.outlinedInput
     }
-  }[i], m = !!d, s = (d || "").trim();
-  return /* @__PURE__ */ $(M, { error: m, required: h, disabled: C, variant: i, fullWidth: p, ...t.root, children: [
-    /* @__PURE__ */ r(H, { htmlFor: o, id: `${o}-label`, shrink: !0, ...t.inputLabel, children: l }),
-    /* @__PURE__ */ r(G, { id: o, name: o, fullWidth: p, size: u, inputComponent: S, "aria-describedby": `${o}-describedby`, inputProps: {
-      value: c,
-      defaultValue: b,
-      options: g,
-      size: u,
-      orientation: I,
-      labelPlacement: O,
-      justifyContent: x,
-      onChange: y,
-      onFocus: T,
-      onBlur: F,
-      FormControlLabelComponent: z,
-      formControlLabelProps: t.formControlLabel,
-      CheckboxComponent: R,
-      checkboxProps: t.checkbox,
-      vdtClassNames: t.formGroup.className,
-      ...t.formGroup
-    }, ...W }),
-    (s || a) && /* @__PURE__ */ r(v, { id: `${o}-describedby`, ...t.formHelperText, children: m ? s : a })
+  }[i], p = !!l, m = (l || "").trim();
+  return /* @__PURE__ */ j(H, { error: p, required: g, disabled: f, variant: i, fullWidth: u, ...o.root, children: [
+    /* @__PURE__ */ n(v, { htmlFor: t, id: `${t}-label`, shrink: !0, ...o.inputLabel, children: d }),
+    /* @__PURE__ */ n(G, { id: t, name: t, fullWidth: u, size: a, inputComponent: T, "aria-describedby": `${t}-describedby`, inputProps: {
+      value: s,
+      defaultValue: h,
+      options: b,
+      size: a,
+      orientation: c,
+      labelPlacement: C,
+      justifyContent: I,
+      onChange: x,
+      onFocus: F,
+      onBlur: M,
+      FormControlLabelComponent: R,
+      formControlLabelProps: o.formControlLabel,
+      CheckboxComponent: z,
+      checkboxProps: o.checkbox,
+      vdtClassNames: o.formGroup.className,
+      ...o.formGroup
+    }, ...O }),
+    (m || r) && /* @__PURE__ */ n(k, { id: `${t}-describedby`, ...o.formHelperText, children: p ? m : r })
   ] });
-}
-f.propTypes = {
-  /**
-   * Name of input
-   */
-  name: e.string,
-  /**
-   * Value of input
-   */
-  value: e.arrayOf(e.string),
-  /**
-   * Default value of input
-   */
-  defaultValue: e.arrayOf(e.string),
-  /**
-   * Label of input
-   */
-  label: e.string,
-  /**
-   * Options for input
-   */
-  options: e.arrayOf(e.shape({
-    name: e.string,
-    value: e.string,
-    label: e.string
-  })),
-  /**
-   * 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,
-  /**
-   * Set if input is 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"]),
-  /**
-   * 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,
-    FormGroup: e.elementType,
-    FormControlLabel: e.elementType,
-    Checkbox: 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),
-    formGroup: e.instanceOf(Object),
-    formControlLabel: e.instanceOf(Object),
-    checkbox: e.instanceOf(Object)
-  })
 };
-f.defaultProps = {
+Z.defaultProps = {
   name: void 0,
   label: void 0,
   value: void 0,
@@ -284,9 +172,9 @@ f.defaultProps = {
   onChange: () => null,
   onBlur: void 0,
   onFocus: void 0,
-  components: Z,
+  components: Y,
   componentsProps: void 0
 };
 export {
-  f as default
+  Z as default
 };

package/dist/es/inputs/CheckboxGroupInput/components/CheckboxGroup.d.ts

@@ -0,0 +1,42 @@
+import { ForwardRefExoticComponent, RefAttributes } from 'react';
+/// <reference types="react" />
+import type { FormGroupProps as MuiFormGroupProps, FormControlLabelProps as MuiFormControlLabelProps, CheckboxProps as MuiCheckboxProps } from '@mui/material';
+export interface CheckboxGroupProps extends Omit<MuiFormGroupProps, '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>, value: {
+        value: string[];
+    }) => void;
+    FormControlLabelComponent?: (props?: MuiFormControlLabelProps & {
+        count?: string | number;
+        orientation?: 'horizontal' | 'vertical';
+        size?: 'small' | 'medium';
+    }) => JSX.Element;
+    formControlLabelProps?: MuiFormControlLabelProps & {
+        [key: string]: any;
+    };
+    CheckboxComponent?: (props?: MuiCheckboxProps) => JSX.Element;
+    checkboxProps?: MuiCheckboxProps & {
+        [key: string]: any;
+    };
+    vdtClassNames: string;
+    autoComplete: boolean;
+    autoFocus: boolean;
+    rows: boolean;
+    type: string;
+}
+declare const CheckboxGroup: ForwardRefExoticComponent<Pick<CheckboxGroupProps, keyof CheckboxGroupProps> & RefAttributes<unknown>>;
+export default CheckboxGroup;

package/dist/es/inputs/CheckboxGroupInput/components/CheckboxGroup.js

@@ -1,18 +1,18 @@
 import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as $, useRef as y } from "react";
+import { forwardRef as M, useRef as $ } from "react";
 import N from "@mui/material/FormGroup";
-import S from "@mui/material/FormControlLabel";
-import j from "@mui/material/Checkbox";
-import { styled as q } from "@mui/material/styles";
-const E = q(N, {
+import j from "@mui/material/FormControlLabel";
+import S from "@mui/material/Checkbox";
+import { styled as z } from "@mui/material/styles";
+const E = z(N, {
   shouldForwardProp: (t) => t !== "justifyContent"
 })(({
   row: t,
-  justifyContent: m
+  justifyContent: n
 }) => ({
   width: "100%",
-  ...t && m ? {
-    justifyContent: m
+  ...t && n ? {
+    justifyContent: n
   } : {},
   "& .MuiFormControlLabel-labelPlacementStart": {
     marginLeft: 1.5,
@@ -22,60 +22,76 @@ const E = q(N, {
     marginLeft: 0,
     marginRight: 1.5
   }
-})), U = $(({
+})), O = M(({
   id: t,
-  value: m,
-  defaultValue: n,
-  required: O,
-  disabled: b,
+  value: n,
+  defaultValue: d,
+  disabled: C,
   options: a,
-  fullWidth: W,
-  orientation: i,
-  labelPlacement: f,
-  justifyContent: g,
+  orientation: b,
+  labelPlacement: h,
+  justifyContent: f,
   size: u,
-  onChange: C,
-  FormControlLabelComponent: p = S,
-  formControlLabelProps: v = {},
-  CheckboxComponent: F = j,
-  checkboxProps: k = {},
-  ...w
-}, x) => {
+  onChange: g,
+  FormControlLabelComponent: p,
+  formControlLabelProps: k,
+  CheckboxComponent: x,
+  checkboxProps: F,
+  ...P
+}, L) => {
   const {
-    vdtClassNames: L,
-    // Ignore
+    vdtClassNames: w,
+    // eslint-disable-next-line @typescript-eslint/naming-convention
     className: _,
-    autoComplete: z,
+    // ignore as it adds styles we don't want
+    autoComplete: q,
     autoFocus: A,
     rows: B,
     type: D,
-    ...M
-  } = w, h = y(), r = m || h.current || [], R = (o) => {
-    var c;
-    const e = (c = o == null ? void 0 : o.target) == null ? void 0 : c.value, s = r != null && r.includes(e) ? r == null ? void 0 : r.filter((d) => d !== e) : [...r, e];
-    h.current = s, C({
-      ...o,
-      target: {
-        ...o.target,
-        value: s
-      }
+    ...R
+  } = P, v = $(), o = n || v.current || [], y = (e) => {
+    var m;
+    const r = (m = e == null ? void 0 : e.target) == null ? void 0 : m.value, s = o != null && o.includes(r) ? o == null ? void 0 : o.filter((i) => i !== r) : [...o, r];
+    v.current = s;
+    const c = {
+      ...e.target,
+      value: s
+    };
+    g({
+      ...e,
+      target: c
     }, {
       value: s
     });
-  }, G = m !== void 0;
-  return /* @__PURE__ */ l(E, { ref: x, className: L, row: i === "horizontal", justifyContent: g, onChange: R, role: "group", ...M, children: a == null ? void 0 : a.map(({
-    name: o,
-    value: e,
+  }, G = n !== void 0;
+  return /* @__PURE__ */ l(E, { ref: L, className: w, row: b === "horizontal", justifyContent: f, onChange: y, role: "group", ...R, children: a == null ? void 0 : a.map(({
+    name: e,
+    value: r,
     label: s,
     count: c,
-    disabled: d,
-    ...P
-  }) => /* @__PURE__ */ l(p, { label: s || e, count: c, labelPlacement: f, orientation: i, size: u, control: /* @__PURE__ */ l(F, { id: `${t}-${o || e}`, value: e, ...G ? {
-    checked: r == null ? void 0 : r.includes(e)
+    disabled: m,
+    ...i
+  }) => /* @__PURE__ */ l(p, { label: s || r, count: c, labelPlacement: h, orientation: b, size: u, control: /* @__PURE__ */ l(x, { id: `${t}-${e || r}`, value: r, ...G ? {
+    checked: o == null ? void 0 : o.includes(r)
   } : {
-    defaultChecked: n == null ? void 0 : n.includes(e)
-  }, disabled: d || b, size: u, ...P, ...k }), ...v }, `${t}-${o || e}`)) });
+    defaultChecked: d == null ? void 0 : d.includes(r)
+  }, disabled: m || C, size: u, ...i, ...F }), ...k }, `${t}-${e || r}`)) });
 });
+O.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: j,
+  formControlLabelProps: void 0,
+  CheckboxComponent: S,
+  checkboxProps: void 0
+};
 export {
-  U as default
+  O as default
 };

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

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

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

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

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

@@ -0,0 +1,150 @@
+/// <reference types="react" />
+import { Box as MuiBox, ClickAwayListener as MuiClickAwayListener, Popper as MuiPopper, Grow as MuiGrow } from '@mui/material';
+import VdtCalendarPicker from '../../general/CalendarPicker';
+import VdtMaskedTextInput from '../MaskedTextInput';
+import type { StyledComponent, WithOverrideProps } from '../../_types';
+declare const StyledMuiPopper: StyledComponent<typeof MuiPopper>;
+declare const StyledVdtMaskedTextInput: typeof VdtMaskedTextInput;
+declare const StyledVdtCalendarPicker: typeof VdtCalendarPicker;
+declare const defaultComponents: {
+    Root: typeof StyledVdtMaskedTextInput;
+    RootWrapper: typeof MuiBox;
+    ClickAwayListener: typeof MuiClickAwayListener;
+    Popper: typeof StyledMuiPopper;
+    Grow: typeof MuiGrow;
+    CalendarPicker: typeof StyledVdtCalendarPicker;
+};
+export interface DateRangeInputProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Name of input
+     */
+    name?: string;
+    /**
+     * Label of input
+     */
+    label?: string;
+    /**
+     * Change the placeholder of the input
+     */
+    placeholder?: string;
+    /**
+     * Render single or double calendar
+     */
+    showDouble?: boolean;
+    /**
+     * Value of inputs
+     */
+    value?: {
+        start?: string;
+        end?: string;
+    };
+    /**
+     * Default value of input (use if uncontrolled)
+     */
+    defaultValue?: {
+        start?: string;
+        end?: string;
+    };
+    /**
+     * Help text underneath input
+     */
+    helperText?: string;
+    /**
+     * Error to display underneath input (overrides `helperText`)
+     */
+    error?: string;
+    /**
+     * Set if input is required
+     */
+    required?: boolean;
+    /**
+     * Set if input is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Set if past dates should be disabled
+     */
+    disablePast?: boolean;
+    /**
+     * Set if future dates should be disabled
+     */
+    disableFuture?: boolean;
+    /**
+     * Set if highlight today's date should be disabled
+     */
+    disableHighlightToday?: boolean;
+    /**
+     * Set if input should be full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Set if picker will automatically close after selecting valid range
+     */
+    closeOnSubmit?: boolean;
+    /**
+     * Set if picker will automatically submit values after selecting valid range
+     */
+    submitOnChange?: boolean;
+    /**
+     * Set variant of input
+     */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /**
+     * Set min date to pick
+     */
+    min?: string;
+    /**
+     * Set max date time to pick
+     */
+    max?: string;
+    /**
+     * Change locale for date and time per component
+     *
+     * _Note: will by default use what's set with `days.locale()` globally_
+     */
+    locale?: 'en' | 'en-gb' | 'de' | 'sv' | 'fr';
+    /**
+     * Text show internally when error occurs
+     *
+     * The default (whitespace) only shows error color
+     */
+    invalidDateRangeText?: string;
+    /**
+     * Callback when value changed
+     *
+     * Note: Only triggered when changed to a valid date
+     */
+    onChange?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null, payload: {
+        value: {
+            start?: string;
+            end?: string;
+        };
+    }) => null;
+    /**
+     * Callback when value submitted in picker
+     *
+     * Note: Also triggered when manually changing text input to a valid date
+     */
+    onSubmit?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent> | null, payload: {
+        value: {
+            start?: string;
+            end?: string;
+        };
+    }) => null;
+    /**
+     * Callback when input is blurred
+     */
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback when input is focused
+     */
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback when month is changed
+     */
+    onMonthChange?: (event: null, payload: {
+        value: string;
+    }) => null;
+}
+declare const DateRangeInput: React.FC<DateRangeInputProps>;
+export default DateRangeInput;