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

package/dist/es/inputs/DateTimeInput/DateTimeInput.js

@@ -1,227 +1,128 @@
 import { jsx as P } from "react/jsx-runtime";
-import { useState as Z, useMemo as T } from "react";
+import { useState as X, useMemo as v } from "react";
 import "dayjs/locale/fr";
 import "dayjs/locale/de";
 import "dayjs/locale/sv";
 import "dayjs/locale/en-gb";
 import r from "dayjs";
-import _ from "dayjs/plugin/customParseFormat";
-import ee from "dayjs/plugin/localeData";
-import re from "dayjs/plugin/toObject";
-import e from "prop-types";
-import ie from "@mui/material/TextField";
-import { DateTimePicker as te, DatePicker as oe, TimePicker as ne, LocalizationProvider as le } from "@mui/x-date-pickers";
-import { AdapterDayjs as ae } from "@mui/x-date-pickers/AdapterDayjs";
-const ce = {
-  Root: ie,
-  DateTimePicker: te,
-  DatePicker: oe,
-  TimePicker: ne,
-  LocalizationProvider: le
-}, x = ["en", "en-gb", "de", "sv", "fr"];
-function z({
-  name: C,
-  label: F,
-  value: v,
-  defaultValue: I,
+import Y from "dayjs/plugin/customParseFormat";
+import Z from "dayjs/plugin/localeData";
+import _ from "dayjs/plugin/toObject";
+import w from "@mui/material/TextField";
+import { DateTimePicker as ee, DatePicker as re, TimePicker as ie, LocalizationProvider as te } from "@mui/x-date-pickers";
+import { AdapterDayjs as oe } from "@mui/x-date-pickers/AdapterDayjs";
+const le = {
+  Root: w,
+  DateTimePicker: ee,
+  DatePicker: re,
+  TimePicker: ie,
+  LocalizationProvider: te
+}, ae = ["en", "en-gb", "de", "sv", "fr"], ue = ({
+  name: y,
+  label: z,
+  value: T,
+  defaultValue: F,
   error: f,
-  helperText: p,
-  required: A,
-  disabled: M,
-  fullWidth: R,
-  variant: q,
-  size: B,
-  date: t,
-  time: o,
-  min: n,
+  helperText: D,
+  required: g,
+  disabled: I,
+  fullWidth: A,
+  variant: M,
+  size: O,
+  date: i,
+  time: t,
+  min: o,
   max: l,
-  views: c,
+  views: u,
   locale: E,
-  onChange: h,
-  onBlur: S,
-  onFocus: W,
+  onChange: L,
+  onBlur: R,
+  onFocus: S,
   components: $,
-  componentsProps: i
-}) {
-  var g;
+  componentsProps: e
+}) => {
+  var p;
   const {
-    Root: V,
-    DateTimePicker: b,
-    DatePicker: O,
-    TimePicker: D,
-    LocalizationProvider: w
+    Root: q,
+    DateTimePicker: m,
+    DatePicker: h,
+    TimePicker: x,
+    LocalizationProvider: B
   } = $;
-  r.extend(re), r.extend(_), r.extend(ee);
-  const [G, y] = Z(I), H = T(() => (c == null ? void 0 : c.length) > 0 ? c : t && o ? ["year", "month", "day", "hours", "minutes"] : t ? ["year", "month", "day"] : o ? ["hours", "minutes"] : [], [t, o, c]), J = T(() => t && o ? {
-    ...n ? {
-      minDateTime: r(n)
+  r.extend(_), r.extend(Y), r.extend(Z);
+  const [W, b] = X(F), G = v(() => (u == null ? void 0 : u.length) > 0 ? u : i && t ? ["year", "month", "day", "hours", "minutes"] : i ? ["year", "month", "day"] : t ? ["hours", "minutes"] : [], [i, t, u]), H = v(() => i && t ? {
+    ...o ? {
+      minDateTime: r(o)
     } : {},
     ...l ? {
       maxDateTime: r(l)
     } : {}
-  } : t ? {
-    ...n ? {
-      minDate: r(n)
+  } : i ? {
+    ...o ? {
+      minDate: r(o)
     } : {},
     ...l ? {
       maxDate: r(l)
     } : {}
-  } : o ? {
-    ...n ? {
-      minTime: r(n)
+  } : t ? {
+    ...o ? {
+      minTime: r(o)
     } : {},
     ...l ? {
       maxTime: r(l)
     } : {}
-  } : {}, [t, l, n, o]), {
-    Picker: K,
-    pickerProps: N
-  } = T(() => t && o ? {
-    Picker: b,
-    pickerProps: i.dateTimePicker
+  } : {}, [i, l, o, t]), {
+    Picker: J,
+    pickerProps: K
+  } = v(() => i && t ? {
+    Picker: m,
+    pickerProps: e.dateTimePicker
+  } : i === !0 ? {
+    Picker: h,
+    pickerProps: e.datePicker
   } : t === !0 ? {
-    Picker: O,
-    pickerProps: i.datePicker
-  } : o === !0 ? {
-    Picker: D,
-    pickerProps: i.timePicker
+    Picker: x,
+    pickerProps: e.timePicker
   } : {
-    Picker: () => null,
-    pickerProps: {}
-  }, [O, b, D, i.datePicker, i.dateTimePicker, i.timePicker, t, o]), m = v !== void 0, L = !!f, s = E || r.locale() || "en", Q = (a, u) => {
-    const Y = `${r.Ls[s].formats.L} ${r.Ls[s].formats.LT}`, d = r(u, Y, !0), k = (a == null ? void 0 : a.isValid()) && a || (d == null ? void 0 : d.isValid()) && d;
-    if (k) {
-      const j = k.format();
-      m || y(j), h(null, {
-        value: j,
-        units: k.toObject()
+    Picker: m,
+    pickerProps: e.dateTimePicker
+  }, [h, m, x, e.datePicker, e.dateTimePicker, e.timePicker, i, t]), k = T !== void 0, j = !!f, n = E || r.locale() || "en", N = (a, c) => {
+    const V = `${r.Ls[n].formats.L} ${r.Ls[n].formats.LT}`, d = r(c, V, !0), s = (a == null ? void 0 : a.isValid()) && a || (d == null ? void 0 : d.isValid()) && d;
+    if (s) {
+      const C = s.format();
+      k || b(C), L(null, {
+        value: C,
+        units: s.toObject()
       });
     } else
-      u || (m || y(null), h(null, {
+      c || (k || b(null), L(null, {
         value: null,
         units: null
       }));
-  }, U = (m ? v : G) || null, X = (f || "").trim();
-  return /* @__PURE__ */ P(w, { dateAdapter: ae, adapterLocale: (x.includes(s) ? s : (g = r) == null ? void 0 : g.locale()) || "en", ...i.localizationProvider, children: /* @__PURE__ */ P(K, { value: U, label: F, name: C, disabled: M, views: H, onChange: Q, ...J, ...N, renderInput: (a) => {
-    var u;
-    return /* @__PURE__ */ P(V, { ...a, fullWidth: R, helperText: (X || p) && L ? f : p, error: L, required: A, variant: q, size: B, autoComplete: "off", onBlur: S, onFocus: W, ...i == null ? void 0 : i.root, InputLabelProps: {
-      shrink: !0,
-      ...a.InputLabelProps || {},
-      ...((u = i == null ? void 0 : i.root) == null ? void 0 : u.InputLabelProps) || {}
-    } });
-  } }) });
-}
-z.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,
-  /**
-   * 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 variant of input
-   */
-  variant: e.oneOf(["outlined", "filled", "standard"]),
-  /**
-   * Set variant of input
-   */
-  size: e.oneOf(["medium", "small"]),
-  /**
-   * Control whether picker should use date
-   */
-  date: e.bool,
-  /**
-   * Control whether picker should use time
-   */
-  time: e.bool,
-  /**
-   * Set min date and/or time to pick
-   */
-  min: e.string,
-  /**
-   * Set max date and/or time to pick
-   */
-  max: e.string,
-  /**
-   * Change locale for date and time per component
-   *
-   * Note: will by default use what's set with `days.locale()` globally
-   */
-  locale: e.oneOf(x),
-  /**
-   * Set custom date selection views
-   *
-   * _Note: By default decides based on `date` and `time` booleans_
-   */
-  views: e.arrayOf(e.oneOf(["year", "month", "day", "hours", "minutes"])),
-  // Callbacks
-  /**
-   * Callback when value changed
-   *
-   * Note: Only triggered when changed to a valid date
-   */
-  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,
-    DateTimePicker: e.elementType,
-    DatePicker: e.elementType,
-    TimePicker: e.elementType,
-    LocalizationProvider: e.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: e.shape({
-    root: e.instanceOf(Object),
-    dateTimePicker: e.instanceOf(Object),
-    datePicker: e.instanceOf(Object),
-    timePicker: e.instanceOf(Object),
-    localizationProvider: e.instanceOf(Object)
-  })
+  }, Q = (k ? T : W) || null, U = (f || "").trim();
+  return /* @__PURE__ */ P(B, { dateAdapter: oe, adapterLocale: (ae.includes(n) ? n : (p = r) == null ? void 0 : p.locale()) || "en", ...e.localizationProvider, children: /* @__PURE__ */ P(
+    J,
+    {
+      value: Q,
+      label: z,
+      name: y,
+      disabled: I,
+      views: G,
+      onChange: N,
+      ...H,
+      ...K,
+      renderInput: (a) => {
+        var c;
+        return /* @__PURE__ */ P(q, { ...a, fullWidth: A, helperText: (U || D) && j ? f : D, error: j, required: g, variant: M, size: O, autoComplete: "off", onBlur: R, onFocus: S, ...e == null ? void 0 : e.root, InputLabelProps: {
+          shrink: !0,
+          ...a.InputLabelProps || {},
+          ...((c = e == null ? void 0 : e.root) == null ? void 0 : c.InputLabelProps) || {}
+        } });
+      }
+    }
+  ) });
 };
-z.defaultProps = {
+ue.defaultProps = {
   name: void 0,
   label: void 0,
   value: void 0,
@@ -238,13 +139,13 @@ z.defaultProps = {
   min: void 0,
   max: void 0,
   locale: void 0,
-  views: void 0,
+  views: [],
   onChange: () => null,
   onBlur: void 0,
   onFocus: void 0,
-  components: ce,
+  components: le,
   componentsProps: void 0
 };
 export {
-  z as default
+  ue as default
 };

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

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

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

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

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

@@ -0,0 +1,131 @@
+/// <reference types="react" />
+import { TextField as MuiTextField } from '@mui/material';
+import VdtReactIMaskInput from './components/MaskedInputComponent';
+import type { MaskedInputProps } from './components/MaskedInputComponent';
+import type { WithOverrideProps } from '../../_types';
+declare const defaultComponents: {
+    Root: typeof MuiTextField;
+    InputComponent: typeof VdtReactIMaskInput;
+};
+export interface MaskedTextInputProps 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;
+    /**
+     * Placeholder for input field
+     */
+    placeholder?: 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 min value for input
+     *
+     * Defaults to `1900-01-01` if `Date` type
+     */
+    min?: string | number;
+    /**
+     * Set max value for input
+     *
+     * Defaults to `9999-01-01` if `Date` type
+     */
+    max?: string | number;
+    /**
+     * Set focused state for input
+     */
+    focused?: boolean;
+    /**
+     * The `react-imask` mask to use for the text input
+     *
+     * Default definitions are:
+     * - `0` any digit
+     * - `a` any letter
+     * - `*` any char
+     * - `[]` make input optional
+     * - `{}` include fixed part in unmasked value
+     * - `` ` `` prevent symbols shift back
+     * - `\` Escape definitions to treat as fixed value
+     */
+    mask?: MaskedInputProps['mask'];
+    /**
+     * Automatically add characters without definitions
+     */
+    eager?: MaskedInputProps['eager'];
+    /**
+     * Overwrite value from the current position
+     */
+    overwrite?: MaskedInputProps['overwrite'];
+    /**
+     * Set false to show mask pattern/format as placeholder
+     */
+    lazy?: MaskedInputProps['lazy'];
+    /**
+     * The `react-imask` definitions for mask characters valid regexp
+     *
+     * _Note: If definition character should be treated as fixed escape with "\\" (e.g. "\\0")_
+     */
+    definitions?: MaskedInputProps['definitions'];
+    /**
+     * Callback when text field value changed
+     */
+    onChange?: (event: InputEvent, payload: {
+        value: string;
+        maskedValue: string;
+    }) => void;
+    /**
+     * Callback when input is blurred
+     */
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback when input is focused
+     */
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback when input is clicked on
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+declare const MaskedTextInput: React.FC<MaskedTextInputProps>;
+export default MaskedTextInput;