@vidispine/vdt-mui 23.2.0-pre.2 → 23.2.0

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

@@ -0,0 +1,362 @@
+import { jsx as p, jsxs as kt } from "react/jsx-runtime";
+import { useState as f, useRef as xt } from "react";
+import s from "dayjs";
+import Ot from "dayjs/plugin/customParseFormat";
+import Rt from "dayjs/plugin/localeData";
+import t from "prop-types";
+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 "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";
+s.extend(Rt);
+s.extend(Ot);
+const It = ["en", "en-gb", "de", "sv", "fr"], Ft = k(Pt)(({
+  theme: h
+}) => ({
+  padding: h.spacing(2),
+  zIndex: 50
+})), Bt = k(Et)(() => ({
+  "& .VdtMaskedTextInput-inputComponent": {
+    minWidth: 200
+  }
+})), Nt = k(wt)(() => ({
+  marginTop: -15
+})), $t = {
+  Root: Bt,
+  RootWrapper: Dt,
+  ClickAwayListener: Mt,
+  Popper: Ft,
+  Grow: At,
+  CalendarPicker: Nt
+};
+function B({
+  name: h,
+  label: N,
+  placeholder: $,
+  value: x,
+  defaultValue: O,
+  error: G,
+  helperText: q,
+  required: z,
+  disabled: R,
+  disablePast: D,
+  disableFuture: M,
+  disableHighlightToday: H,
+  fullWidth: J,
+  showDouble: _,
+  variant: V,
+  min: P,
+  max: A,
+  locale: K,
+  closeOnSubmit: Q,
+  submitOnChange: m,
+  invalidDateRangeText: U,
+  onChange: X,
+  onSubmit: Y,
+  onBlur: Z,
+  onFocus: tt,
+  onMonthChange: et,
+  components: ot,
+  componentsProps: c
+}) {
+  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({
+    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) || {
+    start: "",
+    end: ""
+  }, ht = o != null && o.start || o != null && o.end ? jt({
+    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) => {
+    const {
+      start: n = "",
+      end: a = ""
+    } = r || {};
+    JSON.stringify(C.current) !== JSON.stringify({
+      start: n,
+      end: a
+    }) && (Y(null, {
+      value: {
+        start: n,
+        end: a
+      }
+    }), 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 = {
+      start: a,
+      end: d
+    };
+    r && n && r > n && (e = {
+      start: (e == null ? void 0 : e.start) !== (o == null ? void 0 : o.start) ? a : d,
+      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({
+      start: a,
+      end: d
+    });
+  }, yt = () => {
+    T(E);
+  }, W = () => {
+    y({
+      start: void 0,
+      end: void 0
+    }), m || T({
+      start: void 0,
+      end: void 0
+    }), u("START");
+  }, vt = (r, {
+    maskedValue: n
+  }) => {
+    if (!n) {
+      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
+    });
+  }, St = Wt({
+    ...o,
+    min: P,
+    max: A,
+    disablePast: D,
+    disableFuture: M
+  }) ? void 0 : U;
+  return /* @__PURE__ */ p(
+    at,
+    {
+      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 }) }) })
+      ] })
+    }
+  );
+}
+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 = {
+  name: void 0,
+  label: void 0,
+  value: void 0,
+  defaultValue: void 0,
+  showDouble: !0,
+  error: void 0,
+  helperText: void 0,
+  placeholder: void 0,
+  required: !1,
+  disabled: !1,
+  disablePast: !1,
+  disableFuture: !1,
+  disableHighlightToday: !1,
+  fullWidth: !0,
+  closeOnSubmit: !0,
+  submitOnChange: !0,
+  variant: "outlined",
+  min: void 0,
+  max: void 0,
+  locale: void 0,
+  invalidDateRangeText: " ",
+  onChange: () => null,
+  onSubmit: () => null,
+  onBlur: () => null,
+  onFocus: () => null,
+  onMonthChange: () => null,
+  components: $t,
+  componentsProps: void 0
+};
+export {
+  B as default
+};

package/dist/es/inputs/DateRangeInput/components/utils/valueManagers.js

@@ -0,0 +1,20 @@
+import n from "dayjs";
+import { isValidDate as m } from "../../utils/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("");
+}, c = ({
+  start: r,
+  end: e,
+  localeDateFormat: t
+}) => {
+  const o = m(r) ? n(r).format(t) : void 0, s = m(e) ? n(e).format(t) : void 0;
+  if (!(!o && !s))
+    return `${o || Array.from({
+      length: t.split(/\W/g).join("").length
+    }).map(() => "0").join("")} - ${s || ""}`;
+};
+export {
+  c as getFormattedTextValue,
+  l as getMaskStr
+};

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

@@ -0,0 +1,11 @@
+import { styled as n } from "@mui/material/styles";
+import { withOverrides as r } from "../../_utils/withOverrides.js";
+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.js

@@ -0,0 +1,31 @@
+import o from "dayjs";
+const a = (r, e) => r ? o(r, e, !0).isValid() : !1, t = (r, {
+  min: e,
+  max: i
+}) => !(!r || e !== void 0 && o(r).isBefore(e) || i !== void 0 && o(r).isAfter(i)), c = ({
+  start: r,
+  end: e,
+  min: i,
+  max: s,
+  disablePast: n,
+  disableFuture: u
+}) => {
+  const f = o();
+  return !(r && (!t(r, {
+    min: i,
+    max: s
+  }) || !t(r, {
+    min: n ? f.subtract(1, "day") : void 0,
+    max: u ? f : void 0
+  })) || e && (!t(e, {
+    min: i,
+    max: s
+  }) || !t(e, {
+    min: n ? f.subtract(1, "day") : void 0,
+    max: u ? f : void 0
+  })));
+};
+export {
+  c as isAllowedRange,
+  a as isValidDate
+};

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

@@ -0,0 +1,250 @@
+import { jsx as P } from "react/jsx-runtime";
+import { useState as Z, useMemo as T } 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,
+  error: f,
+  helperText: p,
+  required: A,
+  disabled: M,
+  fullWidth: R,
+  variant: q,
+  size: B,
+  date: t,
+  time: o,
+  min: n,
+  max: l,
+  views: c,
+  locale: E,
+  onChange: h,
+  onBlur: S,
+  onFocus: W,
+  components: $,
+  componentsProps: i
+}) {
+  var g;
+  const {
+    Root: V,
+    DateTimePicker: b,
+    DatePicker: O,
+    TimePicker: D,
+    LocalizationProvider: w
+  } = $;
+  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)
+    } : {},
+    ...l ? {
+      maxDateTime: r(l)
+    } : {}
+  } : t ? {
+    ...n ? {
+      minDate: r(n)
+    } : {},
+    ...l ? {
+      maxDate: r(l)
+    } : {}
+  } : o ? {
+    ...n ? {
+      minTime: r(n)
+    } : {},
+    ...l ? {
+      maxTime: r(l)
+    } : {}
+  } : {}, [t, l, n, o]), {
+    Picker: K,
+    pickerProps: N
+  } = T(() => t && o ? {
+    Picker: b,
+    pickerProps: i.dateTimePicker
+  } : t === !0 ? {
+    Picker: O,
+    pickerProps: i.datePicker
+  } : o === !0 ? {
+    Picker: D,
+    pickerProps: i.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()
+      });
+    } else
+      u || (m || y(null), h(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)
+  })
+};
+z.defaultProps = {
+  name: void 0,
+  label: void 0,
+  value: void 0,
+  defaultValue: void 0,
+  error: void 0,
+  helperText: void 0,
+  required: !1,
+  disabled: !1,
+  fullWidth: !0,
+  variant: "outlined",
+  size: "medium",
+  date: !0,
+  time: !0,
+  min: void 0,
+  max: void 0,
+  locale: void 0,
+  views: void 0,
+  onChange: () => null,
+  onBlur: void 0,
+  onFocus: void 0,
+  components: ce,
+  componentsProps: void 0
+};
+export {
+  z as default
+};

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

@@ -0,0 +1,11 @@
+import { styled as r } from "@mui/material/styles";
+import { withOverrides as m } from "../../_utils/withOverrides.js";
+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
+};