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

package/dist/es/inputs/DateRangeInput/DateRangeInput.js

@@ -1,333 +1,190 @@
-import { jsx as p, jsxs as kt } from "react/jsx-runtime";
+import { jsx as c, jsxs as kt } from "react/jsx-runtime";
 import { useState as f, useRef as xt } from "react";
+import "dayjs/locale/fr";
+import "dayjs/locale/de";
+import "dayjs/locale/sv";
+import "dayjs/locale/en-gb";
 import s from "dayjs";
-import Ot from "dayjs/plugin/customParseFormat";
-import Rt from "dayjs/plugin/localeData";
-import t from "prop-types";
+import Rt from "dayjs/plugin/customParseFormat";
+import yt from "dayjs/plugin/localeData";
 import Dt from "@mui/material/Box";
 import Mt from "@mui/material/ClickAwayListener";
-import Pt from "@mui/material/Popper";
-import At from "@mui/material/Grow";
-import { styled as k } from "@mui/material/styles";
+import At from "@mui/material/Popper";
+import Et from "@mui/material/Grow";
+import { styled as R } from "@mui/material/styles";
 import "clsx";
 import { omit as Lt } from "../../_utils/omit.js";
-import wt from "../../general/CalendarPicker/index.js";
-import Et from "../MaskedTextInput/index.js";
-import { getFormattedTextValue as jt, getMaskStr as F } from "./components/utils/valueManagers.js";
-import { isAllowedRange as Wt, isValidDate as S } from "./utils/dateHelpers.js";
-import "dayjs/locale/fr";
-import "dayjs/locale/de";
-import "dayjs/locale/sv";
-import "dayjs/locale/en-gb";
+import Pt from "../../general/CalendarPicker/index.js";
+import bt from "../MaskedTextInput/index.js";
+import { isAllowedRange as It, isValidDate as x } from "./utils/dateHelpers.js";
+import { getFormattedTextValue as wt, getMaskStr as $ } from "./utils/valueManagers.js";
+s.extend(yt);
 s.extend(Rt);
-s.extend(Ot);
-const It = ["en", "en-gb", "de", "sv", "fr"], Ft = k(Pt)(({
+const Nt = R(At)(({
   theme: h
 }) => ({
   padding: h.spacing(2),
   zIndex: 50
-})), Bt = k(Et)(() => ({
+})), Wt = R(bt)(() => ({
   "& .VdtMaskedTextInput-inputComponent": {
     minWidth: 200
   }
-})), Nt = k(wt)(() => ({
+})), $t = R(Pt)(() => ({
   marginTop: -15
-})), $t = {
-  Root: Bt,
+})), Bt = {
+  Root: Wt,
   RootWrapper: Dt,
   ClickAwayListener: Mt,
-  Popper: Ft,
-  Grow: At,
-  CalendarPicker: Nt
-};
-function B({
+  Popper: Nt,
+  Grow: Et,
+  CalendarPicker: $t
+}, Ft = ({
   name: h,
-  label: N,
-  placeholder: $,
-  value: x,
-  defaultValue: O,
-  error: G,
-  helperText: q,
+  label: B,
+  placeholder: F,
+  value: y,
+  defaultValue: D,
+  error: j,
+  helperText: G,
   required: z,
-  disabled: R,
-  disablePast: D,
-  disableFuture: M,
+  disabled: M,
+  disablePast: A,
+  disableFuture: E,
   disableHighlightToday: H,
   fullWidth: J,
-  showDouble: _,
-  variant: V,
-  min: P,
-  max: A,
-  locale: K,
-  closeOnSubmit: Q,
+  showDouble: O,
+  variant: _,
+  min: L,
+  max: P,
+  locale: q,
+  closeOnSubmit: K,
   submitOnChange: m,
-  invalidDateRangeText: U,
-  onChange: X,
-  onSubmit: Y,
-  onBlur: Z,
-  onFocus: tt,
-  onMonthChange: et,
-  components: ot,
-  componentsProps: c
-}) {
+  invalidDateRangeText: Q,
+  onChange: U,
+  onSubmit: V,
+  onBlur: X,
+  onFocus: Y,
+  onMonthChange: Z,
+  components: tt,
+  componentsProps: d
+}) => {
   const {
-    Root: nt,
-    RootWrapper: rt,
-    ClickAwayListener: at,
-    Popper: it,
-    Grow: lt,
-    CalendarPicker: st
-  } = ot, [g, b] = f(null), [dt, ct] = f(s().toString()), pt = (...r) => {
-    const [, {
-      value: n
-    }] = r;
-    ct(n), et(...r);
-  }, C = xt({
+    Root: ot,
+    RootWrapper: et,
+    ClickAwayListener: nt,
+    Popper: rt,
+    Grow: at,
+    CalendarPicker: it
+  } = tt, [g, C] = f(null), [lt, st] = f(s().toString()), dt = (n, {
+    value: e
+  }) => {
+    st(e), Z(null, {
+      value: e
+    });
+  }, v = xt({
     start: "",
     end: ""
-  }), L = !!g, [mt, u] = f("START"), ut = L ? "datetimerange-popper" : void 0, w = K || s.locale() || "en", l = s.Ls[w].formats.L, ft = x !== void 0, [E, j] = f(O), o = (ft ? x : E) || {
+  }), b = !!g, [ct, p] = f("START"), mt = b ? "datetimerange-popper" : void 0, I = q || s.locale() || "en", i = s.Ls[I].formats.L, pt = y !== void 0, [w, N] = f(D), o = (pt ? y : w) || {
     start: "",
     end: ""
-  }, ht = o != null && o.start || o != null && o.end ? jt({
+  }, ut = o != null && o.start || o != null && o.end ? wt({
     start: o == null ? void 0 : o.start,
     end: o == null ? void 0 : o.end,
-    localeDateFormat: l
-  }) : "", gt = `${l.toLowerCase()} - ${l.toLowerCase()}`, bt = (r) => {
-    const n = r.target.selectionStart <= l.length;
-    u(() => n ? "START" : "END"), b(r.target);
-  }, Ct = () => {
-    b(null), m || j(() => C.current);
-  }, T = (r) => {
+    localeDateFormat: i
+  }) : "", ft = `${i.toLowerCase()} - ${i.toLowerCase()}`, ht = (n) => {
+    const e = (n.target instanceof HTMLInputElement ? n.target.selectionStart : 0) <= i.length;
+    p(() => e ? "START" : "END"), C(n.target);
+  }, gt = () => {
+    C(null), m || N(() => v.current);
+  }, S = (n, e = null) => {
     const {
-      start: n = "",
-      end: a = ""
-    } = r || {};
-    JSON.stringify(C.current) !== JSON.stringify({
-      start: n,
-      end: a
-    }) && (Y(null, {
+      start: a = "",
+      end: r = ""
+    } = n || {};
+    JSON.stringify(v.current) !== JSON.stringify({
+      start: a,
+      end: r
+    }) && (V(e, {
       value: {
-        start: n,
-        end: a
+        start: a,
+        end: r
       }
-    }), C.current = {
-      start: n,
-      end: a
-    }, Q && n && a && b(null));
-  }, y = ({
-    start: r,
-    end: n
-  }) => {
-    const a = r == null ? void 0 : r.format(), d = n == null ? void 0 : n.format();
-    let e = {
+    }), v.current = {
       start: a,
-      end: d
+      end: r
+    }, K && a && r && C(null));
+  }, T = ({
+    start: n,
+    end: e
+  }, a = null) => {
+    const r = n == null ? void 0 : n.format(), l = e == null ? void 0 : e.format();
+    let t = {
+      start: r,
+      end: l
     };
-    r && n && r > n && (e = {
-      start: (e == null ? void 0 : e.start) !== (o == null ? void 0 : o.start) ? a : d,
+    n && e && n > e && (t = {
+      start: (t == null ? void 0 : t.start) !== (o == null ? void 0 : o.start) ? r : l,
       end: void 0
     });
-    const i = (e == null ? void 0 : e.start) && (e == null ? void 0 : e.start) !== (o == null ? void 0 : o.start);
-    (e == null ? void 0 : e.end) && (e == null ? void 0 : e.end) !== (o == null ? void 0 : o.end) ? u("START") : i && u("END"), j(e), X(null, {
-      value: e
-    }), m && T(e);
-  }, Tt = (r, n) => {
-    var e, i, v, I;
-    const a = S((e = n.value) == null ? void 0 : e.start) ? s((i = n.value) == null ? void 0 : i.start) : void 0, d = S((v = n.value) == null ? void 0 : v.end) ? s((I = n.value) == null ? void 0 : I.end) : void 0;
-    y({
+    const u = (t == null ? void 0 : t.start) && (t == null ? void 0 : t.start) !== (o == null ? void 0 : o.start);
+    (t == null ? void 0 : t.end) && (t == null ? void 0 : t.end) !== (o == null ? void 0 : o.end) ? p("START") : u && p("END"), N(t), U(a, {
+      value: t
+    }), m && S(t);
+  }, Ct = (n, e) => {
+    var l, t, u, k;
+    const a = x((l = e.value) == null ? void 0 : l.start) ? s((t = e.value) == null ? void 0 : t.start) : void 0, r = x((u = e.value) == null ? void 0 : u.end) ? s((k = e.value) == null ? void 0 : k.end) : void 0;
+    T({
       start: a,
-      end: d
-    });
-  }, yt = () => {
-    T(E);
+      end: r
+    }, n);
+  }, vt = (n) => {
+    S(w, n);
   }, W = () => {
-    y({
+    T({
       start: void 0,
       end: void 0
-    }), m || T({
+    }), m || S({
       start: void 0,
       end: void 0
-    }), u("START");
-  }, vt = (r, {
-    maskedValue: n
+    }), p("START");
+  }, St = (n, {
+    maskedValue: e
   }) => {
-    if (!n) {
+    if (!e) {
       W();
       return;
     }
-    const a = n.split(" - ") || [], [d, e] = a.map((i) => S(i, l) ? s(i, l) : void 0).filter((i) => !!i);
-    d && e && y({
-      start: d,
-      end: e
+    const a = e.split(" - ") || [], [r, l] = a.map((t) => x(t, i) ? s(t, i) : void 0).filter((t) => !!t);
+    r && l && T({
+      start: r,
+      end: l
     });
-  }, St = Wt({
+  }, Tt = It({
     ...o,
-    min: P,
-    max: A,
-    disablePast: D,
-    disableFuture: M
-  }) ? void 0 : U;
-  return /* @__PURE__ */ p(
-    at,
+    min: L,
+    max: P,
+    disablePast: A,
+    disableFuture: E
+  }) ? void 0 : Q;
+  return /* @__PURE__ */ c(
+    nt,
     {
       mouseEvent: "onMouseDown",
       touchEvent: "onTouchStart",
-      onClickAway: Ct,
-      ...Lt(c.clickAwayListener, "className"),
-      children: /* @__PURE__ */ kt(rt, { display: "flex", alignItems: "center", gap: 2, ...c.rootWrapper, children: [
-        /* @__PURE__ */ p(nt, { name: h, label: N, value: ht, placeholder: $ || gt, disabled: R, fullWidth: J, required: z, variant: V, focused: !!g, helperText: q, error: St || G, mask: `${F(l)} - ${F(l)}`, lazy: !0, overwrite: !1, eager: !0, onFocus: tt, onBlur: Z, onChange: vt, ...R ? {} : {
-          onClick: bt
-        }, ...c.root }),
-        /* @__PURE__ */ p(it, { id: ut, open: L, anchorEl: g, transition: !0, ...c.popper, children: ({
-          TransitionProps: r
-        }) => /* @__PURE__ */ p(lt, { ...r, timeout: 300, children: /* @__PURE__ */ p(st, { range: !0, value: o, defaultValue: O, rangeValueToChange: mt, submitOnChange: m, locale: w, monthDate: dt, onReset: W, disableHighlightToday: H, disablePast: D, disableFuture: M, showDouble: _, minDate: P, maxDate: A, onChange: Tt, onMonthChange: pt, onSubmit: yt, ...c.calendarPicker }) }) })
+      onClickAway: gt,
+      ...Lt(d.clickAwayListener, "className"),
+      children: /* @__PURE__ */ kt(et, { display: "flex", alignItems: "center", gap: 2, ...d.rootWrapper, children: [
+        /* @__PURE__ */ c(ot, { name: h, label: B, value: ut, placeholder: F || ft, disabled: M, fullWidth: J, required: z, variant: _, focused: !!g, helperText: G, error: Tt || j, mask: `${$(i)} - ${$(i)}`, lazy: !0, overwrite: !1, eager: !0, onFocus: Y, onBlur: X, onChange: St, ...M ? {} : {
+          onClick: ht
+        }, ...d.root }),
+        /* @__PURE__ */ c(rt, { id: mt, open: b, anchorEl: g, transition: !0, ...d.popper, children: ({
+          TransitionProps: n
+        }) => /* @__PURE__ */ c(at, { ...n, timeout: 300, children: /* @__PURE__ */ c(it, { range: !0, value: o, defaultValue: D, rangeValueToChange: ct, submitOnChange: m, locale: I, monthDate: lt, onReset: W, disableHighlightToday: H, disablePast: A, disableFuture: E, showDouble: O, minDate: L, maxDate: P, onChange: Ct, onMonthChange: dt, onSubmit: vt, ...d.calendarPicker }) }) })
       ] })
     }
   );
-}
-B.propTypes = {
-  /**
-   * Name of input
-   */
-  name: t.string,
-  /**
-   * Label of input
-   */
-  label: t.string,
-  /**
-   * Change the placeholder of the input
-   */
-  placeholder: t.string,
-  /**
-   * Render single or double calendar
-   */
-  showDouble: t.bool,
-  /**
-   * Value of inputs
-   */
-  value: t.shape({
-    start: t.string,
-    end: t.string
-  }),
-  /**
-   * Default value of input (use if uncontrolled)
-   */
-  defaultValue: t.shape({
-    start: t.string,
-    end: t.string
-  }),
-  /**
-   * Help text underneath input
-   */
-  helperText: t.string,
-  /**
-   * Error to display underneath input (overrides `helperText`)
-   */
-  error: t.string,
-  /**
-   * Set if input is required
-   */
-  required: t.bool,
-  /**
-   * Set if input is disabled
-   */
-  disabled: t.bool,
-  /**
-   * Set if past dates should be disabled
-   */
-  disablePast: t.bool,
-  /**
-   * Set if future dates should be disabled
-   */
-  disableFuture: t.bool,
-  /**
-   * Set if highlight today's date should be disabled
-   */
-  disableHighlightToday: t.bool,
-  /**
-   * Set if input should be full width
-   */
-  fullWidth: t.bool,
-  /**
-   * Set if picker will automatically close after selecting valid range
-   */
-  closeOnSubmit: t.bool,
-  /**
-   * Set if picker will automatically submit values after selecting valid range
-   */
-  submitOnChange: t.bool,
-  /**
-   * Set variant of input
-   */
-  variant: t.oneOf(["outlined", "filled", "standard"]),
-  /**
-   * Set min date to pick
-   */
-  min: t.oneOfType([t.string, t.number]),
-  /**
-   * Set max date time to pick
-   */
-  max: t.oneOfType([t.string, t.number]),
-  /**
-   * Change locale for date and time
-   */
-  locale: t.oneOf(It),
-  /**
-   * Text show internally when error occurs
-   *
-   * The default (whitespace) only shows error color
-   */
-  invalidDateRangeText: t.string,
-  // Callbacks
-  /**
-   * Callback when value changed
-   *
-   * Note: Only triggered when changed to a valid date
-   */
-  onChange: t.func,
-  /**
-   * Callback when value submitted in picker
-   *
-   * Note: Also triggered when manually changing text input to a valid date
-   */
-  onSubmit: t.func,
-  /**
-   * Callback when input is blurred
-   */
-  onBlur: t.func,
-  /**
-   * Callback when input is focused
-   */
-  onFocus: t.func,
-  /**
-   * Callback when month is changed
-   */
-  onMonthChange: t.func,
-  // Overrides
-  /**
-   * Replace internal components
-   */
-  components: t.shape({
-    Root: t.elementType,
-    RootWrapper: t.elementType,
-    ClickAwayListener: t.elementType,
-    Popper: t.elementType,
-    Grow: t.elementType,
-    CalendarPicker: t.elementType
-  }),
-  /**
-   * Add internal component props
-   */
-  componentsProps: t.shape({
-    root: t.instanceOf(Object),
-    rootWrapper: t.instanceOf(Object),
-    clickAwayListener: t.instanceOf(Object),
-    popper: t.instanceOf(Object),
-    grow: t.instanceOf(Object),
-    calendarPicker: t.instanceOf(Object)
-  })
 };
-B.defaultProps = {
+Ft.defaultProps = {
   name: void 0,
   label: void 0,
   value: void 0,
@@ -354,9 +211,9 @@ B.defaultProps = {
   onBlur: () => null,
   onFocus: () => null,
   onMonthChange: () => null,
-  components: $t,
+  components: Bt,
   componentsProps: void 0
 };
 export {
-  B as default
+  Ft as default
 };

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { Dayjs } from 'dayjs';
+export declare const isValidDate: (date: string, localeDateFormat?: string) => any;
+export declare const isAllowedRange: ({ start, end, min, max, disablePast, disableFuture, }: {
+    start?: string;
+    end?: string;
+    min?: string | Dayjs;
+    max?: string | Dayjs;
+    disablePast?: boolean;
+    disableFuture?: boolean;
+}) => boolean;

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

@@ -0,0 +1,10 @@
+export declare const parseDateRange: (dateFormat: string, range: string) => {
+    start: string;
+    end: string;
+};
+export declare const getMaskStr: (dateFormat: string) => string;
+export declare const getFormattedTextValue: ({ start, end, localeDateFormat, }: {
+    start: string;
+    end: string;
+    localeDateFormat: string;
+}) => string;

package/dist/es/inputs/DateRangeInput/{components/utils → utils}/valueManagers.js

@@ -1,5 +1,5 @@
 import n from "dayjs";
-import { isValidDate as m } from "../../utils/dateHelpers.js";
+import { isValidDate as m } from "./dateHelpers.js";
 const l = (r) => {
   const [e] = r.split(" - "), t = e.split(/\W/g), o = r.match(/\W/);
   return t.map((i, a) => a === t.length - 1 ? i.replace(/\w/g, "0") : i.replace(/\w/g, "0") + o).join("");

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

@@ -0,0 +1,105 @@
+/// <reference types="react" />
+import { TextField as MuiTextField } from '@mui/material';
+import { DatePicker as MuiDatePicker, DateTimePicker as MuiDateTimePicker, LocalizationProvider as MuiLocalizationProvider, TimePicker as MuiTimePicker } from '@mui/x-date-pickers';
+import type { WithOverrideProps } from '../../_types';
+import type { Dayjs } from 'dayjs';
+declare const defaultComponents: {
+    Root: typeof MuiTextField;
+    DateTimePicker: typeof MuiDateTimePicker;
+    DatePicker: typeof MuiDatePicker;
+    TimePicker: typeof MuiTimePicker;
+    LocalizationProvider: typeof MuiLocalizationProvider;
+};
+export interface DateTimeInputProps extends WithOverrideProps<typeof defaultComponents> {
+    /**
+     * Name of input
+     */
+    name?: string;
+    /**
+     * Label of input
+     */
+    label?: string;
+    /**
+     * Value of input
+     */
+    value?: string;
+    /**
+     * Default value of input (use if uncontrolled)
+     */
+    defaultValue?: 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 input should be full width
+     */
+    fullWidth?: boolean;
+    /**
+     * Set variant of input
+     */
+    variant?: 'outlined' | 'filled' | 'standard';
+    /**
+     * Set size of input
+     */
+    size?: 'medium' | 'small';
+    /**
+     * Control whether picker should use date
+     */
+    date?: boolean;
+    /**
+     * Control whether picker should use time
+     */
+    time?: boolean;
+    /**
+     * Set min date and/or time to pick
+     */
+    min?: string;
+    /**
+     * Set max date and/or 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';
+    /**
+     * Set custom date selection views
+     *
+     * _Note: By default decides based on `date` and `time` booleans_
+     */
+    views?: ('year' | 'month' | 'day' | 'hours' | 'minutes')[];
+    /**
+     * Callback when value changed
+     *
+     * _Note: Only triggered when changed to a valid date_
+     */
+    onChange?: (event: null, payload: {
+        value: string;
+        units: ReturnType<Dayjs['toObject']>;
+    }) => void;
+    /**
+     * Callback when input is blurred
+     */
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    /**
+     * Callback when input is focused
+     */
+    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}
+declare const DateTimeInput: React.FC<DateTimeInputProps>;
+export default DateTimeInput;